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

RED-6830: Updates to storage usage chart

Browse Source
This commit is contained in:
Adina Țeudan 2023-07-10 23:02:45 +03:00
parent dd6d41a967
commit d6e879b563
12 changed files with 54 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -42,6 +42,7 @@
*ngIf="data$ | async as data"
[datasets]="data.datasets"
[labels]="data.labels"
[ticksCallback]="formatSize"
[reverseLegend]="true"
[valueFormatter]="formatSize"
></redaction-chart>
</div>

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

@ -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,
},
];
}
}

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

@ -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"
></redaction-chart>
</div>

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

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

1
apps/red-ui/src/app/modules/admin/screens/license/utils/constants.ts
View File

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

6
apps/red-ui/src/app/modules/admin/screens/license/utils/functions.ts
View File

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

4
apps/red-ui/src/assets/config/config.json
View File

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

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

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

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

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

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

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

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

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