victory-core 37.1.1 → 37.1.2

package/src/victory-theme/clean.tsx

@@ -0,0 +1,411 @@
+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["500"],
+  pink["500"],
+  teal["500"],
+  purple["500"],
+  green["500"],
+  orange["500"],
+  cyan["500"],
+  red["500"],
+  yellow["500"],
+];
+// *
+// * 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: colors,
+};
+// *
+// * 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 = {
+  area: Object.assign(
+    {
+      style: {
+        data: {
+          fill: cyan["500"],
+        },
+        labels: baseLabelStyles,
+      },
+    },
+    baseProps,
+  ),
+  axis: Object.assign(
+    {
+      style: {
+        axis: {
+          fill: "transparent",
+          stroke: gray["300"],
+          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["300"],
+      },
+      grid: {
+        stroke: gray["200"],
+        strokeDasharray,
+        strokeLinecap,
+        strokeLinejoin,
+        pointerEvents: "painted",
+      },
+      ticks: {
+        fill: "transparent",
+        size: 5,
+        stroke: gray["200"],
+        strokeWidth: 1,
+        strokeLinecap,
+        strokeLinejoin,
+      },
+      tickLabels: baseLabelStyles,
+    },
+  }),
+  polarDependentAxis: Object.assign({
+    style: {
+      axis: {
+        stroke: gray["300"],
+      },
+      grid: {
+        stroke: gray["200"],
+        strokeDasharray,
+        strokeLinecap,
+        strokeLinejoin,
+        pointerEvents: "painted",
+      },
+      ticks: {
+        fill: "transparent",
+        size: 5,
+        stroke: gray["200"],
+        strokeWidth: 1,
+        strokeLinecap,
+        strokeLinejoin,
+      },
+      tickLabels: baseLabelStyles,
+    },
+  }),
+  bar: Object.assign(
+    {
+      style: {
+        data: {
+          fill: blue["500"],
+          padding,
+          strokeWidth: 0,
+        },
+        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 },
+        q1Labels: Object.assign({}, baseLabelStyles, { padding: 3 }),
+        q3: { padding, fill: teal["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: colors,
+    },
+    baseProps,
+  ),
+  histogram: Object.assign(
+    {
+      style: {
+        data: {
+          fill: cyan["500"],
+          stroke: "transparent",
+          strokeWidth: 0,
+        },
+        labels: baseLabelStyles,
+      },
+      binSpacing: 4,
+      cornerRadius: { top: borderRadius },
+    },
+    baseProps,
+  ),
+  label: baseLabelStyles,
+  legend: {
+    colorScale: colors,
+    gutter: 10,
+    orientation: "vertical",
+    titleOrientation: "top",
+    style: {
+      data: {
+        type: "circle",
+      },
+      labels: { ...baseLabelStyles, fontSize: 14 },
+      title: Object.assign({}, baseLabelStyles, { padding, fontSize: 20 }),
+      border: { stroke: gray["200"], strokeWidth: 2, padding: 16 },
+    },
+  },
+  line: Object.assign(
+    {
+      style: {
+        data: {
+          fill: "transparent",
+          opacity: 1,
+          stroke: pink["500"],
+          strokeWidth: 2,
+          strokeLinecap,
+          strokeLinejoin,
+        },
+        labels: baseLabelStyles,
+      },
+    },
+    baseProps,
+  ),
+  pie: Object.assign(
+    {
+      style: {
+        data: {
+          padding,
+          stroke: gray.white,
+          strokeWidth: 1,
+        },
+        labels: Object.assign({}, baseLabelStyles, { padding: 20 }),
+      },
+      colorScale: colors,
+      cornerRadius: borderRadius,
+    },
+    baseProps,
+  ),
+  scatter: Object.assign(
+    {
+      style: {
+        data: {
+          fill: purple["500"],
+          opacity: 1,
+          stroke: "transparent",
+          strokeWidth: 0,
+        },
+        labels: baseLabelStyles,
+      },
+    },
+    baseProps,
+  ),
+  stack: Object.assign(
+    {
+      colorScale: colors,
+    },
+    baseProps,
+  ),
+  tooltip: {
+    style: Object.assign({}, baseLabelStyles, {
+      padding: 0,
+      pointerEvents: "none",
+    }),
+    flyoutStyle: {
+      stroke: gray["500"],
+      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: red["100"],
+          stroke: red["500"],
+          strokeWidth: 2,
+        },
+        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/types.ts

@@ -167,6 +167,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 };

package/src/victory-util/textsize.ts

@@ -4,6 +4,7 @@ import { defaults, memoize } from "lodash";
 
 // Based on measuring specific character widths
 // as in the following example https://bl.ocks.org/tophtucker/62f93a4658387bb61e4510c37e2e97cf
+// For new fonts: pull gist, open index.html locally, add font files (if not generic), enter font name in `font-family` input
 // prettier-ignore
 const fonts = {
   "American Typewriter": {
@@ -62,6 +63,10 @@ const fonts = {
     widths: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.2359375,0.2234375,0.3921875,0.7125,0.49375,0.8859375,0.771875,0.2125,0.3078125,0.309375,0.375,0.4234375,0.234375,0.3125,0.234375,0.3,0.5828125,0.365625,0.434375,0.3921875,0.5234375,0.3984375,0.5125,0.4328125,0.46875,0.5125,0.234375,0.234375,0.515625,0.4234375,0.515625,0.340625,0.7609375,0.7359375,0.6359375,0.721875,0.8125,0.6375,0.5875,0.8078125,0.853125,0.4296875,0.503125,0.78125,0.609375,0.9609375,0.8515625,0.8140625,0.6125,0.8140625,0.71875,0.49375,0.7125,0.76875,0.771875,1.125,0.7765625,0.7734375,0.65625,0.321875,0.3078125,0.321875,0.3546875,0.5,0.3375,0.446875,0.5359375,0.45,0.5296875,0.4546875,0.425,0.4921875,0.54375,0.2671875,0.240625,0.5390625,0.25,0.815625,0.5375,0.5234375,0.5390625,0.5421875,0.365625,0.36875,0.35625,0.5171875,0.5015625,0.75,0.5,0.509375,0.44375,0.2421875,0.14375,0.2421875,0.35],
     avg: 0.5116447368421051
   },
+  "Inter": {
+    widths: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.2796875,0.2890625,0.4671875,0.634375,0.6421875,0.9828125,0.6453125,0.3,0.365625,0.365625,0.5015625,0.6625,0.2890625,0.4609375,0.2890625,0.3609375,0.63125,0.4078125,0.6109375,0.61875,0.646875,0.59375,0.6203125,0.5671875,0.61875,0.6203125,0.2890625,0.303125,0.6625,0.6625,0.6625,0.5125,0.9671875,0.690625,0.6546875,0.73125,0.721875,0.6015625,0.590625,0.746875,0.74375,0.26875,0.571875,0.671875,0.565625,0.9046875,0.7546875,0.765625,0.6390625,0.765625,0.64375,0.6421875,0.646875,0.7453125,0.690625,0.9859375,0.6828125,0.6796875,0.6296875,0.365625,0.3609375,0.365625,0.471875,0.45625,0.3234375,0.5625,0.6125,0.571875,0.6125,0.584375,0.3703125,0.6140625,0.5921875,0.2421875,0.2548828125,0.55,0.2421875,0.8765625,0.5921875,0.6,0.6125,0.6125,0.3765625,0.528125,0.328125,0.5921875,0.5625,0.81875,0.546875,0.5625,0.553125,0.4265625,0.3328125,0.4265625,0.6625],
+    avg: 0.5624362664473683
+  },
   "Montserrat": {
     widths: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.2625,0.2609375,0.3734375,0.696875,0.615625,0.8296875,0.6703125,0.203125,0.3296875,0.3296875,0.3875,0.575,0.2125,0.3828125,0.2125,0.3953125,0.6625,0.3625,0.56875,0.5640625,0.6625,0.5671875,0.609375,0.5890625,0.6390625,0.609375,0.2125,0.2125,0.575,0.575,0.575,0.5671875,1.034375,0.7171875,0.7546875,0.7203125,0.8265625,0.6703125,0.634375,0.7734375,0.8140625,0.303125,0.5078125,0.7125,0.5890625,0.95625,0.8140625,0.8390625,0.71875,0.8390625,0.7234375,0.615625,0.575,0.7921875,0.6984375,1.1125,0.65625,0.6359375,0.6515625,0.31875,0.396875,0.31875,0.5765625,0.5,0.6,0.590625,0.678125,0.5640625,0.678125,0.6046875,0.375,0.6875,0.678125,0.2703125,0.365625,0.6015625,0.2703125,1.0625,0.678125,0.628125,0.678125,0.678125,0.4015625,0.4890625,0.40625,0.6734375,0.5421875,0.8796875,0.534375,0.5671875,0.5125,0.334375,0.2953125,0.334375,0.575],
     avg: 0.571792763157895