Feat: Create the AnomalyChart in Frontend Home Page

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>
   );

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;

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) => {