Added gauge option to netdata homepage item

api/config/default.php

@@ -316,7 +316,7 @@ return array(
 	'speedtestHeaderToggle' => true,
 	'speedtestHeader' => 'Speedtest',
 	'homepageNetdataEnabled' => false,
-	'homepageNetdataRefresh' => '600000',
+	'homepageNetdataRefresh' => '2500',
 	'homepageNetdataAuth' => '1',
 	'netdataURL' => '',
 	'netdata1Title' => '',

api/functions/netdata-functions.php

@@ -51,6 +51,7 @@ function cpu($url)
             $json = json_decode($response->body, true);
             $data['value'] = $json[0];
             $data['percent'] = $data['value'];
+            $data['max'] = 100;
             $data['units'] = '%';
         }
     } catch (Requests_Exception $e) {
@@ -70,6 +71,7 @@ function ram($url)
             $json = json_decode($response->body, true);
             $data['value'] = $json['result'][0];
             $data['percent'] = $data['value'];
+            $data['max'] = 100;
             $data['units'] = '%';
         }
     } catch (Requests_Exception $e) {
@@ -90,9 +92,11 @@ function ipmiTemp($url, $unit)
             $data['value'] = $json['result'][0];
             if($unit == 'c') {
                 $data['percent'] = ($data['value'] / 50) * 100;
+                $data['max'] = 50;
             } else if($unit == 'f') {
                 $data['value'] = ($data['value'] * 9/5) + 32;
                 $data['percent'] = ($data['value'] / 122) * 100;
+                $data['max'] = 122;
             }
             $data['units'] = '°'.strtoupper($unit);
         }

api/functions/option-functions.php

@@ -192,6 +192,10 @@ function netdataChartOptions()
 		[
 			'name' => 'Easy Pie Chart',
 			'value' => 'easypiechart',
+		],
+		[
+			'name' => 'Gauge',
+			'value' => 'gauge'
 		]
 	];
 }

index.php

@@ -287,6 +287,7 @@
 <script src="plugins/bower_components/mousetrap/mousetrap.min.js"></script>
 <script src="plugins/bower_components/bootstrap-treeview-master/dist/bootstrap-treeview.min.js"></script>
 <script src="plugins/bower_components/jquery.easy-pie-chart/dist/jquery.easypiechart.min.js"></script>
+<script src="/js/gauge.min.js"></script>
 <script src="js/jquery.mousewheel.min.js"></script>
 <script src="js/ua-parser.min.js"></script>
 <script src="js/plyr.js"></script>

js/functions.js

@@ -7399,6 +7399,28 @@ function buildNetdataItem(array){
         font-size: 15px;
         font-weight: normal;
     }
+
+    .all-netdata .gauge-chart .gauge-value {
+        position: absolute;
+        width: 100%;
+        text-align: center;
+        top: 30px;
+        color: #dcdcdc;
+        font-weight: bold;
+        left: 0;
+        font-size: 26px;
+    }
+
+    .all-netdata .gauge-chart .gauge-title {
+        position: absolute;
+        width: 100%;
+        text-align: center;
+        top: -10px;
+        //color: #fff;
+        font-weight: bold;
+        left: 0;
+        font-size: 15px;
+    }
     </style>
     `;
 
@@ -7428,9 +7450,55 @@ function buildNetdataItem(array){
         `;
     }
 
+    var buildGaugeChart = function(e,i) {
+        return `
+        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-12 my-3 text-center">
+            <div class="d-flex justify-content-center">
+                <div class="gauge-chart">
+                    <span class="gauge-title" id="gaugeChart`+(i+1)+`Title">`+e.title+`</span>
+                    <span class="gauge-value" id="gaugeChart`+(i+1)+`Value">`+parseFloat(e.value).toFixed(1)+`</span>
+                    <canvas id="gaugeChart`+(i+1)+`">
+                    </canvas>
+                </div>
+            </div>
+        </div>
+        <script>
+        $(function() {
+            var opts = {
+                angle: 0.14, // The span of the gauge arc
+                lineWidth: 0.54, // The line thickness
+                radiusScale: 1, // Relative radius
+                pointer: {
+                    length: 0.77, // // Relative to gauge radius
+                    strokeWidth: 0.075, // The thickness
+                    color: '#A1A1A1' // Fill color
+                },
+                limitMax: false,     // If false, max value increases automatically if value > maxValue
+                limitMin: false,     // If true, the min value of the gauge will be fixed
+                colorStart: '#`+e.colour+`',   // Colors
+                colorStop: '#`+e.colour+`',    // just experiment with them
+                strokeColor: '#636363',  // to see which ones work best for you
+                generateGradient: true,
+                highDpiSupport: true,     // High resolution support
+            
+            };
+            var target = document.getElementById('gaugeChart`+(i+1)+`'); // your canvas element
+            var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
+            gauge.maxValue = `+e.max+`; // set max gauge value
+            gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0
+            gauge.animationSpeed = 20; // set animation speed (32 is default value)
+            gauge.set(`+e.percent+`); // set actual value
+            window.netdata[`+(i+1)+`] = gauge
+        });
+        </script>
+        `;
+    }
+
     array.forEach((e, i) => {
         if(e.chart == 'easypiechart') {
             html += buildEasyPieChart(e,i);
+        } else if(e.chart == 'gauge') {
+            html += buildGaugeChart(e,i);
         }
     });
     
@@ -7440,6 +7508,7 @@ function buildNetdata(array){
     // console.log(array);
     var data = array.data;
     if(array === false){ return ''; }
+    window.netdata = [];
 
     var html = `
     <style>
@@ -7620,9 +7689,19 @@ function tryUpdateNetdata(array){
                 $('#easyPieChart' + id).data('easyPieChart').update(e.percent);
                 $('#easyPieChart' + id + 'Value').html(parseFloat(e.value).toFixed(1));
                 existing = true;
+            }
+        } else if(e.chart == 'gauge') {
+            if(window.netdata) {
+                if(window.netdata[(i+1)]) {
+                    window.netdata[(i+1)].set(e.percent); // set actual value
+                    $('#gaugeChart' + (i+1) + 'Value').html(parseFloat(e.percent).toFixed(1));
+                    existing = true;
+                }
             } else {
                 existing = false;
             }
+        } else {
+            existing = false;
         }
     });
     return existing;