@tradingaction/coordinates 2.0.12 → 2.0.13
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/LICENSE +24 -24
- package/README.md +5 -5
- package/lib/CrossHairCursor.d.ts +22 -22
- package/lib/CrossHairCursor.js +75 -75
- package/lib/CurrentCoordinate.d.ts +31 -31
- package/lib/CurrentCoordinate.js +53 -53
- package/lib/Cursor.d.ts +31 -31
- package/lib/Cursor.js +121 -121
- package/lib/EdgeCoordinate.d.ts +32 -32
- package/lib/EdgeCoordinate.js +150 -150
- package/lib/EdgeCoordinateV2.d.ts +3 -3
- package/lib/EdgeCoordinateV2.js +137 -137
- package/lib/EdgeCoordinateV3.d.ts +3 -3
- package/lib/EdgeCoordinateV3.js +175 -175
- package/lib/EdgeIndicator.d.ts +55 -55
- package/lib/EdgeIndicator.js +84 -84
- package/lib/EdgeIndicator.js.map +1 -1
- package/lib/MouseCoordinateX.d.ts +49 -49
- package/lib/MouseCoordinateX.js +84 -84
- package/lib/MouseCoordinateXV2.d.ts +61 -61
- package/lib/MouseCoordinateXV2.js +91 -91
- package/lib/MouseCoordinateY.d.ts +68 -68
- package/lib/MouseCoordinateY.js +90 -90
- package/lib/PriceCoordinate.d.ts +53 -53
- package/lib/PriceCoordinate.js +80 -80
- package/lib/index.d.ts +8 -8
- package/lib/index.js +8 -8
- package/package.json +3 -3
- package/src/EdgeIndicator.tsx +1 -9
package/lib/EdgeIndicator.d.ts
CHANGED
|
@@ -1,55 +1,55 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { strokeDashTypes } from "@tradingaction/core";
|
|
3
|
-
export interface EdgeIndicatorProps {
|
|
4
|
-
readonly arrowWidth?: number;
|
|
5
|
-
readonly displayFormat?: (n: number) => string;
|
|
6
|
-
readonly edgeAt?: "left" | "right";
|
|
7
|
-
readonly fill?: string | ((datum: any) => string);
|
|
8
|
-
readonly fitToText?: boolean;
|
|
9
|
-
readonly fontFamily?: string;
|
|
10
|
-
readonly fontSize?: number;
|
|
11
|
-
readonly fullWidth?: boolean;
|
|
12
|
-
readonly itemType: "first" | "last";
|
|
13
|
-
readonly lineStroke?: string | ((datum: any) => string);
|
|
14
|
-
readonly lineStrokeDasharray?: strokeDashTypes;
|
|
15
|
-
readonly orient?: "left" | "right";
|
|
16
|
-
readonly rectHeight?: number;
|
|
17
|
-
readonly rectWidth?: number;
|
|
18
|
-
readonly stroke?: string | ((datum: any) => string);
|
|
19
|
-
readonly textFill?: string | ((datum: any) => string);
|
|
20
|
-
readonly type?: "horizontal";
|
|
21
|
-
readonly yAccessor: (data: any) => number | undefined;
|
|
22
|
-
readonly yAxisPad?: number;
|
|
23
|
-
}
|
|
24
|
-
export declare class EdgeIndicator extends React.Component<EdgeIndicatorProps> {
|
|
25
|
-
static defaultProps: {
|
|
26
|
-
fitToText: boolean;
|
|
27
|
-
lineStroke: string;
|
|
28
|
-
lineOpacity: number;
|
|
29
|
-
lineStrokeDasharray: string;
|
|
30
|
-
orient: string;
|
|
31
|
-
displayFormat: (n: number | {
|
|
32
|
-
valueOf(): number;
|
|
33
|
-
}) => string;
|
|
34
|
-
edgeAt: string;
|
|
35
|
-
yAxisPad: number;
|
|
36
|
-
rectHeight: number;
|
|
37
|
-
rectWidth: number;
|
|
38
|
-
arrowWidth: number;
|
|
39
|
-
fontFamily: string;
|
|
40
|
-
fontSize: number;
|
|
41
|
-
dx: number;
|
|
42
|
-
hideLine: boolean;
|
|
43
|
-
fill: string;
|
|
44
|
-
opacity: number;
|
|
45
|
-
stroke: () => void;
|
|
46
|
-
strokeOpacity: number;
|
|
47
|
-
strokeWidth: number;
|
|
48
|
-
textFill: string;
|
|
49
|
-
type: string;
|
|
50
|
-
};
|
|
51
|
-
render(): JSX.Element;
|
|
52
|
-
private readonly drawOnCanvas;
|
|
53
|
-
private readonly helper;
|
|
54
|
-
private readonly getEdge;
|
|
55
|
-
}
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { strokeDashTypes } from "@tradingaction/core";
|
|
3
|
+
export interface EdgeIndicatorProps {
|
|
4
|
+
readonly arrowWidth?: number;
|
|
5
|
+
readonly displayFormat?: (n: number) => string;
|
|
6
|
+
readonly edgeAt?: "left" | "right";
|
|
7
|
+
readonly fill?: string | ((datum: any) => string);
|
|
8
|
+
readonly fitToText?: boolean;
|
|
9
|
+
readonly fontFamily?: string;
|
|
10
|
+
readonly fontSize?: number;
|
|
11
|
+
readonly fullWidth?: boolean;
|
|
12
|
+
readonly itemType: "first" | "last";
|
|
13
|
+
readonly lineStroke?: string | ((datum: any) => string);
|
|
14
|
+
readonly lineStrokeDasharray?: strokeDashTypes;
|
|
15
|
+
readonly orient?: "left" | "right";
|
|
16
|
+
readonly rectHeight?: number;
|
|
17
|
+
readonly rectWidth?: number;
|
|
18
|
+
readonly stroke?: string | ((datum: any) => string);
|
|
19
|
+
readonly textFill?: string | ((datum: any) => string);
|
|
20
|
+
readonly type?: "horizontal";
|
|
21
|
+
readonly yAccessor: (data: any) => number | undefined;
|
|
22
|
+
readonly yAxisPad?: number;
|
|
23
|
+
}
|
|
24
|
+
export declare class EdgeIndicator extends React.Component<EdgeIndicatorProps> {
|
|
25
|
+
static defaultProps: {
|
|
26
|
+
fitToText: boolean;
|
|
27
|
+
lineStroke: string;
|
|
28
|
+
lineOpacity: number;
|
|
29
|
+
lineStrokeDasharray: string;
|
|
30
|
+
orient: string;
|
|
31
|
+
displayFormat: (n: number | {
|
|
32
|
+
valueOf(): number;
|
|
33
|
+
}) => string;
|
|
34
|
+
edgeAt: string;
|
|
35
|
+
yAxisPad: number;
|
|
36
|
+
rectHeight: number;
|
|
37
|
+
rectWidth: number;
|
|
38
|
+
arrowWidth: number;
|
|
39
|
+
fontFamily: string;
|
|
40
|
+
fontSize: number;
|
|
41
|
+
dx: number;
|
|
42
|
+
hideLine: boolean;
|
|
43
|
+
fill: string;
|
|
44
|
+
opacity: number;
|
|
45
|
+
stroke: () => void;
|
|
46
|
+
strokeOpacity: number;
|
|
47
|
+
strokeWidth: number;
|
|
48
|
+
textFill: string;
|
|
49
|
+
type: string;
|
|
50
|
+
};
|
|
51
|
+
render(): JSX.Element;
|
|
52
|
+
private readonly drawOnCanvas;
|
|
53
|
+
private readonly helper;
|
|
54
|
+
private readonly getEdge;
|
|
55
|
+
}
|
package/lib/EdgeIndicator.js
CHANGED
|
@@ -1,85 +1,85 @@
|
|
|
1
|
-
import { format } from "d3-format";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
import { first, functor, getAxisCanvas, GenericChartComponent, last, noop
|
|
4
|
-
import { drawOnCanvas } from "./EdgeCoordinateV3";
|
|
5
|
-
export class EdgeIndicator extends React.Component {
|
|
6
|
-
constructor() {
|
|
7
|
-
super(...arguments);
|
|
8
|
-
this.drawOnCanvas = (ctx, moreProps) => {
|
|
9
|
-
const edge = this.helper(this.props, moreProps);
|
|
10
|
-
if (edge === undefined) {
|
|
11
|
-
return;
|
|
12
|
-
}
|
|
13
|
-
const props = Object.assign(Object.assign({}, this.props), edge);
|
|
14
|
-
drawOnCanvas(ctx, props);
|
|
15
|
-
};
|
|
16
|
-
this.helper = (props, moreProps) => {
|
|
17
|
-
const { itemType, yAccessor } = props;
|
|
18
|
-
const { plotData } = moreProps;
|
|
19
|
-
const item = itemType === "first" ? first(plotData, yAccessor) : last(plotData, yAccessor);
|
|
20
|
-
const edge = item !== undefined ? this.getEdge(moreProps, item) : undefined;
|
|
21
|
-
return edge;
|
|
22
|
-
};
|
|
23
|
-
this.getEdge = (moreProps, item) => {
|
|
24
|
-
const { fontFamily, fontSize, type: edgeType, displayFormat = EdgeIndicator.defaultProps.displayFormat, edgeAt, yAxisPad = EdgeIndicator.defaultProps.yAxisPad, orient, lineStroke, yAccessor, fill, fullWidth, textFill, rectHeight, rectWidth, arrowWidth, stroke, } = this.props;
|
|
25
|
-
const { xScale, chartConfig: { yScale }, xAccessor, width, } = moreProps;
|
|
26
|
-
const yValue = yAccessor(item);
|
|
27
|
-
if (yValue === undefined) {
|
|
28
|
-
return undefined;
|
|
29
|
-
}
|
|
30
|
-
const xValue = xAccessor(item);
|
|
31
|
-
const x1 = fullWidth ? 0 : Math.round(xScale(xValue));
|
|
32
|
-
const y1 = Math.round(yScale(yValue));
|
|
33
|
-
const [left, right] = [0, width];
|
|
34
|
-
const edgeX = edgeAt === "left" ? left - yAxisPad : right + yAxisPad;
|
|
35
|
-
return {
|
|
36
|
-
coordinate: displayFormat(yValue),
|
|
37
|
-
show: true,
|
|
38
|
-
type: edgeType,
|
|
39
|
-
orient,
|
|
40
|
-
edgeAt: edgeX,
|
|
41
|
-
fill: functor(fill)(item),
|
|
42
|
-
lineStroke: functor(lineStroke)(item),
|
|
43
|
-
stroke: functor(stroke)(item),
|
|
44
|
-
fontFamily,
|
|
45
|
-
fontSize,
|
|
46
|
-
textFill: functor(textFill)(item),
|
|
47
|
-
rectHeight,
|
|
48
|
-
rectWidth,
|
|
49
|
-
arrowWidth,
|
|
50
|
-
x1,
|
|
51
|
-
y1,
|
|
52
|
-
x2: right,
|
|
53
|
-
y2: y1,
|
|
54
|
-
};
|
|
55
|
-
};
|
|
56
|
-
}
|
|
57
|
-
render() {
|
|
58
|
-
return (React.createElement(GenericChartComponent, { edgeClip: true, clip: false, canvasDraw: this.drawOnCanvas, canvasToDraw: getAxisCanvas, drawOn: ["pan"] }));
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
EdgeIndicator.defaultProps = {
|
|
62
|
-
fitToText: false,
|
|
63
|
-
lineStroke: "#000000",
|
|
64
|
-
lineOpacity: 1,
|
|
65
|
-
lineStrokeDasharray: "ShortDot",
|
|
66
|
-
orient: "right",
|
|
67
|
-
displayFormat: format(".2f"),
|
|
68
|
-
edgeAt: "right",
|
|
69
|
-
yAxisPad: 0,
|
|
70
|
-
rectHeight: 20,
|
|
71
|
-
rectWidth: 50,
|
|
72
|
-
arrowWidth: 0,
|
|
73
|
-
fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
|
|
74
|
-
fontSize: 13,
|
|
75
|
-
dx: 0,
|
|
76
|
-
hideLine: false,
|
|
77
|
-
fill: "#8a8a8a",
|
|
78
|
-
opacity: 1,
|
|
79
|
-
stroke: noop,
|
|
80
|
-
strokeOpacity: 1,
|
|
81
|
-
strokeWidth: 1,
|
|
82
|
-
textFill: "#FFFFFF",
|
|
83
|
-
type: "horizontal",
|
|
84
|
-
};
|
|
1
|
+
import { format } from "d3-format";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { first, functor, getAxisCanvas, GenericChartComponent, last, noop } from "@tradingaction/core";
|
|
4
|
+
import { drawOnCanvas } from "./EdgeCoordinateV3";
|
|
5
|
+
export class EdgeIndicator extends React.Component {
|
|
6
|
+
constructor() {
|
|
7
|
+
super(...arguments);
|
|
8
|
+
this.drawOnCanvas = (ctx, moreProps) => {
|
|
9
|
+
const edge = this.helper(this.props, moreProps);
|
|
10
|
+
if (edge === undefined) {
|
|
11
|
+
return;
|
|
12
|
+
}
|
|
13
|
+
const props = Object.assign(Object.assign({}, this.props), edge);
|
|
14
|
+
drawOnCanvas(ctx, props);
|
|
15
|
+
};
|
|
16
|
+
this.helper = (props, moreProps) => {
|
|
17
|
+
const { itemType, yAccessor } = props;
|
|
18
|
+
const { plotData } = moreProps;
|
|
19
|
+
const item = itemType === "first" ? first(plotData, yAccessor) : last(plotData, yAccessor);
|
|
20
|
+
const edge = item !== undefined ? this.getEdge(moreProps, item) : undefined;
|
|
21
|
+
return edge;
|
|
22
|
+
};
|
|
23
|
+
this.getEdge = (moreProps, item) => {
|
|
24
|
+
const { fontFamily, fontSize, type: edgeType, displayFormat = EdgeIndicator.defaultProps.displayFormat, edgeAt, yAxisPad = EdgeIndicator.defaultProps.yAxisPad, orient, lineStroke, yAccessor, fill, fullWidth, textFill, rectHeight, rectWidth, arrowWidth, stroke, } = this.props;
|
|
25
|
+
const { xScale, chartConfig: { yScale }, xAccessor, width, } = moreProps;
|
|
26
|
+
const yValue = yAccessor(item);
|
|
27
|
+
if (yValue === undefined) {
|
|
28
|
+
return undefined;
|
|
29
|
+
}
|
|
30
|
+
const xValue = xAccessor(item);
|
|
31
|
+
const x1 = fullWidth ? 0 : Math.round(xScale(xValue));
|
|
32
|
+
const y1 = Math.round(yScale(yValue));
|
|
33
|
+
const [left, right] = [0, width];
|
|
34
|
+
const edgeX = edgeAt === "left" ? left - yAxisPad : right + yAxisPad;
|
|
35
|
+
return {
|
|
36
|
+
coordinate: displayFormat(yValue),
|
|
37
|
+
show: true,
|
|
38
|
+
type: edgeType,
|
|
39
|
+
orient,
|
|
40
|
+
edgeAt: edgeX,
|
|
41
|
+
fill: functor(fill)(item),
|
|
42
|
+
lineStroke: functor(lineStroke)(item),
|
|
43
|
+
stroke: functor(stroke)(item),
|
|
44
|
+
fontFamily,
|
|
45
|
+
fontSize,
|
|
46
|
+
textFill: functor(textFill)(item),
|
|
47
|
+
rectHeight,
|
|
48
|
+
rectWidth,
|
|
49
|
+
arrowWidth,
|
|
50
|
+
x1,
|
|
51
|
+
y1,
|
|
52
|
+
x2: right,
|
|
53
|
+
y2: y1,
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
render() {
|
|
58
|
+
return (React.createElement(GenericChartComponent, { edgeClip: true, clip: false, canvasDraw: this.drawOnCanvas, canvasToDraw: getAxisCanvas, drawOn: ["pan"] }));
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
EdgeIndicator.defaultProps = {
|
|
62
|
+
fitToText: false,
|
|
63
|
+
lineStroke: "#000000",
|
|
64
|
+
lineOpacity: 1,
|
|
65
|
+
lineStrokeDasharray: "ShortDot",
|
|
66
|
+
orient: "right",
|
|
67
|
+
displayFormat: format(".2f"),
|
|
68
|
+
edgeAt: "right",
|
|
69
|
+
yAxisPad: 0,
|
|
70
|
+
rectHeight: 20,
|
|
71
|
+
rectWidth: 50,
|
|
72
|
+
arrowWidth: 0,
|
|
73
|
+
fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
|
|
74
|
+
fontSize: 13,
|
|
75
|
+
dx: 0,
|
|
76
|
+
hideLine: false,
|
|
77
|
+
fill: "#8a8a8a",
|
|
78
|
+
opacity: 1,
|
|
79
|
+
stroke: noop,
|
|
80
|
+
strokeOpacity: 1,
|
|
81
|
+
strokeWidth: 1,
|
|
82
|
+
textFill: "#FFFFFF",
|
|
83
|
+
type: "horizontal",
|
|
84
|
+
};
|
|
85
85
|
//# sourceMappingURL=EdgeIndicator.js.map
|
package/lib/EdgeIndicator.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EdgeIndicator.js","sourceRoot":"","sources":["../src/EdgeIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,
|
|
1
|
+
{"version":3,"file":"EdgeIndicator.js","sourceRoot":"","sources":["../src/EdgeIndicator.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,49 +1,49 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
export interface MouseCoordinateXProps {
|
|
3
|
-
readonly at?: "bottom" | "top";
|
|
4
|
-
readonly customX: (props: MouseCoordinateXProps, moreProps: any) => {
|
|
5
|
-
x: number;
|
|
6
|
-
coordinate: string;
|
|
7
|
-
};
|
|
8
|
-
readonly displayFormat: (item: any) => string;
|
|
9
|
-
readonly fill?: string;
|
|
10
|
-
readonly fitToText?: boolean;
|
|
11
|
-
readonly fontFamily?: string;
|
|
12
|
-
readonly fontSize?: number;
|
|
13
|
-
readonly opacity?: number;
|
|
14
|
-
readonly orient?: "bottom" | "top";
|
|
15
|
-
readonly rectRadius?: number;
|
|
16
|
-
readonly rectWidth?: number;
|
|
17
|
-
readonly rectHeight?: number;
|
|
18
|
-
readonly snapX?: boolean;
|
|
19
|
-
readonly stroke?: string;
|
|
20
|
-
readonly strokeOpacity?: number;
|
|
21
|
-
readonly strokeWidth?: number;
|
|
22
|
-
readonly textFill?: string;
|
|
23
|
-
readonly yAxisPad?: number;
|
|
24
|
-
}
|
|
25
|
-
export declare class MouseCoordinateX extends React.Component<MouseCoordinateXProps> {
|
|
26
|
-
static defaultProps: {
|
|
27
|
-
at: string;
|
|
28
|
-
customX: (props: MouseCoordinateXProps, moreProps: any) => {
|
|
29
|
-
x: any;
|
|
30
|
-
coordinate: string;
|
|
31
|
-
};
|
|
32
|
-
fill: string;
|
|
33
|
-
fitToText: boolean;
|
|
34
|
-
fontFamily: string;
|
|
35
|
-
fontSize: number;
|
|
36
|
-
opacity: number;
|
|
37
|
-
orient: string;
|
|
38
|
-
rectWidth: number;
|
|
39
|
-
rectHeight: number;
|
|
40
|
-
snapX: boolean;
|
|
41
|
-
strokeOpacity: number;
|
|
42
|
-
strokeWidth: number;
|
|
43
|
-
textFill: string;
|
|
44
|
-
yAxisPad: number;
|
|
45
|
-
};
|
|
46
|
-
render(): JSX.Element;
|
|
47
|
-
private readonly drawOnCanvas;
|
|
48
|
-
private readonly helper;
|
|
49
|
-
}
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
export interface MouseCoordinateXProps {
|
|
3
|
+
readonly at?: "bottom" | "top";
|
|
4
|
+
readonly customX: (props: MouseCoordinateXProps, moreProps: any) => {
|
|
5
|
+
x: number;
|
|
6
|
+
coordinate: string;
|
|
7
|
+
};
|
|
8
|
+
readonly displayFormat: (item: any) => string;
|
|
9
|
+
readonly fill?: string;
|
|
10
|
+
readonly fitToText?: boolean;
|
|
11
|
+
readonly fontFamily?: string;
|
|
12
|
+
readonly fontSize?: number;
|
|
13
|
+
readonly opacity?: number;
|
|
14
|
+
readonly orient?: "bottom" | "top";
|
|
15
|
+
readonly rectRadius?: number;
|
|
16
|
+
readonly rectWidth?: number;
|
|
17
|
+
readonly rectHeight?: number;
|
|
18
|
+
readonly snapX?: boolean;
|
|
19
|
+
readonly stroke?: string;
|
|
20
|
+
readonly strokeOpacity?: number;
|
|
21
|
+
readonly strokeWidth?: number;
|
|
22
|
+
readonly textFill?: string;
|
|
23
|
+
readonly yAxisPad?: number;
|
|
24
|
+
}
|
|
25
|
+
export declare class MouseCoordinateX extends React.Component<MouseCoordinateXProps> {
|
|
26
|
+
static defaultProps: {
|
|
27
|
+
at: string;
|
|
28
|
+
customX: (props: MouseCoordinateXProps, moreProps: any) => {
|
|
29
|
+
x: any;
|
|
30
|
+
coordinate: string;
|
|
31
|
+
};
|
|
32
|
+
fill: string;
|
|
33
|
+
fitToText: boolean;
|
|
34
|
+
fontFamily: string;
|
|
35
|
+
fontSize: number;
|
|
36
|
+
opacity: number;
|
|
37
|
+
orient: string;
|
|
38
|
+
rectWidth: number;
|
|
39
|
+
rectHeight: number;
|
|
40
|
+
snapX: boolean;
|
|
41
|
+
strokeOpacity: number;
|
|
42
|
+
strokeWidth: number;
|
|
43
|
+
textFill: string;
|
|
44
|
+
yAxisPad: number;
|
|
45
|
+
};
|
|
46
|
+
render(): JSX.Element;
|
|
47
|
+
private readonly drawOnCanvas;
|
|
48
|
+
private readonly helper;
|
|
49
|
+
}
|
package/lib/MouseCoordinateX.js
CHANGED
|
@@ -1,85 +1,85 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { isNotDefined, getMouseCanvas, GenericChartComponent } from "@tradingaction/core";
|
|
3
|
-
import { drawOnCanvas } from "./EdgeCoordinateV3";
|
|
4
|
-
const defaultCustomX = (props, moreProps) => {
|
|
5
|
-
const { xScale, xAccessor, currentItem, mouseXY } = moreProps;
|
|
6
|
-
const { snapX } = props;
|
|
7
|
-
const x = snapX ? xScale(xAccessor(currentItem)) : mouseXY[0];
|
|
8
|
-
const { displayXAccessor } = moreProps;
|
|
9
|
-
const { displayFormat } = props;
|
|
10
|
-
const coordinate = snapX ? displayFormat(displayXAccessor(currentItem)) : displayFormat(xScale.invert(x));
|
|
11
|
-
return { x, coordinate };
|
|
12
|
-
};
|
|
13
|
-
export class MouseCoordinateX extends React.Component {
|
|
14
|
-
constructor() {
|
|
15
|
-
super(...arguments);
|
|
16
|
-
this.drawOnCanvas = (ctx, moreProps) => {
|
|
17
|
-
const props = this.helper(this.props, moreProps);
|
|
18
|
-
if (props === null) {
|
|
19
|
-
return;
|
|
20
|
-
}
|
|
21
|
-
drawOnCanvas(ctx, props);
|
|
22
|
-
};
|
|
23
|
-
this.helper = (props, moreProps) => {
|
|
24
|
-
const { show, currentItem, chartConfig: { height }, } = moreProps;
|
|
25
|
-
if (isNotDefined(currentItem)) {
|
|
26
|
-
return null;
|
|
27
|
-
}
|
|
28
|
-
const { customX, orient, at, rectRadius, rectWidth, rectHeight, stroke, strokeOpacity, strokeWidth } = props;
|
|
29
|
-
const { fill, opacity, fitToText, fontFamily, fontSize, textFill } = props;
|
|
30
|
-
const edgeAt = at === "bottom" ? height : 0;
|
|
31
|
-
const { x, coordinate } = customX(props, moreProps);
|
|
32
|
-
const type = "vertical";
|
|
33
|
-
const y1 = 0;
|
|
34
|
-
const y2 = height;
|
|
35
|
-
const hideLine = true;
|
|
36
|
-
const coordinateProps = {
|
|
37
|
-
coordinate,
|
|
38
|
-
fitToText,
|
|
39
|
-
show,
|
|
40
|
-
type,
|
|
41
|
-
orient,
|
|
42
|
-
edgeAt,
|
|
43
|
-
hideLine,
|
|
44
|
-
fill,
|
|
45
|
-
opacity,
|
|
46
|
-
fontFamily,
|
|
47
|
-
fontSize,
|
|
48
|
-
textFill,
|
|
49
|
-
stroke,
|
|
50
|
-
strokeOpacity,
|
|
51
|
-
strokeWidth,
|
|
52
|
-
rectWidth,
|
|
53
|
-
rectHeight,
|
|
54
|
-
rectRadius,
|
|
55
|
-
arrowWidth: 0,
|
|
56
|
-
x1: x,
|
|
57
|
-
x2: x,
|
|
58
|
-
y1,
|
|
59
|
-
y2,
|
|
60
|
-
};
|
|
61
|
-
return coordinateProps;
|
|
62
|
-
};
|
|
63
|
-
}
|
|
64
|
-
render() {
|
|
65
|
-
return (React.createElement(GenericChartComponent, { clip: false, canvasDraw: this.drawOnCanvas, canvasToDraw: getMouseCanvas, drawOn: ["mousemove", "pan", "drag"] }));
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
MouseCoordinateX.defaultProps = {
|
|
69
|
-
at: "bottom",
|
|
70
|
-
customX: defaultCustomX,
|
|
71
|
-
fill: "#4C525E",
|
|
72
|
-
fitToText: true,
|
|
73
|
-
fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
|
|
74
|
-
fontSize: 13,
|
|
75
|
-
opacity: 1,
|
|
76
|
-
orient: "bottom",
|
|
77
|
-
rectWidth: 80,
|
|
78
|
-
rectHeight: 20,
|
|
79
|
-
snapX: true,
|
|
80
|
-
strokeOpacity: 1,
|
|
81
|
-
strokeWidth: 1,
|
|
82
|
-
textFill: "#FFFFFF",
|
|
83
|
-
yAxisPad: 0,
|
|
84
|
-
};
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { isNotDefined, getMouseCanvas, GenericChartComponent } from "@tradingaction/core";
|
|
3
|
+
import { drawOnCanvas } from "./EdgeCoordinateV3";
|
|
4
|
+
const defaultCustomX = (props, moreProps) => {
|
|
5
|
+
const { xScale, xAccessor, currentItem, mouseXY } = moreProps;
|
|
6
|
+
const { snapX } = props;
|
|
7
|
+
const x = snapX ? xScale(xAccessor(currentItem)) : mouseXY[0];
|
|
8
|
+
const { displayXAccessor } = moreProps;
|
|
9
|
+
const { displayFormat } = props;
|
|
10
|
+
const coordinate = snapX ? displayFormat(displayXAccessor(currentItem)) : displayFormat(xScale.invert(x));
|
|
11
|
+
return { x, coordinate };
|
|
12
|
+
};
|
|
13
|
+
export class MouseCoordinateX extends React.Component {
|
|
14
|
+
constructor() {
|
|
15
|
+
super(...arguments);
|
|
16
|
+
this.drawOnCanvas = (ctx, moreProps) => {
|
|
17
|
+
const props = this.helper(this.props, moreProps);
|
|
18
|
+
if (props === null) {
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
drawOnCanvas(ctx, props);
|
|
22
|
+
};
|
|
23
|
+
this.helper = (props, moreProps) => {
|
|
24
|
+
const { show, currentItem, chartConfig: { height }, } = moreProps;
|
|
25
|
+
if (isNotDefined(currentItem)) {
|
|
26
|
+
return null;
|
|
27
|
+
}
|
|
28
|
+
const { customX, orient, at, rectRadius, rectWidth, rectHeight, stroke, strokeOpacity, strokeWidth } = props;
|
|
29
|
+
const { fill, opacity, fitToText, fontFamily, fontSize, textFill } = props;
|
|
30
|
+
const edgeAt = at === "bottom" ? height : 0;
|
|
31
|
+
const { x, coordinate } = customX(props, moreProps);
|
|
32
|
+
const type = "vertical";
|
|
33
|
+
const y1 = 0;
|
|
34
|
+
const y2 = height;
|
|
35
|
+
const hideLine = true;
|
|
36
|
+
const coordinateProps = {
|
|
37
|
+
coordinate,
|
|
38
|
+
fitToText,
|
|
39
|
+
show,
|
|
40
|
+
type,
|
|
41
|
+
orient,
|
|
42
|
+
edgeAt,
|
|
43
|
+
hideLine,
|
|
44
|
+
fill,
|
|
45
|
+
opacity,
|
|
46
|
+
fontFamily,
|
|
47
|
+
fontSize,
|
|
48
|
+
textFill,
|
|
49
|
+
stroke,
|
|
50
|
+
strokeOpacity,
|
|
51
|
+
strokeWidth,
|
|
52
|
+
rectWidth,
|
|
53
|
+
rectHeight,
|
|
54
|
+
rectRadius,
|
|
55
|
+
arrowWidth: 0,
|
|
56
|
+
x1: x,
|
|
57
|
+
x2: x,
|
|
58
|
+
y1,
|
|
59
|
+
y2,
|
|
60
|
+
};
|
|
61
|
+
return coordinateProps;
|
|
62
|
+
};
|
|
63
|
+
}
|
|
64
|
+
render() {
|
|
65
|
+
return (React.createElement(GenericChartComponent, { clip: false, canvasDraw: this.drawOnCanvas, canvasToDraw: getMouseCanvas, drawOn: ["mousemove", "pan", "drag"] }));
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
MouseCoordinateX.defaultProps = {
|
|
69
|
+
at: "bottom",
|
|
70
|
+
customX: defaultCustomX,
|
|
71
|
+
fill: "#4C525E",
|
|
72
|
+
fitToText: true,
|
|
73
|
+
fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
|
|
74
|
+
fontSize: 13,
|
|
75
|
+
opacity: 1,
|
|
76
|
+
orient: "bottom",
|
|
77
|
+
rectWidth: 80,
|
|
78
|
+
rectHeight: 20,
|
|
79
|
+
snapX: true,
|
|
80
|
+
strokeOpacity: 1,
|
|
81
|
+
strokeWidth: 1,
|
|
82
|
+
textFill: "#FFFFFF",
|
|
83
|
+
yAxisPad: 0,
|
|
84
|
+
};
|
|
85
85
|
//# sourceMappingURL=MouseCoordinateX.js.map
|