RED-3765: extract chart to a separate component

apps/red-ui/src/app/modules/admin/admin.module.ts

@@ -48,7 +48,8 @@ import { ConfirmDeleteDossierStateDialogComponent } from './dialogs/confirm-dele
 import { TrashTableItemComponent } from './screens/trash/trash-table-item/trash-table-item.component';
 import { BaseEntityScreenComponent } from './base-entity-screen/base-entity-screen.component';
 import { CloneDossierTemplateDialogComponent } from './dialogs/clone-dossier-template-dialog/clone-dossier-template-dialog.component';
-import { SelectLicenceComponent } from './screens/license-information/select-licence/select-licence.component';
+import { SelectLicenseComponent } from './screens/license-information/select-licence/select-license.component';
+import { LicenseChartComponent } from './screens/license-information/license-chart/license-chart.component';
 
 const dialogs = [
     AddEditDossierTemplateDialogComponent,
@@ -103,7 +104,8 @@ const components = [
         AddEditDossierStateDialogComponent,
         ConfirmDeleteDossierStateDialogComponent,
         TrashTableItemComponent,
-        SelectLicenceComponent,
+        SelectLicenseComponent,
+        LicenseChartComponent,
     ],
     providers: [AdminDialogService, AuditService, DigitalSignatureService, RulesService, SmtpConfigService],
     imports: [CommonModule, SharedModule, AdminRoutingModule, SharedAdminModule, NgxChartsModule, ColorPickerModule, A11yModule],

apps/red-ui/src/app/modules/admin/screens/license-information/date-range.ts

@@ -0,0 +1,9 @@
+export interface IMonthYear {
+    readonly month: number;
+    readonly year: number;
+}
+
+export interface IDateRange {
+    readonly startDate: IMonthYear;
+    readonly endDate: IMonthYear;
+}

apps/red-ui/src/app/modules/admin/screens/license-information/license-chart/license-chart.component.html

@@ -0,0 +1,18 @@
+<combo-chart-component
+    *ngIf="lineChartSeries$ | async as lineChartSeries"
+    [animations]="true"
+    [colorSchemeLine]="lineChartScheme"
+    [legendTitle]="'license-info-screen.chart.legend' | translate"
+    [legend]="true"
+    [lineChart]="lineChartSeries"
+    [results]="barChart"
+    [scheme]="comboBarScheme"
+    [showGridLines]="true"
+    [showRightYAxisLabel]="true"
+    [showYAxisLabel]="true"
+    [view]="[1000, 300]"
+    [xAxis]="true"
+    [yAxisLabelRight]="'license-info-screen.chart.total-pages' | translate"
+    [yAxisLabel]="'license-info-screen.chart.pages-per-month' | translate"
+    [yAxis]="true"
+></combo-chart-component>

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

@@ -0,0 +1,123 @@
+import { Component } from '@angular/core';
+import { ComboBarScheme, LineChartScheme } from '../constants';
+import dayjs from 'dayjs';
+import { TranslateService } from '@ngx-translate/core';
+import { ILicenseReport } from '@red/domain';
+import { LicenseService } from '../../../services/licence-report.service';
+import { IDateRange } from '../date-range';
+import { ILicense } from '../licence';
+import { switchMap } from 'rxjs/operators';
+import { ILineChartSeries } from '../../../components/combo-chart/models';
+import { ConfigService } from '../../../../../services/config.service';
+
+const monthNames = dayjs.monthsShort();
+
+function toDate(month: number, year: number) {
+    return dayjs(`01-${month}-${year}`, 'DD-M-YYYY').toDate();
+}
+
+@Component({
+    selector: 'redaction-license-chart',
+    templateUrl: './license-chart.component.html',
+    styleUrls: ['./license-chart.component.scss'],
+})
+export class LicenseChartComponent {
+    readonly lineChartScheme = LineChartScheme;
+    readonly comboBarScheme = ComboBarScheme;
+
+    lineChartSeries$ = this._licenseService.selectedLicense$.pipe(switchMap(license => this.#setMonthlyStats(license)));
+    barChart: any[];
+
+    constructor(
+        private readonly _translateService: TranslateService,
+        private readonly _licenseService: LicenseService,
+        private readonly _configService: ConfigService,
+    ) {}
+
+    async #setMonthlyStats(licence: ILicense): Promise<ILineChartSeries[]> {
+        const startDate = dayjs(licence.validFrom, 'DD-MM-YYYY');
+        const endDate = dayjs(licence.validUntil, 'DD-MM-YYYY');
+        const startMonth: number = startDate.month();
+        const startYear: number = startDate.year();
+
+        const dateRanges = this.#generateDateRanges(startMonth, startYear, endDate.month(), endDate.year());
+        const reports = await this.#getReports(dateRanges);
+
+        return [
+            {
+                name: this._translateService.instant('license-info-screen.chart.licensed-total'),
+                series: this.#totalLicensedPagesSeries(dateRanges),
+            },
+            {
+                name: this._translateService.instant('license-info-screen.chart.cumulative'),
+                series: this.#setBarChartAndGetCumulativePageSeries(startMonth, startYear, reports),
+            },
+        ];
+    }
+
+    #setBarChartAndGetCumulativePageSeries(month: number, year: number, reports: ILicenseReport[]) {
+        let cumulativePages = 0;
+        const cumulativePagesSeries = [];
+        this.barChart = [];
+
+        for (const report of reports) {
+            cumulativePages += report.numberOfAnalyzedPages;
+
+            const name = `${monthNames[month]} ${year}`;
+            this.barChart.push({
+                name,
+                value: report.numberOfAnalyzedPages,
+            });
+
+            cumulativePagesSeries.push({
+                name,
+                value: cumulativePages,
+            });
+
+            month++;
+            if (month === 12) {
+                month = 0;
+                year++;
+            }
+        }
+
+        return cumulativePagesSeries;
+    }
+
+    #getReports(dateRanges: IDateRange[]) {
+        const reports = dateRanges.map(dateRange => {
+            const startDate = toDate(dateRange.startDate.month + 1, dateRange.startDate.year);
+            const endDate = toDate(dateRange.endDate.month + 1, dateRange.endDate.year);
+            return this._licenseService.getReport({ startDate, endDate });
+        });
+
+        return Promise.all(reports);
+    }
+
+    #totalLicensedPagesSeries(dateRanges: IDateRange[]) {
+        return dateRanges.map(dateRange => ({
+            name: `${monthNames[dateRange.startDate.month]} ${dateRange.startDate.year}`,
+            value: this._licenseService.totalLicensedNumberOfPages,
+        }));
+    }
+
+    #generateDateRanges(month: number, year: number, endMonth: number, endYear: number) {
+        const dates: IDateRange[] = [];
+
+        while (month <= endMonth && year <= endYear) {
+            let nextMonth = month + 1;
+            let nextYear = year;
+            if (nextMonth === 12) {
+                nextMonth = 0;
+                nextYear++;
+            }
+
+            dates.push({ startDate: { month, year }, endDate: { month: nextMonth, year: nextYear } });
+
+            year = nextYear;
+            month = nextMonth;
+        }
+
+        return dates;
+    }
+}

apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html

@@ -41,22 +41,24 @@
                     <div class="row">
                         <div class="flex align-center" translate="license-info-screen.license-title"></div>
                         <div>
-                            <redaction-select-licence (valueChanges)="licenceChanged($event)"></redaction-select-licence>
+                            <redaction-select-license (valueChanges)="licenceChanged($event)"></redaction-select-license>
                         </div>
                     </div>
 
-                    <div class="row">
+                    <ng-container *ngIf="licenseService.selectedLicense$ | async as selectedLicense">
-                        <div translate="license-info-screen.licensed-to"></div>
+                        <div class="row">
-                        <div>{{ selectedLicense.licensedTo || '-' }}</div>
+                            <div translate="license-info-screen.licensed-to"></div>
-                    </div>
+                            <div>{{ selectedLicense.licensedTo || '-' }}</div>
-
-                    <div class="row">
-                        <div translate="license-info-screen.licensing-period"></div>
-                        <div>
-                            {{ (selectedLicense.validFrom | date: 'dd-MM-YYYY') || '-' }} /
-                            {{ (selectedLicense.validUntil | date: 'dd-MM-YYYY') || '-' }}
                         </div>
-                    </div>
+
+                        <div class="row">
+                            <div translate="license-info-screen.licensing-period"></div>
+                            <div>
+                                {{ (selectedLicense.validFrom | date: 'dd-MM-YYYY') || '-' }} /
+                                {{ (selectedLicense.validUntil | date: 'dd-MM-YYYY') || '-' }}
+                            </div>
+                        </div>
+                    </ng-container>
 
                     <div class="row">
                         <div>{{ 'license-info-screen.licensed-page-count' | translate }}</div>
