feat: consolidate punchcard heatmaps into single toggle component

Replace two separate Transaction/Error punchcard cards with a single card containing a Transactions/Errors toggle. Uses internal state to switch between modes without remounting the chart. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-30 15:45:22 +02:00
parent 52c22f1eb9
commit 4a91ca0774
4 changed files with 120 additions and 79 deletions
--- a/ui/src/pages/DashboardTab/DashboardL1.tsx
+++ b/ui/src/pages/DashboardTab/DashboardL1.tsx
@@ -456,14 +456,9 @@ export default function DashboardL1() {
              onItemClick={(id) => navigate(`/dashboard/${id}`)}
            />
          </Card>
-          <div className={styles.punchcardStack}>
-            <Card title="Transactions (7-day pattern)">
-              <PunchcardHeatmap cells={punchcardData ?? []} mode="transactions" />
-            </Card>
-            <Card title="Errors (7-day pattern)">
-              <PunchcardHeatmap cells={punchcardData ?? []} mode="errors" />
-            </Card>
-          </div>
+          <Card title="7-Day Pattern">
+            <PunchcardHeatmap cells={punchcardData ?? []} />
+          </Card>
        </div>
      )}
    </div>
--- a/ui/src/pages/DashboardTab/DashboardL2.tsx
+++ b/ui/src/pages/DashboardTab/DashboardL2.tsx
@@ -437,14 +437,9 @@ export default function DashboardL2() {
              onItemClick={(id) => navigate(`/dashboard/${appId}/${id}`)}
            />
          </Card>
-          <div className={styles.punchcardStack}>
-            <Card title="Transactions (7-day pattern)">
-              <PunchcardHeatmap cells={punchcardData ?? []} mode="transactions" />
-            </Card>
-            <Card title="Errors (7-day pattern)">
-              <PunchcardHeatmap cells={punchcardData ?? []} mode="errors" />
-            </Card>
-          </div>
+          <Card title="7-Day Pattern">
+            <PunchcardHeatmap cells={punchcardData ?? []} />
+          </Card>
        </div>
      )}
    </div>
--- a/ui/src/pages/DashboardTab/DashboardTab.module.css
+++ b/ui/src/pages/DashboardTab/DashboardTab.module.css
@@ -140,6 +140,37 @@
  gap: 16px;
 }

