Added option to display on certain screen sizes

api/config/default.php

@@ -324,36 +324,57 @@ return array(
 	'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

@@ -2808,6 +2808,9 @@ function getNetdata()
 				$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

@@ -3069,6 +3069,28 @@ function getHomepageList()
 						'value' => $GLOBALS['netdata1Size'],
 						'options' => netdataSizeOptions(),
 					),
+					array(
+						'type' => 'blank',
+						'label' => ''
+					),
+					array(
+						'type' => 'switch',
+						'name' => 'netdata1lg',
+						'label' => 'Show on large screens',
+						'value' => $GLOBALS['netdata1lg']
+					),
+					array(
+						'type' => 'switch',
+						'name' => 'netdata1md',
+						'label' => 'Show on medium screens',
+						'value' => $GLOBALS['netdata1md']
+					),
+					array(
+						'type' => 'switch',
+						'name' => 'netdata1sm',
+						'label' => 'Show on small screens',
+						'value' => $GLOBALS['netdata1sm']
+					),
 				),
 				'Chart 2' => array(
 					array(
@@ -3116,6 +3138,28 @@ function getHomepageList()
 						'value' => $GLOBALS['netdata2Size'],
 						'options' => netdataSizeOptions(),
 					),
+					array(
+						'type' => 'blank',
+						'label' => ''
+					),
+					array(
+						'type' => 'switch',
+						'name' => 'netdata2lg',
+						'label' => 'Show on large screens',
+						'value' => $GLOBALS['netdata2lg']
+					),
+					array(
+						'type' => 'switch',
+						'name' => 'netdata2md',
+						'label' => 'Show on medium screens',
+						'value' => $GLOBALS['netdata2md']
+					),
+					array(
+						'type' => 'switch',
+						'name' => 'netdata2sm',
+						'label' => 'Show on small screens',
+						'value' => $GLOBALS['netdata2sm']
+					),
 				),
 				'Chart 3' => array(
 					array(
@@ -3163,6 +3207,28 @@ function getHomepageList()
 						'value' => $GLOBALS['netdata3Size'],
 						'options' => netdataSizeOptions(),
 					),
+					array(
+						'type' => 'blank',
+						'label' => ''
+					),
+					array(
+						'type' => 'switch',
+						'name' => 'netdata3lg',
+						'label' => 'Show on large screens',
+						'value' => $GLOBALS['netdata3lg']
+					),
+					array(
+						'type' => 'switch',
+						'name' => 'netdata3md',
+						'label' => 'Show on medium screens',
+						'value' => $GLOBALS['netdata3md']
+					),
+					array(
+						'type' => 'switch',
+						'name' => 'netdata3sm',
+						'label' => 'Show on small screens',
+						'value' => $GLOBALS['netdata3sm']
+					),
 				),
 				'Chart 4' => array(
 					array(
@@ -3210,6 +3276,28 @@ function getHomepageList()
 						'value' => $GLOBALS['netdata4Size'],
 						'options' => netdataSizeOptions(),
 					),
+					array(
+						'type' => 'blank',
+						'label' => ''
+					),
+					array(
+						'type' => 'switch',
+						'name' => 'netdata4lg',
+						'label' => 'Show on large screens',
+						'value' => $GLOBALS['netdata4lg']
+					),
+					array(
+						'type' => 'switch',
+						'name' => 'netdata4md',
+						'label' => 'Show on medium screens',
+						'value' => $GLOBALS['netdata4md']
+					),
+					array(
+						'type' => 'switch',
+						'name' => 'netdata4sm',
+						'label' => 'Show on small screens',
+						'value' => $GLOBALS['netdata4sm']
+					),
 				),
 				'Chart 5' => array(
 					array(
@@ -3257,6 +3345,28 @@ function getHomepageList()
 						'value' => $GLOBALS['netdata5Size'],
 						'options' => netdataSizeOptions(),
 					),
+					array(
+						'type' => 'blank',
+						'label' => ''
+					),
+					array(
+						'type' => 'switch',
+						'name' => 'netdata5lg',
+						'label' => 'Show on large screens',
+						'value' => $GLOBALS['netdata5lg']
+					),
+					array(
+						'type' => 'switch',
+						'name' => 'netdata5md',
+						'label' => 'Show on medium screens',
+						'value' => $GLOBALS['netdata5md']
+					),
+					array(
+						'type' => 'switch',
+						'name' => 'netdata5sm',
+						'label' => 'Show on small screens',
+						'value' => $GLOBALS['netdata5sm']
+					),
 				),
 				'Chart 6' => array(
 					array(
@@ -3304,6 +3414,28 @@ function getHomepageList()
 						'value' => $GLOBALS['netdata6Size'],
 						'options' => netdataSizeOptions(),
 					),
+					array(
+						'type' => 'blank',
+						'label' => ''
+					),
+					array(
+						'type' => 'switch',
+						'name' => 'netdata6lg',
+						'label' => 'Show on large screens',
+						'value' => $GLOBALS['netdata6lg']
+					),
+					array(
+						'type' => 'switch',
+						'name' => 'netdata6md',
+						'label' => 'Show on medium screens',
+						'value' => $GLOBALS['netdata6md']
+					),
+					array(
+						'type' => 'switch',
+						'name' => 'netdata6sm',
+						'label' => 'Show on small screens',
+						'value' => $GLOBALS['netdata6sm']
+					),
 				),
 				'Chart 7' => array(
 					array(
@@ -3351,6 +3483,28 @@ function getHomepageList()
 						'value' => $GLOBALS['netdata7Size'],
 						'options' => netdataSizeOptions(),
 					),
+					array(
+						'type' => 'blank',
+						'label' => ''
+					),
+					array(
+						'type' => 'switch',
+						'name' => 'netdata7lg',
+						'label' => 'Show on large screens',
+						'value' => $GLOBALS['netdata7lg']
+					),
+					array(
+						'type' => 'switch',
+						'name' => 'netdata7md',
+						'label' => 'Show on medium screens',
+						'value' => $GLOBALS['netdata7md']
+					),
+					array(
+						'type' => 'switch',
+						'name' => 'netdata7sm',
+						'label' => 'Show on small screens',
+						'value' => $GLOBALS['netdata7sm']
+					),
 				),
 				'Options' => array(
 					array(

js/functions.js

@@ -7481,19 +7481,19 @@ function buildNetdataItem(array){
 
     .all-netdata .chart-lg .gauge-chart,
     .all-netdata .gauge-cont.chart-lg {
-        height: 300px;
+        //height: 300px;
         width: 300px;
     }
 
     .all-netdata .chart-md .gauge-chart,
     .all-netdata .gauge-cont.chart-md {
-        height: 275px;
+        //height: 275px;
         width: 275px;
     }
 
     .all-netdata .chart-sm .gauge-chart,
     .all-netdata .gauge-cont.chart-sm {
-        height: 250px;
+        //height: 250px;
         width: 250px;
     }
 
@@ -7544,9 +7544,9 @@ function buildNetdataItem(array){
     </style>
     `;
 
-    var buildEasyPieChart = function(e,i,size,easySize) {
+    var buildEasyPieChart = function(e,i,size,easySize,display) {
         return `
-        <div class="chart-`+size+` my-3 text-center">
+        <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>
@@ -7571,7 +7571,7 @@ function buildNetdataItem(array){
         `;
     }
 
-    var buildGaugeChart = function(e,i,size,easySize) {
+    var buildGaugeChart = function(e,i,size,easySize,display) {
         switch(size) {
             case 'lg':
                 easySize = 300;
@@ -7585,7 +7585,7 @@ function buildNetdataItem(array){
                 break;
         }
         return `
-        <div class="mx-0 gauge-cont chart-`+size+` my-3 text-center">
+        <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>
@@ -7642,10 +7642,29 @@ function buildNetdataItem(array){
                 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,size,easySize);
+            html += buildEasyPieChart(e,i,size,easySize,display);
         } else if(e.chart == 'gauge') {
-            html += buildGaugeChart(e,i,size,easySize);
+            html += buildGaugeChart(e,i,size,easySize,display);
         }
     });