Refactor PieChart

components/PieChart.module.css

@@ -6,21 +6,7 @@
   fill-opacity: 0;
 }
 
-.pieText,
-.labelText {
-  fill: var(--label);
-  font-weight: 800;
-}
-
-.pieText {
-  display: none;
-}
-
 .group:hover > .piePath {
   fill: var(--primary-accent);
   filter: drop-shadow(0px 0px calc(6rem / 16) var(--primary-accent));
 }
-
-.group:hover .pieText {
-  display: inline;
-}

components/PieChart.tsx

@@ -20,14 +20,6 @@ interface PieChartProps {
   padRadius?: number;
   /** Distance of gap in center of pie graph, in pixels. */
   innerRadius?: number;
-  /** Font size of text inside the pie, in pixels. */
-  pieTextSize?: number;
-  /** X-axis offset of the pie text, in pixels. */
-  pieTextXOffset?: number;
-  /** Y-axis offset of the pie text, in pixels. */
-  pieTextYOffset?: number;
-  /** Accessor function to get value to display as pie text from datum. */
-  getPieDisplayValueFromDatum?: (datum: PieChartData) => string;
   /** Font size of labels outside the pie, in pixels. */
   labelTextSize?: number;
   /** X-axis offset of the label text, in pixels. */
@@ -51,10 +43,6 @@ export const PieChart = withTooltip<PieChartProps>(
     labelWidth,
     padRadius = width * 0.35,
     innerRadius = width * 0.015,
-    pieTextSize = 40,
-    pieTextXOffset = 0,
-    pieTextYOffset = 10,
-    getPieDisplayValueFromDatum = (datum: PieChartData) => `${datum.value}%`,
     labelTextSize = 40,
     labelTextXOffset = 0,
     labelTextYOffset = 0,
@@ -84,7 +72,6 @@ export const PieChart = withTooltip<PieChartProps>(
             >
               {({ arcs, path }) => {
                 return arcs.map((arc) => {
-                  const [centroidX, centroidY] = path.centroid(arc);
                   const pathArc = path(arc) as string;
                   return (
                     <Group