@mui/x-charts
Version:
The community edition of the charts components (MUI X).
168 lines • 6.39 kB
JavaScript
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import Typography from '@mui/material/Typography';
import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipMark, ChartsTooltipRow } from './ChartsTooltipTable';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
function DefaultChartsAxisTooltipContent(props) {
var _axis$valueFormatter;
const {
series,
axis,
dataIndex,
axisValue,
sx,
classes
} = props;
if (dataIndex == null) {
return null;
}
const axisFormatter = (_axis$valueFormatter = axis.valueFormatter) != null ? _axis$valueFormatter : v => v.toLocaleString();
return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
sx: sx,
className: classes.root,
children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
className: classes.table,
children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx("thead", {
children: /*#__PURE__*/_jsx(ChartsTooltipRow, {
children: /*#__PURE__*/_jsx(ChartsTooltipCell, {
colSpan: 3,
children: /*#__PURE__*/_jsx(Typography, {
children: axisFormatter(axisValue)
})
})
})
}), /*#__PURE__*/_jsx("tbody", {
children: series.map(({
color,
id,
label,
valueFormatter,
data
}) => {
const formattedValue = valueFormatter(data[dataIndex]);
if (formattedValue == null) {
return null;
}
return /*#__PURE__*/_jsxs(ChartsTooltipRow, {
className: classes.row,
children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
className: clsx(classes.markCell, classes.cell),
children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
ownerState: {
color
},
boxShadow: 1,
className: classes.mark
})
}), /*#__PURE__*/_jsx(ChartsTooltipCell, {
className: clsx(classes.labelCell, classes.cell),
children: label ? /*#__PURE__*/_jsx(Typography, {
children: label
}) : null
}), /*#__PURE__*/_jsx(ChartsTooltipCell, {
className: clsx(classes.valueCell, classes.cell),
children: /*#__PURE__*/_jsx(Typography, {
children: formattedValue
})
})]
}, id);
})
})]
})
});
}
process.env.NODE_ENV !== "production" ? DefaultChartsAxisTooltipContent.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The properties of the triggered axis.
*/
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
}).isRequired,
/**
* Data identifying the triggered axis.
*/
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,
/**
* The value associated to the current mouse position.
*/
axisValue: PropTypes.any.isRequired,
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object.isRequired,
/**
* The index of the data item triggered.
*/
dataIndex: PropTypes.number,
/**
* The series linked to the triggered axis.
*/
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
})).isRequired,
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
} : void 0;
export { DefaultChartsAxisTooltipContent };