@mui/x-charts
Version:
The community edition of MUI X Charts components.
150 lines (149 loc) • 5.34 kB
JavaScript
'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import Typography from '@mui/material/Typography';
import { useUtilityClasses } from "./chartsTooltipClasses.mjs";
import { useInternalItemTooltip } from "./useItemTooltip.mjs";
import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipRow, ChartsTooltipTable } from "./ChartsTooltipTable.mjs";
import { ChartsLabelMark } from "../ChartsLabel/ChartsLabelMark.mjs";
import { useStore } from "../internals/store/useStore.mjs";
import { selectorChartSeriesConfig } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function ChartsItemTooltipContent(props) {
const {
classes: propClasses,
sx
} = props;
const tooltipData = useInternalItemTooltip();
const store = useStore();
const seriesConfig = store.use(selectorChartSeriesConfig);
const classes = useUtilityClasses(propClasses);
if (!tooltipData) {
return null;
}
const config = seriesConfig[tooltipData.identifier.type];
const ItemTooltipContent = config && 'ItemTooltipContent' in config ? config.ItemTooltipContent : null;
if ('values' in tooltipData) {
const {
label: seriesLabel,
color,
markType,
markShape
} = tooltipData;
const Content = ItemTooltipContent ?? DefaultMultipleValueContent;
return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
sx: sx,
className: classes.paper,
children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
className: classes.table,
children: [/*#__PURE__*/_jsxs(Typography, {
component: "caption",
children: [/*#__PURE__*/_jsx("div", {
className: classes.markContainer,
children: /*#__PURE__*/_jsx(ChartsLabelMark, {
type: markType,
markShape: markShape,
color: color,
className: classes.mark
})
}), seriesLabel]
}), /*#__PURE__*/_jsx("tbody", {
children: /*#__PURE__*/_jsx(Content, {
classes: propClasses,
item: tooltipData
})
})]
})
});
}
const Content = ItemTooltipContent ?? DefaultSingleValueContent;
return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
sx: sx,
className: classes.paper,
children: /*#__PURE__*/_jsx(ChartsTooltipTable, {
className: classes.table,
children: /*#__PURE__*/_jsx("tbody", {
children: /*#__PURE__*/_jsx(Content, {
classes: propClasses,
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 */
tooltipData
})
})
})
});
}
function DefaultMultipleValueContent({
classes: propClasses,
item
}) {
const classes = useUtilityClasses(propClasses);
return /*#__PURE__*/_jsx(React.Fragment, {
children: item.values.map(value => /*#__PURE__*/_jsxs(ChartsTooltipRow, {
className: classes.row,
"data-series": item.identifier.seriesId,
"data-index": item.identifier.dataIndex,
children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
className: clsx(classes.labelCell, classes.cell),
component: "th",
children: value.label
}), /*#__PURE__*/_jsx(ChartsTooltipCell, {
className: clsx(classes.valueCell, classes.cell),
component: "td",
children: value.formattedValue
})]
}, value.label))
});
}
function DefaultSingleValueContent({
classes: propClasses,
item
}) {
const {
color,
label,
formattedValue,
markType,
markShape
} = item;
const classes = useUtilityClasses(propClasses);
if (formattedValue == null || typeof formattedValue !== 'string') {
return null;
}
return /*#__PURE__*/_jsxs(ChartsTooltipRow, {
className: classes.row,
"data-series": item.identifier.seriesId,
"data-index": 'dataIndex' in item.identifier ? item.identifier.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: markType,
markShape: markShape,
color: color,
className: classes.mark
})
}), label]
}), /*#__PURE__*/_jsx(ChartsTooltipCell, {
className: clsx(classes.valueCell, classes.cell),
component: "td",
children: formattedValue
})]
});
}
process.env.NODE_ENV !== "production" ? ChartsItemTooltipContent.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])
} : void 0;
export { ChartsItemTooltipContent };