Fix(2844): Improve null handling in VictoryStack (#2888)

.changeset/popular-planets-share.md

@@ -0,0 +1,5 @@
+---
+"victory-stack": patch
+---
+
+Fix bug when one child of a Stack has a date axis and all null values for the other axis

demo/ts/components/victory-stack-demo.tsx

@@ -4,32 +4,71 @@ import { VictoryArea } from "victory-area";
 
 class App extends React.Component {
   render() {
+    const containerStyle: React.CSSProperties = {
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      alignItems: "center",
+      justifyContent: "center",
+    };
+
+    const chartStyle: { [key: string]: React.CSSProperties } = {
+      parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" },
+    };
+
     return (
-      <div>
+      <div className="demo">
         <h3 style={{ textAlign: "center" }}>Standalone Stack</h3>
-        <VictoryStack aria-label="Victory Stack Demo">
-          <VictoryArea
-            data={[
-              { x: "a", y: 2 },
-              { x: "b", y: 3 },
-              { x: "c", y: 5 },
-            ]}
-          />
-          <VictoryArea
-            data={[
-              { x: "a", y: 1 },
-              { x: "b", y: 4 },
-              { x: "c", y: 5 },
-            ]}
-          />
-          <VictoryArea
-            data={[
-              { x: "a", y: 3 },
-              { x: "b", y: 2 },
-              { x: "c", y: 6 },
-            ]}
-          />
-        </VictoryStack>
+
+        <div style={containerStyle}>
+          <VictoryStack style={chartStyle} aria-label="Victory Stack Demo">
+            <VictoryArea
+              data={[
+                { x: "a", y: 2 },
+                { x: "b", y: 3 },
+                { x: "c", y: 5 },
+              ]}
+            />
+            <VictoryArea
+              data={[
+                { x: "a", y: 1 },
+                { x: "b", y: 4 },
+                { x: "c", y: 5 },
+              ]}
+            />
+            <VictoryArea
+              data={[
+                { x: "a", y: 3 },
+                { x: "b", y: 2 },
+                { x: "c", y: 6 },
+              ]}
+            />
+          </VictoryStack>
+
+          <VictoryStack style={chartStyle} colorScale={"warm"}>
+            <VictoryArea
+              data={[
+                { x: new Date(2006, 1, 1), y: null },
+                { x: new Date(2016, 1, 1), y: null },
+                { x: new Date(2026, 1, 1), y: null },
+              ]}
+            />
+            <VictoryArea
+              data={[
+                { x: new Date(2006, 1, 1), y: null },
+                { x: new Date(2016, 1, 1), y: 1 },
+                { x: new Date(2026, 1, 1), y: 3 },
+              ]}
+            />
+            <VictoryArea
+              data={[
+                { x: new Date(2006, 1, 1), y: 2 },
+                { x: new Date(2016, 1, 1), y: 5 },
+                { x: new Date(2026, 1, 1), y: 1 },
+              ]}
+            />
+          </VictoryStack>
+        </div>
       </div>
     );
   }

packages/victory-stack/package.json

@@ -29,6 +29,7 @@
     "react": ">=16.6.0"
   },
   "devDependencies": {
+    "victory-area": "*",
     "victory-bar": "*",
     "victory-histogram": "*"
   },
@@ -181,6 +182,7 @@
         "types:create",
         "../victory-core:types:create",
         "../victory-shared-events:types:create",
+        "../victory-area:types:create",
         "../victory-bar:types:create",
         "../victory-histogram:types:create",
         "../victory-vendor:types:create",
@@ -250,6 +252,7 @@
       "dependencies": [
         "../victory-core:types:create",
         "../victory-shared-events:types:create",
+        "../victory-area:types:create",
         "../victory-bar:types:create",
         "../victory-histogram:types:create",
         "../victory-vendor:types:create",
@@ -270,6 +273,7 @@
       "dependencies": [
         "../victory-core:types:create",
         "../victory-shared-events:types:create",
+        "../victory-area:types:create",
         "../victory-bar:types:create",
         "../victory-histogram:types:create",
         "../victory-vendor:types:create",
@@ -291,6 +295,7 @@
       "dependencies": [
         "../victory-core:build",
         "../victory-shared-events:build",
+        "../victory-area:build",
         "../victory-bar:build",
         "../victory-histogram:build",
         "../victory-vendor:build",

packages/victory-stack/src/helper-methods.tsx

@@ -110,11 +110,13 @@ function addLayoutData(props, datasets, index) {
 
 function stackData(props, childComponents) {
   const dataFromChildren = Wrapper.getDataFromChildren(props, childComponents);
-  const filterNullChildData = dataFromChildren.map((dataset) =>
+  const filledDatasets = fillData(props, dataFromChildren);
+  const filteredNullChild = filledDatasets.map((dataset) =>
     dataset.filter((datum) => datum._x !== null && datum._y !== null),
   );
-  const datasets = fillData(props, filterNullChildData);
-  return datasets.map((d, i) => addLayoutData(props, datasets, i));
+  return filteredNullChild.map((d, i) =>
+    addLayoutData(props, filledDatasets, i),
+  );
 }
 
 export function getCalculatedProps(initialProps, childComponents) {

packages/victory-stack/src/victory-stack.test.tsx

@@ -5,6 +5,7 @@ import { render } from "@testing-library/react";
 import React from "react";
 import { VictoryBar } from "victory-bar";
 import { VictoryHistogram } from "victory-histogram";
+import { VictoryArea } from "victory-area";
 
 import { VictoryStack } from "./victory-stack";
 
@@ -48,6 +49,21 @@ describe("components/victory-stack", () => {
     });
   });
 
+  describe("children data", () => {
+    it("should be able to handle all null values when using dates", () => {
+      const { container } = render(
+        <VictoryStack data-testid="victory-stack" aria-label="Stack">
+          <VictoryArea data={[{ x: new Date(2006, 1, 1), y: null }]} />
+          <VictoryArea data={[{ x: new Date(2006, 1, 1), y: 2 }]} />
+        </VictoryStack>,
+      );
+
+      const svgNode = container.querySelector("svg")!;
+      expect(svgNode.getAttribute("data-testid")).toEqual("victory-stack");
+      expect(svgNode.getAttribute("aria-label")).toEqual("Stack");
+    });
+  });
+
   describe("warnings", () => {
     beforeEach(() => {
       jest.spyOn(console, "warn").mockImplementation(() => {});