victory-core 36.4.1 → 36.5.2

package/src/victory-state/helpers/get-range.ts

@@ -0,0 +1,39 @@
+import { AxisType, Padding, RangeTuple } from "../../types/prop-types";
+import { getPadding } from "../../victory-util/helpers";
+import { getValueForAxis, isTuple } from "../../victory-util/type-helpers";
+import { VictoryProviderProps } from "../types";
+
+type RangeProps = Pick<
+  VictoryProviderProps,
+  "range" | "padding" | "height" | "width"
+>;
+
+// TODO: Should we store these defaults somewhere?
+const DEFAULT_HEIGHT = 300;
+const DEFAULT_WIDTH = 450;
+
+// TODO: This does not include polar range
+export function getRange(
+  {
+    range,
+    height = DEFAULT_HEIGHT,
+    width = DEFAULT_WIDTH,
+    ...props
+  }: RangeProps,
+  axis: AxisType,
+) {
+  const rangeFromProps = getValueForAxis<RangeTuple>(range, axis);
+
+  if (isTuple(rangeFromProps)) {
+    return rangeFromProps;
+  }
+
+  // TODO: Convert this to TS
+  const padding = getPadding({ padding: props.padding }) as Padding;
+  const rangeForAxis = {
+    x: [padding.left, width - padding.right],
+    y: [height - padding.top, padding.bottom],
+  };
+
+  return rangeForAxis[axis];
+}

package/src/victory-state/helpers/get-scale.ts

@@ -0,0 +1,64 @@
+import {
+  scaleLinear,
+  scaleTime,
+  scaleLog,
+  scaleSqrt,
+} from "victory-vendor/d3-scale";
+import { AxisType, D3ScaleFn, ScalePropType } from "../../types/prop-types";
+import * as Collection from "../../victory-util/collection";
+import { getValueForAxis, isFunction } from "../../victory-util/type-helpers";
+import { VictoryProviderProps } from "../types";
+import { getAxisData } from "./get-axis-data";
+
+type Scale = ScalePropType | D3ScaleFn;
+
+type ScaleProps = Pick<VictoryProviderProps, "data" | "scale">;
+
+const DEFAULT_SCALE = scaleLinear;
+
+function isD3Scale(scale?: unknown): scale is D3ScaleFn {
+  return (
+    isFunction(scale) &&
+    isFunction(scale().copy) &&
+    isFunction(scale().domain) &&
+    isFunction(scale().range)
+  );
+}
+
+function getD3ScaleFromString(scale: ScalePropType): D3ScaleFn {
+  switch (scale) {
+    case "linear":
+      return scaleLinear;
+    case "time":
+      return scaleTime;
+    case "log":
+      return scaleLog;
+    case "sqrt":
+      return scaleSqrt;
+    default:
+      return DEFAULT_SCALE;
+  }
+}
+
+export function getScale(
+  { data = [], ...props }: ScaleProps,
+  axis: AxisType,
+): D3ScaleFn {
+  const scale = getValueForAxis<Scale>(props.scale, axis);
+
+  if (isD3Scale(scale)) {
+    return scale;
+  }
+
+  if (typeof scale === "string") {
+    return getD3ScaleFromString(scale);
+  }
+
+  const axisData = getAxisData(data, axis);
+
+  if (Collection.containsDates(axisData)) {
+    return scaleTime;
+  }
+
+  return DEFAULT_SCALE;
+}

package/src/victory-state/index.ts

@@ -0,0 +1,2 @@
+export * from "./victory-provider";
+export * from "./types";

package/src/victory-state/types.ts

@@ -0,0 +1,32 @@
+import {
+  D3ScaleFn,
+  Datum,
+  DomainTuple,
+  RangeTuple,
+  ScalePropType,
+  ValueOrAxes,
+} from "../types/prop-types";
+import { PaddingProps } from "../victory-theme/types";
+
+// These are all the props that are used to calculate data, domain, range, and scale
+export interface VictoryCalculatedStateProps {
+  data?: Datum[];
+  domain?: ValueOrAxes<DomainTuple>;
+  height?: number;
+  includeZero?: boolean;
+  maxDomain?: ValueOrAxes<number>;
+  minDomain?: ValueOrAxes<number>;
+  padding?: PaddingProps;
+  range?: ValueOrAxes<RangeTuple>;
+  samples?: number;
+  scale?: ValueOrAxes<ScalePropType | D3ScaleFn>;
+  sortKey?: string;
+  sortOrder?: "ascending" | "descending";
+  width?: number;
+  x?: string;
+  y?: string;
+}
+
+export interface VictoryProviderProps extends VictoryCalculatedStateProps {
+  children?: React.ReactNode;
+}

package/src/victory-state/victory-provider.tsx

