Mark-VIII/payload/user/remote_access/pager-webui/www/js/chart.js

'use strict';

const MiniChart = (() => {
  function draw(canvas, series, opts) {
    const o = opts || {};
    const dpr = window.devicePixelRatio || 1;
    canvas.width = canvas.clientWidth * dpr;
    canvas.height = 140 * dpr;
    const ctx = canvas.getContext('2d');
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    const w = canvas.clientWidth, h = 140;
    ctx.clearRect(0, 0, w, h);
    const oMin = o.min == null ? 0 : o.min;
    const max = Math.max(o.max || 10, ...series.map((s) => Math.max(...s.points, oMin)), oMin + 1);
    const min = Math.min(oMin, ...series.map((s) => Math.min(...s.points, oMin)));
    const span = Math.max(max - min, 1);
    const pad = 8;
    ctx.strokeStyle = o.grid || '#e0e0e0';
    ctx.lineWidth = 1;
    for (let g = 0; g <= 4; g++) {
      const y = pad + (h - pad * 2) * g / 4;
      ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke();
    }
    series.forEach((s) => {
      const pts = s.points;
      if (!pts || pts.length < 2) return;
      ctx.strokeStyle = s.color || '#1976d2';
      ctx.lineWidth = 2;
      ctx.beginPath();
      let started = false;
      pts.forEach((v, i) => {
        if (v == null) { started = false; return; }
        const x = pad + (w - pad * 2) * i / Math.max(pts.length - 1, 1);
        const y = h - pad - (h - pad * 2) * ((v - min) / span);
        if (!started) { ctx.moveTo(x, y); started = true; } else ctx.lineTo(x, y);
      });
      ctx.stroke();
      const last = pts[pts.length - 1];
      if (last != null) {
        const x = pad + (w - pad * 2) * (pts.length - 1) / Math.max(pts.length - 1, 1);
        const y = h - pad - (h - pad * 2) * ((last - min) / span);
        ctx.fillStyle = s.color || '#1976d2';
        ctx.beginPath(); ctx.arc(x, y, 3, 0, Math.PI * 2); ctx.fill();
      }
    });
  }

  function doughnut(canvas, segments, opts) {
    const o = opts || {};
    const dpr = window.devicePixelRatio || 1;
    const legendH = o.legend ? 22 : 0;
    const H = (o.height || 160) + legendH;
    canvas.width = canvas.clientWidth * dpr;
    canvas.height = H * dpr;
    const ctx = canvas.getContext('2d');
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    const w = canvas.clientWidth, h = o.height || 160;
    ctx.clearRect(0, 0, w, H);
    const cx = w / 2, cy = h / 2;
    const r = Math.min(w, h) / 2 - 8;
    const hole = (o.hole == null ? 0.65 : o.hole) * r;
    const total = segments.reduce((s, x) => s + x.value, 0);
    if (!total) {
      ctx.strokeStyle = '#e0e0e0';
      ctx.lineWidth = 1;
      ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI * 2); ctx.stroke();
      ctx.beginPath(); ctx.arc(cx, cy, hole, 0, Math.PI * 2); ctx.stroke();
      return;
    }
    let a0 = -Math.PI / 2;
    segments.forEach((seg) => {
      const a1 = a0 + (seg.value / total) * Math.PI * 2;
      ctx.fillStyle = seg.color;
      ctx.beginPath();
      ctx.arc(cx, cy, r, a0, a1);
      ctx.arc(cx, cy, hole, a1, a0, true);
      ctx.closePath();
      ctx.fill();
      a0 = a1;
    });
    ctx.strokeStyle = o.stroke || '#ffffff';
    ctx.lineWidth = 1;
    ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI * 2); ctx.stroke();
    ctx.beginPath(); ctx.arc(cx, cy, hole, 0, Math.PI * 2); ctx.stroke();
    if (o.legend) {
      ctx.font = '11px Roboto, "Segoe UI", Arial, sans-serif';
      const dots = segments.filter((s) => s.value > 0);
      let tw = 0;
      dots.forEach((s) => { tw += 16 + ctx.measureText(s.label).width + 8; });
      tw = Math.max(tw - 8, 0);
      let x = (w - tw) / 2;
      const ly = h + 13;
      dots.forEach((s) => {
        ctx.fillStyle = s.color;
        ctx.beginPath(); ctx.arc(x + 4, ly - 3, 4, 0, Math.PI * 2); ctx.fill();
        ctx.fillStyle = '#686868';
        ctx.textAlign = 'left';
        ctx.fillText(s.label, x + 12, ly);
        x += 16 + ctx.measureText(s.label).width + 8;
      });
    }
  }

  function bar(canvas, items, opts) {
    const o = opts || {};
    const dpr = window.devicePixelRatio || 1;
    const H = o.height || 160;
    canvas.width = canvas.clientWidth * dpr;
    canvas.height = H * dpr;
    const ctx = canvas.getContext('2d');
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    const w = canvas.clientWidth, h = H;
    ctx.clearRect(0, 0, w, h);
    if (!items || !items.length) return;
    const max = Math.max(1, ...items.map((i) => i.value));
    const padB = 16, padT = 8, padL = 6, padR = 6;
    const plotW = w - padL - padR, plotH = h - padT - padB;
    const bw = plotW / items.length;
    ctx.strokeStyle = o.grid || '#e0e0e0';
    ctx.lineWidth = 1;
    for (let g = 0; g <= 4; g++) {
      const y = padT + plotH * g / 4;
      ctx.beginPath(); ctx.moveTo(padL, y); ctx.lineTo(w - padR, y); ctx.stroke();
    }
    items.forEach((it, i) => {
      const bh = it.value / max * plotH;
      const x = padL + bw * i + bw * 0.15;
      const wd = bw * 0.7;
      const y = padT + plotH - bh;
      ctx.fillStyle = it.color;
      ctx.fillRect(x, y, wd, bh);
      ctx.fillStyle = '#686868';
      ctx.font = '10px Roboto, "Segoe UI", Arial, sans-serif';
      ctx.textAlign = 'center';
      ctx.fillText(String(it.label), padL + bw * i + bw / 2, h - 4);
    });
  }

  function chanToMhz(band, ch) {
    const n = Number(ch);
    if (band === '2.4') return 2407 + 5 * n;
    if (band === '5') return 5000 + 5 * n;
    if (band === '6') return 5950 + 5 * n;
    return null;
  }

  function bandRange(band) {
    if (band === '2.4') return [2400, 2500];
    if (band === '5') return [5150, 5900];
    if (band === '6') return [5925, 7125];
    return null;
  }

  function hexA(hex, alpha) {
    const m = /^#([0-9a-f]{6})$/i.exec(hex || '');
    if (!m) return hex;
    const n = parseInt(m[1], 16);
    return 'rgba(' + ((n >> 16) & 255) + ',' + ((n >> 8) & 255) + ',' + (n & 255) + ',' + alpha + ')';
  }

  // Channel map: each AP is a raised-cosine lobe at its reported center
  // frequency with the peak at its signal strength. The radio does not report
  // channel width, so every lobe assumes 20 MHz (half-width +-10 MHz).
  function channelMap(canvas, aps, opts) {
    const o = opts || {};
    const dpr = window.devicePixelRatio || 1;
    const H = o.height || 180;
    canvas.width = canvas.clientWidth * dpr;
    canvas.height = H * dpr;
    const ctx = canvas.getContext('2d');
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    const w = canvas.clientWidth, h = H;
    ctx.clearRect(0, 0, w, h);
    if (!aps || !aps.length) return;
    const pts = aps
      .map((a) => ({
        freq: a.freq != null ? Number(a.freq) : chanToMhz(a.band, a.channel),
        sig: a.signal
      }))
      .filter((p) => p.freq != null && p.sig != null);
    if (!pts.length) return;
    const def = bandRange(aps[0].band);
    const lo = Math.min(def ? def[0] : Infinity, ...pts.map((p) => p.freq));
    const hi = Math.max(def ? def[1] : -Infinity, ...pts.map((p) => p.freq));
    const fMin = lo - 10, fMax = hi + 10;
    const padL = 42, padR = 10, padT = 14, padB = 24;
    const plotW = w - padL - padR, plotH = h - padT - padB;
    const YMIN = -100, YMAX = -30;
    const x = (f) => padL + (f - fMin) / (fMax - fMin) * plotW;
    const y = (dbm) => padT + (1 - (dbm - YMIN) / (YMAX - YMIN)) * plotH;
    ctx.font = '10px Roboto, "Segoe UI", Arial, sans-serif';
    ctx.textAlign = 'right';
    for (let dbm = YMIN; dbm <= YMAX; dbm += 10) {
      const yy = y(dbm);
      ctx.strokeStyle = o.grid || '#e0e0e0';
      ctx.lineWidth = 1;
      ctx.beginPath(); ctx.moveTo(padL, yy); ctx.lineTo(w - padR, yy); ctx.stroke();
      ctx.fillStyle = '#888';
      ctx.fillText(String(dbm), padL - 6, yy + 3);
    }
    ctx.strokeStyle = o.grid || '#e0e0e0';
    for (let f = Math.ceil(fMin / 20) * 20; f <= fMax; f += 20) {
      ctx.beginPath(); ctx.moveTo(x(f), padT); ctx.lineTo(x(f), h - padB); ctx.stroke();
    }
    const baseY = h - padB;
    aps.forEach((a) => {
      const freq = a.freq != null ? Number(a.freq) : chanToMhz(a.band, a.channel);
      if (freq == null || a.signal == null) return;
      const color = a.color || '#1976d2';
      const cx = x(freq);
      const topY = y(a.signal);
      const peakH = Math.max(2, baseY - topY);
      const half = Math.max(4, (10 / (fMax - fMin)) * plotW);
      ctx.beginPath();
      for (let i = 0; i <= 28; i++) {
        const t = -1 + i / 14;
        const lift = Math.max(0, 0.5 + 0.5 * Math.cos(Math.PI * t));
        const px = cx + t * half;
        const py = baseY - lift * peakH;
        if (i === 0) ctx.moveTo(px, py);
        else ctx.lineTo(px, py);
      }
      ctx.closePath();
      ctx.fillStyle = hexA(color, 0.35);
      ctx.fill();
      ctx.strokeStyle = color;
      ctx.lineWidth = 1.5;
      ctx.stroke();
    });
    let lastLabelX = -Infinity;
    ctx.textAlign = 'center';
    aps.forEach((a) => {
      const freq = a.freq != null ? Number(a.freq) : chanToMhz(a.band, a.channel);
      if (freq == null || a.channel == null) return;
      const cx = x(freq);
      if (cx - lastLabelX < 34) return;
      lastLabelX = cx;
      ctx.strokeStyle = '#999';
      ctx.beginPath(); ctx.moveTo(cx, h - padB); ctx.lineTo(cx, h - padB + 4); ctx.stroke();
      ctx.fillStyle = '#666';
      ctx.fillText('CH ' + a.channel, cx, h - 7);
    });
    ctx.textAlign = 'left';
    ctx.fillStyle = '#888';
    ctx.fillText((aps[0].band || '?') + ' GHz', padL + 4, padT + 2);
  }

  return { draw, doughnut, bar, channelMap };
})();