From 8da5667b456482d4abbd03761c0b334fadac466c Mon Sep 17 00:00:00 2001
From: homosapiendream <wzdny41@gmail.com>
Date: Tue, 29 Oct 2024 18:04:19 -0400
Subject: [PATCH 1/3] feat: add anomoly chart with dummy data

---
 client/src/components/charts/AnomalyChart.tsx | 65 +++++++++++++++++++
 client/src/pages/Home.tsx                     | 29 +++++++--
 2 files changed, 90 insertions(+), 4 deletions(-)
 create mode 100644 client/src/components/charts/AnomalyChart.tsx

diff --git a/client/src/components/charts/AnomalyChart.tsx b/client/src/components/charts/AnomalyChart.tsx
new file mode 100644
index 0000000..ee5d7ab
--- /dev/null
+++ b/client/src/components/charts/AnomalyChart.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import {
+  ScatterChart,
+  Scatter,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+  ScatterProps,
+} from 'recharts';
+
+interface DataPoint {
+  timestamp: string;
+  count: number;
+}
+
+const dummyData: DataPoint[] = [
+  { timestamp: '2024-10-29T09:00:00Z', count: 30 },
+  { timestamp: '2024-10-29T09:10:00Z', count: 25 },
+  { timestamp: '2024-10-29T09:20:00Z', count: 80 },
+  { timestamp: '2024-10-29T09:30:00Z', count: 40 },
+  { timestamp: '2024-10-29T09:40:00Z', count: 50 },
+  { timestamp: '2024-10-29T09:50:00Z', count: 90 },
+  { timestamp: '2024-10-29T10:00:00Z', count: 45 },
+];
+
+const isAnomaly = (count: number): boolean => count > 70; // Define a threshold for anomalies
+
+const AnomalyChart: React.FC = () => {
+  return (
+    <ResponsiveContainer width="100%" height={300}>
+      <ScatterChart margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis
+          dataKey="timestamp"
+          name="Time"
+          tickFormatter={(time: string) => new Date(time).toLocaleTimeString()}
+        />
+        <YAxis dataKey="count" name="Event Count" />
+        <Tooltip cursor={{ strokeDasharray: '3 3' }} />
+        <Legend />
+        <Scatter
+          name="Event Counts"
+          data={dummyData}
+          fill="#8884d8"
+          shape="circle"
+        >
+          {dummyData.map((entry, index) => (
+            <circle
+              key={`dot-${index}`}
+              cx={entry.cx}
+              cy={entry.cy}
+              r={isAnomaly(entry.count) ? 8 : 4}
+              fill={isAnomaly(entry.count) ? '#FF0000' : '#0088FE'}
+            />
+          ))}
+        </Scatter>
+      </ScatterChart>
+    </ResponsiveContainer>
+  );
+};
+
+export default AnomalyChart;
diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
index b3c4f4e..4d58a2d 100644
--- a/client/src/pages/Home.tsx
+++ b/client/src/pages/Home.tsx
@@ -1,22 +1,38 @@
 import React, { lazy, useState } from 'react';
-import { DragDropContext, Droppable, Draggable, DropResult } from '@hello-pangea/dnd';
+import {
+  DragDropContext,
+  Droppable,
+  Draggable,
+  DropResult,
+} from '@hello-pangea/dnd';
 import { CardState } from '../types';
 
 const Card = lazy(() => import('../components/Card'));
-const UserActivityChart = lazy(() => import('../components/charts/UserActivity'));
+const UserActivityChart = lazy(
+  () => import('../components/charts/UserActivity')
+);
 const HeatMap = lazy(() => import('../components/charts/HeatMap'));
 const IpAccessCombined = lazy(() => import('../components/IpAccessCombined'));
 const EventTypeChart = lazy(() => import('../components/charts/EventType'));
 const EventSourceChart = lazy(() => import('../components/charts/EventSource'));
