Function main

examples/million-points/main.ts:201–630

* Main setup: initializes GPUContext, createRenderCoordinator (low-level API), * continuous render loop, and GPU timing probes for performance measurement.

()

 * continuous render loop, and GPU timing probes for performance measurement.
 */
async function main(): Promise<void> {
  const container = document.getElementById('chart');
  if (!(container instanceof HTMLElement)) throw new Error('Chart container (#chart) not found');

  const samplingEnabledEl = document.getElementById('samplingEnabled');
  const benchmarkModeEl = document.getElementById('benchmarkMode');
  const autoBoundsVisibleEl = document.getElementById('autoBoundsVisible');
  const resetZoomEl = document.getElementById('resetZoom');
  if (!(samplingEnabledEl instanceof HTMLInputElement)) throw new Error('samplingEnabled checkbox not found');
  if (!(benchmarkModeEl instanceof HTMLInputElement)) throw new Error('benchmarkMode checkbox not found');
  if (!(autoBoundsVisibleEl instanceof HTMLInputElement)) throw new Error('autoBoundsVisible checkbox not found');
  if (!(resetZoomEl instanceof HTMLButtonElement)) throw new Error('resetZoom button not found');

  // Ensure numeric readout is consistent (HTML already sets this, but keep it robust).
  setText('pointCount', formatInt(TOTAL_POINTS));

  // Create a canvas under #chart.
  const canvas = document.createElement('canvas');
  canvas.style.display = 'block';
  canvas.style.width = '100%';
  canvas.style.height = '100%';
  container.appendChild(canvas);

  let gpuContext: GPUContext | null = null;
  let coordinator: RenderCoordinator | null = null;
  let coordinatorTargetFormat: GPUTextureFormat | null = null;
  let lastConfigured: { width: number; height: number; format: GPUTextureFormat } | null = null;

  let sliderHost: HTMLDivElement | null = null;
  let slider: DataZoomSlider | null = null;
  let unsubscribeZoom: (() => void) | null = null;

  let zoomRange: ZoomRange | null = null;

  const { data } = createMillionPointsData();

  const createUserOptions = (sampling: SeriesSampling, autoBounds: 'visible' | 'global'): ChartGPUOptions => ({
    grid: { left: 70, right: 24, top: 24, bottom: 44 },
    xAxis: { type: 'value', min: 0, max: X_MAX, name: 'Index' },
    yAxis: { type: 'value', autoBounds, name: 'Value' },
    tooltip: { show: false },
    dataZoom: [{ type: 'inside' }, { type: 'slider' }],
    palette: ['#4a9eff'],
    animation: false,
    series: [
      {
        type: 'line',
        name: '1,000,000 points',
        data,
        color: '#4a9eff',
        lineStyle: { width: 1, opacity: 1 },
        sampling,
        samplingThreshold: DEFAULT_SAMPLING_THRESHOLD,
      },
    ],
  });

  const applyAutoBounds = (