Function main

examples/chart-sync/main.ts:49–90

()

};

async function main() {
  const containerA = document.getElementById('chart-a');
  const containerB = document.getElementById('chart-b');
  if (!containerA || !containerB) throw new Error('Chart containers not found');

  const dataA = createWave(400, { fn: 'sin', phase: 0, amplitude: 1 });
  const dataB = createWave(400, { fn: 'cos', phase: Math.PI / 6, amplitude: 0.9 });

  const chartA = await ChartGPU.create(containerA, createOptions('sin(x)', dataA, '#4a9eff'));
  const chartB = await ChartGPU.create(containerB, createOptions('cos(x + π/6)', dataB, '#ff4ab0'));

  const disconnect = connectCharts([chartA, chartB]);

  const attachResizeObserver = (container: HTMLElement, chart: ChartGPUInstance): ResizeObserver => {
    let scheduled = false;
    const ro = new ResizeObserver(() => {
      if (scheduled) return;
      scheduled = true;
      requestAnimationFrame(() => {
        scheduled = false;
        chart.resize();
      });
    });
    ro.observe(container);
    return ro;
  };

  const roA = attachResizeObserver(containerA, chartA);
  const roB = attachResizeObserver(containerB, chartB);

  // Initial sizing/render.
  chartA.resize();
  chartB.resize();

  window.addEventListener('beforeunload', () => {
    roA.disconnect();
    roB.disconnect();
    disconnect();
    chartA.dispose();
    chartB.dispose();
  });
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => {