@actinc/dls
Version:
Design Language System (DLS) for ACT & Encoura front-end projects.
54 lines • 2.84 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Copyright (c) ACT, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
/* eslint-disable @typescript-eslint/restrict-template-expressions */
import { Typography } from '@mui/material';
import Paper from '@mui/material/Paper';
import numeral from 'numeral';
export var CustomTooltip = function (props) {
var barId = props.barId, data = props.data, formatLabel = props.formatLabel, formatValue = props.formatValue, formatValueLabel = props.formatValueLabel, tooltipLabel = props.label, payload = props.payload, renderAdditionalInfo = props.renderAdditionalInfo, _a = props.showValue, showValue = _a === void 0 ? true : _a, tooltipColor = props.tooltipColor, valueLabel = props.valueLabel;
if (payload) {
var label = void 0;
var values = void 0;
var hoveredBar = payload.find(function (el) { return el.dataKey === barId; });
if (hoveredBar) {
label = formatLabel
? formatLabel(tooltipLabel, hoveredBar.dataKey, payload, data)
: "".concat(tooltipLabel || '', " - ").concat(hoveredBar.dataKey);
values = [
{
label: formatValueLabel
? formatValueLabel(valueLabel, hoveredBar.dataKey, payload)
: valueLabel || 'Value',
value: formatValue
? formatValue(hoveredBar.value, payload)
: numeral(hoveredBar.value).format('0,0'),
},
];
}
else {
label = (formatLabel
? formatLabel(tooltipLabel, undefined, payload, data)
: tooltipLabel);
values = payload.map(function (barInfo) { return ({
label: formatValueLabel
? formatValueLabel(barInfo.name, undefined, payload)
: barInfo.name,
value: formatValue
? formatValue(barInfo.value, payload)
: numeral(barInfo.value).format('0,0'),
}); });
}
return (_jsxs(Paper, { "aria-live": "assertive", elevation: 1, role: "status", sx: { p: 2 }, children: [_jsx(Typography, { sx: { color: tooltipColor, mb: 0.5 }, children: label }), showValue &&
values.map(function (barInfo) { return (_jsxs(Typography, { children: [barInfo.label, ": ", barInfo.value] }, barInfo.label)); }), renderAdditionalInfo &&
renderAdditionalInfo(barId, payload, data, tooltipLabel)] }));
}
return null;
};
export default CustomTooltip;
//# sourceMappingURL=index.js.map