diff --git a/apps/red-ui/src/app/modules/admin/screens/license/components/license-page-usage/license-page-usage.component.ts b/apps/red-ui/src/app/modules/admin/screens/license/components/license-page-usage/license-page-usage.component.ts index b76d30d21..65291f0b2 100644 --- a/apps/red-ui/src/app/modules/admin/screens/license/components/license-page-usage/license-page-usage.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/license/components/license-page-usage/license-page-usage.component.ts @@ -6,6 +6,8 @@ import { ChartBlue, ChartGreen, ChartRed } from '../../utils/constants'; import { getLabelsFromLicense, getLineConfig } from '../../utils/functions'; import { TranslateService } from '@ngx-translate/core'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; +import { addPaddingToArray } from '@utils/functions'; +import { ILicenseData } from '@red/domain'; @Component({ selector: 'red-license-page-usage', @@ -31,6 +33,10 @@ export class LicensePageUsageComponent { #getPagesDatasets(): ChartDataset[] { const monthlyData = this.licenseService.selectedLicenseReport.monthlyData; + if (monthlyData.length === 1) { + const empty = monthlyData.map(() => ({ numberOfAnalyzedPages: 0 } as ILicenseData))[0]; + addPaddingToArray(monthlyData, empty); + } return [ { 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 107bcbf6b..b1ac8d421 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,6 +1,6 @@ import dayjs, { Dayjs } from 'dayjs'; import { FillTarget } from 'chart.js'; -import { hexToRgba } from '@utils/functions'; +import { addPaddingToArray, hexToRgba } from '@utils/functions'; import { ILicenseReport } from '@red/domain'; import { ComplexFillTarget } from 'chart.js/dist/types'; @@ -32,14 +32,19 @@ export const getLineConfig: ( }); export const getLabelsFromLicense = (license: ILicenseReport) => { - let startMonth = dayjs(license.startDate).startOf('month'); + const startMonth = dayjs(license.startDate).startOf('month'); const endMonth = dayjs(license.endDate).endOf('month'); + let monthIterator = startMonth; const result = []; - while (startMonth.isBefore(endMonth)) { - result.push(verboseDate(startMonth)); - startMonth = startMonth.add(1, 'month'); + while (monthIterator.isBefore(endMonth)) { + result.push(verboseDate(monthIterator)); + monthIterator = monthIterator.add(1, 'month'); + } + + if (startMonth.month() === endMonth.month()) { + addPaddingToArray(result, ''); } return result; diff --git a/apps/red-ui/src/app/utils/functions.ts b/apps/red-ui/src/app/utils/functions.ts index ed720c96f..4e0426437 100644 --- a/apps/red-ui/src/app/utils/functions.ts +++ b/apps/red-ui/src/app/utils/functions.ts @@ -115,3 +115,8 @@ export function moveElementInArray(array: T[], element: T, index: number) { result.splice(index, 0, element); return result; } + +export function addPaddingToArray(array: T[], emptyElement: T) { + array.splice(0, 0, emptyElement); + array.push(emptyElement); +}