easypiechart and gauge charts now support fixed aspect ratio which is pre-calculated...

diff --git a/web/dashboard.css b/web/dashboard.css
index 937825d7f5fcac310c82b8867f8a082c95821834..f17d73566f4502dbe92cd537d45c79714b5d1f74 100755 (executable)
--- a/web/dashboard.css
+++ b/web/dashboard.css
@@ -19,6 +19,13 @@ html {
        /* width and height is given per chart with data-width and data-height */
 }
 
+.netdata-aspect {
+       position: relative;
+       width: 100%;
+       padding: 0px;
+       margin: 0px;
+}
+
 .netdata-container-with-legend {
        display: -webkit-flex; /* Safari */
        -webkit-flex-wrap: wrap; /* Safari 6.1+ */
@@ -361,7 +368,6 @@ html {
        font-weight: normal;
 }
 
-
 .gaugeChart {
        position: relative;
        text-align: center;

diff --git a/web/dashboard.js b/web/dashboard.js
index 2dd1e2ecac8564872d02343d6e7f928bd579a542..1ac5c5b560e04e526d213f00c5fcfffc871a8420 100755 (executable)
--- a/web/dashboard.js
+++ b/web/dashboard.js
@@ -385,6 +385,8 @@
        };
 
        NETDATA.onscroll = function() {
+               // console.log('onscroll');
+
                NETDATA.options.last_page_scroll = new Date().getTime();
                if(NETDATA.options.targets === null) return;
 
@@ -1012,10 +1014,19 @@
                        else if(typeof(that.width) === 'number')
                                $(that.element).css('width', that.width + 'px');
 
-                       if(typeof(that.height) === 'string')
-                               $(that.element).css('height', that.height);
-                       else if(typeof(that.height) === 'number')
-                               $(that.element).css('height', that.height + 'px');
+                       if(typeof(that.library.aspect_ratio) === 'undefined') {
+                               if(typeof(that.height) === 'string')
+                                       $(that.element).css('height', that.height);
+                               else if(typeof(that.height) === 'number')
+                                       $(that.element).css('height', that.height + 'px');
+                       }
+                       else {
+                               var w = that.element.offsetWidth;
+                               if(w === null || w === 0)
+                                       that.tm.last_resized = 0;
+                               else
+                                       $(that.element).css('height', (that.element.offsetWidth * that.library.aspect_ratio / 100).toString() + 'px');
+                       }
 
                        if(NETDATA.chartDefaults.min_width !== null)
                                $(that.element).css('min-width', NETDATA.chartDefaults.min_width);
@@ -2969,6 +2980,10 @@
 
                // bootstrap tab switching
                $('a[data-toggle="tab"]').on('shown.bs.tab', NETDATA.onscroll);
+
+               // bootstrap modal switching
+               $('.modal').on('hidden.bs.modal', NETDATA.onscroll);
+               $('.modal').on('shown.bs.modal', NETDATA.onscroll);
                
                NETDATA.parseDom(NETDATA.chartRefresher);
        }
@@ -4561,14 +4576,14 @@
                else
                        state.gaugeMax = max;
 
-               var width = state.chartWidth(), height = state.chartHeight(), ratio = 1.5;
-               switch(adjust) {
-                       case 'width': width = height * ratio; break;
-                       case 'height':
-                       default: height = width / ratio; break;
-               }
-               state.element.style.width = width.toString() + 'px';
-               state.element.style.height = height.toString() + 'px';
+               var width = state.chartWidth(), height = state.chartHeight(); //, ratio = 1.5;
+               //switch(adjust) {
+               //      case 'width': width = height * ratio; break;
+               //      case 'height':
+               //      default: height = width / ratio; break;
+               //}
+               //state.element.style.width = width.toString() + 'px';
+               //state.element.style.height = height.toString() + 'px';
 
                var lum_d = 0.05;
 
@@ -4846,7 +4861,8 @@
                        autoresize: function(state) { return false; },
                        max_updates_to_recreate: function(state) { return 5000; },
                        track_colors: function(state) { return false; },
-                       pixels_per_point: function(state) { return 3; }
+                       pixels_per_point: function(state) { return 3; },
+                       aspect_ratio: 100
                },
                "gauge": {
                        initialize: NETDATA.gaugeInitialize,
@@ -4863,7 +4879,8 @@
                        autoresize: function(state) { return false; },
                        max_updates_to_recreate: function(state) { return 5000; },
                        track_colors: function(state) { return false; },
-                       pixels_per_point: function(state) { return 3; }
+                       pixels_per_point: function(state) { return 3; },
+                       aspect_ratio: 70
                }
        };
 

