@react-financial-charts/coordinates/lib/EdgeIndicator.js

Coordinates for react-financial-charts

import { format } from "d3-format";
import * as React from "react";
import { first, functor, getAxisCanvas, GenericChartComponent, last, noop, } from "@react-financial-charts/core";
import { drawOnCanvas } from "./EdgeCoordinateV3";
export class EdgeIndicator extends React.Component {
    constructor() {
        super(...arguments);
        this.drawOnCanvas = (ctx, moreProps) => {
            const edge = this.helper(this.props, moreProps);
            if (edge === undefined) {
                return;
            }
            const props = Object.assign(Object.assign({}, this.props), edge);
            drawOnCanvas(ctx, props);
        };
        this.helper = (props, moreProps) => {
            const { itemType, yAccessor } = props;
            const { plotData } = moreProps;
            const item = itemType === "first" ? first(plotData, yAccessor) : last(plotData, yAccessor);
            const edge = item !== undefined ? this.getEdge(moreProps, item) : undefined;
            return edge;
        };
        this.getEdge = (moreProps, item) => {
            const { fontFamily, fontSize, type: edgeType, displayFormat = EdgeIndicator.defaultProps.displayFormat, edgeAt, yAxisPad = EdgeIndicator.defaultProps.yAxisPad, orient, lineStroke, yAccessor, fill, fullWidth, textFill, rectHeight, rectWidth, arrowWidth, stroke, } = this.props;
            const { xScale, chartConfig: { yScale }, xAccessor, width, } = moreProps;
            const yValue = yAccessor(item);
            if (yValue === undefined) {
                return undefined;
            }
            const xValue = xAccessor(item);
            const x1 = fullWidth ? 0 : Math.round(xScale(xValue));
            const y1 = Math.round(yScale(yValue));
            const [left, right] = [0, width];
            const edgeX = edgeAt === "left" ? left - yAxisPad : right + yAxisPad;
            return {
                coordinate: displayFormat(yValue),
                show: true,
                type: edgeType,
                orient,
                edgeAt: edgeX,
                fill: functor(fill)(item),
                lineStroke: functor(lineStroke)(item),
                stroke: functor(stroke)(item),
                fontFamily,
                fontSize,
                textFill: functor(textFill)(item),
                rectHeight,
                rectWidth,
                arrowWidth,
                x1,
                y1,
                x2: right,
                y2: y1,
            };
        };
    }
    render() {
        return (React.createElement(GenericChartComponent, { edgeClip: true, clip: false, canvasDraw: this.drawOnCanvas, canvasToDraw: getAxisCanvas, drawOn: ["pan"] }));
    }
}
EdgeIndicator.defaultProps = {
    fitToText: false,
    lineStroke: "#000000",
    lineOpacity: 1,
    lineStrokeDasharray: "ShortDot",
    orient: "right",
    displayFormat: format(".2f"),
    edgeAt: "right",
    yAxisPad: 0,
    rectHeight: 20,
    rectWidth: 50,
    arrowWidth: 0,
    fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
    fontSize: 13,
    dx: 0,
    hideLine: false,
    fill: "#8a8a8a",
    opacity: 1,
    stroke: noop,
    strokeOpacity: 1,
    strokeWidth: 1,
    textFill: "#FFFFFF",
    type: "horizontal",
};
//# sourceMappingURL=EdgeIndicator.js.map