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

Init commit

Browse Source 
Signed-off-by: Andrea Pavone <info@andreapavone.com>
This commit is contained in:
Andrea Pavone
2024-11-10 16:10:14 +01:00
parent b39a51c625
commit 0e18b53f91
71 changed files with 4358 additions and 2756 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
resources/js/Components/PortExposureAnalysis.tsx Normal file
View File

@ -0,0 +1,87 @@
import React from 'react';
import {Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from "recharts";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/Components/ui/card";
import { SecuritySummaryReportResultType } from "@/types/security-summary";
export default function PortExposureAnalysis({ reportData }: { reportData: SecuritySummaryReportResultType }) {
// Transform n_port data for chart
const portData = Object.entries(reportData.n_port).map(([port, data]) => ({
name: `Port ${port}`,
value: data.n
}));
return (
<Card>
<CardHeader>
<CardTitle>Port Exposure Analysis</CardTitle>
<CardDescription>Distribution of exposed ports</CardDescription>
</CardHeader>
<CardContent className="pl-2">
<div className="h-[300px]">
<ResponsiveContainer width="100%" height="100%">
<BarChart data={portData}>
<XAxis
dataKey="name"
stroke="#888888"
fontSize={12}
tickLine={false}
axisLine={false}
/>
<YAxis
stroke="#888888"
fontSize={12}
tickLine={false}
axisLine={false}
/>
<Bar
dataKey="value"
fill="currentColor"
radius={[4, 4, 0, 0]}
className="fill-primary"
/>
<Tooltip
content={({active, payload}) => {
if (active && payload && payload.length) {
return (
<div
className="rounded-lg border bg-background p-2 shadow-sm">
<div className="grid grid-cols-2 gap-2">
<div className="flex flex-col">
<span
className="text-[0.70rem] uppercase text-muted-foreground">
Port
</span>
<span className="font-bold">
{payload[0].payload.name}
</span>
</div>
<div className="flex flex-col">
<span
className="text-[0.70rem] uppercase text-muted-foreground">
Count
</span>
<span className="font-bold">
{payload[0].value}
</span>
</div>
</div>
</div>
)
}
return null
}}
/>
</BarChart>
</ResponsiveContainer>
</div>
</CardContent>
</Card>
);
}