react-financial-charts/lib/interactive/Brush.js

React charts specific to finance.

import * as React from "react";
import GenericChartComponent from "../GenericChartComponent";
import { getMouseCanvas } from "../GenericComponent";
import { colorToRGBA, getStrokeDasharray, getStrokeDasharrayCanvas, isDefined, noop, } from "../utils";
export class Brush extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.drawOnCanvas = (ctx) => {
            const { rect } = this.state;
            if (isDefined(rect)) {
                const { x, y, height, width } = rect;
                const { stroke = Brush.defaultProps.stroke, fill = Brush.defaultProps.fill, strokeDashArray } = this.props;
                const { strokeOpacity, fillOpacity } = this.props;
                const dashArray = getStrokeDasharrayCanvas(strokeDashArray);
                ctx.strokeStyle = colorToRGBA(stroke, strokeOpacity);
                ctx.fillStyle = colorToRGBA(fill, fillOpacity);
                ctx.setLineDash(dashArray);
                ctx.beginPath();
                ctx.fillRect(x, y, width, height);
                ctx.strokeRect(x, y, width, height);
            }
        };
        this.handleZoomStart = (moreProps) => {
            this.zoomHappening = false;
            const { mouseXY: [, mouseY], currentItem, chartConfig: { yScale }, xAccessor, xScale, } = moreProps;
            const x1y1 = [
                xScale(xAccessor(currentItem)),
                mouseY,
            ];
            this.setState({
                selected: true,
                x1y1,
                start: {
                    item: currentItem,
                    xValue: xAccessor(currentItem),
                    yValue: yScale.invert(mouseY),
                },
            });
        };
        this.handleDrawSquare = (moreProps) => {
            if (this.state.x1y1 == null) {
                return;
            }
            this.zoomHappening = true;
            const { mouseXY: [, mouseY], currentItem, chartConfig: { yScale }, xAccessor, xScale, } = moreProps;
            const [x2, y2] = [
                xScale(xAccessor(currentItem)),
                mouseY,
            ];
            const { x1y1: [x1, y1] } = this.state;
            const x = Math.min(x1, x2);
            const y = Math.min(y1, y2);
            const height = Math.abs(y2 - y1);
            const width = Math.abs(x2 - x1);
            this.setState({
                selected: true,
                end: {
                    item: currentItem,
                    xValue: xAccessor(currentItem),
                    yValue: yScale.invert(mouseY),
                },
                rect: {
                    x, y, height, width,
                },
            });
        };
        this.handleZoomComplete = (moreProps) => {
            if (this.zoomHappening) {
                const { onBrush } = this.props;
                const { start, end } = this.state;
                onBrush({ start, end }, moreProps);
            }
            this.setState({
                selected: false,
                rect: null,
            });
        };
        this.renderSVG = () => {
            const { rect } = this.state;
            if (isDefined(rect)) {
                const { x, y, height, width } = rect;
                const { stroke, strokeDashArray } = this.props;
                const { strokeOpacity, fillOpacity } = this.props;
                const dashArray = getStrokeDasharray(strokeDashArray);
                return (React.createElement("rect", { strokeDasharray: dashArray, stroke: stroke, fill: "none", strokeOpacity: strokeOpacity, fillOpacity: fillOpacity, x: x, y: y, width: width, height: height }));
            }
        };
        this.terminate = this.terminate.bind(this);
        this.state = {
            rect: null,
        };
    }
    terminate() {
        this.zoomHappening = false;
        this.setState({
            x1y1: null,
            start: null,
            end: null,
            rect: null,
        });
    }
    render() {
        const { enabled } = this.props;
        if (!enabled) {
            return null;
        }
        return (React.createElement(GenericChartComponent, { disablePan: enabled, svgDraw: this.renderSVG, canvasToDraw: getMouseCanvas, canvasDraw: this.drawOnCanvas, onMouseDown: this.handleZoomStart, onMouseMove: this.handleDrawSquare, onClick: this.handleZoomComplete, drawOn: ["mousemove", "pan", "drag"] }));
    }
}
Brush.defaultProps = {
    type: "2D",
    stroke: "#000000",
    fillOpacity: 0.3,
    strokeOpacity: 1,
    fill: "#3h3h3h",
    onBrush: noop,
    onStart: noop,
    strokeDashArray: "ShortDash",
};
//# sourceMappingURL=Brush.js.map