65 lines
2.7 KiB
JavaScript
65 lines
2.7 KiB
JavaScript
"use strict";
|
|
'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 store = (0, _useStore.useStore)();
|
|
const axisXValues = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsHighlightXAxisValue);
|
|
const xAxes = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartXAxis);
|
|
if (axisXValues.length === 0) {
|
|
return null;
|
|
}
|
|
return axisXValues.map(({
|
|
axisId,
|
|
value
|
|
}) => {
|
|
const xAxis = xAxes.axis[axisId];
|
|
const xScale = xAxis.scale;
|
|
const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
|
|
const isBandScaleX = type === 'band' && value !== null && (0, _isBandScale.isBandScale)(xScale);
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
const isError = isBandScaleX && 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__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
|
|
children: [isBandScaleX && xScale(value) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.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__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
|
|
d: `M ${getXPosition(value)} ${top} L ${getXPosition(value)} ${top + height}`,
|
|
className: classes.root,
|
|
ownerState: {
|
|
axisHighlight: 'line'
|
|
}
|
|
})]
|
|
}, `${axisId}-${value}`);
|
|
});
|
|
} |