Some refactoring

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>
         );