<div class="demo">
  <div class="stream-card">
    <div class="stream-header">
      <div>
        <span class="stream-title">Requests / sec</span>
        <span class="stream-value" id="streamValue">—</span>
      </div>
      <button class="stream-pause" id="streamPauseBtn">Pause</button>
    </div>
    <svg class="stream-svg" id="streamSvg" viewBox="0 0 320 100" preserveAspectRatio="none"></svg>
    <p class="stream-note" id="streamNote">Live — updating every 500ms</p>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.demo { width: 380px; max-width: 100%; }

.stream-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.stream-header { display: flex; align-items: center; justify-content: space-between; }
.stream-title { display: block; font-size: 11.5px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.4px; }
.stream-value { display: block; font-size: 24px; font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; margin-top: 2px; }
.stream-pause { border: 1.5px solid #e2e8f0; background: #fff; color: #475569; font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 8px; cursor: pointer; font-family: inherit; }
.stream-pause:hover { border-color: #6366f1; color: #4338ca; }
.stream-pause.paused { background: #fffbeb; border-color: #fbbf24; color: #b45309; }

.stream-svg { width: 100%; height: 100px; display: block; }
.stream-note { font-size: 10.5px; color: #94a3b8; }
.stream-note.paused-note { color: #b45309; }

const svg = document.getElementById('streamSvg');
const valueEl = document.getElementById('streamValue');
const pauseBtn = document.getElementById('streamPauseBtn');
const noteEl = document.getElementById('streamNote');

const WINDOW_SIZE = 40; // how many points are visible on the chart at once
const history = Array.from({ length: WINDOW_SIZE }, () => 50);

let paused = false;
let intervalId = null;
// Data continues arriving while paused — this models a real streaming
// source (a WebSocket, a polling interval) that keeps producing values
// regardless of whether the UI is currently rendering them. "Pause" freezes
// the DISPLAY, not the underlying data feed, which is what "live" streaming
// actually means; a version that stopped the data feed itself on pause
// would silently lose real incoming values rather than just not showing them.
let pendingBuffer = [];

function nextValue(last) {
  const next = last + (Math.random() - 0.48) * 14;
  return Math.max(5, Math.min(180, next));
}

function renderChart() {
  const max = Math.max(...history, 60);
  const points = history.map((v, i) => {
    const x = (i / (WINDOW_SIZE - 1)) * 320;
    const y = 92 - (v / max) * 84;
    return `${x.toFixed(1)},${y.toFixed(1)}`;
  }).join(' ');

  const areaPoints = `0,100 ${points} 320,100`;

  svg.innerHTML = `
    <polygon points="${areaPoints}" fill="rgba(99,102,241,0.08)" />
    <polyline points="${points}" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
  `;

  valueEl.textContent = Math.round(history[history.length - 1]).toLocaleString();
}

function tick() {
  const last = history[history.length - 1];
  const value = nextValue(last);

  if (paused) {
    // Data still accrues into a buffer while paused — nothing is lost,
    // it's simply not yet reflected in the visible chart.
    pendingBuffer.push(value);
    return;
  }

  // If we're resuming right after a pause, flush every buffered value that
  // arrived while paused, in order, before continuing with new live ticks —
  // this is what makes "resume" show a real, complete history rather than
  // silently skipping straight from the pre-pause state to just this instant.
  if (pendingBuffer.length > 0) {
    pendingBuffer.forEach((v) => { history.push(v); history.shift(); });
    pendingBuffer = [];
  }

  history.push(value);
  history.shift();
  renderChart();
}

pauseBtn.addEventListener('click', () => {
  paused = !paused;
  pauseBtn.textContent = paused ? 'Resume' : 'Pause';
  pauseBtn.classList.toggle('paused', paused);
  noteEl.textContent = paused
    ? `Paused — ${pendingBuffer.length} point${pendingBuffer.length === 1 ? '' : 's'} buffered`
    : 'Live — updating every 500ms';
  noteEl.classList.toggle('paused-note', paused);

  if (paused) return;

  // On resume, flush the buffer immediately rather than waiting for the
  // next scheduled tick, so the chart catches up right away.
  if (pendingBuffer.length > 0) {
    pendingBuffer.forEach((v) => { history.push(v); history.shift(); });
    pendingBuffer = [];
  }
  renderChart();
  noteEl.textContent = 'Live — updating every 500ms';
});

// Keep the paused note's buffered count updating live too, so pausing for a
// while visibly shows data continuing to accumulate in the background.
setInterval(() => {
  if (paused) {
    noteEl.textContent = `Paused — ${pendingBuffer.length} point${pendingBuffer.length === 1 ? '' : 's'} buffered`;
  }
}, 500);

intervalId = setInterval(tick, 500);
renderChart();