victory-core 37.2.0 → 37.3.1

package/es/victory-portal/victory-portal.js

@@ -1,6 +1,6 @@
 import _uniqueId from "lodash/uniqueId";
 import _defaults from "lodash/defaults";
-import React from "react";
+import React, { useState } from "react";
 import * as Log from "../victory-util/log";
 import * as Helpers from "../victory-util/helpers";
 import { usePortalContext } from "./portal-context";
@@ -12,7 +12,7 @@ export const VictoryPortal = initialProps => {
     ...defaultProps,
     ...initialProps
   };
-  const id = _uniqueId();
+  const [id] = useState(_uniqueId());
   const portalContext = usePortalContext();
   if (!portalContext) {
     const msg = "`renderInPortal` is not supported outside of `VictoryContainer`. " + "Component will be rendered in place";

package/es/victory-theme/clean.js

@@ -26,20 +26,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",
@@ -50,6 +46,7 @@ const blue = {
   "100": "#CFDFFF",
   "300": "#9CC7FF",
   "500": "#2D7FF9",
+  "700": "#0056B3",
   "900": "#2750AE"
 };
 const cyan = {
@@ -68,27 +65,28 @@ const green = {
   "100": "#D1F7C4",
   "300": "#93E088",
   "500": "#20C933",
+  "700": "#1B9B2A",
   "900": "#338A17"
 };
 const colors = {
   blue: blue["500"],
-  pink: pink["500"],
-  teal: teal["500"],
-  purple: purple["500"],
+  cyan: cyan["500"],
   green: green["500"],
+  yellow: yellow["500"],
   orange: orange["500"],
-  cyan: cyan["500"],
   red: red["500"],
-  yellow: yellow["500"]
+  purple: purple["500"],
+  teal: teal["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"]];
+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
@@ -103,7 +101,7 @@ const padding = 8;
 const baseProps = {
   width: 450,
   height: 300,
-  padding: 50,
+  padding: 60,
   colorScale
 };
 // *
@@ -147,7 +145,7 @@ export const clean = {
   area: Object.assign({
     style: {
       data: {
-        fill: blue["500"],
+        fill: defaultColor,
         strokeWidth: 2,
         fillOpacity: 0.5
       },
@@ -164,7 +162,7 @@ export const clean = {
         strokeLinejoin
       },
       axisLabel: Object.assign({}, centeredLabelStyles, {
-        padding,
+        padding: 35,
         stroke: "transparent"
       }),
       grid: {
@@ -229,7 +227,7 @@ export const clean = {
   bar: Object.assign({
     style: {
       data: {
-        fill: blue["500"],
+        fill: defaultColor,
         padding,
         strokeWidth: 1,
         fillOpacity: 0.5
@@ -268,7 +266,7 @@ export const clean = {
       }),
       q1: {
         padding,
-        fill: teal["500"],
+        fill: colorScale[0],
         rx: borderRadius,
         strokeWidth: 2
       },
@@ -277,7 +275,7 @@ export const clean = {
       }),
       q3: {
         padding,
-        fill: cyan["500"],
+        fill: colorScale[1],
         rx: borderRadius
       },
       q3Labels: Object.assign({}, baseLabelStyles, {
@@ -298,8 +296,8 @@ export const clean = {
       })
     },
     candleColors: {
-      positive: teal["500"],
-      negative: orange["500"]
+      positive: green["500"],
+      negative: red["500"]
     },
     wickStrokeWidth: 2
   }, baseProps),
@@ -365,7 +363,7 @@ export const clean = {
       data: {
         fill: "transparent",
         opacity: 1,
-        stroke: blue["500"],
+        stroke: defaultColor,
         strokeWidth: 2,
         strokeLinecap,
         strokeLinejoin
@@ -396,7 +394,7 @@ export const clean = {
   scatter: Object.assign({
     style: {
       data: {
-        fill: purple["500"],
+        fill: defaultColor,
         opacity: 1,
         stroke: "transparent",
         strokeWidth: 0
@@ -434,9 +432,8 @@ export const clean = {
     style: {
       data: {
         fill: blue["100"],
-        stroke: blue["500"],
-        strokeWidth: 2,
-        opacity: 0.4
+        stroke: defaultColor,
+        strokeWidth: 2
       },
       labels: Object.assign({}, baseLabelStyles, {
         padding: 5,

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { VictoryCommonThemeProps, VictoryDatableProps } from "../victory-util/common-props";
 import { NumberOrCallback, OrientationOrCallback, PaddingOrCallback, StringOrNumberOrCallback } from "../types/callbacks";
+import { DomainPropType } from "../types/prop-types";
 export declare type BlockProps = {
     top?: number;
     bottom?: number;
@@ -39,7 +40,7 @@ export interface VictoryAxisCommonProps {
     axisLabelComponent?: React.ReactElement;
     axisValue?: number | string | object | Date;
     dependentAxis?: boolean;
-    disableInlineStyles?: boolean;
+    domain?: DomainPropType;
     gridComponent?: React.ReactElement;
     invertAxis?: boolean;
     style?: {

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

@@ -17,7 +17,7 @@ export declare function getAllEvents(props: 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, theme: any): any;
-export declare function getStringsFromCategories(childComponents: any, axis: any): any[];
+export declare function getStringsFromChildrenCategories(childComponents: any, axis: any): any[];
 export declare function getStringsFromData(childComponents: any): {
     x: number[];
     y: number[];

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";
@@ -311,15 +310,13 @@ export function getChildStyle(child, index, calculatedProps, theme) {
     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);
 }
@@ -354,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) {
@@ -371,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/victory-portal/victory-portal.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 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");
@@ -21,7 +21,7 @@ const VictoryPortal = initialProps => {
     ...defaultProps,
     ...initialProps
   };
-  const id = (0, _uniqueId2.default)();
+  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,27 +71,28 @@ const green = {
   "100": "#D1F7C4",
   "300": "#93E088",
   "500": "#20C933",
+  "700": "#1B9B2A",
   "900": "#338A17"
 };
 const colors = {
   blue: blue["500"],
-  pink: pink["500"],
-  teal: teal["500"],
-  purple: purple["500"],
+  cyan: cyan["500"],
   green: green["500"],
+  yellow: yellow["500"],
   orange: orange["500"],
-  cyan: cyan["500"],
   red: red["500"],
-  yellow: yellow["500"]
+  purple: purple["500"],
+  teal: teal["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"]];
+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
@@ -109,7 +107,7 @@ const padding = 8;
 const baseProps = {
   width: 450,
   height: 300,
-  padding: 50,
+  padding: 60,
   colorScale
 };
 // *
@@ -153,7 +151,7 @@ const clean = exports.clean = {
   area: Object.assign({
     style: {
       data: {
-        fill: blue["500"],
+        fill: defaultColor,
         strokeWidth: 2,
         fillOpacity: 0.5
       },
@@ -170,7 +168,7 @@ const clean = exports.clean = {
         strokeLinejoin
       },
       axisLabel: Object.assign({}, centeredLabelStyles, {
-        padding,
+        padding: 35,
         stroke: "transparent"
       }),
       grid: {
@@ -235,7 +233,7 @@ const clean = exports.clean = {
   bar: Object.assign({
     style: {
       data: {
-        fill: blue["500"],
+        fill: defaultColor,
         padding,
         strokeWidth: 1,
         fillOpacity: 0.5
@@ -274,7 +272,7 @@ const clean = exports.clean = {
       }),
       q1: {
         padding,
-        fill: teal["500"],
+        fill: colorScale[0],
         rx: borderRadius,
         strokeWidth: 2
       },
@@ -283,7 +281,7 @@ const clean = exports.clean = {
       }),
       q3: {
         padding,
-        fill: cyan["500"],
+        fill: colorScale[1],
         rx: borderRadius
       },
       q3Labels: Object.assign({}, baseLabelStyles, {
@@ -304,8 +302,8 @@ const clean = exports.clean = {
       })
     },
     candleColors: {
-      positive: teal["500"],
-      negative: orange["500"]
+      positive: green["500"],
+      negative: red["500"]
     },
     wickStrokeWidth: 2
   }, baseProps),
@@ -371,7 +369,7 @@ const clean = exports.clean = {
       data: {
         fill: "transparent",
         opacity: 1,
-        stroke: blue["500"],
+        stroke: defaultColor,
         strokeWidth: 2,
         strokeLinecap,
         strokeLinejoin
@@ -402,7 +400,7 @@ const clean = exports.clean = {
   scatter: Object.assign({
     style: {
       data: {
-        fill: purple["500"],
+        fill: defaultColor,
         opacity: 1,
         stroke: "transparent",
         strokeWidth: 0
@@ -440,9 +438,8 @@ const clean = exports.clean = {
     style: {
       data: {
         fill: blue["100"],
-        stroke: blue["500"],
-        strokeWidth: 2,
-        opacity: 0.4
+        stroke: defaultColor,
+        strokeWidth: 2
       },
       labels: Object.assign({}, baseLabelStyles, {
         padding: 5,

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { VictoryCommonThemeProps, VictoryDatableProps } from "../victory-util/common-props";
 import { NumberOrCallback, OrientationOrCallback, PaddingOrCallback, StringOrNumberOrCallback } from "../types/callbacks";
+import { DomainPropType } from "../types/prop-types";
 export declare type BlockProps = {
     top?: number;
     bottom?: number;
@@ -39,7 +40,7 @@ export interface VictoryAxisCommonProps {
     axisLabelComponent?: React.ReactElement;
     axisValue?: number | string | object | Date;
     dependentAxis?: boolean;
-    disableInlineStyles?: boolean;
+    domain?: DomainPropType;
     gridComponent?: React.ReactElement;
     invertAxis?: boolean;
     style?: {

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

@@ -17,7 +17,7 @@ export declare function getAllEvents(props: 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, theme: any): any;
-export declare function getStringsFromCategories(childComponents: any, axis: 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"));
@@ -336,15 +335,13 @@ function getChildStyle(child, index, calculatedProps, theme) {
     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);
 }
@@ -379,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) {
@@ -396,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.2.0",
+  "version": "37.3.1",
   "description": "Victory Core",
   "keywords": [
     "data visualization",
@@ -22,7 +22,7 @@
   "dependencies": {
     "lodash": "^4.17.21",
     "react-fast-compare": "^3.2.0",
-    "victory-vendor": "37.2.0"
+    "victory-vendor": "37.3.1"
   },
   "peerDependencies": {
     "react": ">=16.6.0"

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

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