document.addEventListener("DOMContentLoaded", function () {
    if (typeof Highcharts === "undefined") {
        console.error("Highcharts library not loaded!");
        return;
    }

    function createGaugeChart(speed, color, divId, title, height, width , fontSize, fontYAxis, fontXAxis, fontColor, total, actual) {
    console.log(fontSize)
        Highcharts.chart(divId, {
            chart: {
                type: 'solidgauge',
                width: width,
                height: height,
                backgroundColor: 'transparent',
                plotBackgroundColor: null,
                shadow: false
            },
            title: {
                text: title,
                y: 30
            },
            pane: {
                startAngle: 0,
                endAngle: 360,
                y: 0,
                background: [{
                    backgroundColor: 'transparent',
                    shape: "arc",
                    borderWidth: 0,
                    innerRadius: '60%',
                    outerRadius: '100%'
                }]
            },
            yAxis: {
                min: 0,
                max: 100,
                tickPositions: [],
                lineWidth: 0,
                minorTickLength: 0,
                tickWidth: 0,
                gridLineWidth: 0,
                stops: [
                    [1, color]
                ]
            },
            series: [{
                name: 'Percentage',
                data: [speed],
                dataLabels: {
                format: '{y}% ',
//                format: '{y}% <br>' + "Total: "+ total+ "<br> Complete: " + actual,
                    y: fontYAxis,
                    x: fontXAxis,
                    borderWidth: 0,
                    backgroundColor: 'none',
                    style: {
                        fontSize: fontSize + 'px',
                        fontWeight: 'bold',
                        color:fontColor
                    },
                     zIndex: 10
                },
                color: color,
                showInLegend: false
            }],
            credits: {
                enabled: false
            }
        });
    }
   initializeGauges();
   function initializeGauges() {
    const gaugeDivs2 = document.querySelectorAll('.gauge-chart2');
              gaugeDivs2.forEach(function (div) {
              const speed = div.getAttribute('data-speed');
              const color = div.getAttribute('data-color');
              const title = div.getAttribute('data-title');
              const height = div.getAttribute('data-height');
              const width = div.getAttribute('data-width');
              const fontSize = div.getAttribute('data-fontSize');
              const fontColor = div.getAttribute('data-fontColor');
              const total = div.getAttribute('data-totalProduction');
              const actual = div.getAttribute('data-actualProduction');
              const divId = div.id;
              createGaugeChart(parseInt(speed), color, divId, title, height, width, fontSize, -20, 4, fontColor, total, actual);
          });
    const gaugeDivs = document.querySelectorAll('.gauge-chart');
          gaugeDivs.forEach(function (div) {
          const speed = div.getAttribute('data-speed');
          const color = div.getAttribute('data-color');
          const title = div.getAttribute('data-title');
          const height = div.getAttribute('data-height');
          const width = div.getAttribute('data-width');
          const fontSize = div.getAttribute('data-fontSize');
          const fontColor = div.getAttribute('data-fontColor');
          const total = div.getAttribute('data-totalProduction');
          const actual = div.getAttribute('data-actualProduction');
          const divId = div.id;
          console.log(title)
          createGaugeChart(parseInt(speed), color, divId, title, height, width, fontSize, -15, 2, fontColor, total, actual);
       });
   }
});