@tradingaction/series 2.0.15
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 -0
- package/README.md +5 -0
- package/lib/AlternateDataSeries.d.ts +5 -0
- package/lib/AlternateDataSeries.js +16 -0
- package/lib/AlternateDataSeries.js.map +1 -0
- package/lib/AlternatingFillAreaSeries.d.ts +77 -0
- package/lib/AlternatingFillAreaSeries.js +69 -0
- package/lib/AlternatingFillAreaSeries.js.map +1 -0
- package/lib/AreaOnlySeries.d.ts +42 -0
- package/lib/AreaOnlySeries.js +53 -0
- package/lib/AreaOnlySeries.js.map +1 -0
- package/lib/AreaSeries.d.ts +46 -0
- package/lib/AreaSeries.js +21 -0
- package/lib/AreaSeries.js.map +1 -0
- package/lib/BarSeries.d.ts +36 -0
- package/lib/BarSeries.js +91 -0
- package/lib/BarSeries.js.map +1 -0
- package/lib/BollingerSeries.d.ts +33 -0
- package/lib/BollingerSeries.js +59 -0
- package/lib/BollingerSeries.js.map +1 -0
- package/lib/CandlestickSeries.d.ts +65 -0
- package/lib/CandlestickSeries.js +115 -0
- package/lib/CandlestickSeries.js.map +1 -0
- package/lib/ElderRaySeries.d.ts +45 -0
- package/lib/ElderRaySeries.js +66 -0
- package/lib/ElderRaySeries.js.map +1 -0
- package/lib/GroupedBarSeries.d.ts +33 -0
- package/lib/GroupedBarSeries.js +22 -0
- package/lib/GroupedBarSeries.js.map +1 -0
- package/lib/KagiSeries.d.ts +45 -0
- package/lib/KagiSeries.js +108 -0
- package/lib/KagiSeries.js.map +1 -0
- package/lib/LineSeries.d.ts +84 -0
- package/lib/LineSeries.js +102 -0
- package/lib/LineSeries.js.map +1 -0
- package/lib/MACDSeries.d.ts +55 -0
- package/lib/MACDSeries.js +62 -0
- package/lib/MACDSeries.js.map +1 -0
- package/lib/OHLCSeries.d.ts +32 -0
- package/lib/OHLCSeries.js +67 -0
- package/lib/OHLCSeries.js.map +1 -0
- package/lib/OverlayBarSeries.d.ts +35 -0
- package/lib/OverlayBarSeries.js +71 -0
- package/lib/OverlayBarSeries.js.map +1 -0
- package/lib/PointAndFigureSeries.d.ts +33 -0
- package/lib/PointAndFigureSeries.js +92 -0
- package/lib/PointAndFigureSeries.js.map +1 -0
- package/lib/RSISeries.d.ts +68 -0
- package/lib/RSISeries.js +82 -0
- package/lib/RSISeries.js.map +1 -0
- package/lib/RenkoSeries.d.ts +42 -0
- package/lib/RenkoSeries.js +65 -0
- package/lib/RenkoSeries.js.map +1 -0
- package/lib/SARSeries.d.ts +34 -0
- package/lib/SARSeries.js +69 -0
- package/lib/SARSeries.js.map +1 -0
- package/lib/SVGComponent.d.ts +8 -0
- package/lib/SVGComponent.js +9 -0
- package/lib/SVGComponent.js.map +1 -0
- package/lib/ScatterSeries.d.ts +24 -0
- package/lib/ScatterSeries.js +60 -0
- package/lib/ScatterSeries.js.map +1 -0
- package/lib/StackedBarSeries.d.ts +44 -0
- package/lib/StackedBarSeries.js +157 -0
- package/lib/StackedBarSeries.js.map +1 -0
- package/lib/StochasticSeries.d.ts +39 -0
- package/lib/StochasticSeries.js +42 -0
- package/lib/StochasticSeries.js.map +1 -0
- package/lib/StraightLine.d.ts +38 -0
- package/lib/StraightLine.js +81 -0
- package/lib/StraightLine.js.map +1 -0
- package/lib/VolumeProfileSeries.d.ts +45 -0
- package/lib/VolumeProfileSeries.js +161 -0
- package/lib/VolumeProfileSeries.js.map +1 -0
- package/lib/index.d.ts +23 -0
- package/lib/index.js +24 -0
- package/lib/index.js.map +1 -0
- package/lib/markers/CircleMarker.d.ts +25 -0
- package/lib/markers/CircleMarker.js +35 -0
- package/lib/markers/CircleMarker.js.map +1 -0
- package/lib/markers/SquareMarker.d.ts +25 -0
- package/lib/markers/SquareMarker.js +37 -0
- package/lib/markers/SquareMarker.js.map +1 -0
- package/lib/markers/TriangleMarker.d.ts +27 -0
- package/lib/markers/TriangleMarker.js +89 -0
- package/lib/markers/TriangleMarker.js.map +1 -0
- package/lib/markers/index.d.ts +3 -0
- package/lib/markers/index.js +4 -0
- package/lib/markers/index.js.map +1 -0
- package/package.json +52 -0
- package/src/AlternateDataSeries.tsx +29 -0
- package/src/AlternatingFillAreaSeries.tsx +159 -0
- package/src/AreaOnlySeries.tsx +106 -0
- package/src/AreaSeries.tsx +95 -0
- package/src/BarSeries.tsx +151 -0
- package/src/BollingerSeries.tsx +90 -0
- package/src/CandlestickSeries.tsx +188 -0
- package/src/ElderRaySeries.tsx +99 -0
- package/src/GroupedBarSeries.tsx +48 -0
- package/src/KagiSeries.tsx +155 -0
- package/src/LineSeries.tsx +223 -0
- package/src/MACDSeries.tsx +110 -0
- package/src/OHLCSeries.tsx +116 -0
- package/src/OverlayBarSeries.tsx +115 -0
- package/src/PointAndFigureSeries.tsx +140 -0
- package/src/RSISeries.tsx +158 -0
- package/src/RenkoSeries.tsx +118 -0
- package/src/SARSeries.tsx +111 -0
- package/src/SVGComponent.tsx +13 -0
- package/src/ScatterSeries.tsx +105 -0
- package/src/StackedBarSeries.tsx +272 -0
- package/src/StochasticSeries.tsx +70 -0
- package/src/StraightLine.tsx +166 -0
- package/src/VolumeProfileSeries.tsx +247 -0
- package/src/index.ts +23 -0
- package/src/markers/CircleMarker.tsx +69 -0
- package/src/markers/SquareMarker.tsx +71 -0
- package/src/markers/TriangleMarker.tsx +131 -0
- package/src/markers/index.ts +3 -0
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { strokeDashTypes } from "@tradingaction/core";
|
|
3
|
+
export interface RSISeriesProps {
|
|
4
|
+
readonly className?: string;
|
|
5
|
+
readonly yAccessor: (data: any) => any;
|
|
6
|
+
readonly strokeStyle?: {
|
|
7
|
+
line: string;
|
|
8
|
+
top: string;
|
|
9
|
+
middle: string;
|
|
10
|
+
bottom: string;
|
|
11
|
+
outsideThreshold: string;
|
|
12
|
+
insideThreshold: string;
|
|
13
|
+
};
|
|
14
|
+
readonly strokeDasharray?: {
|
|
15
|
+
line: strokeDashTypes;
|
|
16
|
+
top: strokeDashTypes;
|
|
17
|
+
middle: strokeDashTypes;
|
|
18
|
+
bottom: strokeDashTypes;
|
|
19
|
+
};
|
|
20
|
+
readonly strokeWidth?: {
|
|
21
|
+
outsideThreshold: number;
|
|
22
|
+
insideThreshold: number;
|
|
23
|
+
top: number;
|
|
24
|
+
middle: number;
|
|
25
|
+
bottom: number;
|
|
26
|
+
};
|
|
27
|
+
readonly overSold?: number;
|
|
28
|
+
readonly middle?: number;
|
|
29
|
+
readonly overBought?: number;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* The Relative Strength Index (RSI) is a momentum oscillator that measures the speed and change of price movements.
|
|
33
|
+
*/
|
|
34
|
+
export declare class RSISeries extends React.Component<RSISeriesProps> {
|
|
35
|
+
static defaultProps: {
|
|
36
|
+
className: string;
|
|
37
|
+
strokeStyle: {
|
|
38
|
+
line: string;
|
|
39
|
+
top: string;
|
|
40
|
+
middle: string;
|
|
41
|
+
bottom: string;
|
|
42
|
+
outsideThreshold: string;
|
|
43
|
+
insideThreshold: string;
|
|
44
|
+
};
|
|
45
|
+
strokeDasharray: {
|
|
46
|
+
line: strokeDashTypes;
|
|
47
|
+
top: strokeDashTypes;
|
|
48
|
+
middle: strokeDashTypes;
|
|
49
|
+
bottom: strokeDashTypes;
|
|
50
|
+
};
|
|
51
|
+
strokeWidth: {
|
|
52
|
+
outsideThreshold: number;
|
|
53
|
+
insideThreshold: number;
|
|
54
|
+
top: number;
|
|
55
|
+
middle: number;
|
|
56
|
+
bottom: number;
|
|
57
|
+
};
|
|
58
|
+
overSold: number;
|
|
59
|
+
middle: number;
|
|
60
|
+
overBought: number;
|
|
61
|
+
};
|
|
62
|
+
private clipPathId1;
|
|
63
|
+
private clipPathId2;
|
|
64
|
+
render(): JSX.Element;
|
|
65
|
+
private readonly renderClip;
|
|
66
|
+
private readonly mainClip;
|
|
67
|
+
private readonly topAndBottomClip;
|
|
68
|
+
}
|
package/lib/RSISeries.js
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { LineSeries } from "./LineSeries";
|
|
3
|
+
import { StraightLine } from "./StraightLine";
|
|
4
|
+
import { SVGComponent } from "./SVGComponent";
|
|
5
|
+
/**
|
|
6
|
+
* The Relative Strength Index (RSI) is a momentum oscillator that measures the speed and change of price movements.
|
|
7
|
+
*/
|
|
8
|
+
export class RSISeries extends React.Component {
|
|
9
|
+
constructor() {
|
|
10
|
+
super(...arguments);
|
|
11
|
+
this.clipPathId1 = `rsi-clip-${String(Math.round(Math.random() * 10000 * 10000))}`;
|
|
12
|
+
this.clipPathId2 = `rsi-clip-${String(Math.round(Math.random() * 10000 * 10000))}`;
|
|
13
|
+
this.renderClip = (moreProps) => {
|
|
14
|
+
const { chartConfig } = moreProps;
|
|
15
|
+
const { overSold, overBought } = this.props;
|
|
16
|
+
const { yScale, width, height } = chartConfig;
|
|
17
|
+
return (React.createElement("defs", null,
|
|
18
|
+
React.createElement("clipPath", { id: this.clipPathId1 },
|
|
19
|
+
React.createElement("rect", { x: 0, y: yScale(overSold), width: width, height: yScale(overBought) - yScale(overSold) })),
|
|
20
|
+
React.createElement("clipPath", { id: this.clipPathId2 },
|
|
21
|
+
React.createElement("rect", { x: 0, y: 0, width: width, height: yScale(overSold) }),
|
|
22
|
+
React.createElement("rect", { x: 0, y: yScale(overBought), width: width, height: height - yScale(overBought) }))));
|
|
23
|
+
};
|
|
24
|
+
this.mainClip = (ctx, moreProps) => {
|
|
25
|
+
const { chartConfig } = moreProps;
|
|
26
|
+
const { overSold, overBought } = this.props;
|
|
27
|
+
const { yScale, width, height } = chartConfig;
|
|
28
|
+
ctx.beginPath();
|
|
29
|
+
ctx.rect(0, 0, width, yScale(overSold));
|
|
30
|
+
ctx.rect(0, yScale(overBought), width, height - yScale(overBought));
|
|
31
|
+
ctx.clip();
|
|
32
|
+
};
|
|
33
|
+
this.topAndBottomClip = (ctx, moreProps) => {
|
|
34
|
+
const { chartConfig } = moreProps;
|
|
35
|
+
const { overSold, overBought } = this.props;
|
|
36
|
+
const { yScale, width } = chartConfig;
|
|
37
|
+
ctx.beginPath();
|
|
38
|
+
ctx.rect(0, yScale(overSold), width, yScale(overBought) - yScale(overSold));
|
|
39
|
+
ctx.clip();
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
render() {
|
|
43
|
+
const { className, strokeStyle = RSISeries.defaultProps.strokeStyle, strokeDasharray = RSISeries.defaultProps.strokeDasharray, strokeWidth = RSISeries.defaultProps.strokeWidth, } = this.props;
|
|
44
|
+
const { yAccessor } = this.props;
|
|
45
|
+
const { overSold, middle, overBought } = this.props;
|
|
46
|
+
return (React.createElement("g", { className: className },
|
|
47
|
+
React.createElement(SVGComponent, null, this.renderClip),
|
|
48
|
+
React.createElement(StraightLine, { strokeStyle: strokeStyle.top, yValue: overSold, lineDash: strokeDasharray.top, lineWidth: strokeWidth.top }),
|
|
49
|
+
React.createElement(StraightLine, { strokeStyle: strokeStyle.middle, yValue: middle, lineDash: strokeDasharray.middle, lineWidth: strokeWidth.middle }),
|
|
50
|
+
React.createElement(StraightLine, { strokeStyle: strokeStyle.bottom, yValue: overBought, lineDash: strokeDasharray.bottom, lineWidth: strokeWidth.bottom }),
|
|
51
|
+
React.createElement(LineSeries, { canvasClip: this.topAndBottomClip, yAccessor: yAccessor, strokeStyle: strokeStyle.insideThreshold || strokeStyle.line, strokeWidth: strokeWidth.insideThreshold, strokeDasharray: strokeDasharray.line }),
|
|
52
|
+
React.createElement(LineSeries, { canvasClip: this.mainClip, yAccessor: yAccessor, strokeStyle: strokeStyle.outsideThreshold || strokeStyle.line, strokeWidth: strokeWidth.outsideThreshold, strokeDasharray: strokeDasharray.line })));
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
RSISeries.defaultProps = {
|
|
56
|
+
className: "react-financial-charts-rsi-series",
|
|
57
|
+
strokeStyle: {
|
|
58
|
+
line: "#000000",
|
|
59
|
+
top: "#B8C2CC",
|
|
60
|
+
middle: "#8795A1",
|
|
61
|
+
bottom: "#B8C2CC",
|
|
62
|
+
outsideThreshold: "#b300b3",
|
|
63
|
+
insideThreshold: "#ffccff",
|
|
64
|
+
},
|
|
65
|
+
strokeDasharray: {
|
|
66
|
+
line: "Solid",
|
|
67
|
+
top: "ShortDash",
|
|
68
|
+
middle: "ShortDash",
|
|
69
|
+
bottom: "ShortDash",
|
|
70
|
+
},
|
|
71
|
+
strokeWidth: {
|
|
72
|
+
outsideThreshold: 1,
|
|
73
|
+
insideThreshold: 1,
|
|
74
|
+
top: 1,
|
|
75
|
+
middle: 1,
|
|
76
|
+
bottom: 1,
|
|
77
|
+
},
|
|
78
|
+
overSold: 70,
|
|
79
|
+
middle: 50,
|
|
80
|
+
overBought: 30,
|
|
81
|
+
};
|
|
82
|
+
//# sourceMappingURL=RSISeries.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RSISeries.js","sourceRoot":"","sources":["../src/RSISeries.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
export interface RenkoSeriesProps {
|
|
3
|
+
readonly clip?: boolean;
|
|
4
|
+
readonly fill?: {
|
|
5
|
+
up: string;
|
|
6
|
+
down: string;
|
|
7
|
+
partial: string;
|
|
8
|
+
};
|
|
9
|
+
readonly stroke?: {
|
|
10
|
+
up: string;
|
|
11
|
+
down: string;
|
|
12
|
+
};
|
|
13
|
+
readonly yAccessor?: (data: any) => any;
|
|
14
|
+
readonly onClickWhenHover?: (e: React.MouseEvent, moreProps: any) => void;
|
|
15
|
+
readonly onDoubleClickWhenHover?: (e: React.MouseEvent, moreProps: any) => void;
|
|
16
|
+
readonly onDoubleClick?: (e: React.MouseEvent, moreProps: any) => void;
|
|
17
|
+
readonly onContextMenu?: (e: React.MouseEvent, moreProps: any) => void;
|
|
18
|
+
readonly onClickOutside?: (e: React.MouseEvent, moreProps: any) => void;
|
|
19
|
+
}
|
|
20
|
+
export declare class RenkoSeries extends React.Component<RenkoSeriesProps> {
|
|
21
|
+
static defaultProps: {
|
|
22
|
+
clip: boolean;
|
|
23
|
+
fill: {
|
|
24
|
+
up: string;
|
|
25
|
+
down: string;
|
|
26
|
+
partial: string;
|
|
27
|
+
};
|
|
28
|
+
stroke: {
|
|
29
|
+
up: string;
|
|
30
|
+
down: string;
|
|
31
|
+
};
|
|
32
|
+
yAccessor: (d: any) => {
|
|
33
|
+
open: any;
|
|
34
|
+
high: any;
|
|
35
|
+
low: any;
|
|
36
|
+
close: any;
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
render(): JSX.Element;
|
|
40
|
+
private readonly drawOnCanvas;
|
|
41
|
+
private readonly getRenko;
|
|
42
|
+
}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { isDefined, getAxisCanvas, GenericChartComponent } from "@tradingaction/core";
|
|
3
|
+
export class RenkoSeries extends React.Component {
|
|
4
|
+
constructor() {
|
|
5
|
+
super(...arguments);
|
|
6
|
+
this.drawOnCanvas = (ctx, moreProps) => {
|
|
7
|
+
const { xAccessor, xScale, chartConfig: { yScale }, plotData, } = moreProps;
|
|
8
|
+
const renko = this.getRenko(plotData, xScale, xAccessor, yScale);
|
|
9
|
+
renko.forEach((d) => {
|
|
10
|
+
const { fillStyle, strokeStyle } = d;
|
|
11
|
+
ctx.beginPath();
|
|
12
|
+
if (strokeStyle !== undefined) {
|
|
13
|
+
ctx.strokeStyle = strokeStyle;
|
|
14
|
+
}
|
|
15
|
+
if (fillStyle !== undefined) {
|
|
16
|
+
ctx.fillStyle = fillStyle;
|
|
17
|
+
}
|
|
18
|
+
ctx.rect(d.x, d.y, d.width, d.height);
|
|
19
|
+
ctx.closePath();
|
|
20
|
+
ctx.fill();
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
this.getRenko = (plotData, xScale, xAccessor, yScale) => {
|
|
24
|
+
const { fill, stroke, yAccessor = RenkoSeries.defaultProps.yAccessor } = this.props;
|
|
25
|
+
const width = xScale(xAccessor(plotData[plotData.length - 1])) - xScale(xAccessor(plotData[0]));
|
|
26
|
+
const candleWidth = width / (plotData.length - 1);
|
|
27
|
+
return plotData
|
|
28
|
+
.filter((d) => isDefined(yAccessor(d).close))
|
|
29
|
+
.map((d) => {
|
|
30
|
+
const ohlc = yAccessor(d);
|
|
31
|
+
const x = xScale(xAccessor(d)) - 0.5 * candleWidth;
|
|
32
|
+
const y = yScale(Math.max(ohlc.open, ohlc.close));
|
|
33
|
+
const height = Math.abs(yScale(ohlc.open) - yScale(ohlc.close));
|
|
34
|
+
const fillStyle = d.fullyFormed ? (ohlc.open <= ohlc.close ? fill === null || fill === void 0 ? void 0 : fill.up : fill === null || fill === void 0 ? void 0 : fill.down) : fill === null || fill === void 0 ? void 0 : fill.partial;
|
|
35
|
+
const strokeStyle = d.fullyFormed ? (ohlc.open <= ohlc.close ? stroke === null || stroke === void 0 ? void 0 : stroke.up : stroke === null || stroke === void 0 ? void 0 : stroke.down) : undefined;
|
|
36
|
+
return {
|
|
37
|
+
fillStyle,
|
|
38
|
+
height,
|
|
39
|
+
strokeStyle,
|
|
40
|
+
width: candleWidth,
|
|
41
|
+
x,
|
|
42
|
+
y,
|
|
43
|
+
};
|
|
44
|
+
});
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
render() {
|
|
48
|
+
const { clip } = this.props;
|
|
49
|
+
return (React.createElement(GenericChartComponent, { clip: clip, canvasDraw: this.drawOnCanvas, canvasToDraw: getAxisCanvas, drawOn: ["pan", "mousemove"], onClickWhenHover: this.props.onClickWhenHover, onDoubleClickWhenHover: this.props.onDoubleClickWhenHover, onDoubleClick: this.props.onDoubleClick, onContextMenu: this.props.onContextMenu, onClickOutside: this.props.onClickOutside }));
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
RenkoSeries.defaultProps = {
|
|
53
|
+
clip: true,
|
|
54
|
+
fill: {
|
|
55
|
+
up: "#26a69a",
|
|
56
|
+
down: "#ef5350",
|
|
57
|
+
partial: "#4682B4",
|
|
58
|
+
},
|
|
59
|
+
stroke: {
|
|
60
|
+
up: "none",
|
|
61
|
+
down: "none",
|
|
62
|
+
},
|
|
63
|
+
yAccessor: (d) => ({ open: d.open, high: d.high, low: d.low, close: d.close }),
|
|
64
|
+
};
|
|
65
|
+
//# sourceMappingURL=RenkoSeries.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RenkoSeries.js","sourceRoot":"","sources":["../src/RenkoSeries.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
export interface SARSeriesProps {
|
|
3
|
+
readonly fillStyle?: {
|
|
4
|
+
falling: string;
|
|
5
|
+
rising: string;
|
|
6
|
+
};
|
|
7
|
+
readonly strokeStyle?: {
|
|
8
|
+
falling: string;
|
|
9
|
+
rising: string;
|
|
10
|
+
};
|
|
11
|
+
readonly highlightOnHover?: boolean;
|
|
12
|
+
readonly onClick?: (e: React.MouseEvent, moreProps: any) => void;
|
|
13
|
+
readonly onDoubleClick?: (e: React.MouseEvent, moreProps: any) => void;
|
|
14
|
+
readonly onContextMenu?: (e: React.MouseEvent, moreProps: any) => void;
|
|
15
|
+
readonly yAccessor: (datum: any) => number | undefined;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* SAR stands for 'stop and reverse'.
|
|
19
|
+
* The indicator is below prices as they're rising and above
|
|
20
|
+
* prices as they're falling. In this regard, the indicator
|
|
21
|
+
* stops and reverses when the price trend reverses and breaks above or below the indicator.
|
|
22
|
+
*/
|
|
23
|
+
export declare class SARSeries extends React.Component<SARSeriesProps> {
|
|
24
|
+
static defaultProps: {
|
|
25
|
+
fillStyle: {
|
|
26
|
+
falling: string;
|
|
27
|
+
rising: string;
|
|
28
|
+
};
|
|
29
|
+
highlightOnHover: boolean;
|
|
30
|
+
};
|
|
31
|
+
render(): JSX.Element;
|
|
32
|
+
private readonly drawOnCanvas;
|
|
33
|
+
private readonly isHover;
|
|
34
|
+
}
|
package/lib/SARSeries.js
ADDED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { first, getAxisCanvas, getMouseCanvas, GenericChartComponent, last } from "@tradingaction/core";
|
|
3
|
+
/**
|
|
4
|
+
* SAR stands for 'stop and reverse'.
|
|
5
|
+
* The indicator is below prices as they're rising and above
|
|
6
|
+
* prices as they're falling. In this regard, the indicator
|
|
7
|
+
* stops and reverses when the price trend reverses and breaks above or below the indicator.
|
|
8
|
+
*/
|
|
9
|
+
export class SARSeries extends React.Component {
|
|
10
|
+
constructor() {
|
|
11
|
+
super(...arguments);
|
|
12
|
+
this.drawOnCanvas = (ctx, moreProps) => {
|
|
13
|
+
const { yAccessor, fillStyle = SARSeries.defaultProps.fillStyle, strokeStyle } = this.props;
|
|
14
|
+
const { xAccessor, plotData, xScale, chartConfig: { yScale }, hovering, } = moreProps;
|
|
15
|
+
const width = xScale(xAccessor(last(plotData))) - xScale(xAccessor(first(plotData)));
|
|
16
|
+
const d = ((width / plotData.length) * 0.5) / 2;
|
|
17
|
+
const radius = Math.min(2, Math.max(0.5, d)) + (hovering ? 2 : 0);
|
|
18
|
+
plotData.forEach((each) => {
|
|
19
|
+
const yValue = yAccessor(each);
|
|
20
|
+
if (yValue === undefined) {
|
|
21
|
+
return;
|
|
22
|
+
}
|
|
23
|
+
const centerX = xScale(xAccessor(each));
|
|
24
|
+
const centerY = yScale(yValue);
|
|
25
|
+
const color = yValue > each.close ? fillStyle.falling : fillStyle.rising;
|
|
26
|
+
ctx.fillStyle = color;
|
|
27
|
+
if (strokeStyle !== undefined) {
|
|
28
|
+
ctx.strokeStyle = yValue > each.close ? strokeStyle.falling : strokeStyle.rising;
|
|
29
|
+
}
|
|
30
|
+
ctx.beginPath();
|
|
31
|
+
ctx.ellipse(centerX, centerY, radius, radius, 0, 0, 2 * Math.PI);
|
|
32
|
+
ctx.closePath();
|
|
33
|
+
ctx.fill();
|
|
34
|
+
if (strokeStyle !== undefined) {
|
|
35
|
+
ctx.stroke();
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
};
|
|
39
|
+
this.isHover = (moreProps) => {
|
|
40
|
+
const { mouseXY, currentItem, chartConfig: { yScale }, } = moreProps;
|
|
41
|
+
const { yAccessor } = this.props;
|
|
42
|
+
const y = mouseXY[1];
|
|
43
|
+
const currentY = yScale(yAccessor(currentItem));
|
|
44
|
+
return y < currentY + 5 && y > currentY - 5;
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
render() {
|
|
48
|
+
const { highlightOnHover, onClick, onDoubleClick, onContextMenu } = this.props;
|
|
49
|
+
const hoverProps = highlightOnHover
|
|
50
|
+
? {
|
|
51
|
+
isHover: this.isHover,
|
|
52
|
+
drawOn: ["mousemove", "pan"],
|
|
53
|
+
canvasToDraw: getMouseCanvas,
|
|
54
|
+
}
|
|
55
|
+
: {
|
|
56
|
+
drawOn: ["pan"],
|
|
57
|
+
canvasToDraw: getAxisCanvas,
|
|
58
|
+
};
|
|
59
|
+
return (React.createElement(GenericChartComponent, Object.assign({ canvasDraw: this.drawOnCanvas, onClickWhenHover: onClick, onDoubleClickWhenHover: onDoubleClick, onContextMenuWhenHover: onContextMenu }, hoverProps)));
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
SARSeries.defaultProps = {
|
|
63
|
+
fillStyle: {
|
|
64
|
+
falling: "#4682B4",
|
|
65
|
+
rising: "#15EC2E",
|
|
66
|
+
},
|
|
67
|
+
highlightOnHover: false,
|
|
68
|
+
};
|
|
69
|
+
//# sourceMappingURL=SARSeries.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SARSeries.js","sourceRoot":"","sources":["../src/SARSeries.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { GenericChartComponent } from "@tradingaction/core";
|
|
3
|
+
export class SVGComponent extends React.Component {
|
|
4
|
+
render() {
|
|
5
|
+
const { children } = this.props;
|
|
6
|
+
return React.createElement(GenericChartComponent, { drawOn: [], svgDraw: children });
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
//# sourceMappingURL=SVGComponent.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SVGComponent.js","sourceRoot":"","sources":["../src/SVGComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAM5D,MAAM,OAAO,YAAa,SAAQ,KAAK,CAAC,SAA4B;IACzD,MAAM;QACT,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAChC,OAAO,oBAAC,qBAAqB,IAAC,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,GAAI,CAAC;IACpE,CAAC;CACJ"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
export interface ScatterSeriesProps {
|
|
3
|
+
/**
|
|
4
|
+
* A Marker to draw.
|
|
5
|
+
*/
|
|
6
|
+
readonly marker?: any;
|
|
7
|
+
/**
|
|
8
|
+
* Given the data point return a Marker.
|
|
9
|
+
*/
|
|
10
|
+
readonly markerProvider?: (datum: any) => any;
|
|
11
|
+
/**
|
|
12
|
+
* Props to pass to the marker.
|
|
13
|
+
*/
|
|
14
|
+
readonly markerProps?: object;
|
|
15
|
+
/**
|
|
16
|
+
* Accessor for y value.
|
|
17
|
+
*/
|
|
18
|
+
readonly yAccessor: (data: any) => number | undefined;
|
|
19
|
+
}
|
|
20
|
+
export declare class ScatterSeries extends React.Component<ScatterSeriesProps> {
|
|
21
|
+
render(): JSX.Element;
|
|
22
|
+
private readonly drawOnCanvas;
|
|
23
|
+
private readonly getMarkers;
|
|
24
|
+
}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { functor, getAxisCanvas, GenericChartComponent } from "@tradingaction/core";
|
|
2
|
+
import { group } from "d3-array";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
export class ScatterSeries extends React.Component {
|
|
5
|
+
constructor() {
|
|
6
|
+
super(...arguments);
|
|
7
|
+
this.drawOnCanvas = (ctx, moreProps) => {
|
|
8
|
+
const points = this.getMarkers(moreProps);
|
|
9
|
+
const { markerProps } = this.props;
|
|
10
|
+
const nest = group(points, (d) => d.fillStyle, (d) => d.strokeStyle);
|
|
11
|
+
nest.forEach((fillValues, fillKey) => {
|
|
12
|
+
if (fillKey !== "none") {
|
|
13
|
+
ctx.fillStyle = fillKey;
|
|
14
|
+
}
|
|
15
|
+
fillValues.forEach((strokeValues) => {
|
|
16
|
+
strokeValues.forEach((point) => {
|
|
17
|
+
const { marker } = point;
|
|
18
|
+
marker.drawOnCanvas(Object.assign(Object.assign(Object.assign({}, marker.defaultProps), markerProps), { fillStyle: fillKey }), point, ctx);
|
|
19
|
+
});
|
|
20
|
+
});
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
this.getMarkers = (moreProps) => {
|
|
24
|
+
const { yAccessor, markerProvider, markerProps } = this.props;
|
|
25
|
+
const { xAccessor, xScale, chartConfig: { yScale }, plotData, } = moreProps;
|
|
26
|
+
let { marker: Marker } = this.props;
|
|
27
|
+
if (!(markerProvider || Marker)) {
|
|
28
|
+
throw new Error("required prop, either marker or markerProvider missing");
|
|
29
|
+
}
|
|
30
|
+
return plotData
|
|
31
|
+
.map((d) => {
|
|
32
|
+
const yValue = yAccessor(d);
|
|
33
|
+
if (yValue === undefined) {
|
|
34
|
+
return undefined;
|
|
35
|
+
}
|
|
36
|
+
const xValue = xAccessor(d);
|
|
37
|
+
if (markerProvider) {
|
|
38
|
+
Marker = markerProvider(d);
|
|
39
|
+
}
|
|
40
|
+
const mProps = Object.assign(Object.assign({}, Marker.defaultProps), markerProps);
|
|
41
|
+
const fill = functor(mProps.fillStyle);
|
|
42
|
+
const stroke = functor(mProps.strokeStyle);
|
|
43
|
+
return {
|
|
44
|
+
x: xScale(xValue),
|
|
45
|
+
y: yScale(yValue),
|
|
46
|
+
fillStyle: fill(d),
|
|
47
|
+
strokeStyle: stroke(d),
|
|
48
|
+
datum: d,
|
|
49
|
+
marker: Marker,
|
|
50
|
+
};
|
|
51
|
+
})
|
|
52
|
+
.filter((marker) => marker !== undefined)
|
|
53
|
+
.map((marker) => marker);
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
render() {
|
|
57
|
+
return React.createElement(GenericChartComponent, { canvasDraw: this.drawOnCanvas, canvasToDraw: getAxisCanvas, drawOn: ["pan"] });
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
//# sourceMappingURL=ScatterSeries.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScatterSeries.js","sourceRoot":"","sources":["../src/ScatterSeries.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { ScaleContinuousNumeric } from "d3-scale";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
export interface StackedBarSeriesProps {
|
|
4
|
+
readonly baseAt?: number | ((xScale: ScaleContinuousNumeric<number, number>, yScale: ScaleContinuousNumeric<number, number>, d: [number, number], moreProps: any) => number);
|
|
5
|
+
readonly clip?: boolean;
|
|
6
|
+
readonly direction?: "up" | "down";
|
|
7
|
+
readonly fillStyle?: string | ((data: any, y: number) => string);
|
|
8
|
+
readonly spaceBetweenBar?: number;
|
|
9
|
+
readonly stroke?: boolean;
|
|
10
|
+
readonly swapScales?: boolean;
|
|
11
|
+
readonly yAccessor: ((data: any) => number | undefined) | ((d: any) => number)[];
|
|
12
|
+
readonly width?: number | ((props: StackedBarSeriesProps, moreProps: any) => number);
|
|
13
|
+
readonly widthRatio?: number;
|
|
14
|
+
}
|
|
15
|
+
export declare class StackedBarSeries extends React.Component<StackedBarSeriesProps> {
|
|
16
|
+
static defaultProps: {
|
|
17
|
+
baseAt: (xScale: ScaleContinuousNumeric<number, number>, yScale: ScaleContinuousNumeric<number, number>) => any;
|
|
18
|
+
direction: string;
|
|
19
|
+
stroke: boolean;
|
|
20
|
+
fillStyle: string;
|
|
21
|
+
width: <T>(props: {
|
|
22
|
+
widthRatio: number;
|
|
23
|
+
}, moreProps: {
|
|
24
|
+
xAccessor: (datum: T) => number | Date;
|
|
25
|
+
xScale: ScaleContinuousNumeric<number, number, never> | import("d3-scale").ScaleTime<number, number, never>;
|
|
26
|
+
plotData: T[];
|
|
27
|
+
}) => number;
|
|
28
|
+
widthRatio: number;
|
|
29
|
+
clip: boolean;
|
|
30
|
+
swapScales: boolean;
|
|
31
|
+
};
|
|
32
|
+
render(): JSX.Element;
|
|
33
|
+
private readonly drawOnCanvas;
|
|
34
|
+
}
|
|
35
|
+
export declare function identityStack(): {
|
|
36
|
+
(data: any): any[];
|
|
37
|
+
keys(x: any): any[] | any;
|
|
38
|
+
};
|
|
39
|
+
export declare function drawOnCanvasHelper(ctx: CanvasRenderingContext2D, props: any, moreProps: any, xAccessor: any, stackFn: any, defaultPostAction?: (d: any) => any, postRotateAction?: (array: any[]) => any[]): void;
|
|
40
|
+
export declare const rotateXY: (array: any[]) => any[];
|
|
41
|
+
export declare const drawOnCanvas2: (props: {
|
|
42
|
+
stroke?: boolean;
|
|
43
|
+
}, ctx: CanvasRenderingContext2D, bars: any) => void;
|
|
44
|
+
export declare function getBars(props: StackedBarSeriesProps, xAccessor: any, yAccessor: any, xScale: any, yScale: any, plotData: any[], stack?: typeof identityStack, after?: (d: any) => any): any;
|