victory-cursor-container 36.6.0 → 36.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/dist/victory-cursor-container.js +148 -110
- package/dist/victory-cursor-container.min.js +1 -1
- package/es/cursor-helpers.d.ts +33 -0
- package/es/cursor-helpers.js +114 -79
- package/es/index.d.ts +3 -37
- package/es/index.js +2 -2
- package/es/victory-cursor-container.d.ts +221 -0
- package/es/victory-cursor-container.js +8 -7
- package/lib/cursor-helpers.d.ts +33 -0
- package/lib/cursor-helpers.js +117 -85
- package/lib/index.d.ts +3 -37
- package/lib/index.js +22 -24
- package/lib/victory-cursor-container.d.ts +221 -0
- package/lib/victory-cursor-container.js +15 -16
- package/package.json +24 -15
- package/src/{cursor-helpers.js → cursor-helpers.tsx} +24 -11
- package/src/index.tsx +2 -0
- package/src/{victory-cursor-container.js → victory-cursor-container.tsx} +32 -5
- package/src/index.d.ts +0 -37
- package/src/index.js +0 -5
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "victory-cursor-container",
|
|
3
|
-
"version": "36.6.
|
|
3
|
+
"version": "36.6.1",
|
|
4
4
|
"description": "Interactive Cursor Component for Victory",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"data visualization",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"lodash": "^4.17.19",
|
|
24
24
|
"prop-types": "^15.8.1",
|
|
25
|
-
"victory-core": "^36.6.
|
|
25
|
+
"victory-core": "^36.6.1"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"react": ">=16.6.0"
|
|
@@ -123,6 +123,14 @@
|
|
|
123
123
|
"pnpm-lock.yaml"
|
|
124
124
|
]
|
|
125
125
|
},
|
|
126
|
+
"check": {
|
|
127
|
+
"dependencies": [
|
|
128
|
+
"types:check",
|
|
129
|
+
"jest",
|
|
130
|
+
"format",
|
|
131
|
+
"lint"
|
|
132
|
+
]
|
|
133
|
+
},
|
|
126
134
|
"types:check": {
|
|
127
135
|
"command": "nps types:pkg:check",
|
|
128
136
|
"files": [
|
|
@@ -175,6 +183,19 @@
|
|
|
175
183
|
"pnpm-lock.yaml"
|
|
176
184
|
]
|
|
177
185
|
},
|
|
186
|
+
"format:fix": {
|
|
187
|
+
"command": "pnpm run format || nps format:pkg:fix",
|
|
188
|
+
"files": [
|
|
189
|
+
"src/**",
|
|
190
|
+
"*.json",
|
|
191
|
+
"../../.prettierignore",
|
|
192
|
+
"../../.prettierrc.json"
|
|
193
|
+
],
|
|
194
|
+
"output": [],
|
|
195
|
+
"packageLocks": [
|
|
196
|
+
"pnpm-lock.yaml"
|
|
197
|
+
]
|
|
198
|
+
},
|
|
178
199
|
"lint": {
|
|
179
200
|
"command": "nps lint:pkg",
|
|
180
201
|
"files": [
|
|
@@ -192,19 +213,6 @@
|
|
|
192
213
|
"pnpm-lock.yaml"
|
|
193
214
|
]
|
|
194
215
|
},
|
|
195
|
-
"format:fix": {
|
|
196
|
-
"command": "pnpm run format || nps format:pkg:fix",
|
|
197
|
-
"files": [
|
|
198
|
-
"src/**",
|
|
199
|
-
"*.json",
|
|
200
|
-
"../../.prettierignore",
|
|
201
|
-
"../../.prettierrc.json"
|
|
202
|
-
],
|
|
203
|
-
"output": [],
|
|
204
|
-
"packageLocks": [
|
|
205
|
-
"pnpm-lock.yaml"
|
|
206
|
-
]
|
|
207
|
-
},
|
|
208
216
|
"lint:fix": {
|
|
209
217
|
"command": "pnpm run lint || nps lint:pkg:fix",
|
|
210
218
|
"files": [
|
|
@@ -251,6 +259,7 @@
|
|
|
251
259
|
"build:dist": "wireit",
|
|
252
260
|
"build:dist:dev": "wireit",
|
|
253
261
|
"build:dist:min": "wireit",
|
|
262
|
+
"check": "wireit",
|
|
254
263
|
"types:check": "wireit",
|
|
255
264
|
"types:create": "wireit",
|
|
256
265
|
"format": "wireit",
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
import { Selection } from "victory-core";
|
|
2
2
|
import { throttle, isFunction, mapValues } from "lodash";
|
|
3
|
+
import { SVGCoordinateType } from "victory-core/src";
|
|
3
4
|
|
|
4
5
|
const ON_MOUSE_MOVE_THROTTLE_MS = 16;
|
|
5
6
|
|
|
6
|
-
|
|
7
|
+
class CursorHelpersClass {
|
|
7
8
|
getDimension(props) {
|
|
8
9
|
const { horizontal, cursorDimension } = props;
|
|
9
10
|
if (!horizontal || !cursorDimension) {
|
|
10
11
|
return cursorDimension;
|
|
11
12
|
}
|
|
12
13
|
return cursorDimension === "x" ? "y" : "x";
|
|
13
|
-
}
|
|
14
|
+
}
|
|
14
15
|
|
|
15
16
|
withinBounds(point, bounds) {
|
|
16
17
|
const { x1, x2, y1, y2 } = mapValues(bounds, Number);
|
|
@@ -21,14 +22,14 @@ const CursorHelpers = {
|
|
|
21
22
|
y >= Math.min(y1, y2) &&
|
|
22
23
|
y <= Math.max(y1, y2)
|
|
23
24
|
);
|
|
24
|
-
}
|
|
25
|
+
}
|
|
25
26
|
|
|
26
|
-
|
|
27
|
+
private handleMouseMove = (evt, targetProps) => {
|
|
27
28
|
const { onCursorChange, domain } = targetProps;
|
|
28
29
|
const cursorDimension = this.getDimension(targetProps);
|
|
29
30
|
const parentSVG = targetProps.parentSVG || Selection.getParentSVG(evt);
|
|
30
31
|
const cursorSVGPosition = Selection.getSVGEventCoordinates(evt, parentSVG);
|
|
31
|
-
let cursorValue = Selection.getDataCoordinates(
|
|
32
|
+
let cursorValue: SVGCoordinateType | null = Selection.getDataCoordinates(
|
|
32
33
|
targetProps,
|
|
33
34
|
targetProps.scale,
|
|
34
35
|
cursorSVGPosition.x,
|
|
@@ -47,7 +48,7 @@ const CursorHelpers = {
|
|
|
47
48
|
}
|
|
48
49
|
|
|
49
50
|
if (isFunction(onCursorChange)) {
|
|
50
|
-
if (
|
|
51
|
+
if (cursorValue) {
|
|
51
52
|
const value = cursorDimension
|
|
52
53
|
? cursorValue[cursorDimension]
|
|
53
54
|
: cursorValue;
|
|
@@ -64,9 +65,16 @@ const CursorHelpers = {
|
|
|
64
65
|
mutation: () => ({ cursorValue, parentSVG }),
|
|
65
66
|
},
|
|
66
67
|
];
|
|
67
|
-
}
|
|
68
|
+
};
|
|
68
69
|
|
|
69
|
-
|
|
70
|
+
onMouseMove = throttle(this.handleMouseMove, ON_MOUSE_MOVE_THROTTLE_MS, {
|
|
71
|
+
leading: true,
|
|
72
|
+
trailing: false,
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
onMouseLeave = this.handleMouseMove;
|
|
76
|
+
|
|
77
|
+
onTouchEnd = (evt, targetProps) => {
|
|
70
78
|
const { onCursorChange } = targetProps;
|
|
71
79
|
|
|
72
80
|
if (isFunction(targetProps.onCursorChange)) {
|
|
@@ -80,10 +88,12 @@ const CursorHelpers = {
|
|
|
80
88
|
mutation: () => ({ cursorValue: null }),
|
|
81
89
|
},
|
|
82
90
|
];
|
|
83
|
-
}
|
|
84
|
-
}
|
|
91
|
+
};
|
|
92
|
+
}
|
|
85
93
|
|
|
86
|
-
export
|
|
94
|
+
export const CursorHelpers = new CursorHelpersClass();
|
|
95
|
+
|
|
96
|
+
/* {
|
|
87
97
|
...CursorHelpers,
|
|
88
98
|
onMouseMove: throttle(
|
|
89
99
|
CursorHelpers.onMouseMove.bind(CursorHelpers),
|
|
@@ -96,3 +106,6 @@ export default {
|
|
|
96
106
|
onMouseLeave: CursorHelpers.onMouseMove.bind(CursorHelpers),
|
|
97
107
|
onTouchEnd: CursorHelpers.onTouchEnd.bind(CursorHelpers),
|
|
98
108
|
};
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
*/
|
package/src/index.tsx
ADDED
|
@@ -5,12 +5,38 @@ import {
|
|
|
5
5
|
VictoryLabel,
|
|
6
6
|
LineSegment,
|
|
7
7
|
Helpers,
|
|
8
|
+
VictoryContainerProps,
|
|
9
|
+
CoordinatesPropType,
|
|
10
|
+
VictoryLabelProps,
|
|
11
|
+
ValueOrCallback,
|
|
8
12
|
} from "victory-core";
|
|
9
13
|
import { defaults, assign, isObject } from "lodash";
|
|
10
|
-
import CursorHelpers from "./cursor-helpers";
|
|
14
|
+
import { CursorHelpers } from "./cursor-helpers";
|
|
11
15
|
|
|
12
|
-
export
|
|
13
|
-
|
|
16
|
+
export type CursorCoordinatesPropType = CoordinatesPropType | number;
|
|
17
|
+
|
|
18
|
+
export interface VictoryCursorContainerProps extends VictoryContainerProps {
|
|
19
|
+
cursorComponent?: React.ReactElement;
|
|
20
|
+
cursorDimension?: "x" | "y";
|
|
21
|
+
cursorLabel?: ValueOrCallback<VictoryLabelProps["text"]>;
|
|
22
|
+
cursorLabelComponent?: React.ReactElement;
|
|
23
|
+
cursorLabelOffset?: CursorCoordinatesPropType;
|
|
24
|
+
defaultCursorValue?: CursorCoordinatesPropType;
|
|
25
|
+
disable?: boolean;
|
|
26
|
+
onCursorChange?: (
|
|
27
|
+
value: CursorCoordinatesPropType,
|
|
28
|
+
props: VictoryCursorContainerProps,
|
|
29
|
+
) => void;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
type ComponentClass<TProps> = { new (props: TProps): React.Component<TProps> };
|
|
33
|
+
|
|
34
|
+
export function cursorContainerMixin<
|
|
35
|
+
TBase extends ComponentClass<TProps>,
|
|
36
|
+
TProps extends VictoryCursorContainerProps,
|
|
37
|
+
>(Base: TBase) {
|
|
38
|
+
// @ts-expect-error "TS2545: A mixin class must have a constructor with a single rest parameter of type 'any[]'."
|
|
39
|
+
return class VictoryCursorContainer extends Base {
|
|
14
40
|
static displayName = "VictoryCursorContainer";
|
|
15
41
|
static propTypes = {
|
|
16
42
|
...VictoryContainer.propTypes,
|
|
@@ -134,7 +160,7 @@ export const cursorContainerMixin = (base) =>
|
|
|
134
160
|
return [];
|
|
135
161
|
}
|
|
136
162
|
|
|
137
|
-
const newElements = [];
|
|
163
|
+
const newElements: React.ReactElement[] = [];
|
|
138
164
|
const padding = this.getPadding(props);
|
|
139
165
|
const cursorCoordinates = {
|
|
140
166
|
x: horizontal ? scale.y(cursorValue.y) : scale.x(cursorValue.x),
|
|
@@ -205,5 +231,6 @@ export const cursorContainerMixin = (base) =>
|
|
|
205
231
|
];
|
|
206
232
|
}
|
|
207
233
|
};
|
|
234
|
+
}
|
|
208
235
|
|
|
209
|
-
export
|
|
236
|
+
export const VictoryCursorContainer = cursorContainerMixin(VictoryContainer);
|
package/src/index.d.ts
DELETED
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import {
|
|
3
|
-
VictoryContainerProps,
|
|
4
|
-
CoordinatesPropType,
|
|
5
|
-
CallbackArgs,
|
|
6
|
-
} from "victory-core";
|
|
7
|
-
|
|
8
|
-
export type CursorCoordinatesPropType = CoordinatesPropType | number;
|
|
9
|
-
|
|
10
|
-
export interface VictoryCursorContainerProps extends VictoryContainerProps {
|
|
11
|
-
cursorComponent?: React.ReactElement;
|
|
12
|
-
cursorDimension?: "x" | "y";
|
|
13
|
-
cursorLabel?: (point: CoordinatesPropType, args: CallbackArgs) => any | void;
|
|
14
|
-
cursorLabelComponent?: React.ReactElement;
|
|
15
|
-
cursorLabelOffset?: CursorCoordinatesPropType;
|
|
16
|
-
defaultCursorValue?: CursorCoordinatesPropType;
|
|
17
|
-
disable?: boolean;
|
|
18
|
-
onCursorChange?: (
|
|
19
|
-
value: CursorCoordinatesPropType,
|
|
20
|
-
props: VictoryCursorContainerProps,
|
|
21
|
-
) => void;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
export class VictoryCursorContainer extends React.Component<
|
|
25
|
-
VictoryCursorContainerProps,
|
|
26
|
-
any
|
|
27
|
-
> {}
|
|
28
|
-
|
|
29
|
-
export const CursorHelpers: {
|
|
30
|
-
getDimension(props): any;
|
|
31
|
-
withinBounds(point, bounds): any;
|
|
32
|
-
onMouseMove(evt, targetProps): any;
|
|
33
|
-
onMouseLeave(evt, targetProps): any;
|
|
34
|
-
onTouchEnd(evt, targetProps): any;
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
export const cursorContainerMixin: (base: Function) => Function;
|