diff --git a/apps/red-ui/src/app/modules/admin/screens/license/combo-chart/combo-chart.component.html b/apps/red-ui/src/app/modules/admin/screens/license/combo-chart/combo-chart.component.html index f72ec50ed..716403b87 100644 --- a/apps/red-ui/src/app/modules/admin/screens/license/combo-chart/combo-chart.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/license/combo-chart/combo-chart.component.html @@ -7,6 +7,7 @@ [legendOptions]="legendOptions" [showLegend]="legend" [view]="[width + legendSpacing, height]" + xmlns:svg="http://www.w3.org/2000/svg" > + @@ -76,7 +78,7 @@ [xScale]="xScaleLine" [yScale]="yScaleLine" ngx-charts-line-series - /> + > + > + > diff --git a/apps/red-ui/src/app/modules/admin/screens/license/combo-chart/combo-chart.component.ts b/apps/red-ui/src/app/modules/admin/screens/license/combo-chart/combo-chart.component.ts index 83fbe63a6..412db6c81 100644 --- a/apps/red-ui/src/app/modules/admin/screens/license/combo-chart/combo-chart.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/license/combo-chart/combo-chart.component.ts @@ -1,14 +1,4 @@ -import { - Component, - ContentChild, - EventEmitter, - HostListener, - Input, - Output, - TemplateRef, - ViewChild, - ViewEncapsulation, -} from '@angular/core'; +import { Component, EventEmitter, HostListener, Input, Output, ViewEncapsulation } from '@angular/core'; import { curveLinear } from 'd3-shape'; import { scaleBand, scaleLinear, scalePoint, scaleTime } from 'd3-scale'; @@ -18,12 +8,12 @@ import { Color, ColorHelper, LegendPosition, - LineSeriesComponent, Orientation, ScaleType, + Series, + StringOrNumberOrDate, ViewDimensions, } from '@swimlane/ngx-charts'; -import { ILineChartSeries } from './models'; @Component({ // eslint-disable-next-line @angular-eslint/component-selector @@ -55,7 +45,7 @@ export class ComboChartComponent extends BaseChartComponent { @Input() roundDomains = false; @Input() colorSchemeLine: Color; @Input() autoScale; - @Input() lineChart: ILineChartSeries[]; + @Input() lineChart: Series[]; @Input() yLeftAxisScaleFactor: any; @Input() yRightAxisScaleFactor: any; @Input() rangeFillOpacity: number; @@ -63,9 +53,6 @@ export class ComboChartComponent extends BaseChartComponent { @Input() noBarWhenZero = true; @Output() activate = new EventEmitter<{ value; entries: unknown[] }>(); @Output() deactivate = new EventEmitter<{ value; entries: unknown[] }>(); - @ContentChild('tooltipTemplate') tooltipTemplate: TemplateRef; - @ContentChild('seriesTooltipTemplate') seriesTooltipTemplate: TemplateRef; - @ViewChild(LineSeriesComponent) lineSeriesComponent: LineSeriesComponent; dims: ViewDimensions; xScale: any; yScale: any; @@ -84,7 +71,7 @@ export class ComboChartComponent extends BaseChartComponent { xDomainLine; yDomainLine; seriesDomain; - combinedSeries: ILineChartSeries[]; + combinedSeries: Series[]; xSet; filteredDomain; hoveredVertical; @@ -205,7 +192,7 @@ export class ComboChartComponent extends BaseChartComponent { } getXDomainLine(): any[] { - let values: number[] = []; + let values: StringOrNumberOrDate[] = []; for (const results of this.lineChart) { for (const d of results.series) { @@ -219,13 +206,13 @@ export class ComboChartComponent extends BaseChartComponent { let domain = []; if (this.scaleType === 'time') { - const min = Math.min(...values); - const max = Math.max(...values); + const min = Math.min(...(values as number[])); + const max = Math.max(...(values as number[])); domain = [min, max]; } else if (this.scaleType === 'linear') { values = values.map(v => Number(v)); - const min = Math.min(...values); - const max = Math.max(...values); + const min = Math.min(...(values as number[])); + const max = Math.max(...(values as number[])); domain = [min, max]; } else { domain = values; @@ -292,7 +279,6 @@ export class ComboChartComponent extends BaseChartComponent { getYScaleLine(domain, height): any { const scale = scaleLinear().range([height, 0]).domain(domain); - return this.roundDomains ? scale.nice() : scale; } diff --git a/apps/red-ui/src/app/modules/admin/screens/license/combo-chart/models.ts b/apps/red-ui/src/app/modules/admin/screens/license/combo-chart/models.ts deleted file mode 100644 index 7358f8e55..000000000 --- a/apps/red-ui/src/app/modules/admin/screens/license/combo-chart/models.ts +++ /dev/null @@ -1,11 +0,0 @@ -export interface ISeries { - name: number; - value: number; - min: number; - max: number; -} - -export interface ILineChartSeries { - name: string; - series: ISeries[]; -} diff --git a/apps/red-ui/src/app/modules/admin/screens/license/license-chart/license-chart.component.ts b/apps/red-ui/src/app/modules/admin/screens/license/license-chart/license-chart.component.ts index 0cafbb004..90461cc10 100644 --- a/apps/red-ui/src/app/modules/admin/screens/license/license-chart/license-chart.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/license/license-chart/license-chart.component.ts @@ -2,13 +2,13 @@ import { Component } from '@angular/core'; import { ComboBarScheme, LICENSE_STORAGE_KEY, LineChartScheme } from '../utils/constants'; import dayjs from 'dayjs'; import { IDateRange, ILicense, ILicenseReport } from '@red/domain'; -import { LicenseService } from '../../../../../services/license.service'; +import { LicenseService } from '@services/license.service'; import { switchMap, tap } from 'rxjs/operators'; import { List, LoadingService } from '@iqser/common-ui'; import { generateDateRanges, isCurrentMonth, toDate, verboseDate } from '../utils/functions'; import { TranslateService } from '@ngx-translate/core'; -import { ILineChartSeries } from '../combo-chart/models'; import { Observable } from 'rxjs'; +import { Series } from '@swimlane/ngx-charts'; @Component({ selector: 'redaction-license-chart', @@ -18,7 +18,7 @@ export class LicenseChartComponent { readonly lineChartScheme = LineChartScheme; readonly comboBarScheme = ComboBarScheme; - lineChartSeries$ = this.#licenseChartSeries$; + readonly lineChartSeries$ = this.#licenseChartSeries$; barChart = []; constructor( @@ -27,7 +27,7 @@ export class LicenseChartComponent { private readonly _loadingService: LoadingService, ) {} - get #licenseChartSeries$(): Observable { + get #licenseChartSeries$(): Observable { return this._licenseService.selectedLicense$.pipe( tap(() => this._loadingService.start()), switchMap(license => this.#getLicenseData(license)), @@ -35,7 +35,7 @@ export class LicenseChartComponent { ); } - async #getLicenseData(license: ILicense): Promise { + async #getLicenseData(license: ILicense): Promise { const startDate = dayjs(license.validFrom); const endDate = dayjs(license.validUntil); const startMonth: number = startDate.month(); @@ -47,7 +47,7 @@ export class LicenseChartComponent { return this.#mapRangesToReports(startMonth, startYear, dateRanges, reports); } - #mapRangesToReports(month: number, year: number, dateRanges: List, reports: List): ILineChartSeries[] { + #mapRangesToReports(month: number, year: number, dateRanges: List, reports: List): Series[] { return [ { name: this._translateService.instant('license-info-screen.chart.total-pages'), @@ -120,9 +120,11 @@ export class LicenseChartComponent { } #totalLicensedPagesSeries(dateRanges: List) { + const processingPages = this._licenseService.processingPages; + return dateRanges.map(dateRange => ({ name: verboseDate(dateRange), - value: this._licenseService.processingPages, + value: processingPages, })); } } diff --git a/apps/red-ui/src/app/modules/admin/screens/license/license-select/license-select.component.ts b/apps/red-ui/src/app/modules/admin/screens/license/license-select/license-select.component.ts index ba71aa5a4..5eb14ea8a 100644 --- a/apps/red-ui/src/app/modules/admin/screens/license/license-select/license-select.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/license/license-select/license-select.component.ts @@ -1,5 +1,5 @@ import { Component, EventEmitter, Output } from '@angular/core'; -import { LicenseService } from '../../../../../services/license.service'; +import { LicenseService } from '@services/license.service'; import { ILicense } from '@red/domain'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { map, tap } from 'rxjs/operators';