Function main

examples/worker-streaming/main.ts:130–248

()

}

async function main(): Promise<void> {
  const container = document.getElementById('chart');
  if (!(container instanceof HTMLElement)) {
    throw new Error('Chart container not found');
  }

  // Create chart with initial empty data
  const options: ChartGPUOptions = {
    grid: { left: 70, right: 24, top: 24, bottom: 56 },
    xAxis: { type: 'value', name: 'Time' },
    yAxis: { type: 'value', min: -1.2, max: 1.2, name: 'Value' },
    palette: ['#4a9eff'],
    animation: false, // Disable animation for streaming
    series: [
      {
        type: 'line',
        name: 'stream',
        data: [],
        color: '#4a9eff',
        lineStyle: { width: 1.5, opacity: 0.8 },
        sampling: 'lttb',
        samplingThreshold: 5000,
      },
    ],
  };

  // Create chart in worker for zero-copy Float32Array transfer support
  const chart = await ChartGPU.createInWorker(container, options);

  // Resize handling
  let resizeScheduled = false;
  const ro = new ResizeObserver(() => {
    if (resizeScheduled) return;
    resizeScheduled = true;
    requestAnimationFrame(() => {
      resizeScheduled = false;
      chart.resize();
    });
  });
  ro.observe(container);
  chart.resize();

  // Streaming state
  let nextX = 0;
  let totalPoints = 0;
  let streaming = true;

  // Trackers
  const fpsTracker = new FPSTracker();
  const dataRateTracker = new DataRateTracker();

  // Streaming loop
  let lastFrameTime = performance.now();
  let intervalId: number | null = null;

  const streamFrame = (): void => {
    if (!streaming || totalPoints >= MAX_POINTS) {
      if (intervalId !== null) {