63 lines
1.6 KiB
JavaScript
63 lines
1.6 KiB
JavaScript
import React from "react";
|
|
|
|
const CircularDiagram = ({ segments }) => {
|
|
const radius = 70; // Radius of the circle
|
|
const strokeWidth = 20; // Width of each portion
|
|
const circumference = 2 * Math.PI * (radius - strokeWidth / 2);
|
|
|
|
let startOffset = -63; // Initial offset for each segment
|
|
|
|
const svgStyles = {
|
|
display: "block",
|
|
margin: "0 auto",
|
|
};
|
|
console.log(segments)
|
|
return (
|
|
<svg
|
|
width={radius * 2}
|
|
height={radius * 2}
|
|
viewBox={`0 0 ${radius * 2} ${radius * 2}`}
|
|
style={svgStyles}
|
|
>
|
|
<circle
|
|
cx={radius}
|
|
cy={radius}
|
|
r={radius - strokeWidth / 2}
|
|
stroke="#eee"
|
|
strokeWidth={strokeWidth}
|
|
fill="none"
|
|
/>
|
|
{segments.map((segment, index) => {
|
|
const { percentage, color } = segment;
|
|
console.log(percentage)
|
|
let p = percentage;
|
|
if(p == 'Infinity' || isNaN(p)) p = 0;
|
|
const segmentLength = (circumference * p) / 100;
|
|
const strokeDashoffset = circumference - startOffset;
|
|
|
|
startOffset += segmentLength;
|
|
|
|
return (
|
|
<circle
|
|
key={index}
|
|
cx={radius}
|
|
cy={radius}
|
|
r={radius - strokeWidth / 2}
|
|
stroke={color}
|
|
strokeWidth={strokeWidth}
|
|
fill="none"
|
|
strokeDasharray={`${segmentLength} ${
|
|
circumference - segmentLength
|
|
}`}
|
|
strokeDashoffset={strokeDashoffset}
|
|
strokeLinecap="round" // Rounds the edges of each segment
|
|
transform={`rotate(-90 ${radius} ${radius})`}
|
|
/>
|
|
);
|
|
})}
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
export default CircularDiagram;
|