+/* Toggle button row */
+.toggleRow {
+  display: flex;
+  gap: 2px;
+  padding: 0 12px 4px;
+}
+
+.toggleBtn {
+  padding: 3px 10px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--text-muted);
+  background: transparent;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.toggleBtn:hover {
+  color: var(--text-primary);
+  border-color: var(--border);
+}
+
+.toggleActive {
+  color: var(--text-primary);
+  background: var(--bg-inset);
+  border-color: var(--border);
+  font-weight: 600;
+}
+
 /* Errors section */
 .errorsSection {
  background: var(--bg-surface);
--- a/ui/src/pages/DashboardTab/PunchcardHeatmap.tsx
+++ b/ui/src/pages/DashboardTab/PunchcardHeatmap.tsx
@@ -1,9 +1,10 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import {
  ScatterChart, Scatter, XAxis, YAxis, Tooltip,
  ResponsiveContainer, Rectangle,
 } from 'recharts';
 import { rechartsTheme } from '@cameleer/design-system';
+import styles from './DashboardTab.module.css';

 export interface PunchcardCell {
  weekday: number;
@@ -14,9 +15,10 @@ export interface PunchcardCell {

 interface PunchcardHeatmapProps {
  cells: PunchcardCell[];
-  mode: 'transactions' | 'errors';
 }

+type Mode = 'transactions' | 'errors';
+
 const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

 function transactionColor(ratio: number): string {
@@ -43,7 +45,6 @@ function HeatmapCell(props: Record<string, unknown>) {
    cx: number; cy: number; payload: HeatmapPoint;
  };
  if (!payload) return null;
-  // Cell size: chart area / grid divisions. Approximate from scatter positioning.
  const cellW = 32;
  const cellH = 10;
  return (
@@ -66,70 +67,89 @@ function formatHour(value: number): string {
  return String(value).padStart(2, '0');
 }

-export function PunchcardHeatmap({ cells, mode }: PunchcardHeatmapProps) {
-  const data: HeatmapPoint[] = useMemo(() => {
-    const values = cells.map(c => mode === 'errors' ? c.failedCount : c.totalCount);
-    const maxVal = Math.max(...values, 1);
+function buildGrid(cells: PunchcardCell[], mode: Mode): HeatmapPoint[] {
+  const values = cells.map(c => mode === 'errors' ? c.failedCount : c.totalCount);
+  const maxVal = Math.max(...values, 1);

-    // Build full 7x24 grid
-    const points: HeatmapPoint[] = [];
-    const cellMap = new Map<string, PunchcardCell>();
-    for (const c of cells) cellMap.set(`${c.weekday}-${c.hour}`, c);
+  const cellMap = new Map<string, PunchcardCell>();
+  for (const c of cells) cellMap.set(`${c.weekday}-${c.hour}`, c);

-    for (let d = 0; d < 7; d++) {
-      for (let h = 0; h < 24; h++) {
-        const cell = cellMap.get(`${d}-${h}`);
-        const val = cell ? (mode === 'errors' ? cell.failedCount : cell.totalCount) : 0;
-        const ratio = maxVal > 0 ? val / maxVal : 0;
-        points.push({
-          weekday: d,
-          hour: h,
-          value: val,
-          fill: mode === 'errors' ? errorColor(ratio) : transactionColor(ratio),
-        });
-      }
+  const points: HeatmapPoint[] = [];
+  for (let d = 0; d < 7; d++) {
+    for (let h = 0; h < 24; h++) {
+      const cell = cellMap.get(`${d}-${h}`);
+      const val = cell ? (mode === 'errors' ? cell.failedCount : cell.totalCount) : 0;
+      const ratio = maxVal > 0 ? val / maxVal : 0;
+      points.push({
+        weekday: d,
+        hour: h,
+        value: val,
+        fill: mode === 'errors' ? errorColor(ratio) : transactionColor(ratio),
+      });
    }
-    return points;
-  }, [cells, mode]);
+  }
+  return points;
+}
+
+export function PunchcardHeatmap({ cells }: PunchcardHeatmapProps) {
+  const [mode, setMode] = useState<Mode>('transactions');
+
+  const data = useMemo(() => buildGrid(cells, mode), [cells, mode]);

  return (
-    <ResponsiveContainer width="100%" height={300}>
-      <ScatterChart margin={{ top: 10, right: 10, bottom: 10, left: 10 }}>
-        <XAxis
-          type="number"
-          dataKey="weekday"
-          domain={[0, 6]}
-          ticks={[0, 1, 2, 3, 4, 5, 6]}
-          tickFormatter={formatDay}
-          {...rechartsTheme.xAxis}
-        />
-        <YAxis
-          type="number"
-          dataKey="hour"
-          domain={[0, 23]}
-          ticks={[0, 4, 8, 12, 16, 20]}
-          tickFormatter={formatHour}
-          reversed
-          {...rechartsTheme.yAxis}
-        />
-        <Tooltip
-          contentStyle={rechartsTheme.tooltip.contentStyle}
-          labelStyle={rechartsTheme.tooltip.labelStyle}
-          itemStyle={rechartsTheme.tooltip.itemStyle}
-          cursor={false}
-          formatter={(_val: unknown, _name: string, entry: { payload?: HeatmapPoint }) => {
-            const p = entry.payload;
-            if (!p) return '';
-            return [`${p.value.toLocaleString()} ${mode}`, `${DAYS[p.weekday]} ${formatHour(p.hour)}:00`];
-          }}
-          labelFormatter={() => ''}
-        />
-        <Scatter
-          data={data}
-          shape={(props: unknown) => <HeatmapCell {...(props as Record<string, unknown>)} />}
-          isAnimationActive={false}
-        />
-      </ScatterChart>
-    </ResponsiveContainer>
+    <div>
+      <div className={styles.toggleRow}>
+        <button
+          className={`${styles.toggleBtn} ${mode === 'transactions' ? styles.toggleActive : ''}`}
+          onClick={() => setMode('transactions')}
+        >
+          Transactions
+        </button>
+        <button
+          className={`${styles.toggleBtn} ${mode === 'errors' ? styles.toggleActive : ''}`}
+          onClick={() => setMode('errors')}
+        >
+          Errors
+        </button>
+      </div>
+      <ResponsiveContainer width="100%" height={280}>
+        <ScatterChart margin={{ top: 10, right: 10, bottom: 10, left: 10 }}>
+          <XAxis
+            type="number"
+            dataKey="weekday"
+            domain={[0, 6]}
+            ticks={[0, 1, 2, 3, 4, 5, 6]}
+            tickFormatter={formatDay}
+            {...rechartsTheme.xAxis}
+          />
+          <YAxis
+            type="number"
+            dataKey="hour"
+            domain={[0, 23]}
+            ticks={[0, 4, 8, 12, 16, 20]}
+            tickFormatter={formatHour}
+            reversed
+            {...rechartsTheme.yAxis}
+          />
+          <Tooltip
+            contentStyle={rechartsTheme.tooltip.contentStyle}
+            labelStyle={rechartsTheme.tooltip.labelStyle}
+            itemStyle={rechartsTheme.tooltip.itemStyle}
+            cursor={false}
+            formatter={(_val: unknown, _name: string, entry: { payload?: HeatmapPoint }) => {
+              const p = entry.payload;
+              if (!p) return '';
+              return [`${p.value.toLocaleString()} ${mode}`, `${DAYS[p.weekday]} ${formatHour(p.hour)}:00`];
+            }}
+            labelFormatter={() => ''}
+          />
+          <Scatter
+            data={data}
+            shape={(props: unknown) => <HeatmapCell {...(props as Record<string, unknown>)} />}
+            isAnimationActive={false}
+          />
+        </ScatterChart>
+      </ResponsiveContainer>
+    </div>
  );
 }