fix: stacked percentage with zero values (#622)

This commit review the work done in #618 to fix the following case: if we are stacking areas in percentage mode and the values for all series are 0 we shall use 0% as value for each point in that bucket. In the aforementioned PR we were handling that case as null, completely disconnecting the previous data points from the following ones on the chart.

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

@@ -1114,10 +1114,10 @@ describe('Rendering points - areas', () => {
       {
         datum: [1546300800000, 0],
         initialY0: null,
-        initialY1: null,
+        initialY1: 0,
         x: 1546300800000,
         y0: null,
-        y1: null,
+        y1: 0,
       },
       {
         datum: [1546387200000, 5],

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

@@ -449,17 +449,17 @@ describe('Stacked Series Utils', () => {
     const stackedValues: Map<any, StackedValues> = new Map();
     stackedValues.set(1, {
       values: [0, 0, 0],
-      percent: [null, null, null],
+      percent: [0, 0, 0],
       total: 0,
     });
     const formattedDatum = getStackedFormattedSeriesDatum({ x: 1, y1: 0 }, stackedValues, 0, false, true);
     expect(formattedDatum).toEqual({
       datum: undefined,
       initialY0: null,
-      initialY1: null,
+      initialY1: 0,
       x: 1,
       y0: null,
-      y1: null,
+      y1: 0,
     });
   });
 });

src/chart_types/xy_chart/utils/stacked_series_utils.ts

@@ -22,7 +22,7 @@ import { ScaleType } from '../../../scales';
 /** @internal */
 export interface StackedValues {
   values: number[];
-  percent: Array<number | null>;
+  percent: Array<number>;
   total: number;
 }
 
@@ -105,7 +105,7 @@ export function computeYStackedMapValues(
     );
     const percent = stackArray.values.map((value) => {
       if (stackArray.total === 0) {
-        return null;
+        return 0;
       }
       return value / stackArray.total;
     });
@@ -192,11 +192,11 @@ export function getStackedFormattedSeriesDatum(
   let y1: number | null = null;
   let y0: number | null | undefined = null;
   if (isPercentageMode) {
-    if (data.y1 != null && stack.total !== 0) {
-      y1 = data.y1 / stack.total;
+    if (data.y1 != null) {
+      y1 = stack.total !== 0 ? data.y1 / stack.total : 0;
     }
-    if (data.y0 != null && stack.total !== 0) {
-      y0 = data.y0 / stack.total;
+    if (data.y0 != null) {
+      y0 = stack.total !== 0 ? data.y0 / stack.total : 0;
     }
   } else {
     y1 = data.y1;

stories/area/8_stacked_percentage_zeros.tsx

@@ -117,7 +117,7 @@ const DATA = [
       [1585735200000, 83],
       [1585749600000, 46],
       [1585764000000, 7],
-      [1585778400000, 2],
+      [1585778400000, null],
       [1585792800000, 12],
       [1585807200000, 44],
       [1585821600000, 84],
@@ -172,7 +172,7 @@ const DATA = [
       [1585735200000, 8],
       [1585749600000, 2],
       [1585764000000, 0],
-      [1585778400000, 0],
+      [1585778400000, null],
       [1585792800000, 0],
       [1585807200000, 1],
       [1585821600000, 6],
@@ -227,7 +227,7 @@ const DATA = [
       [1585735200000, 3],
       [1585749600000, 1],
       [1585764000000, 1],
-      [1585778400000, 0],
+      [1585778400000, null],
       [1585792800000, 0],
       [1585807200000, 2],
       [1585821600000, 1],