Cleanup

components/PieChart.module.css

@@ -9,9 +9,8 @@
 .pieText,
 .labelText {
   fill: white;
-  font-size: 20px;
+  font-size: 40px;
   font-weight: 800;
-  font-family: "Inconsolata", "sans-serif";
 }
 
 .pieText {

components/PieChart.tsx

@@ -1,7 +1,6 @@
 import { Group } from "@visx/group";
-import { Arc } from "@visx/shape";
 import Pie, { ProvidedProps } from "@visx/shape/lib/shapes/Pie";
-import React, { useState } from "react";
+import React from "react";
 
 import styles from "./PieChart.module.css";
 
@@ -28,8 +27,8 @@ export function PieChart({ width, textPadding, ...props }: PieChartProps) {
           pieValue={(d: PieChartData) => d.value}
           cornerRadius={10}
           padAngle={0.075}
-          padRadius={width * 0.7}
-          innerRadius={width * 0.03}
+          padRadius={width * 0.35}
+          innerRadius={width * 0.015}
           outerRadius={pieWidth}
         >
           {(pie) => <PieSlices {...pie} isLabel={false} />}
@@ -58,7 +57,7 @@ export function PieSlices({ isLabel, ...props }: PieSlicesProps<PieChartData>) {
     <>
       {props.arcs.map((arc) => {
         const [centroidX, centroidY] = props.path.centroid(arc);
-        const pathArc = props.path(arc);
+        const pathArc = props.path(arc) as string;
 
         return (
           <g className={styles.group} key={`arc-${arc.data.category}`}>

data/mocks.ts

@@ -47,6 +47,6 @@ export const mockPieData = [
   },
   {
     category: "Cuckoo",
-    value: 19,
+    value: 20,
   },
 ];

pages/playground.tsx

@@ -9,7 +9,7 @@ export default function Home() {
       <h1>Playground</h1>
       <p>Show off your components here!</p>
       <div style={{ padding: "30px" }}>
-        <PieChart data={mockPieData} width={600} textPadding={100} />
+        <PieChart data={mockPieData} width={800} textPadding={200} />
       </div>
     </>
   );