victory-core 37.1.2 → 37.2.0

package/src/victory-theme/clean.tsx

@@ -73,17 +73,27 @@ const green = {
   "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"],
+  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
 // *
@@ -99,7 +109,7 @@ const baseProps = {
   width: 450,
   height: 300,
   padding: 50,
-  colorScale: colors,
+  colorScale,
 };
 // *
 // * Labels
@@ -130,11 +140,24 @@ const borderRadius = 1;
 // * Theme
 // *
 export const clean: VictoryThemeDefinition = {
+  palette: {
+    colors,
+    grayscale,
+    qualitative: colorScale,
+    heatmap,
+    warm,
+    cool,
+    red: redPalette,
+    green: greenPalette,
+    blue: bluePalette,
+  },
   area: Object.assign(
     {
       style: {
         data: {
-          fill: cyan["500"],
+          fill: blue["500"],
+          strokeWidth: 2,
+          fillOpacity: 0.5,
         },
         labels: baseLabelStyles,
       },
@@ -146,7 +169,7 @@ export const clean: VictoryThemeDefinition = {
       style: {
         axis: {
           fill: "transparent",
-          stroke: gray["300"],
+          stroke: gray["500"],
           strokeWidth: 1,
           strokeLinecap,
           strokeLinejoin,
@@ -173,10 +196,10 @@ export const clean: VictoryThemeDefinition = {
   polarAxis: Object.assign({
     style: {
       axis: {
-        stroke: gray["300"],
+        stroke: gray["500"],
       },
       grid: {
-        stroke: gray["200"],
+        stroke: gray["400"],
         strokeDasharray,
         strokeLinecap,
         strokeLinejoin,
@@ -185,7 +208,7 @@ export const clean: VictoryThemeDefinition = {
       ticks: {
         fill: "transparent",
         size: 5,
-        stroke: gray["200"],
+        stroke: gray["400"],
         strokeWidth: 1,
         strokeLinecap,
         strokeLinejoin,
@@ -196,10 +219,10 @@ export const clean: VictoryThemeDefinition = {
   polarDependentAxis: Object.assign({
     style: {
       axis: {
-        stroke: gray["300"],
+        stroke: gray["500"],
       },
       grid: {
-        stroke: gray["200"],
+        stroke: gray["400"],
         strokeDasharray,
         strokeLinecap,
         strokeLinejoin,
@@ -208,7 +231,7 @@ export const clean: VictoryThemeDefinition = {
       ticks: {
         fill: "transparent",
         size: 5,
-        stroke: gray["200"],
+        stroke: gray["300"],
         strokeWidth: 1,
         strokeLinecap,
         strokeLinejoin,
@@ -222,7 +245,8 @@ export const clean: VictoryThemeDefinition = {
         data: {
           fill: blue["500"],
           padding,
-          strokeWidth: 0,
+          strokeWidth: 1,
+          fillOpacity: 0.5,
         },
         labels: baseLabelStyles,
       },
@@ -239,9 +263,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 },
+        q1: { padding, fill: teal["500"], rx: borderRadius, strokeWidth: 2 },
         q1Labels: Object.assign({}, baseLabelStyles, { padding: 3 }),
-        q3: { padding, fill: teal["500"], rx: borderRadius },
+        q3: { padding, fill: cyan["500"], rx: borderRadius },
         q3Labels: Object.assign({}, baseLabelStyles, { padding: 3 }),
       },
       boxWidth: 20,
@@ -285,7 +309,7 @@ export const clean: VictoryThemeDefinition = {
   ),
   group: Object.assign(
     {
-      colorScale: colors,
+      colorScale,
     },
     baseProps,
   ),
@@ -294,8 +318,7 @@ export const clean: VictoryThemeDefinition = {
       style: {
         data: {
           fill: cyan["500"],
-          stroke: "transparent",
-          strokeWidth: 0,
+          fillOpacity: 0.5,
         },
         labels: baseLabelStyles,
       },
@@ -306,16 +329,18 @@ export const clean: VictoryThemeDefinition = {
   ),
   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 },
-      title: Object.assign({}, baseLabelStyles, { padding, fontSize: 20 }),
+      labels: { ...baseLabelStyles, fontSize: 12 },
+      title: Object.assign({}, baseLabelStyles, { padding, fontSize: 16 }),
       border: { stroke: gray["200"], strokeWidth: 2, padding: 16 },
     },
   },
@@ -325,7 +350,7 @@ export const clean: VictoryThemeDefinition = {
         data: {
           fill: "transparent",
           opacity: 1,
-          stroke: pink["500"],
+          stroke: blue["500"],
           strokeWidth: 2,
           strokeLinecap,
           strokeLinejoin,
@@ -338,14 +363,22 @@ export const clean: VictoryThemeDefinition = {
   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,
@@ -359,14 +392,17 @@ export const clean: VictoryThemeDefinition = {
           stroke: "transparent",
           strokeWidth: 0,
         },
-        labels: baseLabelStyles,
+        labels: {
+          ...baseLabelStyles,
+          padding: 20,
+        },
       },
     },
     baseProps,
   ),
   stack: Object.assign(
     {
-      colorScale: colors,
+      colorScale,
     },
     baseProps,
   ),
@@ -376,7 +412,7 @@ export const clean: VictoryThemeDefinition = {
       pointerEvents: "none",
     }),
     flyoutStyle: {
-      stroke: gray["500"],
+      stroke: gray["300"],
       strokeWidth: 2,
       fill: gray.white,
       pointerEvents: "none",
@@ -389,9 +425,10 @@ export const clean: VictoryThemeDefinition = {
     {
       style: {
         data: {
-          fill: red["100"],
-          stroke: red["500"],
+          fill: blue["100"],
+          stroke: blue["500"],
           strokeWidth: 2,
+          opacity: 0.4,
         },
         labels: Object.assign({}, baseLabelStyles, {
           padding: 5,

package/src/victory-theme/grayscale.tsx

@@ -3,7 +3,19 @@ import { VictoryThemeDefinition } from "./types";
 // *
 // * Colors
 // *
-const colors = [
+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",
@@ -15,6 +27,26 @@ const colors = [
 
 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
 // *
@@ -28,7 +60,7 @@ const baseProps = {
   width: 450,
   height: 300,
   padding: 50,
-  colorScale: colors,
+  colorScale,
 };
 // *
 // * Labels
@@ -53,6 +85,17 @@ const strokeLinecap = "round";
 const strokeLinejoin = "round";
 
 export const grayscale: VictoryThemeDefinition = {
+  palette: {
+    colors,
+    grayscale: colorScale,
+    qualitative,
+    heatmap,
+    warm,
+    cool,
+    red,
+    green,
+    blue,
+  },
   area: Object.assign(
     {
       style: {
@@ -156,7 +199,7 @@ export const grayscale: VictoryThemeDefinition = {
   ),
   group: Object.assign(
     {
-      colorScale: colors,
+      colorScale,
     },
     baseProps,
   ),
@@ -174,7 +217,7 @@ export const grayscale: VictoryThemeDefinition = {
     baseProps,
   ),
   legend: {
-    colorScale: colors,
+    colorScale,
     gutter: 10,
     orientation: "vertical",
     titleOrientation: "top",
@@ -208,7 +251,7 @@ export const grayscale: VictoryThemeDefinition = {
       },
       labels: Object.assign({}, baseLabelStyles, { padding: 20 }),
     },
-    colorScale: colors,
+    colorScale,
     width: 400,
     height: 400,
     padding: 50,
@@ -228,7 +271,7 @@ export const grayscale: VictoryThemeDefinition = {
   ),
   stack: Object.assign(
     {
-      colorScale: colors,
+      colorScale,
     },
     baseProps,
   ),

package/src/victory-theme/material.tsx

@@ -1,4 +1,4 @@
-import { VictoryThemeDefinition } from "./types";
+import { VictoryThemeDefinition, VictoryThemePalette } from "./types";
 
 // *
 // * Colors
@@ -9,7 +9,7 @@ const lime300 = "#DCE775";
 const lightGreen500 = "#8BC34A";
 const teal700 = "#00796B";
 const cyan900 = "#006064";
-const colors = [
+const colorScale = [
   deepOrange600,
   yellow200,
   lime300,
@@ -21,6 +21,39 @@ const blueGrey50 = "#ECEFF1";
 const blueGrey300 = "#90A4AE";
 const blueGrey700 = "#455A64";
 const grey900 = "#212121";
+
+const colors: VictoryThemePalette = {
+  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
 // *
@@ -61,6 +94,17 @@ const strokeLinecap = "round";
 const strokeLinejoin = "round";
 
 export const material: VictoryThemeDefinition = {
+  palette: {
+    colors,
+    grayscale,
+    qualitative,
+    heatmap,
+    warm,
+    cool,
+    red,
+    green,
+    blue,
+  },
   area: Object.assign(
     {
       style: {
@@ -182,7 +226,7 @@ export const material: VictoryThemeDefinition = {
   ),
   group: Object.assign(
     {
-      colorScale: colors,
+      colorScale,
     },
     baseProps,
   ),
@@ -200,7 +244,7 @@ export const material: VictoryThemeDefinition = {
     baseProps,
   ),
   legend: {
-    colorScale: colors,
+    colorScale,
     gutter: 10,
     orientation: "vertical",
     titleOrientation: "top",
@@ -228,7 +272,7 @@ export const material: VictoryThemeDefinition = {
   ),
   pie: Object.assign(
     {
-      colorScale: colors,
+      colorScale,
       style: {
         data: {
           padding,
@@ -256,7 +300,7 @@ export const material: VictoryThemeDefinition = {
   ),
   stack: Object.assign(
     {
-      colorScale: colors,
+      colorScale,
     },
     baseProps,
   ),

package/src/victory-theme/types.ts

@@ -72,7 +72,33 @@ export interface VictoryAxisCommonProps {
 export type VerticalAnchorType = "start" | "middle" | "end";
 // #region Victory Theme
 // Note: Many SVG attributes are missed in CSSProperties interface
+type VictoryThemePaletteKeys =
+  | "blue"
+  | "pink"
+  | "teal"
+  | "purple"
+  | "green"
+  | "orange"
+  | "cyan"
+  | "red"
+  | "yellow";
+
+export 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;

package/src/victory-util/style.ts

@@ -1,3 +1,8 @@
+import {
+  VictoryTheme,
+  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
@@ -33,29 +38,39 @@ export const toTransformString = function (obj, ...more) {
  * 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) {
-  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"],
+export function getColorScale(
+  name?: string,
+  theme: VictoryThemeDefinition = VictoryTheme.material,
+) {
+  const {
+    palette: {
+      grayscale = ["#cccccc", "#969696", "#636363", "#252525"],
+      qualitative = [],
+      heatmap = [],
+      warm = [],
+      cool = [],
+      red = [],
+      blue = [],
+      green = [],
+    } = {},
+  } = theme;
+
+  const scales: Record<string, string[]> = {
+    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/src/victory-util/wrapper.tsx

@@ -298,7 +298,8 @@ 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 } = calculatedProps;
   let { colorScale, color } = calculatedProps;
@@ -313,7 +314,7 @@ export function getColor(calculatedProps, child, index) {
   }
   const colors = Array.isArray(colorScale)
     ? colorScale
-    : Style.getColorScale(colorScale);
+    : Style.getColorScale(colorScale, theme);
   return color || colors[index % colors.length];
 }
 
@@ -323,7 +324,8 @@ export function getStyle(theme, style, role) {
   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 } = calculatedProps;
   const childStyle = child.props.style || {};
   if (Array.isArray(childStyle)) {
@@ -331,7 +333,9 @@ export function getChildStyle(child, index, calculatedProps) {
   }
   const childRole = child.type && child.type.role;
   const defaultFill =
-    childRole === "stack" ? undefined : getColor(calculatedProps, child, index);
+    childRole === "stack"
+      ? undefined
+      : getColor(calculatedProps, child, index, theme);
   const defaultColor =
     childRole === "line"
       ? { fill: "none", stroke: defaultFill }