Merge pull request #1380 from henrywhitaker3/netdata-tweaks

Netdata updates

api/config/default.php

@@ -323,26 +323,58 @@ return array(
 	'netdata1Chart' => '',
 	'netdata1Data' => '',
 	'netdata1Colour' => '',
+	'netdata1Size' => '',
+	'netdata1sm' => true,
+	'netdata1md' => true,
+	'netdata1lg' => true,
 	'netdata2Title' => '',
 	'netdata2Chart' => '',
 	'netdata2Data' => '',
 	'netdata2Colour' => '',
+	'netdata2Size' => '',
+	'netdata2sm' => true,
+	'netdata2md' => true,
+	'netdata2lg' => true,
 	'netdata3Title' => '',
 	'netdata3Chart' => '',
 	'netdata3Data' => '',
 	'netdata3Colour' => '',
+	'netdata3Size' => '',
+	'netdata3sm' => true,
+	'netdata3md' => true,
+	'netdata3lg' => true,
 	'netdata4Title' => '',
 	'netdata4Chart' => '',
 	'netdata4Data' => '',
 	'netdata4Colour' => '',
+	'netdata4Size' => '',
+	'netdata4sm' => true,
+	'netdata4md' => true,
+	'netdata4lg' => true,
 	'netdata5Title' => '',
 	'netdata5Chart' => '',
 	'netdata5Data' => '',
 	'netdata5Colour' => '',
+	'netdata5Size' => '',
+	'netdata5sm' => true,
+	'netdata5md' => true,
+	'netdata5lg' => true,
 	'netdata6Title' => '',
 	'netdata6Chart' => '',
 	'netdata6Data' => '',
 	'netdata6Colour' => '',
+	'netdata6Size' => '',
+	'netdata6sm' => true,
+	'netdata6md' => true,
+	'netdata6lg' => true,
+	'netdata7Title' => '',
+	'netdata7Chart' => '',
+	'netdata7Data' => '',
+	'netdata7Colour' => '',
+	'netdata7Size' => '',
+	'netdata7sm' => true,
+	'netdata7md' => true,
+	'netdata7lg' => true,
 	'netdata1Enabled' => false,
 	'netdata2Enabled' => false,
 	'netdata3Enabled' => false,

api/functions/homepage-connect-functions.php

@@ -2754,7 +2754,7 @@ function getNetdata()
 
 		$url = qualifyURL($GLOBALS['netdataURL']);
 
-		for($i = 1; $i < 7; $i++) {
+		for($i = 1; $i < 8; $i++) {
 			if($GLOBALS['netdata'.($i).'Enabled']) {
 				switch($GLOBALS['netdata'.$i.'Data']) {
 					case 'disk-read':
@@ -2779,17 +2779,33 @@ function getNetdata()
 					case 'ram-used':
 						$data = ram($url);
 						break;
+					case 'swap-used':
+						$data = swap($url);
+						break;
+					case 'disk-avail':
+						$data = diskSpace('avail', $url);
+						break;
+					case 'disk-used':
+						$data = diskSpace('used', $url);
+						break;
 					case 'ipmi-temp-c':
 						$data = ipmiTemp($url, 'c');
 						break;
 					case 'ipmi-temp-f':
 						$data = ipmiTemp($url, 'f');
 						break;
+					case 'cpu-temp-c':
+						$data = cpuTemp($url, 'c');
+						break;
+					case 'cpu-temp-f':
+						$data = cpuTemp($url, 'f');
+						break;
 					default:
 						$data = [
 							'title' => 'DNC',
 							'value' => 0,
 							'units' => 'N/A',
+							'max' => 100,
 						];
 						break;
 				}
@@ -2797,6 +2813,10 @@ function getNetdata()
 				$data['title'] = $GLOBALS['netdata'.$i.'Title'];
 				$data['colour'] = $GLOBALS['netdata'.$i.'Colour'];
 				$data['chart'] = $GLOBALS['netdata'.$i.'Chart'];
+				$data['size'] = $GLOBALS['netdata'.$i.'Size'];
+				$data['lg'] = $GLOBALS['netdata'.($i).'lg'];
+				$data['md'] = $GLOBALS['netdata'.($i).'md'];
+				$data['sm'] = $GLOBALS['netdata'.($i).'sm'];
 
 				array_push($api['data'], $data);
 			}

api/functions/homepage-functions.php

@@ -2983,297 +2983,7 @@ function getHomepageList()
 				),
 			)
 		),
