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 0faf36246..fb9a9e314 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 @@ -9,10 +9,11 @@ import { ChartConfiguration, ChartDataset } from 'chart.js'; export class ChartComponent implements OnChanges { @Input({ required: true }) datasets: ChartDataset[]; @Input({ required: true }) labels: string[]; - @Input() ticksCallback?: (value: number) => string; + @Input() valueFormatter?: (value: number) => string; @Input() secondaryAxis = false; @Input() yAxisLabel?: string; @Input() yAxisLabelRight?: string; + @Input() reverseLegend = false; chartData: ChartConfiguration['data']; chartOptions: ChartConfiguration<'line'>['options'] = {}; @@ -34,7 +35,7 @@ export class ChartComponent implements OnChanges { scales: { y: { stacked: true, - ticks: { callback: this.ticksCallback ? (value: number) => this.ticksCallback(value) : undefined }, + ticks: { callback: this.valueFormatter ? (value: number) => this.valueFormatter(value) : undefined }, title: { display: !!this.yAxisLabel, text: this.yAxisLabel, @@ -52,10 +53,10 @@ export class ChartComponent implements OnChanges { }, }, plugins: { - legend: { position: 'right' }, + legend: { position: 'right', reverse: this.reverseLegend }, tooltip: { callbacks: { - label: this.ticksCallback ? item => `${item.dataset.label}: ${this.ticksCallback(item.parsed.y)}` : undefined, + 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-storage/license-storage.component.html b/apps/red-ui/src/app/modules/admin/screens/license/components/license-storage/license-storage.component.html index 87bd0b86b..821f0489e 100644 --- a/apps/red-ui/src/app/modules/admin/screens/license/components/license-storage/license-storage.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/license/components/license-storage/license-storage.component.html @@ -42,6 +42,7 @@ *ngIf="data$ | async as data" [datasets]="data.datasets" [labels]="data.labels" - [ticksCallback]="formatSize" + [reverseLegend]="true" + [valueFormatter]="formatSize" > diff --git a/apps/red-ui/src/app/modules/admin/screens/license/components/license-storage/license-storage.component.ts b/apps/red-ui/src/app/modules/admin/screens/license/components/license-storage/license-storage.component.ts index 9b45d3aa0..4795e4b96 100644 --- a/apps/red-ui/src/app/modules/admin/screens/license/components/license-storage/license-storage.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/license/components/license-storage/license-storage.component.ts @@ -5,7 +5,7 @@ import { LicenseService } from '@services/license.service'; import { map, tap } from 'rxjs/operators'; import type { DonutChartConfig, ILicenseReport } from '@red/domain'; import { ChartDataset } from 'chart.js'; -import { ChartBlue, ChartGreen, ChartGrey, ChartRed } from '../../utils/constants'; +import { ChartBlack, ChartBlue, ChartGreen, ChartGrey, ChartRed } from '../../utils/constants'; import { getLabelsFromLicense, getLineConfig } from '../../utils/functions'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; @@ -71,21 +71,27 @@ export class LicenseStorageComponent { { data: monthlyData.flatMap(d => d.activeFilesUploadedBytes), label: this._translateService.instant('license-info-screen.storage.active-documents'), - ...getLineConfig(ChartGreen, 'origin'), + ...getLineConfig(ChartGreen, false, 'origin'), stack: 'storage', }, { data: monthlyData.flatMap(d => d.archivedFilesUploadedBytes), label: this._translateService.instant('license-info-screen.storage.archived-documents'), - ...getLineConfig(ChartBlue, '-1'), + ...getLineConfig(ChartBlue, false, '-1'), stack: 'storage', }, { data: monthlyData.flatMap(d => d.trashFilesUploadedBytes), label: this._translateService.instant('license-info-screen.storage.trash-documents'), - ...getLineConfig(ChartRed, '-1'), + ...getLineConfig(ChartRed, false, '-1'), stack: 'storage', }, + { + data: monthlyData.flatMap(d => d.activeFilesUploadedBytes + d.archivedFilesUploadedBytes + d.trashFilesUploadedBytes), + label: this._translateService.instant('license-info-screen.storage.all-documents'), + ...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 index dec058ea6..9aeee0700 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 @@ -35,7 +35,7 @@ [datasets]="data.datasets" [labels]="data.labels" [secondaryAxis]="true" - [yAxisLabelRight]="'license-info-screen.chart.total-pages' | translate" - [yAxisLabel]="'license-info-screen.chart.pages-per-month' | translate" + [yAxisLabelRight]="'license-info-screen.pages.total-pages' | translate" + [yAxisLabel]="'license-info-screen.pages.pages-per-month' | translate" > 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 8e10ee3c8..0da63b972 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 @@ -5,6 +5,7 @@ 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'; @Component({ selector: 'red-license-usage', @@ -21,7 +22,7 @@ export class LicenseUsageComponent { })), ); - constructor(readonly licenseService: LicenseService) {} + constructor(readonly licenseService: LicenseService, private readonly _translateService: TranslateService) {} getAnalysisPercentageOfLicense() { const totalLicensedNumberOfPages = this.licenseService.totalLicensedNumberOfPages; @@ -35,16 +36,16 @@ export class LicenseUsageComponent { return [ { data: monthlyData.flatMap(d => d.numberOfAnalyzedPages), - label: 'Pages per Month', + label: this._translateService.instant('license-info-screen.pages.pages-per-month'), type: 'bar', backgroundColor: ChartBlue, borderColor: ChartBlue, order: 2, }, { - data: monthlyData.flatMap(() => 200000), - label: 'Total Pages', - ...getLineConfig(ChartRed, false), + data: monthlyData.flatMap(() => this.licenseService.totalLicensedNumberOfPages), + label: this._translateService.instant('license-info-screen.pages.total-pages'), + ...getLineConfig(ChartRed, true, false), yAxisID: 'y1', order: 1, }, @@ -54,10 +55,10 @@ export class LicenseUsageComponent { month.numberOfAnalyzedPages + monthlyData.slice(0, monthIndex).reduce((acc, curr) => acc + curr.numberOfAnalyzedPages, 0), ), - label: 'Cumulative Pages', + label: this._translateService.instant('license-info-screen.pages.cumulative'), yAxisID: 'y1', order: 1, - ...getLineConfig(ChartGreen, false), + ...getLineConfig(ChartGreen, true, false), }, ]; } diff --git a/apps/red-ui/src/app/modules/admin/screens/license/utils/constants.ts b/apps/red-ui/src/app/modules/admin/screens/license/utils/constants.ts index 24c1bde59..2b7c99a2a 100644 --- a/apps/red-ui/src/app/modules/admin/screens/license/utils/constants.ts +++ b/apps/red-ui/src/app/modules/admin/screens/license/utils/constants.ts @@ -2,3 +2,4 @@ export const ChartRed = '#dd4d50'; export const ChartGreen = '#5ce594'; export const ChartBlue = '#0389ec'; export const ChartGrey = '#ccced3'; // grey-5 +export const ChartBlack = '#283241'; // grey-1 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 efa5d0aad..1711451bc 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 @@ -10,6 +10,7 @@ export const verboseDate = (date: Dayjs) => `${monthNames[date.month()]} ${date. export const getLineConfig: ( color: string, + displayLine: boolean, target: FillTarget, ) => { type: 'line'; @@ -17,9 +18,9 @@ export const getLineConfig: ( backgroundColor: string; pointBackgroundColor: string; fill: ComplexFillTarget; -} = (color, target) => ({ +} = (color, displayLine, target) => ({ type: 'line', - borderColor: hexToRgba(color, 1), + borderColor: hexToRgba(color, displayLine ? 1 : 0), backgroundColor: hexToRgba(color, 1), pointBackgroundColor: hexToRgba(color, 1), fill: { @@ -27,6 +28,7 @@ export const getLineConfig: ( above: hexToRgba(color, 0.3), below: hexToRgba(color, 0.3), }, + pointStyle: false, }); export const getLabelsFromMonthlyData = (monthlyData: ILicenseData[]) => monthlyData.map(data => verboseDate(dayjs(data.startDate))); diff --git a/apps/red-ui/src/assets/config/config.json b/apps/red-ui/src/assets/config/config.json index 3e5de8134..311b38e1a 100644 --- a/apps/red-ui/src/assets/config/config.json +++ b/apps/red-ui/src/assets/config/config.json @@ -1,7 +1,7 @@ { "ADMIN_CONTACT_NAME": null, "ADMIN_CONTACT_URL": null, - "API_URL": "https://dev-04.iqser.cloud", + "API_URL": "https://dev-02.iqser.cloud", "APP_NAME": "RedactManager", "AUTO_READ_TIME": 3, "BACKEND_APP_VERSION": "4.4.40", @@ -11,7 +11,7 @@ "MAX_RETRIES_ON_SERVER_ERROR": 3, "OAUTH_CLIENT_ID": "redaction", "OAUTH_IDP_HINT": null, - "OAUTH_URL": "https://dev-04.iqser.cloud/auth", + "OAUTH_URL": "https://dev-02.iqser.cloud/auth", "RECENT_PERIOD_IN_HOURS": 24, "SELECTION_MODE": "structural", "MANUAL_BASE_URL": "https://docs.redactmanager.com/preview", diff --git a/apps/red-ui/src/assets/i18n/redact/de.json b/apps/red-ui/src/assets/i18n/redact/de.json index 23394a312..9469284fd 100644 --- a/apps/red-ui/src/assets/i18n/redact/de.json +++ b/apps/red-ui/src/assets/i18n/redact/de.json @@ -1637,10 +1637,6 @@ }, "license-info-screen": { "backend-version": "Backend-Version der Anwendung", - "chart": { - "pages-per-month": "Seiten pro Monat", - "total-pages": "Gesamtzahl der Seiten" - }, "copyright-claim-text": "Copyright © 2020 - {currentYear} knecon AG (powered by IQSER)", "copyright-claim-title": "Copyright", "current-analyzed": "In aktuellem Lizenzzeitraum analysierte Seiten", @@ -1661,6 +1657,11 @@ "licensing-details": "Lizenzdetails", "licensing-period": "Laufzeit der Lizenz", "ocr-analyzed-pages": "Mit OCR konvertierte Seiten", + "pages": { + "cumulative": "Seiten insgesamt", + "pages-per-month": "Seiten pro Monat", + "total-pages": "Gesamtzahl der Seiten" + }, "status": { "active": "Aktiv", "inactive": "" diff --git a/apps/red-ui/src/assets/i18n/redact/en.json b/apps/red-ui/src/assets/i18n/redact/en.json index f814951c8..01547ec36 100644 --- a/apps/red-ui/src/assets/i18n/redact/en.json +++ b/apps/red-ui/src/assets/i18n/redact/en.json @@ -1637,10 +1637,6 @@ }, "license-info-screen": { "backend-version": "Backend Application Version", - "chart": { - "pages-per-month": "Pages per Month", - "total-pages": "Total Pages" - }, "copyright-claim-text": "Copyright © 2020 - {currentYear} knecon AG (powered by IQSER)", "copyright-claim-title": "Copyright Claim", "current-analyzed": "Analyzed Pages in Licensing Period", @@ -1661,6 +1657,11 @@ "licensing-details": "Licensing Details", "licensing-period": "Licensing Period", "ocr-analyzed-pages": "OCR Processed Pages in Licensing Period", + "pages": { + "cumulative": "Cumulative Pages", + "pages-per-month": "Pages per Month", + "total-pages": "Total Pages" + }, "status": { "active": "Active", "inactive": "Inactive" diff --git a/apps/red-ui/src/assets/i18n/scm/de.json b/apps/red-ui/src/assets/i18n/scm/de.json index a0cc3ecee..efa545a5e 100644 --- a/apps/red-ui/src/assets/i18n/scm/de.json +++ b/apps/red-ui/src/assets/i18n/scm/de.json @@ -1637,10 +1637,6 @@ }, "license-info-screen": { "backend-version": "Backend-Version der Anwendung", - "chart": { - "pages-per-month": "Seiten pro Monat", - "total-pages": "Gesamtzahl der Seiten" - }, "copyright-claim-text": "Copyright © 2020 - {currentYear} knecon AG (powered by IQSER)", "copyright-claim-title": "Copyright", "current-analyzed": "In aktuellem Lizenzzeitraum analysierte Seiten", @@ -1661,6 +1657,11 @@ "licensing-details": "Lizenzdetails", "licensing-period": "Laufzeit der Lizenz", "ocr-analyzed-pages": "Mit OCR konvertierte Seiten", + "pages": { + "cumulative": "Seiten insgesamt", + "pages-per-month": "Seiten pro Monat", + "total-pages": "Gesamtzahl der Seiten" + }, "status": { "active": "Aktiv", "inactive": "" diff --git a/apps/red-ui/src/assets/i18n/scm/en.json b/apps/red-ui/src/assets/i18n/scm/en.json index 0751acb8f..1fc437315 100644 --- a/apps/red-ui/src/assets/i18n/scm/en.json +++ b/apps/red-ui/src/assets/i18n/scm/en.json @@ -1637,10 +1637,6 @@ }, "license-info-screen": { "backend-version": "Backend Application Version", - "chart": { - "pages-per-month": "Pages per Month", - "total-pages": "Total Pages" - }, "copyright-claim-text": "Copyright © 2020 - {currentYear} knecon AG (powered by IQSER)", "copyright-claim-title": "Copyright Claim", "current-analyzed": "Analyzed Pages in Licensing Period", @@ -1661,6 +1657,11 @@ "licensing-details": "Licensing Details", "licensing-period": "Licensing Period", "ocr-analyzed-pages": "OCR Processed Pages in Licensing Period", + "pages": { + "cumulative": "Cumulative Pages", + "pages-per-month": "Pages per Month", + "total-pages": "Total Pages" + }, "status": { "active": "Active", "inactive": "Inactive"