90 lines
4.4 KiB
TypeScript
90 lines
4.4 KiB
TypeScript
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 ServicesPortExposureCard({ reportData }: { reportData: SecuritySummaryReportResultType }) {
|
|
|
|
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
|
|
cursor={{
|
|
fill: 'rgba(0, 0, 0, 0.1)',
|
|
}}
|
|
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>
|
|
);
|
|
}
|