react-plot/lib/components/Axis/Ticks.js

Library of React components to render SVG 2D plots.

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export function Ticks(props) {
    const { primaryTicks, getPositions, secondaryTickLength, scale, secondaryTickStyle, style, ...otherProps } = props;
    const primaryTickElements = primaryTicks.map((tick) => {
        const { line, text } = getPositions(tick.position);
        return (_jsx(Tick, { line: line, style: style, text: text, ...otherProps, children: tick.label }, tick.position));
    });
    let secondaryTickElements = [];
    if (secondaryTickLength !== 0) {
        // generate secondaryTicks according to the density of primaryTicks
        const range = Math.abs(scale?.range()[1] - scale?.range()[0]) || 0;
        const mainTicksDensity = range / primaryTicks.length;
        const density = mainTicksDensity < 50 ? 5 : 10;
        const secondaryTicks = scale?.ticks(primaryTicks.length * density) || [];
        secondaryTickElements =
            secondaryTicks.map((tick) => {
                // exclude the main ticks
                if (primaryTicks.map((tick) => tick.position).includes(scale(tick))) {
                    return null;
                }
                const { line, text } = getPositions(scale(tick), true);
                return (_jsx(Tick, { line: line, text: text, secondary: true, style: secondaryTickStyle, ...otherProps }, String(tick)));
            }) || [];
    }
    return (_jsxs(_Fragment, { children: [secondaryTickElements, primaryTickElements] }));
}
export function Tick(props) {
    const { line: { x1: lineX1 = 0, x2: lineX2 = 0, y1: lineY1 = 0, y2: lineY2 = 0 }, text: { x1: textX1 = 0, y1: textY1 = 0 }, children, strokeColor = 'black', strokeHeight = 1, anchor = 'end', secondary = false, labelStyle, style, dominantBaseline = 'middle', } = props;
    return (_jsxs("g", { children: [_jsx("line", { x1: lineX1, x2: secondary && lineX1 !== lineX2 ? lineX2 * strokeHeight : lineX2, y1: lineY1, y2: secondary && lineY1 !== lineY2 ? lineY2 * strokeHeight : lineY2, stroke: strokeColor, strokeWidth: secondary ? 1 : 1.5, style: style }), !secondary && (_jsx("text", { x: textX1, y: textY1, textAnchor: anchor, dominantBaseline: dominantBaseline, style: labelStyle, children: children }))] }));
}
//# sourceMappingURL=Ticks.js.map