-		array(
-			'name' => 'Netdata',
-			'enabled' => true,
-			'image' => 'plugins/images/tabs/netdata.png',
-			'category' => 'Monitor',
-			'settings' => array(
-				'Enable' => array(
-					array(
-						'type' => 'switch',
-						'name' => 'homepageNetdataEnabled',
-						'label' => 'Enable',
-						'value' => $GLOBALS['homepageNetdataEnabled']
-					),
-					array(
-						'type' => 'select',
-						'name' => 'homepageNetdataAuth',
-						'label' => 'Minimum Authentication',
-						'value' => $GLOBALS['homepageNetdataAuth'],
-						'options' => $groups
-					)
-				),
-				'Connection' => array(
-					array(
-						'type' => 'html',
-						'override' => 12,
-						'label' => 'Info',
-						'html' => 'The URL needs to be on the same domain as your Organizr, and be proxied by subdomain. E.g. If Organizr is accessed at: https://domain.com, then your URL for netdata should be: https://netdata.domain.com'
-					),
-					array(
-						'type' => 'input',
-						'name' => 'netdataURL',
-						'label' => 'URL',
-						'value' => $GLOBALS['netdataURL'],
-						'help' => 'Please enter the local IP:PORT of your netdata instance'
-					),
-					array(
-						'type' => 'blank',
-						'label' => ''
-					),
-				),
-				'Chart 1' => array(
-					array(
-						'type' => 'switch',
-						'name' => 'netdata1Enabled',
-						'label' => 'Enable',
-						'value' => $GLOBALS['netdata1Enabled']
-					),
-					array(
-						'type' => 'blank',
-						'label' => ''
-					),
-					array(
-						'type' => 'input',
-						'name' => 'netdata1Title',
-						'label' => 'Title',
-						'value' => $GLOBALS['netdata1Title'],
-						'help' => 'Title for the netdata graph'
-					),
-					array(
-						'type' => 'select',
-						'name' => 'netdata1Data',
-						'label' => 'Data',
-						'value' => $GLOBALS['netdata1Data'],
-						'options' => netdataOptions(),
-					),
-					array(
-						'type' => 'select',
-						'name' => 'netdata1Chart',
-						'label' => 'Chart',
-						'value' => $GLOBALS['netdata1Chart'],
-						'options' => netdataChartOptions(),
-					),
-					array(
-						'type' => 'select',
-						'name' => 'netdata1Colour',
-						'label' => 'Colour',
-						'value' => $GLOBALS['netdata1Colour'],
-						'options' => netdataColourOptions(),
-					),
-				),
-				'Chart 2' => array(
-					array(
-						'type' => 'switch',
-						'name' => 'netdata2Enabled',
-						'label' => 'Enable',
-						'value' => $GLOBALS['netdata2Enabled']
-					),
-					array(
-						'type' => 'blank',
-						'label' => ''
-					),
-					array(
-						'type' => 'input',
-						'name' => 'netdata2Title',
-						'label' => 'Title',
-						'value' => $GLOBALS['netdata2Title'],
-						'help' => 'Title for the netdata graph'
-					),
-					array(
-						'type' => 'select',
-						'name' => 'netdata2Data',
-						'label' => 'Data',
-						'value' => $GLOBALS['netdata2Data'],
-						'options' => netdataOptions(),
-					),
-					array(
-						'type' => 'select',
-						'name' => 'netdata2Chart',
-						'label' => 'Chart',
-						'value' => $GLOBALS['netdata2Chart'],
-						'options' => netdataChartOptions(),
-					),
-					array(
-						'type' => 'select',
-						'name' => 'netdata2Colour',
-						'label' => 'Colour',
-						'value' => $GLOBALS['netdata2Colour'],
-						'options' => netdataColourOptions(),
-					),
-				),
-				'Chart 3' => array(
-					array(
-						'type' => 'switch',
-						'name' => 'netdata3Enabled',
-						'label' => 'Enable',
-						'value' => $GLOBALS['netdata3Enabled']
-					),
-					array(
-						'type' => 'blank',
-						'label' => ''
-					),
-					array(
-						'type' => 'input',
-						'name' => 'netdata3Title',
-						'label' => 'Title',
-						'value' => $GLOBALS['netdata3Title'],
-						'help' => 'Title for the netdata graph'
-					),
-					array(
-						'type' => 'select',
-						'name' => 'netdata3Data',
-						'label' => 'Data',
-						'value' => $GLOBALS['netdata3Data'],
-						'options' => netdataOptions(),
-					),
-					array(
-						'type' => 'select',
-						'name' => 'netdata3Chart',
-						'label' => 'Data',
-						'value' => $GLOBALS['netdata3Chart'],
-						'options' => netdataChartOptions(),
-					),
-					array(
-						'type' => 'select',
-						'name' => 'netdata3Colour',
-						'label' => 'Colour',
-						'value' => $GLOBALS['netdata3Colour'],
-						'options' => netdataColourOptions(),
-					),
-				),
-				'Chart 4' => array(
-					array(
-						'type' => 'switch',
-						'name' => 'netdata4Enabled',
-						'label' => 'Enable',
-						'value' => $GLOBALS['netdata4Enabled']
-					),
-					array(
-						'type' => 'blank',
-						'label' => ''
-					),
-					array(
-						'type' => 'input',
-						'name' => 'netdata4Title',
-						'label' => 'Title',
-						'value' => $GLOBALS['netdata4Title'],
-						'help' => 'Title for the netdata graph'
-					),
-					array(
-						'type' => 'select',
-						'name' => 'netdata4Data',
-						'label' => 'Data',
-						'value' => $GLOBALS['netdata4Data'],
-						'options' => netdataOptions(),
-					),
-					array(
-						'type' => 'select',
-						'name' => 'netdata4Chart',
-						'label' => 'Chart',
-						'value' => $GLOBALS['netdata4Chart'],
-						'options' => netdataChartOptions(),
-					),
-					array(
-						'type' => 'select',
-						'name' => 'netdata4Colour',
-						'label' => 'Colour',
-						'value' => $GLOBALS['netdata4Colour'],
-						'options' => netdataColourOptions(),
-					),
-				),
-				'Chart 5' => array(
-					array(
-						'type' => 'switch',
-						'name' => 'netdata5Enabled',
-						'label' => 'Enable',
-						'value' => $GLOBALS['netdata5Enabled']
-					),
-					array(
-						'type' => 'blank',
-						'label' => ''
-					),
-					array(
-						'type' => 'input',
-						'name' => 'netdata5Title',
-						'label' => 'Title',
-						'value' => $GLOBALS['netdata5Title'],
-						'help' => 'Title for the netdata graph'
-					),
-					array(
-						'type' => 'select',
-						'name' => 'netdata5Data',
-						'label' => 'Data',
-						'value' => $GLOBALS['netdata5Data'],
-						'options' => netdataOptions(),
-					),
-					array(
-						'type' => 'select',
-						'name' => 'netdata5Chart',
-						'label' => 'Chart',
-						'value' => $GLOBALS['netdata5Chart'],
-						'options' => netdataChartOptions(),
-					),
-					array(
-						'type' => 'select',
-						'name' => 'netdata5Colour',
-						'label' => 'Colour',
-						'value' => $GLOBALS['netdata5Colour'],
-						'options' => netdataColourOptions(),
-					),
-				),
-				'Chart 6' => array(
-					array(
-						'type' => 'switch',
-						'name' => 'netdata6Enabled',
-						'label' => 'Enable',
-						'value' => $GLOBALS['netdata6Enabled']
-					),
-					array(
-						'type' => 'blank',
-						'label' => ''
-					),
-					array(
-						'type' => 'input',
-						'name' => 'netdata6Title',
-						'label' => 'Title',
-						'value' => $GLOBALS['netdata6Title'],
-						'help' => 'Title for the netdata graph'
-					),
-					array(
-						'type' => 'select',
-						'name' => 'netdata6Data',
-						'label' => 'Data',
-						'value' => $GLOBALS['netdata6Data'],
-						'options' => netdataOptions(),
-					),
-					array(
-						'type' => 'select',
-						'name' => 'netdata6Chart',
-						'label' => 'Chart',
-						'value' => $GLOBALS['netdata6Chart'],
-						'options' => netdataChartOptions(),
-					),
-					array(
-						'type' => 'select',
-						'name' => 'netdata6Colour',
-						'label' => 'Colour',
-						'value' => $GLOBALS['netdata6Colour'],
-						'options' => netdataColourOptions(),
-					),
-				),
-				'Options' => array(
-					array(
-						'type' => 'select',
-						'name' => 'homepageNetdataRefresh',
-						'label' => 'Refresh Seconds',
-						'value' => $GLOBALS['homepageNetdataRefresh'],
-						'options' => optionTime()
-					),
-				),
-			)
-		),
+		netdataSettngsArray()
 	);
 }
 

