react-plot
Version:
Library of React components to render SVG 2D plots.
81 lines • 2.89 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect } from 'react';
import { usePlotContext, usePlotDispatchContext, } from '../../contexts/plotContext.js';
import { getInnerOffset } from '../../utils/axis.js';
import LinearAxis from './LinearAxis.js';
import LogAxis from './LogAxis.js';
import TimeAxis from './TimeAxis.js';
export function Axis({ id, position, min, max, paddingStart = 0, paddingEnd = 0, flip = false, scale = 'linear',
// children props
label, displayPrimaryGridLines = false, primaryGridLineStyle, displaySecondaryGridLines, secondaryGridLineStyle, labelStyle, hidden = false, tickLabelStyle, tickLabelFormat = scale === 'time' ? undefined : String, hiddenLine = false, lineStyle, hiddenTicks = false, tickPosition = 'outer', primaryTickLength = 5, primaryTickStyle, secondaryTickLength = 3, secondaryTickStyle, }) {
const dispatch = usePlotDispatchContext();
const { axisContext, plotWidth, plotHeight } = usePlotContext();
const xY = ['top', 'bottom'].includes(position) ? 'x' : 'y';
const axisId = id || xY;
const innerOffset = getInnerOffset(hidden, hiddenTicks, tickPosition, primaryTickLength);
useEffect(() => {
dispatch({
type: 'addAxis',
payload: {
id: axisId,
position,
min,
max,
paddingStart,
paddingEnd,
flip,
scale,
innerOffset,
tickLabelFormat,
},
});
return () => dispatch({ type: 'removeAxis', payload: { id: axisId } });
}, [
dispatch,
flip,
innerOffset,
max,
min,
paddingEnd,
paddingStart,
position,
scale,
axisId,
tickLabelFormat,
]);
const currentAxis = axisContext[axisId];
if (!currentAxis)
return null;
const childProps = {
hidden,
plotWidth,
plotHeight,
displayPrimaryGridLines,
label,
labelStyle,
tickLabelStyle,
position,
hiddenLine,
primaryGridLineStyle,
displaySecondaryGridLines,
secondaryGridLineStyle,
lineStyle,
hiddenTicks,
tickPosition,
primaryTickLength,
primaryTickStyle,
innerOffset,
secondaryTickLength,
secondaryTickStyle,
};
if (scale === 'linear') {
return (_jsx(LinearAxis, { ...childProps, tickLabelFormat: tickLabelFormat, scale: currentAxis.scale }));
}
else if (scale === 'time') {
return (_jsx(TimeAxis, { ...childProps, tickLabelFormat: tickLabelFormat, scale: currentAxis.scale }));
}
else {
return (_jsx(LogAxis, { ...childProps, tickLabelFormat: tickLabelFormat, scale: currentAxis.scale }));
}
}
//# sourceMappingURL=Axis.js.map