fix: address PR feedback

Author: Stef Williams

demo/ts/components/victory-bar-demo.tsx

@@ -151,7 +151,7 @@ export default class VictoryBarDemo extends React.Component<
       <div className="demo" style={containerStyle}>
         <ChartWrap>
           <VictoryBar
-            theme={VictoryTheme.material}
+            theme={VictoryTheme.clean}
             style={{
               data: { fill: VictoryTheme.clean.palette?.colors?.pink },
             }}

demo/ts/components/victory-histogram-demo.tsx

@@ -246,11 +246,9 @@ export default class App extends React.Component<{}, VictoryBarDemoState> {
                     },
                   },
                 ],
-                onMouseOut: () => [
-                  {
-                    mutation: (props) => {},
-                  },
-                ],
+                onMouseOut: () => ({
+                  mutation: () => null,
+                }),
               },
             },
           ]}

demo/ts/components/victory-polar-axis-demo.tsx

@@ -13,8 +13,7 @@ import { VictoryGroup } from "victory-group";
 import { VictoryTooltip } from "victory-tooltip";
 import { VictoryStack } from "victory-stack";
 import { random, range, keys } from "lodash";
-import { VictoryTheme, VictoryLabel } from "victory-core";
-import { VictoryThemePalette } from "victory-core/src/victory-theme/types";
+import { VictoryTheme, VictoryLabel, VictoryThemePalette } from "victory-core";
 
 type multiAxisDataListType = {
   strength?: number;

packages/victory-core/src/victory-theme/clean.tsx

@@ -1,4 +1,3 @@
-import { random } from "lodash";
 import { VictoryThemeDefinition } from "./victory-theme";
 
 // *

packages/victory-core/src/victory-theme/grayscale.tsx

@@ -53,6 +53,9 @@ const strokeLinecap = "round";
 const strokeLinejoin = "round";
 
 export const grayscale: VictoryThemeDefinition = {
+  palette: {
+    grayscale: colors,
+  },
   area: Object.assign(
     {
       style: {

packages/victory-core/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,
   ),

packages/victory-core/src/victory-util/style.ts

@@ -1,4 +1,7 @@
-import { VictoryThemeDefinition } from "../victory-theme/victory-theme";
+import {
+  VictoryTheme,
+  VictoryThemeDefinition,
+} from "../victory-theme/victory-theme";
 
 /**
  * Given an object with CSS/SVG transform definitions, return the string value
@@ -38,32 +41,24 @@ export const toTransformString = function (obj, ...more) {
  * @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?: string, theme?: VictoryThemeDefinition) {
+export function getColorScale(
+  name?: keyof VictoryThemeDefinition["palette"],
+  theme: VictoryThemeDefinition = VictoryTheme.material,
+) {
   const {
     palette: {
       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"],
+      qualitative = [],
+      heatmap = [],
+      warm = [],
+      cool = [],
+      red = [],
+      blue = [],
+      green = [],
     } = {},
-  } = theme || {};
+  } = theme;
 
-  const scales = {
+  const scales: Record<string, string[]> = {
     grayscale,
     qualitative,
     heatmap,
@@ -73,5 +68,9 @@ export function getColorScale(name?: string, theme?: VictoryThemeDefinition) {
     blue,
     green,
   };
-  return name ? scales[name] : scales.grayscale;
+
+  const selectedScale =
+    name && scales[name]?.length ? scales[name] : scales.grayscale;
+
+  return selectedScale;
 }

packages/victory-core/src/victory-util/wrapper.tsx

@@ -298,6 +298,7 @@ export function getAllEvents(props) {
   return events || [];
 }
 
+// eslint-disable-next-line max-params
 export function getColor(calculatedProps, child, index, theme) {
   // check for styles first
   const { style } = calculatedProps;
@@ -323,6 +324,7 @@ export function getStyle(theme, style, role) {
   return Helpers.getStyles(style, defaultStyle);
 }
 
+// eslint-disable-next-line max-params
 export function getChildStyle(child, index, calculatedProps, theme) {
   const { style, role } = calculatedProps;
   const childStyle = child.props.style || {};