feat: migrate agent charts to ThemedChart + Recharts

Replace custom LineChart/AreaChart/BarChart usage with ThemedChart wrapper. Data format changed from ChartSeries[] to Recharts-native flat objects. Uses DS v0.1.47. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-12 19:44:55 +02:00
parent a0af53f8f5
commit 0dae1f1cc7
6 changed files with 238 additions and 267 deletions
--- a/ui/src/pages/AgentInstance/AgentInstance.tsx
+++ b/ui/src/pages/AgentInstance/AgentInstance.tsx
@@ -2,7 +2,7 @@ import { useMemo, useState } from 'react';
 import { useParams, Link } from 'react-router';
 import { RefreshCw, ChevronRight } from 'lucide-react';
 import {
-  StatCard, StatusDot, Badge, LineChart, AreaChart, BarChart,
+  StatCard, StatusDot, Badge, ThemedChart, Line, Area, ReferenceLine, CHART_COLORS,
  EventFeed, Spinner, EmptyState, SectionHeader, MonoText,
  LogViewer, ButtonGroup, useGlobalFilters,
 } from '@cameleer/design-system';
@@ -100,46 +100,42 @@ export default function AgentInstance() {
    return eventSortAsc ? mapped.toReversed() : mapped;
  }, [events, instanceId, eventSortAsc]);

