@mui/x-charts
Version:
The community edition of MUI X Charts components.
59 lines (58 loc) • 2.39 kB
JavaScript
'use client';
import * as React from 'react';
import { getValueToPositionMapper } from "../hooks/getValueToPositionMapper.mjs";
import { isOrdinalScale } from "../internals/scaleGuards.mjs";
import { useStore } from "../internals/store/useStore.mjs";
import { selectorChartsHighlightYAxisValue, selectorChartYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.mjs";
import { useDrawingArea } from "../hooks/index.mjs";
import { ChartsAxisHighlightPath } from "./ChartsAxisHighlightPath.mjs";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* @ignore - internal component.
*/
export default function ChartsYHighlight(props) {
const {
type,
classes
} = props;
const {
left,
width
} = useDrawingArea();
const store = useStore();
const axisYValues = store.use(selectorChartsHighlightYAxisValue);
const yAxes = store.use(selectorChartYAxis);
if (axisYValues.length === 0) {
return null;
}
return axisYValues.map(({
axisId,
value
}) => {
const yAxis = yAxes.axis[axisId];
const yScale = yAxis.scale;
const getYPosition = getValueToPositionMapper(yScale);
const isYScaleOrdinal = type === 'band' && value !== null && isOrdinalScale(yScale);
if (process.env.NODE_ENV !== 'production') {
const isError = isYScaleOrdinal && yScale(value) === undefined;
if (isError) {
console.error([`MUI X Charts: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
}
}
return /*#__PURE__*/_jsxs(React.Fragment, {
children: [isYScaleOrdinal && yScale(value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
d: `M ${left} ${yScale(value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${width} 0 l 0 ${-yScale.step()} Z`,
className: classes.root,
ownerState: {
axisHighlight: 'band'
}
}), type === 'line' && value !== null && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
d: `M ${left} ${getYPosition(value)} L ${left + width} ${getYPosition(value)}`,
className: classes.root,
ownerState: {
axisHighlight: 'line'
}
})]
}, `${axisId}-${value}`);
});
}