@mui/x-charts
Version:
The community edition of the charts components (MUI X).
150 lines • 6.37 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import PropTypes from 'prop-types';
import { useSlotProps } from '@mui/base/utils';
import { SeriesContext } from '../context/SeriesContextProvider';
import { CartesianContext } from '../context/CartesianContextProvider';
import { DefaultChartsAxisTooltipContent } from './DefaultChartsAxisTooltipContent';
import { jsx as _jsx } from "react/jsx-runtime";
function ChartsAxisTooltipContent(props) {
const {
content,
contentProps,
axisData,
sx,
classes
} = props;
const isXaxis = (axisData.x && axisData.x.index) !== undefined;
const dataIndex = isXaxis ? axisData.x && axisData.x.index : axisData.y && axisData.y.index;
const axisValue = isXaxis ? axisData.x && axisData.x.value : axisData.y && axisData.y.value;
const {
xAxisIds,
xAxis,
yAxisIds,
yAxis
} = React.useContext(CartesianContext);
const series = React.useContext(SeriesContext);
const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
const relevantSeries = React.useMemo(() => {
const rep = [];
Object.keys(series).filter(seriesType => ['bar', 'line', 'scatter'].includes(seriesType)).forEach(seriesType => {
series[seriesType].seriesOrder.forEach(seriesId => {
const item = series[seriesType].series[seriesId];
const axisKey = isXaxis ? item.xAxisKey : item.yAxisKey;
if (axisKey === undefined || axisKey === USED_AXIS_ID) {
rep.push(series[seriesType].series[seriesId]);
}
});
});
return rep;
}, [USED_AXIS_ID, isXaxis, series]);
const relevantAxis = React.useMemo(() => {
return isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
}, [USED_AXIS_ID, isXaxis, xAxis, yAxis]);
const Content = content != null ? content : DefaultChartsAxisTooltipContent;
const chartTooltipContentProps = useSlotProps({
elementType: Content,
externalSlotProps: contentProps,
additionalProps: {
axisData,
series: relevantSeries,
axis: relevantAxis,
dataIndex,
axisValue,
sx,
classes
},
ownerState: {}
});
return /*#__PURE__*/_jsx(Content, _extends({}, chartTooltipContentProps));
}
process.env.NODE_ENV !== "production" ? ChartsAxisTooltipContent.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "yarn proptypes" |
// ----------------------------------------------------------------------
axisData: PropTypes.shape({
x: PropTypes.shape({
index: PropTypes.number,
value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired
}),
y: PropTypes.shape({
index: PropTypes.number,
value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired
})
}).isRequired,
classes: PropTypes.object.isRequired,
content: PropTypes.elementType,
contentProps: PropTypes.shape({
axis: PropTypes.shape({
axisId: PropTypes.string,
classes: PropTypes.object,
data: PropTypes.array,
dataKey: PropTypes.string,
disableLine: PropTypes.bool,
disableTicks: PropTypes.bool,
fill: PropTypes.string,
hideTooltip: PropTypes.bool,
id: PropTypes.string.isRequired,
label: PropTypes.string,
labelFontSize: PropTypes.number,
labelStyle: PropTypes.object,
max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
scale: PropTypes.func.isRequired,
scaleType: PropTypes.oneOf(['time']).isRequired,
slotProps: PropTypes.object,
slots: PropTypes.object,
stroke: PropTypes.string,
tickFontSize: PropTypes.number,
tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
tickLabelStyle: PropTypes.object,
tickMaxStep: PropTypes.number,
tickMinStep: PropTypes.number,
tickNumber: PropTypes.number.isRequired,
tickSize: PropTypes.number,
valueFormatter: PropTypes.func
}),
axisData: PropTypes.shape({
x: PropTypes.shape({
index: PropTypes.number,
value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired
}),
y: PropTypes.shape({
index: PropTypes.number,
value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired
})
}),
axisValue: PropTypes.any,
classes: PropTypes.object,
dataIndex: PropTypes.number,
series: PropTypes.arrayOf(PropTypes.shape({
area: PropTypes.bool,
color: PropTypes.string.isRequired,
connectNulls: PropTypes.bool,
curve: PropTypes.oneOf(['catmullRom', 'linear', 'monotoneX', 'monotoneY', 'natural', 'step', 'stepAfter', 'stepBefore']),
data: PropTypes.arrayOf(PropTypes.number).isRequired,
dataKey: PropTypes.string,
disableHighlight: PropTypes.bool,
highlightScope: PropTypes.shape({
faded: PropTypes.oneOf(['global', 'none', 'series']),
highlighted: PropTypes.oneOf(['item', 'none', 'series'])
}),
id: PropTypes.string.isRequired,
label: PropTypes.string,
showMark: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
stack: PropTypes.string,
stackOffset: PropTypes.oneOf(['diverging', 'expand', 'none', 'silhouette', 'wiggle']),
stackOrder: PropTypes.oneOf(['appearance', 'ascending', 'descending', 'insideOut', 'none', 'reverse']),
type: PropTypes.oneOf(['line']).isRequired,
valueFormatter: PropTypes.func.isRequired,
xAxisKey: PropTypes.string,
yAxisKey: PropTypes.string
})),
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
}),
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
} : void 0;
export { ChartsAxisTooltipContent };