123

import React, { useEffect, useState } from "react";
import { CartesianGrid, Legend, Line, LineChart, Tooltip, XAxis, YAxis } from "recharts";
import "./styles.css";

// Function to generate data for the previous day
const getPreviousDayData = () => {
  const baseTimestamp = new Date();
  baseTimestamp.setDate(baseTimestamp.getDate() - 1); // Set to previous day
  
  const timestamps = Array.from({ length: 63 }, (_, i) => {
    const timestamp = new Date(baseTimestamp);
    timestamp.setHours(8 + i * 2);
    return timestamp.toISOString();
  });

  return timestamps.map(timestamp => ({
    timestamp,
    description: "Normal activity",
    ipAddress: "10.83.129.233"
  }));
};

const Anomaly = () => {
  const [data, setData] = useState(getPreviousDayData());

  useEffect(() => {
    const fetchData = async () => {
      // Add the "Location change detected" entry after 1 minute
      const newEntry = {
        timestamp: new Date().toISOString(),
        description: "Location change detected",
        ipAddress: "10.83.129.246"
      };
      setData(prevData => [...prevData, newEntry]);
    };

    // Add initial "Normal activity" entry for today
    const initialEntry = {
      timestamp: new Date().toISOString(),
      description: "Normal activity",
      ipAddress: "10.83.129.233"
    };
    setData(prevData => [...prevData, initialEntry]);

    // Set up a timer to add the location change entry after 1 minute
    const timerId = setTimeout(fetchData, 60000); // 60,000 milliseconds = 1 minute

    return () => clearTimeout(timerId); // Cleanup on unmount
  }, []);

  const processDataForChart = () => {
    return data.map((item, index) => ({
      name: new Date(item.timestamp).toLocaleTimeString(),
      anomaly: index + 1
    }));
  };

  return (
    <div className="anomaly-page">
      <h1>Anomaly Dashboard</h1>
      <div className="chart-container">
        <div className="chart">
          <h2>Anomalies Detected Over Time</h2>
          <LineChart
            width={600}
            height={300}
            data={processDataForChart()}
            margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
          >
            <XAxis dataKey="name" />
            <CartesianGrid strokeDasharray="3 3" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Line type="monotone" dataKey="anomaly" stroke="#8884d8" activeDot={{ r: 8 }} />
          </LineChart>
        </div>
      </div>
      <h2>Anomaly Details</h2>
      <div className="details">
        <table>
          <thead>
            <tr>
              <th>Date & Time</th>
              <th>Description</th>
              <th>IP Address</th>
            </tr>
          </thead>
          <tbody>
            {data.map((item, index) => (
              <tr key={index} style={{ color: item.description === "Location change detected" ? "red" : "green" }}>
                <td>{new Date(item.timestamp).toLocaleString()}</td>
                <td>{item.description}</td>
                <td>{item.ipAddress}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default Anomaly;