From dfa31a0bd79a814bcc63ca9042f60930534e4ebf Mon Sep 17 00:00:00 2001
From: Jared He <66887902+jaredjhe@users.noreply.github.com>
Date: Sat, 18 Jun 2022 22:50:08 -0400
Subject: [PATCH] Cleanup

---
 components/PieChart.module.css | 3 +--
 components/PieChart.tsx        | 9 ++++-----
 data/mocks.ts                  | 2 +-
 pages/playground.tsx           | 2 +-
 4 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/components/PieChart.module.css b/components/PieChart.module.css
index 15e569a..dddf23b 100644
--- a/components/PieChart.module.css
+++ b/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 {
diff --git a/components/PieChart.tsx b/components/PieChart.tsx
index 91225d5..41df69c 100644
--- a/components/PieChart.tsx
+++ b/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}`}>
diff --git a/data/mocks.ts b/data/mocks.ts
index 7a00c54..5b9827e 100644
--- a/data/mocks.ts
+++ b/data/mocks.ts
@@ -47,6 +47,6 @@ export const mockPieData = [
   },
   {
     category: "Cuckoo",
-    value: 19,
+    value: 20,
   },
 ];
diff --git a/pages/playground.tsx b/pages/playground.tsx
index e2b7201..897013b 100644
--- a/pages/playground.tsx
+++ b/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>
     </>
   );