src/components/charts/PieChart.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import { useState } from 'react';
import { Chart, type ChartProps } from '@/components/charts/Chart';
import { ChartTooltip } from '@/components/charts/ChartTooltip';

export interface PieChartProps extends ChartProps {
  type?: 'doughnut' | 'pie';
}

export function PieChart({ type = 'pie', ...props }: PieChartProps) {
  const [tooltip, setTooltip] = useState(null);

  const handleTooltip = ({ tooltip }) => {
    const { opacity, labelColors, title, dataPoints } = tooltip;

    setTooltip(
      opacity
        ? {
            color: labelColors?.[0]?.backgroundColor,
            value: `${title}: ${dataPoints[0].raw}`,
          }
        : null,
    );
  };

  return (
    <>
      <Chart {...props} type={type} onTooltip={handleTooltip} />
      {tooltip && <ChartTooltip {...tooltip} />}
    </>
  );
}