@mui/x-charts
Version:
The community edition of MUI X Charts components.
115 lines (114 loc) • 4.55 kB
JavaScript
'use client';
import PropTypes from 'prop-types';
import Typography from '@mui/material/Typography';
import clsx from 'clsx';
import { useUtilityClasses } from "./chartsTooltipClasses.mjs";
import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipRow, ChartsTooltipTable } from "./ChartsTooltipTable.mjs";
import { useAxesTooltip } from "./useAxesTooltip.mjs";
import { ChartsLabelMark } from "../ChartsLabel/ChartsLabelMark.mjs";
import { useStore } from "../internals/store/useStore.mjs";
import { selectorChartSeriesConfigGetter } from "../internals/plugins/corePlugins/useChartSeries/index.mjs";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function ChartsAxisTooltipContent(props) {
const {
sort
} = props;
const classes = useUtilityClasses(props.classes);
const store = useStore();
const getSeriesConfig = store.use(selectorChartSeriesConfigGetter);
const tooltipData = useAxesTooltip();
if (tooltipData === null) {
return null;
}
return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
sx: props.sx,
className: classes.paper,
children: tooltipData.map(({
axisId,
mainAxis,
axisValue,
axisFormattedValue,
seriesItems
}) => {
const sortedItems = sort && sort !== 'none' ? [...seriesItems].sort((a, b) => {
const aValue = a.value?.valueOf();
const bValue = b.value?.valueOf();
if (typeof aValue !== 'number') {
return 1;
}
if (typeof bValue !== 'number') {
return -1;
}
return sort === 'asc' ? aValue - bValue : bValue - aValue;
}) : seriesItems;
return /*#__PURE__*/_jsxs(ChartsTooltipTable, {
className: classes.table,
children: [axisValue != null && !mainAxis.hideTooltip && /*#__PURE__*/_jsx(Typography, {
component: "caption",
children: axisFormattedValue
}), /*#__PURE__*/_jsx("tbody", {
children: sortedItems.map(item => {
const seriesConfig = getSeriesConfig(item.seriesId);
const Content = seriesConfig && 'AxisTooltipContent' in seriesConfig ? seriesConfig.AxisTooltipContent ?? DefaultContent : DefaultContent;
return /*#__PURE__*/_jsx(Content, {
classes: props.classes,
item:
/* TypeScript can't guarantee that the item's series type is the same as the Content's series type,
* so we need to cast */
item
}, item.seriesId);
})
})]
}, axisId);
})
});
}
function DefaultContent(props) {
const classes = useUtilityClasses(props.classes);
const {
item
} = props;
if (item.formattedValue == null || typeof item.formattedValue !== 'string') {
return null;
}
return /*#__PURE__*/_jsxs(ChartsTooltipRow, {
className: classes.row,
"data-series": item.seriesId,
"data-index": 'dataIndex' in item ? item.dataIndex : undefined,
children: [/*#__PURE__*/_jsxs(ChartsTooltipCell, {
className: clsx(classes.labelCell, classes.cell),
component: "th",
children: [/*#__PURE__*/_jsx("div", {
className: classes.markContainer,
children: /*#__PURE__*/_jsx(ChartsLabelMark, {
type: item.markType,
markShape: item.markShape,
color: item.color,
className: classes.mark
})
}), item.formattedLabel || null]
}), /*#__PURE__*/_jsx(ChartsTooltipCell, {
className: clsx(classes.valueCell, classes.cell),
component: "td",
children: item.formattedValue
})]
});
}
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 "pnpm proptypes" |
// ----------------------------------------------------------------------
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object,
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
/**
* The sort in which series items are displayed in the tooltip.
* When set to `none`, series are sorted as they are provided in the series property. Otherwise they are sorted by their value.
* @default 'none'
*/
sort: PropTypes.oneOf(['none', 'asc', 'desc'])
} : void 0;
export { ChartsAxisTooltipContent };