Not logged in.  Login/Logout/Register | List snippets | | Create snippet | Upload image | Upload data

105
LINES

< > BotCompany Repo | #1030661 - HTMLGauge [dev.]

JavaX fragment (include) [tags: use-pretranspiled]

Libraryless. Click here for Pure Java version (3244L/20K).

// 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);
  }
}

download  show line numbers  debug dex   

Travelled to 4 computer(s): bhatertpkbcr, ekrmjmnbrukm, mqqgnosmbjvj, pyentgdyhuwx

No comments. add comment

Snippet ID: #1030661
Snippet name: HTMLGauge [dev.]
Eternal ID of this version: #1030661/7
Text MD5: 9a18fd8715006da45f2ccb1f932eea41
Transpilation MD5: af39b3152cf1e85aaa9d9c81081435be
Author: stefan
Category: javax / html
Type: JavaX fragment (include)
Public (visible to everyone): Yes
Archived (hidden from active list): No
Created/modified: 2021-02-22 13:33:36
Source code size: 2934 bytes / 105 lines
Pitched / IR pitched: No / No
Views / Downloads: 16 / 50
Version history: 6 change(s)
Referenced in: [show references]

Formerly at http://tinybrain.de/1030661 & http://1030661.tinybrain.de