victory-core 37.1.2 → 37.3.0

package/es/victory-util/wrapper.js

@@ -1,4 +1,3 @@
-import _isPlainObject from "lodash/isPlainObject";
 import _uniqBy from "lodash/uniqBy";
 import _groupBy from "lodash/groupBy";
 import _uniq from "lodash/uniq";
@@ -254,7 +253,9 @@ export function getAllEvents(props) {
   }
   return events || [];
 }
-export function getColor(calculatedProps, child, index) {
+
+// eslint-disable-next-line max-params
+export function getColor(calculatedProps, child, index, theme) {
   // check for styles first
   const {
     style
@@ -271,14 +272,16 @@ export 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];
 }
 export function getStyle(theme, style, role) {
   const defaultStyle = theme && theme[role] && theme[role].style ? theme[role].style : {};
   return Helpers.getStyles(style, defaultStyle);
 }
-export function getChildStyle(child, index, calculatedProps) {
+
+// eslint-disable-next-line max-params
+export function getChildStyle(child, index, calculatedProps, theme) {
   const {
     style,
     role
@@ -288,7 +291,7 @@ export 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
@@ -307,15 +310,13 @@ export function getChildStyle(child, index, calculatedProps) {
     labels: labelsStyle
   };
 }
-export function getStringsFromCategories(childComponents, axis) {
+export 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);
 }
@@ -350,10 +351,10 @@ export function getStringsFromData(childComponents) {
   return Helpers.reduceChildren(childComponents.slice(0), iteratee, {}, initialMemo, combine);
 }
 export function getCategoryAndAxisStringsFromChildren(props, axis, childComponents) {
-  const categories = _isPlainObject(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 _uniq([...categoryStrings, ...axisStrings].flat());
 }
 export function getStringsFromChildren(props, childComponents) {
@@ -367,8 +368,8 @@ export function getStringsFromChildren(props, childComponents) {
   };
 }
 export 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/lib/types/prop-types.d.ts

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

package/lib/victory-portal/victory-portal.js

@@ -4,8 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.VictoryPortal = void 0;
+var _uniqueId2 = _interopRequireDefault(require("lodash/uniqueId"));
 var _defaults2 = _interopRequireDefault(require("lodash/defaults"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var Log = _interopRequireWildcard(require("../victory-util/log"));
 var Helpers = _interopRequireWildcard(require("../victory-util/helpers"));
 var _portalContext = require("./portal-context");
@@ -20,7 +21,7 @@ const VictoryPortal = initialProps => {
     ...defaultProps,
     ...initialProps
   };
-  const id = _react.default.useId();
+  const [id] = (0, _react.useState)((0, _uniqueId2.default)());
   const portalContext = (0, _portalContext.usePortalContext)();
   if (!portalContext) {
     const msg = "`renderInPortal` is not supported outside of `VictoryContainer`. " + "Component will be rendered in place";

package/lib/victory-theme/clean.js

@@ -32,20 +32,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",
@@ -56,6 +52,7 @@ const blue = {
   "100": "#CFDFFF",
   "300": "#9CC7FF",
   "500": "#2D7FF9",
+  "700": "#0056B3",
   "900": "#2750AE"
 };
 const cyan = {
@@ -74,9 +71,29 @@ const green = {
   "100": "#D1F7C4",
   "300": "#93E088",
   "500": "#20C933",
+  "700": "#1B9B2A",
   "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"],
+  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"], 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
 // *
@@ -90,8 +107,8 @@ const padding = 8;
 const baseProps = {
   width: 450,
   height: 300,
-  padding: 50,
-  colorScale: colors
+  padding: 60,
+  colorScale
 };
 // *
 // * Labels
@@ -120,10 +137,23 @@ const borderRadius = 1;
 // * Theme
 // *
 const clean = exports.clean = {
+  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
     }
@@ -132,13 +162,13 @@ const clean = exports.clean = {
     style: {
       axis: {
         fill: "transparent",
-        stroke: gray["300"],
+        stroke: gray["500"],
         strokeWidth: 1,
         strokeLinecap,
         strokeLinejoin
       },
       axisLabel: Object.assign({}, centeredLabelStyles, {
-        padding,
+        padding: 35,
         stroke: "transparent"
       }),
       grid: {
@@ -157,10 +187,10 @@ const clean = exports.clean = {
   polarAxis: Object.assign({
     style: {
       axis: {
-        stroke: gray["300"]
+        stroke: gray["500"]
       },
       grid: {
-        stroke: gray["200"],
+        stroke: gray["400"],
         strokeDasharray,
         strokeLinecap,
         strokeLinejoin,
@@ -169,7 +199,7 @@ const clean = exports.clean = {
       ticks: {
         fill: "transparent",
         size: 5,
-        stroke: gray["200"],
+        stroke: gray["400"],
         strokeWidth: 1,
         strokeLinecap,
         strokeLinejoin
@@ -180,10 +210,10 @@ const clean = exports.clean = {
   polarDependentAxis: Object.assign({
     style: {
       axis: {
-        stroke: gray["300"]
+        stroke: gray["500"]
       },
       grid: {
-        stroke: gray["200"],
+        stroke: gray["400"],
         strokeDasharray,
         strokeLinecap,
         strokeLinejoin,
@@ -192,7 +222,7 @@ const clean = exports.clean = {
       ticks: {
         fill: "transparent",
         size: 5,
-        stroke: gray["200"],
+        stroke: gray["300"],
         strokeWidth: 1,
         strokeLinecap,
         strokeLinejoin
@@ -203,9 +233,10 @@ const clean = exports.clean = {
   bar: Object.assign({
     style: {
       data: {
-        fill: blue["500"],
+        fill: defaultColor,
         padding,
-        strokeWidth: 0
+        strokeWidth: 1,
+        fillOpacity: 0.5
       },
       labels: baseLabelStyles
     },
@@ -241,15 +272,16 @@ const clean = exports.clean = {
       }),
       q1: {
         padding,
-        fill: teal["500"],
-        rx: borderRadius
+        fill: colorScale[0],
+        rx: borderRadius,
+        strokeWidth: 2
       },
       q1Labels: Object.assign({}, baseLabelStyles, {
         padding: 3
       }),
       q3: {
         padding,
-        fill: teal["500"],
+        fill: colorScale[1],
         rx: borderRadius
       },
       q3Labels: Object.assign({}, baseLabelStyles, {
@@ -270,8 +302,8 @@ const clean = exports.clean = {
       })
     },
     candleColors: {
-      positive: teal["500"],
-      negative: orange["500"]
+      positive: green["500"],
+      negative: red["500"]
     },
     wickStrokeWidth: 2
   }, baseProps),
@@ -290,14 +322,13 @@ const clean = exports.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
     },
@@ -308,21 +339,23 @@ const clean = exports.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"],
@@ -336,7 +369,7 @@ const clean = exports.clean = {
       data: {
         fill: "transparent",
         opacity: 1,
-        stroke: pink["500"],
+        stroke: defaultColor,
         strokeWidth: 2,
         strokeLinecap,
         strokeLinejoin
@@ -346,31 +379,40 @@ const clean = exports.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({
     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),
   tooltip: {
     style: Object.assign({}, baseLabelStyles, {
@@ -378,7 +420,7 @@ const clean = exports.clean = {
       pointerEvents: "none"
     }),
     flyoutStyle: {
-      stroke: gray["500"],
+      stroke: gray["300"],
       strokeWidth: 2,
       fill: gray.white,
       pointerEvents: "none"
@@ -395,8 +437,8 @@ const clean = exports.clean = {
   voronoi: Object.assign({
     style: {
       data: {
-        fill: red["100"],
-        stroke: red["500"],
+        fill: blue["100"],
+        stroke: defaultColor,
         strokeWidth: 2
       },
       labels: Object.assign({}, baseLabelStyles, {

package/lib/victory-theme/grayscale.js

@@ -7,9 +7,28 @@ exports.grayscale = void 0;
 // *
 // * 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
 // *
@@ -23,7 +42,7 @@ const baseProps = {
   width: 450,
   height: 300,
   padding: 50,
-  colorScale: colors
+  colorScale
 };
 // *
 // * Labels
@@ -45,6 +64,17 @@ const centeredLabelStyles = Object.assign({
 const strokeLinecap = "round";
 const strokeLinejoin = "round";
 const grayscale = exports.grayscale = {
+  palette: {
+    colors,
+    grayscale: colorScale,
+    qualitative,
+    heatmap,
+    warm,
+    cool,
+    red,
+    green,
+    blue
+  },
   area: Object.assign({
     style: {
       data: {
@@ -159,7 +189,7 @@ const grayscale = exports.grayscale = {
     }
   }, baseProps),
   group: Object.assign({
-    colorScale: colors
+    colorScale
   }, baseProps),
   histogram: Object.assign({
     style: {
@@ -172,7 +202,7 @@ const grayscale = exports.grayscale = {
     }
   }, baseProps),
   legend: {
-    colorScale: colors,
+    colorScale,
     gutter: 10,
     orientation: "vertical",
     titleOrientation: "top",
@@ -207,7 +237,7 @@ const grayscale = exports.grayscale = {
         padding: 20
       })
     },
-    colorScale: colors,
+    colorScale,
     width: 400,
     height: 400,
     padding: 50
@@ -223,7 +253,7 @@ const grayscale = exports.grayscale = {
     }
   }, baseProps),
   stack: Object.assign({
-    colorScale: colors
+    colorScale
   }, baseProps),
   tooltip: {
     style: Object.assign({}, baseLabelStyles, {

package/lib/victory-theme/material.js

@@ -13,11 +13,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
 // *
@@ -55,6 +75,17 @@ const strokeDasharray = "10, 5";
 const strokeLinecap = "round";
 const strokeLinejoin = "round";
 const material = exports.material = {
+  palette: {
+    colors,
+    grayscale,
+    qualitative,
+    heatmap,
+    warm,
+    cool,
+    red,
+    green,
+    blue
+  },
   area: Object.assign({
     style: {
       data: {
@@ -187,7 +218,7 @@ const material = exports.material = {
     }
   }, baseProps),
   group: Object.assign({
-    colorScale: colors
+    colorScale
   }, baseProps),
   histogram: Object.assign({
     style: {
@@ -200,7 +231,7 @@ const material = exports.material = {
     }
   }, baseProps),
   legend: {
-    colorScale: colors,
+    colorScale,
     gutter: 10,
     orientation: "vertical",
     titleOrientation: "top",
@@ -226,7 +257,7 @@ const material = exports.material = {
     }
   }, baseProps),
   pie: Object.assign({
-    colorScale: colors,
+    colorScale,
     style: {
       data: {
         padding,
@@ -250,7 +281,7 @@ const material = exports.material = {
     }
   }, baseProps),
   stack: Object.assign({
-    colorScale: colors
+    colorScale
   }, baseProps),
   tooltip: {
     style: Object.assign({}, baseLabelStyles, {

package/lib/victory-theme/types.d.ts

@@ -59,7 +59,22 @@ export interface VictoryAxisCommonProps {
     tickValues?: any[];
 }
 export declare type VerticalAnchorType = "start" | "middle" | "end";
+declare type VictoryThemePaletteKeys = "blue" | "pink" | "teal" | "purple" | "green" | "orange" | "cyan" | "red" | "yellow";
+export declare type VictoryThemePalette = {
+    [key in VictoryThemePaletteKeys]?: string;
+};
 export interface VictoryThemeDefinition {
+    palette?: {
+        colors?: VictoryThemePalette;
+        grayscale?: string[];
+        qualitative?: string[];
+        heatmap?: string[];
+        warm?: string[];
+        cool?: string[];
+        red?: string[];
+        blue?: string[];
+        green?: string[];
+    };
     area?: {
         style?: {
             data?: VictoryStyleObject;
@@ -237,4 +252,5 @@ export interface VictoryThemeDefinition {
         };
     } & VictoryCommonThemeProps & VictoryDatableProps;
 }
+export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1,3 +1,4 @@
+import { VictoryThemeDefinition } from "../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
@@ -13,7 +14,8 @@ export declare const toTransformString: (obj: any, ...more: any[]) => any;
  * 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.
  */
-export declare function getColorScale(name: any): any;
+export declare function getColorScale(name?: string, theme?: VictoryThemeDefinition): string[];
 //# sourceMappingURL=style.d.ts.map