You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
1.5 KiB
48 lines
1.5 KiB
import React from "react";
|
|
import {
|
|
PieChart as PC,
|
|
Pie,
|
|
Legend,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
Cell,
|
|
} from "recharts";
|
|
import { ChartProps } from "../types";
|
|
|
|
const colors = ["#82ca9d", "#8884d8"];
|
|
|
|
export default function PieChart(props: ChartProps) {
|
|
return (
|
|
<ResponsiveContainer height={300}>
|
|
<PC width={600} height={300}>
|
|
<Pie
|
|
dataKey="value"
|
|
data={Object.keys(
|
|
props.data[props.data.length - 1].values
|
|
).map((k) => ({
|
|
name: k,
|
|
value: props.data[props.data.length - 1].values[k],
|
|
}))}
|
|
innerRadius={40}
|
|
outerRadius={80}
|
|
fill="#82ca9d"
|
|
label
|
|
>
|
|
{Object.keys(props.data[props.data.length - 1].values)
|
|
.map((k) => ({
|
|
name: k,
|
|
value: props.data[props.data.length - 1].values[k],
|
|
}))
|
|
.map((entry, index) => (
|
|
<Cell
|
|
key={`cell-${index}`}
|
|
fill={colors[index % colors.length]}
|
|
/>
|
|
))}
|
|
</Pie>
|
|
<Tooltip />
|
|
<Legend />
|
|
</PC>
|
|
</ResponsiveContainer>
|
|
);
|
|
}
|
|
|