Add vertical bar chart UI with Hono mock server

2026-08-18 13:22:17 +00:00 · 2026-06-22 18:50:24 +05:30
parent 335cdfdea8
commit 0d8dbf1368
5 changed files with 186 additions and 4 deletions
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Zone Temperatures</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #f5f5f5;
+      padding: 2rem;
+      color: #333;
+    }
+    h1 { margin-bottom: 2rem; font-size: 1.5rem; font-weight: 600; }
+    #zones {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 1.5rem;
+    }
+    .zone-card {
+      background: #fff;
+      border-radius: 12px;
+      padding: 1.25rem;
+      box-shadow: 0 1px 4px rgba(0,0,0,0.08);
+    }
+    .zone-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      margin-bottom: 1rem;
+    }
+    .zone-name { font-weight: 600; font-size: 1rem; }
+    .zone-temp { font-size: 1.25rem; font-weight: 700; color: #2563eb; }
+    .zone-time { font-size: 0.75rem; color: #888; margin-left: 0.5rem; }
+    .bar-chart {
+      display: flex;
+      align-items: flex-end;
+      gap: 4px;
+      height: 120px;
+      padding-top: 0.5rem;
+    }
+    .bar-wrapper {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-end;
+      height: 100%;
+    }
+    .bar {
+      width: 100%;
+      max-width: 40px;
+      background: #2563eb;
+      border-radius: 4px 4px 0 0;
+      min-height: 4px;
+      transition: height 0.3s ease;
+    }
+    .bar-label {
+      font-size: 0.6rem;
+      color: #888;
+      margin-top: 4px;
+      white-space: nowrap;
+    }
+    .zone-empty {
+      font-size: 0.85rem;
+      color: #aaa;
+      text-align: center;
+      padding: 2rem 0;
+    }
+  </style>
+</head>
+<body>
+  <h1>Zone Temperature Monitor</h1>
+  <div id="zones"></div>
+  <script type="module" src="/src/ui.js"></script>
+</body>
+</html>
@@ -0,0 +1,11 @@
+{
+  "name": "mispair-demo",
+  "type": "module",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "hono": "^4.6.0",
+    "@hono/node-server": "^1.13.0"
+  }
+}
@@ -0,0 +1,27 @@
+import { serve } from '@hono/node-server';
+import { serveStatic } from '@hono/node-server/serve-static';
+import { Hono } from 'hono';
+
+const counters = {
+  'zone-a': 10,
+  'zone-b': 15,
+  'zone-c': 20,
+};
+
+const app = new Hono();
+
+app.get('/api/v1/zones/:zoneId/primary/temperature', (c) => {
+  const zoneId = c.req.param('zoneId');
+  if (!(zoneId in counters)) counters[zoneId] = 10;
+  const value = counters[zoneId];
+  counters[zoneId] += Math.floor(Math.random() * 3) + 3;
+  return c.json({ value });
+});
+
+app.use('/src/*', serveStatic({ root: '.' }));
+
+app.get('/', serveStatic({ path: './index.html', root: '.' }));
+
+serve({ fetch: app.fetch, port: 3001 }, (info) => {
+  console.log(`Server running on http://localhost:${info.port}`);
+});
@@ -0,0 +1,66 @@
+const MAX_HISTORY = 5;
+
+export function createChartForZone(zoneId) {
+  const history = [];
+
+  function formatTime(d) {
+    return d.toLocaleTimeString('en-US', { hour12: false });
+  }
+
+  function maxValue() {
+    let m = 0;
+    for (const h of history) {
+      if (h.value > m) m = h.value;
+    }
+    return m || 100;
+  }
+
+  function render() {
+    if (history.length === 0) {
+      chartEl.innerHTML = '<div class="zone-empty">Waiting for data…</div>';
+      return;
+    }
+    const latest = history[history.length - 1];
+    header.innerHTML = `
+      <span class="zone-name">${zoneId}</span>
+      <span>
+        <span class="zone-temp">${latest.value}°C</span>
+        <span class="zone-time">${formatTime(latest.time)}</span>
+      </span>
+    `;
+
+    const max = maxValue();
+    let html = '';
+    for (const h of history) {
+      const pct = Math.max(4, (h.value / max) * 100);
+      html += `<div class="bar-wrapper"><div class="bar" style="height:${pct}%"></div><span class="bar-label">${formatTime(h.time)}</span></div>`;
+    }
+    chartEl.innerHTML = html;
+  }
+
+  const card = document.createElement('div');
+  card.className = 'zone-card';
+  card.id = zoneId;
+
+  const header = document.createElement('div');
+  header.className = 'zone-header';
+  header.innerHTML = `<span class="zone-name">${zoneId}</span><span class="zone-temp">—</span>`;
+  card.appendChild(header);
+
+  const chartEl = document.createElement('div');
+  chartEl.className = 'bar-chart';
+  chartEl.innerHTML = '<div class="zone-empty">Waiting for data…</div>';
+  card.appendChild(chartEl);
+
+  document.getElementById('zones').appendChild(card);
+
+  return {
+    element: card,
+    update(val) {
+      const value = typeof val === 'object' && val !== null ? val.value : val;
+      history.push({ value, time: new Date() });
+      if (history.length > MAX_HISTORY) history.shift();
+      render();
+    },
+  };
+}
@@ -1,8 +1,8 @@
-// This file can not be modified.
-// Each zone has one corresponding chart.
-// UI code calls attachChart for each zone and corresponding chart.
 import { attachChart } from './data.js';
-const zones = ['zone-a', 'zone-b', 'zone-c', /* ... */];
+import { createChartForZone } from './chart.js';
+
+const zones = ['zone-a', 'zone-b', 'zone-c'];
+
 for (const zoneId of zones) {
  const chart = createChartForZone(zoneId);
  attachChart(chart, zoneId);