All files / lib/awareness/collective/components AdaptiveTimeline.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * @file AdaptiveTimeline.tsx
 * Line Chart ديناميكي يعرض استقرار النظام عبر الزمن
 */
 
import React from "react";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  Tooltip,
  ResponsiveContainer,
  CartesianGrid,
} from "recharts";
import { getTimelineHistory } from "@/lib/evolution/timeline";
 
export const AdaptiveTimeline: React.FC = () => {
  const data = getTimelineHistory().map((entry) => ({
    time: new Date(entry.timestamp).toLocaleTimeString(),
    stability: entry.stability,
  }));
 
  const getColor = (value: number) => {
    if (value > 0.75) return "#00ff88"; // أخضر - مستقر
    if (value > 0.5) return "#f4d03f"; // أصفر - متوسط
    return "#ff4d4f"; // أحمر - اضطراب
  };
 
  return (
    <div className="adaptive-timeline w-full h-64 bg-[#0c0c0c] rounded-2xl p-4 shadow-lg">
      <h3 className="text-[#f47b46] mb-3 font-semibold text-lg">
        System Stability Over Time
      </h3>
      <ResponsiveContainer width="100%" height="100%">
        <LineChart data={data}>
          <CartesianGrid strokeDasharray="3 3" stroke="#333" />
          <XAxis dataKey="time" stroke="#888" />
          <YAxis domain={[0, 1]} stroke="#888" />
          <Tooltip
            contentStyle={{
              backgroundColor: "#1a1a1a",
              border: "1px solid #f47b46",
              borderRadius: "10px",
            }}
          />
          <Line
            type="monotone"
            dataKey="stability"
            stroke="#00ff88"
            strokeWidth={2}
            dot={({ payload }) => (
              <circle
                cx={payload.cx}
                cy={payload.cy}
                r={4}
                fill={getColor(payload.stability)}
              />
            )}
          />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
};