victory-core 36.3.2 → 36.5.0

package/src/victory-util/scale.js

@@ -1,9 +1,8 @@
-/* eslint-disable func-style */
 /* eslint-disable no-use-before-define */
 import { includes, isFunction, isPlainObject } from "lodash";
 import * as Helpers from "./helpers";
 import * as Collection from "./collection";
-import * as d3Scale from "d3-scale";
+import * as d3Scale from "victory-vendor/d3-scale";
 
 const supportedScaleStrings = ["linear", "time", "log", "sqrt"];
 
@@ -110,19 +109,28 @@ export function getScaleType(props, axis) {
   );
 }
 
+// Ordered type inference off of function fields.
+// **Note**: Brittle because reliant on d3 internals.
+const DUCK_TYPES = [
+  { name: "quantile", method: "quantiles" },
+  { name: "log", method: "base" }
+  // TODO(2214): Re-evaluate (1) duck typing approach, and (2) if duck typing,
+  //   do we need a different approach? (Multiple keys? Stringifying functions?)
+  // https://github.com/FormidableLabs/victory/issues/2214
+  // Below are matches that don't seem to otherwise occur in Victory code base.
+  // { name: "ordinal", method: "unknown" },
+  // { name: "pow-sqrt", method: "exponent" },
+  // { name: "quantize-threshold", method: "invertExtent" }
+];
+
 export function getType(scale) {
   if (typeof scale === "string") {
     return scale;
   }
-  const duckTypes = [
-    { name: "log", method: "base" },
-    { name: "ordinal", method: "unknown" },
-    { name: "pow-sqrt", method: "exponent" },
-    { name: "quantile", method: "quantiles" },
-    { name: "quantize-threshold", method: "invertExtent" }
-  ];
-  const scaleType = duckTypes.filter((type) => {
+
+  const scaleType = DUCK_TYPES.filter((type) => {
     return scale[type.method] !== undefined;
   })[0];
+
   return scaleType ? scaleType.name : undefined;
 }

package/src/victory-util/selection.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { DomainPropType, ScalePropType, SVGCoordinateType } from "./types";
+
+export function getParentSVG(evt: React.SyntheticEvent): string;
+
+export function getSVGEventCoordinates(
+  evt: React.SyntheticEvent,
+  svg?: SVGElement
+): SVGCoordinateType;
+
+export function getDomainCoordinates(
+  props: any,
+  domain?: DomainPropType
+): DomainPropType;
+
+export function getDataCoordinates(
+  props: any,
+  scale: ScalePropType,
+  x: number,
+  y: number
+): SVGCoordinateType;
+
+export function getBounds(props: any): SVGCoordinateType;

package/src/victory-util/selection.js

@@ -1,4 +1,3 @@
-/* eslint-disable func-style */
 /* eslint-disable no-use-before-define */
 
 import * as Collection from "./collection";

package/src/victory-util/style.js

@@ -1,4 +1,3 @@
-/* eslint-disable func-style */
 /**
  * Given an object with CSS/SVG transform definitions, return the string value
  * for use with the `transform` CSS property or SVG attribute. Note that we

package/src/victory-util/textsize.d.ts

@@ -0,0 +1,8 @@
+import { TextSizeStyleInterface } from "./types";
+
+export function approximateTextSize(
+  text: string,
+  style?: TextSizeStyleInterface
+): { width: number; height: number };
+
+export function convertLengthToPixels(length: string, fontSize: number): number;

package/src/victory-util/{timer.js → timer.ts}

@@ -1,10 +1,25 @@
-import { timer, now } from "d3-timer";
+import { timer, now } from "victory-vendor/d3-timer";
+
+interface D3Timer {
+  new (callback): void;
+  stop(): void;
+}
+
+type Callback = (elapsed: number, duration: number) => void;
 
 export default class Timer {
+  private shouldAnimate: boolean;
+  private readonly subscribers: Array<{
+    callback: Callback;
+    startTime: number;
+    duration: number;
+  }>;
+  private activeSubscriptions: number;
+  private timer: D3Timer | null;
+
   constructor() {
     this.shouldAnimate = true;
     this.subscribers = [];
-    this.loop = this.loop.bind(this);
     this.timer = null;
     this.activeSubscriptions = 0;
   }
@@ -17,11 +32,11 @@ export default class Timer {
     this.shouldAnimate = true;
   }
 
-  loop() {
+  loop = () => {
     this.subscribers.forEach((s) => {
       s.callback(now() - s.startTime, s.duration);
     });
-  }
+  };
 
   start() {
     if (!this.timer) {
@@ -36,7 +51,7 @@ export default class Timer {
     }
   }
 
-  subscribe(callback, duration) {
+  subscribe(callback: Callback, duration: number) {
     duration = this.shouldAnimate ? duration : 0;
     const subscriptionID = this.subscribers.push({
       startTime: now(),

package/src/victory-util/transitions.js

@@ -1,4 +1,3 @@
-/* eslint-disable func-style */
 import { assign, defaults, identity, keys } from "lodash";
 import React from "react";
 

package/src/victory-util/types.ts

@@ -0,0 +1,247 @@
+import * as React from "react";
+import { OriginType } from "../victory-label/victory-label";
+import {
+  NumberOrCallback,
+  PaddingProps,
+  VictoryThemeDefinition
+} from "../victory-theme/victory-theme";
+import { StringOrCallback, StringOrNumberOrCallback } from "../types";
+import {
+  AnimationEasing,
+  AnimationStyle
+} from "../victory-animation/victory-animation";
+
+export type StringOrNumberOrList = string | number | (string | number)[];
+
+export interface AnimatePropTypeInterface {
+  duration?: number;
+  onEnd?: () => void;
+  onExit?: {
+    duration?: number;
+    before?: (datum: any) => AnimationStyle;
+  };
+  onEnter?: {
+    duration?: number;
+    before?: (datum: any) => AnimationStyle;
+    after?: (datum: any) => AnimationStyle;
+  };
+  onLoad?: {
+    duration?: number;
+    before?: (datum: any) => AnimationStyle;
+    after?: (datum: any) => AnimationStyle;
+  };
+  easing?: AnimationEasing;
+  animationWhitelist?: string[];
+}
+
+export interface EventCallbackInterface<TTarget, TEventKey> {
+  childName?: string | string[];
+  target?: TTarget;
+  eventKey?: TEventKey;
+  mutation: (props: any) => any;
+  callback?: (props: any) => any;
+}
+
+export interface EventPropTypeInterface<TTarget, TEventKey> {
+  childName?: string | Array<StringOrNumberOrCallback>;
+  target: TTarget;
+  eventKey?: TEventKey;
+  eventHandlers: {
+    [key: string]:
+      | {
+          (
+            event: React.SyntheticEvent<any>,
+            props?: any
+          ): EventCallbackInterface<TTarget, TEventKey>;
+        }
+      | {
+          (
+            event: React.SyntheticEvent<any>,
+            props?: any
+          ): EventCallbackInterface<TTarget, TEventKey>[];
+        }
+      | {
+          (event: React.SyntheticEvent<any>, props?: any): void;
+        };
+  };
+}
+
+export type DomainTuple = [number, number] | [Date, Date];
+export type DomainPropObjectType =
+  | { x?: DomainTuple; y: DomainTuple }
+  | { x: DomainTuple; y?: DomainTuple };
+export type DomainPropType = DomainPropObjectType | DomainTuple;
+
+export type PaddingType = number | [number, number];
+export type DomainPaddingPropType =
+  | PaddingType
+  | {
+      x?: PaddingType;
+      y?: PaddingType;
+    };
+
+export type RangeTuple = [number, number];
+export type RangePropType = RangeTuple | { x?: RangeTuple; y?: RangeTuple };
+
+/**
+ * D3 scale function shape. Don"t want to introduce typing dependency to d3
+ */
+export interface D3Scale {
+  (input: string | number): number;
+  domain: () => any;
+  range: () => any;
+  copy: () => any;
+}
+
+export type ScalePropType = "linear" | "time" | "log" | "sqrt";
+
+export type CategoryPropType =
+  | string[]
+  | { x: string[] }
+  | { y: string[] }
+  | {
+      x: string[];
+      y: string[];
+    };
+
+export type DataGetterPropType =
+  | number
+  | string
+  | string[]
+  | { (data: any): number | string | string[] }
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  | Function;
+
+export type InterpolationPropType =
+  | "basis"
+  | "basisClosed"
+  | "basisOpen"
+  | "bundle"
+  | "cardinal"
+  | "cardinalClosed"
+  | "cardinalOpen"
+  | "catmullRom"
+  | "catmullRomClosed"
+  | "catmullRomOpen"
+  | "linear"
+  | "linearClosed"
+  | "monotoneX"
+  | "monotoneY"
+  | "natural"
+  | "radial"
+  | "step"
+  | "stepAfter"
+  | "stepBefore";
+
+export type ColorScalePropType =
+  | "grayscale"
+  | "qualitative"
+  | "heatmap"
+  | "warm"
+  | "cool"
+  | "red"
+  | "green"
+  | "blue"
+  | string[];
+
+export type SortOrderPropType = "ascending" | "descending";
+
+export type SVGCoordinateType = { x: number; y: number };
+
+export interface VictoryCommonThemeProps {
+  animate?: boolean | AnimatePropTypeInterface;
+  colorScale?: ColorScalePropType;
+  containerComponent?: React.ReactElement;
+  domainPadding?: DomainPaddingPropType;
+  externalEventMutations?: EventCallbackInterface<
+    string | string[],
+    StringOrNumberOrList
+  >[];
+  groupComponent?: React.ReactElement;
+  height?: number;
+  horizontal?: boolean;
+  maxDomain?: number | { x?: number; y?: number };
+  minDomain?: number | { x?: number; y?: number };
+  name?: string;
+  origin?: OriginType;
+  padding?: PaddingProps;
+  polar?: boolean;
+  range?: RangePropType;
+  scale?:
+    | ScalePropType
+    | D3Scale
+    | {
+        x?: ScalePropType | D3Scale;
+        y?: ScalePropType | D3Scale;
+      };
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  sharedEvents?: { events: any[]; getEventState: Function };
+  singleQuadrantDomainPadding?: boolean | { x?: boolean; y?: boolean };
+  standalone?: boolean;
+  width?: number;
+}
+
+export interface VictoryCommonProps extends VictoryCommonThemeProps {
+  theme?: VictoryThemeDefinition;
+}
+
+export interface VictoryCommonPrimitiveProps {
+  active?: boolean;
+  ariaLabel?: StringOrCallback;
+  className?: string;
+  clipPath?: string;
+  data?: any;
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  desc?: string | Function;
+  disableInlineStyles?: boolean;
+  events?: object;
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  id?: number | string | Function;
+  index?: number | string;
+  origin?: OriginType;
+  polar?: boolean;
+  role?: string;
+  scale?: any;
+  shapeRendering?: string;
+  style?: any;
+  tabIndex?: NumberOrCallback;
+  transform?: string;
+}
+
+export interface VictoryDatableProps {
+  categories?: CategoryPropType;
+  data?: any[];
+  dataComponent?: React.ReactElement;
+  domain?: DomainPropType;
+  domainPadding?: DomainPaddingPropType;
+  samples?: number;
+  sortKey?: DataGetterPropType;
+  sortOrder?: SortOrderPropType;
+  x?: DataGetterPropType;
+  y?: DataGetterPropType;
+  y0?: DataGetterPropType;
+}
+
+export interface VictoryLabelableProps {
+  labelComponent?: React.ReactElement;
+}
+
+export interface VictoryMultiLabelableProps extends VictoryLabelableProps {
+  labels?:
+    | string[]
+    | number[]
+    | { (data: any): string | string[] | number | number[] | null };
+}
+
+export interface VictorySingleLabelableProps extends VictoryLabelableProps {
+  label?: string | { (data: any): string | number | null };
+}
+
+export interface TextSizeStyleInterface {
+  angle?: number;
+  characterConstant?: string;
+  fontFamily?: string;
+  fontSize?: number | string;
+  letterSpacing?: string;
+  lineHeight?: number;
+}

package/src/victory-util/user-props.js

@@ -1,3 +1,5 @@
+import * as React from "react";
+
 /*
   USER_PROPS_SAFELIST is to contain any string deemed safe for user props.
   The startsWidth array will contain the start of any accepted user-prop that 
@@ -48,6 +50,19 @@ const testIfSafeProp = (key) => {
   return false;
 };
 
+/**
+ * Gets the value from props if a function value is provided
+ * @param {any} value: maybe function value
+ * @param {Object} props: props object
+ * @returns {any} newValue
+ */
+const getValue = (value, props) => {
+  if (typeof value === "function") {
+    return value(props);
+  }
+  return value;
+};
+
 /**
  * getSafeUserProps - function that takes in a props object and removes any
  * key-value entries that do not match filter strings in the USER_PROPS_SAFELIST
@@ -59,6 +74,21 @@ const testIfSafeProp = (key) => {
 export const getSafeUserProps = (props) => {
   const propsToFilter = { ...props };
   return Object.fromEntries(
-    Object.entries(propsToFilter).filter(([key]) => testIfSafeProp(key))
+    Object.entries(propsToFilter)
+      .filter(([key]) => testIfSafeProp(key))
+      .map(([key, value]) => {
+        return [key, getValue(value, props)];
+      })
   );
 };
+
+/**
+ * Wraps a component and adds safe user props
+ *
+ * @param {ReactNode} component: parent component
+ * @param {Object} props: props to be filtered
+ * @returns {ReactNode} modified component
+ */
+export const withSafeUserProps = (component, props) => {
+  return React.cloneElement(component, getSafeUserProps(props));
+};

package/src/victory-util/wrapper.js

@@ -1,4 +1,3 @@
-/* eslint-disable func-style */
 import {
   assign,
   defaults,