From f20afc2a668736490b70e695e1a2cc327daa709d Mon Sep 17 00:00:00 2001 From: "Costa Tsaousis (ktsaou)" Date: Sun, 10 Jan 2016 16:59:10 +0200 Subject: [PATCH] easypiechart and gauge charts now support fixed aspect ratio which is pre-calculated to avoid resizing the DOM on scroll --- web/dashboard.css | 8 ++++++- web/dashboard.js | 45 +++++++++++++++++++++++++----------- web/index.html | 59 +++++++++++++++-------------------------------- 3 files changed, 56 insertions(+), 56 deletions(-) diff --git a/web/dashboard.css b/web/dashboard.css index 937825d7..f17d7356 100755 --- 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 2dd1e2ec..1ac5c5b5 100755 --- 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 8c600bb0..b70946c1 100755 --- a/web/index.html +++ b/web/index.html @@ -253,7 +253,7 @@ - + @@ -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) { -- 2.39.2