import { Group } from "@visx/group";
import { Arc } from "@visx/shape";
import Pie, { ProvidedProps } from "@visx/shape/lib/shapes/Pie";
import React, { useState } from "react";
import styles from "./PieChart.module.css";
interface PieChartProps {
data: PieChartData[];
width: number;
textPadding: number;
className?: string;
}
interface PieChartData {
category: string;
value: number;
}
export function PieChart({ width, textPadding, ...props }: PieChartProps) {
const pieWidth = width * 0.5 - textPadding;
return (
);
}
// path, arcs, pie
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);
return (
{isLabel ? `${arc.data.category}` : `${arc.data.value}%`}
);
})}
>
);
}