Victory stack issues

src/components/victory-stack/victory-stack.js

@@ -34,6 +34,7 @@ export default class VictoryStack extends React.Component {
         "grayscale", "qualitative", "heatmap", "warm", "cool", "red", "green", "blue"
       ])
     ]),
+    fillInMissingData: PropTypes.bool,
     horizontal: PropTypes.bool,
     labelComponent: PropTypes.element,
     labels: PropTypes.oneOfType([ PropTypes.func, PropTypes.array ]),
@@ -48,7 +49,8 @@ export default class VictoryStack extends React.Component {
     groupComponent: <g/>,
     scale: "linear",
     standalone: true,
-    theme: VictoryTheme. grayscale
+    theme: VictoryTheme. grayscale,
+    fillInMissingData: true
   };
 
   static expectedComponents = [
@@ -88,7 +90,8 @@ export default class VictoryStack extends React.Component {
     const horizontal = props.horizontal || childComponents.every(
       (component) => component.props.horizontal
     );
-    const datasets = Wrapper.getDataFromChildren(props);
+    const dataFromChildren = Wrapper.getDataFromChildren(props);
+    const datasets = Wrapper.fillInMissingData(props, dataFromChildren);
     const domain = {
       x: Wrapper.getStackedDomain(props, "x", datasets),
       y: Wrapper.getStackedDomain(props, "y", datasets)
@@ -115,17 +118,25 @@ export default class VictoryStack extends React.Component {
     return { datasets, categories, range, domain, horizontal, scale, style, colorScale, role };
   }
 
-  addLayoutData(props, calculatedProps, datasets, index) { // eslint-disable-line max-params
+  /* eslint-disable max-params, no-nested-ternary */
+  addLayoutData(props, calculatedProps, datasets, index) {
     const xOffset = props.xOffset || 0;
     return datasets[index].map((datum) => {
       const yOffset = Wrapper.getY0(datum, index, calculatedProps) || 0;
       return assign({}, datum, {
-        _y0: datum._y instanceof Date ? yOffset && new Date(yOffset) || datum._y : yOffset,
-        _y1: datum._y instanceof Date ? new Date(+datum._y + +yOffset) : datum._y + yOffset,
-        _x1: datum._x instanceof Date ? new Date(+datum._x + +xOffset) : datum._x + xOffset
+        _y0: !(datum._y instanceof Date) ? yOffset : (
+          yOffset ? new Date(yOffset) : datum._y
+        ),
+        _y1: datum._y === null ? null : (
+          datum._y instanceof Date ? new Date(+datum._y + +yOffset) : datum._y + yOffset
+        ),
+        _x1: datum._x === null ? null : (
+          datum._x instanceof Date ? new Date(+datum._x + +xOffset) : datum._x + xOffset
+        )
       });
     });
   }
+  /* eslint-enable max-params, no-nested-ternary */
 
   getLabels(props, datasets, index) {
     if (!props.labels) {

src/helpers/wrapper.js

@@ -1,4 +1,5 @@
-import { assign, defaults, flatten, isFunction, partialRight, uniq, some } from "lodash";
+import { assign, defaults, flatten, isFunction, keys, partialRight, uniq,
+  some, sortBy } from "lodash";
 import React from "react";
 import Axis from "./axis";
 import { Style, Transitions, Collection, Data, Domain, Events } from "victory-core";
@@ -208,6 +209,39 @@ export default {
     return dataArr;
   },
 
+  // Assumes data in `datasets` is sorted by `Data.getData`.
+  fillInMissingData(props, datasets) {
+    const { fillInMissingData } = props;
+    const xMap = datasets.reduce((prev, dataset) => {
+      dataset.forEach((datum) => {
+        prev[datum._x instanceof Date ? datum._x.getTime() : datum._x] = true;
+      });
+      return prev;
+    }, {});
+    const xArr = sortBy(keys(xMap));
+
+    return datasets.map((dataset) => {
+      let indexOffset = 0;
+      const filledInData = xArr.map((x, index) => {
+        const datum = dataset[index - indexOffset];
+        const isDate = datum._x instanceof Date;
+        const x1 = isDate ? datum._x.getTime() : datum._x;
+        x = +x;
+
+        if (x1 === x) {
+          return datum;
+        } else {
+          indexOffset++;
+          const y = fillInMissingData ? 0 : null;
+          x = isDate ? new Date(x) : x;
+          return { x, y, _x: x, _y: y };
+        }
+      });
+
+      return filledInData;
+    });
+  },
+
   getStackedDomain(props, axis) {
     const propsDomain = Domain.getDomainFromProps(props, axis);
     if (propsDomain) {
@@ -358,8 +392,8 @@ export default {
     }
     const { datasets } = calculatedProps;
     const y = datum._y;
-    const previousDataSets = datasets.slice(0, index);
-    const previousPoints = previousDataSets.reduce((prev, dataset) => {
+    const previousDatasets = datasets.slice(0, index);
+    const previousPoints = previousDatasets.reduce((prev, dataset) => {
       return prev.concat(dataset
         .filter((previousDatum) => datum._x instanceof Date
           ? previousDatum._x.getTime() === datum._x.getTime()

test/client/spec/helpers/wrapper.spec.js

@@ -105,4 +105,64 @@ describe("helpers/wrapper", () => {
       expect(Wrapper.getStringsFromData([], "x")).to.eql([]);
     });
   });
+
+  describe("fillInMissingData", () => {
+    it("fills in data missing an x value with 0", () => {
+      const props = { fillInMissingData: true };
+      const datasets = [
+        [{ x: 0, _x: 0, y: 1, _y: 1 }, { x: 1, _x: 1, y: 3, _y: 3 }, { x: 2, _x: 2, y: 2, _y: 2 }],
+        [{ x: 1, _x: 1, y: 3, _y: 3 }, { x: 2, _x: 2, y: 2, _y: 2 }]
+      ];
+      const result = Wrapper.fillInMissingData(props, datasets);
+      expect(result).to.deep.eql([
+        [{ x: 0, _x: 0, y: 1, _y: 1 }, { x: 1, _x: 1, y: 3, _y: 3 }, { x: 2, _x: 2, y: 2, _y: 2 }],
+        [{ x: 0, _x: 0, y: 0, _y: 0 }, { x: 1, _x: 1, y: 3, _y: 3 }, { x: 2, _x: 2, y: 2, _y: 2 }]
+      ]);
+    });
+
+    it("fills in data missing an x value with null when fillInMissingData prop is false", () => {
+      const props = { fillInMissingData: false };
+      const datasets = [
+        [{ x: 0, _x: 0, y: 1, _y: 1 }, { x: 1, _x: 1, y: 3, _y: 3 }, { x: 2, _x: 2, y: 2, _y: 2 }],
+        [{ x: 1, _x: 1, y: 3, _y: 3 }, { x: 2, _x: 2, y: 2, _y: 2 }]
+      ];
+      const result = Wrapper.fillInMissingData(props, datasets);
+      expect(result).to.deep.eql([
+        [{ x: 0, _x: 0, y: 1, _y: 1 }, { x: 1, _x: 1, y: 3, _y: 3 }, { x: 2, _x: 2, y: 2, _y: 2 }],
+        [
+          { x: 0, _x: 0, y: null, _y: null },
+          { x: 1, _x: 1, y: 3, _y: 3 },
+          { x: 2, _x: 2, y: 2, _y: 2 }
+        ]
+      ]);
+    });
+
+    it("fills in data missing an x value with 0 when they are dates", () => {
+      const props = { fillInMissingData: true };
+      const datasets = [
+        [
+          { x: new Date(2018, 1, 7), _x: new Date(2018, 1, 7), y: 1, _y: 1 },
+          { x: new Date(2018, 1, 8), _x: new Date(2018, 1, 8), y: 2, _y: 2 },
+          { x: new Date(2018, 1, 9), _x: new Date(2018, 1, 9), y: 3, _y: 3 }
+        ],
+        [
+          { x: new Date(2018, 1, 7), _x: new Date(2018, 1, 7), y: 1, _y: 1 },
+          { x: new Date(2018, 1, 9), _x: new Date(2018, 1, 9), y: 3, _y: 3 }
+        ]
+      ];
+      const result = Wrapper.fillInMissingData(props, datasets);
+      expect(result).to.deep.eql([
+        [
+          { x: new Date(2018, 1, 7), _x: new Date(2018, 1, 7), y: 1, _y: 1 },
+          { x: new Date(2018, 1, 8), _x: new Date(2018, 1, 8), y: 2, _y: 2 },
+          { x: new Date(2018, 1, 9), _x: new Date(2018, 1, 9), y: 3, _y: 3 }
+        ],
+        [
+          { x: new Date(2018, 1, 7), _x: new Date(2018, 1, 7), y: 1, _y: 1 },
+          { x: new Date(2018, 1, 8), _x: new Date(2018, 1, 8), y: 0, _y: 0 },
+          { x: new Date(2018, 1, 9), _x: new Date(2018, 1, 9), y: 3, _y: 3 }
+        ]
+      ]);
+    });
+  });
 });