@lobehub/charts/es/ScatterChart/ScatterChartTooltip.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 { Icon } from '@lobehub/ui';
import { Typography } from 'antd';
import { createStyles } from 'antd-style';
import { Circle } from 'lucide-react';
import React, { memo } from 'react';
import { Flexbox } from 'react-layout-kit';
import { ChartTooltipFrame } from "../common/ChartTooltip/ChartTooltipFrame";
import { defaultValueFormatter } from "../utils";
import ScatterChartTooltipRow from "./ScatterChartTooltipRow";
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 ScatterChartTooltip = /*#__PURE__*/memo(function (_ref2) {
  var _categoryColors$get, _payload$;
  var customCategories = _ref2.customCategories,
    label = _ref2.label,
    active = _ref2.active,
    payload = _ref2.payload,
    valueFormatter = _ref2.valueFormatter,
    axis = _ref2.axis,
    category = _ref2.category,
    categoryColors = _ref2.categoryColors;
  var _useStyles = useStyles(),
    cx = _useStyles.cx,
    theme = _useStyles.theme,
    styles = _useStyles.styles;
  var color = category ? (_categoryColors$get = categoryColors.get(payload === null || payload === void 0 || (_payload$ = payload[0]) === null || _payload$ === void 0 ? void 0 : _payload$.payload[category])) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : theme.colorPrimary : theme.colorPrimary;
  if (active && payload) {
    return /*#__PURE__*/_jsxs(ChartTooltipFrame, {
      children: [/*#__PURE__*/_jsxs(Flexbox, {
        align: 'center',
        className: cx(styles.header),
        gap: 8,
        horizontal: true,
        paddingBlock: 8,
        paddingInline: 16,
        children: [/*#__PURE__*/_jsx(Icon, {
          color: color,
          fill: color,
          icon: Circle,
          size: {
            fontSize: 10
          }
        }), /*#__PURE__*/_jsx(Typography.Paragraph, {
          ellipsis: true,
          style: {
            margin: 0
          },
          children: label
        })]
      }), /*#__PURE__*/_jsx(Flexbox, {
        gap: 4,
        paddingBlock: 8,
        paddingInline: 16,
        style: {
          marginTop: 4
        },
        children: payload.map(function (_ref3, idx) {
          var _Object$keys$find, _valueFormatter;
          var value = _ref3.value,
            name = _ref3.name;
          var valueFormatterKey = (_Object$keys$find = Object.keys(axis).find(function (key) {
            return axis[key] === name;
          })) !== null && _Object$keys$find !== void 0 ? _Object$keys$find : '';
          var valueFormatterFn = (_valueFormatter = valueFormatter[valueFormatterKey]) !== null && _valueFormatter !== void 0 ? _valueFormatter : defaultValueFormatter;
          return /*#__PURE__*/_jsx(ScatterChartTooltipRow, {
            name: (customCategories === null || customCategories === void 0 ? void 0 : customCategories[name]) || name,
            value: valueFormatter && valueFormatterFn ? valueFormatterFn(value) : "".concat(value)
          }, "id-".concat(idx));
        })
      })]
    });
  }
  return null;
});
export default ScatterChartTooltip;