feat(data): fill datasets with zeros with missing points when stacked (#409)

When displaying a stacked area/line chart with multiple data sets we need to fill the dataset with zeros on missing data points. The rendering is affected also: it will hide the filled missing point but will continue to show the area beneath it.

fix #388

Author: markov00

.playground/index.html

@@ -25,7 +25,7 @@
         background: white;
         position: relative;
         width: 800px;
-        height: 150px;
+        height: 450px;
         margin: 10px;
       }
     </style>

.playground/playgroud.tsx

@@ -1,75 +1,69 @@
 import React, { Fragment } from 'react';
-import {
-  Axis,
-  Chart,
-  getAxisId,
-  getSpecId,
-  Position,
-  ScaleType,
-  Settings,
-  BarSeries,
-  LineSeries,
-  AreaSeries,
-} from '../src';
+import { Axis, Chart, getAxisId, getSpecId, Position, ScaleType, Settings, AreaSeries } from '../src';
 
 export class Playground extends React.Component {
   render() {
     return (
       <Fragment>
         <div className="chart">
-          <Chart className="story-chart">
-            <Settings
-              theme={{
-                areaSeriesStyle: {
-                  point: {
-                    visible: true,
-                  },
-                },
-              }}
-              xDomain={{
-                max: 3.8,
-              }}
-            />
+          <Chart>
+            <Settings showLegend theme={{ areaSeriesStyle: { point: { visible: true } } }} />
             <Axis
               id={getAxisId('bottom')}
               position={Position.Bottom}
               title={'Bottom axis'}
               showOverlappingTicks={true}
             />
             <Axis
-              id={getAxisId('left')}
+              id={getAxisId('left2')}
               title={'Left axis'}
               position={Position.Left}
-              domain={{
-                max: 5,
-              }}
-            />
-
-            <BarSeries
-              id={getSpecId('bar')}
-              xScaleType={ScaleType.Linear}
-              yScaleType={ScaleType.Linear}
-              xAccessor={0}
-              yAccessors={[1]}
-              data={[[0, 1], [1, 2], [2, 10], [3, 4], [4, 5]]}
+              tickFormat={(d: any) => Number(d).toFixed(2)}
             />
-
-            <LineSeries
-              id={getSpecId('line')}
+            <AreaSeries
+              id={getSpecId('bars1')}
               xScaleType={ScaleType.Linear}
               yScaleType={ScaleType.Linear}
-              xAccessor={0}
-              yAccessors={[1]}
-              data={[[0, 1], [1, 2], [2, 10], [3, 4], [4, 5]]}
+              xAccessor="x"
+              yAccessors={['y']}
+              stackAccessors={['x']}
+              splitSeriesAccessors={['g']}
+              // curve={CurveType.CURVE_MONOTONE_X}
+              data={[
+                { x: 0, y: 2, g: 'a' },
+                { x: 1, y: 7, g: 'a' },
+                { x: 2, y: 3, g: 'a' },
+                { x: 3, y: 6, g: 'a' },
+                { x: 0, y: 4, g: 'b' },
+                { x: 1, y: 5, g: 'b' },
+                { x: 2, y: 8, g: 'b' },
+                { x: 3, y: 2, g: 'b' },
+                { x: 4, y: 6, g: 'b' },
+                { x: 5, y: 7, g: 'a' },
+                { x: 5, y: 7, g: 'b' },
+                { x: 6, y: 7, g: 'a' },
+                { x: 6, y: 7, g: 'b' },
+              ]}
             />
-
             <AreaSeries
-              id={getSpecId('area')}
+              id={getSpecId('area2')}
               xScaleType={ScaleType.Linear}
               yScaleType={ScaleType.Linear}
-              xAccessor={0}
-              yAccessors={[1]}
-              data={[[0, 1], [1, 2], [2, 10], [3, 4], [4, 5]]}
+              xAccessor="x"
+              yAccessors={['y']}
+              stackAccessors={['x']}
+              splitSeriesAccessors={['g']}
+              // curve={CurveType.CURVE_MONOTONE_X}
+              data={[
+                { x: 1, y: 7, g: 'a' },
+                { x: 2, y: 3, g: 'a' },
+                { x: 3, y: 6, g: 'a' },
+                { x: 0, y: 4, g: 'b' },
+                { x: 1, y: 5, g: 'b' },
+                { x: 2, y: 8, g: 'b' },
+                { x: 3, y: 2, g: 'b' },
+                { x: 4, y: 6, g: 'b' },
+              ]}
             />
           </Chart>
         </div>

src/chart_types/xy_chart/domains/x_domain.ts

@@ -1,5 +1,5 @@
 import { isCompleteBound, isLowerBound, isUpperBound } from '../utils/axis_utils';
-import { compareByValueAsc, identity } from '../../../utils/commons';
+import { compareByValueAsc, identity, isNumberArray } from '../../../utils/commons';
 import { computeContinuousDataDomain, computeOrdinalDataDomain, Domain } from '../../../utils/domain';
 import { ScaleType } from '../../../utils/scales/scales';
 import { BasicSeriesSpec, DomainRange } from '../utils/specs';
@@ -22,7 +22,7 @@ export type XDomain = BaseDomain & {
  */
 export function mergeXDomain(
   specs: Pick<BasicSeriesSpec, 'seriesType' | 'xScaleType'>[],
-  xValues: Set<any>,
+  xValues: Set<string | number>,
   customXDomain?: DomainRange | Domain,
 ): XDomain {
   const mainXScaleType = convertXScaleTypes(specs);
@@ -46,7 +46,11 @@ export function mergeXDomain(
   } else {
     seriesXComputedDomains = computeContinuousDataDomain(values, identity, true);
     let customMinInterval: undefined | number;
-
+    if (!isNumberArray(values)) {
+      throw new Error(
+        `Each X value in a ${mainXScaleType.scaleType} x scale needs be be a number. String or objects are not allowed`,
+      );
+    }
     if (customXDomain) {
       if (Array.isArray(customXDomain)) {
         throw new Error('xDomain for continuous scale should be a DomainRange object, not an array');
@@ -78,7 +82,6 @@ export function mergeXDomain(
         }
       }
     }
-
     const computedMinInterval = findMinInterval(values);
     if (customMinInterval != null) {
       // Allow greater custom min iff xValues has 1 member.

src/chart_types/xy_chart/rendering/rendering.ts

@@ -197,9 +197,9 @@ export function renderPoints(
   const isLogScale = isLogarithmicScale(yScale);
   const pointGeometries = dataset.reduce(
     (acc, datum) => {
-      const { x: xValue, y0, y1, initialY0, initialY1 } = datum;
-      // don't create the point if not within the xScale domain
-      if (!xScale.isValueInDomain(xValue)) {
+      const { x: xValue, y0, y1, initialY0, initialY1, filled } = datum;
+      // don't create the point if not within the xScale domain or it that point was filled
+      if (!xScale.isValueInDomain(xValue) || (filled && filled.y1 !== undefined)) {
         return acc;
       }
       const x = xScale.scale(xValue);
@@ -286,9 +286,9 @@ export function renderBars(
   const fontFamily = sharedSeriesStyle.displayValue.fontFamily;
 
   dataset.forEach((datum) => {
-    const { y0, y1, initialY1 } = datum;
+    const { y0, y1, initialY1, filled } = datum;
     // don't create a bar if the initialY1 value is null.
-    if (initialY1 === null) {
+    if (initialY1 === null || (filled && filled.y1 !== undefined)) {
       return;
     }
     // don't create a bar if not within the xScale domain

src/chart_types/xy_chart/store/utils.ts

@@ -118,7 +118,7 @@ export function getLastValues(formattedDataSeries: {
         if (last !== null) {
           const { initialY1: y1, initialY0: y0 } = last;
 
-          if (y1 !== null || y0 !== null) {
+          if (!last.filled && (y1 !== null || y0 !== null)) {
             lastValues.set(series.seriesColorKey, { y0, y1 });
           }
         }
@@ -165,7 +165,7 @@ export function computeSeriesDomains(
   const xDomain = mergeXDomain(specsArray, xValues, customXDomain);
   const yDomain = mergeYDomain(splittedSeries, specsArray, customYDomainsByGroupId);
 
-  const formattedDataSeries = getFormattedDataseries(specsArray, splittedSeries);
+  const formattedDataSeries = getFormattedDataseries(specsArray, splittedSeries, xValues, xDomain.scaleType);
 
   // we need to get the last values from the formatted dataseries
   // because we change the format if we are on percentage mode