@mui/x-charts
Version:
The community edition of the charts components (MUI X).
174 lines (173 loc) • 8.53 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DefaultChartsAxisTooltipContent = DefaultChartsAxisTooltipContent;
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _clsx = _interopRequireDefault(require("clsx"));
var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
var _ChartsTooltipTable = require("./ChartsTooltipTable");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function DefaultChartsAxisTooltipContent(props) {
const {
series,
axis,
dataIndex,
axisValue,
sx,
classes
} = props;
if (dataIndex == null) {
return null;
}
const axisFormatter = axis.valueFormatter ?? (v => v.toLocaleString());
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipPaper, {
sx: sx,
className: classes.root,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipTable, {
className: classes.table,
children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipRow, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
colSpan: 3,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
children: axisFormatter(axisValue)
})
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
children: series.map(({
color,
id,
label,
valueFormatter,
data
}) => {
const formattedValue = valueFormatter(data[dataIndex]);
if (formattedValue == null) {
return null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
className: classes.row,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
className: (0, _clsx.default)(classes.markCell, classes.cell),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipMark, {
ownerState: {
color
},
boxShadow: 1,
className: classes.mark
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
className: (0, _clsx.default)(classes.labelCell, classes.cell),
children: label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
children: label
}) : null
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
className: (0, _clsx.default)(classes.valueCell, classes.cell),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
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.default.shape({
axisId: _propTypes.default.string,
classes: _propTypes.default.object,
data: _propTypes.default.array,
dataKey: _propTypes.default.string,
disableLine: _propTypes.default.bool,
disableTicks: _propTypes.default.bool,
fill: _propTypes.default.string,
hideTooltip: _propTypes.default.bool,
id: _propTypes.default.string.isRequired,
label: _propTypes.default.string,
labelFontSize: _propTypes.default.number,
labelStyle: _propTypes.default.object,
max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
scale: _propTypes.default.func.isRequired,
scaleType: _propTypes.default.oneOf(['time']).isRequired,
slotProps: _propTypes.default.object,
slots: _propTypes.default.object,
stroke: _propTypes.default.string,
tickFontSize: _propTypes.default.number,
tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
tickLabelStyle: _propTypes.default.object,
tickMaxStep: _propTypes.default.number,
tickMinStep: _propTypes.default.number,
tickNumber: _propTypes.default.number.isRequired,
tickSize: _propTypes.default.number,
valueFormatter: _propTypes.default.func
}).isRequired,
/**
* Data identifying the triggered axis.
*/
axisData: _propTypes.default.shape({
x: _propTypes.default.shape({
index: _propTypes.default.number,
value: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired
}),
y: _propTypes.default.shape({
index: _propTypes.default.number,
value: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired
})
}).isRequired,
/**
* The value associated to the current mouse position.
*/
axisValue: _propTypes.default.any.isRequired,
/**
* Override or extend the styles applied to the component.
*/
classes: _propTypes.default.object.isRequired,
/**
* The index of the data item triggered.
*/
dataIndex: _propTypes.default.number,
/**
* The series linked to the triggered axis.
*/
series: _propTypes.default.arrayOf(_propTypes.default.shape({
area: _propTypes.default.bool,
color: _propTypes.default.string.isRequired,
connectNulls: _propTypes.default.bool,
curve: _propTypes.default.oneOf(['catmullRom', 'linear', 'monotoneX', 'monotoneY', 'natural', 'step', 'stepAfter', 'stepBefore']),
data: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
dataKey: _propTypes.default.string,
disableHighlight: _propTypes.default.bool,
highlightScope: _propTypes.default.shape({
faded: _propTypes.default.oneOf(['global', 'none', 'series']),
highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
}),
id: _propTypes.default.string.isRequired,
label: _propTypes.default.string,
showMark: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]),
stack: _propTypes.default.string,
stackOffset: _propTypes.default.oneOf(['diverging', 'expand', 'none', 'silhouette', 'wiggle']),
stackOrder: _propTypes.default.oneOf(['appearance', 'ascending', 'descending', 'insideOut', 'none', 'reverse']),
type: _propTypes.default.oneOf(['line']).isRequired,
valueFormatter: _propTypes.default.func.isRequired,
xAxisKey: _propTypes.default.string,
yAxisKey: _propTypes.default.string
})).isRequired,
sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
} : void 0;