victory-core 37.1.2 → 37.3.0

package/lib/victory-util/style.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getColorScale = getColorScale;
 exports.toTransformString = void 0;
+var _victoryTheme = require("../victory-theme/victory-theme");
 /**
  * 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
@@ -41,19 +42,36 @@ 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.
  */
 exports.toTransformString = toTransformString;
-function getColorScale(name) {
+function getColorScale(name, theme) {
+  if (theme === void 0) {
+    theme = _victoryTheme.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;
 }

package/lib/victory-util/wrapper.d.ts

@@ -14,10 +14,10 @@ export declare function getDomainFromChildren(props: any, axis: any, childCompon
 export declare function getDomain(props: any, axis: any, childComponents: any): any;
 export declare function getScale(props: any, axis: any, childComponents?: any): import("..").D3Scale<any>;
 export declare function getAllEvents(props: any): any;
-export declare function getColor(calculatedProps: any, child: any, index: any): any;
+export declare function getColor(calculatedProps: any, child: any, index: any, theme: any): any;
 export declare function getStyle(theme: any, style: any, role: any): any;
-export declare function getChildStyle(child: any, index: any, calculatedProps: any): any;
-export declare function getStringsFromCategories(childComponents: any, axis: any): any[];
+export declare function getChildStyle(child: any, index: any, calculatedProps: any, theme: any): any;
+export declare function getStringsFromChildrenCategories(childComponents: any, axis: any): any[];
 export declare function getStringsFromData(childComponents: any): {
     x: number[];
     y: number[];

package/lib/victory-util/wrapper.js

@@ -15,12 +15,11 @@ exports.getDefaultDomainPadding = getDefaultDomainPadding;
 exports.getDomain = getDomain;
 exports.getDomainFromChildren = getDomainFromChildren;
 exports.getScale = getScale;
-exports.getStringsFromCategories = getStringsFromCategories;
 exports.getStringsFromChildren = getStringsFromChildren;
+exports.getStringsFromChildrenCategories = getStringsFromChildrenCategories;
 exports.getStringsFromData = getStringsFromData;
 exports.getStyle = getStyle;
 exports.getWidth = getWidth;
-var _isPlainObject2 = _interopRequireDefault(require("lodash/isPlainObject"));
 var _uniqBy2 = _interopRequireDefault(require("lodash/uniqBy"));
 var _groupBy2 = _interopRequireDefault(require("lodash/groupBy"));
 var _uniq2 = _interopRequireDefault(require("lodash/uniq"));
@@ -279,7 +278,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
@@ -296,14 +297,16 @@ function getColor(calculatedProps, child, index) {
   if (!colorScale && !color) {
     return undefined;
   }
-  const colors = Array.isArray(colorScale) ? colorScale : Style.getColorScale(colorScale);
+  const colors = Array.isArray(colorScale) ? colorScale : Style.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.getStyles(style, defaultStyle);
 }
-function getChildStyle(child, index, calculatedProps) {
+
+// eslint-disable-next-line max-params
+function getChildStyle(child, index, calculatedProps, theme) {
   const {
     style,
     role
@@ -313,7 +316,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
@@ -332,15 +335,13 @@ function getChildStyle(child, index, calculatedProps) {
     labels: labelsStyle
   };
 }
-function getStringsFromCategories(childComponents, axis) {
+function getStringsFromChildrenCategories(childComponents, axis) {
   const iteratee = child => {
-    const childProps = child.props || {};
-    if (!Domain.isDomainComponent(child) || !childProps.categories) {
+    if (!Domain.isDomainComponent(child)) {
       return null;
     }
-    const categories = childProps.categories && !Array.isArray(childProps.categories) ? childProps.categories[axis] : childProps.props.categories;
-    const categoryStrings = categories && categories.filter(val => typeof val === "string");
-    return categoryStrings ? Collection.removeUndefined(categoryStrings) : [];
+    const childProps = child.props || {};
+    return Data.getStringsFromCategories(childProps, axis);
   };
   return Helpers.reduceChildren(childComponents.slice(0), iteratee);
 }
@@ -375,10 +376,10 @@ function getStringsFromData(childComponents) {
   return Helpers.reduceChildren(childComponents.slice(0), iteratee, {}, initialMemo, combine);
 }
 function getCategoryAndAxisStringsFromChildren(props, axis, childComponents) {
-  const categories = (0, _isPlainObject2.default)(props.categories) ? props.categories[axis] : props.categories;
+  const categories = Data.getStringsFromCategories(props, axis);
   const axisComponent = Axis.getAxisComponent(childComponents, axis);
   const axisStrings = axisComponent ? Data.getStringsFromAxes(axisComponent.props, axis) : [];
-  const categoryStrings = categories || getStringsFromCategories(childComponents, axis);
+  const categoryStrings = categories.length ? categories : getStringsFromChildrenCategories(childComponents, axis);
   return (0, _uniq2.default)([...categoryStrings, ...axisStrings].flat());
 }
 function getStringsFromChildren(props, childComponents) {
@@ -392,8 +393,8 @@ function getStringsFromChildren(props, childComponents) {
   };
 }
 function getCategories(props, childComponents, allStrings) {
-  const xPropCategories = props.categories && !Array.isArray(props.categories) ? props.categories.x : props.categories;
-  const yPropCategories = props.categories && !Array.isArray(props.categories) ? props.categories.y : props.categories;
+  const xPropCategories = props.categories && Data.getStringsFromCategories(props, "x");
+  const yPropCategories = props.categories && Data.getStringsFromCategories(props, "y");
   const fallbackRequired = !xPropCategories || !yPropCategories;
   const fallbackProps = fallbackRequired ? allStrings || getStringsFromChildren(props, childComponents) : {};
   const xCategories = xPropCategories || fallbackProps.x;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "victory-core",
-  "version": "37.1.2",
+  "version": "37.3.0",
   "description": "Victory Core",
   "keywords": [
     "data visualization",
@@ -22,7 +22,7 @@
   "dependencies": {
     "lodash": "^4.17.21",
     "react-fast-compare": "^3.2.0",
-    "victory-vendor": "37.1.2"
+    "victory-vendor": "37.3.0"
   },
   "peerDependencies": {
     "react": ">=16.6.0"

package/src/types/prop-types.ts

@@ -42,6 +42,7 @@ export interface Padding {
 
 export interface AnimatePropTypeInterface {
   duration?: number;
+  delay?: number;
   onEnd?: () => void;
   onExit?: {
     duration?: number;

package/src/victory-portal/victory-portal.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { defaults } from "lodash";
+import React, { useState } from "react";
+import { defaults, uniqueId } from "lodash";
 import * as Log from "../victory-util/log";
 import * as Helpers from "../victory-util/helpers";
 import { usePortalContext } from "./portal-context";
@@ -15,7 +15,7 @@ const defaultProps: Partial<VictoryPortalProps> = {
 
 export const VictoryPortal = (initialProps: VictoryPortalProps) => {
   const props = { ...defaultProps, ...initialProps };
-  const id = React.useId();
+  const [id] = useState(uniqueId());
   const portalContext = usePortalContext();
 
   if (!portalContext) {

package/src/victory-theme/clean.tsx

@@ -28,20 +28,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",
@@ -52,6 +48,7 @@ const blue = {
   "100": "#CFDFFF",
   "300": "#9CC7FF",
   "500": "#2D7FF9",
+  "700": "#0056B3",
   "900": "#2750AE",
 };
 const cyan = {
@@ -70,20 +67,56 @@ const green = {
   "100": "#D1F7C4",
   "300": "#93E088",
   "500": "#20C933",
+  "700": "#1B9B2A",
   "900": "#338A17",
 };
 
-const colors = [
+const colors = {
+  blue: blue["500"],
+  cyan: cyan["500"],
+  green: green["500"],
+  yellow: yellow["500"],
+  orange: orange["500"],
+  red: red["500"],
+  purple: purple["500"],
+  teal: teal["500"],
+};
+
+const colorScale = Object.values(colors);
+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"],
-  pink["500"],
+  cyan["500"],
   teal["500"],
-  purple["500"],
   green["500"],
+];
+const heatmap = [
+  green["900"],
+  green["500"],
+  yellow["500"],
   orange["500"],
-  cyan["500"],
   red["500"],
-  yellow["500"],
 ];
+const redPalette = Object.values(red);
+const greenPalette = Object.values(green);
+const bluePalette = Object.values(blue);
+
+const defaultColor = blue["500"];
+
 // *
 // * Typography
 // *
@@ -98,8 +131,8 @@ const padding = 8;
 const baseProps = {
   width: 450,
   height: 300,
-  padding: 50,
-  colorScale: colors,
+  padding: 60,
+  colorScale,
 };
 // *
 // * Labels
@@ -130,11 +163,24 @@ const borderRadius = 1;
 // * Theme
 // *
 export const clean: VictoryThemeDefinition = {
+  palette: {
+    colors,
+    grayscale,
+    qualitative: colorScale,
+    heatmap,
+    warm,
+    cool,
+    red: redPalette,
+    green: greenPalette,
+    blue: bluePalette,
+  },
   area: Object.assign(
     {
       style: {
         data: {
-          fill: cyan["500"],
+          fill: defaultColor,
+          strokeWidth: 2,
+          fillOpacity: 0.5,
         },
         labels: baseLabelStyles,
       },
@@ -146,13 +192,13 @@ export const clean: VictoryThemeDefinition = {
       style: {
         axis: {
           fill: "transparent",
-          stroke: gray["300"],
+          stroke: gray["500"],
           strokeWidth: 1,
           strokeLinecap,
           strokeLinejoin,
         },
         axisLabel: Object.assign({}, centeredLabelStyles, {
-          padding,
+          padding: 35,
           stroke: "transparent",
         }),
         grid: {
@@ -173,10 +219,10 @@ export const clean: VictoryThemeDefinition = {
   polarAxis: Object.assign({
     style: {
       axis: {
-        stroke: gray["300"],
+        stroke: gray["500"],
       },
       grid: {
-        stroke: gray["200"],
+        stroke: gray["400"],
         strokeDasharray,
         strokeLinecap,
         strokeLinejoin,
@@ -185,7 +231,7 @@ export const clean: VictoryThemeDefinition = {
       ticks: {
         fill: "transparent",
         size: 5,
-        stroke: gray["200"],
+        stroke: gray["400"],
         strokeWidth: 1,
         strokeLinecap,
         strokeLinejoin,
@@ -196,10 +242,10 @@ export const clean: VictoryThemeDefinition = {
   polarDependentAxis: Object.assign({
     style: {
       axis: {
-        stroke: gray["300"],
+        stroke: gray["500"],
       },
       grid: {
-        stroke: gray["200"],
+        stroke: gray["400"],
         strokeDasharray,
         strokeLinecap,
         strokeLinejoin,
@@ -208,7 +254,7 @@ export const clean: VictoryThemeDefinition = {
       ticks: {
         fill: "transparent",
         size: 5,
-        stroke: gray["200"],
+        stroke: gray["300"],
         strokeWidth: 1,
         strokeLinecap,
         strokeLinejoin,
@@ -220,9 +266,10 @@ export const clean: VictoryThemeDefinition = {
     {
       style: {
         data: {
-          fill: blue["500"],
+          fill: defaultColor,
           padding,
-          strokeWidth: 0,
+          strokeWidth: 1,
+          fillOpacity: 0.5,
         },
         labels: baseLabelStyles,
       },
@@ -239,9 +286,9 @@ export const clean: VictoryThemeDefinition = {
         medianLabels: Object.assign({}, baseLabelStyles, { padding: 3 }),
         min: { padding, stroke: gray["400"], strokeWidth: 2 },
         minLabels: Object.assign({}, baseLabelStyles, { padding: 3 }),
-        q1: { padding, fill: teal["500"], rx: borderRadius },
+        q1: { padding, fill: colorScale[0], rx: borderRadius, strokeWidth: 2 },
         q1Labels: Object.assign({}, baseLabelStyles, { padding: 3 }),
-        q3: { padding, fill: teal["500"], rx: borderRadius },
+        q3: { padding, fill: colorScale[1], rx: borderRadius },
         q3Labels: Object.assign({}, baseLabelStyles, { padding: 3 }),
       },
       boxWidth: 20,
@@ -259,8 +306,8 @@ export const clean: VictoryThemeDefinition = {
         labels: Object.assign({}, baseLabelStyles, { padding: 5 }),
       },
       candleColors: {
-        positive: teal["500"],
-        negative: orange["500"],
+        positive: green["500"],
+        negative: red["500"],
       },
       wickStrokeWidth: 2,
     },
@@ -285,7 +332,7 @@ export const clean: VictoryThemeDefinition = {
   ),
   group: Object.assign(
     {
-      colorScale: colors,
+      colorScale,
     },
     baseProps,
   ),
@@ -294,8 +341,7 @@ export const clean: VictoryThemeDefinition = {
       style: {
         data: {
           fill: cyan["500"],
-          stroke: "transparent",
-          strokeWidth: 0,
+          fillOpacity: 0.5,
         },
         labels: baseLabelStyles,
       },
@@ -306,16 +352,18 @@ export const clean: VictoryThemeDefinition = {
   ),
   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 },
-      title: Object.assign({}, baseLabelStyles, { padding, fontSize: 20 }),
+      labels: { ...baseLabelStyles, fontSize: 12 },
+      title: Object.assign({}, baseLabelStyles, { padding, fontSize: 16 }),
       border: { stroke: gray["200"], strokeWidth: 2, padding: 16 },
     },
   },
@@ -325,7 +373,7 @@ export const clean: VictoryThemeDefinition = {
         data: {
           fill: "transparent",
           opacity: 1,
-          stroke: pink["500"],
+          stroke: defaultColor,
           strokeWidth: 2,
           strokeLinecap,
           strokeLinejoin,
@@ -338,14 +386,22 @@ export const clean: VictoryThemeDefinition = {
   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,
@@ -354,19 +410,22 @@ export const clean: VictoryThemeDefinition = {
     {
       style: {
         data: {
-          fill: purple["500"],
+          fill: defaultColor,
           opacity: 1,
           stroke: "transparent",
           strokeWidth: 0,
         },
-        labels: baseLabelStyles,
+        labels: {
+          ...baseLabelStyles,
+          padding: 20,
+        },
       },
     },
     baseProps,
   ),
   stack: Object.assign(
     {
-      colorScale: colors,
+      colorScale,
     },
     baseProps,
   ),
@@ -376,7 +435,7 @@ export const clean: VictoryThemeDefinition = {
       pointerEvents: "none",
     }),
     flyoutStyle: {
-      stroke: gray["500"],
+      stroke: gray["300"],
       strokeWidth: 2,
       fill: gray.white,
       pointerEvents: "none",
@@ -389,8 +448,8 @@ export const clean: VictoryThemeDefinition = {
     {
       style: {
         data: {
-          fill: red["100"],
-          stroke: red["500"],
+          fill: blue["100"],
+          stroke: defaultColor,
           strokeWidth: 2,
         },
         labels: Object.assign({}, baseLabelStyles, {

package/src/victory-theme/grayscale.tsx

@@ -3,7 +3,19 @@ import { VictoryThemeDefinition } from "./types";
 // *
 // * Colors
 // *
-const colors = [
+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",
@@ -15,6 +27,26 @@ const colors = [
 
 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
 // *
@@ -28,7 +60,7 @@ const baseProps = {
   width: 450,
   height: 300,
   padding: 50,
-  colorScale: colors,
+  colorScale,
 };
 // *
 // * Labels
@@ -53,6 +85,17 @@ const strokeLinecap = "round";
 const strokeLinejoin = "round";
 
 export const grayscale: VictoryThemeDefinition = {
+  palette: {
+    colors,
+    grayscale: colorScale,
+    qualitative,
+    heatmap,
+    warm,
+    cool,
+    red,
+    green,
+    blue,
+  },
   area: Object.assign(
     {
       style: {
@@ -156,7 +199,7 @@ export const grayscale: VictoryThemeDefinition = {
   ),
   group: Object.assign(
     {
-      colorScale: colors,
+      colorScale,
     },
     baseProps,
   ),
@@ -174,7 +217,7 @@ export const grayscale: VictoryThemeDefinition = {
     baseProps,
   ),
   legend: {
-    colorScale: colors,
+    colorScale,
     gutter: 10,
     orientation: "vertical",
     titleOrientation: "top",
@@ -208,7 +251,7 @@ export const grayscale: VictoryThemeDefinition = {
       },
       labels: Object.assign({}, baseLabelStyles, { padding: 20 }),
     },
-    colorScale: colors,
+    colorScale,
     width: 400,
     height: 400,
     padding: 50,
@@ -228,7 +271,7 @@ export const grayscale: VictoryThemeDefinition = {
   ),
   stack: Object.assign(
     {
-      colorScale: colors,
+      colorScale,
     },
     baseProps,
   ),