{
  "id": "meter-room-compare",
  "name": "Compare",
  "theme": "meter-room",
  "category": "Data & Reports",
  "description": "Four charts in a row on one shared axis — the system’s only comparison mode, because overlaying two meters hides which is which.",
  "layout": "A single y-axis label at the left and four equal charts beside it, all on the same declared ceiling, with per-chart figures beneath.",
  "modules": [
    {
      "key": "head",
      "name": "Comparison header",
      "html": "\n<header class=\"ch2\"><div><span class=\"k\">Compare · Block A main incomer</span><h1>Four Mondays</h1></div><span class=\"sc mn\">SHARED AXIS 0—250 kW · NO OVERLAY MODE EXISTS</span></header>"
    },
    {
      "key": "row",
      "name": "Chart row",
      "html": "\n<section class=\"cr\"><div class=\"yl big-y\"><span>250</span><span>187</span><span>125</span><span>62</span><span>0</span></div>\n<article><span class=\"k\">02 March</span><div class=\"ch\"><span class=\"gl\" style=\"top:25%\"></span><span class=\"gl\" style=\"top:50%\"></span><span class=\"gl\" style=\"top:75%\"></span><svg viewBox=\"0 0 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,54 25,50 50,42 75,34 100,30 125,32 150,36 175,44 200,46\"/></svg></div><div class=\"ax\"><span>00</span><span>12</span><span>24</span></div><p class=\"fg mn\">184 kW peak · 2,411 kWh</p></article>\n<article><span class=\"k\">09 March</span><div class=\"ch\"><span class=\"gl\" style=\"top:25%\"></span><span class=\"gl\" style=\"top:50%\"></span><span class=\"gl\" style=\"top:75%\"></span><svg viewBox=\"0 0 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,58 25,54 50,46 75,38 100,34 125,36 150,40 175,48 200,50\"/></svg></div><div class=\"ax\"><span>00</span><span>12</span><span>24</span></div><p class=\"fg mn\">176 kW peak · 2,308 kWh</p></article>\n<article><span class=\"k\">16 March</span><div class=\"ch\"><span class=\"gl\" style=\"top:25%\"></span><span class=\"gl\" style=\"top:50%\"></span><span class=\"gl\" style=\"top:75%\"></span><svg viewBox=\"0 0 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,80 25,79 50,74 75,70 100,68 125,70 150,72 175,78 200,80\"/></svg></div><div class=\"ax\"><span>00</span><span>12</span><span>24</span></div><p class=\"fg mn\">72 kW peak · 1,104 kWh</p></article>\n<article><span class=\"k\">23 March</span><div class=\"ch\"><span class=\"gl\" style=\"top:25%\"></span><span class=\"gl\" style=\"top:50%\"></span><span class=\"gl\" style=\"top:75%\"></span><svg viewBox=\"0 0 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,52 25,46 50,36 75,26 100,20 125,22 150,28 175,40 200,44\"/></svg></div><div class=\"ax\"><span>00</span><span>12</span><span>24</span></div><p class=\"fg mn\">210 kW peak · 2,690 kWh</p></article>\n</section>"
    },
    {
      "key": "read",
      "name": "What it shows",
      "html": "\n<section class=\"rd\"><span class=\"k\">The sixteenth was a bank holiday</span><p>On an auto-scaling chart the sixteenth would fill its frame exactly like the other three and would be indistinguishable from them at a glance. On the fixed scale it is visibly a third of a normal Monday, which is the only reason anyone opened this screen.</p></section>"
    },
    {
      "key": "table",
      "name": "Figures table",
      "html": "\n<footer class=\"tb\"><div class=\"hd\"><span>Date</span><span>Peak</span><span>Consumption</span><span>Load factor</span><span>Cost</span><span>Note</span></div>\n<div class=\"rw\"><span class=\"mn\">02 Mar</span><span class=\"mn\">184 kW</span><span class=\"mn\">2,411 kWh</span><span class=\"mn\">0.55</span><span class=\"mn\">£581.05</span><span>Typical</span></div>\n<div class=\"rw\"><span class=\"mn\">09 Mar</span><span class=\"mn\">176 kW</span><span class=\"mn\">2,308 kWh</span><span class=\"mn\">0.55</span><span class=\"mn\">£556.23</span><span>Typical</span></div>\n<div class=\"rw\"><span class=\"mn\">16 Mar</span><span class=\"mn\">72 kW</span><span class=\"mn\">1,104 kWh</span><span class=\"mn\">0.64</span><span class=\"mn\">£266.06</span><span>Bank holiday</span></div>\n<div class=\"rw\"><span class=\"mn\">23 Mar</span><span class=\"mn\">210 kW</span><span class=\"mn\">2,690 kWh</span><span class=\"mn\">0.53</span><span class=\"mn\">£648.29</span><span>Chiller commissioning</span></div>\n</footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "meter-room-compare",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:44:43+09:00",
    "updatedAt": "2026-09-02T01:44:43+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/meter-room-compare.json",
  "structure": "A single y-axis label at the left and four equal charts beside it, all on the same declared ceiling, with per-chart figures beneath.",
  "html": "<div class=\"dz dz-meter-room-compare\" data-design=\"meter-room-compare\" data-theme=\"meter-room\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Comparison header\">\n<header class=\"ch2\"><div><span class=\"k\">Compare · Block A main incomer</span><h1>Four Mondays</h1></div><span class=\"sc mn\">SHARED AXIS 0—250 kW · NO OVERLAY MODE EXISTS</span></header></section>\n<section class=\"dz-mod\" data-mod=\"row\" aria-label=\"Chart row\">\n<section class=\"cr\"><div class=\"yl big-y\"><span>250</span><span>187</span><span>125</span><span>62</span><span>0</span></div>\n<article><span class=\"k\">02 March</span><div class=\"ch\"><span class=\"gl\" style=\"top:25%\"></span><span class=\"gl\" style=\"top:50%\"></span><span class=\"gl\" style=\"top:75%\"></span><svg viewBox=\"0 0 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,54 25,50 50,42 75,34 100,30 125,32 150,36 175,44 200,46\"/></svg></div><div class=\"ax\"><span>00</span><span>12</span><span>24</span></div><p class=\"fg mn\">184 kW peak · 2,411 kWh</p></article>\n<article><span class=\"k\">09 March</span><div class=\"ch\"><span class=\"gl\" style=\"top:25%\"></span><span class=\"gl\" style=\"top:50%\"></span><span class=\"gl\" style=\"top:75%\"></span><svg viewBox=\"0 0 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,58 25,54 50,46 75,38 100,34 125,36 150,40 175,48 200,50\"/></svg></div><div class=\"ax\"><span>00</span><span>12</span><span>24</span></div><p class=\"fg mn\">176 kW peak · 2,308 kWh</p></article>\n<article><span class=\"k\">16 March</span><div class=\"ch\"><span class=\"gl\" style=\"top:25%\"></span><span class=\"gl\" style=\"top:50%\"></span><span class=\"gl\" style=\"top:75%\"></span><svg viewBox=\"0 0 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,80 25,79 50,74 75,70 100,68 125,70 150,72 175,78 200,80\"/></svg></div><div class=\"ax\"><span>00</span><span>12</span><span>24</span></div><p class=\"fg mn\">72 kW peak · 1,104 kWh</p></article>\n<article><span class=\"k\">23 March</span><div class=\"ch\"><span class=\"gl\" style=\"top:25%\"></span><span class=\"gl\" style=\"top:50%\"></span><span class=\"gl\" style=\"top:75%\"></span><svg viewBox=\"0 0 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,52 25,46 50,36 75,26 100,20 125,22 150,28 175,40 200,44\"/></svg></div><div class=\"ax\"><span>00</span><span>12</span><span>24</span></div><p class=\"fg mn\">210 kW peak · 2,690 kWh</p></article>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"read\" aria-label=\"What it shows\">\n<section class=\"rd\"><span class=\"k\">The sixteenth was a bank holiday</span><p>On an auto-scaling chart the sixteenth would fill its frame exactly like the other three and would be indistinguishable from them at a glance. On the fixed scale it is visibly a third of a normal Monday, which is the only reason anyone opened this screen.</p></section></section>\n<section class=\"dz-mod\" data-mod=\"table\" aria-label=\"Figures table\">\n<footer class=\"tb\"><div class=\"hd\"><span>Date</span><span>Peak</span><span>Consumption</span><span>Load factor</span><span>Cost</span><span>Note</span></div>\n<div class=\"rw\"><span class=\"mn\">02 Mar</span><span class=\"mn\">184 kW</span><span class=\"mn\">2,411 kWh</span><span class=\"mn\">0.55</span><span class=\"mn\">£581.05</span><span>Typical</span></div>\n<div class=\"rw\"><span class=\"mn\">09 Mar</span><span class=\"mn\">176 kW</span><span class=\"mn\">2,308 kWh</span><span class=\"mn\">0.55</span><span class=\"mn\">£556.23</span><span>Typical</span></div>\n<div class=\"rw\"><span class=\"mn\">16 Mar</span><span class=\"mn\">72 kW</span><span class=\"mn\">1,104 kWh</span><span class=\"mn\">0.64</span><span class=\"mn\">£266.06</span><span>Bank holiday</span></div>\n<div class=\"rw\"><span class=\"mn\">23 Mar</span><span class=\"mn\">210 kW</span><span class=\"mn\">2,690 kWh</span><span class=\"mn\">0.53</span><span class=\"mn\">£648.29</span><span>Chiller commissioning</span></div>\n</footer></section>\n</div>",
  "css": "\n.dz-meter-room-compare { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 22px; }\n.dz-meter-room-compare .k { text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); display: block; }\n.dz-meter-room-compare .mn { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; }\n.dz-meter-room-compare .ch2 { display: flex; align-items: flex-end; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }\n.dz-meter-room-compare h1 { font-size: 29px; font-weight: 600; letter-spacing: -.012em; margin: 5px 0 0; }\n.dz-meter-room-compare .sc { color: var(--muted-foreground); margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; }\n.dz-meter-room-compare .cr { display: grid; grid-template-columns: 38px repeat(4, 1fr); gap: 16px; align-items: start; }\n\n.dz-meter-room-compare .ch { position: relative; height: 96px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); }\n.dz-meter-room-compare .ch .gl { position: absolute; left: 0; right: 0; border-top: 1px dashed color-mix(in oklab, var(--muted-foreground) 40%, transparent); }\n.dz-meter-room-compare .ch svg { position: absolute; inset: 0; width: 100%; height: 100%; }\n.dz-meter-room-compare .ch polyline { fill: none; stroke: var(--primary); stroke-width: 1.5; vector-effect: non-scaling-stroke; }\n.dz-meter-room-compare .ch polyline.clip { stroke: var(--accent); stroke-width: 3; }\n.dz-meter-room-compare .ch .cap { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent); }\n.dz-meter-room-compare .ax { display: flex; justify-content: space-between; font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; font-size: 10px; color: var(--muted-foreground); margin-top: 5px; }\n.dz-meter-room-compare .yl { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; font-size: 10px; color: var(--muted-foreground); display: flex; flex-direction: column; justify-content: space-between; height: 96px; text-align: right; }\n.dz-meter-room-compare .big-y { height: 96px; margin-top: 22px; }\n.dz-meter-room-compare .cr article .k { margin-bottom: 6px; }\n.dz-meter-room-compare .fg { margin: 10px 0 0; color: var(--muted-foreground); }\n.dz-meter-room-compare .rd { margin: 22px 0; }\n.dz-meter-room-compare .rd p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted-foreground); max-width: 72ch; }\n.dz-meter-room-compare .tb .hd, .dz-meter-room-compare .tb .rw { display: grid; grid-template-columns: 90px 90px 130px 110px 110px 1fr; gap: 14px; align-items: center; }\n.dz-meter-room-compare .tb .hd { text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); height: 30px; border-bottom: 1px solid var(--border); }\n.dz-meter-room-compare .tb .rw { height: 34px; border-bottom: 1px solid var(--border); font-size: 13px; }\n@media (prefers-reduced-motion: reduce) { .dz-meter-room-compare *, .dz-meter-room-compare *::before, .dz-meter-room-compare *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/meter-room.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600;700&display=swap"
}