commit c584628151139a73081d303785d78494a9ef5dec
parent 3e131af7eb6526ce76dd799db9e8624b26fe20ea
Author: Brian Graham <brian@buildingbetterteams.de>
Date: Sat, 4 Apr 2026 09:58:13 +0200
Restyle bar charts to match SMUI
- Frost/aurora colors per model (haiku=cyan, sonnet=yellow, opus=purple)
- No rounded bar corners (radius=0)
- JetBrains Mono on all axes and tooltips
- Sharp tooltip with surface-1 background, no border-radius
- Removed vertical grid lines, subtle cursor highlight
- Consistent with the rest of the SMUI design system
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Diffstat:
1 file changed, 85 insertions(+), 25 deletions(-)
diff --git a/dashboard/src/components/Charts.tsx b/dashboard/src/components/Charts.tsx
@@ -7,6 +7,7 @@ import {
Tooltip,
ResponsiveContainer,
Legend,
+ Cell,
} from "recharts";
import type { Run } from "../lib/types";
@@ -21,6 +22,37 @@ interface ModelScore {
count: number;
}
+const SMUI = {
+ surface0: "hsl(213 16% 12%)",
+ surface1: "hsl(217 16% 15.5%)",
+ surface2: "hsl(216 15% 19%)",
+ border: "hsl(217 17% 28%)",
+ muted: "hsl(213 14% 65%)",
+ frost1: "hsl(176 25% 65%)",
+ frost2: "hsl(193 44% 67%)",
+ frost3: "hsl(210 34% 63%)",
+ frost4: "hsl(213 32% 52%)",
+ green: "hsl(92 28% 65%)",
+ yellow: "hsl(40 71% 73%)",
+ red: "hsl(355 52% 64%)",
+ purple: "hsl(311 24% 63%)",
+};
+
+const MODEL_COLORS: Record<string, string> = {
+ haiku: SMUI.frost2,
+ sonnet: SMUI.yellow,
+ opus: SMUI.purple,
+};
+
+const TOOLTIP_STYLE = {
+ background: SMUI.surface1,
+ border: `1px solid ${SMUI.border}`,
+ borderRadius: "0",
+ fontFamily: "'JetBrains Mono', monospace",
+ fontSize: "11px",
+ padding: "8px 12px",
+};
+
function aggregateByModel(runs: Run[]): ModelScore[] {
const byModel: Record<string, { scores: number[]; costs: number[] }> = {};
@@ -90,7 +122,7 @@ function aggregateByTask(runs: Run[]): TaskScore[] {
export default function Charts({ runs }: ChartsProps) {
if (runs.length === 0) {
return (
- <div className="card" style={{ textAlign: "center", padding: "40px", color: "var(--text-muted)" }}>
+ <div className="card" style={{ textAlign: "center", padding: "40px", color: SMUI.muted }}>
No data to chart yet.
</div>
);
@@ -100,22 +132,35 @@ export default function Charts({ runs }: ChartsProps) {
const taskData = aggregateByTask(runs);
return (
- <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "24px" }}>
+ <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "16px" }}>
<div className="card">
<h3 style={{ marginBottom: "16px" }}>Average Score by Model</h3>
<ResponsiveContainer width="100%" height={250}>
- <BarChart data={modelData}>
- <CartesianGrid strokeDasharray="3 3" stroke="#2d3045" />
- <XAxis dataKey="model" stroke="#9ca3af" fontSize={12} />
- <YAxis stroke="#9ca3af" fontSize={12} domain={[0, 100]} />
- <Tooltip
- contentStyle={{
- background: "#1a1d27",
- border: "1px solid #2d3045",
- borderRadius: "6px",
- }}
+ <BarChart data={modelData} barCategoryGap="20%">
+ <CartesianGrid strokeDasharray="3 3" stroke={SMUI.border} vertical={false} />
+ <XAxis
+ dataKey="model"
+ stroke={SMUI.muted}
+ fontSize={11}
+ fontFamily="'JetBrains Mono', monospace"
+ tickLine={false}
+ axisLine={{ stroke: SMUI.border }}
/>
- <Bar dataKey="avg_score" fill="#6366f1" name="Avg Score %" radius={[4, 4, 0, 0]} />
+ <YAxis
+ stroke={SMUI.muted}
+ fontSize={11}
+ fontFamily="'JetBrains Mono', monospace"
+ domain={[0, 100]}
+ tickLine={false}
+ axisLine={false}
+ />
+ <Tooltip contentStyle={TOOLTIP_STYLE} cursor={{ fill: "hsl(217 17% 28% / 0.3)" }} />
+ <Bar dataKey="avg_score" name="Avg Score %" radius={0}>
+ {modelData.map((entry) => {
+ const baseModel = entry.model.split(" ")[0];
+ return <Cell key={entry.model} fill={MODEL_COLORS[baseModel] || SMUI.frost2} />;
+ })}
+ </Bar>
</BarChart>
</ResponsiveContainer>
</div>
@@ -123,20 +168,35 @@ export default function Charts({ runs }: ChartsProps) {
<div className="card">
<h3 style={{ marginBottom: "16px" }}>Pass Rate by Task</h3>
<ResponsiveContainer width="100%" height={250}>
- <BarChart data={taskData}>
- <CartesianGrid strokeDasharray="3 3" stroke="#2d3045" />
- <XAxis dataKey="task" stroke="#9ca3af" fontSize={12} />
- <YAxis stroke="#9ca3af" fontSize={12} domain={[0, 100]} />
- <Tooltip
- contentStyle={{
- background: "#1a1d27",
- border: "1px solid #2d3045",
- borderRadius: "6px",
+ <BarChart data={taskData} barCategoryGap="20%">
+ <CartesianGrid strokeDasharray="3 3" stroke={SMUI.border} vertical={false} />
+ <XAxis
+ dataKey="task"
+ stroke={SMUI.muted}
+ fontSize={11}
+ fontFamily="'JetBrains Mono', monospace"
+ tickLine={false}
+ axisLine={{ stroke: SMUI.border }}
+ />
+ <YAxis
+ stroke={SMUI.muted}
+ fontSize={11}
+ fontFamily="'JetBrains Mono', monospace"
+ domain={[0, 100]}
+ tickLine={false}
+ axisLine={false}
+ />
+ <Tooltip contentStyle={TOOLTIP_STYLE} cursor={{ fill: "hsl(217 17% 28% / 0.3)" }} />
+ <Legend
+ wrapperStyle={{
+ fontFamily: "'JetBrains Mono', monospace",
+ fontSize: "11px",
+ textTransform: "uppercase",
+ letterSpacing: "0.5px",
}}
/>
- <Legend />
- <Bar dataKey="avg_score" fill="#6366f1" name="Avg Score %" radius={[4, 4, 0, 0]} />
- <Bar dataKey="pass_rate" fill="#22c55e" name="Pass Rate %" radius={[4, 4, 0, 0]} />
+ <Bar dataKey="avg_score" fill={SMUI.frost2} name="Avg Score %" radius={0} />
+ <Bar dataKey="pass_rate" fill={SMUI.green} name="Pass Rate %" radius={0} />
</BarChart>
</ResponsiveContainer>
</div>
