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

@@ -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

@@ -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;