victory-core 37.1.1 → 37.2.0

package/src/victory-theme/clean.tsx

@@ -0,0 +1,448 @@
+import { VictoryThemeDefinition } from "./victory-theme";
+
+// *
+// * 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
+// *
+export const clean: VictoryThemeDefinition = {
+  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,
+  ),
+};

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;
@@ -167,6 +193,7 @@ export interface VictoryThemeDefinition {
     offsetY?: number;
     orientation?: OrientationTypes;
   } & VictoryCommonThemeProps;
+  label?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
   legend?: {
     gutter?: number | BlockProps;
     rowGutter?: number | BlockProps;

package/src/victory-theme/victory-theme.tsx

@@ -1,5 +1,7 @@
 import { grayscale } from "./grayscale";
 import { material } from "./material";
+import { clean } from "./clean";
+
 export * from "./types";
 
-export const VictoryTheme = { grayscale, material };
+export const VictoryTheme = { grayscale, material, clean };