react-financial-charts
Version:
React charts specific to finance.
86 lines • 4.47 kB
JavaScript
import * as React from "react";
import { LineSeries } from "./LineSeries";
import { StraightLine } from "./StraightLine";
import { SVGComponent } from "./SVGComponent";
export class RSISeries extends React.Component {
constructor() {
super(...arguments);
this.clipPathId1 = `rsi-clip-${String(Math.round(Math.random() * 10000 * 10000))}`;
this.clipPathId2 = `rsi-clip-${String(Math.round(Math.random() * 10000 * 10000))}`;
this.renderClip = (moreProps) => {
const { chartConfig } = moreProps;
const { overSold, overBought } = this.props;
const { yScale, width, height } = chartConfig;
return (React.createElement("defs", null,
React.createElement("clipPath", { id: this.clipPathId1 },
React.createElement("rect", { x: 0, y: yScale(overSold), width: width, height: yScale(overBought) - yScale(overSold) })),
React.createElement("clipPath", { id: this.clipPathId2 },
React.createElement("rect", { x: 0, y: 0, width: width, height: yScale(overSold) }),
React.createElement("rect", { x: 0, y: yScale(overBought), width: width, height: height - yScale(overBought) }))));
};
this.mainClip = (ctx, moreProps) => {
const { chartConfig } = moreProps;
const { overSold, overBought } = this.props;
const { yScale, width, height } = chartConfig;
ctx.beginPath();
ctx.rect(0, 0, width, yScale(overSold));
ctx.rect(0, yScale(overBought), width, height - yScale(overBought));
ctx.clip();
};
this.topAndBottomClip = (ctx, moreProps) => {
const { chartConfig } = moreProps;
const { overSold, overBought } = this.props;
const { yScale, width } = chartConfig;
ctx.beginPath();
ctx.rect(0, yScale(overSold), width, yScale(overBought) - yScale(overSold));
ctx.clip();
};
}
render() {
const { className, stroke = RSISeries.defaultProps.stroke, opacity = RSISeries.defaultProps.opacity, strokeDasharray = RSISeries.defaultProps.strokeDasharray, strokeWidth = RSISeries.defaultProps.strokeWidth, } = this.props;
const { yAccessor } = this.props;
const { overSold, middle, overBought } = this.props;
const style1 = { clipPath: `url(#${this.clipPathId1})` };
const style2 = { clipPath: `url(#${this.clipPathId2})` };
return (React.createElement("g", { className: className },
React.createElement(SVGComponent, null, this.renderClip),
React.createElement(StraightLine, { stroke: stroke.top, opacity: opacity.top, yValue: overSold, strokeDasharray: strokeDasharray.top, strokeWidth: strokeWidth.top }),
React.createElement(StraightLine, { stroke: stroke.middle, opacity: opacity.middle, yValue: middle, strokeDasharray: strokeDasharray.middle, strokeWidth: strokeWidth.middle }),
React.createElement(StraightLine, { stroke: stroke.bottom, opacity: opacity.bottom, yValue: overBought, strokeDasharray: strokeDasharray.bottom, strokeWidth: strokeWidth.bottom }),
React.createElement(LineSeries, { style: style1, canvasClip: this.topAndBottomClip, className: className, yAccessor: yAccessor, stroke: stroke.insideThreshold || stroke.line, strokeWidth: strokeWidth.insideThreshold, strokeDasharray: strokeDasharray.line }),
React.createElement(LineSeries, { style: style2, canvasClip: this.mainClip, className: className, yAccessor: yAccessor, stroke: stroke.outsideThreshold || stroke.line, strokeWidth: strokeWidth.outsideThreshold, strokeDasharray: strokeDasharray.line })));
}
}
RSISeries.defaultProps = {
className: "react-financial-charts-rsi-series",
stroke: {
line: "#000000",
top: "#B8C2CC",
middle: "#8795A1",
bottom: "#B8C2CC",
outsideThreshold: "#b300b3",
insideThreshold: "#ffccff",
},
opacity: {
top: 1,
middle: 1,
bottom: 1,
},
strokeDasharray: {
line: "Solid",
top: "ShortDash",
middle: "ShortDash",
bottom: "ShortDash",
},
strokeWidth: {
outsideThreshold: 1,
insideThreshold: 1,
top: 1,
middle: 1,
bottom: 1,
},
overSold: 70,
middle: 50,
overBought: 30,
};
//# sourceMappingURL=RSISeries.js.map