Function main

examples/data-update-animation/main.ts:166–241

()

};

async function main(): Promise<void> {
  const cartesianEl = document.getElementById('chart-cartesian');
  const pieEl = document.getElementById('chart-pie');
  if (!(cartesianEl instanceof HTMLElement) || !(pieEl instanceof HTMLElement)) {
    throw new Error('Chart containers not found');
  }

  const btnUpdate = document.getElementById('btn-update');
  const toggleAnimate = document.getElementById('toggle-animate');
  const toggleAuto = document.getElementById('toggle-auto');
  if (!(btnUpdate instanceof HTMLButtonElement)) throw new Error('Update button not found');
  if (!(toggleAnimate instanceof HTMLInputElement)) throw new Error('Animate toggle not found');
  if (!(toggleAuto instanceof HTMLInputElement)) throw new Error('Auto toggle not found');

  // First render: disable animation so only subsequent setOption() updates animate.
  const initialRng = createRng(1);
  const initialCartesian = makeCartesianData(64, initialRng, { phase: 0, amplitude: 1.2, offset: 0.0 });
  const initialPie = makePieData(initialRng);

  const cartesianChart = await ChartGPU.create(
    cartesianEl,
    createCartesianOptions(initialCartesian, /* animation */ false)
  );
  const pieChart = await ChartGPU.create(pieEl, createPieOptions(initialPie, /* animation */ false));

  const ro = attachCoalescedResizeObserver([cartesianEl, pieEl], [cartesianChart, pieChart]);

  // Initial sizing/render.
  cartesianChart.resize();
  pieChart.resize();

  let step = 0;
  const updateCharts = (source: 'auto' | 'manual'): void => {
    step++;
    const rng = createRng(1000 + step * 97);

    // Make domain changes obvious: vary amplitude and offset.
    const phase = step * 0.7;
    const amplitude = 0.9 + (step % 4) * 0.65; // 0.9..2.85
    const offset = (step % 2 === 0 ? -0.35 : 0.55) + (rng() - 0.5) * 0.15;

    const cartesianData = makeCartesianData(64, rng, { phase, amplitude, offset });
    const pieSlices = makePieData(rng);

    const animation = createAnimationConfig(toggleAnimate.checked);

    cartesianChart.setOption(createCartesianOptions(cartesianData, animation));
    pieChart.setOption(createPieOptions(pieSlices, animation));

    const label = toggleAnimate.checked ? 'animated' : 'instant';
    setStatus(`Updated (${source}, ${label}) · step ${step} · amp ${amplitude.toFixed(2)} · offset ${clamp(offset, -5, 5).toFixed(2)}`);
  };

  btnUpdate.addEventListener('click', () => updateCharts('manual'));
  toggleAnimate.addEventListener('change', () => {
    setStatus(toggleAnimate.checked ? 'Animations enabled (next update).' : 'Animations disabled (next update).');
  });