+const AnomalyChart = lazy(() => import('../components/charts/AnomalyChart'));
 
 const Home: React.FC<{ isDarkMode: boolean }> = ({ isDarkMode }) => {
   // State to track the current IP (null means no IP selected)
   const [currentIp, setCurrentIp] = useState<string | undefined>();
 
   const [cards, setCards] = useState<CardState[]>([
-    { id: 'userActivity', title: 'User Activity', component: <UserActivityChart  /> },
+    {
+      id: 'userActivity',
+      title: 'User Activity',
+      component: <UserActivityChart />,
+    },
     { id: 'eventTypes', title: 'Event Types', component: <EventTypeChart /> },
-    { id: 'eventSources', title: 'Event Sources', component: <EventSourceChart /> },
+    {
+      id: 'eventSources',
+      title: 'Event Sources',
+      component: <EventSourceChart />,
+    },
     { id: 'heatMap', title: 'IP Address Heat Map', component: <HeatMap /> },
     {
       id: 'ipAccess',
@@ -28,6 +44,11 @@ const Home: React.FC<{ isDarkMode: boolean }> = ({ isDarkMode }) => {
         />
       ),
     },
+    {
+      id: 'anomalyDetection',
+      title: 'Anomaly Detection',
+      component: <AnomalyChart />,
+    },
   ]);
 
   const handleDragEnd = (result: DropResult) => {

From 184719a3c6a3663c4d45c9430e5d0fae6e1751b7 Mon Sep 17 00:00:00 2001
From: homosapiendream <wzdny41@gmail.com>
Date: Tue, 29 Oct 2024 18:10:24 -0400
Subject: [PATCH 2/3] fix: disable authentication protecting home, profile,
 event-dashboard routes

---
 client/src/App.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 0ed79af..9585a60 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -23,14 +23,14 @@ const App: React.FC = () => {
       <Routes>
         <Route path="/login" element={<Login setUser={setUser} />} />
         <Route path="/signup" element={<SignUp />} />
-        {user !== null && <>
+        {/* {user !== null && <> */}
           <Route path="/" element={<Home isDarkMode={isDarkMode} />} />
         <Route path="/profile" element={<Profile isDarkMode={isDarkMode} user={user} />} />
         <Route
           path="/events-dashboard"
           element={<EventsDashboard isDarkMode={isDarkMode} />}
         />
-        </>}
+        {/* </>} */}
       </Routes>
     </Router>
   );

From 9e34959efc3ce516b56cdc584d36418382c25256 Mon Sep 17 00:00:00 2001
From: Samuel <samlarivs@outlook.com>
Date: Tue, 29 Oct 2024 19:48:43 -0400
Subject: [PATCH 3/3] Fix: removed unused imports and corrects dummy data chart

---
 client/src/components/charts/AnomalyChart.tsx | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/client/src/components/charts/AnomalyChart.tsx b/client/src/components/charts/AnomalyChart.tsx
index ee5d7ab..547195d 100644
--- a/client/src/components/charts/AnomalyChart.tsx
+++ b/client/src/components/charts/AnomalyChart.tsx
@@ -8,7 +8,6 @@ import {
   Tooltip,
   ResponsiveContainer,
   Legend,
-  ScatterProps,
 } from 'recharts';
 
 interface DataPoint {
@@ -47,15 +46,19 @@ const AnomalyChart: React.FC = () => {
           fill="#8884d8"
           shape="circle"
         >
-          {dummyData.map((entry, index) => (
-            <circle
-              key={`dot-${index}`}
-              cx={entry.cx}
-              cy={entry.cy}
-              r={isAnomaly(entry.count) ? 8 : 4}
-              fill={isAnomaly(entry.count) ? '#FF0000' : '#0088FE'}
-            />
-          ))}
+          {dummyData.map((entry, index) => {
+            const x = new Date(entry.timestamp).getTime();
+            const y = entry.count;
+            return (
+              <circle
+                key={`dot-${index}`}
+                cx={x}
+                cy={y}
+                r={isAnomaly(entry.count) ? 8 : 4}
+                fill={isAnomaly(entry.count) ? '#FF0000' : '#0088FE'}
+              />
+            );
+          })}
         </Scatter>
       </ScatterChart>
     </ResponsiveContainer>