src/components/charts/BubbleChart.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 BubbleChartProps extends ChartProps {
  type?: 'bubble';
}

export function BubbleChart({ type = 'bubble', ...props }: BubbleChartProps) {
  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} />}
    </>
  );
}