Function main

examples/sampling/main.ts:163–240

()

};

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

  const modeEl = document.getElementById('samplingMode');
  const thresholdEl = document.getElementById('samplingThreshold');
  const applyEl = document.getElementById('apply');

  if (!(modeEl instanceof HTMLSelectElement)) throw new Error('Sampling mode control not found');
  if (!(thresholdEl instanceof HTMLInputElement)) throw new Error('Sampling threshold control not found');
  if (!(applyEl instanceof HTMLButtonElement)) throw new Error('Apply button not found');

  // Defaults picked to make downsampling obvious when zoomed out.
  modeEl.value = 'lttb';
  thresholdEl.value = '2000';

  const data = createZoomyLineData(100_000);
  const xMax = data.length - 1;

  let controls: SamplingControls = { mode: 'lttb', threshold: 2000 };
  let userOptions: ChartGPUOptions = createOptions(data, controls, xMax);

  const chart = await ChartGPU.create(container, userOptions);

  const ro = attachCoalescedResizeObserver([container], [chart]);

  // Initial sizing/render.
  chart.resize();

  const apply = (): void => {
    controls = {
      mode: normalizeSamplingMode(modeEl.value),
      threshold: normalizeThreshold(thresholdEl.value),
    };

    userOptions = createOptions(data, controls, xMax);
    chart.setOption(userOptions);
    updateReadouts(data.length, xMax, controls, chart.getZoomRange());
  };

  applyEl.addEventListener('click', apply);
  thresholdEl.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') apply();
  });

  // Keep readouts in sync with slider / inside-zoom updates.
  // (No public zoom-change event yet; polling is cheap.)
  let rafId: number | null = null;
  let lastKey = '';
  const tick = (): void => {
    const z = chart.getZoomRange();
    const key = z
      ? `${z.start.toFixed(3)}:${z.end.toFixed(3)}:${controls.mode}:${controls.threshold}`
      : `null:${controls.mode}:${controls.threshold}`;
    if (key !== lastKey) {
      lastKey = key;