Function setupControls

examples/candlestick-streaming/main.ts:430–486

()

}

function setupControls() {
  document.getElementById('toggle-btn')!.addEventListener('click', toggleStreaming);
  document.getElementById('autoscroll-btn')!.addEventListener('click', toggleAutoScroll);

  // Style toggle
  let isHollow = false;
  document.getElementById('style-btn')!.addEventListener('click', () => {
    isHollow = !isHollow;
    // Preserve full options when changing style
    const series0 = fullChartOptions.series?.[0];
    if (series0 && series0.type === 'candlestick') {
      fullChartOptions = {
        ...fullChartOptions,
        series: [
          {
            ...series0,
            style: isHollow ? 'hollow' : 'classic',
            data,
          },
        ],
      };
      chart.setOption(fullChartOptions);
    }
    document.getElementById('style-btn')!.textContent = isHollow ? 'Style: Hollow' : 'Style: Classic';
  });

  // Timeframe buttons - actually switch intervals
  document.querySelectorAll('.timeframe-btn').forEach((btn) => {
    btn.addEventListener('click', (e) => {
      const tf = (e.target as HTMLElement).dataset.tf;
      if (!tf) return;

      // Update active button state
      document.querySelectorAll('.timeframe-btn').forEach((b) => b.classList.remove('active'));
      (e.target as HTMLElement).classList.add('active');

      // Switch to the new timeframe
      switchTimeframe(tf);
    });
  });

  // Candle count preset buttons
  document.querySelectorAll('.preset-btn').forEach((btn) => {
    btn.addEventListener('click', (e) => {
      const count = parseInt((e.target as HTMLElement).dataset.count || '60', 10);

      // Update active button state
      document.querySelectorAll('.preset-btn').forEach((b) => b.classList.remove('active'));
      (e.target as HTMLElement).classList.add('active');

      // Switch to the new candle count
      switchCandleCount(count);
    });
  });

  window.addEventListener('resize', () => chart.resize());
}