Refactor into PieSlice and PieSliceLabel

components/PieChart.tsx

@@ -17,12 +17,20 @@ interface PieChartProps {
   innerRadius?: number;
   /** Font size of text inside the pie, in pixels*/
   pieTextSize?: number;
-  /** Font size of labels outside the pie, in pixels */
-  labelTextSize?: 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 */
+  labelTextXOffset?: number;
+  /** Y-axis offset of the label text, in pixels */
+  labelTextYOffset?: number;
+  /** Accessor function to get value to display as label text from datum */
+  getLabelDisplayValueFromDatum?: (datum: PieChartData) => string;
   className?: string;
 }
 
@@ -38,9 +46,13 @@ export function PieChart({
   padRadius = width * 0.35,
   innerRadius = width * 0.015,
   pieTextSize = 40,
-  labelTextSize = 40,
   pieTextXOffset = 0,
   pieTextYOffset = 10,
+  getPieDisplayValueFromDatum = (datum: PieChartData) => `${datum.value}%`,
+  labelTextSize = 40,
+  labelTextXOffset = 0,
+  labelTextYOffset = 0,
+  getLabelDisplayValueFromDatum = (datum: PieChartData) => `${datum.category}`,
   className,
 }: PieChartProps) {
   const pieWidth = width * 0.5 - labelWidth;
@@ -62,6 +74,7 @@ export function PieChart({
               pieTextSize={pieTextSize}
               pieTextXOffset={pieTextXOffset}
               pieTextYOffset={pieTextYOffset}
+              getPieDisplayValueFromDatum={getPieDisplayValueFromDatum}
             />
           )}
         </Pie>
@@ -71,7 +84,15 @@ export function PieChart({
           innerRadius={pieWidth}
           outerRadius={width * 0.5}
         >
-          {(pie) => <PieSliceLabel {...pie} labelTextSize={labelTextSize} />}
+          {(pie) => (
+            <PieSliceLabel
+              {...pie}
+              labelTextSize={labelTextSize}
+              labelTextXOffset={labelTextXOffset}
+              labelTextYOffset={labelTextYOffset}
+              getLabelDisplayValueFromDatum={getLabelDisplayValueFromDatum}
+            />
+          )}
         </Pie>
       </Group>
     </svg>
@@ -82,6 +103,7 @@ type PieSliceProps<PieChartData> = ProvidedProps<PieChartData> & {
   pieTextSize: number;
   pieTextXOffset: number;
   pieTextYOffset: number;
+  getPieDisplayValueFromDatum: (datum: PieChartData) => string;
 };
 
 export function PieSlice({
@@ -90,6 +112,7 @@ export function PieSlice({
   pieTextSize,
   pieTextXOffset,
   pieTextYOffset,
+  getPieDisplayValueFromDatum,
 }: PieSliceProps<PieChartData>) {
   return (
     <>
@@ -107,7 +130,7 @@ export function PieSlice({
               textAnchor="middle"
               fontSize={pieTextSize}
             >
-              {`${arc.data.value}%`}
+              {`${getPieDisplayValueFromDatum(arc.data)}`}
             </Text>
           </Group>
         );
@@ -118,12 +141,18 @@ export function PieSlice({
 
 type PieSliceLabelProps<PieChartData> = ProvidedProps<PieChartData> & {
   labelTextSize: number;
+  labelTextXOffset: number;
+  labelTextYOffset: number;
+  getLabelDisplayValueFromDatum: (datum: PieChartData) => string;
 };
 
 export function PieSliceLabel({
   path,
   arcs,
   labelTextSize,
+  labelTextXOffset,
+  labelTextYOffset,
+  getLabelDisplayValueFromDatum,
 }: PieSliceLabelProps<PieChartData>) {
   return (
     <>
@@ -136,12 +165,12 @@ export function PieSliceLabel({
             <path className={styles.labelPath} d={pathArc} />
             <Text
               className={styles.labelText}
-              x={centroidX}
+              x={centroidX + labelTextXOffset}
-              y={centroidY}
+              y={centroidY + labelTextYOffset}
               textAnchor="middle"
               fontSize={labelTextSize}
             >
-              {`${arc.data.category}`}
+              {`${getLabelDisplayValueFromDatum(arc.data)}`}
             </Text>
           </Group>
         );