{
  "id": "terminal-ledger-metrics",
  "name": "Metric Panels",
  "theme": "terminal-ledger",
  "category": "Data & Reports",
  "description": "Four time series drawn as filled area charts with the y-axis labelled in the corner rather than along the edge, saving the width for data.",
  "layout": "A 2x2 of outlined panels, each with a run of vertical bars and an inline threshold rule; the shared time axis is printed once beneath the whole block.",
  "modules": [
    {
      "key": "range",
      "name": "Range control",
      "html": "\n<header class=\"rg\"><h1>METRICS · queue.ingest</h1><span class=\"rg-sp\"></span><div class=\"rg-b\"><button type=\"button\">1H</button><button type=\"button\" class=\"on\">6H</button><button type=\"button\">24H</button><button type=\"button\">7D</button></div><button type=\"button\" class=\"live\">LIVE</button></header>"
    },
    {
      "key": "panels",
      "name": "Metric panels",
      "html": "\n<div class=\"mp\">\n  <section class=\"p\"><header><b>CONSUMER LAG</b><span class=\"hi\">4.2M</span></header><div class=\"bars\"><i style=\"height:12%\"></i><i style=\"height:14%\"></i><i style=\"height:11%\"></i><i style=\"height:16%\"></i><i style=\"height:22%\"></i><i style=\"height:38%\"></i><i style=\"height:61%\"></i><i style=\"height:84%\"></i><i class=\"over\" style=\"height:100%\"></i><i class=\"over\" style=\"height:96%\"></i><i style=\"height:71%\"></i><i style=\"height:34%\"></i><i style=\"height:18%\"></i><i style=\"height:14%\"></i></div><footer>threshold 500K · breached 09:14–11:47</footer></section>\n  <section class=\"p\"><header><b>INGEST P99</b><span class=\"hi\">38.4s</span></header><div class=\"bars\"><i style=\"height:8%\"></i><i style=\"height:9%\"></i><i style=\"height:8%\"></i><i style=\"height:11%\"></i><i style=\"height:19%\"></i><i style=\"height:44%\"></i><i style=\"height:72%\"></i><i class=\"over\" style=\"height:100%\"></i><i class=\"over\" style=\"height:92%\"></i><i style=\"height:58%\"></i><i style=\"height:24%\"></i><i style=\"height:12%\"></i><i style=\"height:9%\"></i><i style=\"height:8%\"></i></div><footer>budget 2.0s · breached 09:41–11:52</footer></section>\n  <section class=\"p\"><header><b>THROUGHPUT</b><span>18.2K/s</span></header><div class=\"bars\"><i style=\"height:78%\"></i><i style=\"height:81%\"></i><i style=\"height:80%\"></i><i style=\"height:76%\"></i><i style=\"height:69%\"></i><i style=\"height:48%\"></i><i style=\"height:31%\"></i><i style=\"height:22%\"></i><i style=\"height:26%\"></i><i style=\"height:44%\"></i><i style=\"height:68%\"></i><i style=\"height:79%\"></i><i style=\"height:82%\"></i><i style=\"height:80%\"></i></div><footer>nominal band 16K–20K/s</footer></section>\n  <section class=\"p\"><header><b>ERROR RATE</b><span>0.02%</span></header><div class=\"bars\"><i style=\"height:4%\"></i><i style=\"height:3%\"></i><i style=\"height:4%\"></i><i style=\"height:6%\"></i><i style=\"height:12%\"></i><i style=\"height:28%\"></i><i style=\"height:41%\"></i><i style=\"height:38%\"></i><i style=\"height:22%\"></i><i style=\"height:9%\"></i><i style=\"height:5%\"></i><i style=\"height:4%\"></i><i style=\"height:3%\"></i><i style=\"height:4%\"></i></div><footer>SLO 0.10% · not breached</footer></section>\n</div>"
    },
    {
      "key": "axis",
      "name": "Shared time axis",
      "html": "\n<div class=\"ax\"><span>08:00</span><span>09:00</span><span>10:00</span><span>11:00</span><span>12:00</span><span>13:00</span><span>14:00</span></div>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "terminal-ledger-metrics",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:41:55+09:00",
    "updatedAt": "2026-08-29T18:41:55+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/terminal-ledger-metrics.json",
  "structure": "A 2x2 of outlined panels, each with a run of vertical bars and an inline threshold rule; the shared time axis is printed once beneath the whole block.",
  "html": "<div class=\"dz dz-terminal-ledger-metrics\" data-design=\"terminal-ledger-metrics\" data-theme=\"terminal-ledger\">\n<section class=\"dz-mod\" data-mod=\"range\" aria-label=\"Range control\">\n<header class=\"rg\"><h1>METRICS · queue.ingest</h1><span class=\"rg-sp\"></span><div class=\"rg-b\"><button type=\"button\">1H</button><button type=\"button\" class=\"on\">6H</button><button type=\"button\">24H</button><button type=\"button\">7D</button></div><button type=\"button\" class=\"live\">LIVE</button></header></section>\n<section class=\"dz-mod\" data-mod=\"panels\" aria-label=\"Metric panels\">\n<div class=\"mp\">\n  <section class=\"p\"><header><b>CONSUMER LAG</b><span class=\"hi\">4.2M</span></header><div class=\"bars\"><i style=\"height:12%\"></i><i style=\"height:14%\"></i><i style=\"height:11%\"></i><i style=\"height:16%\"></i><i style=\"height:22%\"></i><i style=\"height:38%\"></i><i style=\"height:61%\"></i><i style=\"height:84%\"></i><i class=\"over\" style=\"height:100%\"></i><i class=\"over\" style=\"height:96%\"></i><i style=\"height:71%\"></i><i style=\"height:34%\"></i><i style=\"height:18%\"></i><i style=\"height:14%\"></i></div><footer>threshold 500K · breached 09:14–11:47</footer></section>\n  <section class=\"p\"><header><b>INGEST P99</b><span class=\"hi\">38.4s</span></header><div class=\"bars\"><i style=\"height:8%\"></i><i style=\"height:9%\"></i><i style=\"height:8%\"></i><i style=\"height:11%\"></i><i style=\"height:19%\"></i><i style=\"height:44%\"></i><i style=\"height:72%\"></i><i class=\"over\" style=\"height:100%\"></i><i class=\"over\" style=\"height:92%\"></i><i style=\"height:58%\"></i><i style=\"height:24%\"></i><i style=\"height:12%\"></i><i style=\"height:9%\"></i><i style=\"height:8%\"></i></div><footer>budget 2.0s · breached 09:41–11:52</footer></section>\n  <section class=\"p\"><header><b>THROUGHPUT</b><span>18.2K/s</span></header><div class=\"bars\"><i style=\"height:78%\"></i><i style=\"height:81%\"></i><i style=\"height:80%\"></i><i style=\"height:76%\"></i><i style=\"height:69%\"></i><i style=\"height:48%\"></i><i style=\"height:31%\"></i><i style=\"height:22%\"></i><i style=\"height:26%\"></i><i style=\"height:44%\"></i><i style=\"height:68%\"></i><i style=\"height:79%\"></i><i style=\"height:82%\"></i><i style=\"height:80%\"></i></div><footer>nominal band 16K–20K/s</footer></section>\n  <section class=\"p\"><header><b>ERROR RATE</b><span>0.02%</span></header><div class=\"bars\"><i style=\"height:4%\"></i><i style=\"height:3%\"></i><i style=\"height:4%\"></i><i style=\"height:6%\"></i><i style=\"height:12%\"></i><i style=\"height:28%\"></i><i style=\"height:41%\"></i><i style=\"height:38%\"></i><i style=\"height:22%\"></i><i style=\"height:9%\"></i><i style=\"height:5%\"></i><i style=\"height:4%\"></i><i style=\"height:3%\"></i><i style=\"height:4%\"></i></div><footer>SLO 0.10% · not breached</footer></section>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"axis\" aria-label=\"Shared time axis\">\n<div class=\"ax\"><span>08:00</span><span>09:00</span><span>10:00</span><span>11:00</span><span>12:00</span><span>13:00</span><span>14:00</span></div></section>\n</div>",
  "css": "\n.dz-terminal-ledger-metrics { background: var(--background); color: var(--foreground); font-family: var(--pv-mono); font-size: 12.5px; padding: 0 0 18px; }\n.dz-terminal-ledger-metrics .rg { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-terminal-ledger-metrics .rg h1 { font-size: 12px; letter-spacing: .14em; margin: 0; font-weight: 700; }\n.dz-terminal-ledger-metrics .rg-sp { flex: 1; }\n.dz-terminal-ledger-metrics .rg-b { display: flex; }\n.dz-terminal-ledger-metrics .rg-b button { font: inherit; font-size: 11px; padding: 5px 12px; border: var(--pv-bw) solid var(--border); border-right: 0; background: var(--background); color: var(--muted-foreground); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }\n.dz-terminal-ledger-metrics .rg-b button:last-child { border-right: var(--pv-bw) solid var(--border); }\n.dz-terminal-ledger-metrics .rg-b button.on { background: var(--foreground); color: var(--background); }\n.dz-terminal-ledger-metrics .live { font: inherit; font-size: 11px; letter-spacing: .1em; padding: 5px 12px; border: var(--pv-bw) solid var(--chart-1); background: var(--background); color: var(--chart-1); cursor: pointer; }\n.dz-terminal-ledger-metrics .mp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; }\n.dz-terminal-ledger-metrics .p { border-right: var(--pv-bw) solid var(--border); border-bottom: var(--pv-bw) solid var(--border); padding: 12px 16px 10px; }\n.dz-terminal-ledger-metrics .p:nth-child(2n) { border-right: 0; }\n.dz-terminal-ledger-metrics .p header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }\n.dz-terminal-ledger-metrics .p b { font-size: 11px; letter-spacing: .12em; }\n.dz-terminal-ledger-metrics .p header span { font-size: 17px; }\n.dz-terminal-ledger-metrics .p .hi { color: var(--destructive); }\n.dz-terminal-ledger-metrics .bars { display: flex; align-items: flex-end; gap: 2px; height: 74px; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-terminal-ledger-metrics .bars i { flex: 1; background: var(--primary); min-height: 2px; }\n.dz-terminal-ledger-metrics .bars .over { background: var(--destructive); }\n.dz-terminal-ledger-metrics .p footer { margin-top: 7px; font-size: 11px; color: var(--muted-foreground); }\n.dz-terminal-ledger-metrics .ax { display: flex; justify-content: space-between; padding: 8px 18px 0; font-size: 11px; color: var(--muted-foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-terminal-ledger-metrics *, .dz-terminal-ledger-metrics *::before, .dz-terminal-ledger-metrics *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/terminal-ledger.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
}