abzhaw/data-visualization

Data Visualization

Recharts (React, lightweight)

import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';

const data = [
  { time: '06:00', messages: 2 },
  { time: '07:00', messages: 8 },
  { time: '08:00', messages: 15 },
];

<ResponsiveContainer width="100%" height={200}>
  <LineChart data={data}>
    <XAxis dataKey="time" stroke="#71717a" tick={{ fontSize: 12 }} />
    <YAxis stroke="#71717a" tick={{ fontSize: 12 }} />
    <Tooltip contentStyle={{ background: '#18181b', border: '1px solid #3f3f46' }} />
    <Line type="monotone" dataKey="messages" stroke="#22c55e" strokeWidth={2} dot={false} />
  </LineChart>
</ResponsiveContainer>

Activity Timeline

function ActivityTimeline({ events }: { events: { ts: number; label: string; type: 'info'|'warn'|'error' }[] }) {
  const colors = { info: 'bg-blue-500', warn: 'bg-amber-500', error: 'bg-red-500' };
  return (
    <div className="space-y-2">
      {events.map((e, i) => (
        <div key={i} className="flex items-start gap-3">
          <span className={`w-2 h-2 mt-1.5 rounded-full flex-shrink-0 ${colors[e.type]}`} />
          <div>
            <p className="text-sm text-zinc-200">{e.label}</p>
            <p className="text-xs text-zinc-500">{new Date(e.ts).toLocaleTimeString()}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

Real-Time Chart (polling)

const [data, setData] = useState<DataPoint[]>([]);
useEffect(() => {
  const id = setInterval(async () => {
    const point = await fetch('/api/metrics').then(r => r.json());
    setData(prev => [...prev.slice(-30), point]);  // keep last 30 points
  }, 5000);
  return () => clearInterval(id);
}, []);