diff --git a/web/index.html b/web/index.html
index 8c600bb0353e88e863280435b216c66f36cd2768..b70946c1316ffbc42c1f62512c83f271be54724f 100755 (executable)
--- a/web/index.html
+++ b/web/index.html
@@ -253,7 +253,7 @@
        <!-- <script> netdataServer = "http://box:19999"; </script> -->
 
        <!-- load the dashboard manager - it will do the rest -->
-       <script type="text/javascript" src="dashboard.js?v18"></script>
+       <script type="text/javascript" src="dashboard.js?v19"></script>
 </head>
 
 <body data-spy="scroll" data-target="#sidebar">
@@ -912,8 +912,7 @@ function prepareScreen(data) {
                                                        + ' data-chart-library="gauge"'
                                                        + ' data-gauge-adjust="width"'
                                                        + ' data-title="Receive"'
-                                                       + ' data-width="100px"'
-                                                       + ' data-height="100px"'
+                                                       + ' data-width="12%"'
                                                        + ' data-before="0"'
                                                        + ' data-after="-' + duration.toString() + '"'
                                                        + ' data-points="' + duration.toString() + '"'
@@ -925,8 +924,7 @@ function prepareScreen(data) {
                                                        + ' data-chart-library="gauge"'
                                                        + ' data-gauge-adjust="width"'
                                                        + ' data-title="Sent"'
-                                                       + ' data-width="100px"'
-                                                       + ' data-height="100px"'
+                                                       + ' data-width="12%"'
                                                        + ' data-before="0"'
                                                        + ' data-after="-' + duration.toString() + '"'
                                                        + ' data-points="' + duration.toString() + '"'
@@ -941,8 +939,7 @@ function prepareScreen(data) {
                                                                + ' data-chart-library="gauge"'
                                                                + ' data-gauge-adjust="width"'
                                                                + ' data-title="Receive"'
-                                                               + ' data-width="100px"'
-                                                               + ' data-height="100px"'
+                                                               + ' data-width="12%"'
                                                                + ' data-before="0"'
                                                                + ' data-after="-' + duration.toString() + '"'
                                                                + ' data-points="' + duration.toString() + '"'
@@ -954,8 +951,7 @@ function prepareScreen(data) {
                                                                + ' data-chart-library="gauge"'
                                                                + ' data-gauge-adjust="width"'
                                                                + ' data-title="Sent"'
-                                                               + ' data-width="100px"'
-                                                               + ' data-height="100px"'
+                                                               + ' data-width="12%"'
                                                                + ' data-before="0"'
                                                                + ' data-after="-' + duration.toString() + '"'
                                                                + ' data-points="' + duration.toString() + '"'
@@ -1000,8 +996,7 @@ function prepareScreen(data) {
                                                                + ' data-chart-library="gauge"'
                                                                + ' data-gauge-adjust="width"'
                                                                + ' data-title="Read"'
-                                                               + ' data-width="100px"'
-                                                               + ' data-height="100px"'
+                                                               + ' data-width="12%"'
                                                                + ' data-before="0"'
                                                                + ' data-after="-' + duration.toString() + '"'
                                                                + ' data-points="' + duration.toString() + '"'
@@ -1013,8 +1008,7 @@ function prepareScreen(data) {
                                                                + ' data-chart-library="gauge"'
                                                                + ' data-gauge-adjust="width"'
                                                                + ' data-title="Write"'
-                                                               + ' data-width="100px"'
-                                                               + ' data-height="100px"'
+                                                               + ' data-width="12%"'
                                                                + ' data-before="0"'
                                                                + ' data-after="-' + duration.toString() + '"'
                                                                + ' data-points="' + duration.toString() + '"'
@@ -1028,8 +1022,7 @@ function prepareScreen(data) {
                                                                + ' data-title="Utilization"'
                                                                + ' data-gauge-max-value="100"'
                                                                + ' data-gauge-adjust="width"'
-                                                               + ' data-width="100px"'
-                                                               + ' data-height="100px"'
+                                                               + ' data-width="12%"'
                                                                + ' data-before="0"'
                                                                + ' data-after="-' + duration.toString() + '"'
                                                                + ' data-points="' + duration.toString() + '"'
@@ -1087,7 +1080,6 @@ function prepareScreen(data) {
                                + ' data-units="%"'
                                + ' data-easypiechart-max-value="100"'
                                + ' data-width="8%"'
-                               + ' data-height="49px"'
                                + ' data-before="0"'
                                + ' data-after="-' + duration.toString() + '"'
                                + ' data-points="' + duration.toString() + '"'
@@ -1101,7 +1093,6 @@ function prepareScreen(data) {
                                + ' data-title="Disk Read"'
                                + ' data-units="KB / s"'
                                + ' data-width="10%"'
-                               + ' data-height="49px"'
                                + ' data-before="0"'
                                + ' data-after="-' + duration.toString() + '"'
                                + ' data-points="' + duration.toString() + '"'
@@ -1114,7 +1105,6 @@ function prepareScreen(data) {
                                + ' data-title="Disk Write"'
                                + ' data-units="KB / s"'
                                + ' data-width="10%"'
-                               + ' data-height="49px"'
                                + ' data-before="0"'
                                + ' data-after="-' + duration.toString() + '"'
                                + ' data-points="' + duration.toString() + '"'
@@ -1129,7 +1119,6 @@ function prepareScreen(data) {
                                + ' data-units="%"'
                                + ' data-gauge-max-value="100"'
                                + ' data-width="18%"'
-                               + ' data-height="49px"'
                                + ' data-after="-' + duration.toString() + '"'
                                + ' data-points="' + duration.toString() + '"'
                                + ' data-colors="' + NETDATA.colors[12] + '"'
@@ -1142,7 +1131,6 @@ function prepareScreen(data) {
                                + ' data-title="IPv4 Inbound"'
                                + ' data-units="kbps"'
                                + ' data-width="10%"'
-                               + ' data-height="49px"'
                                + ' data-before="0"'
                                + ' data-after="-' + duration.toString() + '"'
                                + ' data-points="' + duration.toString() + '"'
@@ -1155,7 +1143,6 @@ function prepareScreen(data) {
                                + ' data-title="IPv4 Outbound"'
                                + ' data-units="kbps"'
                                + ' data-width="10%"'
-                               + ' data-height="49px"'
                                + ' data-before="0"'
                                + ' data-after="-' + duration.toString() + '"'
                                + ' data-points="' + duration.toString() + '"'
@@ -1172,8 +1159,6 @@ function prepareScreen(data) {
                                + ' data-units="%"'
                                + ' data-easypiechart-max-value="100"'
                                + ' data-width="8%"'
-                               + ' data-height="1"'
-                               + ' data-before="49px"'
                                + ' data-after="-' + duration.toString() + '"'
                                + ' data-points="' + duration.toString() + '"'
                                + ' data-colors="' + NETDATA.colors[7] + '"'
@@ -1187,7 +1172,6 @@ function prepareScreen(data) {
                                + ' data-chart-library="easypiechart"'
                                + ' data-title="Swap Read"'
                                + ' data-width="100px"'
-                               + ' data-height="100px"'
                                + ' data-before="0"'
                                + ' data-after="-' + duration.toString() + '"'
                                + ' data-points="' + duration.toString() + '"'
@@ -1199,7 +1183,6 @@ function prepareScreen(data) {
                                + ' data-chart-library="easypiechart"'
                                + ' data-title="Swap Write"'
                                + ' data-width="100px"'
-                               + ' data-height="100px"'
                                + ' data-before="0"'
                                + ' data-after="-' + duration.toString() + '"'
                                + ' data-points="' + duration.toString() + '"'
@@ -1214,7 +1197,6 @@ function prepareScreen(data) {
                                + ' data-chart-library="easypiechart"'
                                + ' data-title="Switches"'
                                + ' data-width="100px"'
-                               + ' data-height="100px"'
                                + ' data-before="0"'
                                + ' data-after="-' + duration.toString() + '"'
                                + ' data-points="' + duration.toString() + '"'
@@ -1226,7 +1208,6 @@ function prepareScreen(data) {
                                + ' data-chart-library="easypiechart"'
                                + ' data-title="Interrupts"'
                                + ' data-width="100px"'
-                               + ' data-height="100px"'
                                + ' data-before="0"'
                                + ' data-after="-' + duration.toString() + '"'
                                + ' data-points="' + duration.toString() + '"'
@@ -1258,8 +1239,7 @@ function prepareScreen(data) {
                                                        + ' data-chart-library="gauge"'
                                                        + ' data-title="Received"'
                                                        + ' data-gauge-adjust="width"'
-                                                       + ' data-width="100px"'
-                                                       + ' data-height="100px"'
+                                                       + ' data-width="12%"'
                                                        + ' data-before="0"'
                                                        + ' data-after="-' + duration.toString() + '"'
                                                        + ' data-points="' + duration.toString() + '"'
@@ -1270,8 +1250,7 @@ function prepareScreen(data) {
                                                        + ' data-chart-library="gauge"'
                                                        + ' data-title="Sent"'
                                                        + ' data-gauge-adjust="width"'
-                                                       + ' data-width="100px"'
-                                                       + ' data-height="100px"'
+                                                       + ' data-width="12%"'
                                                        + ' data-before="0"'
                                                        + ' data-after="-' + duration.toString() + '"'
                                                        + ' data-points="' + duration.toString() + '"'
@@ -1283,8 +1262,7 @@ function prepareScreen(data) {
                                                        + ' data-chart-library="gauge"'
                                                        + ' data-title="Requests / second"'
                                                        + ' data-gauge-adjust="width"'
-                                                       + ' data-width="100px"'
-                                                       + ' data-height="100px"'
+                                                       + ' data-width="12%"'
                                                        + ' data-before="0"'
                                                        + ' data-after="-' + duration.toString() + '"'
                                                        + ' data-points="' + duration.toString() + '"'
@@ -1297,8 +1275,7 @@ function prepareScreen(data) {
                                                        + ' data-chart-library="gauge"'
                                                        + ' data-title="Connections"'
                                                        + ' data-gauge-adjust="width"'
-                                                       + ' data-width="100px"'
-                                                       + ' data-height="100px"'
+                                                       + ' data-width="12%"'
                                                        + ' data-before="0"'
                                                        + ' data-after="-' + duration.toString() + '"'
                                                        + ' data-points="' + duration.toString() + '"'
@@ -1438,12 +1415,12 @@ function prepareScreen(data) {
 
 NETDATA.pause(function() {
 
-       $('#welcomeModal').on('hidden.bs.modal', function (e) {
-               NETDATA.updatedDom();
-       });
-       $('#welcomeModal').on('shown.bs.modal', function (e) {
-               NETDATA.updatedDom();
-       });
+//     $('#welcomeModal').on('hidden.bs.modal', function (e) {
+//             NETDATA.updatedDom();
+//     });
+//     $('#welcomeModal').on('shown.bs.modal', function (e) {
+//             NETDATA.updatedDom();
+//     });
 
        // download all the charts the server knows
        NETDATA.chartRegistry.downloadAll(NETDATA.serverDefault, function(data) {