136 lines
3.6 KiB
TypeScript
136 lines
3.6 KiB
TypeScript
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. */
|
|
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;
|
|
/** Font size of labels outside the pie, in pixels */
|
|
labelTextSize?: number;
|
|
/** X-axis offset of the pie text, in pixels */
|
|
pieTextXOffset?: number;
|
|
/** Y-axis offset of the pie text, in pixels */
|
|
pieTextYOffset?: number;
|
|
className?: string;
|
|
}
|
|
|
|
interface PieChartData {
|
|
category: string;
|
|
value: number;
|
|
}
|
|
|
|
export function PieChart({
|
|
data,
|
|
width,
|
|
labelWidth,
|
|
padRadius = width * 0.35,
|
|
innerRadius = width * 0.015,
|
|
pieTextSize = 40,
|
|
labelTextSize = 40,
|
|
pieTextXOffset = 0,
|
|
pieTextYOffset = 10,
|
|
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}
|
|
isLabel={false}
|
|
pieTextSize={pieTextSize}
|
|
labelTextSize={labelTextSize}
|
|
pieTextXOffset={pieTextXOffset}
|
|
pieTextYOffset={pieTextYOffset}
|
|
/>
|
|
)}
|
|
</Pie>
|
|
<Pie
|
|
data={data}
|
|
pieValue={(d: PieChartData) => d.value}
|
|
innerRadius={pieWidth}
|
|
outerRadius={width * 0.5}
|
|
>
|
|
{(pie) => (
|
|
<PieSlice
|
|
{...pie}
|
|
isLabel={true}
|
|
pieTextSize={pieTextSize}
|
|
labelTextSize={labelTextSize}
|
|
pieTextXOffset={pieTextXOffset}
|
|
pieTextYOffset={pieTextYOffset}
|
|
/>
|
|
)}
|
|
</Pie>
|
|
</Group>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
type PieSliceProps<PieChartData> = ProvidedProps<PieChartData> & {
|
|
isLabel: boolean;
|
|
pieTextSize: number;
|
|
labelTextSize: number;
|
|
pieTextXOffset: number;
|
|
pieTextYOffset: number;
|
|
};
|
|
|
|
export function PieSlice({
|
|
path,
|
|
arcs,
|
|
isLabel,
|
|
pieTextSize,
|
|
labelTextSize,
|
|
pieTextXOffset,
|
|
pieTextYOffset,
|
|
}: 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={isLabel ? styles.labelPath : styles.piePath}
|
|
d={pathArc}
|
|
/>
|
|
<Text
|
|
className={isLabel ? styles.labelText : styles.pieText}
|
|
x={isLabel ? centroidX : centroidX + pieTextXOffset}
|
|
y={isLabel ? centroidY : centroidY + pieTextYOffset}
|
|
textAnchor="middle"
|
|
fontSize={isLabel ? labelTextSize : pieTextSize}
|
|
>
|
|
{isLabel ? `${arc.data.category}` : `${arc.data.value}%`}
|
|
</Text>
|
|
</Group>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
}
|