document.addEventListener('DOMContentLoaded', function() {
  // Draw horizontal bar charts for each score using Chart.js
  function drawCharts() {
    const gaugeContainers = document.querySelectorAll('.gauge-container');
    gaugeContainers.forEach(container => {
      const label = container.dataset.label;
      const score = parseFloat(container.dataset.score);
      // Clear any previous content
      container.innerHTML = '';
      // Create canvas element
      const canvas = document.createElement('canvas');
      // Set a fixed height for thin bar
      canvas.height = 30;
      container.appendChild(canvas);
      const ctx = canvas.getContext('2d');
      // Determine bar colour based on sign
      const bgColor = score >= 0 ? 'rgba(40,167,69,0.8)' : 'rgba(220,53,69,0.8)'; // success/red
      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: [label],
          datasets: [{
            label: label,
            data: [score],
            backgroundColor: bgColor,
            borderColor: 'rgba(0,0,0,0.1)',
            borderWidth: 1,
            barThickness: 12,
            maxBarThickness: 12,
          }]
        },
        options: {
          indexAxis: 'y',
          scales: {
            x: {
              min: -100,
              max: 100,
              display: false,
              grid: { display: false },
              ticks: { display: false }
            },
            y: { display: false, grid: { display: false } }
          },
          plugins: {
            legend: { display: false },
            tooltip: { enabled: false },
            title: { display: false }
          },
          maintainAspectRatio: false,
          responsive: true,
          animation: { duration: 500, easing: 'easeOutQuad' }
        }
      });
    });
  }

  drawCharts();
  window.addEventListener('resize', drawCharts);
});