From b025958cd804fb1652ebd25f961af1d8fc07d683 Mon Sep 17 00:00:00 2001
From: Jared He <66887902+jaredjhe@users.noreply.github.com>
Date: Fri, 17 Jun 2022 22:37:05 -0400
Subject: [PATCH] Add initial pie and pieslice components

---
 .vscode/settings.json          |  6 +++-
 components/PieChart.module.css |  8 +++++
 components/PieChart.tsx        | 63 ++++++++++++++++++++++++++++++++++
 data/mocks.ts                  | 15 ++++++++
 package-lock.json              |  2 +-
 package.json                   |  1 +
 pages/playground.tsx           |  9 +++++
 7 files changed, 102 insertions(+), 2 deletions(-)
 create mode 100644 components/PieChart.module.css
 create mode 100644 components/PieChart.tsx

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 02cf98f..12f41f3 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -41,7 +41,11 @@
   "files.eol": "\n",
   "[markdown]": {
     "editor.wordWrap": "on",
-    "editor.quickSuggestions": false,
+    "editor.quickSuggestions": {
+      "comments": "off",
+      "strings": "off",
+      "other": "off"
+    },
     "editor.tabSize": 4
   }
 }
diff --git a/components/PieChart.module.css b/components/PieChart.module.css
new file mode 100644
index 0000000..5c85fd3
--- /dev/null
+++ b/components/PieChart.module.css
@@ -0,0 +1,8 @@
+.path {
+  fill: #354265;
+}
+
+.path:hover {
+  fill: #EF839D;
+  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
+}
\ No newline at end of file
diff --git a/components/PieChart.tsx b/components/PieChart.tsx
new file mode 100644
index 0000000..02a2258
--- /dev/null
+++ b/components/PieChart.tsx
@@ -0,0 +1,63 @@
+import { Group } from "@visx/group";
+import Pie, { ProvidedProps } from "@visx/shape/lib/shapes/Pie";
+import React, { useState } from "react";
+
+import styles from "./PieChart.module.css";
+
+interface PieChartProps {
+  data: PieChartData[];
+  width: number;
+  height: number;
+  margin: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+  };
+  className?: string;
+}
+
+interface PieChartData {
+  category: string;
+  value: number;
+}
+
+export function PieChart(props: PieChartProps) {
+  return (
+    <svg className={props.className} width={props.width} height={props.height}>
+      <Group top={props.margin.top} left={props.margin.left}>
+        <Pie
+          data={props.data}
+          fill="aqua"
+          pieValue={(d: PieChartData) => d.value}
+          outerRadius={100}
+          cornerRadius={3}
+          padAngle={0.1}
+        >
+          {(pie) => <PieSlice {...pie} />}
+        </Pie>
+      </Group>
+    </svg>
+  );
+}
+
+// path, arcs, pie
+type PieSliceProps<PieChartData> = ProvidedProps<PieChartData>;
+
+export function PieSlice(props: PieSliceProps<PieChartData>) {
+  return props.arcs.map((arc) => {
+    const [centroidX, centroidY] = props.path.centroid(arc);
+    const pathArc = props.path(arc);
+
+    return (
+      <g key={`arc-${arc.data.category}`}>
+        <path d={pathArc} className={styles.path} />
+        <text
+          x={centroidX}
+          y={centroidY}
+          textAnchor="middle"
+        >{`${arc.data.value} %`}</text>
+      </g>
+    );
+  });
+}
diff --git a/data/mocks.ts b/data/mocks.ts
index f7e9235..7a00c54 100644
--- a/data/mocks.ts
+++ b/data/mocks.ts
@@ -35,3 +35,18 @@ export const mockCategoricalData = [
     value: 29,
   },
 ];
+
+export const mockPieData = [
+  {
+    category: "Nightingale",
+    value: 42,
+  },
+  {
+    category: "Quail",
+    value: 38,
+  },
+  {
+    category: "Cuckoo",
+    value: 19,
+  },
+];
diff --git a/package-lock.json b/package-lock.json
index a0d527f..b7fa4a0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,11 +5,11 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "cs-2022-class-profile",
       "version": "0.1.0",
       "dependencies": {
         "@visx/axis": "^2.10.0",
         "@visx/grid": "^2.10.0",
+        "@visx/group": "^2.10.0",
         "@visx/shape": "^2.10.0",
         "next": "12.1.6",
         "react": "18.1.0",
diff --git a/package.json b/package.json
index 5ac9543..da3f166 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "@visx/axis": "^2.10.0",
     "@visx/grid": "^2.10.0",
+    "@visx/group": "^2.10.0",
     "@visx/shape": "^2.10.0",
     "next": "12.1.6",
     "react": "18.1.0",
diff --git a/pages/playground.tsx b/pages/playground.tsx
index b31b37e..28a222d 100644
--- a/pages/playground.tsx
+++ b/pages/playground.tsx
@@ -1,10 +1,19 @@
+import { mockPieData } from "data/mocks";
 import React from "react";
 
+import { PieChart } from "@/components/PieChart";
+
 export default function Home() {
   return (
     <>
       <h1>Playground</h1>
       <p>Show off your components here!</p>
+      <PieChart
+        data={mockPieData}
+        width={500}
+        height={500}
+        margin={{ top: 100, left: 100, bottom: 100, right: 100 }}
+      />
     </>
   );
 }