fix: stack as percentage with 0 or null values (#618)

This commit fix a regression related to the rendering of stacked area/bar charts where Y values are 0 or null and the stack is configured as percentage

fix #617

Author: markov00

integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-area-chart-stacked-percentage-with-zeros-visually-looks-correct-1-snap.png

@@ -26,6 +26,7 @@ import { computeSeriesDomains } from '../state/utils';
 import { renderArea } from './rendering';
 import { ChartTypes } from '../..';
 import { SpecTypes } from '../../../specs/settings';
+import { MockSeriesSpec } from '../../../mocks/specs';
 
 const SPEC_ID = 'spec_1';
 const GROUP_ID = 'group_1';
@@ -1081,4 +1082,115 @@ describe('Rendering points - areas', () => {
       expect((zeroValueIndexdGeometry[0] as PointGeometry).radius).toBe(0);
     });
   });
+  it('Stacked areas with 0 values', () => {
+    const pointSeriesSpec1: AreaSeriesSpec = MockSeriesSpec.area({
+      id: 'spec_1',
+      data: [
+        [1546300800000, 0],
+        [1546387200000, 5],
+      ],
+      xAccessor: 0,
+      yAccessors: [1],
+      xScaleType: ScaleType.Time,
+      yScaleType: ScaleType.Linear,
+      stackAccessors: [0],
+      stackAsPercentage: true,
+    });
+    const pointSeriesSpec2: AreaSeriesSpec = MockSeriesSpec.area({
+      id: 'spec_2',
+      data: [
+        [1546300800000, 0],
+        [1546387200000, 2],
+      ],
+      xAccessor: 0,
+      yAccessors: [1],
+      xScaleType: ScaleType.Time,
+      yScaleType: ScaleType.Linear,
+      stackAccessors: [0],
+      stackAsPercentage: true,
+    });
+    const pointSeriesDomains = computeSeriesDomains([pointSeriesSpec1, pointSeriesSpec2]);
+    expect(pointSeriesDomains.formattedDataSeries.stacked[0].dataSeries[0].data).toEqual([
+      {
+        datum: [1546300800000, 0],
+        initialY0: null,
+        initialY1: null,
+        x: 1546300800000,
+        y0: null,
+        y1: null,
+      },
+      {
+        datum: [1546387200000, 5],
+        initialY0: null,
+        initialY1: 0.7142857142857143,
+        x: 1546387200000,
+        y0: null,
+        y1: 0.7142857142857143,
+      },
+    ]);
+  });
+  it('Stacked areas with null values', () => {
+    const pointSeriesSpec1: AreaSeriesSpec = MockSeriesSpec.area({
+      id: 'spec_1',
+      data: [
+        [1546300800000, null],
+        [1546387200000, 5],
+      ],
+      xAccessor: 0,
+      yAccessors: [1],
+      xScaleType: ScaleType.Time,
+      yScaleType: ScaleType.Linear,
+      stackAccessors: [0],
+    });
+    const pointSeriesSpec2: AreaSeriesSpec = MockSeriesSpec.area({
+      id: 'spec_2',
+      data: [
+        [1546300800000, 3],
+        [1546387200000, null],
+      ],
+      xAccessor: 0,
+      yAccessors: [1],
+      xScaleType: ScaleType.Time,
+      yScaleType: ScaleType.Linear,
+      stackAccessors: [0],
+    });
+    const pointSeriesDomains = computeSeriesDomains([pointSeriesSpec1, pointSeriesSpec2]);
+    expect(pointSeriesDomains.formattedDataSeries.stacked[0].dataSeries[0].data).toEqual([
+      {
+        datum: [1546300800000, null],
+        initialY0: null,
+        initialY1: null,
+        x: 1546300800000,
+        y0: null,
+        y1: null,
+      },
+      {
+        datum: [1546387200000, 5],
+        initialY0: null,
+        initialY1: 5,
+        x: 1546387200000,
+        y0: null,
+        y1: 5,
+      },
+    ]);
+
+    expect(pointSeriesDomains.formattedDataSeries.stacked[0].dataSeries[1].data).toEqual([
+      {
+        datum: [1546300800000, 3],
+        initialY0: null,
+        initialY1: 3,
+        x: 1546300800000,
+        y0: null,
+        y1: 3,
+      },
+      {
+        datum: [1546387200000, null],
+        initialY0: null,
+        initialY1: null,
+        x: 1546387200000,
+        y0: null,
+        y1: null,
+      },
+    ]);
+  });
 });

src/chart_types/xy_chart/rendering/rendering.areas.test.ts

@@ -17,7 +17,13 @@
  * under the License. */
 
 import { RawDataSeries } from './series';
