From 5f5322885aa726bf8a8e53e9f19a3a135021ff82 Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Wed, 22 Nov 2023 13:05:02 +0200
Subject: [PATCH] RED-7853: Fixed lines not showing when only one month is
 displayed.

---
 .../license-page-usage.component.ts               |  6 ++++++
 .../admin/screens/license/utils/functions.ts      | 15 ++++++++++-----
 apps/red-ui/src/app/utils/functions.ts            |  5 +++++
 3 files changed, 21 insertions(+), 5 deletions(-)

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 6b21d3973..44a45dd7e 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',
@@ -34,6 +36,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<ILicenseData>(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<string>(result, '');
     }
 
     return result;
diff --git a/apps/red-ui/src/app/utils/functions.ts b/apps/red-ui/src/app/utils/functions.ts
index 06fd984ca..b6b086c2e 100644
--- a/apps/red-ui/src/app/utils/functions.ts
+++ b/apps/red-ui/src/app/utils/functions.ts
@@ -133,3 +133,8 @@ export function calcTextWidthInPixels(text: string): number {
 
     return width;
 }
+
+export function addPaddingToArray<T>(array: T[], emptyElement: T) {
+    array.push(emptyElement);
+    array.splice(0, 0, emptyElement);
+}