@react-financial-charts/axes/lib/YAxis.js

Axes for react-financial-charts

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { ChartContext } from "@react-financial-charts/core";
import * as React from "react";
import { Axis } from "./Axis";
export class YAxis extends React.Component {
    constructor() {
        super(...arguments);
        this.axisZoomCallback = (newYDomain) => {
            const { chartId, yAxisZoom } = this.context;
            yAxisZoom(chartId, newYDomain);
        };
        this.helper = () => {
            const { axisAt, ticks, yZoomWidth = YAxis.defaultProps.yZoomWidth, orient } = this.props;
            const { chartConfig: { width, height }, } = this.context;
            let axisLocation;
            const y = 0;
            const w = yZoomWidth;
            const h = height;
            switch (axisAt) {
                case "left":
                    axisLocation = 0;
                    break;
                case "right":
                    axisLocation = width;
                    break;
                case "middle":
                    axisLocation = width / 2;
                    break;
                default:
                    axisLocation = axisAt;
            }
            const x = orient === "left" ? -yZoomWidth : 0;
            return {
                transform: [axisLocation, 0],
                range: [0, height],
                getScale: this.getYScale,
                bg: { x, y, h, w },
                ticks: ticks !== null && ticks !== void 0 ? ticks : this.getYTicks(height),
                zoomEnabled: this.context.chartConfig.yPan,
            };
        };
        this.getYTicks = (height) => {
            if (height < 300) {
                return 2;
            }
            if (height < 500) {
                return 6;
            }
            return 8;
        };
        this.getYScale = (moreProps) => {
            const { yScale: scale, flipYScale, height } = moreProps.chartConfig;
            if (scale.invert) {
                const trueRange = flipYScale ? [0, height] : [height, 0];
                const trueDomain = trueRange.map(scale.invert);
                return scale.copy().domain(trueDomain).range(trueRange);
            }
            return scale;
        };
    }
    render() {
        const _a = this.props, { getMouseDelta = YAxis.defaultProps.getMouseDelta, outerTickSize = YAxis.defaultProps.outerTickSize, strokeStyle = YAxis.defaultProps.strokeStyle, strokeWidth = YAxis.defaultProps.strokeWidth } = _a, rest = __rest(_a, ["getMouseDelta", "outerTickSize", "strokeStyle", "strokeWidth"]);
        const _b = this.helper(), { zoomEnabled } = _b, moreProps = __rest(_b, ["zoomEnabled"]);
        return (React.createElement(Axis, Object.assign({}, rest, moreProps, { edgeClip: true, getMouseDelta: getMouseDelta, outerTickSize: outerTickSize, strokeStyle: strokeStyle, strokeWidth: strokeWidth, zoomEnabled: this.props.zoomEnabled && zoomEnabled, axisZoomCallback: this.axisZoomCallback })));
    }
}
YAxis.defaultProps = {
    axisAt: "right",
    className: "react-financial-charts-y-axis",
    domainClassName: "react-financial-charts-axis-domain",
    fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
    fontSize: 12,
    fontWeight: 400,
    getMouseDelta: (startXY, mouseXY) => startXY[1] - mouseXY[1],
    gridLinesStrokeStyle: "#E2E4EC",
    gridLinesStrokeWidth: 1,
    innerTickSize: 4,
    outerTickSize: 0,
    orient: "right",
    showDomain: true,
    showGridLines: false,
    showTicks: true,
    showTickLabel: true,
    strokeStyle: "#000000",
    strokeWidth: 1,
    tickPadding: 4,
    tickLabelFill: "#000000",
    tickStrokeStyle: "#000000",
    yZoomWidth: 40,
    zoomEnabled: true,
    zoomCursorClassName: "react-financial-charts-ns-resize-cursor",
};
YAxis.contextType = ChartContext;
//# sourceMappingURL=YAxis.js.map