Function main

examples/live-streaming/main.ts:85–197

()

};

async function main(): Promise<void> {
  const container = document.getElementById('chart');
  const autoScrollEl = document.getElementById('autoScroll');
  const resetEl = document.getElementById('reset');

  if (!(container instanceof HTMLElement)) throw new Error('Chart container not found');
  if (!(autoScrollEl instanceof HTMLInputElement)) throw new Error('autoScroll control not found');
  if (!(resetEl instanceof HTMLButtonElement)) throw new Error('reset control not found');

  let streamCfg: StreamConfig = DEFAULT_STREAM;

  let rawData: DataPoint[] = createSeedData(800);
  let nextX = (() => {
    const last = rawData[rawData.length - 1] as DataPoint | undefined;
    if (!last) return 0;
    const x = Array.isArray(last) ? last[0] : last.x;
    return Number.isFinite(x) ? x : 0;
  })();

  let autoScroll = true;
  autoScrollEl.checked = autoScroll;

  let options: ChartGPUOptions = createBaseOptions(rawData, autoScroll);
  const chart = await ChartGPU.create(container, options);
  const ro = attachCoalescedResizeObserver(container, chart);

  chart.resize();

  const applyOptions = (): void => {
    // When toggling autoScroll, keep the currently accumulated CPU-side data.
    options = createBaseOptions(rawData, autoScroll);
    chart.setOption(options);
  };

  autoScrollEl.addEventListener('change', () => {
    autoScroll = autoScrollEl.checked === true;
    applyOptions();
  });

  const reset = (): void => {
    rawData = createSeedData(800);
    const last = rawData[rawData.length - 1] as DataPoint | undefined;
    const lastX = last ? (Array.isArray(last) ? last[0] : last.x) : 0;
    nextX = Number.isFinite(lastX) ? lastX : 0;
    applyOptions();
  };

  resetEl.addEventListener('click', reset);

  // Streaming loop: append small batches frequently.
  let intervalId: number | null = null;
  const startStreaming = (): void => {
    if (intervalId !== null) return;
    intervalId = window.setInterval(() => {
      const batch: DataPoint[] = new Array(streamCfg.pointsPerTick);
      for (let i = 0; i < streamCfg.pointsPerTick; i++) {
        nextX += 0.02;
        const y =