victory-core 37.1.2 → 37.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # victory-core
 
+## 37.2.0
+
+### Minor Changes
+
+- Minor updates for clean theme ([#2909](https://github.com/FormidableLabs/victory/pull/2909))
+
+* more minor updates to clean theme ([#2915](https://github.com/FormidableLabs/victory/pull/2915))
+
+### Patch Changes
+
+- replace useId for backwards compatibility ([#2916](https://github.com/FormidableLabs/victory/pull/2916))
+
 ## 37.1.2
 
 ### Patch Changes

package/dist/victory-core.js

@@ -1410,31 +1410,34 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "VictoryPortal": function() { return /* binding */ VictoryPortal; }
 /* harmony export */ });
-/* harmony import */ var lodash_defaults__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lodash/defaults */ "../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/defaults.js");
-/* harmony import */ var lodash_defaults__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash_defaults__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _victory_util_log__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../victory-util/log */ "./victory-util/log.ts");
-/* harmony import */ var _victory_util_helpers__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../victory-util/helpers */ "./victory-util/helpers.ts");
-/* harmony import */ var _portal_context__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./portal-context */ "./victory-portal/portal-context.tsx");
+/* harmony import */ var lodash_uniqueId__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lodash/uniqueId */ "../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/uniqueId.js");
+/* harmony import */ var lodash_uniqueId__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash_uniqueId__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var lodash_defaults__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash/defaults */ "../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/defaults.js");
+/* harmony import */ var lodash_defaults__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_defaults__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _victory_util_log__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../victory-util/log */ "./victory-util/log.ts");
+/* harmony import */ var _victory_util_helpers__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../victory-util/helpers */ "./victory-util/helpers.ts");
+/* harmony import */ var _portal_context__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./portal-context */ "./victory-portal/portal-context.tsx");
+
 
 
 
 
 
 const defaultProps = {
-  groupComponent: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("g", null)
+  groupComponent: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement("g", null)
 };
 const VictoryPortal = initialProps => {
   const props = {
     ...defaultProps,
     ...initialProps
   };
-  const id = react__WEBPACK_IMPORTED_MODULE_1___default().useId();
-  const portalContext = (0,_portal_context__WEBPACK_IMPORTED_MODULE_2__.usePortalContext)();
+  const id = 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";
-    _victory_util_log__WEBPACK_IMPORTED_MODULE_3__.warn(msg);
+    _victory_util_log__WEBPACK_IMPORTED_MODULE_4__.warn(msg);
   }
   const children = Array.isArray(props.children) ? props.children[0] : props.children;
   const {
@@ -1445,15 +1448,15 @@ const VictoryPortal = initialProps => {
     groupComponent,
     standalone: false
   } : {};
-  const newProps = lodash_defaults__WEBPACK_IMPORTED_MODULE_0___default()(standardProps, childProps, _victory_util_helpers__WEBPACK_IMPORTED_MODULE_4__.omit(props, ["children", "groupComponent"]), {
+  const newProps = lodash_defaults__WEBPACK_IMPORTED_MODULE_1___default()(standardProps, childProps, _victory_util_helpers__WEBPACK_IMPORTED_MODULE_5__.omit(props, ["children", "groupComponent"]), {
     key: childProps.key ?? id
   });
-  const child = children && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().cloneElement(children, newProps);
-  react__WEBPACK_IMPORTED_MODULE_1___default().useEffect(() => {
+  const child = children && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().cloneElement(children, newProps);
+  react__WEBPACK_IMPORTED_MODULE_2___default().useEffect(() => {
     portalContext?.addChild(id, child);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.children]);
-  react__WEBPACK_IMPORTED_MODULE_1___default().useEffect(() => {
+  react__WEBPACK_IMPORTED_MODULE_2___default().useEffect(() => {
     return () => portalContext?.removeChild(id);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -2355,7 +2358,26 @@ const green = {
   "500": "#20C933",
   "900": "#338A17"
 };
-const colors = [blue["500"], pink["500"], teal["500"], purple["500"], green["500"], orange["500"], cyan["500"], red["500"], yellow["500"]];
+const colors = {
+  blue: blue["500"],
+  pink: pink["500"],
+  teal: teal["500"],
+  purple: purple["500"],
+  green: green["500"],
+  orange: orange["500"],
+  cyan: cyan["500"],
+  red: red["500"],
+  yellow: yellow["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"]];
+
 // *
 // * Typography
 // *
@@ -2370,7 +2392,7 @@ const baseProps = {
   width: 450,
   height: 300,
   padding: 50,
-  colorScale: colors
+  colorScale
 };
 // *
 // * Labels
@@ -2399,10 +2421,23 @@ const borderRadius = 1;
 // * Theme
 // *
 const clean = {
+  palette: {
+    colors,
+    grayscale,
+    qualitative: colorScale,
+    heatmap,
+    warm,
+    cool,
+    red: redPalette,
+    green: greenPalette,
+    blue: bluePalette
+  },
   area: Object.assign({
     style: {
       data: {
-        fill: cyan["500"]
+        fill: blue["500"],
+        strokeWidth: 2,
+        fillOpacity: 0.5
       },
       labels: baseLabelStyles
     }
@@ -2411,7 +2446,7 @@ const clean = {
     style: {
       axis: {
         fill: "transparent",
-        stroke: gray["300"],
+        stroke: gray["500"],
         strokeWidth: 1,
         strokeLinecap,
         strokeLinejoin
@@ -2436,10 +2471,10 @@ const clean = {
   polarAxis: Object.assign({
     style: {
       axis: {
-        stroke: gray["300"]
+        stroke: gray["500"]
       },
       grid: {
-        stroke: gray["200"],
+        stroke: gray["400"],
         strokeDasharray,
         strokeLinecap,
         strokeLinejoin,
@@ -2448,7 +2483,7 @@ const clean = {
       ticks: {
         fill: "transparent",
         size: 5,
-        stroke: gray["200"],
+        stroke: gray["400"],
         strokeWidth: 1,
         strokeLinecap,
         strokeLinejoin
@@ -2459,10 +2494,10 @@ const clean = {
   polarDependentAxis: Object.assign({
     style: {
       axis: {
-        stroke: gray["300"]
+        stroke: gray["500"]
       },
       grid: {
-        stroke: gray["200"],
+        stroke: gray["400"],
         strokeDasharray,
         strokeLinecap,
         strokeLinejoin,
@@ -2471,7 +2506,7 @@ const clean = {
       ticks: {
         fill: "transparent",
         size: 5,
-        stroke: gray["200"],
+        stroke: gray["300"],
         strokeWidth: 1,
         strokeLinecap,
         strokeLinejoin
@@ -2484,7 +2519,8 @@ const clean = {
       data: {
         fill: blue["500"],
         padding,
-        strokeWidth: 0
+        strokeWidth: 1,
+        fillOpacity: 0.5
       },
       labels: baseLabelStyles
     },
@@ -2521,14 +2557,15 @@ const clean = {
       q1: {
         padding,
         fill: teal["500"],
-        rx: borderRadius
+        rx: borderRadius,
+        strokeWidth: 2
       },
       q1Labels: Object.assign({}, baseLabelStyles, {
         padding: 3
       }),
       q3: {
         padding,
-        fill: teal["500"],
+        fill: cyan["500"],
         rx: borderRadius
       },
       q3Labels: Object.assign({}, baseLabelStyles, {
@@ -2569,14 +2606,13 @@ const clean = {
     }
   }, baseProps),
   group: Object.assign({
-    colorScale: colors
+    colorScale
   }, baseProps),
   histogram: Object.assign({
     style: {
       data: {
         fill: cyan["500"],
-        stroke: "transparent",
-        strokeWidth: 0
+        fillOpacity: 0.5
       },
       labels: baseLabelStyles
     },
@@ -2587,21 +2623,23 @@ const clean = {
   }, baseProps),
   label: baseLabelStyles,
   legend: {
-    colorScale: colors,
-    gutter: 10,
-    orientation: "vertical",
+    colorScale,
+    gutter: 24,
+    borderPadding: 10,
+    orientation: "horizontal",
     titleOrientation: "top",
+    centerTitle: true,
     style: {
       data: {
         type: "circle"
       },
       labels: {
         ...baseLabelStyles,
-        fontSize: 14
+        fontSize: 12
       },
       title: Object.assign({}, baseLabelStyles, {
         padding,
-        fontSize: 20
+        fontSize: 16
       }),
       border: {
         stroke: gray["200"],
@@ -2615,7 +2653,7 @@ const clean = {
       data: {
         fill: "transparent",
         opacity: 1,
-        stroke: pink["500"],
+        stroke: blue["500"],
         strokeWidth: 2,
         strokeLinecap,
         strokeLinejoin
@@ -2625,16 +2663,22 @@ const clean = {
   }, baseProps),
   pie: Object.assign({
     style: {
+      parent: {
+        backgroundColor: gray.white
+      },
       data: {
         padding,
         stroke: gray.white,
         strokeWidth: 1
       },
-      labels: Object.assign({}, baseLabelStyles, {
-        padding: 20
-      })
+      labels: {
+        ...baseLabelStyles,
+        padding: 20,
+        fill: gray["600"],
+        fontSize: 10
+      }
     },
-    colorScale: colors,
+    colorScale,
     cornerRadius: borderRadius
   }, baseProps),
   scatter: Object.assign({
@@ -2645,11 +2689,14 @@ const clean = {
         stroke: "transparent",
         strokeWidth: 0
       },
-      labels: baseLabelStyles
+      labels: {
+        ...baseLabelStyles,
+        padding: 20
+      }
     }
   }, baseProps),
   stack: Object.assign({
-    colorScale: colors
+    colorScale
   }, baseProps),
   tooltip: {
     style: Object.assign({}, baseLabelStyles, {
@@ -2657,7 +2704,7 @@ const clean = {
       pointerEvents: "none"
     }),
     flyoutStyle: {
-      stroke: gray["500"],
+      stroke: gray["300"],
       strokeWidth: 2,
       fill: gray.white,
       pointerEvents: "none"
@@ -2674,9 +2721,10 @@ const clean = {
   voronoi: Object.assign({
     style: {
       data: {
-        fill: red["100"],
-        stroke: red["500"],
-        strokeWidth: 2
+        fill: blue["100"],
+        stroke: blue["500"],
+        strokeWidth: 2,
+        opacity: 0.4
       },
       labels: Object.assign({}, baseLabelStyles, {
         padding: 5,
@@ -2712,9 +2760,28 @@ __webpack_require__.r(__webpack_exports__);
 // *
 // * Colors
 // *
-const colors = ["#252525", "#525252", "#737373", "#969696", "#bdbdbd", "#d9d9d9", "#f0f0f0"];
+const colors = {
+  blue: "#4F7DA1",
+  pink: "#E2A37F",
+  teal: "#00796B",
+  purple: "#DF948A",
+  green: "#8BC34A",
+  orange: "#F4511E",
+  cyan: "#006064",
+  red: "#DF5A49",
+  yellow: "#FFF59D"
+};
+const colorScale = ["#252525", "#525252", "#737373", "#969696", "#bdbdbd", "#d9d9d9", "#f0f0f0"];
 const charcoal = "#252525";
 const grey = "#969696";
+const qualitative = ["#334D5C", "#45B29D", "#EFC94C", "#E27A3F", "#DF5A49", "#4F7DA1", "#55DBC1", "#EFDA97", "#E2A37F", "#DF948A"];
+const heatmap = ["#428517", "#77D200", "#D6D305", "#EC8E19", "#C92B05"];
+const warm = ["#940031", "#C43343", "#DC5429", "#FF821D", "#FFAF55"];
+const cool = ["#2746B9", "#0B69D4", "#2794DB", "#31BB76", "#60E83B"];
+const red = ["#FCAE91", "#FB6A4A", "#DE2D26", "#A50F15", "#750B0E"];
+const green = ["#354722", "#466631", "#649146", "#8AB25C", "#A9C97E"];
+const blue = ["#002C61", "#004B8F", "#006BC9", "#3795E5", "#65B4F4"];
+
 // *
 // * Typography
 // *
@@ -2728,7 +2795,7 @@ const baseProps = {
   width: 450,
   height: 300,
   padding: 50,
-  colorScale: colors
+  colorScale
 };
 // *
 // * Labels
@@ -2750,6 +2817,17 @@ const centeredLabelStyles = Object.assign({
 const strokeLinecap = "round";
 const strokeLinejoin = "round";
 const grayscale = {
+  palette: {
+    colors,
+    grayscale: colorScale,
+    qualitative,
+    heatmap,
+    warm,
+    cool,
+    red,
+    green,
+    blue
+  },
   area: Object.assign({
     style: {
       data: {
@@ -2864,7 +2942,7 @@ const grayscale = {
     }
   }, baseProps),
   group: Object.assign({
-    colorScale: colors
+    colorScale
   }, baseProps),
   histogram: Object.assign({
     style: {
@@ -2877,7 +2955,7 @@ const grayscale = {
     }
   }, baseProps),
   legend: {
-    colorScale: colors,
+    colorScale,
     gutter: 10,
     orientation: "vertical",
     titleOrientation: "top",
@@ -2912,7 +2990,7 @@ const grayscale = {
         padding: 20
       })
     },
-    colorScale: colors,
+    colorScale,
     width: 400,
     height: 400,
     padding: 50
@@ -2928,7 +3006,7 @@ const grayscale = {
     }
   }, baseProps),
   stack: Object.assign({
-    colorScale: colors
+    colorScale
   }, baseProps),
   tooltip: {
     style: Object.assign({}, baseLabelStyles, {
@@ -2988,11 +3066,31 @@ const lime300 = "#DCE775";
 const lightGreen500 = "#8BC34A";
 const teal700 = "#00796B";
 const cyan900 = "#006064";
-const colors = [deepOrange600, yellow200, lime300, lightGreen500, teal700, cyan900];
+const colorScale = [deepOrange600, yellow200, lime300, lightGreen500, teal700, cyan900];
 const blueGrey50 = "#ECEFF1";
 const blueGrey300 = "#90A4AE";
 const blueGrey700 = "#455A64";
 const grey900 = "#212121";
+const colors = {
+  blue: "#4F7DA1",
+  pink: "#E2A37F",
+  teal: teal700,
+  purple: "#DF948A",
+  green: lightGreen500,
+  orange: deepOrange600,
+  cyan: cyan900,
+  red: "#DF5A49",
+  yellow: yellow200
+};
+const grayscale = [blueGrey50, blueGrey300, blueGrey700, grey900];
+const qualitative = ["#334D5C", "#45B29D", "#EFC94C", "#E27A3F", "#DF5A49", "#4F7DA1", "#55DBC1", "#EFDA97", "#E2A37F", "#DF948A"];
+const heatmap = ["#428517", "#77D200", "#D6D305", "#EC8E19", "#C92B05"];
+const warm = ["#940031", "#C43343", "#DC5429", "#FF821D", "#FFAF55"];
+const cool = ["#2746B9", "#0B69D4", "#2794DB", "#31BB76", "#60E83B"];
+const red = ["#FCAE91", "#FB6A4A", "#DE2D26", "#A50F15", "#750B0E"];
+const green = ["#354722", "#466631", "#649146", "#8AB25C", "#A9C97E"];
+const blue = ["#002C61", "#004B8F", "#006BC9", "#3795E5", "#65B4F4"];
+
 // *
 // * Typography
 // *
@@ -3030,6 +3128,17 @@ const strokeDasharray = "10, 5";
 const strokeLinecap = "round";
 const strokeLinejoin = "round";
 const material = {
+  palette: {
+    colors,
+    grayscale,
+    qualitative,
+    heatmap,
+    warm,
+    cool,
+    red,
+    green,
+    blue
+  },
   area: Object.assign({
     style: {
       data: {
@@ -3162,7 +3271,7 @@ const material = {
     }
   }, baseProps),
   group: Object.assign({
-    colorScale: colors
+    colorScale
   }, baseProps),
   histogram: Object.assign({
     style: {
@@ -3175,7 +3284,7 @@ const material = {
     }
   }, baseProps),
   legend: {
-    colorScale: colors,
+    colorScale,
     gutter: 10,
     orientation: "vertical",
     titleOrientation: "top",
@@ -3201,7 +3310,7 @@ const material = {
     }
   }, baseProps),
   pie: Object.assign({
-    colorScale: colors,
+    colorScale,
     style: {
       data: {
         padding,
@@ -3225,7 +3334,7 @@ const material = {
     }
   }, baseProps),
   stack: Object.assign({
-    colorScale: colors
+    colorScale
   }, baseProps),
   tooltip: {
     style: Object.assign({}, baseLabelStyles, {
@@ -7173,6 +7282,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "getColorScale": function() { return /* binding */ getColorScale; },
 /* harmony export */   "toTransformString": function() { return /* binding */ toTransformString; }
 /* harmony export */ });
+/* harmony import */ var _victory_theme_victory_theme__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../victory-theme/victory-theme */ "./victory-theme/victory-theme.tsx");
+
+
 /**
  * Given an object with CSS/SVG transform definitions, return the string value
  * for use with the `transform` CSS property or SVG attribute. Note that we
@@ -7209,20 +7321,37 @@ const toTransformString = function (obj) {
  * of 5 hex string values in that color scale. If no 'name' parameter
  * is given, it will return the Victory default grayscale.
  * @param {String} name The name of the color scale to return (optional).
+ * @param {Object} theme The theme object to retrieve the color scale from (optional).
  * @returns {Array} An array of 5 hex string values composing a color scale.
  */
-function getColorScale(name) {
+function getColorScale(name, theme) {
+  if (theme === void 0) {
+    theme = _victory_theme_victory_theme__WEBPACK_IMPORTED_MODULE_0__.VictoryTheme.material;
+  }
+  const {
+    palette: {
+      grayscale = ["#cccccc", "#969696", "#636363", "#252525"],
+      qualitative = [],
+      heatmap = [],
+      warm = [],
+      cool = [],
+      red = [],
+      blue = [],
+      green = []
+    } = {}
+  } = theme;
   const scales = {
-    grayscale: ["#cccccc", "#969696", "#636363", "#252525"],
-    qualitative: ["#334D5C", "#45B29D", "#EFC94C", "#E27A3F", "#DF5A49", "#4F7DA1", "#55DBC1", "#EFDA97", "#E2A37F", "#DF948A"],
-    heatmap: ["#428517", "#77D200", "#D6D305", "#EC8E19", "#C92B05"],
-    warm: ["#940031", "#C43343", "#DC5429", "#FF821D", "#FFAF55"],
-    cool: ["#2746B9", "#0B69D4", "#2794DB", "#31BB76", "#60E83B"],
-    red: ["#FCAE91", "#FB6A4A", "#DE2D26", "#A50F15", "#750B0E"],
-    blue: ["#002C61", "#004B8F", "#006BC9", "#3795E5", "#65B4F4"],
-    green: ["#354722", "#466631", "#649146", "#8AB25C", "#A9C97E"]
+    grayscale,
+    qualitative,
+    heatmap,
+    warm,
+    cool,
+    red,
+    blue,
+    green
   };
-  return name ? scales[name] : scales.grayscale;
+  const selectedScale = name && scales[name]?.length ? scales[name] : scales.grayscale;
+  return selectedScale;
 }
 
 /***/ }),
@@ -8464,7 +8593,9 @@ function getAllEvents(props) {
   }
   return events || [];
 }
-function getColor(calculatedProps, child, index) {
+
+// eslint-disable-next-line max-params
+function getColor(calculatedProps, child, index, theme) {
   // check for styles first
   const {
     style
@@ -8481,14 +8612,16 @@ function getColor(calculatedProps, child, index) {
   if (!colorScale && !color) {
     return undefined;
   }
-  const colors = Array.isArray(colorScale) ? colorScale : _style__WEBPACK_IMPORTED_MODULE_13__.getColorScale(colorScale);
+  const colors = Array.isArray(colorScale) ? colorScale : _style__WEBPACK_IMPORTED_MODULE_13__.getColorScale(colorScale, theme);
   return color || colors[index % colors.length];
 }
 function getStyle(theme, style, role) {
   const defaultStyle = theme && theme[role] && theme[role].style ? theme[role].style : {};
   return _helpers__WEBPACK_IMPORTED_MODULE_7__.getStyles(style, defaultStyle);
 }
-function getChildStyle(child, index, calculatedProps) {
+
+// eslint-disable-next-line max-params
+function getChildStyle(child, index, calculatedProps, theme) {
   const {
     style,
     role
@@ -8498,7 +8631,7 @@ function getChildStyle(child, index, calculatedProps) {
     return childStyle;
   }
   const childRole = child.type && child.type.role;
-  const defaultFill = childRole === "stack" ? undefined : getColor(calculatedProps, child, index);
+  const defaultFill = childRole === "stack" ? undefined : getColor(calculatedProps, child, index, theme);
   const defaultColor = childRole === "line" ? {
     fill: "none",
     stroke: defaultFill