@tradingaction/annotations 2.0.16 → 2.1.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/lib/Annotate.d.ts +1 -1
- package/lib/BarAnnotation.d.ts +1 -1
- package/lib/BarAnnotation.js.map +1 -1
- package/lib/Label.d.ts +1 -1
- package/lib/Label.js.map +1 -1
- package/lib/LabelAnnotation.d.ts +49 -26
- package/lib/LabelAnnotation.js +95 -22
- package/lib/LabelAnnotation.js.map +1 -1
- package/lib/SvgPathAnnotation.d.ts +1 -1
- package/package.json +3 -3
- package/src/BarAnnotation.tsx +2 -2
- package/src/Label.tsx +1 -1
- package/src/LabelAnnotation.tsx +261 -61
package/lib/Annotate.d.ts
CHANGED
package/lib/BarAnnotation.d.ts
CHANGED
package/lib/BarAnnotation.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarAnnotation.js","sourceRoot":"","sources":["../src/BarAnnotation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiE/B,MAAM,OAAO,aAAc,SAAQ,KAAK,CAAC,SAA6B;IAAtE;;QA2FqB,YAAO,GAAG,CAAC,CAAmB,EAAE,EAAE;YAC/C,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YACtD,IAAI,OAAO,KAAK,SAAS,EAAE;gBACvB,OAAO,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;aACzC;QACL,CAAC,CAAC;QAEe,WAAM,GAAG,CAAC,KAAyB,EAAE,SAAc,EAAE,MAAW,EAAE,MAAW,EAAE,EAAE;YAC9F,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;YAEvD,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;YACzB,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;YAEzB,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;YAEzG,OAAO;gBACH,CAAC,EAAE,IAAI;gBACP,CAAC,EAAE,IAAI;gBACP,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;gBAC1B,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC;aACnC,CAAC;QACN,CAAC,CAAC;IACN,CAAC;IA1FU,MAAM;QACT,MAAM,EACF,SAAS,EACT,MAAM,EACN,OAAO,EACP,SAAS,EACT,MAAM,EACN,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,WAAW,EACX,UAAU,EACV,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,UAAU,EACV,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,eAAe,EACf,cAAc,EACd,eAAe,EACf,eAAe,GAClB,GAAG,IAAI,CAAC,KAAK,CAAC;QAEf,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;QAEnF,OAAO,CACH,2BAAG,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO;YACzC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,mCAAQ,OAAO,CAAS,CAAC,CAAC,CAAC,IAAI;YACvD,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAClB,8BACI,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,EAAE,EAAE,WAAW,EACf,EAAE,EAAE,WAAW,EACf,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,UAAU,IAAI,SAAS,CAAC,CAAC,CAAC,UAAU,UAAU,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EACpF,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"BarAnnotation.js","sourceRoot":"","sources":["../src/BarAnnotation.tsx"],"names":[],"mappings":"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"}
|
package/lib/Label.d.ts
CHANGED
|
@@ -27,7 +27,7 @@ export declare class Label extends React.Component<LabelProps> {
|
|
|
27
27
|
selectCanvas: (canvases: any) => any;
|
|
28
28
|
};
|
|
29
29
|
static contextType: React.Context<import("@tradingaction/core/lib/ChartCanvas").ChartCanvasContextType<number | Date>>;
|
|
30
|
-
render(): JSX.Element;
|
|
30
|
+
render(): React.JSX.Element;
|
|
31
31
|
private readonly drawOnCanvas;
|
|
32
32
|
private readonly helper;
|
|
33
33
|
}
|
package/lib/Label.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.js","sourceRoot":"","sources":["../src/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEpF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqB/B,MAAM,OAAO,KAAM,SAAQ,KAAK,CAAC,SAAqB;IAAtD;;QAmBqB,iBAAY,GAAG,CAAC,GAA6B,EAAE,SAAc,EAAE,EAAE;YAC9E,GAAG,CAAC,IAAI,EAAE,CAAC;YAEX,MAAM,EAAE,SAAS,GAAG,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YAEtF,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"Label.js","sourceRoot":"","sources":["../src/Label.tsx"],"names":[],"mappings":"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"}
|
package/lib/LabelAnnotation.d.ts
CHANGED
|
@@ -6,33 +6,43 @@ export interface LabelAnnotationProps {
|
|
|
6
6
|
readonly fill?: string | ((datum: any) => string);
|
|
7
7
|
readonly fontFamily?: string;
|
|
8
8
|
readonly fontSize?: number;
|
|
9
|
-
readonly onClick?: (e: React.MouseEvent, data: {
|
|
10
|
-
xScale?: ScaleContinuousNumeric<number, number>;
|
|
11
|
-
yScale?: ScaleContinuousNumeric<number, number>;
|
|
12
|
-
datum: any;
|
|
13
|
-
}) => void;
|
|
14
9
|
readonly opacity?: number;
|
|
15
10
|
readonly plotData: any[];
|
|
16
11
|
readonly rotate?: number;
|
|
17
12
|
readonly text?: string | ((datum: any) => string);
|
|
18
|
-
readonly textAnchor?:
|
|
13
|
+
readonly textAnchor?: "start" | "middle" | "end" | "inherit";
|
|
19
14
|
readonly tooltip?: string | ((datum: any) => string);
|
|
20
15
|
readonly xAccessor?: (datum: any) => any;
|
|
21
16
|
readonly xScale?: ScaleContinuousNumeric<number, number>;
|
|
22
|
-
readonly x?: number | (({ xScale, xAccessor, datum, plotData, }: {
|
|
23
|
-
xScale: ScaleContinuousNumeric<number, number>;
|
|
24
|
-
xAccessor: (datum: any) => any;
|
|
25
|
-
datum: any;
|
|
26
|
-
plotData: any[];
|
|
27
|
-
}) => number);
|
|
28
17
|
readonly yScale?: ScaleContinuousNumeric<number, number>;
|
|
29
|
-
readonly
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
18
|
+
readonly x?: number | (({ xScale, xAccessor, datum, plotData, }: any) => number);
|
|
19
|
+
readonly y?: number | (({ yScale, datum, plotData, }: any) => number);
|
|
20
|
+
readonly onClick?: (e: React.MouseEvent, data: any) => void;
|
|
21
|
+
readonly backgroundFill?: string;
|
|
22
|
+
readonly backgroundStroke?: string;
|
|
23
|
+
readonly backgroundStrokeWidth?: number;
|
|
24
|
+
readonly backgroundRadius?: number;
|
|
25
|
+
readonly backgroundPaddingX?: number;
|
|
26
|
+
readonly backgroundPaddingY?: number;
|
|
27
|
+
readonly backgroundOpacity?: number;
|
|
28
|
+
readonly position?: "above" | "below";
|
|
29
|
+
readonly caretSize?: number;
|
|
30
|
+
readonly caretFill?: string;
|
|
31
|
+
readonly offset?: number;
|
|
34
32
|
}
|
|
35
|
-
|
|
33
|
+
type TextBBox = {
|
|
34
|
+
x: number;
|
|
35
|
+
y: number;
|
|
36
|
+
width: number;
|
|
37
|
+
height: number;
|
|
38
|
+
};
|
|
39
|
+
export declare class LabelAnnotation extends React.Component<LabelAnnotationProps, {
|
|
40
|
+
bbox?: TextBBox;
|
|
41
|
+
}> {
|
|
42
|
+
private textRef;
|
|
43
|
+
state: {
|
|
44
|
+
bbox: TextBBox | undefined;
|
|
45
|
+
};
|
|
36
46
|
static defaultProps: {
|
|
37
47
|
className: string;
|
|
38
48
|
textAnchor: string;
|
|
@@ -41,13 +51,26 @@ export declare class LabelAnnotation extends React.Component<LabelAnnotationProp
|
|
|
41
51
|
fill: string;
|
|
42
52
|
opacity: number;
|
|
43
53
|
rotate: number;
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
54
|
+
backgroundRadius: number;
|
|
55
|
+
backgroundPaddingX: number;
|
|
56
|
+
backgroundPaddingY: number;
|
|
57
|
+
backgroundOpacity: number;
|
|
58
|
+
caretSize: number;
|
|
59
|
+
offset: number;
|
|
60
|
+
position: string;
|
|
61
|
+
x: ({ xScale, xAccessor, datum, }: any) => any;
|
|
62
|
+
};
|
|
63
|
+
componentDidMount(): void;
|
|
64
|
+
componentDidUpdate(): void;
|
|
65
|
+
updateBBox(): void;
|
|
66
|
+
render(): React.JSX.Element;
|
|
67
|
+
handleClick: (e: React.MouseEvent) => void;
|
|
68
|
+
helper(): {
|
|
69
|
+
xPos: any;
|
|
70
|
+
yPos: any;
|
|
71
|
+
fill: any;
|
|
72
|
+
text: any;
|
|
73
|
+
tooltip: any;
|
|
49
74
|
};
|
|
50
|
-
render(): JSX.Element;
|
|
51
|
-
private readonly handleClick;
|
|
52
|
-
private readonly helper;
|
|
53
75
|
}
|
|
76
|
+
export {};
|
package/lib/LabelAnnotation.js
CHANGED
|
@@ -3,35 +3,101 @@ import * as React from "react";
|
|
|
3
3
|
export class LabelAnnotation extends React.Component {
|
|
4
4
|
constructor() {
|
|
5
5
|
super(...arguments);
|
|
6
|
+
this.textRef = React.createRef();
|
|
7
|
+
this.state = {
|
|
8
|
+
bbox: undefined,
|
|
9
|
+
};
|
|
6
10
|
this.handleClick = (e) => {
|
|
7
11
|
const { onClick, xScale, yScale, datum } = this.props;
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
const { x, y, datum, fill, text, tooltip, xAccessor, xScale, yScale, plotData } = this.props;
|
|
14
|
-
const xFunc = functor(x);
|
|
15
|
-
const yFunc = functor(y);
|
|
16
|
-
const [xPos, yPos] = [
|
|
17
|
-
xFunc({ xScale, xAccessor, datum, plotData }),
|
|
18
|
-
yFunc({ yScale, datum, plotData }),
|
|
19
|
-
];
|
|
20
|
-
return {
|
|
21
|
-
xPos,
|
|
22
|
-
yPos,
|
|
23
|
-
text: functor(text)(datum),
|
|
24
|
-
fill: functor(fill)(datum),
|
|
25
|
-
tooltip: functor(tooltip)(datum),
|
|
26
|
-
};
|
|
12
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(e, {
|
|
13
|
+
xScale,
|
|
14
|
+
yScale,
|
|
15
|
+
datum,
|
|
16
|
+
});
|
|
27
17
|
};
|
|
28
18
|
}
|
|
19
|
+
componentDidMount() {
|
|
20
|
+
this.updateBBox();
|
|
21
|
+
}
|
|
22
|
+
componentDidUpdate() {
|
|
23
|
+
this.updateBBox();
|
|
24
|
+
}
|
|
25
|
+
updateBBox() {
|
|
26
|
+
const el = this.textRef.current;
|
|
27
|
+
if (!el)
|
|
28
|
+
return;
|
|
29
|
+
try {
|
|
30
|
+
const bbox = el.getBBox();
|
|
31
|
+
if (!this.state.bbox ||
|
|
32
|
+
bbox.width !== this.state.bbox.width ||
|
|
33
|
+
bbox.height !== this.state.bbox.height) {
|
|
34
|
+
this.setState({ bbox });
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
catch (_a) { }
|
|
38
|
+
}
|
|
29
39
|
render() {
|
|
30
|
-
|
|
40
|
+
var _a;
|
|
41
|
+
const { className, textAnchor, fontFamily, fontSize, opacity, rotate, backgroundFill, backgroundStroke, backgroundStrokeWidth, backgroundRadius, backgroundPaddingX, backgroundPaddingY, backgroundOpacity, caretFill, offset, position, } = this.props;
|
|
42
|
+
const caretSize = (_a = this.props.caretSize) !== null && _a !== void 0 ? _a : 6;
|
|
31
43
|
const { xPos, yPos, fill, text, tooltip } = this.helper();
|
|
44
|
+
const lines = String(text !== null && text !== void 0 ? text : "").split("\n");
|
|
45
|
+
const bbox = this.state.bbox;
|
|
46
|
+
if (!bbox) {
|
|
47
|
+
return (React.createElement("text", { ref: this.textRef, x: xPos, y: yPos, fontSize: fontSize, fontFamily: fontFamily }, text));
|
|
48
|
+
}
|
|
49
|
+
const padX = backgroundPaddingX !== null && backgroundPaddingX !== void 0 ? backgroundPaddingX : 6;
|
|
50
|
+
const padY = backgroundPaddingY !== null && backgroundPaddingY !== void 0 ? backgroundPaddingY : 3;
|
|
51
|
+
const rectWidth = bbox.width + padX * 2;
|
|
52
|
+
const rectHeight = bbox.height + padY * 2;
|
|
53
|
+
const isAbove = position === "above";
|
|
54
|
+
const rectX = xPos - rectWidth / 2;
|
|
55
|
+
const rectY = isAbove
|
|
56
|
+
? yPos - rectHeight - (offset !== null && offset !== void 0 ? offset : 8)
|
|
57
|
+
: yPos + (offset !== null && offset !== void 0 ? offset : 8);
|
|
58
|
+
const textY = isAbove
|
|
59
|
+
? rectY + padY + bbox.height * 0.8
|
|
60
|
+
: rectY + padY + bbox.height * 0.8;
|
|
61
|
+
const caretPath = isAbove
|
|
62
|
+
? `
|
|
63
|
+
M ${xPos - caretSize} ${rectY + rectHeight}
|
|
64
|
+
L ${xPos + caretSize} ${rectY + rectHeight}
|
|
65
|
+
L ${xPos} ${rectY + rectHeight + caretSize}
|
|
66
|
+
`
|
|
67
|
+
: `
|
|
68
|
+
M ${xPos - caretSize} ${rectY}
|
|
69
|
+
L ${xPos + caretSize} ${rectY}
|
|
70
|
+
L ${xPos} ${rectY - caretSize}
|
|
71
|
+
`;
|
|
32
72
|
return (React.createElement("g", { className: className },
|
|
33
73
|
React.createElement("title", null, tooltip),
|
|
34
|
-
|
|
74
|
+
(backgroundFill || backgroundStroke) && (React.createElement(React.Fragment, null,
|
|
75
|
+
React.createElement("rect", { x: rectX, y: rectY, width: rectWidth, height: rectHeight, rx: backgroundRadius, ry: backgroundRadius, fill: backgroundFill, stroke: backgroundStroke, strokeWidth: backgroundStrokeWidth, opacity: backgroundOpacity }),
|
|
76
|
+
React.createElement("path", { d: caretPath, fill: caretFill !== null && caretFill !== void 0 ? caretFill : backgroundFill, stroke: backgroundStroke, strokeWidth: backgroundStrokeWidth }))),
|
|
77
|
+
React.createElement("text", { ref: this.textRef, x: xPos, y: textY, textAnchor: textAnchor, fontFamily: fontFamily, fontSize: fontSize, fill: fill, opacity: opacity, transform: `rotate(${rotate}, ${xPos}, ${textY})`, onClick: this.handleClick }, lines.map((line, i) => (React.createElement("tspan", { key: i, x: xPos, dy: i === 0 ? 0 : "1.2em" }, line))))));
|
|
78
|
+
}
|
|
79
|
+
helper() {
|
|
80
|
+
const { x, y, datum, fill, text, tooltip, xAccessor, xScale, yScale, plotData, } = this.props;
|
|
81
|
+
const xFunc = functor(x);
|
|
82
|
+
const yFunc = functor(y);
|
|
83
|
+
const xPos = xFunc({
|
|
84
|
+
xScale,
|
|
85
|
+
xAccessor,
|
|
86
|
+
datum,
|
|
87
|
+
plotData,
|
|
88
|
+
});
|
|
89
|
+
const yPos = yFunc({
|
|
90
|
+
yScale,
|
|
91
|
+
datum,
|
|
92
|
+
plotData,
|
|
93
|
+
});
|
|
94
|
+
return {
|
|
95
|
+
xPos,
|
|
96
|
+
yPos,
|
|
97
|
+
fill: functor(fill)(datum),
|
|
98
|
+
text: functor(text)(datum),
|
|
99
|
+
tooltip: functor(tooltip)(datum),
|
|
100
|
+
};
|
|
35
101
|
}
|
|
36
102
|
}
|
|
37
103
|
LabelAnnotation.defaultProps = {
|
|
@@ -39,9 +105,16 @@ LabelAnnotation.defaultProps = {
|
|
|
39
105
|
textAnchor: "middle",
|
|
40
106
|
fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
|
|
41
107
|
fontSize: 12,
|
|
42
|
-
fill: "#
|
|
108
|
+
fill: "#000",
|
|
43
109
|
opacity: 1,
|
|
44
110
|
rotate: 0,
|
|
111
|
+
backgroundRadius: 4,
|
|
112
|
+
backgroundPaddingX: 6,
|
|
113
|
+
backgroundPaddingY: 3,
|
|
114
|
+
backgroundOpacity: 1,
|
|
115
|
+
caretSize: 6,
|
|
116
|
+
offset: 8,
|
|
117
|
+
position: "above",
|
|
45
118
|
x: ({ xScale, xAccessor, datum, }) => xScale(xAccessor(datum)),
|
|
46
119
|
};
|
|
47
120
|
//# sourceMappingURL=LabelAnnotation.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LabelAnnotation.js","sourceRoot":"","sources":["../src/LabelAnnotation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"LabelAnnotation.js","sourceRoot":"","sources":["../src/LabelAnnotation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA8E/B,MAAM,OAAO,eAAgB,SAAQ,KAAK,CAAC,SAG1C;IAHD;;QAIY,YAAO,GAAG,KAAK,CAAC,SAAS,EAAkB,CAAC;QAE7C,UAAK,GAAG;YACX,IAAI,EAAE,SAAiC;SAC1C,CAAC;QAiMF,gBAAW,GAAG,CAAC,CAAmB,EAAE,EAAE;YAClC,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YAEtD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,EAAE;gBACT,MAAM;gBACN,MAAM;gBACN,KAAK;aACR,CAAC,CAAC;QACP,CAAC,CAAC;IAwCN,CAAC;IA3MG,iBAAiB;QACb,IAAI,CAAC,UAAU,EAAE,CAAC;IACtB,CAAC;IAED,kBAAkB;QACd,IAAI,CAAC,UAAU,EAAE,CAAC;IACtB,CAAC;IAED,UAAU;QACN,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;QAEhC,IAAI,CAAC,EAAE;YAAE,OAAO;QAEhB,IAAI;YACA,MAAM,IAAI,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC;YAE1B,IACI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI;gBAChB,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK;gBACpC,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EACxC;gBACE,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;aAC3B;SACJ;QAAC,WAAM,GAAE;IACd,CAAC;IAED,MAAM;;QACF,MAAM,EACF,SAAS,EACT,UAAU,EACV,UAAU,EACV,QAAQ,EACR,OAAO,EACP,MAAM,EAEN,cAAc,EACd,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EAEjB,SAAS,EAET,MAAM,EACN,QAAQ,GACX,GAAG,IAAI,CAAC,KAAK,CAAC;QAEf,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,KAAK,CAAC,SAAS,mCAAI,CAAC,CAAC;QAE5C,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAE1D,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAE7C,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QAE7B,IAAI,CAAC,IAAI,EAAE;YACP,OAAO,CACH,8BACI,GAAG,EAAE,IAAI,CAAC,OAAO,EACjB,CAAC,EAAE,IAAI,EACP,CAAC,EAAE,IAAI,EACP,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,IAErB,IAAI,CACF,CACV,CAAC;SACL;QAED,MAAM,IAAI,GAAG,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,CAAC,CAAC;QACrC,MAAM,IAAI,GAAG,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,CAAC,CAAC;QAErC,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,GAAG,CAAC,CAAC;QACxC,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,CAAC,CAAC;QAE1C,MAAM,OAAO,GAAG,QAAQ,KAAK,OAAO,CAAC;QAErC,MAAM,KAAK,GAAG,IAAI,GAAG,SAAS,GAAG,CAAC,CAAC;QAEnC,MAAM,KAAK,GAAG,OAAO;YACjB,CAAC,CAAC,IAAI,GAAG,UAAU,GAAG,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,CAAC,CAAC;YACnC,CAAC,CAAC,IAAI,GAAG,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,CAAC,CAAC,CAAC;QAE3B,MAAM,KAAK,GAAG,OAAO;YACjB,CAAC,CAAC,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,GAAG;YAClC,CAAC,CAAC,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC;QAEvC,MAAM,SAAS,GAAG,OAAO;YACrB,CAAC,CAAC;oBACM,IAAI,GAAG,SAAS,IAAI,KAAK,GAAG,UAAU;oBACtC,IAAI,GAAG,SAAS,IAAI,KAAK,GAAG,UAAU;oBACtC,IAAI,IAAI,KAAK,GAAG,UAAU,GAAG,SAAS;eAC3C;YACH,CAAC,CAAC;oBACM,IAAI,GAAG,SAAS,IAAI,KAAK;oBACzB,IAAI,GAAG,SAAS,IAAI,KAAK;oBACzB,IAAI,IAAI,KAAK,GAAG,SAAS;eAC9B,CAAC;QAER,OAAO,CACH,2BAAG,SAAS,EAAE,SAAS;YACnB,mCAAQ,OAAO,CAAS;YAEvB,CAAC,cAAc,IAAI,gBAAgB,CAAC,IAAI,CACrC;gBACI,8BACI,CAAC,EAAE,KAAK,EACR,CAAC,EAAE,KAAK,EACR,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,UAAU,EAClB,EAAE,EAAE,gBAAgB,EACpB,EAAE,EAAE,gBAAgB,EACpB,IAAI,EAAE,cAAc,EACpB,MAAM,EAAE,gBAAgB,EACxB,WAAW,EAAE,qBAAqB,EAClC,OAAO,EAAE,iBAAiB,GAC5B;gBAEF,8BACI,CAAC,EAAE,SAAS,EACZ,IAAI,EAAE,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,cAAc,EACjC,MAAM,EAAE,gBAAgB,EACxB,WAAW,EAAE,qBAAqB,GACpC,CACH,CACN;YAED,8BACI,GAAG,EAAE,IAAI,CAAC,OAAO,EACjB,CAAC,EAAE,IAAI,EACP,CAAC,EAAE,KAAK,EACR,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,UAAU,MAAM,KAAK,IAAI,KAAK,KAAK,GAAG,EACjD,OAAO,EAAE,IAAI,CAAC,WAAW,IAExB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACpB,+BACI,GAAG,EAAE,CAAC,EACN,CAAC,EAAE,IAAI,EACP,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,IAExB,IAAI,CACD,CACX,CAAC,CACC,CACP,CACP,CAAC;IACN,CAAC;IAYD,MAAM;QACF,MAAM,EACF,CAAC,EACD,CAAC,EACD,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,SAAS,EACT,MAAM,EACN,MAAM,EACN,QAAQ,GACX,GAAG,IAAI,CAAC,KAAK,CAAC;QAEf,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;QACzB,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;QAEzB,MAAM,IAAI,GAAG,KAAK,CAAC;YACf,MAAM;YACN,SAAS;YACT,KAAK;YACL,QAAQ;SACX,CAAC,CAAC;QAEH,MAAM,IAAI,GAAG,KAAK,CAAC;YACf,MAAM;YACN,KAAK;YACL,QAAQ;SACX,CAAC,CAAC;QAEH,OAAO;YACH,IAAI;YACJ,IAAI;YACJ,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;YAC1B,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;YAC1B,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC;SACnC,CAAC;IACN,CAAC;;AA9Oa,4BAAY,GAAG;IACzB,SAAS,EAAE,yCAAyC;IAEpD,UAAU,EAAE,QAAQ;IAEpB,UAAU,EACN,wEAAwE;IAE5E,QAAQ,EAAE,EAAE;IAEZ,IAAI,EAAE,MAAM;IAEZ,OAAO,EAAE,CAAC;IAEV,MAAM,EAAE,CAAC;IAET,gBAAgB,EAAE,CAAC;IAEnB,kBAAkB,EAAE,CAAC;IACrB,kBAAkB,EAAE,CAAC;IAErB,iBAAiB,EAAE,CAAC;IAEpB,SAAS,EAAE,CAAC;IAEZ,MAAM,EAAE,CAAC;IAET,QAAQ,EAAE,OAAO;IAEjB,CAAC,EAAE,CAAC,EACA,MAAM,EACN,SAAS,EACT,KAAK,GACH,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;CACtC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tradingaction/annotations",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.1.1",
|
|
4
4
|
"description": "Annotations for react-financial-charts",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -42,8 +42,8 @@
|
|
|
42
42
|
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
|
|
43
43
|
},
|
|
44
44
|
"dependencies": {
|
|
45
|
-
"@tradingaction/core": "^2.0
|
|
45
|
+
"@tradingaction/core": "^2.1.0",
|
|
46
46
|
"@types/d3-scale": "^3.2.2"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "739ff7a73174b25187bb5f829b8b2db1da1b6303"
|
|
49
49
|
}
|
package/src/BarAnnotation.tsx
CHANGED
|
@@ -131,7 +131,7 @@ export class BarAnnotation extends React.Component<BarAnnotationProps> {
|
|
|
131
131
|
fill={textFill}
|
|
132
132
|
opacity={textOpacity}
|
|
133
133
|
transform={textRotate != undefined ? `rotate(${textRotate}, ${x}, ${y})` : undefined}
|
|
134
|
-
textAnchor={textAnchor}
|
|
134
|
+
textAnchor={textAnchor as any}
|
|
135
135
|
>
|
|
136
136
|
{text}
|
|
137
137
|
</text>
|
|
@@ -146,7 +146,7 @@ export class BarAnnotation extends React.Component<BarAnnotationProps> {
|
|
|
146
146
|
fill={textIconFill}
|
|
147
147
|
opacity={textIconOpacity}
|
|
148
148
|
transform={textIconRotate != undefined ? `rotate(${textIconRotate}, ${x}, ${y})` : undefined}
|
|
149
|
-
textAnchor={textAnchor}
|
|
149
|
+
textAnchor={textAnchor as any}
|
|
150
150
|
>
|
|
151
151
|
{textIcon}
|
|
152
152
|
</text>
|
package/src/Label.tsx
CHANGED
|
@@ -45,7 +45,7 @@ export class Label extends React.Component<LabelProps> {
|
|
|
45
45
|
|
|
46
46
|
const { textAlign = "center", fontFamily, fontSize, fontWeight, rotate } = this.props;
|
|
47
47
|
|
|
48
|
-
const { canvasOriginX, canvasOriginY, margin, ratio } = this.context;
|
|
48
|
+
const { canvasOriginX, canvasOriginY, margin, ratio } = this.context as any;
|
|
49
49
|
|
|
50
50
|
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
51
51
|
ctx.scale(ratio, ratio);
|
package/src/LabelAnnotation.tsx
CHANGED
|
@@ -5,94 +5,272 @@ import * as React from "react";
|
|
|
5
5
|
export interface LabelAnnotationProps {
|
|
6
6
|
readonly className?: string;
|
|
7
7
|
readonly datum?: any;
|
|
8
|
+
|
|
8
9
|
readonly fill?: string | ((datum: any) => string);
|
|
10
|
+
|
|
9
11
|
readonly fontFamily?: string;
|
|
10
12
|
readonly fontSize?: number;
|
|
11
|
-
|
|
12
|
-
e: React.MouseEvent,
|
|
13
|
-
data: {
|
|
14
|
-
xScale?: ScaleContinuousNumeric<number, number>;
|
|
15
|
-
yScale?: ScaleContinuousNumeric<number, number>;
|
|
16
|
-
datum: any;
|
|
17
|
-
},
|
|
18
|
-
) => void;
|
|
13
|
+
|
|
19
14
|
readonly opacity?: number;
|
|
15
|
+
|
|
20
16
|
readonly plotData: any[];
|
|
17
|
+
|
|
21
18
|
readonly rotate?: number;
|
|
19
|
+
|
|
22
20
|
readonly text?: string | ((datum: any) => string);
|
|
23
|
-
|
|
21
|
+
|
|
22
|
+
readonly textAnchor?: "start" | "middle" | "end" | "inherit";
|
|
23
|
+
|
|
24
24
|
readonly tooltip?: string | ((datum: any) => string);
|
|
25
|
+
|
|
25
26
|
readonly xAccessor?: (datum: any) => any;
|
|
27
|
+
|
|
26
28
|
readonly xScale?: ScaleContinuousNumeric<number, number>;
|
|
27
|
-
|
|
28
|
-
| number
|
|
29
|
-
| (({
|
|
30
|
-
xScale,
|
|
31
|
-
xAccessor,
|
|
32
|
-
datum,
|
|
33
|
-
plotData,
|
|
34
|
-
}: {
|
|
35
|
-
xScale: ScaleContinuousNumeric<number, number>;
|
|
36
|
-
xAccessor: (datum: any) => any;
|
|
37
|
-
datum: any;
|
|
38
|
-
plotData: any[];
|
|
39
|
-
}) => number);
|
|
29
|
+
|
|
40
30
|
readonly yScale?: ScaleContinuousNumeric<number, number>;
|
|
31
|
+
|
|
32
|
+
readonly x?:
|
|
33
|
+
| number
|
|
34
|
+
| (({
|
|
35
|
+
xScale,
|
|
36
|
+
xAccessor,
|
|
37
|
+
datum,
|
|
38
|
+
plotData,
|
|
39
|
+
}: any) => number);
|
|
40
|
+
|
|
41
41
|
readonly y?:
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
42
|
+
| number
|
|
43
|
+
| (({
|
|
44
|
+
yScale,
|
|
45
|
+
datum,
|
|
46
|
+
plotData,
|
|
47
|
+
}: any) => number);
|
|
48
|
+
|
|
49
|
+
readonly onClick?: (
|
|
50
|
+
e: React.MouseEvent,
|
|
51
|
+
data: any,
|
|
52
|
+
) => void;
|
|
53
|
+
|
|
54
|
+
/* background */
|
|
55
|
+
readonly backgroundFill?: string;
|
|
56
|
+
readonly backgroundStroke?: string;
|
|
57
|
+
readonly backgroundStrokeWidth?: number;
|
|
58
|
+
readonly backgroundRadius?: number;
|
|
59
|
+
|
|
60
|
+
readonly backgroundPaddingX?: number;
|
|
61
|
+
readonly backgroundPaddingY?: number;
|
|
62
|
+
|
|
63
|
+
readonly backgroundOpacity?: number;
|
|
64
|
+
|
|
65
|
+
/* position */
|
|
66
|
+
readonly position?: "above" | "below";
|
|
67
|
+
|
|
68
|
+
readonly caretSize?: number;
|
|
69
|
+
readonly caretFill?: string;
|
|
70
|
+
|
|
71
|
+
readonly offset?: number;
|
|
52
72
|
}
|
|
53
73
|
|
|
54
|
-
|
|
74
|
+
type TextBBox = {
|
|
75
|
+
x: number;
|
|
76
|
+
y: number;
|
|
77
|
+
width: number;
|
|
78
|
+
height: number;
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
export class LabelAnnotation extends React.Component<
|
|
82
|
+
LabelAnnotationProps,
|
|
83
|
+
{ bbox?: TextBBox }
|
|
84
|
+
> {
|
|
85
|
+
private textRef = React.createRef<SVGTextElement>();
|
|
86
|
+
|
|
87
|
+
public state = {
|
|
88
|
+
bbox: undefined as TextBBox | undefined,
|
|
89
|
+
};
|
|
90
|
+
|
|
55
91
|
public static defaultProps = {
|
|
56
92
|
className: "react-financial-charts-label-annotation",
|
|
93
|
+
|
|
57
94
|
textAnchor: "middle",
|
|
58
|
-
|
|
95
|
+
|
|
96
|
+
fontFamily:
|
|
97
|
+
"-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
|
|
98
|
+
|
|
59
99
|
fontSize: 12,
|
|
60
|
-
|
|
100
|
+
|
|
101
|
+
fill: "#000",
|
|
102
|
+
|
|
61
103
|
opacity: 1,
|
|
104
|
+
|
|
62
105
|
rotate: 0,
|
|
106
|
+
|
|
107
|
+
backgroundRadius: 4,
|
|
108
|
+
|
|
109
|
+
backgroundPaddingX: 6,
|
|
110
|
+
backgroundPaddingY: 3,
|
|
111
|
+
|
|
112
|
+
backgroundOpacity: 1,
|
|
113
|
+
|
|
114
|
+
caretSize: 6,
|
|
115
|
+
|
|
116
|
+
offset: 8,
|
|
117
|
+
|
|
118
|
+
position: "above",
|
|
119
|
+
|
|
63
120
|
x: ({
|
|
64
121
|
xScale,
|
|
65
122
|
xAccessor,
|
|
66
123
|
datum,
|
|
67
|
-
}:
|
|
68
|
-
xScale: ScaleContinuousNumeric<number, number>;
|
|
69
|
-
xAccessor: any;
|
|
70
|
-
datum: any;
|
|
71
|
-
}) => xScale(xAccessor(datum)),
|
|
124
|
+
}: any) => xScale(xAccessor(datum)),
|
|
72
125
|
};
|
|
73
126
|
|
|
74
|
-
|
|
75
|
-
|
|
127
|
+
componentDidMount() {
|
|
128
|
+
this.updateBBox();
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
componentDidUpdate() {
|
|
132
|
+
this.updateBBox();
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
updateBBox() {
|
|
136
|
+
const el = this.textRef.current;
|
|
137
|
+
|
|
138
|
+
if (!el) return;
|
|
139
|
+
|
|
140
|
+
try {
|
|
141
|
+
const bbox = el.getBBox();
|
|
142
|
+
|
|
143
|
+
if (
|
|
144
|
+
!this.state.bbox ||
|
|
145
|
+
bbox.width !== this.state.bbox.width ||
|
|
146
|
+
bbox.height !== this.state.bbox.height
|
|
147
|
+
) {
|
|
148
|
+
this.setState({ bbox });
|
|
149
|
+
}
|
|
150
|
+
} catch {}
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
render() {
|
|
154
|
+
const {
|
|
155
|
+
className,
|
|
156
|
+
textAnchor,
|
|
157
|
+
fontFamily,
|
|
158
|
+
fontSize,
|
|
159
|
+
opacity,
|
|
160
|
+
rotate,
|
|
161
|
+
|
|
162
|
+
backgroundFill,
|
|
163
|
+
backgroundStroke,
|
|
164
|
+
backgroundStrokeWidth,
|
|
165
|
+
backgroundRadius,
|
|
166
|
+
backgroundPaddingX,
|
|
167
|
+
backgroundPaddingY,
|
|
168
|
+
backgroundOpacity,
|
|
169
|
+
|
|
170
|
+
caretFill,
|
|
171
|
+
|
|
172
|
+
offset,
|
|
173
|
+
position,
|
|
174
|
+
} = this.props;
|
|
175
|
+
|
|
176
|
+
const caretSize = this.props.caretSize ?? 6;
|
|
76
177
|
|
|
77
178
|
const { xPos, yPos, fill, text, tooltip } = this.helper();
|
|
78
179
|
|
|
180
|
+
const lines = String(text ?? "").split("\n");
|
|
181
|
+
|
|
182
|
+
const bbox = this.state.bbox;
|
|
183
|
+
|
|
184
|
+
if (!bbox) {
|
|
185
|
+
return (
|
|
186
|
+
<text
|
|
187
|
+
ref={this.textRef}
|
|
188
|
+
x={xPos}
|
|
189
|
+
y={yPos}
|
|
190
|
+
fontSize={fontSize}
|
|
191
|
+
fontFamily={fontFamily}
|
|
192
|
+
>
|
|
193
|
+
{text}
|
|
194
|
+
</text>
|
|
195
|
+
);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
const padX = backgroundPaddingX ?? 6;
|
|
199
|
+
const padY = backgroundPaddingY ?? 3;
|
|
200
|
+
|
|
201
|
+
const rectWidth = bbox.width + padX * 2;
|
|
202
|
+
const rectHeight = bbox.height + padY * 2;
|
|
203
|
+
|
|
204
|
+
const isAbove = position === "above";
|
|
205
|
+
|
|
206
|
+
const rectX = xPos - rectWidth / 2;
|
|
207
|
+
|
|
208
|
+
const rectY = isAbove
|
|
209
|
+
? yPos - rectHeight - (offset ?? 8)
|
|
210
|
+
: yPos + (offset ?? 8);
|
|
211
|
+
|
|
212
|
+
const textY = isAbove
|
|
213
|
+
? rectY + padY + bbox.height * 0.8
|
|
214
|
+
: rectY + padY + bbox.height * 0.8;
|
|
215
|
+
|
|
216
|
+
const caretPath = isAbove
|
|
217
|
+
? `
|
|
218
|
+
M ${xPos - caretSize} ${rectY + rectHeight}
|
|
219
|
+
L ${xPos + caretSize} ${rectY + rectHeight}
|
|
220
|
+
L ${xPos} ${rectY + rectHeight + caretSize}
|
|
221
|
+
`
|
|
222
|
+
: `
|
|
223
|
+
M ${xPos - caretSize} ${rectY}
|
|
224
|
+
L ${xPos + caretSize} ${rectY}
|
|
225
|
+
L ${xPos} ${rectY - caretSize}
|
|
226
|
+
`;
|
|
227
|
+
|
|
79
228
|
return (
|
|
80
229
|
<g className={className}>
|
|
81
230
|
<title>{tooltip}</title>
|
|
231
|
+
|
|
232
|
+
{(backgroundFill || backgroundStroke) && (
|
|
233
|
+
<>
|
|
234
|
+
<rect
|
|
235
|
+
x={rectX}
|
|
236
|
+
y={rectY}
|
|
237
|
+
width={rectWidth}
|
|
238
|
+
height={rectHeight}
|
|
239
|
+
rx={backgroundRadius}
|
|
240
|
+
ry={backgroundRadius}
|
|
241
|
+
fill={backgroundFill}
|
|
242
|
+
stroke={backgroundStroke}
|
|
243
|
+
strokeWidth={backgroundStrokeWidth}
|
|
244
|
+
opacity={backgroundOpacity}
|
|
245
|
+
/>
|
|
246
|
+
|
|
247
|
+
<path
|
|
248
|
+
d={caretPath}
|
|
249
|
+
fill={caretFill ?? backgroundFill}
|
|
250
|
+
stroke={backgroundStroke}
|
|
251
|
+
strokeWidth={backgroundStrokeWidth}
|
|
252
|
+
/>
|
|
253
|
+
</>
|
|
254
|
+
)}
|
|
255
|
+
|
|
82
256
|
<text
|
|
257
|
+
ref={this.textRef}
|
|
83
258
|
x={xPos}
|
|
84
|
-
y={
|
|
259
|
+
y={textY}
|
|
260
|
+
textAnchor={textAnchor}
|
|
85
261
|
fontFamily={fontFamily}
|
|
86
262
|
fontSize={fontSize}
|
|
87
263
|
fill={fill}
|
|
88
264
|
opacity={opacity}
|
|
89
|
-
transform={`rotate(${rotate}, ${xPos}, ${
|
|
265
|
+
transform={`rotate(${rotate}, ${xPos}, ${textY})`}
|
|
90
266
|
onClick={this.handleClick}
|
|
91
|
-
textAnchor={textAnchor}
|
|
92
|
-
|
|
93
267
|
>
|
|
94
|
-
{
|
|
95
|
-
<tspan
|
|
268
|
+
{lines.map((line, i) => (
|
|
269
|
+
<tspan
|
|
270
|
+
key={i}
|
|
271
|
+
x={xPos}
|
|
272
|
+
dy={i === 0 ? 0 : "1.2em"}
|
|
273
|
+
>
|
|
96
274
|
{line}
|
|
97
275
|
</tspan>
|
|
98
276
|
))}
|
|
@@ -101,30 +279,52 @@ export class LabelAnnotation extends React.Component<LabelAnnotationProps> {
|
|
|
101
279
|
);
|
|
102
280
|
}
|
|
103
281
|
|
|
104
|
-
|
|
282
|
+
handleClick = (e: React.MouseEvent) => {
|
|
105
283
|
const { onClick, xScale, yScale, datum } = this.props;
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
284
|
+
|
|
285
|
+
onClick?.(e, {
|
|
286
|
+
xScale,
|
|
287
|
+
yScale,
|
|
288
|
+
datum,
|
|
289
|
+
});
|
|
109
290
|
};
|
|
110
291
|
|
|
111
|
-
|
|
112
|
-
const {
|
|
292
|
+
helper() {
|
|
293
|
+
const {
|
|
294
|
+
x,
|
|
295
|
+
y,
|
|
296
|
+
datum,
|
|
297
|
+
fill,
|
|
298
|
+
text,
|
|
299
|
+
tooltip,
|
|
300
|
+
xAccessor,
|
|
301
|
+
xScale,
|
|
302
|
+
yScale,
|
|
303
|
+
plotData,
|
|
304
|
+
} = this.props;
|
|
113
305
|
|
|
114
306
|
const xFunc = functor(x);
|
|
115
307
|
const yFunc = functor(y);
|
|
116
308
|
|
|
117
|
-
const
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
309
|
+
const xPos = xFunc({
|
|
310
|
+
xScale,
|
|
311
|
+
xAccessor,
|
|
312
|
+
datum,
|
|
313
|
+
plotData,
|
|
314
|
+
});
|
|
315
|
+
|
|
316
|
+
const yPos = yFunc({
|
|
317
|
+
yScale,
|
|
318
|
+
datum,
|
|
319
|
+
plotData,
|
|
320
|
+
});
|
|
121
321
|
|
|
122
322
|
return {
|
|
123
323
|
xPos,
|
|
124
324
|
yPos,
|
|
125
|
-
text: functor(text)(datum),
|
|
126
325
|
fill: functor(fill)(datum),
|
|
326
|
+
text: functor(text)(datum),
|
|
127
327
|
tooltip: functor(tooltip)(datum),
|
|
128
328
|
};
|
|
129
|
-
}
|
|
130
|
-
}
|
|
329
|
+
}
|
|
330
|
+
}
|