@@ -93,23 +95,7 @@
                     </div>
                 </div>
 
-                <combo-chart-component
+                <redaction-license-chart></redaction-license-chart>
-                    [animations]="true"
-                    [colorSchemeLine]="lineChartScheme"
-                    [legendTitle]="'license-info-screen.chart.legend' | translate"
-                    [legend]="true"
-                    [lineChart]="lineChartSeries"
-                    [results]="barChart"
-                    [scheme]="comboBarScheme"
-                    [showGridLines]="true"
-                    [showRightYAxisLabel]="true"
-                    [showYAxisLabel]="true"
-                    [view]="[1000, 300]"
-                    [xAxis]="true"
-                    [yAxisLabelRight]="'license-info-screen.chart.total-pages' | translate"
-                    [yAxisLabel]="'license-info-screen.chart.pages-per-month' | translate"
-                    [yAxis]="true"
-                ></combo-chart-component>
             </div>
         </div>
     </div>

apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.ts

@@ -8,25 +8,8 @@ import { RouterHistoryService } from '@services/router-history.service';
 import { LicenseService } from '../../services/licence-report.service';
 import { ILicenseReport } from '@red/domain';
 import dayjs from 'dayjs';
-import { ComboBarScheme, LineChartScheme } from './constants';
 import { ILicense } from './licence';
 
