react-plot/lib/components/ErrorBars.js

Library of React components to render SVG 2D plots.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { usePlotContext } from '../contexts/plotContext.js';
import { validateAxis, validateSeriesPointError } from '../utils.js';
export default function ErrorBars(props) {
    const { xAxis = 'x', yAxis = 'y', data, hidden, transform, ...otherProps } = props;
    const { axisContext } = usePlotContext();
    const [xScale, yScale] = validateAxis(axisContext, xAxis, yAxis);
    const points = useMemo(() => {
        if (hidden)
            return null;
        if (xScale === undefined || yScale === undefined) {
            return null;
        }
        const pointBars = data.map((point, i) => {
            const xError = validateSeriesPointError(point.xError);
            const yError = validateSeriesPointError(point.yError);
            return (_jsx(PointBars // eslint-disable-next-line react/no-array-index-key
            , { origin: { x: xScale(point.x), y: yScale(point.y) }, bottom: yError ? yScale(point.y - (yError[0] || 0)) : null, top: yError ? yScale(point.y + (yError[1] || 0)) : null, left: xError ? xScale(point.x - (xError[0] || 0)) : null, right: xError ? xScale(point.x + (xError[1] || 0)) : null, ...otherProps }, `ErrorBars-${i}`));
        });
        return pointBars;
    }, [data, xScale, yScale, hidden, otherProps]);
    return _jsx("g", { transform: transform, children: points });
}
function PointBars(props) {
    const { origin, top, bottom, left, right, style, capSize = 10, capStyle, } = props;
    const defaultColor = 'black';
    return (_jsxs("g", { children: [top != null && (_jsxs("g", { children: [_jsx("line", { x1: origin.x, x2: origin.x, y1: origin.y, y2: top, stroke: defaultColor, ...style }), _jsx("line", { x1: origin.x - capSize / 2, x2: origin.x + capSize / 2, y1: top, y2: top, stroke: defaultColor, ...style, ...capStyle })] })), bottom != null && (_jsxs("g", { children: [_jsx("line", { x1: origin.x, x2: origin.x, y1: origin.y, y2: bottom, stroke: defaultColor, ...style }), _jsx("line", { x1: origin.x - capSize / 2, x2: origin.x + capSize / 2, y1: bottom, y2: bottom, stroke: defaultColor, ...style, ...capStyle })] })), left != null && (_jsxs("g", { children: [_jsx("line", { x1: origin.x, x2: left, y1: origin.y, y2: origin.y, stroke: defaultColor, ...style }), _jsx("line", { x1: left, x2: left, y1: origin.y - capSize / 2, y2: origin.y + capSize / 2, stroke: defaultColor, ...style, ...capStyle })] })), right != null && (_jsxs("g", { children: [_jsx("line", { x1: origin.x, x2: right, y1: origin.y, y2: origin.y, stroke: defaultColor, ...style }), _jsx("line", { x1: right, x2: right, y1: origin.y - capSize / 2, y2: origin.y + capSize / 2, stroke: defaultColor, ...style, ...capStyle })] }))] }));
}
//# sourceMappingURL=ErrorBars.js.map