aboutsummaryrefslogtreecommitdiff
path: root/src/components/charts/PieChart.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/charts/PieChart.tsx')
-rw-r--r--src/components/charts/PieChart.tsx31
1 files changed, 31 insertions, 0 deletions
diff --git a/src/components/charts/PieChart.tsx b/src/components/charts/PieChart.tsx
new file mode 100644
index 0000000..2470fe7
--- /dev/null
+++ b/src/components/charts/PieChart.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 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} />}
+ </>
+ );
+}