61 lines
2.4 KiB
JavaScript
61 lines
2.4 KiB
JavaScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { getValueToPositionMapper } from "../hooks/useScale.js";
|
|
import { isBandScale } from "../internals/isBandScale.js";
|
|
import { useSelector } from "../internals/store/useSelector.js";
|
|
import { useStore } from "../internals/store/useStore.js";
|
|
import { selectorChartsHighlightYAxisValue, selectorChartYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
|
|
import { useDrawingArea } from "../hooks/index.js";
|
|
import { ChartsAxisHighlightPath } from "./ChartsAxisHighlightPath.js";
|
|
|
|
/**
|
|
* @ignore - internal component.
|
|
*/
|
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
export default function ChartsYHighlight(props) {
|
|
const {
|
|
type,
|
|
classes
|
|
} = props;
|
|
const {
|
|
left,
|
|
width
|
|
} = useDrawingArea();
|
|
const store = useStore();
|
|
const axisYValues = useSelector(store, selectorChartsHighlightYAxisValue);
|
|
const yAxes = useSelector(store, 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 isBandScaleY = type === 'band' && value !== null && isBandScale(yScale);
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
const isError = isBandScaleY && 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: [isBandScaleY && 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}`);
|
|
});
|
|
} |