RED-4596: update license view

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"
 >
     <svg:g [attr.transform]="transform" class="bar-chart chart">
         <svg:g
@@ -62,6 +63,7 @@
             ngx-combo-charts-series-vertical
         ></svg:g>
     </svg:g>
+
     <svg:g [attr.transform]="transform" class="line-chart chart">
         <svg:g>
             <svg:g *ngFor="let series of lineChart; trackBy: trackBy">
@@ -76,7 +78,7 @@
                     [xScale]="xScaleLine"
                     [yScale]="yScaleLine"
                     ngx-charts-line-series
-                />
+                ></svg:g>
             </svg:g>
 
             <svg:g
@@ -90,7 +92,7 @@
                 [xSet]="xSet"
                 [yScale]="yScaleLine"
                 ngx-charts-tooltip-area
-            />
+            ></svg:g>
 
             <svg:g *ngFor="let series of lineChart">
                 <svg:g
@@ -105,7 +107,7 @@
                     [xScale]="xScaleLine"
                     [yScale]="yScaleLine"
                     ngx-charts-circle-series
-                />
+                ></svg:g>
             </svg:g>
         </svg:g>
     </svg:g>

apps/red-ui/src/app/modules/admin/screens/license/combo-chart/combo-chart.component.ts

@@ -1,14 +1,4 @@
-import {
+import { Component, EventEmitter, HostListener, Input, Output, ViewEncapsulation } from '@angular/core';
-    Component,
-    ContentChild,
-    EventEmitter,
-    HostListener,
-    Input,
-    Output,
-    TemplateRef,
-    ViewChild,
-    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<unknown>;
-    @ContentChild('seriesTooltipTemplate') seriesTooltipTemplate: TemplateRef<unknown>;
-    @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 min = Math.min(...(values as number[]));
-            const max = Math.max(...values);
+            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 min = Math.min(...(values as number[]));
-            const max = Math.max(...values);
+            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;
     }
 

apps/red-ui/src/app/modules/admin/screens/license/combo-chart/models.ts

@@ -1,11 +0,0 @@
-export interface ISeries {
-    name: number;
-    value: number;
-    min: number;
-    max: number;
-}
-
-export interface ILineChartSeries {
-    name: string;
-    series: ISeries[];
-}

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<ILineChartSeries[]> {
+    get #licenseChartSeries$(): Observable<Series[]> {
         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<ILineChartSeries[]> {
+    async #getLicenseData(license: ILicense): Promise<Series[]> {
         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<IDateRange>, reports: List<ILicenseReport>): ILineChartSeries[] {
+    #mapRangesToReports(month: number, year: number, dateRanges: List<IDateRange>, reports: List<ILicenseReport>): Series[] {
         return [
             {
                 name: this._translateService.instant('license-info-screen.chart.total-pages'),
@@ -120,9 +120,11 @@ export class LicenseChartComponent {
     }
 
     #totalLicensedPagesSeries(dateRanges: List<IDateRange>) {
+        const processingPages = this._licenseService.processingPages;
+
         return dateRanges.map(dateRange => ({
             name: verboseDate(dateRange),
-            value: this._licenseService.processingPages,
+            value: processingPages,
         }));
     }
 }

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';