56 lines
1.4 KiB
JavaScript
Executable File
56 lines
1.4 KiB
JavaScript
Executable File
import { useState } from "react";
|
|
import { Pie } from "@visx/shape";
|
|
import { Group } from "@visx/group";
|
|
import { Text } from "@visx/text";
|
|
import { useColorModeValue } from "@chakra-ui/react";
|
|
|
|
const VisxPieChart = ({ data, title, width }) => {
|
|
const [active, setActive] = useState(null);
|
|
const half = width / 2;
|
|
|
|
const textColor = useColorModeValue("gray.700", "white");
|
|
|
|
return (
|
|
<svg width={width} height={width}>
|
|
<Group top={half} left={half}>
|
|
<Pie
|
|
data={data}
|
|
pieValue={(data) => data.percentage}
|
|
outerRadius={half}
|
|
innerRadius={({ data }) => {
|
|
const size = active && active.name == data.name ? 12 : 8;
|
|
return half - size;
|
|
}}
|
|
padAngle={0.01}
|
|
>
|
|
{(pie) => {
|
|
return pie.arcs.map((arc) => {
|
|
return (
|
|
<g
|
|
key={arc.data.name}
|
|
onMouseEnter={() => setActive(arc.data)}
|
|
onMouseLeave={() => setActive(null)}
|
|
>
|
|
<path d={pie.path(arc)} fill={arc.data.color}></path>
|
|
</g>
|
|
);
|
|
});
|
|
}}
|
|
</Pie>
|
|
|
|
|
|
<>
|
|
|
|
|
|
<Text textAnchor="middle" fill={textColor} fontWeight="bold" fontSize={32} dy={20}>
|
|
{title}
|
|
</Text>
|
|
</>
|
|
|
|
</Group>
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
export default VisxPieChart;
|