react-financial-charts/lib/axes/XAxis.js

React charts specific to finance.

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 * as PropTypes from "prop-types";
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 = (props, context) => {
            const { axisAt, xZoomHeight = XAxis.defaultProps.xZoomHeight, orient, } = props;
            const { chartConfig: { width, height } } = context;
            let axisLocation;
            const x = 0;
            const w = width;
            const h = xZoomHeight;
            if (axisAt === "top") {
                axisLocation = 0;
            }
            else if (axisAt === "bottom") {
                axisLocation = height;
            }
            else if (axisAt === "middle") {
                axisLocation = (height) / 2;
            }
            else {
                axisLocation = axisAt;
            }
            const y = (orient === "top") ? -xZoomHeight : 0;
            return {
                transform: [0, axisLocation],
                range: [0, width],
                getScale: this.getXScale,
                bg: { x, y, h, w },
            };
        };
        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, stroke = XAxis.defaultProps.stroke, strokeWidth = XAxis.defaultProps.strokeWidth, zoomEnabled } = _a, rest = __rest(_a, ["getMouseDelta", "outerTickSize", "showTicks", "stroke", "strokeWidth", "zoomEnabled"]);
        const moreProps = __rest(this.helper(this.props, this.context), []);
        return (React.createElement(Axis, Object.assign({}, rest, moreProps, { getMouseDelta: getMouseDelta, outerTickSize: outerTickSize, showTicks: showTicks, stroke: stroke, strokeWidth: strokeWidth, zoomEnabled: zoomEnabled && showTicks, axisZoomCallback: this.axisZoomCallback })));
    }
}
XAxis.defaultProps = {
    axisAt: "bottom",
    className: "react-financial-charts-x-axis",
    domainClassName: "react-financial-charts-axis-domain",
    fill: "none",
    fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
    fontSize: 12,
    fontWeight: 400,
    getMouseDelta: (startXY, mouseXY) => startXY[0] - mouseXY[0],
    opacity: 1,
    orient: "bottom",
    outerTickSize: 0,
    innerTickSize: 5,
    showTicks: true,
    showTickLabel: true,
    showDomain: true,
    stroke: "#000000",
    strokeWidth: 1,
    strokeOpacity: 1,
    ticks: 10,
    tickPadding: 6,
    tickLabelFill: "#000000",
    tickStroke: "#000000",
    tickStrokeOpacity: 1,
    xZoomHeight: 25,
    zoomEnabled: true,
    zoomCursorClassName: "react-financial-charts-ew-resize-cursor",
};
XAxis.contextTypes = {
    chartConfig: PropTypes.object.isRequired,
    xAxisZoom: PropTypes.func.isRequired,
};
//# sourceMappingURL=XAxis.js.map