From 2d5a2e480960b8ac9791e91d8f486be4c5adc73d Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Fri, 13 May 2022 16:05:19 +0300 Subject: [PATCH] RED-3765: improve charts --- .../google-chart/google-chart.component.html | 8 --- .../google-chart/google-chart.component.scss | 0 .../google-chart/google-chart.component.ts | 55 +++++++++++-------- .../screens/license/google-chart/models.ts | 1 - .../license-chart.component.html | 1 - .../license-chart.component.scss | 0 .../license-chart/license-chart.component.ts | 40 +++++++------- .../license-screen.component.ts | 4 +- .../license/services/license.service.ts | 2 +- .../admin/screens/license/utils/functions.ts | 4 ++ package.json | 1 + yarn.lock | 5 ++ 12 files changed, 65 insertions(+), 56 deletions(-) delete mode 100644 apps/red-ui/src/app/modules/admin/screens/license/google-chart/google-chart.component.html delete mode 100644 apps/red-ui/src/app/modules/admin/screens/license/google-chart/google-chart.component.scss delete mode 100644 apps/red-ui/src/app/modules/admin/screens/license/google-chart/models.ts delete mode 100644 apps/red-ui/src/app/modules/admin/screens/license/license-chart/license-chart.component.html delete mode 100644 apps/red-ui/src/app/modules/admin/screens/license/license-chart/license-chart.component.scss diff --git a/apps/red-ui/src/app/modules/admin/screens/license/google-chart/google-chart.component.html b/apps/red-ui/src/app/modules/admin/screens/license/google-chart/google-chart.component.html deleted file mode 100644 index b21969ad9..000000000 --- a/apps/red-ui/src/app/modules/admin/screens/license/google-chart/google-chart.component.html +++ /dev/null @@ -1,8 +0,0 @@ - diff --git a/apps/red-ui/src/app/modules/admin/screens/license/google-chart/google-chart.component.scss b/apps/red-ui/src/app/modules/admin/screens/license/google-chart/google-chart.component.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/apps/red-ui/src/app/modules/admin/screens/license/google-chart/google-chart.component.ts b/apps/red-ui/src/app/modules/admin/screens/license/google-chart/google-chart.component.ts index 43aaad22d..5aa4f2d24 100644 --- a/apps/red-ui/src/app/modules/admin/screens/license/google-chart/google-chart.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/license/google-chart/google-chart.component.ts @@ -1,36 +1,43 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; -import { ChartType } from 'angular-google-charts'; +import { ChartType, Column, Row } from 'angular-google-charts'; import { TranslateService } from '@ngx-translate/core'; -import { GoogleChartData } from './models'; +import ComboChartOptions = google.visualization.ComboChartOptions; @Component({ selector: 'redaction-google-chart', - templateUrl: './google-chart.component.html', - styleUrls: ['./google-chart.component.scss'], + template: ` `, changeDetection: ChangeDetectionStrategy.OnPush, }) export class GoogleChartComponent { - @Input() data: GoogleChartData; + @Input() data: Row[]; - readonly options = { - fontName: 'Inter', - fontSize: 13, - vAxis: { - title: this._translateService.instant('license-info-screen.chart.pages-per-month'), - }, - seriesType: 'bars', - vAxes: { - 1: { - title: this._translateService.instant('license-info-screen.chart.total-pages'), - }, - }, - series: { 1: { type: 'line', targetAxisIndex: 1 }, 2: { type: 'line', targetAxisIndex: 1 } }, - colors: ['#0389ec', '#dd4d50', '#5ce594'], - legend: { position: 'top' }, - }; + readonly options: ComboChartOptions; + readonly columns: Column[]; readonly type = ChartType.ComboChart; - readonly width = 1000; - readonly height = 300; - constructor(private readonly _translateService: TranslateService) {} + constructor(translateService: TranslateService) { + const pagesPerMonth = translateService.instant('license-info-screen.chart.pages-per-month'); + const totalPages = translateService.instant('license-info-screen.chart.total-pages'); + const cumulative = translateService.instant('license-info-screen.chart.cumulative'); + + this.options = { + fontName: 'Inter', + fontSize: 13, + vAxis: { title: pagesPerMonth }, + seriesType: 'bars', + vAxes: { 1: { title: totalPages } }, + series: { 1: { type: 'line', targetAxisIndex: 1 }, 2: { type: 'line', targetAxisIndex: 1 } }, + colors: ['#0389ec', '#dd4d50', '#5ce594'], + legend: { position: 'top' }, + }; + + this.columns = ['abc', pagesPerMonth, totalPages, cumulative]; + } } diff --git a/apps/red-ui/src/app/modules/admin/screens/license/google-chart/models.ts b/apps/red-ui/src/app/modules/admin/screens/license/google-chart/models.ts deleted file mode 100644 index f0bd08dfb..000000000 --- a/apps/red-ui/src/app/modules/admin/screens/license/google-chart/models.ts +++ /dev/null @@ -1 +0,0 @@ -export type GoogleChartData = [string, number, number, number][]; diff --git a/apps/red-ui/src/app/modules/admin/screens/license/license-chart/license-chart.component.html b/apps/red-ui/src/app/modules/admin/screens/license/license-chart/license-chart.component.html deleted file mode 100644 index 495e9e2c0..000000000 --- a/apps/red-ui/src/app/modules/admin/screens/license/license-chart/license-chart.component.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/apps/red-ui/src/app/modules/admin/screens/license/license-chart/license-chart.component.scss b/apps/red-ui/src/app/modules/admin/screens/license/license-chart/license-chart.component.scss deleted file mode 100644 index e69de29bb..000000000 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 4729044e3..7be6657de 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 @@ -6,16 +6,13 @@ import { LicenseService } from '../services/license.service'; import { IDateRange } from '../utils/date-range'; import { ILicense } from '../utils/license'; import { switchMap, tap } from 'rxjs/operators'; -import { LoadingService } from '@iqser/common-ui'; -import { generateDateRanges, isCurrentMonth, toDate } from '../utils/functions'; -import { GoogleChartData } from '../google-chart/models'; - -const monthNames = dayjs.monthsShort(); +import { List, LoadingService } from '@iqser/common-ui'; +import { generateDateRanges, isCurrentMonth, toDate, verboseDate } from '../utils/functions'; +import { Row } from 'angular-google-charts'; @Component({ selector: 'redaction-license-chart', - templateUrl: './license-chart.component.html', - styleUrls: ['./license-chart.component.scss'], + template: '', changeDetection: ChangeDetectionStrategy.OnPush, }) export class LicenseChartComponent { @@ -26,12 +23,12 @@ export class LicenseChartComponent { get #chartData$() { return this._licenseService.selectedLicense$.pipe( tap(() => this._loadingService.start()), - switchMap(license => this.#chartData(license)), + switchMap(license => this.#getLicenseData(license)), tap(() => this._loadingService.stop()), ); } - async #chartData(license: ILicense): Promise { + async #getLicenseData(license: ILicense): Promise { const startDate = dayjs(license.validFrom); const endDate = dayjs(license.validUntil); const startMonth: number = startDate.month(); @@ -40,31 +37,36 @@ export class LicenseChartComponent { const dateRanges = generateDateRanges(startMonth, startYear, endDate.month() as number, endDate.year() as number); const reports = await this.#getReports(dateRanges); + return this.#mapRangesToReports(dateRanges, reports); + } + + #mapRangesToReports(dateRanges: List, reports: List): Row[] { let cumulativePages = 0; + const processingPages = this._licenseService.processingPages; return dateRanges.map((range, index) => [ - `${monthNames[range.startMonth]} ${range.startYear}`, + verboseDate(range), reports[index].numberOfAnalyzedPages, - this._licenseService.totalLicensedNumberOfPages, + processingPages, (cumulativePages += reports[index].numberOfAnalyzedPages), ]); } - #getReports(dateRanges: IDateRange[]) { - const reports = dateRanges.map(dateRange => { - const startMonth = dateRange.startMonth + 1; - const endMonth = dateRange.endMonth + 1; + #getReports(dateRanges: List) { + const reports = dateRanges.map(range => { + const startMonth = range.startMonth + 1; + const endMonth = range.endMonth + 1; - const key = `${startMonth}.${dateRange.startYear}-${endMonth}.${dateRange.endYear}`; + const key = `${startMonth}.${range.startYear}-${endMonth}.${range.endYear}`; const existingReport = this._licenseService.storedReports[key]; if (existingReport) { return existingReport; } - const startDate = toDate(startMonth, dateRange.startYear); - const endDate = toDate(endMonth, dateRange.endYear); + const startDate = toDate(startMonth, range.startYear); + const endDate = toDate(endMonth, range.endYear); const requestedReport = this._licenseService.getReport({ startDate, endDate }); - return requestedReport.then(report => this.#storeReportIfNotCurrentMonth(dateRange, report, key)); + return requestedReport.then(report => this.#storeReportIfNotCurrentMonth(range, report, key)); }); return Promise.all(reports); diff --git a/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.ts index 262cd147b..1d749b7c5 100644 --- a/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.ts @@ -30,7 +30,7 @@ export class LicenseScreenComponent implements OnInit { totalInfo: ILicenseReport = {}; unlicensedInfo: ILicenseReport = {}; analysisPercentageOfLicense = 100; - totalLicensedNumberOfPages = this.licenseService.totalLicensedNumberOfPages; + totalLicensedNumberOfPages = this.licenseService.processingPages; constructor( readonly configService: ConfigService, @@ -89,7 +89,7 @@ export class LicenseScreenComponent implements OnInit { } licenseChanged(license: ILicense) { - this.totalLicensedNumberOfPages = this.licenseService.totalLicensedNumberOfPages; + this.totalLicensedNumberOfPages = this.licenseService.processingPages; return this.loadLicenseData(license); } } diff --git a/apps/red-ui/src/app/modules/admin/screens/license/services/license.service.ts b/apps/red-ui/src/app/modules/admin/screens/license/services/license.service.ts index 2984ef327..047497f4e 100644 --- a/apps/red-ui/src/app/modules/admin/screens/license/services/license.service.ts +++ b/apps/red-ui/src/app/modules/admin/screens/license/services/license.service.ts @@ -22,7 +22,7 @@ export class LicenseService extends GenericService { return this.selectedLicense$.value; } - get totalLicensedNumberOfPages() { + get processingPages() { const processingPagesFeature = this.selectedLicense$.value.features.find(f => f.name === 'processingPages'); return Number(processingPagesFeature.value ?? '0'); } diff --git a/apps/red-ui/src/app/modules/admin/screens/license/utils/functions.ts b/apps/red-ui/src/app/modules/admin/screens/license/utils/functions.ts index 4e445c7ae..ea346cb6c 100644 --- a/apps/red-ui/src/app/modules/admin/screens/license/utils/functions.ts +++ b/apps/red-ui/src/app/modules/admin/screens/license/utils/functions.ts @@ -39,3 +39,7 @@ export function isCurrentMonth(month: number, year: number) { return month === currentMonth && year === currentYear; } + +const monthNames = dayjs.monthsShort(); + +export const verboseDate = (range: IDateRange) => `${monthNames[range.startMonth]} ${range.startYear}`; diff --git a/package.json b/package.json index ab1ba1d10..b95d9b7f1 100644 --- a/package.json +++ b/package.json @@ -79,6 +79,7 @@ "@nrwl/jest": "13.9.5", "@nrwl/linter": "13.9.5", "@nrwl/workspace": "13.9.5", + "@types/google.visualization": "^0.0.68", "@types/jest": "27.4.1", "@types/lodash-es": "^4.17.6", "@types/node": "17.0.23", diff --git a/yarn.lock b/yarn.lock index f8b12fb0f..19ce5dcba 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2298,6 +2298,11 @@ resolved "https://registry.yarnpkg.com/@types/google.visualization/-/google.visualization-0.0.58.tgz#eb2aa3cf05d63a9b42ff5cfcab1fc0594fb45a0e" integrity sha512-ldwrhRvqSlrCYjHELGZNNMP8m5oPLBb6iU7CfKF2C/YpgRTlHihqsrL5M293u0GL7mKfjm0AjSIgEE2LU8fuTw== +"@types/google.visualization@^0.0.68": + version "0.0.68" + resolved "https://registry.yarnpkg.com/@types/google.visualization/-/google.visualization-0.0.68.tgz#773e908c02e08dffe689844f0972dd481516e704" + integrity sha512-LkLniL1TYykhz+ZdRof3Bi8cp1OhqoK11Tj1RM2bPtGVBNexQ0eRnOrOWcWTdi80Sz9DzJ4JIG2rTlSJBVV58w== + "@types/graceful-fs@^4.1.2": version "4.1.5" resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15"