-const monthNames = dayjs.monthsShort();
-
-function toDate(month: number, year: number) {
-    return dayjs(`01-${month}-${year}`, 'DD-M-YYYY').toDate();
-}
-
-interface IMonthYear {
-    readonly month: number;
-    readonly year: number;
-}
-
-interface IDateRange {
-    readonly startDate: IMonthYear;
-    readonly endDate: IMonthYear;
-}
-
 @Component({
     selector: 'redaction-license-information-screen',
     templateUrl: './license-information-screen.component.html',
@@ -34,8 +17,6 @@ interface IDateRange {
     providers: [LicenseService],
 })
 export class LicenseInformationScreenComponent implements OnInit {
-    readonly lineChartScheme = LineChartScheme;
-    readonly comboBarScheme = ComboBarScheme;
     readonly currentYear = new Date().getFullYear();
     readonly currentUser = this._userService.currentUser;
     readonly buttonConfigs: readonly ButtonConfig[] = [
@@ -50,10 +31,7 @@ export class LicenseInformationScreenComponent implements OnInit {
     totalInfo: ILicenseReport = {};
     unlicensedInfo: ILicenseReport = {};
     analysisPercentageOfLicense = 100;
-    barChart: any[];
+    totalLicensedNumberOfPages = this.licenseService.totalLicensedNumberOfPages;
-    lineChartSeries: any[] = [];
-    selectedLicense = this.licenseService.getActiveLicense();
-    totalLicensedNumberOfPages = this.#processingPages;
 
     constructor(
         readonly configService: ConfigService,
@@ -66,22 +44,13 @@ export class LicenseInformationScreenComponent implements OnInit {
         _loadingService.start();
     }
 
-    get #processingPages() {
-        const processingPagesFeature = this.selectedLicense.features.find(f => f.name === 'processingPages');
-        return Number(processingPagesFeature.value ?? '0');
-    }
-
     ngOnInit() {
-        return this.loadLicenceData();
+        return this.loadLicenceData(this.licenseService.selectedLicense);
     }
 
-    async loadLicenceData() {
+    async loadLicenceData(license: ILicense) {
-        // const startDate = dayjs(this.selectedLicense.validFrom, 'DD-MM-YYYY');
+        const startDate = dayjs(license.validFrom, 'DD-MM-YYYY');
-        // const endDate = dayjs(this.selectedLicense.validUntil, 'DD-MM-YYYY');
+        const endDate = dayjs(license.validUntil, 'DD-MM-YYYY');
-        const startDate = dayjs(this.configService.values.LICENSE_START, 'DD-MM-YYYY');
-        const endDate = dayjs(this.configService.values.LICENSE_END, 'DD-MM-YYYY');
-
-        await this._setMonthlyStats(startDate, endDate);
 
         const currentConfig = {
             startDate: startDate.toDate(),
@@ -103,7 +72,7 @@ export class LicenseInformationScreenComponent implements OnInit {
     }
 
     sendMail(): void {
-        const licenseCustomer = this.selectedLicense.licensedTo;
+        const licenseCustomer = this.licenseService.selectedLicense.licensedTo;
         const subject = this._translateService.instant('license-info-screen.email.title', {
             licenseCustomer,
         });
@@ -116,97 +85,12 @@ export class LicenseInformationScreenComponent implements OnInit {
                 pages: this.totalLicensedNumberOfPages,
             }),
         ].join(lineBreak);
-        window.location.href = `mailto:${this.selectedLicense.licensedToEmail}?subject=${subject}&body=${body}`;
+        const mail = this.licenseService.selectedLicense.licensedToEmail;
+        window.location.href = `mailto:${mail}?subject=${subject}&body=${body}`;
     }
 
     licenceChanged(license: ILicense) {
-        this.selectedLicense = license;
+        this.totalLicensedNumberOfPages = this.licenseService.totalLicensedNumberOfPages;
-        this.totalLicensedNumberOfPages = this.#processingPages;
+        return this.loadLicenceData(license);
-        return this.loadLicenceData();
-    }
-
-    private async _setMonthlyStats(startDate: dayjs.Dayjs, endDate: dayjs.Dayjs) {
-        const startMonth: number = startDate.month();
-        const startYear: number = startDate.year();
-
-        const dateRanges = this.#generateDateRanges(startMonth, startYear, endDate.month(), endDate.year());
-        const reports = await this.#getReports(dateRanges);
-
-        this.lineChartSeries = [
-            {
-                name: this._translateService.instant('license-info-screen.chart.licensed-total'),
-                series: this.#totalLicensedPagesSeries(dateRanges),
-            },
-            {
-                name: this._translateService.instant('license-info-screen.chart.cumulative'),
-                series: this.#setBarChartAndGetCumulativePageSeries(startMonth, startYear, reports),
-            },
-        ];
-    }
-
-    #setBarChartAndGetCumulativePageSeries(month: number, year: number, reports: ILicenseReport[]) {
-        let cumulativePages = 0;
-        const cumulativePagesSeries = [];
-        this.barChart = [];
-
-        for (const report of reports) {
-            cumulativePages += report.numberOfAnalyzedPages;
-
-            const name = `${monthNames[month]} ${year}`;
-            this.barChart.push({
-                name,
-                value: report.numberOfAnalyzedPages,
-            });
-
-            cumulativePagesSeries.push({
-                name,
-                value: cumulativePages,
-            });
-
-            month++;
-            if (month === 12) {
-                month = 0;
-                year++;
-            }
-        }
-
-        return cumulativePagesSeries;
-    }
-
-    #getReports(dateRanges: IDateRange[]) {
-        const reports = dateRanges.map(dateRange => {
-            const startDate = toDate(dateRange.startDate.month + 1, dateRange.startDate.year);
-            const endDate = toDate(dateRange.endDate.month + 1, dateRange.endDate.year);
-            return this.licenseService.getReport({ startDate, endDate });
-        });
-
-        return Promise.all(reports);
-    }
-
-    #totalLicensedPagesSeries(dateRanges: IDateRange[]) {
-        return dateRanges.map(dateRange => ({
-            name: `${monthNames[dateRange.startDate.month]} ${dateRange.startDate.year}`,
-            value: this.totalLicensedNumberOfPages,
-        }));
-    }
-
-    #generateDateRanges(month: number, year: number, endMonth: number, endYear: number) {
-        const dates: IDateRange[] = [];
-
-        while (month <= endMonth && year <= endYear) {
-            let nextMonth = month + 1;
-            let nextYear = year;
-            if (nextMonth === 12) {
-                nextMonth = 0;
-                nextYear++;
-            }
-
-            dates.push({ startDate: { month, year }, endDate: { month: nextMonth, year: nextYear } });
-
-            year = nextYear;
-            month = nextMonth;
-        }
-
-        return dates;
     }
 }

