<template>
  <div>
    <div class="wrap">
      <h1>Device health, one panel per rack</h1>
      <p class="lead">
        Sixty racks, one shared temperature scale, and only the panels you can
        see are live charts. Scroll the grid: panels mount as they approach the
        viewport and unmount as they leave, so the page stays light at any fleet
        size. RACK-27 is the one to worry about.
      </p>

      <div class="chart-wrap">
        <div id="chart">
          <apexchart
            type="line"
            :options="chartOptions"
            :series="series"
          ></apexchart>
        </div>
      </div>

      <div class="note">
        This grid is <strong>virtualized</strong>:
        <code>trellis.virtualize: true</code> mounts only the panels
        intersecting the viewport (plus one row of look-ahead). Every cell keeps
        its header and a fixed-height skeleton, so page height and scroll
        position never shift; a panel that scrolls out is destroyed with its
        view stashed, and scrolling back restores it, zoom window included.
        Above 64 panels this happens automatically (<code
          >virtualize: 'auto'</code
        >). The shared y scale is what makes the hot rack obvious, the traces
        paint on the canvas renderer (<code>chart.renderer: 'canvas'</code>),
        and mount animations default off above 16 panels. Trellis is a premium
        feature; without a license it renders with a trial watermark.
      </div>
    </div>
  </div>
</template>

<script>
import VueApexCharts from 'vue-apexcharts'

import 'apexcharts/features/renderer-canvas'
import 'apexcharts/features/trellis'

// 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),
  })
}

export default {
  components: {
    apexchart: VueApexCharts,
  },
  data: function () {
    return {
      series: deviceSeries,
      chartOptions: {
        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',
          },
        },
      },
    }
  },
}
</script>

<style>
body {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #fafbfc;
  color: #2c3e50;
  margin: 0;
  padding: 32px 16px;
}
.wrap {
  max-width: 1040px;
  margin: 0 auto;
}
h1 {
  font-size: 22px;
  margin: 0 0 8px;
}
.lead {
  color: #5b6b78;
  line-height: 1.5;
  margin: 0 0 20px;
}
.chart-wrap {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.note {
  background: #ecfdf5;
  border-left: 3px solid #059669;
  padding: 12px 16px;
  font-size: 13px;
  color: #333;
  border-radius: 2px;
  line-height: 1.6;
  margin: 26px auto 0;
}
.note code {
  background: #d1fae5;
  padding: 1px 5px;
  border-radius: 3px;
}
</style>