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(() => {});