IoT Device Health in JavaScript

// A rack-temperature fleet: 60 devices, one day of 30-minute readings each.
// The grid VIRTUALIZES (`trellis.virtualize: true`): every cell and header
// exists up front (page height never shifts), but only the panels near the
// viewport are live charts. Scroll: panels mount as they approach and are
// destroyed as they leave, keeping the DOM small; a zoom set anywhere rides
// along and is restored when a panel scrolls back in.
//
// The y scale is SHARED, so the one overheating rack is visible from across
// the room, and the dense traces paint on the canvas renderer.
//
// Deterministic walks so the e2e snapshot is stable.
function mulberry32(seed) {
  return function () {
    seed |= 0
    seed = (seed + 0x6d2b79f5) | 0
    var t = Math.imul(seed ^ (seed >>> 15), 1 | seed)
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
  }
}

function dayOfReadings(seed, base, drift) {
  var rand = mulberry32(seed)
  var out = []
  var ts = new Date('01 Jan 2025').getTime()
  var val = base
  for (var i = 0; i < 48; i++) {
    val += (rand() - 0.5) * 1.6 + drift
    out.push([ts, Math.round(val * 10) / 10])
    ts += 1800000 // 30 minutes
  }
  return out
}

var deviceSeries = []
for (var d = 1; d <= 60; d++) {
  var id = 'RACK-' + (d < 10 ? '0' + d : d)
  // Most racks idle in the low 40s; RACK-27 is running away.
  var hot = d === 27
  deviceSeries.push({
    name: 'Temp',
    device: id,
    data: dayOfReadings(d * 13, hot ? 68 : 40 + (d % 7), hot ? 0.35 : 0),
  })
}

var options = {
  series: deviceSeries,
  chart: {
    id: 'deviceHealthTrellis',
    type: 'line',
    renderer: 'canvas',
  },
  trellis: {
    by: 'device',
    virtualize: true,
    panelHeight: 150,
    minPanelWidth: 240,
    gap: 12,
  },
  colors: ['#059669'],
  stroke: {
    width: 2,
    curve: 'straight',
  },
  xaxis: {
    type: 'datetime',
  },
  yaxis: {
    labels: {
      formatter: function (val) {
        return Math.round(val) + '°C'
      },
    },
  },
  dataLabels: {
    enabled: false,
  },
  tooltip: {
    x: {
      format: 'HH:mm',
    },
  },
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()