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 51d696e63..d98283f70 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
@@ -1,4 +1,4 @@
.canvas-container {
position: relative;
- width: 1200px;
+ width: 1000px;
}
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 52d0b255b..d6669e947 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
@@ -56,7 +56,7 @@ export class ChartComponent implements OnChanges {
},
},
plugins: {
- legend: { position: 'right', reverse: this.reverseLegend },
+ legend: { position: 'right', reverse: this.reverseLegend, maxWidth: 280 },
tooltip: {
callbacks: {
label: this.valueFormatter ? item => `${item.dataset.label}: ${this.valueFormatter(item.parsed.y)}` : undefined,
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/components/license-analysis-capacity-usage/license-analysis-capacity-usage.component.html b/apps/red-ui/src/app/modules/admin/screens/license/components/license-analysis-capacity-usage/license-analysis-capacity-usage.component.html
new file mode 100644
index 000000000..5452fcb5e
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/screens/license/components/license-analysis-capacity-usage/license-analysis-capacity-usage.component.html
@@ -0,0 +1,34 @@
+
-
+
-
+
{{ licenseService.selectedLicenseReport.activeFilesUploadedBytes | size }}
-
+
{{ licenseService.selectedLicenseReport.archivedFilesUploadedBytes | size }}
-
+
{{ licenseService.selectedLicenseReport.trashFilesUploadedBytes | size }}
-
+
{{ licenseService.selectedLicenseReport.totalFilesUploadedBytes | size }}
- = 0">
- ({{ licenseService.uploadedFilesBytesForSelectedLicensePercentage | number: '1.0-2' }}%)
+ = 0">
+ ({{ licenseService.retentionCapacityBytesForSelectedLicensePercentage | number: '1.0-2' }}%)
0"
+ [config]="donutChartConfig$ | async"
[direction]="'row'"
[radius]="80"
[strokeWidth]="15"
@@ -52,13 +52,13 @@
-
- {{ 'license-info-screen.capacity.storage-capacity' | translate }}
+
+ {{ 'license-info-screen.retention-capacity-usage.storage-capacity' | translate }}
- {{ 'license-info-screen.capacity.exceeded-capacity' | translate }}
+ {{ 'license-info-screen.retention-capacity-usage.exceeded-capacity' | translate }}
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/components/license-storage/license-capacity.component.scss b/apps/red-ui/src/app/modules/admin/screens/license/components/license-retention-capacity-usage/license-retention-capacity.component.scss
similarity index 100%
rename from apps/red-ui/src/app/modules/admin/screens/license/components/license-storage/license-capacity.component.scss
rename to apps/red-ui/src/app/modules/admin/screens/license/components/license-retention-capacity-usage/license-retention-capacity.component.scss
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/components/license-storage/license-capacity.component.ts b/apps/red-ui/src/app/modules/admin/screens/license/components/license-retention-capacity-usage/license-retention-capacity.component.ts
similarity index 71%
rename from apps/red-ui/src/app/modules/admin/screens/license/components/license-storage/license-capacity.component.ts
rename to apps/red-ui/src/app/modules/admin/screens/license/components/license-retention-capacity-usage/license-retention-capacity.component.ts
index dffab4001..abefa9672 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license/components/license-storage/license-capacity.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/license/components/license-retention-capacity-usage/license-retention-capacity.component.ts
@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { size } from '@iqser/common-ui/lib/utils';
import { LicenseService } from '@services/license.service';
-import { map, tap } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
import type { DonutChartConfig, ILicenseReport } from '@red/domain';
import { ChartDataset } from 'chart.js';
import { ChartBlack, ChartBlue, ChartGreen, ChartGrey, ChartRed } from '../../utils/constants';
@@ -10,18 +10,18 @@ import { getLabelsFromLicense, getLineConfig } from '../../utils/functions';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
@Component({
- selector: 'red-license-capacity',
- templateUrl: './license-capacity.component.html',
- styleUrls: ['./license-capacity.component.scss'],
+ selector: 'red-license-retention-capacity',
+ templateUrl: './license-retention-capacity.component.html',
+ styleUrls: ['./license-retention-capacity.component.scss'],
})
-export class LicenseCapacityComponent {
+export class LicenseRetentionCapacityComponent {
readonly formatSize = size;
- donutChartConfig: DonutChartConfig[] = [];
+ readonly donutChartConfig$ = this.licenseService.selectedLicense$.pipe(
+ map(() => this.licenseService.selectedLicenseReport),
+ map(license => this.#getDonutChartConfig(license)),
+ );
readonly data$ = this.licenseService.selectedLicense$.pipe(
map(() => this.licenseService.selectedLicenseReport),
- tap(license => {
- this.donutChartConfig = this.#getDonutChartConfig(license);
- }),
map(license => ({
datasets: this.#getDatasets(license),
labels: getLabelsFromLicense(license),
@@ -29,29 +29,32 @@ export class LicenseCapacityComponent {
);
readonly size = size;
- constructor(readonly licenseService: LicenseService, private readonly _translateService: TranslateService) {}
+ constructor(
+ readonly licenseService: LicenseService,
+ private readonly _translateService: TranslateService,
+ ) {}
#getDonutChartConfig(license: ILicenseReport): DonutChartConfig[] {
return [
{
value: license.activeFilesUploadedBytes,
color: ChartGreen,
- label: this._translateService.instant(_('license-info-screen.capacity.active-documents')),
+ label: this._translateService.instant(_('license-info-screen.retention-capacity-usage.active-documents')),
},
{
value: license.archivedFilesUploadedBytes,
color: ChartBlue,
- label: this._translateService.instant(_('license-info-screen.capacity.archived-documents')),
+ label: this._translateService.instant(_('license-info-screen.retention-capacity-usage.archived-documents')),
},
{
value: license.trashFilesUploadedBytes,
color: ChartRed,
- label: this._translateService.instant(_('license-info-screen.capacity.trash-documents')),
+ label: this._translateService.instant(_('license-info-screen.retention-capacity-usage.trash-documents')),
},
{
- value: Math.max(this.licenseService.uploadedBytesCapacity - license.totalFilesUploadedBytes, 0),
+ value: Math.max(this.licenseService.retentionCapacityBytes - license.totalFilesUploadedBytes, 0),
color: ChartGrey,
- label: this._translateService.instant(_('license-info-screen.capacity.unused')),
+ label: this._translateService.instant(_('license-info-screen.retention-capacity-usage.unused')),
},
];
}
@@ -62,25 +65,25 @@ export class LicenseCapacityComponent {
return [
{
data: monthlyData.flatMap(d => d.activeFilesUploadedBytes),
- label: this._translateService.instant('license-info-screen.capacity.active-documents'),
+ label: this._translateService.instant('license-info-screen.retention-capacity-usage.active-documents'),
...getLineConfig(ChartGreen, false, 'origin'),
stack: 'storage',
},
{
data: monthlyData.flatMap(d => d.archivedFilesUploadedBytes),
- label: this._translateService.instant('license-info-screen.capacity.archived-documents'),
+ label: this._translateService.instant('license-info-screen.retention-capacity-usage.archived-documents'),
...getLineConfig(ChartBlue, false, '-1'),
stack: 'storage',
},
{
data: monthlyData.flatMap(d => d.trashFilesUploadedBytes),
- label: this._translateService.instant('license-info-screen.capacity.trash-documents'),
+ label: this._translateService.instant('license-info-screen.retention-capacity-usage.trash-documents'),
...getLineConfig(ChartRed, false, '-1'),
stack: 'storage',
},
{
data: monthlyData.flatMap(d => d.activeFilesUploadedBytes + d.archivedFilesUploadedBytes + d.trashFilesUploadedBytes),
- label: this._translateService.instant('license-info-screen.capacity.all-documents'),
+ label: this._translateService.instant('license-info-screen.retention-capacity-usage.used-capacity'),
...getLineConfig(ChartBlack, true, false),
borderWidth: 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
deleted file mode 100644
index fe2fcc7cc..000000000
--- a/apps/red-ui/src/app/modules/admin/screens/license/components/license-usage/license-usage.component.html
+++ /dev/null
@@ -1,75 +0,0 @@
-
-
-
-
-
-
- {{ licenseService.selectedLicenseReport.analysedFilesBytes | size }}
- = 0">
- ({{ licenseService.analyzedFilesBytesForSelectedLicensePercentage | number : '1.0-2' }}%)
-
-
-
-
-
-
-
- {{ licenseService.allLicensesReport.analysedFilesBytes | size }}
-
-
-
-
-
-
- {{ licenseService.selectedLicenseReport.numberOfAnalyzedPages }}
- = 0">
- ({{ licenseService.analyzedPagesPercentageForSelectedLicensePercentage | number : '1.0-2' }}%)
-
-
-
-
-
-
-
{{ licenseService.selectedLicenseReport.numberOfOcrPages }}
-
-
-
-
-
{{ licenseService.unlicensedPages }}
-
-
-
-
-
-
{{ licenseService.allLicensesReport.numberOfAnalyzedPages }}
-
-
-
-
-
{{ licenseService.allLicensesReport.numberOfOcrPages }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
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
deleted file mode 100644
index aa4ab2008..000000000
--- a/apps/red-ui/src/app/modules/admin/screens/license/components/license-usage/license-usage.component.ts
+++ /dev/null
@@ -1,136 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { LicenseService } from '@services/license.service';
-import { map } from 'rxjs/operators';
-import { ChartDataset } from 'chart.js';
-import { ChartBlue, ChartGreen, ChartRed, LicenseFeatures } from '../../utils/constants';
-import { getLabelsFromLicense, getLineConfig } from '../../utils/functions';
-import { TranslateService } from '@ngx-translate/core';
-import { BehaviorSubject, combineLatest, Subscription } 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',
- templateUrl: './license-usage.component.html',
- styleUrls: ['./license-usage.component.scss'],
-})
-export class LicenseUsageComponent implements OnDestroy {
- readonly viewModes = ViewMode;
- readonly activeViewMode$ = new BehaviorSubject
(
- this.licenseService.getFeature(LicenseFeatures.UPLOADED_BYTES_CAPACITY) ? ViewMode.VOLUME : ViewMode.PAGES,
- );
- readonly data$ = combineLatest([this.licenseService.selectedLicense$, this.activeViewMode$]).pipe(map(() => this.#getData()));
- private _subscription: Subscription;
-
- constructor(readonly licenseService: LicenseService, private readonly _translateService: TranslateService) {
- this._subscription = this.licenseService.selectedLicense$
- .pipe(map(() => this.licenseService.hasNumberFeature(LicenseFeatures.UPLOADED_BYTES_CAPACITY)))
- .subscribe(hasCapacity => {
- this.switchView(hasCapacity ? ViewMode.VOLUME : ViewMode.PAGES);
- });
- }
-
- ngOnDestroy() {
- this._subscription.unsubscribe();
- }
-
- 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.selectedLicenseReport),
- yAxisLabel: this._translateService.instant(yAxisLabel),
- yAxisLabelRight: this._translateService.instant(yAxisLabelRight),
- valueFormatter: isVolume ? value => size(value) : undefined,
- };
- }
-
- #getPagesDatasets(): ChartDataset[] {
- const monthlyData = this.licenseService.selectedLicenseReport.monthlyData;
-
- return [
- {
- data: monthlyData.flatMap(d => d.numberOfAnalyzedPages),
- label: this._translateService.instant('license-info-screen.pages.pages-per-month'),
- type: 'bar',
- backgroundColor: ChartBlue,
- borderColor: ChartBlue,
- order: 2,
- },
- {
- data: monthlyData.flatMap(() => this.licenseService.totalLicensedNumberOfPages),
- label: this._translateService.instant('license-info-screen.pages.total-pages'),
- ...getLineConfig(ChartRed, true, false),
- yAxisID: 'y1',
- order: 1,
- },
- {
- data: monthlyData.map(
- (month, monthIndex) =>
- month.numberOfAnalyzedPages +
- monthlyData.slice(0, monthIndex).reduce((acc, curr) => acc + curr.numberOfAnalyzedPages, 0),
- ),
- label: this._translateService.instant('license-info-screen.pages.cumulative-pages'),
- yAxisID: 'y1',
- order: 1,
- ...getLineConfig(ChartGreen, true, false),
- },
- ];
- }
-
- #getVolumeDatasets(): ChartDataset[] {
- const monthlyData = this.licenseService.selectedLicenseReport.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/app/modules/admin/screens/license/license-screen/license-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.html
index 4585f72c6..399ab7748 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.html
@@ -23,7 +23,7 @@
- {{ 'license-info-screen.copyright-claim-text' | translate : { currentYear: currentYear } }}
+ {{ 'license-info-screen.copyright-claim-text' | translate: { currentYear: currentYear } }}
@@ -32,10 +32,10 @@
-