Function main

examples/interactive/main.ts:150–238

()

};

async function main(): Promise<void> {
  const containerTop = document.querySelector('#chart-top');
  const containerBottom = document.querySelector('#chart-bottom');
  if (!(containerTop instanceof HTMLElement) || !(containerBottom instanceof HTMLElement)) {
    throw new Error('Chart containers not found');
  }

  // Time-series data (epoch-ms), sorted increasing by construction.
  const now = Date.now();
  const startMs = now - 1000 * 60 * 60 * 24 * 14; // 14 days back
  const count = 800;
  const stepMs = 1000 * 60 * 30; // 30 minutes

  const topA = createTimeSeries(count, {
    startMs,
    stepMs,
    fn: (i) => {
      const t = i / (count - 1);
      const season = Math.sin(t * Math.PI * 8);
      const trend = t * 1.2;
      return 40 + 12 * season + 18 * trend;
    },
  });

  const topB = createTimeSeries(count, {
    startMs,
    stepMs,
    fn: (i) => {
      const t = i / (count - 1);
      const season = Math.cos(t * Math.PI * 6 + 0.7);
      const spikes = Math.max(0, Math.sin(t * Math.PI * 18)) * 10;
      return 30 + 10 * season + spikes + t * 10;
    },
  });

  const botA = createTimeSeries(count, {
    startMs,
    stepMs,
    fn: (i) => {
      const t = i / (count - 1);
      const wobble = Math.sin(t * Math.PI * 10) * Math.cos(t * Math.PI * 3);
      return 120 + 35 * wobble - t * 20;
    },
  });

  const botB = createTimeSeries(count, {
    startMs,
    stepMs,
    fn: (i) => {
      const t = i / (count - 1);
      const slow = Math.sin(t * Math.PI * 2.5 + 1.1);
      const accel = Math.pow(t, 2) * 25;
      return 95 + 22 * slow + accel;
    },
  });

  const chartTop = await ChartGPU.create(
    containerTop,