fix: data normalization with alignment (#1365)

fixes multi series charts rendering

fixes #1235

Author: dangreen

src/axes/FixedScaleAxis.ts

@@ -24,9 +24,9 @@ export class FixedScaleAxis extends Axis {
     const divisor = options.divisor || 1;
     const ticks = (
       options.ticks ||
-      times(divisor).map(
-        (_value, index) =>
-          highLow.low + ((highLow.high - highLow.low) / divisor) * index
+      times(
+        divisor,
+        index => highLow.low + ((highLow.high - highLow.low) / divisor) * index
       )
     ).sort((a, b) => Number(a) - Number(b));
     const range = {

src/core/data/normalize.spec.ts

@@ -14,9 +14,20 @@ describe('Core', () => {
         };
 
         expect(normalizeData(data).series).toEqual([
-          [1, 0, 3, 4, 5, 6],
-          [1, 0, 3, 4, 5, 6, 7, 8],
-          [1, 0, 3]
+          [1, 0, 3, 4, 5, 6, undefined, undefined, undefined, undefined],
+          [1, 0, 3, 4, 5, 6, 7, 8, undefined, undefined],
+          [
+            1,
+            0,
+            3,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined
+          ]
         ]);
       });
 
@@ -47,9 +58,20 @@ describe('Core', () => {
         };
 
         expect(normalizeData(data).series).toEqual([
-          [1, 0, 3, 4, 5, 6],
-          [1, 0, 3, 4, 5, 6, 7, 8],
-          [1, 0, 3]
+          [1, 0, 3, 4, 5, 6, undefined, undefined, undefined, undefined],
+          [1, 0, 3, 4, 5, 6, 7, 8, undefined, undefined],
+          [
+            1,
+            0,
+            3,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined
+          ]
         ]);
       });
 
@@ -64,9 +86,31 @@ describe('Core', () => {
         };
 
         expect(normalizeData(data).series).toEqual([
-          [undefined, undefined, undefined, 4, 5, 6],
-          [1, undefined, 3, undefined, 5, 6, 7, 8],
-          [1, 0, undefined]
+          [
+            undefined,
+            undefined,
+            undefined,
+            4,
+            5,
+            6,
+            undefined,
+            undefined,
+            undefined,
+            undefined
+          ],
+          [1, undefined, 3, undefined, 5, 6, 7, 8, undefined, undefined],
+          [
+            1,
+            0,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined
+          ]
         ]);
       });
 
@@ -140,6 +184,39 @@ describe('Core', () => {
 
         expect(normalizeData(data).series).toEqual([[0, 1, 2, 3]]);
       });
+
+      it('should align series data by holes', () => {
+        const data = {
+          series: [
+            [1, 2, 3, 4],
+            [1, 2, 3],
+            [1, 2]
+          ]
+        };
+
+        expect(normalizeData(data).series).toEqual([
+          [1, 2, 3, 4],
+          [1, 2, 3, undefined],
+          [1, 2, undefined, undefined]
+        ]);
+      });
+
+      it('should align series data with lables by holes', () => {
+        const data = {
+          labels: ['a', 'b', 'c', 'd', 'e', 'f'],
+          series: [
+            [1, 2, 3, 4],
+            [1, 2, 3],
+            [1, 2]
+          ]
+        };
+
+        expect(normalizeData(data).series).toEqual([
+          [1, 2, 3, 4, undefined, undefined],
+          [1, 2, 3, undefined, undefined, undefined],
+          [1, 2, undefined, undefined, undefined, undefined]
+        ]);
+      });
     });
   });
 });

src/core/data/normalize.ts

@@ -53,24 +53,31 @@ export function normalizeData(
 ) {
   let labelCount: number;
   const normalized: NormalizedData = {
-    labels: [],
+    labels: (data.labels || []).slice(),
     series: normalizeSeries(data.series, multi, distributed)
   };
+  const inputLabelCount = normalized.labels.length;
 
   // If all elements of the normalized data array are arrays we're dealing with
   // multi series data and we need to find the largest series if they are un-even
   if (isArrayOfArrays(normalized.series)) {
     // Getting the series with the the most elements
-    labelCount = Math.max(...normalized.series.map(series => series.length));
+    labelCount = Math.max(
+      inputLabelCount,
+      ...normalized.series.map(series => series.length)
+    );
+
+    normalized.series.forEach(series => {
+      series.push(...times(Math.max(0, labelCount - series.length)));
+    });
   } else {
     // We're dealing with Pie data so we just take the normalized array length
     labelCount = normalized.series.length;
   }
 
-  normalized.labels = (data.labels || []).slice();
   // Padding the labels to labelCount with empty strings
   normalized.labels.push(
-    ...times(Math.max(0, labelCount - normalized.labels.length)).map(() => '')
+    ...times(Math.max(0, labelCount - inputLabelCount), () => '')
   );
 
   if (reverse) {

src/utils/functional.ts

@@ -8,8 +8,17 @@ export const noop = <T>(n: T) => n;
 /**
  * Functional style helper to produce array with given length initialized with undefined values
  */
-export const times = <T = unknown>(length: number): T[] =>
-  Array.from({ length });
+export function times(length: number): undefined[];
+export function times<T = unknown>(
+  length: number,
+  filler: (index: number) => T
+): T[];
+export function times<T = unknown>(
+  length: number,
+  filler?: (index: number) => T
+) {
+  return Array.from({ length }, filler ? (_, i) => filler(i) : () => void 0);
+}
 
 /**
  * Sum helper to be used in reduce functions
@@ -32,6 +41,6 @@ export const sum = (previous: number, current: number) =>
  * ```
  */
 export const serialMap = <T, K>(array: T[][], callback: (...args: T[]) => K) =>
-  times(Math.max(...array.map(element => element.length))).map(
-    (_inner, index) => callback(...array.map(element => element[index]))
+  times(Math.max(...array.map(element => element.length)), index =>
+    callback(...array.map(element => element[index]))
   );