apps/red-ui/src/app/modules/admin/screens/license-information/select-licence/select-license.component.html

@@ -1,5 +1,5 @@
 <div class="iqser-input-group w-400">
-    <mat-select (valueChange)="valueChanges.emit($event)" [(ngModel)]="value">
+    <mat-select (valueChange)="licenseChanged($event)" [(ngModel)]="value">
         <mat-select-trigger>
             <ng-container *ngTemplateOutlet="licenseInfo; context: { license: value }"></ng-container>
         </mat-select-trigger>

apps/red-ui/src/app/modules/admin/screens/license-information/select-licence/select-license.component.ts

@@ -9,11 +9,11 @@ const translations = {
 } as const;
 
 @Component({
-    selector: 'redaction-select-licence',
+    selector: 'redaction-select-license',
-    templateUrl: './select-licence.component.html',
+    templateUrl: './select-license.component.html',
-    styleUrls: ['./select-licence.component.scss'],
+    styleUrls: ['./select-license.component.scss'],
 })
-export class SelectLicenceComponent {
+export class SelectLicenseComponent {
     @Output() readonly valueChanges = new EventEmitter<ILicense>();
 
     value = this.licenseService.getActiveLicense();
@@ -23,4 +23,9 @@ export class SelectLicenceComponent {
     getStatus(id) {
         return id === this.licenseService.activeLicenseId ? translations.active : translations.inactive;
     }
+
+    licenseChanged($event: ILicense) {
+        this.valueChanges.emit($event);
+        this.licenseService.selectedLicense$.next($event);
+    }
 }

apps/red-ui/src/app/modules/admin/services/licence-report.service.ts

@@ -1,18 +1,28 @@
 import { Injectable, Injector } from '@angular/core';
 import { GenericService, QueryParam, RequiredParam, Validate } from '@iqser/common-ui';
 import { ILicenseReport, ILicenseReportRequest } from '@red/domain';
-import { firstValueFrom } from 'rxjs';
+import { BehaviorSubject, firstValueFrom } from 'rxjs';
-import { LICENSE_DATA } from '../screens/license-information/licence';
+import { ILicense, LICENSE_DATA } from '../screens/license-information/licence';
 
 @Injectable()
 export class LicenseService extends GenericService<ILicenseReport> {
     readonly licenseData = LICENSE_DATA;
     readonly activeLicenseId = this.licenseData.activeLicense;
+    readonly selectedLicense$ = new BehaviorSubject<ILicense>(this.getActiveLicense());
 
     constructor(protected readonly _injector: Injector) {
         super(_injector, 'report');
     }
 
+    get selectedLicense() {
+        return this.selectedLicense$.value;
+    }
+
+    get totalLicensedNumberOfPages() {
+        const processingPagesFeature = this.selectedLicense$.value.features.find(f => f.name === 'processingPages');
+        return Number(processingPagesFeature.value ?? '0');
+    }
+
     getActiveLicense() {
         return this.licenseData.licenses.find(license => license.id === this.activeLicenseId);
     }