@@ -0,0 +1,116 @@
+import * as React from "react";
+import { createContext, useContext } from "react";
+import { D3ScaleFn, DomainTuple, ForAxes } from "../types/prop-types";
+import { FormattedDatum, getData } from "./helpers/get-data";
+import { getDomain } from "./helpers/get-domain";
+import { getRange } from "./helpers/get-range";
+import { getScale } from "./helpers/get-scale";
+import { VictoryCalculatedStateProps, VictoryProviderProps } from "./types";
+
+type ScaleType = Required<ForAxes<D3ScaleFn>>;
+type DomainType = Required<ForAxes<DomainTuple>>;
+
+export interface ContextType {
+  data: FormattedDatum[];
+  scale: ScaleType;
+  domain: DomainType;
+  setChildProps: (id: string, props: VictoryProviderProps) => void;
+}
+
+const VictoryContext = createContext<ContextType | null>(null);
+
+export function VictoryProvider({
+  children,
+  ...initialProps
+}: VictoryProviderProps) {
+  // We need to store the props in state so they can be overwritten by child components
+  const [props, setProps] = React.useState(initialProps);
+
+  const setChildProps = React.useCallback(
+    (id: string, newProps: VictoryCalculatedStateProps) => {
+      setProps((prevProps) => {
+        return { ...prevProps, ...newProps };
+      });
+    },
+    [],
+  );
+
+  const data = React.useMemo(() => {
+    return getData(props);
+  }, [props]);
+
+  const domain = React.useMemo(() => {
+    return {
+      x: getDomain(props, "x"),
+      y: getDomain(props, "y"),
+    };
+  }, [props]);
+
+  const range = React.useMemo(
+    () => ({
+      x: getRange(props, "x"),
+      y: getRange(props, "y"),
+    }),
+    [props],
+  );
+
+  const scale = React.useMemo(() => {
+    const xBaseScaleFn = getScale(props, "x");
+    const yBaseScaleFn = getScale(props, "y");
+
+    // @ts-expect-error: This is a valid scale function
+    const xScaleFn = xBaseScaleFn().domain(domain.x).range(range.x);
+    // @ts-expect-error: This is a valid scale function
+    const yScaleFn = yBaseScaleFn().domain(domain.y).range(range.y);
+
+    return {
+      x: xScaleFn,
+      y: yScaleFn,
+    };
+  }, [props, domain, range]);
+
+  const value = {
+    scale,
+    data,
+    domain,
+    setChildProps,
+  };
+
+  return (
+    <VictoryContext.Provider value={value}>{children}</VictoryContext.Provider>
+  );
+}
+
+export function useVictoryContext<T>(selector: (value: ContextType) => T): T {
+  const context = useContext(VictoryContext);
+  if (!context) {
+    throw new Error("useVictoryContext must be used within a VictoryProvider");
+  }
+  return selector(context);
+}
+
+export function useScale() {
+  return useVictoryContext<ScaleType>((value) => value.scale);
+}
+
+export function useData() {
+  return useVictoryContext<FormattedDatum[]>((value) => value.data);
+}
+
+export function useDomain() {
+  return useVictoryContext<DomainType>((value) => value.domain);
+}
+
+// This function keeps props in sync betwen the VictoryProvider and child components
+export function useVictoryProviderSync(
+  id: string,
+  props: VictoryCalculatedStateProps,
+) {
+  const setChildProps = useVictoryContext((value) => value.setChildProps);
+
+  React.useEffect(() => {
+    setChildProps(id, props);
+  }, []);
+
+  return props;
+}

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

@@ -1,4 +1,5 @@
 import { assign } from "lodash";
+import { VictoryThemeDefinition } from "./types";
 
 // *
 // * Colors
@@ -10,7 +11,7 @@ const colors = [
   "#969696",
   "#bdbdbd",
   "#d9d9d9",
-  "#f0f0f0"
+  "#f0f0f0",
 ];
 
 const charcoal = "#252525";
@@ -28,7 +29,7 @@ const baseProps = {
   width: 450,
   height: 300,
   padding: 50,
-  colorScale: colors
+  colorScale: colors,
 };
 // *
 // * Labels
@@ -39,7 +40,7 @@ const baseLabelStyles = {
   letterSpacing,
   padding: 10,
   fill: charcoal,
-  stroke: "transparent"
+  stroke: "transparent",
 };
 
 const centeredLabelStyles = assign({ textAnchor: "middle" }, baseLabelStyles);
@@ -49,17 +50,17 @@ const centeredLabelStyles = assign({ textAnchor: "middle" }, baseLabelStyles);
 const strokeLinecap = "round";
 const strokeLinejoin = "round";
 
