victory-core 36.4.1 → 36.5.2

package/src/victory-theme/{material.js → material.tsx}

@@ -1,4 +1,5 @@
 import { assign } from "lodash";
+import { VictoryThemeDefinition } from "./types";
 
 // *
 // * Colors
@@ -15,7 +16,7 @@ const colors = [
   lime300,
   lightGreen500,
   teal700,
-  cyan900
+  cyan900,
 ];
 const blueGrey50 = "#ECEFF1";
 const blueGrey300 = "#90A4AE";
@@ -34,7 +35,7 @@ const padding = 8;
 const baseProps = {
   width: 350,
   height: 350,
-  padding: 50
+  padding: 50,
 };
 // *
 // * Labels
@@ -46,7 +47,7 @@ const baseLabelStyles = {
   padding,
   fill: blueGrey700,
   stroke: "transparent",
-  strokeWidth: 0
+  strokeWidth: 0,
 };
 
 const centeredLabelStyles = assign({ textAnchor: "middle" }, baseLabelStyles);
@@ -57,17 +58,17 @@ const strokeDasharray = "10, 5";
 const strokeLinecap = "round";
 const strokeLinejoin = "round";
 
-export default {
+export const material: VictoryThemeDefinition = {
   area: assign(
     {
       style: {
         data: {
-          fill: grey900
+          fill: grey900,
         },
-        labels: baseLabelStyles
-      }
+        labels: baseLabelStyles,
+      },
     },
-    baseProps
+    baseProps,
   ),
   axis: assign(
     {
@@ -77,11 +78,11 @@ export default {
           stroke: blueGrey300,
           strokeWidth: 2,
           strokeLinecap,
-          strokeLinejoin
+          strokeLinejoin,
         },
         axisLabel: assign({}, centeredLabelStyles, {
           padding,
-          stroke: "transparent"
+          stroke: "transparent",
         }),
         grid: {
           fill: "none",
@@ -89,7 +90,7 @@ export default {
           strokeDasharray,
           strokeLinecap,
           strokeLinejoin,
-          pointerEvents: "painted"
+          pointerEvents: "painted",
         },
         ticks: {
           fill: "transparent",
@@ -97,23 +98,23 @@ export default {
           stroke: blueGrey300,
           strokeWidth: 1,
           strokeLinecap,
-          strokeLinejoin
+          strokeLinejoin,
         },
         tickLabels: assign({}, baseLabelStyles, {
-          fill: blueGrey700
-        })
-      }
+          fill: blueGrey700,
+        }),
+      },
     },
-    baseProps
+    baseProps,
   ),
   polarDependentAxis: assign({
     style: {
       ticks: {
         fill: "transparent",
         size: 1,
-        stroke: "transparent"
-      }
-    }
+        stroke: "transparent",
+      },
+    },
   }),
   bar: assign(
     {
@@ -121,12 +122,12 @@ export default {
         data: {
           fill: blueGrey700,
           padding,
-          strokeWidth: 0
+          strokeWidth: 0,
         },
-        labels: baseLabelStyles
-      }
+        labels: baseLabelStyles,
+      },
     },
-    baseProps
+    baseProps,
   ),
   boxplot: assign(
     {
@@ -140,26 +141,26 @@ export default {
         q1: { padding, fill: blueGrey700 },
         q1Labels: assign({}, baseLabelStyles, { padding: 3 }),
         q3: { padding, fill: blueGrey700 },
-        q3Labels: assign({}, baseLabelStyles, { padding: 3 })
+        q3Labels: assign({}, baseLabelStyles, { padding: 3 }),
       },
-      boxWidth: 20
+      boxWidth: 20,
     },
-    baseProps
+    baseProps,
   ),
   candlestick: assign(
     {
       style: {
         data: {
-          stroke: blueGrey700
+          stroke: blueGrey700,
         },
-        labels: assign({}, baseLabelStyles, { padding: 5 })
+        labels: assign({}, baseLabelStyles, { padding: 5 }),
       },
       candleColors: {
         positive: "#ffffff",
-        negative: blueGrey700
-      }
+        negative: blueGrey700,
+      },
     },