api/functions/netdata-functions.php

@@ -1,5 +1,135 @@
 <?php
 
+function netdataSettngsArray()
+{
+    $array = array(
+        'name' => 'Netdata',
+        'enabled' => true,
+        'image' => 'plugins/images/tabs/netdata.png',
+        'category' => 'Monitor',
+        'settings' => array(
+            'Enable' => array(
+                array(
+                    'type' => 'switch',
+                    'name' => 'homepageNetdataEnabled',
+                    'label' => 'Enable',
+                    'value' => $GLOBALS['homepageNetdataEnabled']
+                ),
+                array(
+                    'type' => 'select',
+                    'name' => 'homepageNetdataAuth',
+                    'label' => 'Minimum Authentication',
+                    'value' => $GLOBALS['homepageNetdataAuth'],
+                    'options' => groupSelect()
+                )
+            ),
+            'Connection' => array(
+                array(
+                    'type' => 'html',
+                    'override' => 12,
+                    'label' => 'Info',
+                    'html' => 'The URL needs to be on the same domain as your Organizr, and be proxied by subdomain. E.g. If Organizr is accessed at: https://domain.com, then your URL for netdata should be: https://netdata.domain.com'
+                ),
+                array(
+                    'type' => 'input',
+                    'name' => 'netdataURL',
+                    'label' => 'URL',
+                    'value' => $GLOBALS['netdataURL'],
+                    'help' => 'Please enter the local IP:PORT of your netdata instance'
+                ),
+                array(
+                    'type' => 'blank',
+                    'label' => ''
+                ),
+            ),
+        )
+    );
+
+    for($i = 1; $i <= 7; $i++) {
+        $array['settings']['Chart '.$i] = array(
+            array(
+                'type' => 'switch',
+                'name' => 'netdata'.$i.'Enabled',
+                'label' => 'Enable',
+                'value' => $GLOBALS['netdata'.$i.'Enabled']
+            ),
+            array(
+                'type' => 'blank',
+                'label' => ''
+            ),
+            array(
+                'type' => 'input',
+                'name' => 'netdata'.$i.'Title',
+                'label' => 'Title',
+                'value' => $GLOBALS['netdata'.$i.'Title'],
+                'help' => 'Title for the netdata graph'
+            ),
+            array(
+                'type' => 'select',
+                'name' => 'netdata'.$i.'Data',
+                'label' => 'Data',
+                'value' => $GLOBALS['netdata'.$i.'Data'],
+                'options' => netdataOptions(),
+            ),
+            array(
+                'type' => 'select',
+                'name' => 'netdata'.$i.'Chart',
+                'label' => 'Chart',
+                'value' => $GLOBALS['netdata'.$i.'Chart'],
+                'options' => netdataChartOptions(),
+            ),
+            array(
+                'type' => 'select',
+                'name' => 'netdata'.$i.'Colour',
+                'label' => 'Colour',
+                'value' => $GLOBALS['netdata'.$i.'Colour'],
+                'options' => netdataColourOptions(),
+            ),
+            array(
+                'type' => 'select',
+                'name' => 'netdata'.$i.'Size',
+                'label' => 'Size',
+                'value' => $GLOBALS['netdata'.$i.'Size'],
+                'options' => netdataSizeOptions(),
+            ),
+            array(
+                'type' => 'blank',
+                'label' => ''
+            ),
+            array(
+                'type' => 'switch',
+                'name' => 'netdata'.$i.'lg',
+                'label' => 'Show on large screens',
+                'value' => $GLOBALS['netdata'.$i.'lg']
+            ),
+            array(
+                'type' => 'switch',
+                'name' => 'netdata'.$i.'md',
+                'label' => 'Show on medium screens',
+                'value' => $GLOBALS['netdata'.$i.'md']
+            ),
+            array(
+                'type' => 'switch',
+                'name' => 'netdata'.$i.'sm',
+                'label' => 'Show on small screens',
+                'value' => $GLOBALS['netdata'.$i.'sm']
+            ),
+        );
+    }
+
+    $array['settings']['Options'] =  array(
+        array(
+            'type' => 'select',
+            'name' => 'homepageNetdataRefresh',
+            'label' => 'Refresh Seconds',
+            'value' => $GLOBALS['homepageNetdataRefresh'],
+            'options' => optionTime()
+        ),
+    );
+
+    return $array;
+}
+
 function disk($dimension, $url)
 {
     $data = [];
@@ -10,8 +140,30 @@ function disk($dimension, $url)
         if ($response->success) {
             $json = json_decode($response->body, true);
             $data['value'] = $json['latest_values'][0] / 1000;
-            $data['percent'] = ($json['latest_values'][0] / $json['max']) * 100;
+            $data['percent'] =  getPercent($json['latest_values'][0], $json['max']);
             $data['units'] = 'MiB/s';
+            $data['max'] = $json['max'];
+        }
+    } catch (Requests_Exception $e) {
+        writeLog('error', 'Netdata Connect Function - Error: ' . $e->getMessage(), 'SYSTEM');
+    };
+
+    return $data;
+}
+
+function diskSpace($dimension, $url)
+{
+    $data = [];
+    // Get Data
+    $dataUrl = $url . '/api/v1/data?chart=disk_space._&format=json&points=509&group=average&gtime=0&options=ms|jsonwrap|nonzero&after=-540&dimension='.$dimension;
+    try {
+        $response = Requests::get($dataUrl);
+        if ($response->success) {
+            $json = json_decode($response->body, true);
+            $data['value'] = $json['result']['data'][0][1];
+            $data['percent'] = $data['value'];
+            $data['units'] = '%';
+            $data['max'] = 100;
         }
     } catch (Requests_Exception $e) {
         writeLog('error', 'Netdata Connect Function - Error: ' . $e->getMessage(), 'SYSTEM');
@@ -31,8 +183,9 @@ function net($dimension, $url)
         if ($response->success) {
             $json = json_decode($response->body, true);
             $data['value'] = $json['latest_values'][0] / 1000;
-            $data['percent'] = ($json['latest_values'][0] / $json['max']) * 100;
-            $data['units'] = 'megabits/s';
+            $data['percent'] = getPercent($json['latest_values'][0], $json['max']);
+            $data['units'] = 'Mbit/s';
+            $data['max'] = $json['max'];
         }
     } catch (Requests_Exception $e) {
         writeLog('error', 'Netdata Connect Function - Error: ' . $e->getMessage(), 'SYSTEM');
@@ -81,6 +234,26 @@ function ram($url)
     return $data;
 }
 
+function swap($url)
+{
+    $data = [];
+    $dataUrl = $url . '/api/v1/data?chart=system.swap&format=array&points=540&group=average&gtime=0&options=absolute|percentage|jsonwrap|nonzero&after=-540&dimensions=used';
+    try {
+        $response = Requests::get($dataUrl);
+        if ($response->success) {
+            $json = json_decode($response->body, true);
+            $data['value'] = $json['result'][0];
+            $data['percent'] = $data['value'];
+            $data['max'] = 100;
+            $data['units'] = '%';
+        }
+    } catch (Requests_Exception $e) {
+        writeLog('error', 'Netdata Connect Function - Error: ' . $e->getMessage(), 'SYSTEM');
+    };
+
+    return $data;
+}
+
 function ipmiTemp($url, $unit)
 {
     $data = [];
@@ -104,5 +277,47 @@ function ipmiTemp($url, $unit)
         writeLog('error', 'Netdata Connect Function - Error: ' . $e->getMessage(), 'SYSTEM');
     };
 
+    return $data;
+}
+
+function getPercent($val, $max)
+{
+    if($max == 0) {
+        return 0;
+    } else {
+        return ( $val / $max ) * 100;
+    }
+}
+
+function cpuTemp($url, $unit)
+{
+    $data = [];
+    $dataUrl = $url . '/api/v1/data?chart=sensors.coretemp-isa-0000_temperature&format=json&points=509&group=average&gtime=0&options=ms|flip|jsonwrap|nonzero&after=-540';
+    try {
+        $response = Requests::get($dataUrl);
+        if ($response->success) {
+            $json = json_decode($response->body, true);
+            $vals = $json['latest_values'];
+            $vals = array_filter($vals);
+            if(count($vals) > 0) {
+                $data['value'] = array_sum($vals) / count($vals);
+            } else {
+                $data['value'] = 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);
+        }
+    } catch (Requests_Exception $e) {
+        writeLog('error', 'Netdata Connect Function - Error: ' . $e->getMessage(), 'SYSTEM');
+    };
+
     return $data;
 }

