fix(time-based-chart): don't crash when there is no value and format the data to display "no data" on the front

packages/datasource-customizer/src/decorators/chart/result-builder.ts

@@ -51,6 +51,7 @@ export default class ResultBuilder {
     timeRange: DateOperation,
     values: Array<{ date: Date; value: number | null }> | Record<string, number | null>,
   ): TimeBasedChart {
+    if (!values) return [];
     if (Array.isArray(values)) return ResultBuilder.buildTimeBasedChartResult(timeRange, values);
 
     const formattedValues = [];
@@ -93,7 +94,9 @@ export default class ResultBuilder {
     dates: Date[],
     lines: Array<{ label: string; values: Array<number | null> }>,
   ): MultipleTimeBasedChart {
-    let formattedTimes;
+    if (!dates || !lines) return { labels: null, values: null };
+
+    let formattedTimes = null;
     const formattedLine = lines.map(line => {
       const values = dates.reduce((computed, date, index) => {
         computed.push({ date, value: line.values[index] });
@@ -107,7 +110,10 @@ export default class ResultBuilder {
       return { key: line.label, values: buildTimeBased.map(timeBased => timeBased.values.value) };
     });
 
-    return { labels: formattedTimes, values: formattedLine };
+    return {
+      labels: formattedTimes,
+      values: formattedTimes && formattedTimes.length > 0 ? formattedLine : null,
+    };
   }
 
   percentage(value: number): PercentageChart {
@@ -146,6 +152,8 @@ export default class ResultBuilder {
     timeRange: DateOperation,
     points: Array<{ date: Date; value: number | null }>,
   ): TimeBasedChart {
+    if (!points.length) return [];
+
     const pointsInDateTime: { date: DateTime; value: number | null }[] = [];
     points.forEach(point => {
       pointsInDateTime.push({ date: DateTime.fromJSDate(point.date), value: point.value });

packages/datasource-customizer/test/decorators/chart/result-builder.test.ts

@@ -74,6 +74,18 @@ describe('Chart result builder', () => {
     ]);
   });
 
+  test('timeBased() should return empty array when null is given for values property', () => {
+    const result = builder.timeBased('Year', null);
+
+    expect(result).toStrictEqual([]);
+  });
+
+  test('timeBased() should return empty array when empty array is given', () => {
+    const result = builder.timeBased('Year', []);
+
+    expect(result).toStrictEqual([]);
+  });
+
   test('percentage() is the identify function', () => {
     expect(builder.percentage(34)).toStrictEqual(34);
   });
@@ -186,5 +198,29 @@ describe('Chart result builder', () => {
         });
       });
     });
+
+    describe('when there is no date', () => {
+      it('should return empty array labels and null values for the line', () => {
+        const result = builder.multipleTimeBased('Year', [], [{ label: 'firstLine', values: [0] }]);
+
+        expect(result).toStrictEqual({ labels: [], values: null });
+      });
+    });
+
+    describe('when there is no line', () => {
+      it('should return null labels and empty array for values', () => {
+        const result = builder.multipleTimeBased('Year', [new Date('1985-10-26')], []);
+
+        expect(result).toStrictEqual({ labels: null, values: null });
+      });
+    });
+
+    describe('when there are no date and lines', () => {
+      it('should return null labels and values', () => {
+        const result = builder.multipleTimeBased('Year', null, null);
+
+        expect(result).toStrictEqual({ labels: null, values: null });
+      });
+    });
   });
 });