@lobehub/charts/es/common/ChartTooltip/index.js

React modern charts components built on recharts

var _templateObject;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { Typography } from 'antd';
import { createStyles } from 'antd-style';
import { Flexbox } from 'react-layout-kit';
import ChartTooltipFrame from "./ChartTooltipFrame";
import ChartTooltipRow from "./ChartTooltipRow";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var useStyles = createStyles(function (_ref) {
  var css = _ref.css,
    token = _ref.token;
  return {
    header: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border-bottom: 1px solid ", ";\n    font-weight: 500;\n  "])), token.colorBorderSecondary)
  };
});
var ChartTooltip = function ChartTooltip(_ref2) {
  var active = _ref2.active,
    payload = _ref2.payload,
    label = _ref2.label,
    categoryColors = _ref2.categoryColors,
    valueFormatter = _ref2.valueFormatter,
    customCategories = _ref2.customCategories,
    footer = _ref2.footer;
  var _useStyles = useStyles(),
    cx = _useStyles.cx,
    theme = _useStyles.theme,
    styles = _useStyles.styles;
  if (active && payload) {
    var filteredPayload = payload.filter(function (item) {
      return item.type !== 'none';
    });
    return /*#__PURE__*/_jsxs(ChartTooltipFrame, {
      children: [/*#__PURE__*/_jsx(Flexbox, {
        className: cx(styles.header),
        paddingBlock: 8,
        paddingInline: 16,
        children: /*#__PURE__*/_jsx(Typography.Paragraph, {
          ellipsis: true,
          style: {
            margin: 0
          },
          children: label
        })
      }), /*#__PURE__*/_jsx(Flexbox, {
        gap: 4,
        paddingBlock: 8,
        paddingInline: 16,
        style: {
          flexDirection: 'column-reverse',
          marginTop: 4
        },
        children: filteredPayload.map(function (_ref3, idx) {
          var _categoryColors$get;
          var value = _ref3.value,
            name = _ref3.name;
          return /*#__PURE__*/_jsx(ChartTooltipRow, {
            color: (_categoryColors$get = categoryColors.get(name)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : theme.colorPrimary,
            name: (customCategories === null || customCategories === void 0 ? void 0 : customCategories[name]) || name,
            value: valueFormatter(value)
          }, "id-".concat(idx));
        })
      }), footer]
    });
  }
  return null;
};
export default ChartTooltip;