Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

RED-7113: Analysis capacity metrics in License Information

Browse Source
This commit is contained in:
Adina Țeudan 2023-07-20 00:40:52 +03:00
parent 031b362951
commit 627da2e7af
10 changed files with 134 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/modules/admin/screens/license/components/chart/chart.component.scss
View File

@ -4,5 +4,5 @@
.canvas-container {
position: relative;
width: 1000px;
width: 1200px;
}

1
apps/red-ui/src/app/modules/admin/screens/license/components/chart/chart.component.ts
View File

@ -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,

2
apps/red-ui/src/app/modules/admin/screens/license/components/license-storage/license-capacity.component.html
View File

@ -19,7 +19,7 @@
<div translate="license-info-screen.capacity.all-documents"></div>
<div>
{{ licenseService.currentLicenseReport.totalFilesUploadedBytes | size }}
<ng-container *ngIf="licenseService.analyzedPagesPercentageForCurrentLicensePercentage >= 0">
<ng-container *ngIf="licenseService.uploadedFilesBytesForCurrentLicensePercentage >= 0">
({{ licenseService.uploadedFilesBytesForCurrentLicensePercentage | number : '1.0-2' }}%)
</ng-container>
</div>

31
apps/red-ui/src/app/modules/admin/screens/license/components/license-usage/license-usage.component.html
View File

@ -49,14 +49,27 @@
<div>{{ licenseService.allLicensesReport.numberOfOcrPages }}</div>
</div>
<div class="row">
<redaction-chart
*ngIf="data$ | async as data"
[datasets]="data.datasets"
[labels]="data.labels"
[secondaryAxis]="true"
[yAxisLabelRight]="'license-info-screen.pages.total-pages' | translate"
[yAxisLabel]="'license-info-screen.pages.pages-per-month' | translate"
></redaction-chart>
<div class="row chart-row">
<div>
<div *ngIf="activeViewMode$ | async as activeViewMode" class="mt-16">
<button (click)="switchView(viewModes.VOLUME)" [class.active]="activeViewMode === viewModes.VOLUME" class="red-tab">
{{ 'license-info-screen.pages.statistics-by-capacity' | translate }}
</button>
<button (click)="switchView(viewModes.PAGES)" [class.active]="activeViewMode === viewModes.PAGES" class="red-tab">
{{ 'license-info-screen.pages.statistics-by-pages' | translate }}
</button>
</div>
<redaction-chart
*ngIf="data$ | async as data"
[datasets]="data.datasets"
[labels]="data.labels"
[secondaryAxis]="true"
[valueFormatter]="data.valueFormatter"
[yAxisLabelRight]="data.yAxisLabelRight"
[yAxisLabel]="data.yAxisLabel"
></redaction-chart>
</div>
</div>
</div>

10
apps/red-ui/src/app/modules/admin/screens/license/components/license-usage/license-usage.component.scss
View File

@ -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);
}
}
}

88
apps/red-ui/src/app/modules/admin/screens/license/components/license-usage/license-usage.component.ts
View File

@ -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>(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;
}
}

7
apps/red-ui/src/assets/i18n/redact/de.json
View File

@ -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": {

7
apps/red-ui/src/assets/i18n/redact/en.json
View File

@ -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": {

7
apps/red-ui/src/assets/i18n/scm/de.json
View File

@ -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": {

7
apps/red-ui/src/assets/i18n/scm/en.json
View File

@ -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": {