@mui/x-charts
Version:
The community edition of MUI X Charts components.
57 lines (56 loc) • 2.59 kB
JavaScript
;
'use client';
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = ChartsXHighlight;
var React = _interopRequireWildcard(require("react"));
var _useScale = require("../hooks/useScale");
var _isBandScale = require("../internals/isBandScale");
var _useSelector = require("../internals/store/useSelector");
var _useStore = require("../internals/store/useStore");
var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
var _hooks = require("../hooks");
var _ChartsAxisHighlightPath = require("./ChartsAxisHighlightPath");
var _jsxRuntime = require("react/jsx-runtime");
/**
* @ignore - internal component.
*/function ChartsXHighlight(props) {
const {
type,
classes
} = props;
const {
top,
height
} = (0, _hooks.useDrawingArea)();
const xScale = (0, _useScale.useXScale)();
const store = (0, _useStore.useStore)();
const axisXValue = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsInteractionXAxisValue);
const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
const isBandScaleX = type === 'band' && axisXValue !== null && (0, _isBandScale.isBandScale)(xScale);
if (process.env.NODE_ENV !== 'production') {
const isError = isBandScaleX && xScale(axisXValue) === 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__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
children: [isBandScaleX && xScale(axisXValue) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath
// @ts-expect-error, xScale value is checked in the statement above
, {
d: `M ${xScale(axisXValue) - (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' && axisXValue !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
d: `M ${getXPosition(axisXValue)} ${top} L ${getXPosition(axisXValue)} ${top + height}`,
className: classes.root,
ownerState: {
axisHighlight: 'line'
}
})]
});
}