fix 'Pie Chart ignores categories prop' (#2934)

.changeset/proud-bugs-brush.md

@@ -0,0 +1,5 @@
+---
+"victory-pie": patch
+---
+
+Added logic to sort pie chart slices by categories prop

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

@@ -2,7 +2,7 @@ import React from "react";
 import { random, range } from "lodash";
 import { VictoryPie } from "victory-pie";
 import { VictoryTooltip } from "victory-tooltip";
-import { VictoryTheme, LineSegment, Helpers } from "victory-core";
+import { VictoryTheme, Helpers } from "victory-core";
 
 interface VictoryPieDemoState {
   data: {
@@ -153,6 +153,18 @@ export default class VictoryPieDemo extends React.Component<
             style={{ parent: parentStyle }}
             labelPosition="startAngle"
           />
+          <VictoryPie
+            theme={VictoryTheme.clean}
+            style={{ parent: parentStyle }}
+            categories={{ x: ["E", "A", "D", "C", "B"] }}
+          />
+
+          <VictoryPie
+            theme={VictoryTheme.clean}
+            style={{ parent: parentStyle }}
+            categories={{ x: ["E", "A", "C"] }}
+          />
+
           <VictoryPie
             theme={VictoryTheme.clean}
             style={{ parent: parentStyle }}

packages/victory-pie/src/helper-methods.ts

@@ -3,6 +3,8 @@ import { defaults, isPlainObject } from "lodash";
 import * as d3Shape from "victory-vendor/d3-shape";
 
 import { Helpers, Data, Style } from "victory-core";
+import { VictoryPieProps } from "./victory-pie";
+import { getCategories } from "victory-core/lib/victory-util/data";
 
 const checkForValidText = (text) => {
   if (text === undefined || text === null || Helpers.isFunction(text)) {
@@ -59,6 +61,29 @@ const getSlices = (props, data) => {
   return layoutFunction(data);
 };
 
+const getCategoriesFromProps = (props: VictoryPieProps) =>
+  Array.isArray(props.categories)
+    ? props.categories
+    : (props?.categories as { x: string[] })?.x ?? [];
+
+/**
+ * Sorts data by props.categories or props.categories.x. If all of the data keys aren't
+ * included in categories, any remaining data will be appended to the data array.
+ * If extraneous categories are included in the categories prop, the will be ignored and
+ * have no effect on the rendered component.
+ */
+const getDataSortedByCategories = (props: VictoryPieProps, data) => {
+  const sorted: string[] = [];
+  getCategoriesFromProps(props).forEach((category) => {
+    const idx = data.findIndex(({ x }) => x === category);
+    if (idx >= 0) {
+      const datum = data.splice(idx, 1)[0];
+      sorted.push(datum);
+    }
+  });
+  return [...sorted, ...data];
+};
+
 const getCalculatedValues = (props) => {
   const { colorScale, theme } = props;
   const styleObject = Helpers.getDefaultStyles(props, "pie");
@@ -69,7 +94,7 @@ const getCalculatedValues = (props) => {
   const padding = Helpers.getPadding(props);
   const defaultRadius = getRadius(props, padding);
   const origin = getOrigin(props, padding);
-  const data = Data.getData(props);
+  const data = getDataSortedByCategories(props, Data.getData(props));
   const slices = getSlices(props, data);
   return Object.assign({}, props, {
     style,

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

@@ -151,6 +151,30 @@ describe("components/victory-pie", () => {
       expect(xValues).toEqual(xValuesFromGivenData);
     });
 
+    it("renders data values sorted by categories prop", () => {
+      const { container } = render(
+        <VictoryPie categories={{ x: ["E", "A", "D", "C", "B"] }} />,
+      );
+
+      const xValues = Array.from(
+        container.querySelectorAll("text[id^=pie-labels] > tspan"),
+      ).map((slice) => slice.textContent);
+
+      expect(xValues).toEqual(["E", "A", "D", "C", "B"]);
+    });
+
+    it("renders data values sorted by categories prop, appending any data keys missing from categories and ignoring any categories values that are not valid data keys", () => {
+      const { container } = render(
+        <VictoryPie categories={{ x: ["E", "C", "B", "Z"] }} />,
+      );
+
+      const xValues = Array.from(
+        container.querySelectorAll("text[id^=pie-labels] > tspan"),
+      ).map((slice) => slice.textContent);
+
+      expect(xValues).toEqual(["E", "C", "B", "A", "D"]);
+    });
+
     it("renders data values sorted by sortKey prop", () => {
       const data = Helpers.range(9)
         .map((i) => ({ x: i, y: i }))

stories/victory-pie.stories.tsx

@@ -29,6 +29,21 @@ export const DefaultRendering = () => {
   );
 };
 
+export const Categories = () => {
+  return (
+    <>
+      <VictoryPie
+        style={parentStyle}
+        categories={{ x: ["B", "A", "E", "C", "D"] }}
+      />
+      <VictoryPie
+        style={parentStyle}
+        categories={{ x: ["E", "C", "A", "D", "B"] }}
+      />
+    </>
+  );
+};
+
 export const Data = () => {
   return (
     <>