Add initial pie and pieslice components

This commit is contained in:
Jared He 2022-06-17 22:37:05 -04:00
parent 591b885ae2
commit b025958cd8
7 changed files with 102 additions and 2 deletions

View File

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

View File

@ -0,0 +1,8 @@
.path {
fill: #354265;
}
.path:hover {
fill: #EF839D;
filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
}

63
components/PieChart.tsx Normal file
View File

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

View File

@ -35,3 +35,18 @@ export const mockCategoricalData = [
value: 29,
},
];
export const mockPieData = [
{
category: "Nightingale",
value: 42,
},
{
category: "Quail",
value: 38,
},
{
category: "Cuckoo",
value: 19,
},
];

2
package-lock.json generated
View File

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

View File

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

View File

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