victory-pie 37.2.0 → 37.3.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # victory-pie
 
+## 37.3.1
+
+### Patch Changes
+
+- Added logic to sort pie chart slices by categories prop ([#2934](https://github.com/FormidableLabs/victory/pull/2934))
+
+* Remove duplicate types from interfaces ([#2940](https://github.com/FormidableLabs/victory/pull/2940))
+
+## 37.3.0
+
 ## 37.2.0
 
 ### Minor Changes

package/dist/victory-pie.js

@@ -77,6 +77,30 @@ const getSlices = (props, data) => {
   });
   return layoutFunction(data);
 };
+const getCategoriesFromProps = props => Array.isArray(props.categories) ? props.categories : props?.categories?.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, data) => {
+  const sorted = [];
+  getCategoriesFromProps(props).forEach(category => {
+    const idx = data.findIndex(_ref => {
+      let {
+        x
+      } = _ref;
+      return x === category;
+    });
+    if (idx >= 0) {
+      const datum = data.splice(idx, 1)[0];
+      sorted.push(datum);
+    }
+  });
+  return [...sorted, ...data];
+};
 const getCalculatedValues = props => {
   const {
     colorScale,
@@ -88,7 +112,7 @@ const getCalculatedValues = props => {
   const padding = victory_core__WEBPACK_IMPORTED_MODULE_3__.getPadding(props);
   const defaultRadius = getRadius(props, padding);
   const origin = getOrigin(props, padding);
-  const data = victory_core__WEBPACK_IMPORTED_MODULE_5__.getData(props);
+  const data = getDataSortedByCategories(props, victory_core__WEBPACK_IMPORTED_MODULE_5__.getData(props));
   const slices = getSlices(props, data);
   return Object.assign({}, props, {
     style,
@@ -6106,7 +6130,7 @@ const VictoryPortal = initialProps => {
     ...defaultProps,
     ...initialProps
   };
-  const id = lodash_uniqueId__WEBPACK_IMPORTED_MODULE_0___default()();
+  const [id] = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)(lodash_uniqueId__WEBPACK_IMPORTED_MODULE_0___default()());
   const portalContext = (0,_portal_context__WEBPACK_IMPORTED_MODULE_3__.usePortalContext)();
   if (!portalContext) {
     const msg = "`renderInPortal` is not supported outside of `VictoryContainer`. " + "Component will be rendered in place";
@@ -6454,20 +6478,16 @@ const orange = {
   "100": "#FEE2D5",
   "300": "#FFA981",
   "500": "#FF6F2C",
+  "700": "#FF4E1B",
   "900": "#D74D26"
 };
 const red = {
   "100": "#FFDCE5",
   "300": "#FF9EB7",
   "500": "#F82B60",
+  "700": "#D31A3D",
   "900": "#BA1E45"
 };
-const pink = {
-  "100": "#FFDAF6",
-  "300": "#F99DE2",
-  "500": "#FF08C2",
-  "900": "#B2158B"
-};
 const purple = {
   "100": "#EDE3FE",
   "300": "#CDB0FF",
@@ -6478,6 +6498,7 @@ const blue = {
   "100": "#CFDFFF",
   "300": "#9CC7FF",
   "500": "#2D7FF9",
+  "700": "#0056B3",
   "900": "#2750AE"
 };
 const cyan = {
@@ -6496,27 +6517,28 @@ const green = {
   "100": "#D1F7C4",
   "300": "#93E088",
   "500": "#20C933",
+  "700": "#1B9B2A",
   "900": "#338A17"
 };
 const colors = {
   blue: blue["500"],
-  pink: pink["500"],
-  teal: teal["500"],
-  purple: purple["500"],
+  cyan: cyan["500"],
   green: green["500"],
+  yellow: yellow["500"],
   orange: orange["500"],
-  cyan: cyan["500"],
   red: red["500"],
-  yellow: yellow["500"]
+  purple: purple["500"],
+  teal: teal["500"]
 };
 const colorScale = Object.values(colors);
-const grayscale = [gray["200"], gray["400"], gray["600"], gray["900"]];
-const warm = [yellow["500"], orange["500"], red["500"], pink["500"]];
-const cool = [cyan["500"], teal["500"], blue["500"], purple["500"]];
-const heatmap = [green["500"], yellow["500"], red["500"]];
-const redPalette = [red["500"], red["300"], red["100"]];
-const greenPalette = [green["500"], green["300"], green["100"]];
-const bluePalette = [blue["500"], blue["300"], blue["100"]];
+const grayscale = [gray["100"], gray["300"], gray["500"], gray["700"], gray["900"]];
+const warm = [yellow["300"], yellow["500"], orange["500"], orange["900"], red["500"]];
+const cool = [purple["500"], blue["500"], cyan["500"], teal["500"], green["500"]];
+const heatmap = [green["900"], green["500"], yellow["500"], orange["500"], red["500"]];
+const redPalette = Object.values(red);
+const greenPalette = Object.values(green);
+const bluePalette = Object.values(blue);
+const defaultColor = blue["500"];
 
 // *
 // * Typography
@@ -6531,7 +6553,7 @@ const padding = 8;
 const baseProps = {
   width: 450,
   height: 300,
-  padding: 50,
+  padding: 60,
   colorScale
 };
 // *
@@ -6575,7 +6597,7 @@ const clean = {
   area: Object.assign({
     style: {
       data: {
-        fill: blue["500"],
+        fill: defaultColor,
         strokeWidth: 2,
         fillOpacity: 0.5
       },
@@ -6592,7 +6614,7 @@ const clean = {
         strokeLinejoin
       },
       axisLabel: Object.assign({}, centeredLabelStyles, {
-        padding,
+        padding: 35,
         stroke: "transparent"
       }),
       grid: {
@@ -6657,7 +6679,7 @@ const clean = {
   bar: Object.assign({
     style: {
       data: {
-        fill: blue["500"],
+        fill: defaultColor,
         padding,
         strokeWidth: 1,
         fillOpacity: 0.5
@@ -6696,7 +6718,7 @@ const clean = {
       }),
       q1: {
         padding,
-        fill: teal["500"],
+        fill: colorScale[0],
         rx: borderRadius,
         strokeWidth: 2
       },
@@ -6705,7 +6727,7 @@ const clean = {
       }),
       q3: {
         padding,
-        fill: cyan["500"],
+        fill: colorScale[1],
         rx: borderRadius
       },
       q3Labels: Object.assign({}, baseLabelStyles, {
@@ -6726,8 +6748,8 @@ const clean = {
       })
     },
     candleColors: {
-      positive: teal["500"],
-      negative: orange["500"]
+      positive: green["500"],
+      negative: red["500"]
     },
     wickStrokeWidth: 2
   }, baseProps),
@@ -6793,7 +6815,7 @@ const clean = {
       data: {
         fill: "transparent",
         opacity: 1,
-        stroke: blue["500"],
+        stroke: defaultColor,
         strokeWidth: 2,
         strokeLinecap,
         strokeLinejoin
@@ -6824,7 +6846,7 @@ const clean = {
   scatter: Object.assign({
     style: {
       data: {
-        fill: purple["500"],
+        fill: defaultColor,
         opacity: 1,
         stroke: "transparent",
         strokeWidth: 0
@@ -6862,9 +6884,8 @@ const clean = {
     style: {
       data: {
         fill: blue["100"],
-        stroke: blue["500"],
-        strokeWidth: 2,
-        opacity: 0.4
+        stroke: defaultColor,
+        strokeWidth: 2
       },
       labels: Object.assign({}, baseLabelStyles, {
         padding: 5,