import { Group } from "@visx/group";
import Pie, { ProvidedProps } from "@visx/shape/lib/shapes/Pie";
import React from "react";
import styles from "./PieChart.module.css";
interface PieChartProps {
data: PieChartData[];
width: number;
labelWidth: number;
padRadius?: number;
innerRadius?: number;
className?: string;
}
interface PieChartData {
category: string;
value: number;
}
export function PieChart({
width,
labelWidth,
padRadius = width * 0.35,
innerRadius = width * 0.015,
...props
}: PieChartProps) {
const pieWidth = width * 0.5 - labelWidth;
return (
);
}
type PieSlicesProps = ProvidedProps & {
isLabel: boolean;
};
export function PieSlices({ isLabel, ...props }: PieSlicesProps) {
return (
<>
{props.arcs.map((arc) => {
const [centroidX, centroidY] = props.path.centroid(arc);
const pathArc = props.path(arc) as string;
return (
{isLabel ? `${arc.data.category}` : `${arc.data.value}%`}
);
})}
>
);
}