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 cce4f1eef..e44fe4cf7 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 @@ -6,7 +6,7 @@ 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 { getLabelsFromMonthlyData, getLineConfig } from '../../utils/functions'; +import { getLabelsFromLicense, getLineConfig } from '../../utils/functions'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; @Component({ @@ -26,7 +26,7 @@ export class LicenseStorageComponent { }), map(license => ({ datasets: this.#getDatasets(license), - labels: getLabelsFromMonthlyData(license.monthlyData), + labels: getLabelsFromLicense(license), })), ); readonly size = size; 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 8f1524d3c..0e423a730 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,7 +5,7 @@ import { map } from 'rxjs/operators'; import type { ILicenseReport } from '@red/domain'; import { ChartDataset } from 'chart.js'; import { ChartBlue, ChartGreen, ChartRed } from '../../utils/constants'; -import { getLabelsFromMonthlyData, getLineConfig } from '../../utils/functions'; +import { getLabelsFromLicense, getLineConfig } from '../../utils/functions'; @Component({ selector: 'red-license-usage', @@ -18,7 +18,7 @@ export class LicenseUsageComponent { map(() => this.licenseService.currentLicenseReport), map(license => ({ datasets: this.#getDatasets(license), - labels: getLabelsFromMonthlyData(license.monthlyData), + labels: getLabelsFromLicense(license), })), ); @@ -32,12 +32,14 @@ export class LicenseUsageComponent { #getDatasets(license: ILicenseReport): ChartDataset[] { const monthlyData = license.monthlyData; + return [ { data: monthlyData.flatMap(d => d.numberOfAnalyzedPages), label: 'Pages per Month', type: 'bar', backgroundColor: ChartBlue, + borderColor: ChartBlue, order: 2, }, { 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 efbbea5d3..efa5d0aad 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 @@ -1,7 +1,7 @@ import dayjs, { Dayjs } from 'dayjs'; import { FillTarget } from 'chart.js'; import { hexToRgba } from '@utils/functions'; -import { ILicenseData } from '@red/domain'; +import { ILicenseData, ILicenseReport } from '@red/domain'; import { ComplexFillTarget } from 'chart.js/dist/types'; const monthNames = dayjs.monthsShort(); @@ -30,3 +30,17 @@ export const getLineConfig: ( }); export const getLabelsFromMonthlyData = (monthlyData: ILicenseData[]) => monthlyData.map(data => verboseDate(dayjs(data.startDate))); + +export const getLabelsFromLicense = (license: ILicenseReport) => { + let startMonth = dayjs(license.startDate); + const endMonth = dayjs(license.endDate); + + const result = []; + + while (startMonth.isBefore(endMonth)) { + result.push(verboseDate(startMonth)); + startMonth = startMonth.add(1, 'month'); + } + + return result; +};