Add initial pie and pieslice components

.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
   }
 }

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));
+}

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>
+    );
+  });
+}

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,
+  },
+];

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",

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",

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 }}
+      />
     </>
   );
 }