Pie chart component (#19)

Closes #5.

To fix:

- [x] Inner pie slice text not perfectly centered

- [x] Create optional props for `padRadius` and `innerRadius`

- [x] Change colors to global colors and merge from main to get fonts

Also, outer labels can get cut off if they are long enough, but the `labelWidth` is provided as a prop for the user to adjust.

Staging url: https://j285he-pie-chart-csc-class-profile-staging-snedadah.k8s.csclub.cloud

Co-authored-by: Jared He <66887902+jaredjhe@users.noreply.github.com>
Reviewed-on: #19
Reviewed-by: Amy <a258wang@csclub.uwaterloo.ca>

components/PieChart.module.css

@@ -0,0 +1,26 @@
+.piePath {
+  fill: var(--tertiary-background);
+}
+
+.labelPath {
+  fill-opacity: 0;
+}
+
+.pieText,
+.labelText {
+  fill: var(--label);
+  font-weight: 800;
+}
+
+.pieText {
+  display: none;
+}
+
+.group:hover > .piePath {
+  fill: var(--primary-accent);
+  filter: drop-shadow(0px 0px calc(6rem / 16) var(--primary-accent));
+}
+
+.group:hover .pieText {
+  display: inline;
+}

components/PieChart.tsx

@@ -0,0 +1,180 @@
+import { Group } from "@visx/group";
+import Pie, { ProvidedProps } from "@visx/shape/lib/shapes/Pie";
+import { Text } from "@visx/text";
+import React from "react";
+
+import styles from "./PieChart.module.css";
+
+interface PieChartProps {
+  data: PieChartData[];
+  /** Width of the entire graph, including labels, in pixels. */
+  width: number;
+  /** Width of the outer ring of labels, in pixels. Label text may be cut off if specified value is too small. */
+  labelWidth: number;
+  /** Distance between pie slices, in pixels. */
+  padRadius?: number;
+  /** Distance of gap in center of pie graph, in pixels. */
+  innerRadius?: number;
+  /** Font size of text inside the pie, in pixels. */
+  pieTextSize?: 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;
+}
+
+interface PieChartData {
+  category: string;
+  value: number;
+}
+
+export function PieChart({
+  data,
+  width,
+  labelWidth,
+  padRadius = width * 0.35,
+  innerRadius = width * 0.015,
+  pieTextSize = 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;
+  return (
+    <svg className={className} width={width} height={width}>
+      <Group top={width * 0.5} left={width * 0.5}>
+        <Pie
+          data={data}
+          pieValue={(d: PieChartData) => d.value}
+          cornerRadius={10}
+          padAngle={0.075}
+          padRadius={padRadius}
+          innerRadius={innerRadius}
+          outerRadius={pieWidth}
+        >
+          {(pie) => (
+            <PieSlice
+              {...pie}
+              pieTextSize={pieTextSize}
+              pieTextXOffset={pieTextXOffset}
+              pieTextYOffset={pieTextYOffset}
+              getPieDisplayValueFromDatum={getPieDisplayValueFromDatum}
+            />
+          )}
+        </Pie>
+        <Pie
+          data={data}
+          pieValue={(d: PieChartData) => d.value}
+          innerRadius={pieWidth}
+          outerRadius={width * 0.5}
+        >
+          {(pie) => (
+            <PieSliceLabel
+              {...pie}
+              labelTextSize={labelTextSize}
+              labelTextXOffset={labelTextXOffset}
+              labelTextYOffset={labelTextYOffset}
+              getLabelDisplayValueFromDatum={getLabelDisplayValueFromDatum}
+            />
+          )}
+        </Pie>
+      </Group>
+    </svg>
+  );
+}
+
+type PieSliceProps<PieChartData> = ProvidedProps<PieChartData> & {
+  pieTextSize: number;
+  pieTextXOffset: number;
+  pieTextYOffset: number;
+  getPieDisplayValueFromDatum: (datum: PieChartData) => string;
+};
+
+export function PieSlice({
+  path,
+  arcs,
+  pieTextSize,
+  pieTextXOffset,
+  pieTextYOffset,
+  getPieDisplayValueFromDatum,
+}: PieSliceProps<PieChartData>) {
+  return (
+    <>
+      {arcs.map((arc) => {
+        const [centroidX, centroidY] = path.centroid(arc);
+        const pathArc = path(arc) as string;
+
+        return (
+          <Group className={styles.group} key={`arc-${arc.data.category}`}>
+            <path className={styles.piePath} d={pathArc} />
+            <Text
+              className={styles.pieText}
+              x={centroidX + pieTextXOffset}
+              y={centroidY + pieTextYOffset}
+              textAnchor="middle"
+              fontSize={pieTextSize}
+            >
+              {`${getPieDisplayValueFromDatum(arc.data)}`}
+            </Text>
+          </Group>
+        );
+      })}
+    </>
+  );
+}
+
+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 (
+    <>
+      {arcs.map((arc) => {
+        const [centroidX, centroidY] = path.centroid(arc);
+        const pathArc = path(arc) as string;
+
+        return (
+          <Group className={styles.group} key={`arc-${arc.data.category}`}>
+            <path className={styles.labelPath} d={pathArc} />
+            <Text
+              className={styles.labelText}
+              x={centroidX + labelTextXOffset}
+              y={centroidY + labelTextYOffset}
+              textAnchor="middle"
+              fontSize={labelTextSize}
+            >
+              {`${getLabelDisplayValueFromDatum(arc.data)}`}
+            </Text>
+          </Group>
+        );
+      })}
+    </>
+  );
+}

data/mocks.ts

@@ -36,6 +36,21 @@ export const mockCategoricalData = [
   },
 ];
 
+export const mockPieData = [
+  {
+    category: "Nightingale",
+    value: 42,
+  },
+  {
+    category: "Quail",
+    value: 48,
+  },
+  {
+    category: "Cuckoo",
+    value: 10,
+  },
+];
+
 export const moreMockCategoricalData = [
   { key: "Python", value: 29.53 },
   { key: "Java", value: 17.06 },

package-lock.json

@@ -5,7 +5,6 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "cs-2022-class-profile",
       "version": "0.1.0",
       "dependencies": {
         "@visx/axis": "^2.10.0",

pages/playground.tsx

@@ -6,9 +6,11 @@ import {
   mockBoxPlotData,
   mockQuoteData,
   mockQuoteDataLong,
+  mockPieData,
 } from "data/mocks";
 import React from "react";
 
+import { PieChart } from "@/components/PieChart";
 import { QuotationCarousel } from "@/components/QuotationCarousel";
 
 import { ColorPalette } from "../components/ColorPalette";
@@ -21,8 +23,13 @@ export default function Home() {
     <div className={styles.page}>
       <h1>Playground</h1>
       <p>Show off your components here!</p>
+      <h2>
+        <code>{"<PieChart />"}</code>
+      </h2>
+      <div style={{ padding: "30px" }}>
+        <PieChart data={mockPieData} width={800} labelWidth={215} />
+      </div>
       <ColorPalette />
-
       <h2>
         <code>{"<BarGraphHorizontal />"}</code>
       </h2>
@@ -38,7 +45,6 @@ export default function Home() {
           right: 20,
         }}
       />
-
       <h2>
         <code>{"<BarGraphVertical />"}</code>
       </h2>
@@ -58,7 +64,6 @@ export default function Home() {
           right: 20,
         }}
       />
-
       <h2>
         <code>{"<WordCloud />"}</code>
       </h2>