-    baseProps
+    baseProps,
   ),
   chart: baseProps,
   errorbar: assign(
@@ -170,18 +171,18 @@ export default {
           fill: "transparent",
           opacity: 1,
           stroke: blueGrey700,
-          strokeWidth: 2
+          strokeWidth: 2,
         },
-        labels: baseLabelStyles
-      }
+        labels: baseLabelStyles,
+      },
     },
-    baseProps
+    baseProps,
   ),
   group: assign(
     {
-      colorScale: colors
+      colorScale: colors,
     },
-    baseProps
+    baseProps,
   ),
   histogram: assign(
     {
@@ -189,12 +190,12 @@ export default {
         data: {
           fill: blueGrey700,
           stroke: grey900,
-          strokeWidth: 2
+          strokeWidth: 2,
         },
-        labels: baseLabelStyles
-      }
+        labels: baseLabelStyles,
+      },
     },
-    baseProps
+    baseProps,
   ),
   legend: {
     colorScale: colors,
@@ -203,11 +204,11 @@ export default {
     titleOrientation: "top",
     style: {
       data: {
-        type: "circle"
+        type: "circle",
       },
       labels: baseLabelStyles,
-      title: assign({}, baseLabelStyles, { padding: 5 })
-    }
+      title: assign({}, baseLabelStyles, { padding: 5 }),
+    },
   },
   line: assign(
     {
@@ -216,12 +217,12 @@ export default {
           fill: "transparent",
           opacity: 1,
           stroke: blueGrey700,
-          strokeWidth: 2
+          strokeWidth: 2,
         },
-        labels: baseLabelStyles
-      }
+        labels: baseLabelStyles,
+      },
     },
-    baseProps
+    baseProps,
   ),
   pie: assign(
     {
@@ -230,12 +231,12 @@ export default {
         data: {
           padding,
           stroke: blueGrey50,
-          strokeWidth: 1
+          strokeWidth: 1,
         },
-        labels: assign({}, baseLabelStyles, { padding: 20 })
-      }
+        labels: assign({}, baseLabelStyles, { padding: 20 }),
+      },
     },
-    baseProps
+    baseProps,
   ),
   scatter: assign(
     {
@@ -244,18 +245,18 @@ export default {
           fill: blueGrey700,
           opacity: 1,
           stroke: "transparent",
-          strokeWidth: 0
+          strokeWidth: 0,
         },
-        labels: baseLabelStyles
-      }
+        labels: baseLabelStyles,
+      },
     },
-    baseProps
+    baseProps,
   ),
   stack: assign(
     {
-      colorScale: colors
+      colorScale: colors,
     },
-    baseProps
+    baseProps,
   ),
   tooltip: {
     style: assign({}, baseLabelStyles, { padding: 0, pointerEvents: "none" }),
@@ -263,11 +264,11 @@ export default {
       stroke: grey900,
       strokeWidth: 1,
       fill: "#f0f0f0",
-      pointerEvents: "none"
+      pointerEvents: "none",
     },
     flyoutPadding: 5,
     cornerRadius: 5,
-    pointerLength: 10
+    pointerLength: 10,
   },
   voronoi: assign(
     {
@@ -275,20 +276,20 @@ export default {
         data: {
           fill: "transparent",
           stroke: "transparent",
-          strokeWidth: 0
+          strokeWidth: 0,
         },
         labels: assign({}, baseLabelStyles, {
           padding: 5,
-          pointerEvents: "none"
+          pointerEvents: "none",
         }),
         flyout: {
           stroke: grey900,
           strokeWidth: 1,
           fill: "#f0f0f0",
-          pointerEvents: "none"
-        }
-      }
+          pointerEvents: "none",
+        },
+      },
     },