-import { computeYStackedMapValues, formatStackedDataSeriesValues, getYValueStackMap } from './stacked_series_utils';
+import {
+  computeYStackedMapValues,
+  formatStackedDataSeriesValues,
+  getYValueStackMap,
+  getStackedFormattedSeriesDatum,
+  StackedValues,
+} from './stacked_series_utils';
 import { ScaleType } from '../../../scales';
 
 describe('Stacked Series Utils', () => {
@@ -439,4 +445,21 @@ describe('Stacked Series Utils', () => {
       });
     });
   });
+  test('Correctly handle 0 values on percentage stack', () => {
+    const stackedValues: Map<any, StackedValues> = new Map();
+    stackedValues.set(1, {
+      values: [0, 0, 0],
+      percent: [null, null, null],
+      total: 0,
+    });
+    const formattedDatum = getStackedFormattedSeriesDatum({ x: 1, y1: 0 }, stackedValues, 0, false, true);
+    expect(formattedDatum).toEqual({
+      datum: undefined,
+      initialY0: null,
+      initialY1: null,
+      x: 1,
+      y0: null,
+      y1: null,
+    });
+  });
 });

src/chart_types/xy_chart/utils/stacked_series_utils.test.ts

@@ -19,9 +19,10 @@
 import { DataSeries, DataSeriesDatum, RawDataSeries, RawDataSeriesDatum, FilledValues } from './series';
 import { ScaleType } from '../../../scales';
 
-interface StackedValues {
+/** @internal */
+export interface StackedValues {
   values: number[];
-  percent: number[];
+  percent: Array<number | null>;
   total: number;
 }
 
@@ -103,6 +104,9 @@ export function computeYStackedMapValues(
       },
     );
     const percent = stackArray.values.map((value) => {
+      if (stackArray.total === 0) {
+        return null;
+      }
       return value / stackArray.total;
     });
     stackedValues.set(xValue, {
@@ -124,7 +128,6 @@ export function formatStackedDataSeriesValues(
 ): DataSeries[] {
   const yValueStackMap = getYValueStackMap(dataseries, xValues);
   const stackedValues = computeYStackedMapValues(yValueStackMap, scaleToExtent);
-
   const stackedDataSeries: DataSeries[] = dataseries.map((ds, seriesIndex) => {
     const newData: DataSeriesDatum[] = [];
     const missingXValues = new Set([...xValues]);
@@ -169,11 +172,11 @@ export function formatStackedDataSeriesValues(
       data: newData,
     };
   });
-
   return stackedDataSeries;
 }
 
-function getStackedFormattedSeriesDatum(
+/** @internal */
+export function getStackedFormattedSeriesDatum(
   data: RawDataSeriesDatum,
   stackedValues: Map<any, StackedValues>,
   seriesIndex: number,
@@ -187,12 +190,19 @@ function getStackedFormattedSeriesDatum(
     return;
   }
   let y1: number | null = null;
+  let y0: number | null | undefined = null;
   if (isPercentageMode) {
-    y1 = data.y1 != null ? data.y1 / stack.total : null;
+    if (data.y1 != null && stack.total !== 0) {
+      y1 = data.y1 / stack.total;
+    }
+    if (data.y0 != null && stack.total !== 0) {
+      y0 = data.y0 / stack.total;
+    }
   } else {
     y1 = data.y1;
+    y0 = data.y0;
   }
-  const y0 = isPercentageMode && data.y0 != null ? data.y0 / stack.total : data.y0;
+
   let computedY0: number | null;
   if (scaleToExtent) {
     computedY0 = y0 ? y0 : y1;
@@ -216,11 +226,16 @@ function getStackedFormattedSeriesDatum(
     let stackedY1: number | null = null;
     let stackedY0: number | null = null;
     if (isPercentageMode) {
-      stackedY1 = y1 !== null ? stackY + y1 : null;
-      stackedY0 = y0 != null ? stackY + y0 : stackY;
+      stackedY1 = y1 !== null && stackY != null ? stackY + y1 : null;
+      stackedY0 = y0 != null && stackY != null ? stackY + y0 : stackY;
     } else {
-      stackedY1 = y1 !== null ? stackY + y1 : null;
-      stackedY0 = y0 != null ? stackY + y0 : stackY;
+      if (stackY == null) {
+        stackedY1 = y1 !== null ? y1 : null;
+        stackedY0 = y0 != null ? y0 : stackY;
+      } else {
+        stackedY1 = y1 !== null ? stackY + y1 : null;
+        stackedY0 = y0 != null ? stackY + y0 : stackY;
+      }
       // configure null y0 if y1 is null
       // it's semantically correct to say y0 is null if y1 is null
       if (stackedY1 === null) {