Comprehensive comparison for Charts technology in Web Development applications

// Real-time Sales Dashboard with ApexCharts
// Demonstrates a production-ready sales analytics chart with multiple series

class SalesDashboard {
  constructor(elementId) {
    this.elementId = elementId;
    this.chart = null;
    this.options = this.getChartOptions();
    this.init();
  }

  getChartOptions() {
    return {
      series: [
        {
          name: 'Revenue',
          type: 'column',
          data: []
        },
        {
          name: 'Orders',
          type: 'line',
          data: []
        },
        {
          name: 'Average Order Value',
          type: 'line',
          data: []
        }
      ],
      chart: {
        height: 450,
        type: 'line',
        stacked: false,
        toolbar: {
          show: true,
          tools: {
            download: true,
            selection: true,
            zoom: true,
            zoomin: true,
            zoomout: true,
            pan: true,
            reset: true
          }
        },
        animations: {
          enabled: true,
          easing: 'easeinout',
          speed: 800
        }
      },
      stroke: {
        width: [0, 2, 2],
        curve: 'smooth'
      },
      plotOptions: {
        bar: {
          columnWidth: '50%'
        }
      },
      fill: {
        opacity: [0.85, 1, 1],
        gradient: {
          inverseColors: false,
          shade: 'light',
          type: 'vertical',
          opacityFrom: 0.85,
          opacityTo: 0.55,
          stops: [0, 100]
        }
      },
      labels: [],
      markers: {
        size: 0
      },
      xaxis: {
        type: 'datetime',
        labels: {
          datetimeFormatter: {
            year: 'yyyy',
            month: 'MMM \'yy',
            day: 'dd MMM',
            hour: 'HH:mm'
          }
        }
      },
      yaxis: [
        {
          title: {
            text: 'Revenue ($)'
          },
          labels: {
            formatter: (value) => {
              return value ? '$' + value.toLocaleString() : '$0';
            }
          }
        },
        {
          opposite: true,
          title: {
            text: 'Orders'
          }
        },
        {
          opposite: true,
          show: false,
          title: {
            text: 'AOV ($)'
          }
        }
      ],
      tooltip: {
        shared: true,
        intersect: false,
        y: {
          formatter: (value, { seriesIndex }) => {
            if (seriesIndex === 0 || seriesIndex === 2) {
              return '$' + (value || 0).toFixed(2);
            }
            return (value || 0).toString();
          }
        }
      },
      legend: {
        position: 'top',
        horizontalAlign: 'right'
      },
      colors: ['#008FFB', '#00E396', '#FEB019']
    };
  }

  init() {
    try {
      const element = document.querySelector(this.elementId);
      if (!element) {
        throw new Error(`Element ${this.elementId} not found`);
      }
      this.chart = new ApexCharts(element, this.options);
      this.chart.render();
      this.loadData();
    } catch (error) {
      console.error('Failed to initialize chart:', error);
      this.handleError(error);
    }
  }

  async loadData() {
    try {
      const response = await fetch('/api/sales/analytics?period=30days');
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const data = await response.json();
      this.updateChart(data);
    } catch (error) {
      console.error('Failed to load sales data:', error);
      this.handleError(error);
    }
  }

  updateChart(data) {
    if (!data || !Array.isArray(data.records)) {
      console.warn('Invalid data format received');
      return;
    }

    const labels = data.records.map(record => record.date);
    const revenue = data.records.map(record => record.revenue || 0);
    const orders = data.records.map(record => record.orders || 0);
    const aov = data.records.map(record => 
      record.orders > 0 ? (record.revenue / record.orders) : 0
    );

    this.chart.updateOptions({
      labels: labels
    });

    this.chart.updateSeries([
      { name: 'Revenue', data: revenue },
      { name: 'Orders', data: orders },
      { name: 'Average Order Value', data: aov }
    ]);
  }

  handleError(error) {
    const element = document.querySelector(this.elementId);
    if (element) {
      element.innerHTML = `<div class="error-message">Failed to load chart: ${error.message}</div>`;
    }
  }

  destroy() {
    if (this.chart) {
      this.chart.destroy();
    }
  }
}

// Initialize dashboard when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
  const dashboard = new SalesDashboard('#sales-chart');
  
  // Refresh data every 5 minutes
  setInterval(() => {
    dashboard.loadData();
  }, 300000);
});