Initial commitHEADmain

Created from https://vercel.com/new

1 files changed, 31 insertions, 0 deletions

diff --git a/src/components/charts/BubbleChart.tsx b/src/components/charts/BubbleChart.tsx
new file mode 100644
index 0000000..bf487ac
--- /dev/null
+++ b/src/components/charts/BubbleChart.tsx
@@ -0,0 +1,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} />}
+    </>
+  );
+}