react-financial-charts/lib/series/StraightLine.js

React charts specific to finance.

import * as React from "react";
import GenericChartComponent from "../GenericChartComponent";
import { getAxisCanvas } from "../GenericComponent";
import { colorToRGBA, getStrokeDasharray, getStrokeDasharrayCanvas } from "../utils";
export class StraightLine extends React.Component {
    constructor() {
        super(...arguments);
        this.renderSVG = (moreProps) => {
            const { width, height } = moreProps;
            const { xScale, chartConfig: { yScale } } = moreProps;
            const { className } = this.props;
            const { type, stroke, strokeWidth, opacity, strokeDasharray } = this.props;
            const { yValue, xValue } = this.props;
            const lineCoordinates = this.getLineCoordinates(type, xScale, yScale, xValue, yValue, width, height);
            return (React.createElement("line", Object.assign({ className: className, strokeDasharray: getStrokeDasharray(strokeDasharray), stroke: stroke, strokeWidth: strokeWidth, strokeOpacity: opacity }, lineCoordinates)));
        };
        this.drawOnCanvas = (ctx, moreProps) => {
            const { type, stroke = StraightLine.defaultProps.stroke, strokeWidth = StraightLine.defaultProps.strokeWidth, opacity, strokeDasharray } = this.props;
            const { yValue, xValue } = this.props;
            const { xScale } = moreProps;
            const { chartConfig: { yScale, width, height } } = moreProps;
            ctx.beginPath();
            ctx.strokeStyle = colorToRGBA(stroke, opacity);
            ctx.lineWidth = strokeWidth;
            const { x1, y1, x2, y2 } = this.getLineCoordinates(type, xScale, yScale, xValue, yValue, width, height);
            const lineDash = getStrokeDasharrayCanvas(strokeDasharray);
            ctx.setLineDash(lineDash);
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();
        };
        this.getLineCoordinates = (type, xScale, yScale, xValue, yValue, width, height) => {
            return type === "horizontal"
                ? { x1: 0, y1: Math.round(yScale(yValue)), x2: width, y2: Math.round(yScale(yValue)) }
                : { x1: Math.round(xScale(xValue)), y1: 0, x2: Math.round(xScale(xValue)), y2: height };
        };
    }
    render() {
        return (React.createElement(GenericChartComponent, { svgDraw: this.renderSVG, canvasDraw: this.drawOnCanvas, canvasToDraw: getAxisCanvas, drawOn: ["pan"] }));
    }
}
StraightLine.defaultProps = {
    className: "line",
    type: "horizontal",
    stroke: "#000000",
    opacity: 0.5,
    strokeWidth: 1,
    strokeDasharray: "Solid",
};
//# sourceMappingURL=StraightLine.js.map