victory-core 36.5.0 → 36.5.3

package/src/victory-state/defaults.ts

@@ -0,0 +1,2 @@
+export const DEFAULT_HEIGHT = 300;
+export const DEFAULT_WIDTH = 450;

package/src/victory-state/helpers/get-axis-data.ts

@@ -0,0 +1,14 @@
+import { AxisType, Datum, DomainValue } from "../../types/prop-types";
+import { isKeyValueObject } from "../../victory-util/type-helpers";
+
+export function getAxisData(data: Datum[], axis: AxisType) {
+  return data.reduce((acc, datum) => {
+    if (isKeyValueObject(datum)) {
+      const value = datum[axis];
+      if (value && typeof value !== "string") {
+        acc.push(value);
+      }
+    }
+    return acc;
+  }, [] as DomainValue[]);
+}

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

@@ -0,0 +1,79 @@
+import { get, isNil, orderBy } from "lodash";
+import * as React from "react";
+import { Datum, DatumValue } from "../../types/prop-types";
+import { isKeyValueObject } from "../../victory-util/type-helpers";
+import { VictoryProviderProps } from "../types";
+
+type DataProps = Pick<
+  VictoryProviderProps,
+  "data" | "x" | "y" | "sortKey" | "sortOrder" | "samples"
+>;
+
+export interface FormattedDatum {
+  x: DatumValue;
+  y: DatumValue;
+  _x: number | Date;
+  _y: number | Date;
+  xName?: string;
+  yName?: string;
+  [key: string]: DatumValue;
+}
+
+function getValue(datum: Datum, key: string): DatumValue {
+  if (typeof datum === "object") {
+    return get(datum, key);
+  }
+  return datum;
+}
+
+function getNumericValue(value: DatumValue, fallback: number): number | Date {
+  if (typeof value === "number" || value instanceof Date) {
+    return value;
+  }
+  return fallback;
+}
+
+export function getData({
+  x: xAccessor = "x",
+  y: yAccessor = "y",
+  sortKey,
+  sortOrder = "ascending",
+  data = [],
+}: DataProps = {}): FormattedDatum[] {
+  const formattedData = data.reduce((nonNullData, datum, index) => {
+    const x = getValue(datum, xAccessor);
+    const y = getValue(datum, yAccessor);
+    if (isNil(x) || isNil(y)) {
+      return nonNullData;
+    }
+    const _x = getNumericValue(x, index + 1);
+    const _y = getNumericValue(y, index + 1);
+
+    // TODO: Get this value if it is different
+    const xName = typeof x === "string" ? x : undefined;
+    const yName = typeof y === "string" ? y : undefined;
+
+    const additionalProperties = isKeyValueObject(datum) ? datum : {};
+
+    return [
+      ...nonNullData,
+      {
+        x,
+        y,
+        _x,
+        _y,
+        // Only set these properties if they exist
+        ...(xName ? { xName } : {}),
+        ...(yName ? { yName } : {}),
+        ...additionalProperties,
+      },
+    ];
+  }, [] as FormattedDatum[]);
+
+  if (sortKey) {
+    const order = sortOrder === "descending" ? "desc" : "asc";
+    return orderBy(formattedData, sortKey, order);
+  }
+
+  return formattedData;
+}

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

@@ -0,0 +1,62 @@
+import * as d3Array from "victory-vendor/d3-array";
+import { getAxisData } from "./get-axis-data";
+import {
+  getValueForAxis,
+  isDate,
+  isTuple,
+} from "../../victory-util/type-helpers";
+import { VictoryProviderProps } from "../types";
+import {
+  Tuple,
+  AxisType,
+  DomainTuple,
+  DomainValue,
+} from "../../types/prop-types";
+
+type DomainProps = Pick<
+  VictoryProviderProps,
+  "data" | "domain" | "maxDomain" | "minDomain" | "includeZero"
+>;
+
+// TODO: What should this default value be?
+const DEFAULT_MIN = 0;
+const DEFAULT_MAX = 1;
+
+function getDomainFromMinMax(
+  min: number = DEFAULT_MIN,
+  max: number = DEFAULT_MAX,
+): Tuple<number> {
+  // TODO: Victoy currently has some really specific logic in getDomainFromMinMax
+  // that adds or subtracts a very small number from each domain to avoid the min
+  // and max being the same value. This has resulted in some weird behavior in the
+  // past, so we should revisit this.
+  return [min, max];
+}
+
+export function getDomain(
+  { data = [], includeZero, ...props }: DomainProps,
+  axis: AxisType,
+): DomainTuple {
+  const domainFromProps = getValueForAxis<DomainTuple>(props.domain, axis);
+  const axisData = getAxisData(data, axis);
+
+  if (includeZero && axis === "y") {
+    axisData.push(0);
+  }
+
+  if (isTuple(domainFromProps)) {
+    return domainFromProps;
+  }
+
+  const [min, max] = d3Array.extent(axisData) as DomainTuple | Tuple<undefined>;
+
+  const minDomain = getValueForAxis<DomainValue>(props.minDomain, axis) || min;
+  const maxDomain = getValueForAxis<DomainValue>(props.maxDomain, axis) || max;
+
+  if (isDate(minDomain) && isDate(maxDomain)) {
+    return [min, max] as Tuple<Date>;
+  }
+
+  // TODO: There might be an edge case here where we have mixed types
+  return getDomainFromMinMax(minDomain as number, maxDomain as number);
+}

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;
+}