130 lines
4.8 KiB
JavaScript
130 lines
4.8 KiB
JavaScript
"use strict";
|
|
'use client';
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.LineHighlightPlot = LineHighlightPlot;
|
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
var React = _interopRequireWildcard(require("react"));
|
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
var _useStore = require("../internals/store/useStore");
|
|
var _useSelector = require("../internals/store/useSelector");
|
|
var _LineHighlightElement = require("./LineHighlightElement");
|
|
var _useScale = require("../hooks/useScale");
|
|
var _constants = require("../constants");
|
|
var _useLineSeries = require("../hooks/useLineSeries");
|
|
var _getColor = _interopRequireDefault(require("./seriesConfig/getColor"));
|
|
var _ChartProvider = require("../context/ChartProvider");
|
|
var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
|
|
var _useAxis = require("../hooks/useAxis");
|
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
const _excluded = ["slots", "slotProps"];
|
|
/**
|
|
* Demos:
|
|
*
|
|
* - [Lines](https://mui.com/x/react-charts/lines/)
|
|
* - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
|
|
*
|
|
* API:
|
|
*
|
|
* - [LineHighlightPlot API](https://mui.com/x/api/charts/line-highlight-plot/)
|
|
*/
|
|
function LineHighlightPlot(props) {
|
|
const {
|
|
slots,
|
|
slotProps
|
|
} = props,
|
|
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
|
|
const seriesData = (0, _useLineSeries.useLineSeriesContext)();
|
|
const {
|
|
xAxis,
|
|
xAxisIds
|
|
} = (0, _useAxis.useXAxes)();
|
|
const {
|
|
yAxis,
|
|
yAxisIds
|
|
} = (0, _useAxis.useYAxes)();
|
|
const {
|
|
instance
|
|
} = (0, _ChartProvider.useChartContext)();
|
|
const store = (0, _useStore.useStore)();
|
|
const highlightedIndexes = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsHighlightXAxisIndex);
|
|
if (highlightedIndexes.length === 0) {
|
|
return null;
|
|
}
|
|
if (seriesData === undefined) {
|
|
return null;
|
|
}
|
|
const {
|
|
series,
|
|
stackingGroups
|
|
} = seriesData;
|
|
const defaultXAxisId = xAxisIds[0];
|
|
const defaultYAxisId = yAxisIds[0];
|
|
const Element = slots?.lineHighlight ?? _LineHighlightElement.LineHighlightElement;
|
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
|
|
children: highlightedIndexes.flatMap(({
|
|
dataIndex: highlightedIndex,
|
|
axisId: highlightedAxisId
|
|
}) => stackingGroups.flatMap(({
|
|
ids: groupIds
|
|
}) => {
|
|
return groupIds.flatMap(seriesId => {
|
|
const {
|
|
xAxisId = defaultXAxisId,
|
|
yAxisId = defaultYAxisId,
|
|
stackedData,
|
|
data,
|
|
disableHighlight,
|
|
shape = 'circle'
|
|
} = series[seriesId];
|
|
if (disableHighlight || data[highlightedIndex] == null) {
|
|
return null;
|
|
}
|
|
if (highlightedAxisId !== xAxisId) {
|
|
return null;
|
|
}
|
|
const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisId].scale);
|
|
const yScale = yAxis[yAxisId].scale;
|
|
const xData = xAxis[xAxisId].data;
|
|
if (xData === undefined) {
|
|
throw new Error(`MUI X Charts: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
|
|
}
|
|
const x = xScale(xData[highlightedIndex]);
|
|
const y = yScale(stackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale
|
|
|
|
if (!instance.isPointInside(x, y)) {
|
|
return null;
|
|
}
|
|
const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
|
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({
|
|
id: seriesId,
|
|
color: colorGetter(highlightedIndex),
|
|
x: x,
|
|
y: y,
|
|
shape: shape
|
|
}, slotProps?.lineHighlight), `${seriesId}`);
|
|
});
|
|
}))
|
|
}));
|
|
}
|
|
process.env.NODE_ENV !== "production" ? LineHighlightPlot.propTypes = {
|
|
// ----------------------------- Warning --------------------------------
|
|
// | These PropTypes are generated from the TypeScript type definitions |
|
|
// | To update them edit the TypeScript types and run "pnpm proptypes" |
|
|
// ----------------------------------------------------------------------
|
|
/**
|
|
* The props used for each component slot.
|
|
* @default {}
|
|
*/
|
|
slotProps: _propTypes.default.object,
|
|
/**
|
|
* Overridable component slots.
|
|
* @default {}
|
|
*/
|
|
slots: _propTypes.default.object
|
|
} : void 0; |