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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
"use client";
import { useContext } from "react";
import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
ResponsiveContainer,
} from "recharts";
import { DataContext } from "@/lib/data-context";
import { greet } from "@/lib/utils";
const colors: Record<string, string> = {
lizzy: "#d985e6",
alex: "#66d1c3",
};
export default function UpdateChart() {
const data = useContext(DataContext);
if (!data.whois) return null;
const groupedData: { [name: string]: { time: number; value: number }[] } = {};
data.whois.forEach((update, i, arr) => {
if (!(update.name in groupedData)) groupedData[update.name] = [];
const msPerHour = 60 * 60 * 1000;
if (i === arr.length - 1) {
const now = new Date();
groupedData[update.name].push({ time: update.time, value: 0 });
groupedData[update.name].push({
time: now.getTime(),
value: (now.getTime() - update.time) / msPerHour,
});
}
if (i === 0) return;
const prev = arr[i - 1];
groupedData[prev.name].push({ time: prev.time, value: 0 });
groupedData[prev.name].push({
time: update.time,
value: (update.time - prev.time) / msPerHour,
});
groupedData[prev.name].push({ time: update.time, value: 0 });
});
const uniqueNames = Object.keys(groupedData);
const chartData = Object.entries(groupedData)
.flatMap(([name, dataPoints]) =>
dataPoints.map((data) => ({ time: data.time, name, [name]: data.value }))
)
.sort((a, b) => a.time - b.time);
return (
<div className="glass rounded-lg p-6 shadow-lg">
<div className="flex justify-center items-center mb-8">
<h2 className="text-4xl font-bold">
{greet(data.whois ? data.whois[0].name : "Friend", new Date())}
</h2>
</div>
<div className="h-64">
<ResponsiveContainer width="100%" height="100%">
<LineChart data={chartData}>
<CartesianGrid
strokeDasharray="3 3"
stroke="rgba(var(--foreground), 0.1)"
/>
<XAxis
dataKey="time"
type="number"
domain={["dataMin", "dataMax"]}
tickFormatter={(tick) => new Date(tick).toLocaleTimeString()}
stroke="rgba(var(--foreground), 0.6)"
/>
<YAxis
stroke="rgba(var(--foreground), 0.6)"
tickFormatter={(tick) => (tick === 0 ? "" : `${tick} hrs`)}
/>
{uniqueNames.map((uniqueName, index) => (
<Line
key={uniqueName}
type="linear"
dataKey={uniqueName}
data={chartData.filter(({ name }) => name === uniqueName)}
name={uniqueName}
stroke={colors[uniqueName] ?? "#ff0000"}
strokeWidth={3}
dot={false}
isAnimationActive={false}
/>
))}
</LineChart>
</ResponsiveContainer>
</div>
<div className="mt-4 flex flex-wrap gap-2">
{Object.keys(groupedData).map((name) => (
<span
key={name}
className="px-3 py-1 rounded-full text-sm bg-pink-100 text-pink-800 dark:bg-gray-700 dark:text-pink-200"
style={{ color: colors[name] }}
>
{name}
</span>
))}
</div>
</div>
);
}
|
