andp97/asm-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Move components inside folders

Browse Source 
Signed-off-by: Andrea Pavone <info@andreapavone.com>
This commit is contained in:
Andrea Pavone
2024-11-10 19:06:42 +01:00
parent 0e18b53f91
commit eb0b894e1c
28 changed files with 1383 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
resources/js/Components/VulnerabilityPieChart.tsx Normal file
View File

@ -0,0 +1,78 @@
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>
</>
)
}