-    baseProps
-  )
+    baseProps,
+  ),
 };

package/src/victory-theme/types.ts

@@ -0,0 +1,257 @@
+import * as React from "react";
+import {
+  VictoryCommonThemeProps,
+  VictoryDatableProps,
+} from "../victory-util/common-props";
+import {
+  NumberOrCallback,
+  OrientationOrCallback,
+  PaddingOrCallback,
+  StringOrNumberOrCallback,
+} from "../types/callbacks";
+
+export type BlockProps = {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+};
+export type PaddingProps = number | BlockProps;
+export type OrientationTypes = "top" | "bottom" | "left" | "right";
+export type VictoryStyleObject = {
+  [K in keyof React.CSSProperties]: StringOrNumberOrCallback;
+};
+export type LabelProps = React.CSSProperties & {
+  angle?: number;
+  verticalAnchor?: VerticalAnchorType;
+};
+export type VictoryLabelStyleObject = {
+  [K in keyof LabelProps]: StringOrNumberOrCallback;
+};
+
+/**
+ * Style interface used in components/themeing
+ */
+export interface VictoryStyleInterface {
+  parent?: VictoryStyleObject;
+  data?: VictoryStyleObject;
+  labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+  border?: VictoryStyleObject;
+}
+
+export type TickProps = React.CSSProperties & { size?: number };
+export type VictoryTickStyleObject = {
+  [K in keyof TickProps]: StringOrNumberOrCallback;
+};
+
+export interface VictoryAxisCommonProps {
+  axisComponent?: React.ReactElement;
+  axisLabelComponent?: React.ReactElement;
+  axisValue?: number | string | object | Date;
+  dependentAxis?: boolean;
+  disableInlineStyles?: boolean;
+  gridComponent?: React.ReactElement;
+  invertAxis?: boolean;
+  style?: {
+    parent?: VictoryStyleObject;
+    axis?: VictoryStyleObject;
+    axisLabel?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    grid?: VictoryStyleObject;
+    ticks?: VictoryTickStyleObject;
+    tickLabels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+  };
+  tickComponent?: React.ReactElement;
+  tickCount?: number;
+  tickLabelComponent?: React.ReactElement;
+  tickFormat?:
+    | any[]
+    | { (tick: any, index: number, ticks: any[]): string | number };
+  tickValues?: any[];
+}
+
+export type VerticalAnchorType = "start" | "middle" | "end";
+// #region Victory Theme
+// Note: Many SVG attributes are missed in CSSProperties interface
+export interface VictoryThemeDefinition {
+  area?: {
+    style?: {
+      data?: VictoryStyleObject;
+      labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+  } & VictoryCommonThemeProps &
+    VictoryDatableProps;
+  axis?: {
+    style?: {
+      axis?: VictoryStyleObject;
+      axisLabel?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+      grid?: VictoryStyleObject;
+      ticks?: VictoryTickStyleObject;
+      tickLabels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+    offsetX?: number;
+    offsetY?: number;
+  } & VictoryCommonThemeProps;
+  bar?: {
+    style?: {
+      data?: VictoryStyleObject;
+      labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+  } & VictoryCommonThemeProps &
+    VictoryDatableProps;
+  boxplot?: {
+    style?: {
+      max?: VictoryStyleObject;
+      maxLabels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+      median?: VictoryStyleObject;
+      medianLabels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+      min?: VictoryStyleObject;
+      minLabels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+      q1?: VictoryStyleObject;
+      q1Labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+      q3?: VictoryStyleObject;
+      q3Labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+    boxWidth?: number;
+  } & VictoryCommonThemeProps;
+  candlestick?: {
+    style?: {
+      data?: VictoryStyleObject;
+      labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+    candleColors?: {
+      positive?: string;
+      negative?: string;
+    };
+  } & VictoryCommonThemeProps;
+  chart?: VictoryCommonThemeProps;
+  dependentAxis?: {
+    style?: {
+      axis?: VictoryStyleObject;
+      axisLabel?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+      grid?: VictoryStyleObject;
+      ticks?: VictoryTickStyleObject;
+      tickLabels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+    offsetX?: number;
+    offsetY?: number;
+    orientation?: OrientationTypes;
+  } & VictoryCommonThemeProps;
+  errorbar?: {
+    borderWidth?: number;
+    style?: {
+      data?: VictoryStyleObject;
+      labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+  } & VictoryCommonThemeProps;
+  group?: {
+    style?: {
+      data?: VictoryStyleObject;
+      labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+  } & VictoryCommonThemeProps;
+  histogram?: {
+    style?: {
+      data?: VictoryStyleObject;
+      labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+  } & VictoryCommonThemeProps;
+  independentAxis?: {
+    style?: {
+      axis?: VictoryStyleObject;
+      axisLabel?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+      grid?: VictoryStyleObject;
+      ticks?: VictoryTickStyleObject;
+      tickLabels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+    offsetX?: number;
+    offsetY?: number;
+    orientation?: OrientationTypes;
+  } & VictoryCommonThemeProps;
+  legend?: {
+    gutter?: number | BlockProps;
+    rowGutter?: number | BlockProps;
+    orientation?: string;
+    titleOrientation?: string;
+    style?: {
+      data?: VictoryStyleObject & {
+        type?: string;
+      };
+      border?: VictoryStyleObject;
+      labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+      title?: VictoryLabelStyleObject;
+    };
+    itemsPerRow?: number;
+    x?: number;
+    y?: number;
+    centerTitle?: boolean;
+    borderPadding?: number | BlockProps;
+  } & VictoryCommonThemeProps;
+  line?: {
+    style?: {
+      data?: VictoryStyleObject;
+      labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+  } & VictoryCommonThemeProps &
+    VictoryDatableProps;
+  pie?: {
+    style?: {
+      data?: VictoryStyleObject;
+      labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+  } & VictoryCommonThemeProps &
+    VictoryDatableProps;
+  polarAxis?: {
+    style?: {
+      axis?: VictoryStyleObject;
+      axisLabel?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+      grid?: VictoryStyleObject;
+      ticks?: VictoryTickStyleObject;
+      tickLabels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+  } & VictoryCommonThemeProps;
+  polarDependentAxis?: {
+    style?: {
+      axis?: VictoryStyleObject;
+      axisLabel?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+      grid?: VictoryStyleObject;
+      ticks?: VictoryTickStyleObject;
+      tickLabels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+  } & VictoryCommonThemeProps;
+  polarIndependentAxis?: {
+    style?: {
+      axis?: VictoryStyleObject;
+      axisLabel?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+      grid?: VictoryStyleObject;
+      ticks?: VictoryTickStyleObject;
+      tickLabels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+  } & VictoryCommonThemeProps;
+  scatter?: {
+    style?: {
+      data?: VictoryStyleObject;
+      labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    };
+  } & VictoryCommonThemeProps &
+    VictoryDatableProps;
+  stack?: VictoryCommonThemeProps;
+  tooltip?: {
+    style?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+    flyoutStyle?: VictoryStyleObject;
+    cornerRadius?: NumberOrCallback;
+    pointerLength?: NumberOrCallback;
+    flyoutPadding?: PaddingOrCallback;
+    flyoutWidth?: NumberOrCallback;
+    flyoutHeight?: NumberOrCallback;
+    orientation?: OrientationOrCallback;
+    pointerOrientation?: OrientationOrCallback;
+  };
+  voronoi?: {
+    style?: {
+      data?: VictoryStyleObject;
+      labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+      flyout?: VictoryStyleObject;
+    };
+  } & VictoryCommonThemeProps &
+    VictoryDatableProps;
+}

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

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