File transfer

resources/scripts/addons/advanced-admin/network/TrafficChart.tsx

@@ -0,0 +1,55 @@
+/**
+ * Traffic Chart — Recharts line chart for bandwidth over time
+ * Ball Studios <https://git.balls.studio>
+ */
+
+import React from 'react';
+import {
+    LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
+} from 'recharts';
+
+interface DataPoint {
+    rx_bytes: number;
+    tx_bytes: number;
+    recorded_at: string;
+}
+
+interface Props { data: DataPoint[]; }
+
+function formatTick(bytes: number): string {
+    if (bytes < 1024)        return `${bytes}B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)}K`;
+    return `${(bytes / 1024 / 1024).toFixed(1)}M`;
+}
+
+export default function TrafficChart({ data }: Props) {
+    if (data.length === 0) {
+        return <div className='addon-empty'>No historical data available yet.</div>;
+    }
+
+    const chartData = data.map(d => ({
+        time: new Date(d.recorded_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+        rx:   d.rx_bytes,
+        tx:   d.tx_bytes,
+    }));
+
+    return (
+        <ResponsiveContainer width='100%' height={260}>
+            <LineChart data={chartData} margin={{ top: 8, right: 20, left: 0, bottom: 0 }}>
+                <CartesianGrid strokeDasharray='3 3' stroke='rgba(255,255,255,0.08)' />
+                <XAxis dataKey='time' tick={{ fill: '#9ca3af', fontSize: 11 }} tickLine={false} />
+                <YAxis tickFormatter={formatTick} tick={{ fill: '#9ca3af', fontSize: 11 }} tickLine={false} />
+                <Tooltip
+                    contentStyle={{ background: '#1f2937', border: 'none', borderRadius: 8 }}
+                    formatter={(v: number, name: string) => [
+                        `${(v / 1024 / 1024).toFixed(2)} MB`,
+                        name === 'rx' ? '⬇ Inbound' : '⬆ Outbound',
+                    ]}
+                />
+                <Legend formatter={(v) => v === 'rx' ? '⬇ Inbound' : '⬆ Outbound'} />
+                <Line type='monotone' dataKey='rx' stroke='#34d399' dot={false} strokeWidth={2} />
+                <Line type='monotone' dataKey='tx' stroke='#60a5fa' dot={false} strokeWidth={2} />
+            </LineChart>
+        </ResponsiveContainer>
+    );
+}