124 lines
4.2 KiB
JavaScript
124 lines
4.2 KiB
JavaScript
'use client';
|
|
|
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
const _excluded = ["slots", "slotProps"];
|
|
import * as React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { useStore } from "../internals/store/useStore.js";
|
|
import { useSelector } from "../internals/store/useSelector.js";
|
|
import { LineHighlightElement } from "./LineHighlightElement.js";
|
|
import { getValueToPositionMapper } from "../hooks/useScale.js";
|
|
import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
|
|
import { useLineSeriesContext } from "../hooks/useLineSeries.js";
|
|
import getColor from "./seriesConfig/getColor.js";
|
|
import { useChartContext } from "../context/ChartProvider/index.js";
|
|
import { selectorChartsHighlightXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
|
|
import { useXAxes, useYAxes } from "../hooks/useAxis.js";
|
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
/**
|
|
* 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 = _objectWithoutPropertiesLoose(props, _excluded);
|
|
const seriesData = useLineSeriesContext();
|
|
const {
|
|
xAxis,
|
|
xAxisIds
|
|
} = useXAxes();
|
|
const {
|
|
yAxis,
|
|
yAxisIds
|
|
} = useYAxes();
|
|
const {
|
|
instance
|
|
} = useChartContext();
|
|
const store = useStore();
|
|
const highlightedIndexes = useSelector(store, 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;
|
|
return /*#__PURE__*/_jsx("g", _extends({}, 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 = getValueToPositionMapper(xAxis[xAxisId].scale);
|
|
const yScale = yAxis[yAxisId].scale;
|
|
const xData = xAxis[xAxisId].data;
|
|
if (xData === undefined) {
|
|
throw new Error(`MUI X Charts: ${xAxisId === 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 = getColor(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
|
|
return /*#__PURE__*/_jsx(Element, _extends({
|
|
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.object,
|
|
/**
|
|
* Overridable component slots.
|
|
* @default {}
|
|
*/
|
|
slots: PropTypes.object
|
|
} : void 0;
|
|
export { LineHighlightPlot }; |