79 lines
3.3 KiB
TypeScript
79 lines
3.3 KiB
TypeScript
import {SecuritySummaryReportResultType} from "@/types/security-summary";
|
|
import {Label, Pie, PieChart, Sector} from "recharts";
|
|
import {PieSectorDataItem} from "recharts/types/polar/Pie";
|
|
import React from "react";
|
|
|
|
type ChartData = {
|
|
name: string,
|
|
value: number,
|
|
fill: string
|
|
}
|
|
export default function VulnerabilityPieChart({
|
|
vulnerabilityData, activeIndex
|
|
}: {
|
|
vulnerabilityData: ChartData[],
|
|
activeIndex: number
|
|
}) {
|
|
return (
|
|
<>
|
|
<div className="mx-auto aspect-square w-full max-w-[400px]">
|
|
<PieChart width={400} height={400}>
|
|
<Pie
|
|
data={vulnerabilityData}
|
|
dataKey="value"
|
|
nameKey="name"
|
|
cx="50%"
|
|
cy="50%"
|
|
innerRadius={60}
|
|
outerRadius={80}
|
|
activeIndex={activeIndex}
|
|
activeShape={({
|
|
outerRadius = 0,
|
|
...props
|
|
}: PieSectorDataItem) => (
|
|
<g>
|
|
<Sector {...props} outerRadius={outerRadius + 10}/>
|
|
<Sector
|
|
{...props}
|
|
outerRadius={outerRadius + 25}
|
|
innerRadius={outerRadius + 12}
|
|
/>
|
|
</g>
|
|
)}
|
|
>
|
|
<Label
|
|
content={({viewBox}) => {
|
|
if (viewBox && "cx" in viewBox && "cy" in viewBox) {
|
|
return (
|
|
<text
|
|
x={viewBox.cx}
|
|
y={viewBox.cy}
|
|
textAnchor="middle"
|
|
dominantBaseline="middle"
|
|
>
|
|
<tspan
|
|
x={viewBox.cx}
|
|
y={viewBox.cy}
|
|
className="fill-foreground text-3xl font-bold"
|
|
>
|
|
{vulnerabilityData[activeIndex].value}
|
|
</tspan>
|
|
<tspan
|
|
x={viewBox.cx}
|
|
y={(viewBox.cy || 0) + 24}
|
|
className="fill-muted-foreground text-sm"
|
|
>
|
|
{vulnerabilityData[activeIndex].name}
|
|
</tspan>
|
|
</text>
|
|
)
|
|
}
|
|
}}
|
|
/>
|
|
</Pie>
|
|
</PieChart>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|