api/functions/option-functions.php

@@ -175,6 +175,18 @@ function netdataOptions()
 			'name' => 'Used RAM',
 			'value' => 'ram-used',
 		],
+		[
+			'name' => 'Used Swap',
+			'value' => 'swap-used',
+		],
+		[
+			'name' => 'Disk space used',
+			'value' => 'disk-used',
+		],
+		[
+			'name' => 'Disk space available',
+			'value' => 'disk-avail',
+		],
 		[
 			'name' => 'IPMI Temperature C',
 			'value' => 'ipmi-temp-c'
@@ -183,6 +195,14 @@ function netdataOptions()
 			'name' => 'IPMI Temperature F',
 			'value' => 'ipmi-temp-f'
 		],
+		[
+			'name' => 'CPU Temperature C',
+			'value' => 'cpu-temp-c'
+		],
+		[
+			'name' => 'CPU Temperature F',
+			'value' => 'cpu-temp-f'
+		],
 	];
 }
 
@@ -209,7 +229,7 @@ function netdataColourOptions()
 		],
 		[
 			'name' => 'Green',
-			'value' => 'DD4400',
+			'value' => '46e302',
 		],
 		[
 			'name' => 'Purple',
@@ -228,4 +248,22 @@ function netdataColourOptions()
 			'value' => 'd66300',
 		]
 	];
