Spaces:
Running
Running
Aakarsh2007
feat(ui): LogStream with filter+autoscroll, TelemetryChart area chart, NoisePanel for signal/noise separation
9c5b8ff | import React from 'react' | |
| import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts' | |
| import type { MetricPoint } from '../App' | |
| import { panelStyle, titleStyle } from '../App' | |
| interface Props { data: MetricPoint[] } | |
| const CustomTooltip = ({ active, payload, label }: any) => { | |
| if (!active || !payload?.length) return null | |
| return ( | |
| <div style={{ background: '#0f1629', border: '1px solid #1e2d4a', borderRadius: '0.4rem', padding: '0.5rem 0.75rem', fontSize: '0.72rem' }}> | |
| <div style={{ color: '#64748b', marginBottom: '0.25rem' }}>Step {label}</div> | |
| {payload.map((p: any) => ( | |
| <div key={p.dataKey} style={{ color: p.color }}>{p.name}: {p.value?.toFixed(1)}</div> | |
| ))} | |
| </div> | |
| ) | |
| } | |
| export function TelemetryChart({ data }: Props) { | |
| if (data.length < 2) return null | |
| return ( | |
| <div style={panelStyle}> | |
| <div style={titleStyle}>📈 Live Telemetry</div> | |
| <ResponsiveContainer width="100%" height={150}> | |
| <AreaChart data={data} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}> | |
| <defs> | |
| <linearGradient id="cpu" x1="0" y1="0" x2="0" y2="1"> | |
| <stop offset="5%" stopColor="#f97316" stopOpacity={0.3} /> | |
| <stop offset="95%" stopColor="#f97316" stopOpacity={0} /> | |
| </linearGradient> | |
| <linearGradient id="mem" x1="0" y1="0" x2="0" y2="1"> | |
| <stop offset="5%" stopColor="#8b5cf6" stopOpacity={0.3} /> | |
| <stop offset="95%" stopColor="#8b5cf6" stopOpacity={0} /> | |
| </linearGradient> | |
| <linearGradient id="err" x1="0" y1="0" x2="0" y2="1"> | |
| <stop offset="5%" stopColor="#ef4444" stopOpacity={0.3} /> | |
| <stop offset="95%" stopColor="#ef4444" stopOpacity={0} /> | |
| </linearGradient> | |
| </defs> | |
| <CartesianGrid strokeDasharray="3 3" stroke="#1e2d4a" /> | |
| <XAxis dataKey="step" stroke="#1e2d4a" tick={{ fontSize: 9, fill: '#334155' }} /> | |
| <YAxis stroke="#1e2d4a" tick={{ fontSize: 9, fill: '#334155' }} domain={[0, 100]} /> | |
| <Tooltip content={<CustomTooltip />} /> | |
| <Legend wrapperStyle={{ fontSize: 10, color: '#475569' }} /> | |
| <Area type="monotone" dataKey="cpu" stroke="#f97316" fill="url(#cpu)" dot={false} name="CPU%" strokeWidth={2} /> | |
| <Area type="monotone" dataKey="mem" stroke="#8b5cf6" fill="url(#mem)" dot={false} name="MEM%" strokeWidth={2} /> | |
| <Area type="monotone" dataKey="err" stroke="#ef4444" fill="url(#err)" dot={false} name="ERR%" strokeWidth={2} /> | |
| </AreaChart> | |
| </ResponsiveContainer> | |
| </div> | |
| ) | |
| } | |