victory-core 37.2.0 → 37.3.0

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,29 +67,55 @@ 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
@@ -108,7 +131,7 @@ const padding = 8;
 const baseProps = {
   width: 450,
   height: 300,
-  padding: 50,
+  padding: 60,
   colorScale,
 };
 // *
@@ -155,7 +178,7 @@ export const clean: VictoryThemeDefinition = {
     {
       style: {
         data: {
-          fill: blue["500"],
+          fill: defaultColor,
           strokeWidth: 2,
           fillOpacity: 0.5,
         },
@@ -175,7 +198,7 @@ export const clean: VictoryThemeDefinition = {
           strokeLinejoin,
         },
         axisLabel: Object.assign({}, centeredLabelStyles, {
-          padding,
+          padding: 35,
           stroke: "transparent",
         }),
         grid: {
@@ -243,7 +266,7 @@ export const clean: VictoryThemeDefinition = {
     {
       style: {
         data: {
-          fill: blue["500"],
+          fill: defaultColor,
           padding,
           strokeWidth: 1,
           fillOpacity: 0.5,
@@ -263,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, strokeWidth: 2 },
+        q1: { padding, fill: colorScale[0], rx: borderRadius, strokeWidth: 2 },
         q1Labels: Object.assign({}, baseLabelStyles, { padding: 3 }),
-        q3: { padding, fill: cyan["500"], rx: borderRadius },
+        q3: { padding, fill: colorScale[1], rx: borderRadius },
         q3Labels: Object.assign({}, baseLabelStyles, { padding: 3 }),
       },
       boxWidth: 20,
@@ -283,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,
     },
@@ -350,7 +373,7 @@ export const clean: VictoryThemeDefinition = {
         data: {
           fill: "transparent",
           opacity: 1,
-          stroke: blue["500"],
+          stroke: defaultColor,
           strokeWidth: 2,
           strokeLinecap,
           strokeLinejoin,
@@ -387,7 +410,7 @@ export const clean: VictoryThemeDefinition = {
     {
       style: {
         data: {
-          fill: purple["500"],
+          fill: defaultColor,
           opacity: 1,
           stroke: "transparent",
           strokeWidth: 0,
@@ -426,9 +449,8 @@ export const clean: VictoryThemeDefinition = {
       style: {
         data: {
           fill: blue["100"],
-          stroke: blue["500"],
+          stroke: defaultColor,
           strokeWidth: 2,
-          opacity: 0.4,
         },
         labels: Object.assign({}, baseLabelStyles, {
           padding: 5,

package/src/victory-util/wrapper.tsx

@@ -356,19 +356,13 @@ export function getChildStyle(child, index, calculatedProps, theme) {
   };
 }
 
-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);
 }
@@ -417,15 +411,14 @@ export function getCategoryAndAxisStringsFromChildren(
   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());
 }
 
@@ -445,15 +438,9 @@ export function getStringsFromChildren(props, childComponents) {
 
 export function getCategories(props, childComponents, allStrings?) {
   const xPropCategories =
-    props.categories && !Array.isArray(props.categories)
-      ? props.categories.x
-      : props.categories;
-
+    props.categories && Data.getStringsFromCategories(props, "x");
   const yPropCategories =
-    props.categories && !Array.isArray(props.categories)
-      ? props.categories.y
-      : props.categories;
-
+    props.categories && Data.getStringsFromCategories(props, "y");
   const fallbackRequired = !xPropCategories || !yPropCategories;
 
   const fallbackProps = fallbackRequired