Fix stacked static chart render failure (#26285)

* Fix stacked static chart render failure

This fixes #20752 where static chart will fail to render stacked bar
charts when data contain gaps.

* Make the code easier to read

frontend/src/metabase/static-viz/components/XYChart/utils/series.ts

@@ -50,16 +50,36 @@ export const sortSeries = (series: Series[], type: XAxisType) => {
   });
 };
 
-export const calculateStackedItems = (series: Series[]) => {
+export const calculateStackedItems = (multipleSeries: Series[]) => {
+  const dimensionSeriesIndexMap: Record<
+    string,
+    Record<number, SeriesDatum>
+  > = {};
+
+  multipleSeries.forEach((series, seriesIndex) => {
+    series.data.forEach(datum => {
+      const dimension = getX(datum);
+      if (!dimensionSeriesIndexMap[dimension]) {
+        dimensionSeriesIndexMap[dimension] = {};
+      }
+      dimensionSeriesIndexMap[dimension][seriesIndex] = datum;
+    });
+    return dimensionSeriesIndexMap;
+  });
+
   // Stacked charts work only for a single dataset with one dimension
-  return series.map((s, seriesIndex) => {
-    const stackedData = s.data.map((datum, datumIndex) => {
+  return multipleSeries.map((series, seriesIndex) => {
+    const stackedData = series.data.map(datum => {
       const [x, y] = datum;
 
       let y1 = 0;
 
       for (let i = 0; i < seriesIndex; i++) {
-        const currentY = getY(series[i].data[datumIndex]);
+        const currentDatum = dimensionSeriesIndexMap[x][i];
+        if (!currentDatum) {
+          continue;
+        }
+        const currentY = getY(currentDatum);
 
         const hasSameSign = (y > 0 && currentY > 0) || (y < 0 && currentY < 0);
         if (hasSameSign) {
@@ -72,7 +92,7 @@ export const calculateStackedItems = (series: Series[]) => {
     });
 
     return {
-      ...s,
+      ...series,
       stackedData,
     };
   });

frontend/src/metabase/static-viz/components/XYChart/utils/series.unit.spec.ts

@@ -103,40 +103,39 @@ describe("sortSeries", () => {
 });
 
 describe("calculateStackedItems", () => {
-  const series: Series[] = [
-    {
-      name: "series 1",
-      color: "#509ee3",
-      yAxisPosition: "left",
-      type: "area",
-      data: [
-        ["2020-10-18", 10],
-        ["2020-10-19", -10],
-      ],
-    },
-    {
-      name: "series 2",
-      color: "#a989c5",
-      yAxisPosition: "left",
-      type: "area",
-      data: [
-        ["2020-10-18", 20],
-        ["2020-10-19", -20],
-      ],
-    },
-    {
-      name: "series 3",
-      color: "#ef8c8c",
-      yAxisPosition: "left",
-      type: "area",
-      data: [
-        ["2020-10-18", -30],
-        ["2020-10-19", 30],
-      ],
-    },
-  ];
-
   it("calculates stacked items separating positive and negative values", () => {
+    const series: Series[] = [
+      {
+        name: "series 1",
+        color: "#509ee3",
+        yAxisPosition: "left",
+        type: "area",
+        data: [
+          ["2020-10-18", 10],
+          ["2020-10-19", -10],
+        ],
+      },
+      {
+        name: "series 2",
+        color: "#a989c5",
+        yAxisPosition: "left",
+        type: "area",
+        data: [
+          ["2020-10-18", 20],
+          ["2020-10-19", -20],
+        ],
+      },
+      {
+        name: "series 3",
+        color: "#ef8c8c",
+        yAxisPosition: "left",
+        type: "area",
+        data: [
+          ["2020-10-18", -30],
+          ["2020-10-19", 30],
+        ],
+      },
+    ];
     const stackedSeries = calculateStackedItems(series);
 
     /**
@@ -165,4 +164,66 @@ describe("calculateStackedItems", () => {
       ],
     ]);
   });
+
+  it("calculates stacked items separating positive and negative values even when data has gaps #20752", () => {
+    const stackedSeriesWithGaps: Series[] = [
+      {
+        name: "series 1",
+        color: "#509ee3",
+        yAxisPosition: "left",
+        type: "area",
+        data: [
+          ["2020-10-18", 10],
+          ["2020-10-19", -10],
+        ],
+      },
+      {
+        name: "series 2",
+        color: "#a989c5",
+        yAxisPosition: "left",
+        type: "area",
+        data: [
+          ["2020-10-19", -20],
+          ["2020-10-20", 20],
+        ],
+      },
+      {
+        name: "series 3",
+        color: "#ef8c8c",
+        yAxisPosition: "left",
+        type: "area",
+        data: [
+          ["2020-10-18", -30],
+          ["2020-10-19", 30],
+        ],
+      },
+    ];
+    const stackedSeries = calculateStackedItems(stackedSeriesWithGaps);
+
+    /**
+     *
+     *  30|  -   3   -
+     *  20|  -   3   2
+     *  10|  1   3   2
+     *     ---------
+     * -10|  3   1   -
+     * -20|  3   2   -
+     * -30|  3   2   -
+     *
+     */
+    expect(stackedSeries.map(s => s.stackedData)).toStrictEqual([
+      [
+        ["2020-10-18", 10, 0],
+        ["2020-10-19", -10, 0],
+      ],
+      [
+        ["2020-10-19", -30, -10],
+        ["2020-10-20", 20, 0],
+      ],
+      [
+        ["2020-10-18", -30, 0],
+        ["2020-10-19", 30, 0],
+      ],
+    ]);
+  });
 });