@tradingaction/annotations/lib/Label.js

Annotations for react-financial-charts

import { GenericComponent, functor, ChartCanvasContext } from "@tradingaction/core";
import * as React from "react";
export class Label extends React.Component {
    constructor() {
        super(...arguments);
        this.drawOnCanvas = (ctx, moreProps) => {
            ctx.save();
            const { textAlign = "center", fontFamily, fontSize, fontWeight, rotate } = this.props;
            const { canvasOriginX, canvasOriginY, margin, ratio } = this.context;
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.scale(ratio, ratio);
            if (canvasOriginX !== undefined) {
                ctx.translate(canvasOriginX, canvasOriginY);
            }
            else {
                ctx.translate(margin.left + 0.5 * ratio, margin.top + 0.5 * ratio);
            }
            const { xScale, chartConfig, xAccessor } = moreProps;
            const yScale = Array.isArray(chartConfig) || !chartConfig ? undefined : chartConfig.yScale;
            const { xPos, yPos, fillStyle, text } = this.helper(moreProps, xAccessor, xScale, yScale);
            ctx.save();
            ctx.translate(xPos, yPos);
            if (rotate !== undefined) {
                const radians = (rotate / 180) * Math.PI;
                ctx.rotate(radians);
            }
            if (fontFamily !== undefined) {
                ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
            }
            if (fillStyle !== undefined) {
                ctx.fillStyle = fillStyle;
            }
            if (textAlign !== undefined) {
                ctx.textAlign = textAlign;
            }
            ctx.beginPath();
            ctx.fillText(text, 0, 0);
            ctx.restore();
        };
        this.helper = (moreProps, xAccessor, xScale, yScale) => {
            const { x, y, datum, fillStyle, text } = this.props;
            const { plotData } = moreProps;
            const xFunc = functor(x);
            const yFunc = functor(y);
            const [xPos, yPos] = [xFunc({ xScale, xAccessor, datum, plotData }), yFunc({ yScale, datum, plotData })];
            return {
                xPos,
                yPos,
                text: functor(text)(datum),
                fillStyle: functor(fillStyle)(datum),
            };
        };
    }
    render() {
        const { selectCanvas } = this.props;
        return React.createElement(GenericComponent, { canvasToDraw: selectCanvas, canvasDraw: this.drawOnCanvas, drawOn: [] });
    }
}
Label.defaultProps = {
    fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
    fontSize: 64,
    fontWeight: "bold",
    fillStyle: "#dcdcdc",
    rotate: 0,
    x: ({ xScale, xAccessor, datum }) => xScale(xAccessor(datum)),
    selectCanvas: (canvases) => canvases.bg,
};
Label.contextType = ChartCanvasContext;
//# sourceMappingURL=Label.js.map