From d18c33c1e9f07510dafb5ba2cb9079951f2a5e25 Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Thu, 15 Aug 2024 14:56:46 +0100 Subject: [PATCH] Fix(2844): Improve null handling in VictoryStack (#2888) --- .changeset/popular-planets-share.md | 5 ++ demo/ts/components/victory-stack-demo.tsx | 87 ++++++++++++++----- packages/victory-stack/package.json | 5 ++ packages/victory-stack/src/helper-methods.tsx | 8 +- .../victory-stack/src/victory-stack.test.tsx | 16 ++++ pnpm-lock.yaml | 2 + 6 files changed, 96 insertions(+), 27 deletions(-) create mode 100644 .changeset/popular-planets-share.md diff --git a/.changeset/popular-planets-share.md b/.changeset/popular-planets-share.md new file mode 100644 index 000000000..a3c3d5021 --- /dev/null +++ b/.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 diff --git a/demo/ts/components/victory-stack-demo.tsx b/demo/ts/components/victory-stack-demo.tsx index ab08b7348..a3751a5b5 100644 --- a/demo/ts/components/victory-stack-demo.tsx +++ b/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 ( -
+

Standalone Stack

- - - - - + +
+ + + + + + + + + + + +
); } diff --git a/packages/victory-stack/package.json b/packages/victory-stack/package.json index da2f377e0..1142b0769 100644 --- a/packages/victory-stack/package.json +++ b/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", diff --git a/packages/victory-stack/src/helper-methods.tsx b/packages/victory-stack/src/helper-methods.tsx index a67cbcc86..bfa3730c3 100644 --- a/packages/victory-stack/src/helper-methods.tsx +++ b/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) { diff --git a/packages/victory-stack/src/victory-stack.test.tsx b/packages/victory-stack/src/victory-stack.test.tsx index 7dbbdf51e..62edf4e7b 100644 --- a/packages/victory-stack/src/victory-stack.test.tsx +++ b/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( + + + + , + ); + + 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(() => {}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2fd0099f2..e82eb1134 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -651,6 +651,7 @@ importers: specifiers: lodash: ^4.17.19 react-fast-compare: ^3.2.0 + victory-area: '*' victory-bar: '*' victory-core: ^37.0.2 victory-histogram: '*' @@ -661,6 +662,7 @@ importers: victory-core: link:../victory-core victory-shared-events: link:../victory-shared-events devDependencies: + victory-area: link:../victory-area victory-bar: link:../victory-bar victory-histogram: link:../victory-histogram