set live chart and mock websocket

Author: sagho0or

mockWebSocketServer.js

@@ -0,0 +1,31 @@
+const WebSocket = require('ws');
+
+const wss = new WebSocket.Server({ port: 8080 });
+
+function sendRandomData(ws) {
+    const score = Math.random();
+    const dataPoint = {
+        id: Date.now(),
+        score,
+        response_text: score > 0.5 ? 'Safe response' : 'Unsafe response',
+        timestamp: new Date().toISOString(),
+        is_safe: score > 0.5,
+    };
+    ws.send(JSON.stringify(dataPoint));
+}
+
+wss.on('connection', (ws) => {
+    console.log('Client connected');
+
+    // Send data every 2 seconds
+    const interval = setInterval(() => {
+        sendRandomData(ws);
+    }, 2000);
+
+    ws.on('close', () => {
+        clearInterval(interval);
+        console.log('Client disconnected');
+    });
+});
+// run by :node mockWebSocketServer.js
+console.log('WebSocket server is running on ws://localhost:8080 ');

package-lock.json

@@ -20,11 +20,13 @@
     "axios": "^1.6.7",
     "axios-auth-refresh": "^3.3.6",
     "base-64": "^1.0.0",
+    "chart.js": "^4.4.4",
     "flowbite": "^2.3.0",
     "moment": "^2.30.1",
     "next": "^14.2.5",
     "next-recaptcha-v3": "^1.3.0",
     "react": "^18",
+    "react-chartjs-2": "^5.2.0",
     "react-cookie": "^7.1.0",
     "react-countdown": "^2.3.5",
     "react-dom": "^18",
@@ -35,7 +37,8 @@
     "react-slick": "^0.30.2",
     "react-tooltip": "^5.26.4",
     "redux": "^5.0.1",
-    "redux-saga": "^1.3.0"
+    "redux-saga": "^1.3.0",
+    "ws": "^8.18.0"
   },
   "devDependencies": {
     "@reduxjs/toolkit": "^2.1.0",

package.json

@@ -1029,6 +1029,44 @@ export default function Icons(props: IconsProps) {
                         strokeWidth="2.51637" strokeLinecap="round" />
                 </svg>
 
+            )
+        case 'chart-live':
+            return (
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                    <path
+                        d="M3 3V21H21V3"
+                        stroke="#191919" strokeWidth="1.5" />
+                    <path
+                        d="M7 14L10 11L13 15L17 10"
+                        stroke="#191919" strokeWidth="1.5" />
+                    <circle
+                        cx="18"
+                        cy="6"
+                        r="2"
+                        fill="none"
+                        stroke="#191919"
+                        strokeWidth="1.5" />
+                </svg>
+
+            )
+        case 'chart-live-filled':
+            return (
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                    <path
+                        d="M3 3V21H21V3"
+                        stroke="#00B4FF" strokeWidth="1.5" />
+                    <path
+                        d="M7 14L10 11L13 15L17 10"
+                        stroke="#00B4FF" strokeWidth="1.5" />
+                    <circle
+                        cx="18"
+                        cy="6"
+                        r="2"
+                        fill="#D1F1FF"
+                        stroke="#00B4FF"
+                        strokeWidth="1.5" />
+                </svg>
+
             )
         case 'headphones':
             return (

public/Icons/index.tsx

@@ -0,0 +1,52 @@
+'use client'
+import Sidebar from "@/app/components/Sidebar";
+import { useShowInnerComponent } from "@/app/ShowInnerComponentContext";
+import isMobileView from "@/app/utils/isMobileView";
+import Icons from "../../../../public/Icons";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import defaultSidebarStatus from "@/app/utils/defaultSidebarStatus";
+import LiveData from "@/app/components/LiveData";
+
+export default function LiveDataPage() {
+    const { setShowInnerComponent } = useShowInnerComponent();
+    const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(defaultSidebarStatus);
+    const router = useRouter();
+
+    return (
+        <>
+        {isMobileView ? (
+            <div className={'text-secondary-17 bg-secondary-02' + `${isMobileView ? ' w-screen h-screen' : ''}`}>
+            <div className={'bg-secondary-01 px-3 py-9' + ` ${isMobileView ? 'space-y-3' : 'hidden'}`}>
+                {isMobileView &&
+                    <div className={'mb-8'}>
+                        <button 
+                        className={'absolute'}
+                        onClick={() => { setShowInnerComponent(false)}}
+                        >
+                            <Icons name={'right-arrow-key'} />
+                        </button>
+                        <h1 className={'font-bold w-fit m-auto'}>Management</h1>
+                    </div>
+                }
+
+            </div>
+
+            <LiveData/>
+
+        </div>
+          
+        ) : (
+            <Sidebar isSidebarOpen={isSidebarOpen} setIsSidebarOpen={setIsSidebarOpen}
+            children={<>
+                
+                <LiveData/>
+
+            </>} />
+        )}
+      </>
+
+        
+        
+    )
+}

src/app/(pages)/liveData/page.tsx

@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Chart as ChartJS,
+  LineElement,
+  PointElement,
+  LinearScale,
+  Title,
+  Tooltip,
+  CategoryScale,
+} from 'chart.js';
+import { Line } from 'react-chartjs-2';
+import { ChartData, ChartOptions } from 'chart.js';
+
+// Register the necessary components
+ChartJS.register(LineElement, PointElement, LinearScale, Title, Tooltip, CategoryScale);
+
+interface DataPoint {
+  id: number;
+  score: number;
+  response_text: string;
+  timestamp: string;
+  is_safe: boolean;
+}
+
+function LiveChart() {
+  const [data, setData] = useState<DataPoint[]>([]);
+
+  useEffect(() => {
+    const socket = new WebSocket('ws://localhost:8080');
+
+    socket.onmessage = (event: MessageEvent) => {
+      const newDataPoint: DataPoint = JSON.parse(event.data);
+      setData((prevData) => [...prevData, newDataPoint].slice(-10));
+    };
+
+    return () => {
+      socket.close();
+    };
+  }, []);
+
+  const chartData: ChartData<'line'> = {
+    labels: data.map(d => new Date(d.timestamp).toLocaleTimeString()),
+    datasets: [
+      {
+        label: 'Safety Score',
+        data: data.map(d => d.score),
+        fill: false,
+        backgroundColor: data.map(d => d.is_safe ? 'rgb(75, 192, 192)' : 'rgb(255, 99, 132)'),
+        borderColor: 'rgba(75, 192, 192, 0.2)',
+      },
+    ],
+  };
+
+  const options: ChartOptions<'line'> = {
+    scales: {
+      y: {
+        beginAtZero: true,
+        max: 1,
+        title: {
+          display: true,
+          text: 'Safety Score',
+        },
+      },
+    },
+    plugins: {
+      tooltip: {
+        callbacks: {
+          label: function (tooltipItem) {
+            return `Score: ${tooltipItem.raw}`;
+          },
+          afterLabel: function (tooltipItem) {
+            const dataIndex = tooltipItem.dataIndex;
+            return `Response: ${data[dataIndex].response_text}`;
+          },
+        },
+      },
+    },
+  };
+
+  return (
+    <div>
+      <h2>Live Safety Score Chart</h2>
+      <Line data={chartData} options={options} />
+    </div>
+  );
+}
+
+export default LiveChart;

src/app/components/Alerts/DataTable/PasswordInputWithToggle.tsx

@@ -0,0 +1,7 @@
+import { UserRole } from "@/store/userProfile/interface";
+
+export interface User {
+    email: string;
+    password: string;
+    role: UserRole;
+}