victory-core 37.1.1 → 37.2.0

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;
@@ -152,6 +167,7 @@ export interface VictoryThemeDefinition {
         offsetY?: number;
         orientation?: OrientationTypes;
     } & VictoryCommonThemeProps;
+    label?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
     legend?: {
         gutter?: number | BlockProps;
         rowGutter?: number | BlockProps;
@@ -236,4 +252,5 @@ export interface VictoryThemeDefinition {
         };
     } & VictoryCommonThemeProps & VictoryDatableProps;
 }
+export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -2,5 +2,6 @@ export * from "./types";
 export declare const VictoryTheme: {
     grayscale: import("./types").VictoryThemeDefinition;
     material: import("./types").VictoryThemeDefinition;
+    clean: import("./types").VictoryThemeDefinition;
 };
 //# sourceMappingURL=victory-theme.d.ts.map

package/lib/victory-theme/victory-theme.js

@@ -9,6 +9,7 @@ var _exportNames = {
 exports.VictoryTheme = void 0;
 var _grayscale = require("./grayscale");
 var _material = require("./material");
+var _clean = require("./clean");
 var _types = require("./types");
 Object.keys(_types).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -23,5 +24,6 @@ Object.keys(_types).forEach(function (key) {
 });
 const VictoryTheme = exports.VictoryTheme = {
   grayscale: _grayscale.grayscale,
-  material: _material.material
+  material: _material.material,
+  clean: _clean.clean
 };

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

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/textsize.js

@@ -12,6 +12,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 // Based on measuring specific character widths
 // as in the following example https://bl.ocks.org/tophtucker/62f93a4658387bb61e4510c37e2e97cf
+// For new fonts: pull gist, open index.html locally, add font files (if not generic), enter font name in `font-family` input
 // prettier-ignore
 const fonts = {
   "American Typewriter": {
@@ -70,6 +71,10 @@ const fonts = {
     widths: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.2359375, 0.2234375, 0.3921875, 0.7125, 0.49375, 0.8859375, 0.771875, 0.2125, 0.3078125, 0.309375, 0.375, 0.4234375, 0.234375, 0.3125, 0.234375, 0.3, 0.5828125, 0.365625, 0.434375, 0.3921875, 0.5234375, 0.3984375, 0.5125, 0.4328125, 0.46875, 0.5125, 0.234375, 0.234375, 0.515625, 0.4234375, 0.515625, 0.340625, 0.7609375, 0.7359375, 0.6359375, 0.721875, 0.8125, 0.6375, 0.5875, 0.8078125, 0.853125, 0.4296875, 0.503125, 0.78125, 0.609375, 0.9609375, 0.8515625, 0.8140625, 0.6125, 0.8140625, 0.71875, 0.49375, 0.7125, 0.76875, 0.771875, 1.125, 0.7765625, 0.7734375, 0.65625, 0.321875, 0.3078125, 0.321875, 0.3546875, 0.5, 0.3375, 0.446875, 0.5359375, 0.45, 0.5296875, 0.4546875, 0.425, 0.4921875, 0.54375, 0.2671875, 0.240625, 0.5390625, 0.25, 0.815625, 0.5375, 0.5234375, 0.5390625, 0.5421875, 0.365625, 0.36875, 0.35625, 0.5171875, 0.5015625, 0.75, 0.5, 0.509375, 0.44375, 0.2421875, 0.14375, 0.2421875, 0.35],
     avg: 0.5116447368421051
   },
+  "Inter": {
+    widths: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.2796875, 0.2890625, 0.4671875, 0.634375, 0.6421875, 0.9828125, 0.6453125, 0.3, 0.365625, 0.365625, 0.5015625, 0.6625, 0.2890625, 0.4609375, 0.2890625, 0.3609375, 0.63125, 0.4078125, 0.6109375, 0.61875, 0.646875, 0.59375, 0.6203125, 0.5671875, 0.61875, 0.6203125, 0.2890625, 0.303125, 0.6625, 0.6625, 0.6625, 0.5125, 0.9671875, 0.690625, 0.6546875, 0.73125, 0.721875, 0.6015625, 0.590625, 0.746875, 0.74375, 0.26875, 0.571875, 0.671875, 0.565625, 0.9046875, 0.7546875, 0.765625, 0.6390625, 0.765625, 0.64375, 0.6421875, 0.646875, 0.7453125, 0.690625, 0.9859375, 0.6828125, 0.6796875, 0.6296875, 0.365625, 0.3609375, 0.365625, 0.471875, 0.45625, 0.3234375, 0.5625, 0.6125, 0.571875, 0.6125, 0.584375, 0.3703125, 0.6140625, 0.5921875, 0.2421875, 0.2548828125, 0.55, 0.2421875, 0.8765625, 0.5921875, 0.6, 0.6125, 0.6125, 0.3765625, 0.528125, 0.328125, 0.5921875, 0.5625, 0.81875, 0.546875, 0.5625, 0.553125, 0.4265625, 0.3328125, 0.4265625, 0.6625],
+    avg: 0.5624362664473683
+  },
   "Montserrat": {
     widths: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.2625, 0.2609375, 0.3734375, 0.696875, 0.615625, 0.8296875, 0.6703125, 0.203125, 0.3296875, 0.3296875, 0.3875, 0.575, 0.2125, 0.3828125, 0.2125, 0.3953125, 0.6625, 0.3625, 0.56875, 0.5640625, 0.6625, 0.5671875, 0.609375, 0.5890625, 0.6390625, 0.609375, 0.2125, 0.2125, 0.575, 0.575, 0.575, 0.5671875, 1.034375, 0.7171875, 0.7546875, 0.7203125, 0.8265625, 0.6703125, 0.634375, 0.7734375, 0.8140625, 0.303125, 0.5078125, 0.7125, 0.5890625, 0.95625, 0.8140625, 0.8390625, 0.71875, 0.8390625, 0.7234375, 0.615625, 0.575, 0.7921875, 0.6984375, 1.1125, 0.65625, 0.6359375, 0.6515625, 0.31875, 0.396875, 0.31875, 0.5765625, 0.5, 0.6, 0.590625, 0.678125, 0.5640625, 0.678125, 0.6046875, 0.375, 0.6875, 0.678125, 0.2703125, 0.365625, 0.6015625, 0.2703125, 1.0625, 0.678125, 0.628125, 0.678125, 0.678125, 0.4015625, 0.4890625, 0.40625, 0.6734375, 0.5421875, 0.8796875, 0.534375, 0.5671875, 0.5125, 0.334375, 0.2953125, 0.334375, 0.575],
     avg: 0.571792763157895

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

@@ -14,9 +14,9 @@ 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 getChildStyle(child: any, index: any, calculatedProps: any, theme: any): any;
 export declare function getStringsFromCategories(childComponents: any, axis: any): any[];
 export declare function getStringsFromData(childComponents: any): {
     x: number[];

package/lib/victory-util/wrapper.js

@@ -279,7 +279,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 +298,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 +317,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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "victory-core",
-  "version": "37.1.1",
+  "version": "37.2.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.1"
+    "victory-vendor": "37.2.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 { 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 = uniqueId();
   const portalContext = usePortalContext();
 
   if (!portalContext) {