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

React charts specific to finance.

import { area as d3Area } from "d3-shape";
import * as React from "react";
import GenericChartComponent from "../GenericChartComponent";
import { getAxisCanvas } from "../GenericComponent";
import { colorToRGBA, first, functor, isDefined } from "../utils";
export class AreaOnlySeries extends React.Component {
    constructor() {
        super(...arguments);
        this.renderSVG = (moreProps) => {
            const { yAccessor, defined, base, style } = this.props;
            const { stroke, fill = AreaOnlySeries.defaultProps.fill, className = "line", opacity, interpolation } = this.props;
            const { xScale, chartConfig: { yScale }, plotData, xAccessor } = moreProps;
            const newBase = functor(base);
            const areaSeries = d3Area()
                .defined((d) => defined(yAccessor(d)))
                .x((d) => Math.round(xScale(xAccessor(d))))
                .y0((d) => newBase(yScale, d, moreProps))
                .y1((d) => Math.round(yScale(yAccessor(d))));
            if (isDefined(interpolation)) {
                areaSeries.curve(interpolation);
            }
            const data = areaSeries(plotData);
            if (data === null) {
                return null;
            }
            const newClassName = className.concat(isDefined(stroke) ? "" : " line-stroke");
            return (React.createElement("path", { style: style, d: data, stroke: stroke, fill: colorToRGBA(fill, opacity), className: newClassName }));
        };
        this.drawOnCanvas = (ctx, moreProps) => {
            const { yAccessor, defined, base, canvasGradient } = this.props;
            const { fill = AreaOnlySeries.defaultProps.fill, stroke, opacity, interpolation, canvasClip } = this.props;
            const { xScale, chartConfig: { yScale }, plotData, xAccessor } = moreProps;
            if (canvasClip) {
                ctx.save();
                canvasClip(ctx, moreProps);
            }
            if (canvasGradient != null) {
                ctx.fillStyle = canvasGradient(moreProps, ctx);
            }
            else {
                ctx.fillStyle = colorToRGBA(fill, opacity);
            }
            if (stroke !== undefined) {
                ctx.strokeStyle = stroke;
            }
            ctx.beginPath();
            const newBase = functor(base);
            const areaSeries = d3Area()
                .defined((d) => defined(yAccessor(d)))
                .x((d) => Math.round(xScale(xAccessor(d))))
                .y0((d) => newBase(yScale, d, moreProps))
                .y1((d) => Math.round(yScale(yAccessor(d))))
                .context(ctx);
            if (isDefined(interpolation)) {
                areaSeries.curve(interpolation);
            }
            areaSeries(plotData);
            ctx.fill();
            if (canvasClip) {
                ctx.restore();
            }
        };
    }
    render() {
        return (React.createElement(GenericChartComponent, { svgDraw: this.renderSVG, canvasDraw: this.drawOnCanvas, canvasToDraw: getAxisCanvas, drawOn: ["pan"] }));
    }
}
AreaOnlySeries.defaultProps = {
    className: "line",
    fill: "none",
    opacity: 1,
    defined: (d) => !isNaN(d),
    base: (yScale /* , d, moreProps */) => first(yScale.range()),
};
//# sourceMappingURL=AreaOnlySeries.js.map