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

Library of React components to render SVG 2D plots.

import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from 'react';
export default function VerticalAxisGridlines(props) {
    const { plotWidth, style, primaryTicks, position: axisPosition, primaryGrid, secondaryGrid, scale, secondaryStyle, } = props;
    const Grid = useMemo(() => {
        const Grid = [];
        if (primaryGrid) {
            for (const { position } of primaryTicks) {
                Grid.push(_jsx("line", { x1: "0", x2: axisPosition === 'left' ? plotWidth : -plotWidth, y1: position, y2: position, stroke: "black", strokeDasharray: "2,2", strokeOpacity: 0.5, style: style }, position));
            }
        }
        if (secondaryGrid) {
            const density = 5;
            const secondaryGridPosition = scale?.ticks(primaryTicks.length * density) || [];
            for (const tick of secondaryGridPosition) {
                const position = scale?.(tick) || 0; // exclude the main ticks
                if (primaryTicks.map((tick) => tick.position).includes(position)) {
                    return null;
                }
                Grid.push(_jsx("line", { x1: "0", x2: axisPosition === 'left' ? plotWidth : -plotWidth, y1: position, y2: position, stroke: "black", strokeDasharray: "5", strokeOpacity: 0.2, style: secondaryStyle }, position));
            }
        }
        return Grid;
    }, [
        axisPosition,
        plotWidth,
        primaryGrid,
        primaryTicks,
        scale,
        secondaryGrid,
        secondaryStyle,
        style,
    ]);
    return _jsx("g", { children: Grid });
}
//# sourceMappingURL=VerticalAxisGridLines.js.map