Add initial pie and pieslice components
This commit is contained in:
parent
591b885ae2
commit
b025958cd8
|
@ -41,7 +41,11 @@
|
||||||
"files.eol": "\n",
|
"files.eol": "\n",
|
||||||
"[markdown]": {
|
"[markdown]": {
|
||||||
"editor.wordWrap": "on",
|
"editor.wordWrap": "on",
|
||||||
"editor.quickSuggestions": false,
|
"editor.quickSuggestions": {
|
||||||
|
"comments": "off",
|
||||||
|
"strings": "off",
|
||||||
|
"other": "off"
|
||||||
|
},
|
||||||
"editor.tabSize": 4
|
"editor.tabSize": 4
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,8 @@
|
||||||
|
.path {
|
||||||
|
fill: #354265;
|
||||||
|
}
|
||||||
|
|
||||||
|
.path:hover {
|
||||||
|
fill: #EF839D;
|
||||||
|
filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
|
||||||
|
}
|
|
@ -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>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
|
@ -35,3 +35,18 @@ export const mockCategoricalData = [
|
||||||
value: 29,
|
value: 29,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
export const mockPieData = [
|
||||||
|
{
|
||||||
|
category: "Nightingale",
|
||||||
|
value: 42,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: "Quail",
|
||||||
|
value: 38,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: "Cuckoo",
|
||||||
|
value: 19,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
|
@ -5,11 +5,11 @@
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "cs-2022-class-profile",
|
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@visx/axis": "^2.10.0",
|
"@visx/axis": "^2.10.0",
|
||||||
"@visx/grid": "^2.10.0",
|
"@visx/grid": "^2.10.0",
|
||||||
|
"@visx/group": "^2.10.0",
|
||||||
"@visx/shape": "^2.10.0",
|
"@visx/shape": "^2.10.0",
|
||||||
"next": "12.1.6",
|
"next": "12.1.6",
|
||||||
"react": "18.1.0",
|
"react": "18.1.0",
|
||||||
|
|
|
@ -17,6 +17,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@visx/axis": "^2.10.0",
|
"@visx/axis": "^2.10.0",
|
||||||
"@visx/grid": "^2.10.0",
|
"@visx/grid": "^2.10.0",
|
||||||
|
"@visx/group": "^2.10.0",
|
||||||
"@visx/shape": "^2.10.0",
|
"@visx/shape": "^2.10.0",
|
||||||
"next": "12.1.6",
|
"next": "12.1.6",
|
||||||
"react": "18.1.0",
|
"react": "18.1.0",
|
||||||
|
|
|
@ -1,10 +1,19 @@
|
||||||
|
import { mockPieData } from "data/mocks";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
|
import { PieChart } from "@/components/PieChart";
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h1>Playground</h1>
|
<h1>Playground</h1>
|
||||||
<p>Show off your components here!</p>
|
<p>Show off your components here!</p>
|
||||||
|
<PieChart
|
||||||
|
data={mockPieData}
|
||||||
|
width={500}
|
||||||
|
height={500}
|
||||||
|
margin={{ top: 100, left: 100, bottom: 100, right: 100 }}
|
||||||
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue