@lobehub/charts/es/DonutChart/DonutChartTooltip.js

React modern charts components built on recharts

import React from 'react';
import { Flexbox } from 'react-layout-kit';
import ChartTooltipFrame from "../common/ChartTooltip/ChartTooltipFrame";
import ChartTooltipRow from "../common/ChartTooltip/ChartTooltipRow";
import { jsx as _jsx } from "react/jsx-runtime";
export var DonutChartTooltip = function DonutChartTooltip(_ref) {
  var customCategories = _ref.customCategories,
    active = _ref.active,
    payload = _ref.payload,
    valueFormatter = _ref.valueFormatter;
  if (active && payload !== null && payload !== void 0 && payload[0]) {
    var payloadRow = payload === null || payload === void 0 ? void 0 : payload[0];
    return /*#__PURE__*/_jsx(ChartTooltipFrame, {
      children: /*#__PURE__*/_jsx(Flexbox, {
        paddingBlock: 8,
        paddingInline: 16,
        children: /*#__PURE__*/_jsx(ChartTooltipRow, {
          color: payloadRow.payload.color,
          name: (customCategories === null || customCategories === void 0 ? void 0 : customCategories[payloadRow.name]) || payloadRow.name,
          value: valueFormatter(payloadRow.value)
        })
      })
    });
  }
  return null;
};