-export default {
+export const grayscale: VictoryThemeDefinition = {
   area: assign(
     {
       style: {
         data: {
-          fill: charcoal
+          fill: charcoal,
         },
-        labels: baseLabelStyles
-      }
+        labels: baseLabelStyles,
+      },
     },
-    baseProps
+    baseProps,
   ),
   axis: assign(
     {
@@ -69,25 +70,25 @@ export default {
           stroke: charcoal,
           strokeWidth: 1,
           strokeLinecap,
-          strokeLinejoin
+          strokeLinejoin,
         },
         axisLabel: assign({}, centeredLabelStyles, {
-          padding: 25
+          padding: 25,
         }),
         grid: {
           fill: "none",
           stroke: "none",
-          pointerEvents: "painted"
+          pointerEvents: "painted",
         },
         ticks: {
           fill: "transparent",
           size: 1,
-          stroke: "transparent"
+          stroke: "transparent",
         },
-        tickLabels: baseLabelStyles
-      }
+        tickLabels: baseLabelStyles,
+      },
     },
-    baseProps
+    baseProps,
   ),
   bar: assign(
     {
@@ -95,12 +96,12 @@ export default {
         data: {
           fill: charcoal,
           padding: 8,
-          strokeWidth: 0
+          strokeWidth: 0,
         },
-        labels: baseLabelStyles
-      }
+        labels: baseLabelStyles,
+      },
     },
-    baseProps
+    baseProps,
   ),
   boxplot: assign(
     {
@@ -114,27 +115,27 @@ export default {
         q1: { padding: 8, fill: grey },
         q1Labels: assign({}, baseLabelStyles, { padding: 3 }),
         q3: { padding: 8, fill: grey },
-        q3Labels: assign({}, baseLabelStyles, { padding: 3 })
+        q3Labels: assign({}, baseLabelStyles, { padding: 3 }),
       },
-      boxWidth: 20
+      boxWidth: 20,
     },
-    baseProps
+    baseProps,
   ),
   candlestick: assign(
     {
       style: {
         data: {
           stroke: charcoal,
-          strokeWidth: 1
+          strokeWidth: 1,
         },
-        labels: assign({}, baseLabelStyles, { padding: 5 })
+        labels: assign({}, baseLabelStyles, { padding: 5 }),
       },
       candleColors: {
         positive: "#ffffff",
-        negative: charcoal
-      }
+        negative: charcoal,
+      },
     },
-    baseProps
+    baseProps,
   ),
   chart: baseProps,
   errorbar: assign(
@@ -144,18 +145,18 @@ export default {
         data: {
           fill: "transparent",
           stroke: charcoal,
-          strokeWidth: 2
+          strokeWidth: 2,
         },
-        labels: baseLabelStyles
-      }
+        labels: baseLabelStyles,
+      },
     },
-    baseProps
+    baseProps,
   ),
   group: assign(
     {
-      colorScale: colors
+      colorScale: colors,
     },
-    baseProps
+    baseProps,
   ),
   histogram: assign(
     {
@@ -163,12 +164,12 @@ export default {
         data: {
           fill: grey,
           stroke: charcoal,
-          strokeWidth: 2
+          strokeWidth: 2,
         },
-        labels: baseLabelStyles
-      }
+        labels: baseLabelStyles,
+      },
     },
-    baseProps
+    baseProps,
   ),
   legend: {
     colorScale: colors,
@@ -177,11 +178,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(
     {
@@ -189,26 +190,26 @@ export default {
         data: {
           fill: "transparent",
           stroke: charcoal,
-          strokeWidth: 2
+          strokeWidth: 2,
         },
-        labels: baseLabelStyles
-      }
+        labels: baseLabelStyles,
+      },
     },
-    baseProps
+    baseProps,
   ),
   pie: {
     style: {
       data: {
         padding: 10,
         stroke: "transparent",
-        strokeWidth: 1
+        strokeWidth: 1,
       },
-      labels: assign({}, baseLabelStyles, { padding: 20 })
+      labels: assign({}, baseLabelStyles, { padding: 20 }),
     },
     colorScale: colors,
     width: 400,
     height: 400,
-    padding: 50
+    padding: 50,
   },
   scatter: assign(
     {
@@ -216,18 +217,18 @@ export default {
         data: {
           fill: charcoal,
           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" }),
@@ -235,11 +236,11 @@ export default {
       stroke: charcoal,
       strokeWidth: 1,
       fill: "#f0f0f0",
-      pointerEvents: "none"
+      pointerEvents: "none",
     },
     flyoutPadding: 5,
     cornerRadius: 5,
-    pointerLength: 10
+    pointerLength: 10,
   },
   voronoi: assign(
     {
@@ -247,20 +248,20 @@ export default {
         data: {
           fill: "transparent",
           stroke: "transparent",
-          strokeWidth: 0
+          strokeWidth: 0,
         },
         labels: assign({}, baseLabelStyles, {
           padding: 5,
-          pointerEvents: "none"
+          pointerEvents: "none",
         }),
         flyout: {
           stroke: charcoal,
           strokeWidth: 1,
           fill: "#f0f0f0",
-          pointerEvents: "none"
-        }
-      }
+          pointerEvents: "none",
+        },
+      },
     },
-    baseProps
-  )
+    baseProps,
+  ),
 };