83 lines
2.2 KiB
TypeScript
83 lines
2.2 KiB
TypeScript
import { Group } from "@visx/group";
|
|
import { Arc } from "@visx/shape";
|
|
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;
|
|
textPadding: number;
|
|
className?: string;
|
|
}
|
|
|
|
interface PieChartData {
|
|
category: string;
|
|
value: number;
|
|
}
|
|
|
|
export function PieChart({ width, textPadding, ...props }: PieChartProps) {
|
|
const pieWidth = width * 0.5 - textPadding;
|
|
return (
|
|
<svg className={props.className} width={width} height={width}>
|
|
<Group top={width * 0.5} left={width * 0.5}>
|
|
<Pie
|
|
data={props.data}
|
|
fill="aqua"
|
|
pieValue={(d: PieChartData) => d.value}
|
|
cornerRadius={10}
|
|
padAngle={0.075}
|
|
padRadius={width * 0.7}
|
|
innerRadius={width * 0.03}
|
|
outerRadius={pieWidth}
|
|
>
|
|
{(pie) => <PieSlices {...pie} isLabel={false} />}
|
|
</Pie>
|
|
<Pie
|
|
data={props.data}
|
|
fill="rgb(37, 45, 65)"
|
|
pieValue={(d: PieChartData) => d.value}
|
|
innerRadius={pieWidth}
|
|
outerRadius={width * 0.5}
|
|
>
|
|
{(pie) => <PieSlices {...pie} isLabel={true} />}
|
|
</Pie>
|
|
</Group>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
// path, arcs, pie
|
|
type PieSlicesProps<PieChartData> = ProvidedProps<PieChartData> & {
|
|
isLabel: boolean;
|
|
};
|
|
|
|
export function PieSlices({ isLabel, ...props }: PieSlicesProps<PieChartData>) {
|
|
return (
|
|
<>
|
|
{props.arcs.map((arc) => {
|
|
const [centroidX, centroidY] = props.path.centroid(arc);
|
|
const pathArc = props.path(arc);
|
|
|
|
return (
|
|
<g className={styles.group} key={`arc-${arc.data.category}`}>
|
|
<path
|
|
className={isLabel ? styles.labelPath : styles.piePath}
|
|
d={pathArc}
|
|
/>
|
|
<text
|
|
className={isLabel ? styles.labelText : styles.pieText}
|
|
x={centroidX}
|
|
y={centroidY}
|
|
textAnchor="middle"
|
|
>
|
|
{isLabel ? `${arc.data.category}` : `${arc.data.value}%`}
|
|
</text>
|
|
</g>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
}
|