From 7623959eb4ec195b744fcc60722a1a50b4d6d29b Mon Sep 17 00:00:00 2001
From: Nils Stolpe <nils.stolpe@nearform.com>
Date: Mon, 28 Oct 2024 17:01:28 -0400
Subject: [PATCH] added logic to handle cases where not all of the data keys
 have been included in categories. added categories demos

---
 demo/ts/components/victory-pie-demo.tsx    | 12 +++++++++++
 packages/victory-pie/src/helper-methods.ts | 25 +++++++++++++---------
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/demo/ts/components/victory-pie-demo.tsx b/demo/ts/components/victory-pie-demo.tsx
index 0a4941fb9..1fad5fdbd 100644
--- a/demo/ts/components/victory-pie-demo.tsx
+++ b/demo/ts/components/victory-pie-demo.tsx
@@ -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 }}
diff --git a/packages/victory-pie/src/helper-methods.ts b/packages/victory-pie/src/helper-methods.ts
index d579d3721..2d8fed81b 100644
--- a/packages/victory-pie/src/helper-methods.ts
+++ b/packages/victory-pie/src/helper-methods.ts
@@ -59,16 +59,21 @@ const getSlices = (props, data) => {
   return layoutFunction(data);
 };
 
-const sortDataByCategories = (props, data) =>
-  Array.isArray(props?.categories?.x)
-    ? props.categories.x.reduce((newData, category) => {
-        const datum = data.find(({ x }) => x === category);
-        if (datum) {
-          newData.push(datum);
-        }
-        return newData;
-      }, [])
-    : data;
+// sorts data by the categories prop. if all of the data keys aren't included in categories,
+// any remaining data will be appended to the data array.
+const sortDataByCategories = (props, data) => {
+  if (Array.isArray(props?.categories?.x)) {
+    const sorted: string[] = [];
+    props.categories.x.forEach((category) => {
+      const idx = data.findIndex(({ x }) => x === category);
+      const datum = data.splice(idx, 1)[0];
+      sorted.push(datum);
+    });
+    return [...sorted, ...data];
+  }
+
+  return data;
+};
 
 const getCalculatedValues = (props) => {
   const { colorScale, theme } = props;