TS: Migrate victory-cursor-container

.changeset/shiny-emus-film.md

@@ -0,0 +1,12 @@
+---
+"victory-core": patch
+"victory-axis": patch
+"victory-errorbar": patch
+"victory-scatter": patch
+"victory-cursor-container": patch
+---
+
+- Removed Template Literal Types to increase TS compatibility (fixes #2418)
+- Improved type for `VictoryLabelProps["textAnchor"]` (fixes #2361)
+- Fixed exported types for `VictoryAxis`, `VictoryBoxPlot`, `VictoryErrorBar`, and `VictoryScatter` (fixes #2411)
+- Migrate `victory-cursor-container` to TS (fixes #2402)

CONTRIBUTING.md

@@ -237,7 +237,7 @@ Here are more details:
 When you would like to add a changeset (which creates a file indicating the type of change), in your branch/PR issue this command:
 
 ```sh
-$ pnpm changeset
+$ pnpm run changeset
 ```
 
 to produce an interactive menu. Navigate the packages with arrow keys and hit `<space>` to select 1+ packages. Hit `<return>` when done. Select semver versions for packages and add appropriate messages. From there, you'll be prompted to enter a summary of the change. Some tips for this summary:
@@ -270,7 +270,7 @@ On the merge of a version packages PR, the changesets GitHub action will publish
 
 For exceptional circumstances, here is a quick guide to manually publishing from a local computer using changesets.
 
-1. Add a changeset with `pnpm changeset`. Add changeset file, review file, tweak, and commit.
+1. Add a changeset with `pnpm run changeset`. Add changeset file, review file, tweak, and commit.
 2. Make a version. Due to our changelog plugin you will need to create a personal GitHub token and pass it to the environment.
 
     ```sh

demo/js/components/immutable-demo.js

@@ -3,11 +3,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { assign, merge, keys, random, range, round } from "lodash";
 import { fromJS } from "immutable";
-import {
-  VictoryClipContainer,
-  VictoryLabel,
-  VictoryTheme,
-} from "victory-core";
+import { VictoryClipContainer, VictoryLabel, VictoryTheme } from "victory-core";
 
 import { VictoryChart } from "victory-chart";
 import { VictoryStack } from "victory-stack";
@@ -792,7 +788,7 @@ class App extends React.Component {
             padding={{ top: 100, bottom: 40, left: 50, right: 50 }}
             containerComponent={
               <VictoryCursorContainer
-                cursorLabel={(datum) =>
+                cursorLabel={({ datum }) =>
                   `${round(datum.x, 2)} , ${round(datum.y, 2)}`
                 }
               />

demo/ts/components/immutable-demo.tsx

@@ -824,7 +824,7 @@ export default class ImmutableDemo extends React.Component<
             padding={{ top: 100, bottom: 40, left: 50, right: 50 }}
             containerComponent={
               <VictoryCursorContainer
-                cursorLabel={(datum) =>
+                cursorLabel={({ datum }) =>
                   `${round(datum.x, 2)} , ${round(datum.y, 2)}`
                 }
               />

demo/ts/components/victory-cursor-container-demo.tsx

@@ -69,8 +69,6 @@ class App extends React.Component<any, VictoryCursorContainerStateInterface> {
       parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" },
     };
 
-    const cursorLabel = (datum: CoordinatesPropType) => round(datum.x, 2);
-
     return (
       <div className="demo">
         <div style={containerStyle}>
@@ -80,7 +78,9 @@ class App extends React.Component<any, VictoryCursorContainerStateInterface> {
             height={400}
             padding={{ top: 100, bottom: 40, left: 50, right: 50 }}
             containerComponent={
-              <VictoryCursorContainer cursorLabel={cursorLabel} />
+              <VictoryCursorContainer
+                cursorLabel={({ datum }) => round(datum.x, 2)}
+              />
             }
           >
             <VictoryLegend
@@ -107,7 +107,7 @@ class App extends React.Component<any, VictoryCursorContainerStateInterface> {
             domainPadding={{ x: 15 }}
             containerComponent={
               <VictoryCursorContainer
-                cursorLabel={cursorLabel}
+                cursorLabel={({ datum }) => round(datum.x, 2)}
                 cursorDimension="y"
                 defaultCursorValue={3}
               />
@@ -159,7 +159,7 @@ class App extends React.Component<any, VictoryCursorContainerStateInterface> {
             }}
             containerComponent={
               <VictoryCursorContainer
-                cursorLabel={(datum: CoordinatesPropType) => round(datum.x, 2)}
+                cursorLabel={({ datum }) => round(datum.x, 2)}
                 cursorDimension="x"
                 defaultCursorValue={1}
               />
@@ -197,7 +197,7 @@ class App extends React.Component<any, VictoryCursorContainerStateInterface> {
               <VictoryCursorContainer
                 defaultCursorValue={2}
                 cursorDimension="x"
-                cursorLabel={(datum: CoordinatesPropType) => round(datum.x, 2)}
+                cursorLabel={({ datum }) => round(datum.x, 2)}
                 cursorLabelOffset={15}
               />
             }

package.json

@@ -117,6 +117,7 @@
   "scripts": {
     "version": "pnpm changeset version && pnpm install --no-frozen-lockfile",
     "publish": "nps git:tag && pnpm changeset publish --no-git-tag",
+    "changeset": "changeset",
     "start": "concurrently --raw \"pnpm:build:lib:esm --watch\" \"webpack serve --config ./config/webpack/demo/webpack.config.dev.js --static demo/js --entry ./demo/js/app\"",
     "start:ts": "concurrently --raw \"pnpm:build:typescript --watch\" \"webpack serve --config ./config/webpack/demo/webpack.config.dev.js --static demo/ts --entry ./demo/ts/app\"",
     "check": "wireit",

packages/victory-core/src/types/callbacks.ts

@@ -13,7 +13,7 @@ export interface CallbackArgs {
   data?: Datum[];
   datum?: Datum;
   horizontal?: boolean;
-  index: ID;
+  index?: ID;
   x?: number;
   y?: number;
   scale?: {

packages/victory-core/src/victory-util/helpers.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-use-before-define */
 import React from "react";
 import { defaults, isFunction, property, pick, assign, keys } from "lodash";
+import { CallbackArgs, ValueOrCallback } from "../types/callbacks";
 
 // Private Functions
 
@@ -126,7 +127,10 @@ export function getStyles(style, defaultStyles) {
   };
 }
 
-export function evaluateProp(prop, props) {
+export function evaluateProp<TValue>(
+  prop: ValueOrCallback<TValue>,
+  props: CallbackArgs,
+): TValue {
   return isFunction(prop) ? prop(props) : prop;
 }
 

packages/victory-cursor-container/src/cursor-helpers.js → packages/victory-cursor-container/src/cursor-helpers.tsx

@@ -1,16 +1,17 @@
 import { Selection } from "victory-core";
 import { throttle, isFunction, mapValues } from "lodash";
+import { SVGCoordinateType } from "victory-core/src";
 
 const ON_MOUSE_MOVE_THROTTLE_MS = 16;
 
-const CursorHelpers = {
+class CursorHelpersClass {
   getDimension(props) {
     const { horizontal, cursorDimension } = props;
     if (!horizontal || !cursorDimension) {
       return cursorDimension;
     }
     return cursorDimension === "x" ? "y" : "x";
-  },
+  }
 
   withinBounds(point, bounds) {
     const { x1, x2, y1, y2 } = mapValues(bounds, Number);
@@ -21,14 +22,14 @@ const CursorHelpers = {
       y >= Math.min(y1, y2) &&
       y <= Math.max(y1, y2)
     );
-  },
+  }
 
-  onMouseMove(evt, targetProps) {
+  private handleMouseMove = (evt, targetProps) => {
     const { onCursorChange, domain } = targetProps;
     const cursorDimension = this.getDimension(targetProps);
     const parentSVG = targetProps.parentSVG || Selection.getParentSVG(evt);
     const cursorSVGPosition = Selection.getSVGEventCoordinates(evt, parentSVG);
-    let cursorValue = Selection.getDataCoordinates(
+    let cursorValue: SVGCoordinateType | null = Selection.getDataCoordinates(
       targetProps,
       targetProps.scale,
       cursorSVGPosition.x,
@@ -47,7 +48,7 @@ const CursorHelpers = {
     }
 
     if (isFunction(onCursorChange)) {
-      if (inBounds) {
+      if (cursorValue) {
         const value = cursorDimension
           ? cursorValue[cursorDimension]
           : cursorValue;
@@ -64,9 +65,16 @@ const CursorHelpers = {
         mutation: () => ({ cursorValue, parentSVG }),
       },
     ];
-  },
+  };
 
-  onTouchEnd(evt, targetProps) {
+  onMouseMove = throttle(this.handleMouseMove, ON_MOUSE_MOVE_THROTTLE_MS, {
+    leading: true,
+    trailing: false,
+  });
+
+  onMouseLeave = this.handleMouseMove;
+
+  onTouchEnd = (evt, targetProps) => {
     const { onCursorChange } = targetProps;
 
     if (isFunction(targetProps.onCursorChange)) {
@@ -80,10 +88,12 @@ const CursorHelpers = {
         mutation: () => ({ cursorValue: null }),
       },
     ];
-  },
-};
+  };
+}
 
-export default {
+export const CursorHelpers = new CursorHelpersClass();
+
+/* {
   ...CursorHelpers,
   onMouseMove: throttle(
     CursorHelpers.onMouseMove.bind(CursorHelpers),
@@ -96,3 +106,6 @@ export default {
   onMouseLeave: CursorHelpers.onMouseMove.bind(CursorHelpers),
   onTouchEnd: CursorHelpers.onTouchEnd.bind(CursorHelpers),
 };
+
+
+   */

packages/victory-cursor-container/src/index.tsx

@@ -0,0 +1,2 @@
+export * from "./cursor-helpers";
+export * from "./victory-cursor-container";

packages/victory-cursor-container/src/victory-cursor-container.js → packages/victory-cursor-container/src/victory-cursor-container.tsx

@@ -5,12 +5,38 @@ import {
   VictoryLabel,
   LineSegment,
   Helpers,
+  VictoryContainerProps,
+  CoordinatesPropType,
+  VictoryLabelProps,
+  ValueOrCallback,
 } from "victory-core";
 import { defaults, assign, isObject } from "lodash";
-import CursorHelpers from "./cursor-helpers";
+import { CursorHelpers } from "./cursor-helpers";
 
-export const cursorContainerMixin = (base) =>
-  class VictoryCursorContainer extends base {
+export type CursorCoordinatesPropType = CoordinatesPropType | number;
+
+export interface VictoryCursorContainerProps extends VictoryContainerProps {
+  cursorComponent?: React.ReactElement;
+  cursorDimension?: "x" | "y";
+  cursorLabel?: ValueOrCallback<VictoryLabelProps["text"]>;
+  cursorLabelComponent?: React.ReactElement;
+  cursorLabelOffset?: CursorCoordinatesPropType;
+  defaultCursorValue?: CursorCoordinatesPropType;
+  disable?: boolean;
+  onCursorChange?: (
+    value: CursorCoordinatesPropType,
+    props: VictoryCursorContainerProps,
+  ) => void;
+}
+
+type ComponentClass<TProps> = { new (props: TProps): React.Component<TProps> };
+
+export function cursorContainerMixin<
+  TBase extends ComponentClass<TProps>,
+  TProps extends VictoryCursorContainerProps,
+>(Base: TBase) {
+  // @ts-expect-error "TS2545: A mixin class must have a constructor with a single rest parameter of type 'any[]'."
+  return class VictoryCursorContainer extends Base {
     static displayName = "VictoryCursorContainer";
     static propTypes = {
       ...VictoryContainer.propTypes,
@@ -134,7 +160,7 @@ export const cursorContainerMixin = (base) =>
         return [];
       }
 
-      const newElements = [];
+      const newElements: React.ReactElement[] = [];
       const padding = this.getPadding(props);
       const cursorCoordinates = {
         x: horizontal ? scale.y(cursorValue.y) : scale.x(cursorValue.x),
@@ -205,5 +231,6 @@ export const cursorContainerMixin = (base) =>
       ];
     }
   };
+}
 
-export default cursorContainerMixin(VictoryContainer);
+export const VictoryCursorContainer = cursorContainerMixin(VictoryContainer);