react-plot
Version:
Library of React components to render SVG 2D plots.
37 lines • 1.63 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from 'react';
export default function HorizontalAxisGridLines(props) {
const { plotHeight, style, primaryTicks, position: axisPosition, primaryGrid, secondaryGrid, secondaryStyle, scale, } = props;
const Grid = useMemo(() => {
const Grid = [];
if (primaryGrid) {
for (const { position } of primaryTicks) {
Grid.push(_jsx("line", { x1: position, x2: position, y1: axisPosition === 'top' ? plotHeight : -plotHeight, y2: "0", 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);
if (!position ||
primaryTicks.map((tick) => tick.position).includes(position)) {
return null;
}
Grid.push(_jsx("line", { x1: position, x2: position, y1: axisPosition === 'top' ? plotHeight : -plotHeight, y2: "0", stroke: "black", strokeDasharray: "5", strokeOpacity: 0.2, style: secondaryStyle }, position));
}
}
return Grid;
}, [
axisPosition,
plotHeight,
primaryGrid,
primaryTicks,
scale,
secondaryGrid,
secondaryStyle,
style,
]);
return _jsx("g", { children: Grid });
}
//# sourceMappingURL=HorizontalAxisGridLines.js.map