+}
+
+function netdataSizeOptions()
+{
+	return [
+		[
+			'name' => 'Large',
+			'value' => 'lg',
+		],
+		[
+			'name' => 'Medium',
+			'value' => 'md',
+		],
+		[
+			'name' => 'Small',
+			'value' => 'sm'
+		]
+	];
 }

js/functions.js

@@ -7376,10 +7376,6 @@ function buildSpeedtest(array){
 function buildNetdataItem(array){
     var html = `
     <style>
-    .all-netdata .chart {
-        width: 183px;
-        height:183px;
-    }
     .all-netdata .easyPieChart-value {
         position: absolute;
         top: 77px;
@@ -7391,11 +7387,9 @@ function buildNetdataItem(array){
     }
     .all-netdata .easyPieChart-title {
         position: absolute;
-        top: 37px;
         width: 100%;
         text-align: center;
         left: 0;
-        font-size: 15px;
         font-weight: bold;
     }
     .all-netdata .easyPieChart-units {
@@ -7409,7 +7403,7 @@ function buildNetdataItem(array){
     }
 
     .all-netdata .gauge-chart .gauge-value {
-        position: absolute;
+        position: relative;
         width: 100%;
         text-align: center;
         top: 30px;
@@ -7420,7 +7414,7 @@ function buildNetdataItem(array){
     }
 
     .all-netdata .gauge-chart .gauge-title {
-        position: absolute;
+        position: relative;
         width: 100%;
         text-align: center;
         top: -10px;
@@ -7429,45 +7423,173 @@ function buildNetdataItem(array){
         left: 0;
         font-size: 15px;
     }
+
+    .all-netdata .chart-lg .gauge-chart .gauge-value {
+        top: 70px;
+        font-size: 26px;
+    }
+
+    .all-netdata .chart-lg .gauge-chart .gauge-title {
+        top: 45px;
+        font-size: 15px;
+    }
+
+    .all-netdata .chart-md .gauge-chart .gauge-value {
+        top: 65px;
+        font-size: 26px;
+    }
+
+    .all-netdata .chart-md .gauge-chart .gauge-title {
+        top: 45px;
+        font-size: 15px;
+    }
+
+    .all-netdata .chart-sm .gauge-chart .gauge-value {
+        top: 65px;
+        font-size: 26px;
+    }
+
+    .all-netdata .chart-sm .gauge-chart .gauge-title {
+        top: 45px;
+        font-size: 15px;
+    }
+
+    .all-netdata .chart-lg,
+    .all-netdata .chart-md,
+    .all-netdata .chart-sm {
+        display: inline-block;
+        margin: 15px;
+    }
+
+    .all-netdata .chart-lg,
+    .all-netdata .chart-lg .chart {
+        height: 180px;
+        width: 180px;
+    }
+
+    .all-netdata .chart-md,
+    .all-netdata .chart-md .chart {
+        height: 160px;
+        width: 160px;
+    }
+
+    .all-netdata .chart-sm,
+    .all-netdata .chart-sm .chart {
+        height: 140px;
+        width: 140px;
+    }
+
+    .all-netdata .chart-lg .gauge-chart,
+    .all-netdata .gauge-cont.chart-lg {
+        //height: 300px;
+        width: 300px;
+    }
+
+    .all-netdata .chart-md .gauge-chart,
+    .all-netdata .gauge-cont.chart-md {
+        //height: 275px;
+        width: 275px;
+    }
+
+    .all-netdata .chart-sm .gauge-chart,
+    .all-netdata .gauge-cont.chart-sm {
+        //height: 250px;
+        width: 250px;
+    }
+
+    .all-netdata .chart-lg .easyPieChart-title {
+        top: 37px;
+        font-size: 15px;
+    }
+
+    .all-netdata .chart-md .easyPieChart-title {
+        top: 33px;
+        font-size: 13.5px;
+    }
+
+    .all-netdata .chart-sm .easyPieChart-title {
+        top: 30px;
+        font-size: 12px;
+    }
+
+    .all-netdata .chart-lg .easyPieChart-value {
+        top: 75px;
+        font-size: 24.4625px;
+    }
+
+    .all-netdata .chart-md .easyPieChart-value {
+        top: 65px;
+        font-size: 24.4625px;
+    }
+
+    .all-netdata .chart-sm .easyPieChart-value {
+        top: 55px;
+        font-size: 24.4625px;
+    }
+
+    .all-netdata .chart-lg .easyPieChart-units {
+        top: 130px;
+        font-size: 15px;
+    }
+
+    .all-netdata .chart-md .easyPieChart-units {
+        top: 108px;
+        font-size: 15px;
+    }
+
+    .all-netdata .chart-sm .easyPieChart-units {
+        top: 95px;
+        font-size: 15px;
+    }
     </style>
     `;
 
-    var buildEasyPieChart = function(e,i) {
+    var buildEasyPieChart = function(e,i,size,easySize,display) {
         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="chart" id="easyPieChart`+(i+1)+`" data-percent="`+e.percent+`">
-                    <span class="easyPieChart-title">`+e.title+`</span>
-                    <span class="easyPieChart-value" id="easyPieChart`+(i+1)+`Value">`+parseFloat(e.value).toFixed(1)+`</span>
-                    <span class="easyPieChart-units" id="easyPieChart`+(i+1)+`Units">`+e.units+`</span>
-                </div>
+        <div class="chart-`+size+` my-3 text-center `+display+`">
+            <div class="chart" id="easyPieChart`+(i+1)+`" data-percent="`+e.percent+`">
+                <span class="easyPieChart-title">`+e.title+`</span>
+                <span class="easyPieChart-value" id="easyPieChart`+(i+1)+`Value">`+parseFloat(e.value).toFixed(1)+`</span>
+                <span class="easyPieChart-units" id="easyPieChart`+(i+1)+`Units">`+e.units+`</span>
             </div>
         </div>
         <script>
         $(function() {
-            $('#easyPieChart`+(i+1)+`').easyPieChart({
-                size: 183,
+            var opts = {
+                size: `+easySize+`,
                 lineWidth: 7,
-                //animate: false,
                 scaleColor: false,
                 barColor: '#`+e.colour+`',
-                trackColor: '#bababa',
-            });
+                trackColor: '#636363',
+            };
+            if(`+e.percent+` == 0) {
+                opts.lineCap = 'butt';
+            }
+            $('#easyPieChart`+(i+1)+`').easyPieChart(opts);
         });
         </script>
         `;
     }
 
-    var buildGaugeChart = function(e,i) {
+    var buildGaugeChart = function(e,i,size,easySize,display) {
+        switch(size) {
+            case 'lg':
+                easySize = 300;
+                break;
+            case 'sm':
+                easySize = 275;
+                break;
+            case 'md':
+            default:
+                easySize = 250;
+                break;
+        }
         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 class="mx-0 gauge-cont chart-`+size+` my-3 text-center `+display+`">
+            <div class="gauge-chart text-center">
+                <span class="gauge-title d-block" id="gaugeChart`+(i+1)+`Title">`+e.title+`</span>
+                <span class="gauge-value d-block" id="gaugeChart`+(i+1)+`Value">`+parseFloat(e.value).toFixed(1)+`</span>
+                <canvas id="gaugeChart`+(i+1)+`" style="width: 100%"></canvas>
             </div>
         </div>
         <script>
@@ -7494,7 +7616,7 @@ function buildNetdataItem(array){
             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.animationSpeed = 8; // set animation speed (32 is default value)
             gauge.set(`+e.percent+`); // set actual value
             window.netdata[`+(i+1)+`] = gauge
         });
@@ -7503,10 +7625,46 @@ function buildNetdataItem(array){
     }
 
     array.forEach((e, i) => {
+        var size = e.size;
+        var easySize;
+        if(size == '') {
+            size = 'md';
+        }
+        switch(size) {
+            case 'lg':
+                easySize = 180;
+                break;
+            case 'sm':
+                easySize = 140;
+                break;
+            case 'md':
+            default:
+                easySize = 160;
+                break;
+        }
+
+        var display = ' ';
+        if(e.lg) {
+            display += ' d-xl-inline-block d-lg-inline-block';
+        } else {
+            display += ' d-xl-none d-lg-none d-none';
+        }
+        if(e.md) {
+            display += ' d-md-inline-block';
+        } else {
+            display += ' d-md-none d-none';
+        }
+        if(e.sm) {
+            display += ' d-sm-inline-block d-xs-inline-block';
+        } else {
+            display += ' d-sm-none d-xs-none d-none';
+        }
+        display += ' ';
+
         if(e.chart == 'easypiechart') {
-            html += buildEasyPieChart(e,i);
+            html += buildEasyPieChart(e,i,size,easySize,display);
         } else if(e.chart == 'gauge') {
-            html += buildGaugeChart(e,i);
+            html += buildGaugeChart(e,i,size,easySize,display);
         }
     });
     
@@ -7545,7 +7703,7 @@ function buildNetdata(array){
       
       .all-netdata .chart {
           float: left;
-          margin: 10px;
+          //margin: 10px;
       }
       
       .all-netdata .percentage,
@@ -7655,7 +7813,7 @@ function buildNetdata(array){
     html += `
     <div class="row">
         
-            <div class="d-lg-flex d-md-block d-sm-block d-xs-block align-items-center justify-content-center all-netdata">
+            <div class="d-block text-center all-netdata">
     `;
     html += buildNetdataItem(data);
     html += `