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) => (
             <PieSlice
               {...pie}
-              isLabel={false}
               pieTextSize={pieTextSize}
-              labelTextSize={labelTextSize}
               pieTextXOffset={pieTextXOffset}
               pieTextYOffset={pieTextYOffset}
             />
@@ -73,16 +71,7 @@ export function PieChart({
           innerRadius={pieWidth}
           outerRadius={width * 0.5}
         >
-          {(pie) => (
-            <PieSlice
-              {...pie}
-              isLabel={true}
-              pieTextSize={pieTextSize}
-              labelTextSize={labelTextSize}
-              pieTextXOffset={pieTextXOffset}
-              pieTextYOffset={pieTextYOffset}
-            />
-          )}
+          {(pie) => <PieSliceLabel {...pie} labelTextSize={labelTextSize} />}
         </Pie>
       </Group>
     </svg>
@@ -90,9 +79,7 @@ export function PieChart({
 }
 
 type PieSliceProps<PieChartData> = ProvidedProps<PieChartData> & {
-  isLabel: boolean;
   pieTextSize: number;
-  labelTextSize: number;
   pieTextXOffset: number;
   pieTextYOffset: number;
 };
@@ -100,9 +87,7 @@ type PieSliceProps<PieChartData> = ProvidedProps<PieChartData> & {
 export function PieSlice({
   path,
   arcs,
-  isLabel,
   pieTextSize,
-  labelTextSize,
   pieTextXOffset,
   pieTextYOffset,
 }: PieSliceProps<PieChartData>) {
@@ -114,18 +99,49 @@ export function PieSlice({
 
         return (
           <Group className={styles.group} key={`arc-${arc.data.category}`}>
-            <path
-              className={isLabel ? styles.labelPath : styles.piePath}
-              d={pathArc}
-            />
+            <path className={styles.piePath} d={pathArc} />
             <Text
-              className={isLabel ? styles.labelText : styles.pieText}
-              x={isLabel ? centroidX : centroidX + pieTextXOffset}
-              y={isLabel ? centroidY : centroidY + pieTextYOffset}
+              className={styles.pieText}
+              x={centroidX + pieTextXOffset}
+              y={centroidY + pieTextYOffset}
               textAnchor="middle"
-              fontSize={isLabel ? labelTextSize : pieTextSize}
+              fontSize={pieTextSize}
             >
-              {isLabel ? `${arc.data.category}` : `${arc.data.value}%`}
+              {`${arc.data.value}%`}
+            </Text>
+          </Group>
+        );
+      })}
+    </>
+  );
+}
+
+type PieSliceLabelProps<PieChartData> = ProvidedProps<PieChartData> & {
+  labelTextSize: number;
+};
+
+export function PieSliceLabel({
+  path,
+  arcs,
+  labelTextSize,
+}: PieSliceLabelProps<PieChartData>) {
+  return (
+    <>
+      {arcs.map((arc) => {
+        const [centroidX, centroidY] = path.centroid(arc);
+        const pathArc = path(arc) as string;
+
+        return (
+          <Group className={styles.group} key={`arc-${arc.data.category}`}>
+            <path className={styles.labelPath} d={pathArc} />
+            <Text
+              className={styles.labelText}
+              x={centroidX}
+              y={centroidY}
+              textAnchor="middle"
+              fontSize={labelTextSize}
+            >
+              {`${arc.data.category}`}
             </Text>
           </Group>
         );