sclass HTMLGauge {
  S internalID = aRandomID();
  S id = "gauge-" + internalID;
  S varName = "gauge_" + internalID;
  
  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 html() {
    ret [[ 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
              }
          }
      }
  };
  
  // The speed gauge
  var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(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' }
      }]
  
  }));
  
  // Bring life to the dials
  setInterval(function () {
      // Speed
      var point,
          newVal,
          inc;
  
      if (chartSpeed) {
          point = chartSpeed.series[0].points[0];
          inc = Math.round((Math.random() - 0.5) * 100);
          newVal = point.y + inc;
  
          if (newVal < 0 || newVal > 200) {
              newVal = point.y - inc;
          }
  
          point.update(newVal);
      }
  }, 2000);

}