name: data-dashboards
description: "Data visualization dashboards. D3.js, Recharts, real-time charts, Grafana. Use when building analytics views, trading dashboards, or monitoring UIs."
metadata:
openclaw:
emoji: "📊"

Data Dashboards

Build data-dense visualization dashboards for agent metrics, trading, and monitoring.

Library Selection

Recharts (Recommended for React)

Line Chart — Agent Revenue Over Time

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

function RevenueChart({ data }: { data: { date: string; usdc: number }[] }) {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
        <XAxis dataKey="date" stroke="#a1a1aa" fontSize={12} />
        <YAxis stroke="#a1a1aa" fontSize={12} />
        <Tooltip contentStyle={{ background: '#18181b', border: '1px solid #3f3f46' }} />
        <Line type="monotone" dataKey="usdc" stroke="#34d399" strokeWidth={2} dot={false} />
      </LineChart>
    </ResponsiveContainer>
  );
}

Bar Chart — Payments by Agent

import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';

function PaymentsByAgent({ data }) {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <BarChart data={data}>
        <XAxis dataKey="agent" stroke="#a1a1aa" />
        <YAxis stroke="#a1a1aa" />
        <Bar dataKey="volume" fill="#a78bfa" radius={[2, 2, 0, 0]} />
      </BarChart>
    </ResponsiveContainer>
  );
}

Stat Cards (Protocol Aesthetic)

function StatCard({ label, value, change, icon }: StatProps) {
  const isPositive = change >= 0;
  return (
    <div className="border border-zinc-700 bg-zinc-800 p-4">
      <div className="flex justify-between items-center">
        <span className="text-zinc-400 text-sm">{label}</span>
        {icon}
      </div>
      <div className="mt-2 font-mono text-2xl text-zinc-100">{value}</div>
      <div className={`mt-1 text-sm font-mono ${isPositive ? 'text-emerald-400' : 'text-red-400'}`}>
        {isPositive ? '↑' : '↓'} {Math.abs(change)}%
      </div>
    </div>
  );
}

Real-Time Updates

WebSocket Feed

const ws = new WebSocket('wss://agenthq.replit.app/ws');

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  if (data.type === 'payment') {
    setPayments(prev => [data.payment, ...prev].slice(0, 100));
  }
};

Polling Fallback

useEffect(() => {
  const interval = setInterval(async () => {
    const data = await fetchMetrics();
    setMetrics(data);
  }, 5000); // 5s refresh
  return () => clearInterval(interval);
}, []);

Trading Charts (Lightweight Charts)

import { createChart } from 'lightweight-charts';

const chart = createChart(container, {
  layout: { background: { color: '#09090b' }, textColor: '#a1a1aa' },
  grid: { vertLines: { color: '#27272a' }, horzLines: { color: '#27272a' } },
});

const candleSeries = chart.addCandlestickSeries({
  upColor: '#34d399', downColor: '#ef4444',
  borderUpColor: '#34d399', borderDownColor: '#ef4444',
  wickUpColor: '#34d399', wickDownColor: '#ef4444',
});

candleSeries.setData(priceData);

Dashboard Layout Pattern

function Dashboard() {
  return (
    <div className="grid grid-cols-4 gap-4 p-6">
      {/* Row 1: Stat cards */}
      <StatCard label="Total Revenue" value="$1,234" change={12.5} />
      <StatCard label="Active Agents" value="47" change={3.2} />
      <StatCard label="Payments Today" value="156" change={-2.1} />
      <StatCard label="Avg Trust Score" value="78" change={1.8} />

      {/* Row 2: Charts */}
      <div className="col-span-3 border border-zinc-700 bg-zinc-800 p-4">
        <RevenueChart data={revenueData} />
      </div>
      <div className="col-span-1 border border-zinc-700 bg-zinc-800 p-4">
        <TopAgentsList data={topAgents} />
      </div>

      {/* Row 3: Activity feed */}
      <div className="col-span-4 border border-zinc-700 bg-zinc-800 p-4">
        <ActivityFeed events={recentEvents} />
      </div>
    </div>
  );
}

Cross-References

• protocol-ui-design: Color system and component patterns
• monitoring-alerting: Data sources for dashboards
• onchain-analytics: On-chain data to visualize