victory-core 36.4.1 → 36.5.0

package/src/victory-transition/{victory-transition.js → victory-transition.tsx}

@@ -1,14 +1,52 @@
 import React from "react";
 import PropTypes from "prop-types";
-import VictoryAnimation from "../victory-animation/victory-animation";
+import { VictoryAnimation } from "../victory-animation/victory-animation";
 import * as Collection from "../victory-util/collection";
 import * as Helpers from "../victory-util/helpers";
 import TimerContext from "../victory-util/timer-context";
 import * as Transitions from "../victory-util/transitions";
-import { defaults, isFunction, pick, isObject } from "lodash";
+import { defaults, isFunction, pick } from "lodash";
 import isEqual from "react-fast-compare";
+import Timer from "../victory-util/timer";
 
-export default class VictoryTransition extends React.Component {
+type VictoryTransitionChild = React.ReactElement<
+  // Props:
+  {
+    polar?: boolean;
+    domain?: number[] | { x: number[]; y: number[] };
+    groupComponent?: React.ReactElement;
+  },
+  // Type:
+  {
+    new (props: any): React.Component<any, any>;
+    continuous?: boolean;
+  }
+>;
+interface VictoryTransitionProps {
+  animate?: boolean | any;
+  animationWhitelist?: string[];
+  children: VictoryTransitionChild;
+}
+
+interface VictoryTransitionState {
+  oldProps?: VictoryTransitionProps | null;
+  nextProps?: VictoryTransitionProps;
+  nodesShouldLoad?: boolean;
+  nodesDoneLoad?: boolean;
+  nodesWillExit?: boolean;
+  nodesWillEnter?: boolean;
+  nodesShouldEnter?: boolean;
+  childrenTransitions?: unknown;
+}
+
+export interface VictoryTransition {
+  context: React.ContextType<typeof TimerContext>;
+}
+
+export class VictoryTransition extends React.Component<
+  VictoryTransitionProps,
+  VictoryTransitionState
+> {
   static displayName = "VictoryTransition";
 
   static propTypes = {
@@ -18,6 +56,9 @@ export default class VictoryTransition extends React.Component {
   };
 
   static contextType = TimerContext;
+  private continuous: boolean;
+  private timer: Timer;
+  private transitionProps: any;
 
   constructor(props, context) {
     super(props, context);
@@ -28,7 +69,6 @@ export default class VictoryTransition extends React.Component {
     const child = this.props.children;
     const polar = child.props.polar;
     this.continuous = !polar && child.type && child.type.continuous === true;
-    this.getTransitionState = this.getTransitionState.bind(this);
     this.timer = this.context.transitionTimer;
   }
 
@@ -36,7 +76,7 @@ export default class VictoryTransition extends React.Component {
     this.setState({ nodesShouldLoad: true }); //eslint-disable-line react/no-did-mount-set-state
   }
 
-  shouldComponentUpdate(nextProps) {
+  shouldComponentUpdate(nextProps: VictoryTransitionProps) {
     if (!isEqual(this.props, nextProps)) {
       this.timer.bypassAnimation();
       this.setState(this.getTransitionState(this.props, nextProps), () =>
@@ -50,7 +90,10 @@ export default class VictoryTransition extends React.Component {
     this.timer.stop();
   }
 
-  getTransitionState(props, nextProps) {
+  private getTransitionState(
+    props: VictoryTransitionProps,
+    nextProps: VictoryTransitionProps
+  ): VictoryTransitionState {
     const { animate } = props;
     if (!animate) {
       return {};
@@ -78,7 +121,10 @@ export default class VictoryTransition extends React.Component {
     }
   }
 
-  getDomainFromChildren(props, axis) {
+  private getDomainFromChildren(
+    props: VictoryTransitionProps,
+    axis: "x" | "y"
+  ) {
     const getChildDomains = (children) => {
       return children.reduce((memo, child) => {
         if (child.type && isFunction(child.type.getDomain)) {
@@ -94,8 +140,10 @@ export default class VictoryTransition extends React.Component {
       }, []);
     };
 
-    const child = React.Children.toArray(props.children)[0];
-    const childProps = child.props || {};
+    const child = React.Children.toArray(
+      props.children
+    )[0] as VictoryTransitionChild;
+    const childProps: any = child.props || {};
     const domain = Array.isArray(childProps.domain)
       ? childProps.domain
       : childProps.domain && childProps.domain[axis];
@@ -121,10 +169,10 @@ export default class VictoryTransition extends React.Component {
       : this.props;
   }
 
-  pickDomainProps(props) {
-    const parentState = isObject(props.animate) && props.animate.parentState;
+  private pickDomainProps(props: VictoryTransitionProps) {
+    const parentState = props.animate?.parentState;
     if (parentState && parentState.nodesWillExit) {
-      return this.continous || parentState.continuous
+      return this.continuous || parentState.continuous
         ? parentState.nextProps || this.state.nextProps || props
         : props;
     }
@@ -146,13 +194,14 @@ export default class VictoryTransition extends React.Component {
 
   render() {
     const props = this.pickProps();
-    const getTransitionProps =
-      isObject(this.props.animate) && this.props.animate.getTransitions
-        ? this.props.animate.getTransitions
-        : Transitions.getTransitionPropsFactory(props, this.state, (newState) =>
-            this.setState(newState)
-          );
-    const child = React.Children.toArray(props.children)[0];
+    const getTransitionProps = this.props.animate?.getTransitions
+      ? this.props.animate.getTransitions
+      : Transitions.getTransitionPropsFactory(props, this.state, (newState) =>
+          this.setState(newState)
+        );
+    const child = React.Children.toArray(
+      props.children
+    )[0] as VictoryTransitionChild;
     const transitionProps = getTransitionProps(child);
     this.transitionProps = transitionProps;
     const domain = {

package/src/victory-util/add-events.js

@@ -13,7 +13,12 @@ import {
 } from "lodash";
 import * as Events from "./events";
 import isEqual from "react-fast-compare";
-import VictoryTransition from "../victory-transition/victory-transition";
+import { VictoryTransition } from "../victory-transition/victory-transition";
+
+// DISCLAIMER:
+// This file is not currently tested, and it is first on the list of files
+// to refactor in our current refactoring effort. Please do not make changes
+// to this file without manual testing and/or refactoring and adding tests.
 
 const datumHasXandY = (datum) => {
   return !isNil(datum._x) && !isNil(datum._y);

package/src/victory-util/axis.js

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

package/src/victory-util/collection.js

@@ -1,4 +1,3 @@
-/* eslint-disable func-style */
 /* eslint-disable no-use-before-define */
 
 function isNonEmptyArray(collection) {

package/src/victory-util/data.js

@@ -1,4 +1,3 @@
-/* eslint-disable func-style */
 /* eslint-disable no-use-before-define */
 import React from "react";
 import {

package/src/victory-util/default-transitions.js

@@ -1,4 +1,3 @@
-/* eslint-disable func-style */
 export function continuousTransitions() {
   return {
     onLoad: {

package/src/victory-util/domain.js

@@ -1,4 +1,3 @@
-/* eslint-disable func-style */
 /* eslint-disable no-use-before-define */
 import React from "react";
 import {

package/src/victory-util/events.js

@@ -1,4 +1,4 @@
-/* eslint-disable func-style,no-use-before-define */
+/* eslint-disable no-use-before-define */
 import {
   assign,
   isEmpty,

package/src/victory-util/helpers.js

@@ -1,4 +1,3 @@
-/* eslint-disable func-style */
 /* eslint-disable no-use-before-define */
 import React from "react";
 import { defaults, isFunction, property, pick, assign, keys } from "lodash";

package/src/victory-util/immutable.js

@@ -1,4 +1,3 @@
-/* eslint-disable func-style */
 export const IMMUTABLE_ITERABLE = "@@__IMMUTABLE_ITERABLE__@@";
 export const IMMUTABLE_RECORD = "@@__IMMUTABLE_RECORD__@@";
 export const IMMUTABLE_LIST = "@@__IMMUTABLE_LIST__@@";

package/src/victory-util/label-helpers.js

@@ -1,4 +1,3 @@
-/* eslint-disable func-style */
 /* eslint-disable no-use-before-define */
 import * as Helpers from "./helpers";
 import { defaults } from "lodash";

package/src/victory-util/log.js

@@ -2,7 +2,6 @@
 /* eslint-disable no-console */
 
 // TODO: Use "warning" npm module like React is switching to.
-// eslint-disable-next-line func-style
 export function warn(message) {
   if (process.env.NODE_ENV !== "production") {
     if (console && console.warn) {

package/src/victory-util/point-path-helpers.ts

@@ -0,0 +1,119 @@
+/*eslint no-magic-numbers: ["error", { "ignore": [0, 1, 2, 2.5, 3] }]*/
+import { range } from "lodash";
+
+export function circle(x: number, y: number, size: number) {
+  return `M ${x}, ${y}
+      m ${-size}, 0
+      a ${size}, ${size} 0 1,0 ${size * 2},0
+      a ${size}, ${size} 0 1,0 ${-size * 2},0`;
+}
+
+export function square(x: number, y: number, size: number) {
+  const baseSize = 0.87 * size; // eslint-disable-line no-magic-numbers
+  const x0 = x - baseSize;
+  const y1 = y + baseSize;
+  const distance = x + baseSize - x0;
+  return `M ${x0}, ${y1}
+      h${distance}
+      v-${distance}
+      h-${distance}
+      z`;
+}
+
+export function diamond(x: number, y: number, size: number) {
+  const baseSize = 0.87 * size; // eslint-disable-line no-magic-numbers
+  const length = Math.sqrt(2 * (baseSize * baseSize));
+  return `M ${x}, ${y + length}
+      l ${length}, -${length}
+      l -${length}, -${length}
+      l -${length}, ${length}
+      l ${length}, ${length}
+      z`;
+}
+
+export function triangleDown(x: number, y: number, size: number) {
+  const height = (size / 2) * Math.sqrt(3);
+  const x0 = x - size;
+  const x1 = x + size;
+  const y0 = y - size;
+  const y1 = y + height;
+  return `M ${x0}, ${y0}
+      L ${x1}, ${y0}
+      L ${x}, ${y1}
+      z`;
+}
+
+export function triangleUp(x: number, y: number, size: number) {
+  const height = (size / 2) * Math.sqrt(3);
+  const x0 = x - size;
+  const x1 = x + size;
+  const y0 = y - height;
+  const y1 = y + size;
+  return `M ${x0}, ${y1}
+      L ${x1}, ${y1}
+      L ${x}, ${y0}
+      z`;
+}
+
+export function plus(x: number, y: number, size: number) {
+  const baseSize = 1.1 * size; // eslint-disable-line no-magic-numbers
+  const distance = baseSize / 1.5; // eslint-disable-line no-magic-numbers
+  return `
+      M ${x - distance / 2}, ${y + baseSize}
+      v-${distance}
+      h-${distance}
+      v-${distance}
+      h${distance}
+      v-${distance}
+      h${distance}
+      v${distance}
+      h${distance}
+      v${distance}
+      h-${distance}
+      v${distance}
+      z`;
+}
+
+export function cross(x: number, y: number, size: number) {
+  const baseSize = 0.8 * size; // eslint-disable-line no-magic-numbers
+  const distance = baseSize / 1.5; // eslint-disable-line no-magic-numbers
+  return `
+      M ${x - distance / 2}, ${y + baseSize + distance}
+      v-${distance * 2}
+      h-${distance}
+      v-${distance}
+      h${distance}
+      v-${distance}
+      h${distance}
+      v${distance}
+      h${distance}
+      v${distance}
+      h-${distance}
+      v${distance * 2}
+      z`;
+}
+
+export function minus(x: number, y: number, size: number) {
+  const baseSize = 1.1 * size; // eslint-disable-line no-magic-numbers
+  const lineHeight = baseSize - baseSize * 0.3; // eslint-disable-line no-magic-numbers
+  const x0 = x - baseSize;
+  const y1 = y + lineHeight / 2;
+  const distance = x + baseSize - x0;
+  return `M ${x0}, ${y1}
+      h${distance}
+      v-${lineHeight}
+      h-${distance}
+      z`;
+}
+
+export function star(x: number, y: number, size: number) {
+  const baseSize = 1.35 * size; // eslint-disable-line no-magic-numbers
+  const angle = Math.PI / 5; // eslint-disable-line no-magic-numbers
+  // eslint-disable-next-line no-magic-numbers
+  const starCoords = range(10).map((index) => {
+    const length = index % 2 === 0 ? baseSize : baseSize / 2;
+    return `${length * Math.sin(angle * (index + 1)) + x},
+        ${length * Math.cos(angle * (index + 1)) + y}`;
+  });
+  return `M ${starCoords.join("L")} z`;
+}

package/src/victory-util/prop-types.js

@@ -1,4 +1,3 @@
-/* eslint-disable func-style */
 /*eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 1, 2] }]*/
 import { isFunction, find, isRegExp } from "lodash";
 import * as Log from "./log";

package/src/victory-util/scale.js

@@ -1,4 +1,3 @@
-/* eslint-disable func-style */
 /* eslint-disable no-use-before-define */
 import { includes, isFunction, isPlainObject } from "lodash";
 import * as Helpers from "./helpers";

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 "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";