// see https://jsfiddle.net/stefanreich/yLcus69t/4/

sclass HTMLGauge {
  S internalID = aRandomID();
  S id = "gauge-" + internalID;
  S varName = "gauge_" + internalID;
  
  // add params for the div here like style or class
  new MapSO divParams;
  
  // shared with all gauges
  S headStuff() {
    ret [[
      <script src="https://code.highcharts.com/highcharts.js"></script>
      <script src="https://code.highcharts.com/highcharts-more.js"></script>
      <script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
      <script src="https://code.highcharts.com/modules/accessibility.js"></script>
    ]];
  }
  
  S htmlAndJS() {
    ret makeDiv() + hjs(js());
  }
  
  S makeDiv() {
    ret div("", paramsPlus(divParams, +id));
  }
  
  S js() {
    ret replaceDollarVars2([[
      var ${varName}_gaugeOptions = {
        chart: { type: 'solidgauge' },
        title: null,
        pane: {
            center: ['50%', '85%'],
            size: '140%',
            startAngle: -90,
            endAngle: 90,
            background: {
                backgroundColor:
                    Highcharts.defaultOptions.legend.backgroundColor || '#EEE',
                innerRadius: '60%',
                outerRadius: '100%',
                shape: 'arc'
            }
        },
    
        // the value axis
        yAxis: {
            stops: [
                [0.6, '#55BF3B'], // green
                [0.75, '#DDDF0D'], // yellow
                [0.85, '#DF5353'] // red
            ],
            lineWidth: 0,
            tickWidth: 0,
            minorTickInterval: null,
            tickAmount: 2,
            title: { y: -70 },
            labels: { y: 16 }
        },
    
        plotOptions: {
            solidgauge: {
                dataLabels: {
                    y: 5,
                    borderWidth: 0,
                    useHTML: true
                }
            }
        }
      };
    
      var $varName = Highcharts.chart('$id', Highcharts.merge(${varName}_gaugeOptions, {
          yAxis: {
              min: 0,
              max: 200,
              title: { text: 'RAM' }
          },
      
          credits: {
              enabled: false
          },
      
          series: [{
              name: 'RAM used',
              data: [80],
              dataLabels: {
                  format:
                      '<div style="text-align:center">' +
                      '<span style="font-size:25px">{y}</span><br/>' +
                      '<span style="font-size:12px;opacity:0.4">GB</span>' +
                      '</div>'
              },
              tooltip: { valueSuffix: ' GB' }
          }]
      
      }));
    
      function ${varName}_setValue(value) {
        point = ${varName}.series[0].points[0].update(value);
      }
    ]], +varName, +id);
  }
}