@react-financial-charts/axes/lib/XAxis.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 XAxis extends React.Component {
    constructor() {
        super(...arguments);
        this.axisZoomCallback = (newXDomain) => {
            const { xAxisZoom } = this.context;
            xAxisZoom(newXDomain);
        };
        this.helper = () => {
            const { axisAt, xZoomHeight = XAxis.defaultProps.xZoomHeight, orient, ticks } = this.props;
            const { chartConfig: { width, height }, } = this.context;
            let axisLocation;
            const x = 0;
            const w = width;
            const h = xZoomHeight;
            switch (axisAt) {
                case "top":
                    axisLocation = 0;
                    break;
                case "bottom":
                    axisLocation = height;
                    break;
                case "middle":
                    axisLocation = height / 2;
                    break;
                default:
                    axisLocation = axisAt;
            }
            const y = orient === "top" ? -xZoomHeight : 0;
            return {
                transform: [0, axisLocation],
                range: [0, width],
                getScale: this.getXScale,
                bg: { x, y, h, w },
                ticks: ticks !== null && ticks !== void 0 ? ticks : this.getXTicks(width),
            };
        };
        this.getXTicks = (width) => {
            if (width < 400) {
                return 2;
            }
            if (width < 500) {
                return 6;
            }
            return 8;
        };
        this.getXScale = (moreProps) => {
            const { xScale: scale, width } = moreProps;
            if (scale.invert) {
                const trueRange = [0, width];
                const trueDomain = trueRange.map(scale.invert);
                return scale.copy().domain(trueDomain).range(trueRange);
            }
            return scale;
        };
    }
    render() {
        const _a = this.props, { getMouseDelta = XAxis.defaultProps.getMouseDelta, outerTickSize = XAxis.defaultProps.outerTickSize, showTicks, strokeStyle = XAxis.defaultProps.strokeStyle, strokeWidth = XAxis.defaultProps.strokeWidth, zoomEnabled } = _a, rest = __rest(_a, ["getMouseDelta", "outerTickSize", "showTicks", "strokeStyle", "strokeWidth", "zoomEnabled"]);
        const moreProps = __rest(this.helper(), []);
        return (React.createElement(Axis, Object.assign({}, rest, moreProps, { getMouseDelta: getMouseDelta, outerTickSize: outerTickSize, showTicks: showTicks, strokeStyle: strokeStyle, strokeWidth: strokeWidth, zoomEnabled: zoomEnabled && showTicks, axisZoomCallback: this.axisZoomCallback })));
    }
}
XAxis.defaultProps = {
    axisAt: "bottom",
    className: "react-financial-charts-x-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[0] - mouseXY[0],
    gridLinesStrokeStyle: "#E2E4EC",
    gridLinesStrokeWidth: 1,
    orient: "bottom",
    outerTickSize: 0,
    innerTickSize: 4,
    showDomain: true,
    showGridLines: false,
    showTicks: true,
    showTickLabel: true,
    strokeStyle: "#000000",
    strokeWidth: 1,
    tickPadding: 4,
    tickLabelFill: "#000000",
    tickStrokeStyle: "#000000",
    xZoomHeight: 25,
    zoomEnabled: true,
    zoomCursorClassName: "react-financial-charts-ew-resize-cursor",
};
XAxis.contextType = ChartContext;
//# sourceMappingURL=XAxis.js.map