-  // JVM chart series helpers
-  const cpuSeries = useMemo(() => {
+  const formatTime = (t: string) =>
+    new Date(t).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+
+  const cpuData = useMemo(() => {
    const pts = jvmMetrics?.metrics?.['process.cpu.usage.value'];
-    if (!pts?.length) return null;
-    return [{ label: 'CPU %', data: pts.map((p: any) => ({ x: new Date(p.time), y: p.value * 100 })) }];
+    if (!pts?.length) return [];
+    return pts.map((p: any) => ({ time: p.time, cpu: p.value * 100 }));
  }, [jvmMetrics]);

-  const heapSeries = useMemo(() => {
+  const heapData = useMemo(() => {
    const pts = jvmMetrics?.metrics?.['jvm.memory.used.value'];
-    if (!pts?.length) return null;
-    return [{ label: 'Heap MB', data: pts.map((p: any) => ({ x: new Date(p.time), y: p.value / (1024 * 1024) })) }];
+    if (!pts?.length) return [];
+    return pts.map((p: any) => ({ time: p.time, heap: p.value / (1024 * 1024) }));
  }, [jvmMetrics]);

-  const threadSeries = useMemo(() => {
+  const threadData = useMemo(() => {
    const pts = jvmMetrics?.metrics?.['jvm.threads.live.value'];
-    if (!pts?.length) return null;
-    return [{ label: 'Threads', data: pts.map((p: any) => ({ x: new Date(p.time), y: p.value })) }];
+    if (!pts?.length) return [];
+    return pts.map((p: any) => ({ time: p.time, threads: p.value }));
  }, [jvmMetrics]);

-  const gcSeries = useMemo(() => {
+  const gcData = useMemo(() => {
    const pts = jvmMetrics?.metrics?.['jvm.gc.pause.total_time'];
-    if (!pts?.length) return null;
-    return [{ label: 'GC ms', data: pts.map((p: any) => ({ x: new Date(p.time), y: p.value })) }];
+    if (!pts?.length) return [];
+    return pts.map((p: any) => ({ time: p.time, gc: p.value }));
  }, [jvmMetrics]);

-  const throughputSeries = useMemo(
-    () =>
-      chartData.length
-        ? [{ label: 'msg/s', data: chartData.map((d: any) => ({ x: d.date, y: d.throughput })) }]
-        : null,
-    [chartData],
-  );
+  const throughputData = useMemo(() => {
+    if (!chartData.length) return [];
+    return chartData.map((d: any) => ({ time: d.date.toISOString(), throughput: d.throughput }));
+  }, [chartData]);

-  const errorSeries = useMemo(
-    () =>
-      chartData.length
-        ? [{ label: 'Error %', data: chartData.map((d: any) => ({ x: d.date, y: d.errorPct })) }]
-        : null,
-    [chartData],
-  );
+  const errorData = useMemo(() => {
+    if (!chartData.length) return [];
+    return chartData.map((d: any) => ({ time: d.date.toISOString(), errorPct: d.errorPct }));
+  }, [chartData]);

  // Application logs
  const { data: rawLogs } = useApplicationLogs(appId, instanceId, { toOverride: logRefreshTo, source: logSource || undefined });
@@ -315,13 +311,14 @@ export default function AgentInstance() {
              {cpuDisplay != null ? `${cpuDisplay}% current` : ''}
            </span>
          </div>
-          {cpuSeries ? (
-            <AreaChart
-              series={cpuSeries}
-              height={160}
-              yLabel="%"
-              threshold={{ value: 85, label: 'Alert' }}
-            />
+          {cpuData.length ? (
+            <ThemedChart data={cpuData} height={160} xDataKey="time"
+              xTickFormatter={formatTime} yLabel="%">
+              <Area dataKey="cpu" name="CPU %" stroke={CHART_COLORS[0]}
+                fill={CHART_COLORS[0]} fillOpacity={0.1} strokeWidth={2} dot={false} />
+              <ReferenceLine y={85} stroke="var(--error)" strokeDasharray="5 3"
+                label={{ value: 'Alert', position: 'right', fill: 'var(--error)', fontSize: 9 }} />
+            </ThemedChart>
          ) : (
            <EmptyState title="No data" description="No CPU metrics available" />
          )}
@@ -336,13 +333,16 @@ export default function AgentInstance() {
                : ''}
            </span>
          </div>
-          {heapSeries ? (
-            <AreaChart
-              series={heapSeries}
-              height={160}
-              yLabel="MB"
-              threshold={heapMax != null ? { value: heapMax / (1024 * 1024), label: 'Max Heap' } : undefined}
-            />
+          {heapData.length ? (
+            <ThemedChart data={heapData} height={160} xDataKey="time"
+              xTickFormatter={formatTime} yLabel="MB">
+              <Area dataKey="heap" name="Heap MB" stroke={CHART_COLORS[0]}
+                fill={CHART_COLORS[0]} fillOpacity={0.1} strokeWidth={2} dot={false} />
+              {heapMax != null && (
+                <ReferenceLine y={heapMax / (1024 * 1024)} stroke="var(--error)" strokeDasharray="5 3"
+                  label={{ value: 'Max Heap', position: 'right', fill: 'var(--error)', fontSize: 9 }} />
+              )}
+            </ThemedChart>
          ) : (
            <EmptyState title="No data" description="No heap metrics available" />
          )}
@@ -355,8 +355,12 @@ export default function AgentInstance() {
              {agent?.tps != null ? `${agent.tps.toFixed(1)} msg/s` : ''}
            </span>
          </div>
-          {throughputSeries ? (
-            <LineChart series={throughputSeries} height={160} yLabel="msg/s" />
+          {throughputData.length ? (
+            <ThemedChart data={throughputData} height={160} xDataKey="time"
+              xTickFormatter={formatTime} yLabel="msg/s">
+              <Line dataKey="throughput" name="msg/s" stroke={CHART_COLORS[0]}
+                strokeWidth={2} dot={false} />
+            </ThemedChart>
          ) : (
            <EmptyState title="No data" description="No throughput data in range" />
          )}
@@ -369,8 +373,12 @@ export default function AgentInstance() {
              {agent?.errorRate != null ? `${(agent.errorRate * 100).toFixed(1)}%` : ''}
            </span>
          </div>
-          {errorSeries ? (
-            <LineChart series={errorSeries} height={160} yLabel="%" />
+          {errorData.length ? (
+            <ThemedChart data={errorData} height={160} xDataKey="time"
+              xTickFormatter={formatTime} yLabel="%">
+              <Line dataKey="errorPct" name="Error %" stroke={CHART_COLORS[0]}
+                strokeWidth={2} dot={false} />
+            </ThemedChart>
          ) : (
            <EmptyState title="No data" description="No error data in range" />
          )}
@@ -380,13 +388,17 @@ export default function AgentInstance() {
          <div className={styles.chartHeader}>
            <span className={styles.chartTitle}>Thread Count</span>
            <span className={styles.chartMeta}>
-              {threadSeries
-                ? `${threadSeries[0].data[threadSeries[0].data.length - 1]?.y.toFixed(0)} active`
+              {threadData.length
+                ? `${threadData[threadData.length - 1].threads.toFixed(0)} active`
                : ''}
            </span>
          </div>
-          {threadSeries ? (
-            <LineChart series={threadSeries} height={160} yLabel="threads" />
+          {threadData.length ? (
+            <ThemedChart data={threadData} height={160} xDataKey="time"
+              xTickFormatter={formatTime} yLabel="threads">
+              <Line dataKey="threads" name="Threads" stroke={CHART_COLORS[0]}
+                strokeWidth={2} dot={false} />
+            </ThemedChart>
          ) : (
            <EmptyState title="No data" description="No thread metrics available" />
          )}
@@ -397,8 +409,12 @@ export default function AgentInstance() {
            <span className={styles.chartTitle}>GC Pauses</span>
            <span className={styles.chartMeta} />
          </div>
-          {gcSeries ? (
-            <AreaChart series={gcSeries} height={160} yLabel="ms" />
+          {gcData.length ? (
+            <ThemedChart data={gcData} height={160} xDataKey="time"
+              xTickFormatter={formatTime} yLabel="ms">
+              <Area dataKey="gc" name="GC ms" stroke={CHART_COLORS[1]}
+                fill={CHART_COLORS[1]} fillOpacity={0.1} strokeWidth={2} dot={false} />
+            </ThemedChart>
          ) : (
            <EmptyState title="No data" description="No GC metrics available" />
          )}
--- a/ui/src/pages/DashboardTab/DashboardL1.tsx
+++ b/ui/src/pages/DashboardTab/DashboardL1.tsx
@@ -3,8 +3,10 @@ import { useNavigate } from 'react-router';
 import {
  KpiStrip,
  DataTable,
-  AreaChart,
-  LineChart,
+  ThemedChart,
+  Area,
+  Line,
+  CHART_COLORS,
  Card,
  Sparkline,
  MonoText,
@@ -372,28 +374,39 @@ export default function DashboardL1() {
     throughputSparkline, successSparkline, latencySparkline, slaSparkline, errorSparkline],
  );

-  // ── Per-app chart series (throughput stacked area) ──────────────────────
-  const throughputByAppSeries = useMemo(() => {
-    if (!timeseriesByApp) return [];
-    return Object.entries(timeseriesByApp).map(([appId, { buckets }]) => ({
-      label: appId,
-      data: buckets.map((b, i) => ({
-        x: i as number,
-        y: b.totalCount,
-      })),
-    }));
+  // ── Per-app flat chart data (throughput stacked area) ───────────────────
+  const throughputByAppData = useMemo(() => {
+    if (!timeseriesByApp) return { data: [], keys: [] as string[] };
+    const entries = Object.entries(timeseriesByApp);
+    if (!entries.length) return { data: [], keys: [] as string[] };
+    const len = entries[0][1].buckets.length;
+    const keys = entries.map(([appId]) => appId);
+    const data = Array.from({ length: len }, (_, i) => {
+      const point: Record<string, number | string> = { idx: i };
+      for (const [appId, { buckets }] of entries) {
+        point[appId] = buckets[i]?.totalCount ?? 0;
+      }
+      return point;
+    });
+    return { data, keys };
  }, [timeseriesByApp]);

-  // ── Per-app chart series (error rate line) ─────────────────────────────
-  const errorRateByAppSeries = useMemo(() => {
-    if (!timeseriesByApp) return [];
-    return Object.entries(timeseriesByApp).map(([appId, { buckets }]) => ({
-      label: appId,
-      data: buckets.map((b, i) => ({
-        x: i as number,
-        y: b.totalCount > 0 ? (b.failedCount / b.totalCount) * 100 : 0,
-      })),
-    }));
+  // ── Per-app flat chart data (error rate line) ────────────────────────────
+  const errorRateByAppData = useMemo(() => {
+    if (!timeseriesByApp) return { data: [], keys: [] as string[] };
+    const entries = Object.entries(timeseriesByApp);
+    if (!entries.length) return { data: [], keys: [] as string[] };
+    const len = entries[0][1].buckets.length;
+    const keys = entries.map(([appId]) => appId);
+    const data = Array.from({ length: len }, (_, i) => {
+      const point: Record<string, number | string> = { idx: i };
+      for (const [appId, { buckets }] of entries) {
+        const b = buckets[i];
+        point[appId] = b && b.totalCount > 0 ? (b.failedCount / b.totalCount) * 100 : 0;
+      }
+      return point;
+    });
+    return { data, keys };
  }, [timeseriesByApp]);

  // Treemap items: one per app, sized by exchange count, colored by SLA
@@ -430,24 +443,24 @@ export default function DashboardL1() {
      </div>

      {/* Side-by-side charts */}
-      {throughputByAppSeries.length > 0 && (
+      {throughputByAppData.data.length > 0 && (
        <div className={styles.chartGrid}>
          <Card title="Throughput by Application (msg/s)">
-            <AreaChart
-              series={throughputByAppSeries}
-              yLabel="msg/s"
-              height={200}
-              className={styles.chart}
-            />
+            <ThemedChart data={throughputByAppData.data} height={200} xDataKey="idx" yLabel="msg/s">
+              {throughputByAppData.keys.map((key, i) => (
+                <Area key={key} dataKey={key} name={key} stroke={CHART_COLORS[i % CHART_COLORS.length]}
+                  fill={CHART_COLORS[i % CHART_COLORS.length]} fillOpacity={0.1} strokeWidth={2} dot={false} />
+              ))}
+            </ThemedChart>
          </Card>

          <Card title="Error Rate by Application (%)">
-            <LineChart
-              series={errorRateByAppSeries}
-              yLabel="%"
-              height={200}
-              className={styles.chart}
-            />
+            <ThemedChart data={errorRateByAppData.data} height={200} xDataKey="idx" yLabel="%">
+              {errorRateByAppData.keys.map((key, i) => (
+                <Line key={key} dataKey={key} name={key} stroke={CHART_COLORS[i % CHART_COLORS.length]}
+                  strokeWidth={2} dot={false} />
+              ))}
+            </ThemedChart>
          </Card>
        </div>
      )}
--- a/ui/src/pages/DashboardTab/DashboardL2.tsx
+++ b/ui/src/pages/DashboardTab/DashboardL2.tsx
@@ -3,8 +3,11 @@ import { useParams, useNavigate } from 'react-router';
 import {
  KpiStrip,
  DataTable,
-  AreaChart,
-  LineChart,
+  ThemedChart,
+  Area,
+  Line,
+  ReferenceLine,
+  CHART_COLORS,
  Card,
  Sparkline,
  MonoText,
@@ -328,37 +331,31 @@ export default function DashboardL2() {
    [stats, slaThresholdMs, throughputSparkline, latencySparkline, errors, windowSeconds],
  );

-  // Throughput by Route — stacked area chart series
-  const throughputByRouteSeries = useMemo(() => {
-    if (!timeseriesByRoute) return [];
-    return Object.entries(timeseriesByRoute).map(([routeId, data]) => ({
-      label: routeId,
-      data: (data.buckets || []).map((b, i) => ({
-        x: i as number,
-        y: b.totalCount,
-      })),
-    }));
+  // Throughput by Route — flat data for ThemedChart
+  const throughputByRouteData = useMemo(() => {
+    if (!timeseriesByRoute) return { data: [], keys: [] as string[] };
+    const entries = Object.entries(timeseriesByRoute);
+    if (!entries.length) return { data: [], keys: [] as string[] };
+    const len = entries[0][1].buckets.length;
+    const keys = entries.map(([routeId]) => routeId);
+    const data = Array.from({ length: len }, (_, i) => {
+      const point: Record<string, number | string> = { idx: i };
+      for (const [routeId, { buckets }] of entries) {
+        point[routeId] = buckets[i]?.totalCount ?? 0;
+      }
+      return point;
+    });
+    return { data, keys };
  }, [timeseriesByRoute]);

-  // Latency percentiles chart — P99 line from app-level timeseries
-  const latencyChartSeries = useMemo(() => {
+  // Latency percentiles chart — flat data for ThemedChart
+  const latencyChartData = useMemo(() => {
    const buckets = timeseries?.buckets || [];
-    return [
-      {
-        label: 'P99',
-        data: buckets.map((b, i) => ({
-          x: i as number,
-          y: b.p99DurationMs,
-        })),
-      },
-      {
-        label: 'Avg',
-        data: buckets.map((b, i) => ({
-          x: i as number,
-          y: b.avgDurationMs,
-        })),
-      },
-    ];
+    return buckets.map((b, i) => ({
+      idx: i,
+      p99: b.p99DurationMs,
+      avg: b.avgDurationMs,
+    }));
  }, [timeseries]);

  // Error rows with stable identity
@@ -398,22 +395,21 @@ export default function DashboardL2() {
      {(timeseries?.buckets?.length ?? 0) > 0 && (
        <div className={styles.chartGrid}>
          <Card title="Throughput by Route">
-            <AreaChart
-              series={throughputByRouteSeries}
-              yLabel="msg/s"
-              height={200}
-              className={styles.chart}
-            />
+            <ThemedChart data={throughputByRouteData.data} height={200} xDataKey="idx" yLabel="msg/s">
+              {throughputByRouteData.keys.map((key, i) => (
+                <Area key={key} dataKey={key} name={key} stroke={CHART_COLORS[i % CHART_COLORS.length]}
+                  fill={CHART_COLORS[i % CHART_COLORS.length]} fillOpacity={0.1} strokeWidth={2} dot={false} />
+              ))}
+            </ThemedChart>
          </Card>

          <Card title="Latency Percentiles">
-            <LineChart
-              series={latencyChartSeries}
-              yLabel="ms"
-              threshold={{ value: slaThresholdMs, label: `SLA ${slaThresholdMs}ms` }}
-              height={200}
-              className={styles.chart}
-            />
+            <ThemedChart data={latencyChartData} height={200} xDataKey="idx" yLabel="ms">
+              <Line dataKey="p99" name="P99" stroke={CHART_COLORS[0]} strokeWidth={2} dot={false} />
+              <Line dataKey="avg" name="Avg" stroke={CHART_COLORS[1]} strokeWidth={2} dot={false} />
+              <ReferenceLine y={slaThresholdMs} stroke="var(--error)" strokeDasharray="5 3"
+                label={{ value: `SLA ${slaThresholdMs}ms`, position: 'right', fill: 'var(--error)', fontSize: 9 }} />
+            </ThemedChart>
          </Card>
        </div>
      )}
--- a/ui/src/pages/DashboardTab/DashboardL3.tsx
+++ b/ui/src/pages/DashboardTab/DashboardL3.tsx
@@ -3,8 +3,11 @@ import { useParams } from 'react-router';
 import {
  KpiStrip,
  DataTable,
-  AreaChart,
-  LineChart,
+  ThemedChart,
+  Area,
+  Line,
+  ReferenceLine,
+  CHART_COLORS,
  Card,
  MonoText,
  Badge,
@@ -285,31 +288,16 @@ export default function DashboardL3() {
    [stats, slaThresholdMs, bottleneck, throughputSparkline, windowSeconds],
  );

-  // ── Chart series ────────────────────────────────────────────────────────
-  const throughputChartSeries = useMemo(() => [{
-    label: 'Throughput',
-    data: (timeseries?.buckets || []).map((b: any, i: number) => ({
-      x: i,
-      y: b.totalCount,
+  // ── Chart data ───────────────────────────────────────────────────────────
+  const chartData = useMemo(() =>
+    (timeseries?.buckets || []).map((b: any, i: number) => ({
+      idx: i,
+      throughput: b.totalCount,
+      p99: b.p99DurationMs,
+      errorRate: b.totalCount > 0 ? (b.failedCount / b.totalCount) * 100 : 0,
    })),
-  }], [timeseries]);
-
-  const latencyChartSeries = useMemo(() => [{
-    label: 'P99',
-    data: (timeseries?.buckets || []).map((b: any, i: number) => ({
-      x: i,
-      y: b.p99DurationMs,
-    })),
-  }], [timeseries]);
-
-  const errorRateChartSeries = useMemo(() => [{
-    label: 'Error Rate',
-    data: (timeseries?.buckets || []).map((b: any, i: number) => ({
-      x: i,
-      y: b.totalCount > 0 ? (b.failedCount / b.totalCount) * 100 : 0,
-    })),
-    color: 'var(--error)',
-  }], [timeseries]);
+    [timeseries],
+  );

  // ── Processor table rows ────────────────────────────────────────────────
  const processorRows: ProcessorRow[] = useMemo(() => {
@@ -364,28 +352,25 @@ export default function DashboardL3() {
      {(timeseries?.buckets?.length ?? 0) > 0 && (
        <div className={styles.chartRow}>
          <Card title="Throughput">
-            <AreaChart
-              series={throughputChartSeries}
-              yLabel="msg/s"
-              height={200}
-            />
+            <ThemedChart data={chartData} height={200} xDataKey="idx" yLabel="msg/s">
+              <Area dataKey="throughput" name="Throughput" stroke={CHART_COLORS[0]}
+                fill={CHART_COLORS[0]} fillOpacity={0.1} strokeWidth={2} dot={false} />
+            </ThemedChart>
          </Card>

          <Card title="Latency Percentiles">
-            <LineChart
-              series={latencyChartSeries}
-              yLabel="ms"
-              threshold={{ value: slaThresholdMs, label: `SLA ${slaThresholdMs}ms` }}
-              height={200}
-            />
+            <ThemedChart data={chartData} height={200} xDataKey="idx" yLabel="ms">
+              <Line dataKey="p99" name="P99" stroke={CHART_COLORS[0]} strokeWidth={2} dot={false} />
+              <ReferenceLine y={slaThresholdMs} stroke="var(--error)" strokeDasharray="5 3"
+                label={{ value: `SLA ${slaThresholdMs}ms`, position: 'right', fill: 'var(--error)', fontSize: 9 }} />
+            </ThemedChart>
          </Card>

          <Card title="Error Rate">
-            <AreaChart
-              series={errorRateChartSeries}
-              yLabel="%"
-              height={200}
-            />
+            <ThemedChart data={chartData} height={200} xDataKey="idx" yLabel="%">
+              <Area dataKey="errorRate" name="Error Rate" stroke={CHART_COLORS[1]}
+                fill={CHART_COLORS[1]} fillOpacity={0.1} strokeWidth={2} dot={false} />
+            </ThemedChart>
          </Card>
        </div>
      )}
--- a/ui/src/pages/Routes/RouteDetail.tsx
+++ b/ui/src/pages/Routes/RouteDetail.tsx
@@ -8,9 +8,12 @@ import {
  DataTable,
  EmptyState,
  Tabs,
-  AreaChart,
-  LineChart,
-  BarChart,
+  ThemedChart,
+  Area,
+  Line,
+  Bar,
+  ReferenceLine,
+  CHART_COLORS,
  RouteFlow,
  Spinner,
  MonoText,
@@ -752,44 +755,31 @@ export default function RouteDetail() {
          <div className={styles.chartGrid} style={{ marginTop: 16 }}>
            <div className={chartCardStyles.chartCard}>
              <div className={styles.chartTitle}>Throughput</div>
-              <AreaChart
-                series={[{
-                  label: 'Throughput',
-                  data: chartData.map((d, i) => ({ x: i, y: d.throughput })),
-                }]}
-                height={200}
-              />
+              <ThemedChart data={chartData} height={200} xDataKey="time" yLabel="msg/s">
+                <Area dataKey="throughput" name="Throughput" stroke={CHART_COLORS[0]}
+                  fill={CHART_COLORS[0]} fillOpacity={0.1} strokeWidth={2} dot={false} />
+              </ThemedChart>
            </div>
            <div className={chartCardStyles.chartCard}>
              <div className={styles.chartTitle}>Latency</div>
-              <LineChart
-                series={[{
-                  label: 'Latency',
-                  data: chartData.map((d, i) => ({ x: i, y: d.latency })),
-                }]}
-                height={200}
-                threshold={{ value: 300, label: 'SLA 300ms' }}
-              />
+              <ThemedChart data={chartData} height={200} xDataKey="time" yLabel="ms">
+                <Line dataKey="latency" name="Latency" stroke={CHART_COLORS[0]} strokeWidth={2} dot={false} />
+                <ReferenceLine y={300} stroke="var(--error)" strokeDasharray="5 3"
+                  label={{ value: 'SLA 300ms', position: 'right', fill: 'var(--error)', fontSize: 9 }} />
+              </ThemedChart>
            </div>
            <div className={chartCardStyles.chartCard}>
              <div className={styles.chartTitle}>Errors</div>
-              <BarChart
-                series={[{
-                  label: 'Errors',
-                  data: chartData.map((d) => ({ x: d.time, y: d.errors })),
-                }]}
-                height={200}
-              />
+              <ThemedChart data={chartData} height={200} xDataKey="time" yLabel="errors">
+                <Bar dataKey="errors" name="Errors" fill={CHART_COLORS[1]} />
+              </ThemedChart>
            </div>
            <div className={chartCardStyles.chartCard}>
              <div className={styles.chartTitle}>Success Rate</div>
-              <AreaChart
-                series={[{
-                  label: 'Success Rate',
-                  data: chartData.map((d, i) => ({ x: i, y: d.successRate })),
-                }]}
-                height={200}
-              />
+              <ThemedChart data={chartData} height={200} xDataKey="time" yLabel="%">
+                <Area dataKey="successRate" name="Success Rate" stroke={CHART_COLORS[0]}
+                  fill={CHART_COLORS[0]} fillOpacity={0.1} strokeWidth={2} dot={false} />
+              </ThemedChart>
            </div>
          </div>
        )}
--- a/ui/src/pages/Routes/RoutesMetrics.tsx
+++ b/ui/src/pages/Routes/RoutesMetrics.tsx
@@ -3,9 +3,12 @@ import { useParams, useNavigate } from 'react-router';
 import {
  KpiStrip,
  DataTable,
-  AreaChart,
-  LineChart,
-  BarChart,
+  ThemedChart,
+  Area,
+  Line,
+  Bar,
+  ReferenceLine,
+  CHART_COLORS,
  Card,
  Sparkline,
  MonoText,
@@ -243,41 +246,17 @@ export default function RoutesMetrics() {
    [timeseries],
  );

-  // Chart series from timeseries buckets
-  const throughputChartSeries = useMemo(() => [{
-    label: 'Throughput',
-    data: (timeseries?.buckets || []).map((b, i) => ({
-      x: i as number,
-      y: b.totalCount,
+  // Flat chart data from timeseries buckets
+  const chartData = useMemo(() =>
+    (timeseries?.buckets || []).map((b, i) => ({
+      idx: i,
+      throughput: b.totalCount,
+      latency: b.avgDurationMs,
+      errors: b.failedCount,
+      volume: b.totalCount,
    })),
-  }], [timeseries]);
-
-  const latencyChartSeries = useMemo(() => [{
-    label: 'Latency',
-    data: (timeseries?.buckets || []).map((b, i) => ({
-      x: i as number,
-      y: b.avgDurationMs,
-    })),
-  }], [timeseries]);
-
-  const errorBarSeries = useMemo(() => [{
-    label: 'Errors',
-    data: (timeseries?.buckets || []).map((b) => {
-      const ts = new Date(b.time);
-      const label = !isNaN(ts.getTime())
-        ? ts.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-        : '—';
-      return { x: label, y: b.failedCount };
-    }),
-  }], [timeseries]);
-
-  const volumeChartSeries = useMemo(() => [{
-    label: 'Volume',
-    data: (timeseries?.buckets || []).map((b, i) => ({
-      x: i as number,
-      y: b.totalCount,
-    })),
-  }], [timeseries]);
+    [timeseries],
+  );

  const kpiItems = useMemo(() =>
    buildKpiItems(stats, rows.length, throughputSparkline, errorSparkline),
@@ -315,42 +294,34 @@ export default function RoutesMetrics() {
      </div>

      {/* 2x2 chart grid */}
-      {(timeseries?.buckets?.length ?? 0) > 0 && (
+      {chartData.length > 0 && (
        <div className={styles.chartGrid}>
          <Card title="Throughput (msg/s)">
-            <AreaChart
-              series={throughputChartSeries}
-              yLabel="msg/s"
-              height={200}
-              className={styles.chart}
-            />
+            <ThemedChart data={chartData} height={200} xDataKey="idx" yLabel="msg/s">
+              <Area dataKey="throughput" name="Throughput" stroke={CHART_COLORS[0]}
+                fill={CHART_COLORS[0]} fillOpacity={0.1} strokeWidth={2} dot={false} />
+            </ThemedChart>
          </Card>

          <Card title="Latency (ms)">
-            <LineChart
-              series={latencyChartSeries}
-              yLabel="ms"
-              threshold={{ value: 300, label: 'SLA 300ms' }}
-              height={200}
-              className={styles.chart}
-            />
+            <ThemedChart data={chartData} height={200} xDataKey="idx" yLabel="ms">
+              <Line dataKey="latency" name="Latency" stroke={CHART_COLORS[0]} strokeWidth={2} dot={false} />
+              <ReferenceLine y={300} stroke="var(--error)" strokeDasharray="5 3"
+                label={{ value: 'SLA 300ms', position: 'right', fill: 'var(--error)', fontSize: 9 }} />
+            </ThemedChart>
          </Card>

-          <Card title="Errors by Route">
-            <BarChart
-              series={errorBarSeries}
-              height={200}
-              className={styles.chart}
-            />
+          <Card title="Errors by Bucket">
+            <ThemedChart data={chartData} height={200} xDataKey="idx" yLabel="errors">
+              <Bar dataKey="errors" name="Errors" fill={CHART_COLORS[1]} />
+            </ThemedChart>
          </Card>

          <Card title="Message Volume (msg/min)">
-            <AreaChart
-              series={volumeChartSeries}
-              yLabel="msg/min"
-              height={200}
-              className={styles.chart}
-            />
+            <ThemedChart data={chartData} height={200} xDataKey="idx" yLabel="msg/min">
+              <Area dataKey="volume" name="Volume" stroke={CHART_COLORS[0]}
+                fill={CHART_COLORS[0]} fillOpacity={0.1} strokeWidth={2} dot={false} />
+            </ThemedChart>
          </Card>
        </div>
      )}