58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
import React from "react";
|
|
import { PieChart, Pie, Cell, ResponsiveContainer, Legend } from "recharts";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import { Box } from "@mui/material";
|
|
|
|
export interface PieData {
|
|
name: string;
|
|
value: number;
|
|
color: string;
|
|
}
|
|
|
|
interface Props {
|
|
data: PieData[];
|
|
showLabels?: boolean;
|
|
}
|
|
|
|
export function NodePieChart(props: Props) {
|
|
const theme = useTheme();
|
|
const { data, showLabels } = props;
|
|
|
|
return (
|
|
<Box height={350}>
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<PieChart>
|
|
<Pie
|
|
data={data}
|
|
innerRadius={85}
|
|
outerRadius={120}
|
|
fill={theme.palette.primary.main}
|
|
dataKey="value"
|
|
nameKey="name"
|
|
label={showLabels}
|
|
legendType="square"
|
|
cx="50%"
|
|
cy="50%"
|
|
startAngle={0}
|
|
endAngle={360}
|
|
paddingAngle={0}
|
|
labelLine={true}
|
|
hide={false}
|
|
minAngle={0}
|
|
isAnimationActive={true}
|
|
animationBegin={0}
|
|
animationDuration={1000}
|
|
animationEasing="ease-in"
|
|
blendStroke={true}
|
|
>
|
|
{data.map((entry, index) => (
|
|
<Cell key={`cell-${index}`} fill={entry.color} />
|
|
))}
|
|
</Pie>
|
|
<Legend verticalAlign="bottom" />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</Box>
|
|
);
|
|
}
|