From 29fdbffab185a6518fbe02031b7e7d5df127ac3b Mon Sep 17 00:00:00 2001 From: Jared He <66887902+jaredjhe@users.noreply.github.com> Date: Wed, 31 Aug 2022 19:50:22 -0400 Subject: [PATCH] Some refactoring --- components/PieChart.tsx | 66 +++++++++++++++++++++++++---------------- 1 file changed, 41 insertions(+), 25 deletions(-) diff --git a/components/PieChart.tsx b/components/PieChart.tsx index d860115..7df31ee 100644 --- a/components/PieChart.tsx +++ b/components/PieChart.tsx @@ -59,9 +59,7 @@ export function PieChart({ {(pie) => ( @@ -73,16 +71,7 @@ export function PieChart({ innerRadius={pieWidth} outerRadius={width * 0.5} > - {(pie) => ( - - )} + {(pie) => } @@ -90,9 +79,7 @@ export function PieChart({ } type PieSliceProps = ProvidedProps & { - isLabel: boolean; pieTextSize: number; - labelTextSize: number; pieTextXOffset: number; pieTextYOffset: number; }; @@ -100,9 +87,7 @@ type PieSliceProps = ProvidedProps & { export function PieSlice({ path, arcs, - isLabel, pieTextSize, - labelTextSize, pieTextXOffset, pieTextYOffset, }: PieSliceProps) { @@ -114,18 +99,49 @@ export function PieSlice({ return ( - + - {isLabel ? `${arc.data.category}` : `${arc.data.value}%`} + {`${arc.data.value}%`} + + + ); + })} + + ); +} + +type PieSliceLabelProps = ProvidedProps & { + labelTextSize: number; +}; + +export function PieSliceLabel({ + path, + arcs, + labelTextSize, +}: PieSliceLabelProps) { + return ( + <> + {arcs.map((arc) => { + const [centroidX, centroidY] = path.centroid(arc); + const pathArc = path(arc) as string; + + return ( + + + + {`${arc.data.category}`} );