Prasoon

securenet-ui/index.html

@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/jpeg" href="/logo.jpg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>securenet-ui</title>
+    <title>SecureNet IDS</title>
   </head>
   <body>
     <div id="root"></div>

securenet-ui/src/components/Charts/LineChart.css

@@ -1,76 +1,15 @@
-.line-chart-container {
+.line-chart-wrapper {
   position: relative;
   width: 100%;
-  padding: 20px;
-  background: var(--card-bg);
-  backdrop-filter: var(--glass-blur);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  height: 100%;
+  min-height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   overflow: hidden;
 }
 
-.line-chart-container::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(135deg, rgba(0, 245, 255, 0.05), transparent);
-  pointer-events: none;
-  z-index: 1;
-}
-
-.line-chart-container canvas {
-  filter: drop-shadow(0 0 20px rgba(0, 245, 255, 0.6));
-  position: relative;
-  z-index: 2;
-  transition: all var(--transition-normal);
-  animation: chartGlow 3s ease-in-out infinite alternate;
-}
-
-@keyframes chartGlow {
-  0% {
-    filter: drop-shadow(0 0 20px rgba(0, 245, 255, 0.6));
-  }
-  100% {
-    filter: drop-shadow(0 0 30px rgba(0, 245, 255, 0.8));
-  }
-}
-
-.line-chart-container:hover canvas {
-  filter: drop-shadow(0 0 25px rgba(0, 245, 255, 0.5));
-  transform: translateY(-2px);
-}
-
-/* Neon glow effect on hover */
-.line-chart-container:hover {
-  border-color: var(--accent);
-  box-shadow: 0 8px 32px rgba(0, 245, 255, 0.2), 0 0 20px rgba(0, 245, 255, 0.1);
-}
-
-/* Animation for data updates */
-.line-chart-container.updating {
-  animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.8;
-  }
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-  .line-chart-container {
-    padding: 15px;
-  }
-
-  .line-chart-container canvas {
-    max-height: 250px !important;
-  }
+.line-chart-wrapper canvas {
+  max-width: 100% !important;
+  max-height: 100% !important;
 }

securenet-ui/src/components/Charts/LineChart.jsx

@@ -8,8 +8,10 @@ import {
   LineElement,
   Title,
   Tooltip,
-  Legend
+  Legend,
+  Filler
 } from "chart.js";
+import "./LineChart.css";
 
 ChartJS.register(
   CategoryScale,
@@ -18,49 +20,161 @@ ChartJS.register(
   LineElement,
   Title,
   Tooltip,
-  Legend
+  Legend,
+  Filler
 );
 
-function LineChart() {
-  const data = {
-    labels: ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00"],
-    datasets: [
-      {
-        label: "Network Traffic",
-        data: [120, 150, 180, 220, 190, 160],
-        backgroundColor: "rgba(0,245,255,0.2)",
-        borderColor: "#00f5ff",
-        borderWidth: 2,
-        tension: 0.4
-      }
-    ]
-  };
+const DEFAULT_LABELS = ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00"];
+
+function LineChart({ data, title, height = "100%", options: customOptions }) {
+  let chartData;
 
-  const options = {
+  if (data && data.incoming && data.outgoing) {
+    // Format: { incoming: { labels, values }, outgoing: { labels, values } }
+    chartData = {
+      labels: data.incoming.labels || DEFAULT_LABELS,
+      datasets: [
+        {
+          label: "Incoming Traffic (Mbps)",
+          data: data.incoming.values || [120, 150, 180, 220, 190, 160],
+          borderColor: "#00f5ff",
+          backgroundColor: "rgba(0, 245, 255, 0.12)",
+          fill: true,
+          tension: 0.4,
+          borderWidth: 2,
+          pointRadius: 4,
+          pointHoverRadius: 6,
+          pointBackgroundColor: "#00f5ff",
+          pointBorderColor: "#0f172a"
+        },
+        {
+          label: "Outgoing Traffic (Mbps)",
+          data: data.outgoing.values || [80, 120, 140, 180, 160, 130],
+          borderColor: "#10b981",
+          backgroundColor: "rgba(16, 185, 129, 0.12)",
+          fill: true,
+          tension: 0.4,
+          borderWidth: 2,
+          pointRadius: 4,
+          pointHoverRadius: 6,
+          pointBackgroundColor: "#10b981",
+          pointBorderColor: "#0f172a"
+        }
+      ]
+    };
+  } else if (data && data.labels && data.datasets) {
+    chartData = data;
+  } else if (data && data.labels && data.values) {
+    chartData = {
+      labels: data.labels,
+      datasets: [
+        {
+          label: title || "Network Traffic (Mbps)",
+          data: data.values,
+          borderColor: "#00f5ff",
+          backgroundColor: "rgba(0, 245, 255, 0.15)",
+          fill: true,
+          tension: 0.4,
+          borderWidth: 2,
+          pointRadius: 4,
+          pointHoverRadius: 6,
+          pointBackgroundColor: "#00f5ff",
+          pointBorderColor: "#0f172a"
+        }
+      ]
+    };
+  } else {
+    // Default fallback dataset with dual traffic flow
+    chartData = {
+      labels: DEFAULT_LABELS,
+      datasets: [
+        {
+          label: "Incoming Traffic (Mbps)",
+          data: [120, 150, 180, 220, 190, 160],
+          borderColor: "#00f5ff",
+          backgroundColor: "rgba(0, 245, 255, 0.12)",
+          fill: true,
+          tension: 0.4,
+          borderWidth: 2,
+          pointRadius: 4,
+          pointHoverRadius: 6,
+          pointBackgroundColor: "#00f5ff",
+          pointBorderColor: "#0f172a"
+        },
+        {
+          label: "Outgoing Traffic (Mbps)",
+          data: [80, 120, 140, 180, 160, 130],
+          borderColor: "#10b981",
+          backgroundColor: "rgba(16, 185, 129, 0.12)",
+          fill: true,
+          tension: 0.4,
+          borderWidth: 2,
+          pointRadius: 4,
+          pointHoverRadius: 6,
+          pointBackgroundColor: "#10b981",
+          pointBorderColor: "#0f172a"
+        }
+      ]
+    };
+  }
+
+  const defaultOptions = {
     responsive: true,
     maintainAspectRatio: false,
     plugins: {
       legend: {
+        position: "top",
+        align: "end",
         labels: {
-          color: "#ffffff"
+          color: "#94a3b8",
+          padding: 12,
+          font: {
+            size: 11,
+            family: "Inter, system-ui, sans-serif",
+            weight: "600"
+          },
+          usePointStyle: true,
+          pointStyle: "circle"
         }
+      },
+      tooltip: {
+        backgroundColor: "rgba(15, 23, 42, 0.95)",
+        titleColor: "#f8fafc",
+        bodyColor: "#cbd5e1",
+        borderColor: "rgba(0, 245, 255, 0.3)",
+        borderWidth: 1,
+        padding: 10,
+        boxPadding: 6,
+        usePointStyle: true
       }
     },
     scales: {
       x: {
-        ticks: { color: "#8b9bb4" },
-        grid: { color: "rgba(255,255,255,0.05)" }
+        ticks: {
+          color: "#64748b",
+          font: { size: 11, family: "Inter, system-ui, sans-serif" }
+        },
+        grid: {
+          color: "rgba(255, 255, 255, 0.04)"
+        }
       },
       y: {
-        ticks: { color: "#8b9bb4" },
-        grid: { color: "rgba(255,255,255,0.05)" }
+        ticks: {
+          color: "#64748b",
+          font: { size: 11, family: "Inter, system-ui, sans-serif" },
+          callback: (value) => `${value} Mbps`
+        },
+        grid: {
+          color: "rgba(255, 255, 255, 0.04)"
+        }
       }
-    }
+    },
+    ...customOptions
   };
 
   return (
-    <div className="chart-container">
-      <Line data={data} options={options} key="line-static" />
+    <div className="line-chart-wrapper" style={{ width: "100%", height: height, position: "relative" }}>
+      <Line data={chartData} options={defaultOptions} />
     </div>
   );
 }