@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 { selectorChartsHighlightXAxisValue, selectorChartXAxis } 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 ChartsXHighlight(props) {
const {
type,
classes
} = props;
const {
top,
height
} = useDrawingArea();
const store = useStore();
const axisXValues = store.use(selectorChartsHighlightXAxisValue);
const xAxes = store.use(selectorChartXAxis);
if (axisXValues.length === 0) {
return null;
}
return axisXValues.map(({
axisId,
value
}) => {
const xAxis = xAxes.axis[axisId];
const xScale = xAxis.scale;
const getXPosition = getValueToPositionMapper(xScale);
const isXScaleOrdinal = type === 'band' && value !== null && isOrdinalScale(xScale);
if (process.env.NODE_ENV !== 'production') {
const isError = isXScaleOrdinal && xScale(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: [isXScaleOrdinal && xScale(value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
d: `M ${xScale(value) - (xScale.step() - xScale.bandwidth()) / 2} ${top} l ${xScale.step()} 0 l 0 ${height} l ${-xScale.step()} 0 Z`,
className: classes.root,
ownerState: {
axisHighlight: 'band'
}
}), type === 'line' && value !== null && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
d: `M ${getXPosition(value)} ${top} L ${getXPosition(value)} ${top + height}`,
className: classes.root,
ownerState: {
axisHighlight: 'line'
}
})]
}, `${axisId}-${value}`);
});
}