From 627da2e7af3f7be9850e8785f00818f4f619e17e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Thu, 20 Jul 2023 00:40:52 +0300 Subject: [PATCH] RED-7113: Analysis capacity metrics in License Information --- .../components/chart/chart.component.scss | 2 +- .../components/chart/chart.component.ts | 1 + .../license-capacity.component.html | 2 +- .../license-usage.component.html | 31 +++++-- .../license-usage.component.scss | 10 ++- .../license-usage/license-usage.component.ts | 88 ++++++++++++++++--- apps/red-ui/src/assets/i18n/redact/de.json | 7 +- apps/red-ui/src/assets/i18n/redact/en.json | 7 +- apps/red-ui/src/assets/i18n/scm/de.json | 7 +- apps/red-ui/src/assets/i18n/scm/en.json | 7 +- 10 files changed, 134 insertions(+), 28 deletions(-) diff --git a/apps/red-ui/src/app/modules/admin/screens/license/components/chart/chart.component.scss b/apps/red-ui/src/app/modules/admin/screens/license/components/chart/chart.component.scss index b59b59cec..494440e0e 100644 --- a/apps/red-ui/src/app/modules/admin/screens/license/components/chart/chart.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/license/components/chart/chart.component.scss @@ -4,5 +4,5 @@ .canvas-container { position: relative; - width: 1000px; + width: 1200px; } diff --git a/apps/red-ui/src/app/modules/admin/screens/license/components/chart/chart.component.ts b/apps/red-ui/src/app/modules/admin/screens/license/components/chart/chart.component.ts index 1cda6e89a..52d0b255b 100644 --- a/apps/red-ui/src/app/modules/admin/screens/license/components/chart/chart.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/license/components/chart/chart.component.ts @@ -46,6 +46,7 @@ export class ChartComponent implements OnChanges { y1: { display: this.secondaryAxis, position: 'right', + ticks: { callback: this.valueFormatter ? (value: number) => this.valueFormatter(value) : undefined }, title: { display: !!this.yAxisLabelRight, text: this.yAxisLabelRight, diff --git a/apps/red-ui/src/app/modules/admin/screens/license/components/license-storage/license-capacity.component.html b/apps/red-ui/src/app/modules/admin/screens/license/components/license-storage/license-capacity.component.html index 369317970..31b8bb2f2 100644 --- a/apps/red-ui/src/app/modules/admin/screens/license/components/license-storage/license-capacity.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/license/components/license-storage/license-capacity.component.html @@ -19,7 +19,7 @@
{{ licenseService.currentLicenseReport.totalFilesUploadedBytes | size }} - + ({{ licenseService.uploadedFilesBytesForCurrentLicensePercentage | number : '1.0-2' }}%)
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/components/license-usage/license-usage.component.html b/apps/red-ui/src/app/modules/admin/screens/license/components/license-usage/license-usage.component.html index 774875526..ae0f382ee 100644 --- a/apps/red-ui/src/app/modules/admin/screens/license/components/license-usage/license-usage.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/license/components/license-usage/license-usage.component.html @@ -49,14 +49,27 @@
{{ licenseService.allLicensesReport.numberOfOcrPages }}
-
- +
+
+
+ + + +
+ + +
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/components/license-usage/license-usage.component.scss b/apps/red-ui/src/app/modules/admin/screens/license/components/license-usage/license-usage.component.scss index bdd488e9c..b9fd5b870 100644 --- a/apps/red-ui/src/app/modules/admin/screens/license/components/license-usage/license-usage.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/license/components/license-usage/license-usage.component.scss @@ -37,7 +37,13 @@ border-bottom: 1px solid var(--iqser-separator); } - redaction-chart { - grid-column: span 3; + .chart-row { + > div { + grid-column: span 3; + } + + &:hover > div { + background-color: var(--iqser-background); + } } } diff --git a/apps/red-ui/src/app/modules/admin/screens/license/components/license-usage/license-usage.component.ts b/apps/red-ui/src/app/modules/admin/screens/license/components/license-usage/license-usage.component.ts index e562e8d66..f676005c9 100644 --- a/apps/red-ui/src/app/modules/admin/screens/license/components/license-usage/license-usage.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/license/components/license-usage/license-usage.component.ts @@ -1,11 +1,18 @@ import { Component } from '@angular/core'; import { LicenseService } from '@services/license.service'; import { map } from 'rxjs/operators'; -import type { ILicenseReport } from '@red/domain'; import { ChartDataset } from 'chart.js'; import { ChartBlue, ChartGreen, ChartRed } from '../../utils/constants'; import { getLabelsFromLicense, getLineConfig } from '../../utils/functions'; import { TranslateService } from '@ngx-translate/core'; +import { BehaviorSubject, combineLatest } from 'rxjs'; +import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; +import { size } from '@iqser/common-ui/lib/utils'; + +enum ViewMode { + PAGES = 'pages', + VOLUME = 'volume', +} @Component({ selector: 'red-license-usage', @@ -13,18 +20,39 @@ import { TranslateService } from '@ngx-translate/core'; styleUrls: ['./license-usage.component.scss'], }) export class LicenseUsageComponent { - readonly data$ = this.licenseService.selectedLicense$.pipe( - map(() => this.licenseService.currentLicenseReport), - map(license => ({ - datasets: this.#getDatasets(license), - labels: getLabelsFromLicense(license), - })), - ); + readonly viewModes = ViewMode; + activeViewMode$ = new BehaviorSubject(ViewMode.VOLUME); + + readonly data$ = combineLatest([this.licenseService.selectedLicense$, this.activeViewMode$]).pipe(map(() => this.#getData())); constructor(readonly licenseService: LicenseService, private readonly _translateService: TranslateService) {} - #getDatasets(license: ILicenseReport): ChartDataset[] { - const monthlyData = license.monthlyData; + switchView(mode: ViewMode): void { + this.activeViewMode$.next(mode); + } + + #getData() { + const yAxisLabel = + this.activeViewMode$.value === ViewMode.PAGES + ? _('license-info-screen.pages.pages-per-month') + : _('license-info-screen.pages.analyzed-data-per-month'); + const yAxisLabelRight = + this.activeViewMode$.value === ViewMode.PAGES + ? _('license-info-screen.pages.total-pages') + : _('license-info-screen.pages.total-analyzed-data'); + const isVolume = this.activeViewMode$.value === ViewMode.VOLUME; + + return { + datasets: isVolume ? this.#getVolumeDatasets() : this.#getPagesDatasets(), + labels: getLabelsFromLicense(this.licenseService.currentLicenseReport), + yAxisLabel: this._translateService.instant(yAxisLabel), + yAxisLabelRight: this._translateService.instant(yAxisLabelRight), + valueFormatter: isVolume ? value => size(value) : undefined, + }; + } + + #getPagesDatasets(): ChartDataset[] { + const monthlyData = this.licenseService.currentLicenseReport.monthlyData; return [ { @@ -48,11 +76,49 @@ export class LicenseUsageComponent { month.numberOfAnalyzedPages + monthlyData.slice(0, monthIndex).reduce((acc, curr) => acc + curr.numberOfAnalyzedPages, 0), ), - label: this._translateService.instant('license-info-screen.pages.cumulative'), + label: this._translateService.instant('license-info-screen.pages.cumulative-pages'), yAxisID: 'y1', order: 1, ...getLineConfig(ChartGreen, true, false), }, ]; } + + #getVolumeDatasets(): ChartDataset[] { + const monthlyData = this.licenseService.currentLicenseReport.monthlyData; + + const datasets: ChartDataset[] = [ + { + data: monthlyData.flatMap(d => d.analysedFilesBytes), + label: this._translateService.instant('license-info-screen.pages.analyzed-data-per-month'), + type: 'bar', + backgroundColor: ChartBlue, + borderColor: ChartBlue, + order: 2, + }, + + { + data: monthlyData.map( + (month, monthIndex) => + month.analysedFilesBytes + monthlyData.slice(0, monthIndex).reduce((acc, curr) => acc + curr.analysedFilesBytes, 0), + ), + label: this._translateService.instant('license-info-screen.pages.cumulative-volume'), + yAxisID: 'y1', + order: 1, + ...getLineConfig(ChartGreen, true, false), + }, + ]; + + if (this.licenseService.uploadedBytesCapacity) { + datasets.push({ + data: monthlyData.flatMap(() => this.licenseService.uploadedBytesCapacity), + label: this._translateService.instant('license-info-screen.licensed-capacity'), + ...getLineConfig(ChartRed, true, false), + yAxisID: 'y1', + order: 1, + }); + } + + return datasets; + } } diff --git a/apps/red-ui/src/assets/i18n/redact/de.json b/apps/red-ui/src/assets/i18n/redact/de.json index a2651baa0..7c8549c24 100644 --- a/apps/red-ui/src/assets/i18n/redact/de.json +++ b/apps/red-ui/src/assets/i18n/redact/de.json @@ -1671,8 +1671,13 @@ "licensing-period": "Laufzeit der Lizenz", "ocr-analyzed-pages": "Mit OCR konvertierte Seiten", "pages": { - "cumulative": "Seiten insgesamt", + "analyzed-data-per-month": "", + "cumulative-pages": "Seiten insgesamt", + "cumulative-volume": "", "pages-per-month": "Seiten pro Monat", + "statistics-by-capacity": "", + "statistics-by-pages": "", + "total-analyzed-data": "", "total-pages": "Gesamtzahl der Seiten" }, "status": { diff --git a/apps/red-ui/src/assets/i18n/redact/en.json b/apps/red-ui/src/assets/i18n/redact/en.json index c3a6bedf4..5ad6ae7d5 100644 --- a/apps/red-ui/src/assets/i18n/redact/en.json +++ b/apps/red-ui/src/assets/i18n/redact/en.json @@ -1671,8 +1671,13 @@ "licensing-period": "Licensing Period", "ocr-analyzed-pages": "OCR Processed Pages in Licensing Period", "pages": { - "cumulative": "Cumulative Pages", + "analyzed-data-per-month": "Analyzed Data per Month", + "cumulative-pages": "Cumulative Pages", + "cumulative-volume": "Cumulative Analyzed Data Volume", "pages-per-month": "Pages per Month", + "statistics-by-capacity": "Statistics by Capacity", + "statistics-by-pages": "Statistics by Pages", + "total-analyzed-data": "Total Analyzed Data", "total-pages": "Total Pages" }, "status": { diff --git a/apps/red-ui/src/assets/i18n/scm/de.json b/apps/red-ui/src/assets/i18n/scm/de.json index 99a3c0e82..26c56448b 100644 --- a/apps/red-ui/src/assets/i18n/scm/de.json +++ b/apps/red-ui/src/assets/i18n/scm/de.json @@ -1671,8 +1671,13 @@ "licensing-period": "Laufzeit der Lizenz", "ocr-analyzed-pages": "Mit OCR konvertierte Seiten", "pages": { - "cumulative": "Seiten insgesamt", + "analyzed-data-per-month": "", + "cumulative-pages": "Seiten insgesamt", + "cumulative-volume": "", "pages-per-month": "Seiten pro Monat", + "statistics-by-capacity": "", + "statistics-by-pages": "", + "total-analyzed-data": "", "total-pages": "Gesamtzahl der Seiten" }, "status": { diff --git a/apps/red-ui/src/assets/i18n/scm/en.json b/apps/red-ui/src/assets/i18n/scm/en.json index e404de678..e76229e10 100644 --- a/apps/red-ui/src/assets/i18n/scm/en.json +++ b/apps/red-ui/src/assets/i18n/scm/en.json @@ -1671,8 +1671,13 @@ "licensing-period": "Licensing Period", "ocr-analyzed-pages": "OCR Processed Pages in Licensing Period", "pages": { - "cumulative": "Cumulative Pages", + "analyzed-data-per-month": "Analyzed Data per Month", + "cumulative-pages": "Cumulative Pages", + "cumulative-volume": "Cumulative Analyzed Data Volume", "pages-per-month": "Pages per Month", + "statistics-by-capacity": "Statistics by Capacity", + "statistics-by-pages": "Statistics by Pages", + "total-analyzed-data": "Total Analyzed Data", "total-pages": "Total Pages" }, "status": {