victory-core 37.1.1 → 37.2.0

package/es/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/es/victory-util/style.js

@@ -1,3 +1,5 @@
+import { VictoryTheme } 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
@@ -34,18 +36,35 @@ export 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.
  */
-export function getColorScale(name) {
+export function getColorScale(name, theme) {
+  if (theme === void 0) {
+    theme = 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/es/victory-util/textsize.js

@@ -3,6 +3,7 @@ import _defaults from "lodash/defaults"; // http://www.pearsonified.com/2012/01/
 /* eslint-disable no-magic-numbers */
 // 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": {
@@ -61,6 +62,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/es/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/es/victory-util/wrapper.js

@@ -254,7 +254,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 +273,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 +292,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

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,6 +4,7 @@ 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 Log = _interopRequireWildcard(require("../victory-util/log"));
@@ -20,7 +21,7 @@ const VictoryPortal = initialProps => {
     ...defaultProps,
     ...initialProps
   };
-  const id = _react.default.useId();
+  const id = (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.d.ts

@@ -0,0 +1,3 @@
+import { VictoryThemeDefinition } from "./victory-theme";
+export declare const clean: VictoryThemeDefinition;
+//# sourceMappingURL=clean.d.ts.map

package/lib/victory-theme/clean.js

@@ -0,0 +1,463 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.clean = void 0;
+// *
+// * Colors
+// *
+
+const gray = {
+  white: "#FFFFFF",
+  "50": "#FAFAFA",
+  "100": "#F2F2F2",
+  "200": "#E8E8E8",
+  "300": "#E0E0E0",
+  "400": "#D1D1D1",
+  "500": "#757575",
+  "600": "#5C5C5C",
+  "700": "#424242",
+  "800": "#333333",
+  "900": "#292929",
+  black: "#0F0F0F"
+};
+const yellow = {
+  "100": "#FFEAB6",
+  "300": "#FFD66E",
+  "500": "#FCB400",
+  "900": "#B87503"
+};
+const orange = {
+  "100": "#FEE2D5",
+  "300": "#FFA981",
+  "500": "#FF6F2C",
+  "900": "#D74D26"
+};
+const red = {
+  "100": "#FFDCE5",
+  "300": "#FF9EB7",
+  "500": "#F82B60",
+  "900": "#BA1E45"
+};
+const pink = {
+  "100": "#FFDAF6",
+  "300": "#F99DE2",
+  "500": "#FF08C2",
+  "900": "#B2158B"
+};
+const purple = {
+  "100": "#EDE3FE",
+  "300": "#CDB0FF",
+  "500": "#8B46FF",
+  "900": "#6B1CB0"
+};
+const blue = {
+  "100": "#CFDFFF",
+  "300": "#9CC7FF",
+  "500": "#2D7FF9",
+  "900": "#2750AE"
+};
+const cyan = {
+  "100": "#D0F0FD",
+  "300": "#77D1F3",
+  "500": "#18BFFF",
+  "900": "#0B76B7"
+};
+const teal = {
+  "100": "#C2F5E9",
+  "300": "#72DDC3",
+  "500": "#20D9D2",
+  "900": "#06A09B"
+};
+const green = {
+  "100": "#D1F7C4",
+  "300": "#93E088",
+  "500": "#20C933",
+  "900": "#338A17"
+};
+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
+// *
+const sansSerif = "'Inter', 'Helvetica Neue', 'Seravek', 'Helvetica', sans-serif";
+const letterSpacing = "normal";
+const fontSize = 12;
+// *
+// * Layout
+// *
+const padding = 8;
+const baseProps = {
+  width: 450,
+  height: 300,
+  padding: 50,
+  colorScale
+};
+// *
+// * Labels
+// *
+const baseLabelStyles = {
+  fontFamily: sansSerif,
+  fontSize,
+  fontWeight: 300,
+  letterSpacing,
+  padding,
+  fill: gray["900"],
+  stroke: "transparent"
+};
+const centeredLabelStyles = Object.assign({
+  textAnchor: "middle"
+}, baseLabelStyles);
+
+// *
+// * Strokes
+// *
+const strokeDasharray = "10, 5";
+const strokeLinecap = "round";
+const strokeLinejoin = "round";
+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: blue["500"],
+        strokeWidth: 2,
+        fillOpacity: 0.5
+      },
+      labels: baseLabelStyles
+    }
+  }, baseProps),
+  axis: Object.assign({
+    style: {
+      axis: {
+        fill: "transparent",
+        stroke: gray["500"],
+        strokeWidth: 1,
+        strokeLinecap,
+        strokeLinejoin
+      },
+      axisLabel: Object.assign({}, centeredLabelStyles, {
+        padding,
+        stroke: "transparent"
+      }),
+      grid: {
+        fill: "none",
+        stroke: "none",
+        painterEvents: "painted"
+      },
+      ticks: {
+        fill: "transparent",
+        size: 5,
+        stroke: "transparent"
+      },
+      tickLabels: baseLabelStyles
+    }
+  }, baseProps),
+  polarAxis: Object.assign({
+    style: {
+      axis: {
+        stroke: gray["500"]
+      },
+      grid: {
+        stroke: gray["400"],
+        strokeDasharray,
+        strokeLinecap,
+        strokeLinejoin,
+        pointerEvents: "painted"
+      },
+      ticks: {
+        fill: "transparent",
+        size: 5,
+        stroke: gray["400"],
+        strokeWidth: 1,
+        strokeLinecap,
+        strokeLinejoin
+      },
+      tickLabels: baseLabelStyles
+    }
+  }),
+  polarDependentAxis: Object.assign({
+    style: {
+      axis: {
+        stroke: gray["500"]
+      },
+      grid: {
+        stroke: gray["400"],
+        strokeDasharray,
+        strokeLinecap,
+        strokeLinejoin,
+        pointerEvents: "painted"
+      },
+      ticks: {
+        fill: "transparent",
+        size: 5,
+        stroke: gray["300"],
+        strokeWidth: 1,
+        strokeLinecap,
+        strokeLinejoin
+      },
+      tickLabels: baseLabelStyles
+    }
+  }),
+  bar: Object.assign({
+    style: {
+      data: {
+        fill: blue["500"],
+        padding,
+        strokeWidth: 1,
+        fillOpacity: 0.5
+      },
+      labels: baseLabelStyles
+    },
+    cornerRadius: {
+      top: borderRadius
+    }
+  }, baseProps),
+  boxplot: Object.assign({
+    style: {
+      max: {
+        padding,
+        stroke: gray["400"],
+        strokeWidth: 2
+      },
+      maxLabels: Object.assign({}, baseLabelStyles, {
+        padding: 3
+      }),
+      median: {
+        padding,
+        stroke: gray.white,
+        strokeWidth: 2
+      },
+      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,
+        strokeWidth: 2
+      },
+      q1Labels: Object.assign({}, baseLabelStyles, {
+        padding: 3
+      }),
+      q3: {
+        padding,
+        fill: cyan["500"],
+        rx: borderRadius
+      },
+      q3Labels: Object.assign({}, baseLabelStyles, {
+        padding: 3
+      })
+    },
+    boxWidth: 20
+  }, baseProps),
+  candlestick: Object.assign({
+    style: {
+      data: {
+        stroke: gray["300"],
+        strokeWidth: 0,
+        rx: borderRadius
+      },
+      labels: Object.assign({}, baseLabelStyles, {
+        padding: 5
+      })
+    },
+    candleColors: {
+      positive: teal["500"],
+      negative: orange["500"]
+    },
+    wickStrokeWidth: 2
+  }, baseProps),
+  chart: baseProps,
+  errorbar: Object.assign({
+    borderWidth: 8,
+    style: {
+      data: {
+        fill: "transparent",
+        opacity: 1,
+        stroke: gray["700"],
+        strokeWidth: 2,
+        strokeLinecap
+      },
+      labels: baseLabelStyles
+    }
+  }, baseProps),
+  group: Object.assign({
+    colorScale
+  }, baseProps),
+  histogram: Object.assign({
+    style: {
+      data: {
+        fill: cyan["500"],
+        fillOpacity: 0.5
+      },
+      labels: baseLabelStyles
+    },
+    binSpacing: 4,
+    cornerRadius: {
+      top: borderRadius
+    }
+  }, baseProps),
+  label: baseLabelStyles,
+  legend: {
+    colorScale,
+    gutter: 24,
+    borderPadding: 10,
+    orientation: "horizontal",
+    titleOrientation: "top",
+    centerTitle: true,
+    style: {
+      data: {
+        type: "circle"
+      },
+      labels: {
+        ...baseLabelStyles,
+        fontSize: 12
+      },
+      title: Object.assign({}, baseLabelStyles, {
+        padding,
+        fontSize: 16
+      }),
+      border: {
+        stroke: gray["200"],
+        strokeWidth: 2,
+        padding: 16
+      }
+    }
+  },
+  line: Object.assign({
+    style: {
+      data: {
+        fill: "transparent",
+        opacity: 1,
+        stroke: blue["500"],
+        strokeWidth: 2,
+        strokeLinecap,
+        strokeLinejoin
+      },
+      labels: baseLabelStyles
+    }
+  }, baseProps),
+  pie: Object.assign({
+    style: {
+      parent: {
+        backgroundColor: gray.white
+      },
+      data: {
+        padding,
+        stroke: gray.white,
+        strokeWidth: 1
+      },
+      labels: {
+        ...baseLabelStyles,
+        padding: 20,
+        fill: gray["600"],
+        fontSize: 10
+      }
+    },
+    colorScale,
+    cornerRadius: borderRadius
+  }, baseProps),
+  scatter: Object.assign({
+    style: {
+      data: {
+        fill: purple["500"],
+        opacity: 1,
+        stroke: "transparent",
+        strokeWidth: 0
+      },
+      labels: {
+        ...baseLabelStyles,
+        padding: 20
+      }
+    }
+  }, baseProps),
+  stack: Object.assign({
+    colorScale
+  }, baseProps),
+  tooltip: {
+    style: Object.assign({}, baseLabelStyles, {
+      padding: 0,
+      pointerEvents: "none"
+    }),
+    flyoutStyle: {
+      stroke: gray["300"],
+      strokeWidth: 2,
+      fill: gray.white,
+      pointerEvents: "none"
+    },
+    flyoutPadding: {
+      top: 8,
+      bottom: 8,
+      left: 16,
+      right: 16
+    },
+    cornerRadius: borderRadius,
+    pointerLength: 4
+  },
+  voronoi: Object.assign({
+    style: {
+      data: {
+        fill: blue["100"],
+        stroke: blue["500"],
+        strokeWidth: 2,
+        opacity: 0.4
+      },
+      labels: Object.assign({}, baseLabelStyles, {
+        padding: 5,
+        pointerEvents: "none"
+      }),
+      flyout: {
+        stroke: gray["900"],
+        strokeWidth: 1,
+        fill: gray["100"],
+        pointerEvents: "none"
+      },
+      padding: {
+        left: 2,
+        bottom: 2
+      }
+    }
+  }, baseProps)
+};