easypiechart and gauge charts now support fixed aspect ratio which is pre-calculated to avoid resizing the DOM on scroll
Costa Tsaousis (ktsaou) committed
Jan 10, 2016 at 16:59 UTC
f20afc2a668736490b70e695e1a2cc327daa709d
3 files changed
+56
-56
web/dashboard.css
+7
-1
@@ -19,6 +19,13 @@ html {
19
/* width and height is given per chart with data-width and data-height */
20
}
21
22
+.netdata-aspect {
23
+ position: relative;
24
+ width: 100%;
25
+ padding: 0px;
26
+ margin: 0px;
27
+}
28
+
29
.netdata-container-with-legend {
30
display: -webkit-flex; /* Safari */
31
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
@@ -361,7 +368,6 @@ html {
368
font-weight: normal;
369
}
370
364
-
371
.gaugeChart {
372
position: relative;
373
text-align: center;
web/dashboard.js
+31
-14
@@ -385,6 +385,8 @@
385
};
386
387
NETDATA.onscroll = function() {
388
+ // console.log('onscroll');
389
+
390
NETDATA.options.last_page_scroll = new Date().getTime();
391
if(NETDATA.options.targets === null) return;
392
@@ -1012,10 +1014,19 @@
1014
else if(typeof(that.width) === 'number')
1015
$(that.element).css('width', that.width + 'px');
1016
1015
- if(typeof(that.height) === 'string')
1016
- $(that.element).css('height', that.height);
1017
- else if(typeof(that.height) === 'number')
1018
- $(that.element).css('height', that.height + 'px');
1017
+ if(typeof(that.library.aspect_ratio) === 'undefined') {
1018
+ if(typeof(that.height) === 'string')
1019
+ $(that.element).css('height', that.height);
1020
+ else if(typeof(that.height) === 'number')
1021
+ $(that.element).css('height', that.height + 'px');
1022
+ }
1023
+ else {
1024
+ var w = that.element.offsetWidth;
1025
+ if(w === null || w === 0)
1026
+ that.tm.last_resized = 0;
1027
+ else
1028
+ $(that.element).css('height', (that.element.offsetWidth * that.library.aspect_ratio / 100).toString() + 'px');
1029
+ }
1030
1031
if(NETDATA.chartDefaults.min_width !== null)
1032
$(that.element).css('min-width', NETDATA.chartDefaults.min_width);
@@ -2969,6 +2980,10 @@
2980
2981
// bootstrap tab switching
2982
$('a[data-toggle="tab"]').on('shown.bs.tab', NETDATA.onscroll);
2983
+
2984
+ // bootstrap modal switching
2985
+ $('.modal').on('hidden.bs.modal', NETDATA.onscroll);
2986
+ $('.modal').on('shown.bs.modal', NETDATA.onscroll);
2987
2988
NETDATA.parseDom(NETDATA.chartRefresher);
2989
}
@@ -4561,14 +4576,14 @@
4576
else
4577
state.gaugeMax = max;
4578
4564
- var width = state.chartWidth(), height = state.chartHeight(), ratio = 1.5;
4565
- switch(adjust) {
4566
- case 'width': width = height * ratio; break;
4567
- case 'height':
4568
- default: height = width / ratio; break;
4569
- }
4570
- state.element.style.width = width.toString() + 'px';
4571
- state.element.style.height = height.toString() + 'px';
4579
+ var width = state.chartWidth(), height = state.chartHeight(); //, ratio = 1.5;
4580
+ //switch(adjust) {
4581
+ // case 'width': width = height * ratio; break;
4582
+ // case 'height':
4583
+ // default: height = width / ratio; break;
4584
+ //}
4585
+ //state.element.style.width = width.toString() + 'px';
4586
+ //state.element.style.height = height.toString() + 'px';
4587
4588
var lum_d = 0.05;
4589
@@ -4846,7 +4861,8 @@
4861
autoresize: function(state) { return false; },
4862
max_updates_to_recreate: function(state) { return 5000; },
4863
track_colors: function(state) { return false; },
4849
- pixels_per_point: function(state) { return 3; }
4864
+ pixels_per_point: function(state) { return 3; },
4865
+ aspect_ratio: 100
4866
},
4867
"gauge": {
4868
initialize: NETDATA.gaugeInitialize,
@@ -4863,7 +4879,8 @@
4879
autoresize: function(state) { return false; },
4880
max_updates_to_recreate: function(state) { return 5000; },
4881
track_colors: function(state) { return false; },
4866
- pixels_per_point: function(state) { return 3; }
4882
+ pixels_per_point: function(state) { return 3; },
4883
+ aspect_ratio: 70
4884
}
4885
};
4886
web/index.html
+18
-41
@@ -253,7 +253,7 @@
253
<!-- <script> netdataServer = "http://box:19999"; </script> -->
254
255
<!-- load the dashboard manager - it will do the rest -->
256
- <script type="text/javascript" src="dashboard.js?v18"></script>
256
+ <script type="text/javascript" src="dashboard.js?v19"></script>
257
</head>
258
259
<body data-spy="scroll" data-target="#sidebar">
@@ -912,8 +912,7 @@ function prepareScreen(data) {
912
+ ' data-chart-library="gauge"'
913
+ ' data-gauge-adjust="width"'
914
+ ' data-title="Receive"'
915
- + ' data-width="100px"'
916
- + ' data-height="100px"'
915
+ + ' data-width="12%"'
916
+ ' data-before="0"'
917
+ ' data-after="-' + duration.toString() + '"'
918
+ ' data-points="' + duration.toString() + '"'
@@ -925,8 +924,7 @@ function prepareScreen(data) {
924
+ ' data-chart-library="gauge"'
925
+ ' data-gauge-adjust="width"'
926
+ ' data-title="Sent"'
928
- + ' data-width="100px"'
929
- + ' data-height="100px"'
927
+ + ' data-width="12%"'
928
+ ' data-before="0"'
929
+ ' data-after="-' + duration.toString() + '"'
930
+ ' data-points="' + duration.toString() + '"'
@@ -941,8 +939,7 @@ function prepareScreen(data) {
939
+ ' data-chart-library="gauge"'
940
+ ' data-gauge-adjust="width"'
941
+ ' data-title="Receive"'
944
- + ' data-width="100px"'
945
- + ' data-height="100px"'
942
+ + ' data-width="12%"'
943
+ ' data-before="0"'
944
+ ' data-after="-' + duration.toString() + '"'
945
+ ' data-points="' + duration.toString() + '"'
@@ -954,8 +951,7 @@ function prepareScreen(data) {
951
+ ' data-chart-library="gauge"'
952
+ ' data-gauge-adjust="width"'
953
+ ' data-title="Sent"'
957
- + ' data-width="100px"'
958
- + ' data-height="100px"'
954
+ + ' data-width="12%"'
955
+ ' data-before="0"'
956
+ ' data-after="-' + duration.toString() + '"'
957
+ ' data-points="' + duration.toString() + '"'
@@ -1000,8 +996,7 @@ function prepareScreen(data) {
996
+ ' data-chart-library="gauge"'
997
+ ' data-gauge-adjust="width"'
998
+ ' data-title="Read"'
1003
- + ' data-width="100px"'
1004
- + ' data-height="100px"'
999
+ + ' data-width="12%"'
1000
+ ' data-before="0"'
1001
+ ' data-after="-' + duration.toString() + '"'
1002
+ ' data-points="' + duration.toString() + '"'
@@ -1013,8 +1008,7 @@ function prepareScreen(data) {
1008
+ ' data-chart-library="gauge"'
1009
+ ' data-gauge-adjust="width"'
1010
+ ' data-title="Write"'
1016
- + ' data-width="100px"'
1017
- + ' data-height="100px"'
1011
+ + ' data-width="12%"'
1012
+ ' data-before="0"'
1013
+ ' data-after="-' + duration.toString() + '"'
1014
+ ' data-points="' + duration.toString() + '"'
@@ -1028,8 +1022,7 @@ function prepareScreen(data) {
1022
+ ' data-title="Utilization"'
1023
+ ' data-gauge-max-value="100"'
1024
+ ' data-gauge-adjust="width"'
1031
- + ' data-width="100px"'
1032
- + ' data-height="100px"'
1025
+ + ' data-width="12%"'
1026
+ ' data-before="0"'
1027
+ ' data-after="-' + duration.toString() + '"'
1028
+ ' data-points="' + duration.toString() + '"'
@@ -1087,7 +1080,6 @@ function prepareScreen(data) {
1080
+ ' data-units="%"'
1081
+ ' data-easypiechart-max-value="100"'
1082
+ ' data-width="8%"'
1090
- + ' data-height="49px"'
1083
+ ' data-before="0"'
1084
+ ' data-after="-' + duration.toString() + '"'
1085
+ ' data-points="' + duration.toString() + '"'
@@ -1101,7 +1093,6 @@ function prepareScreen(data) {
1093
+ ' data-title="Disk Read"'
1094
+ ' data-units="KB / s"'
1095
+ ' data-width="10%"'
1104
- + ' data-height="49px"'
1096
+ ' data-before="0"'
1097
+ ' data-after="-' + duration.toString() + '"'
1098
+ ' data-points="' + duration.toString() + '"'
@@ -1114,7 +1105,6 @@ function prepareScreen(data) {
1105
+ ' data-title="Disk Write"'
1106
+ ' data-units="KB / s"'
1107
+ ' data-width="10%"'
1117
- + ' data-height="49px"'
1108
+ ' data-before="0"'
1109
+ ' data-after="-' + duration.toString() + '"'
1110
+ ' data-points="' + duration.toString() + '"'
@@ -1129,7 +1119,6 @@ function prepareScreen(data) {
1119
+ ' data-units="%"'
1120
+ ' data-gauge-max-value="100"'
1121
+ ' data-width="18%"'
1132
- + ' data-height="49px"'
1122
+ ' data-after="-' + duration.toString() + '"'
1123
+ ' data-points="' + duration.toString() + '"'
1124
+ ' data-colors="' + NETDATA.colors[12] + '"'
@@ -1142,7 +1131,6 @@ function prepareScreen(data) {
1131
+ ' data-title="IPv4 Inbound"'
1132
+ ' data-units="kbps"'
1133
+ ' data-width="10%"'
1145
- + ' data-height="49px"'
1134
+ ' data-before="0"'
1135
+ ' data-after="-' + duration.toString() + '"'
1136
+ ' data-points="' + duration.toString() + '"'
@@ -1155,7 +1143,6 @@ function prepareScreen(data) {
1143
+ ' data-title="IPv4 Outbound"'
1144
+ ' data-units="kbps"'
1145
+ ' data-width="10%"'
1158
- + ' data-height="49px"'
1146
+ ' data-before="0"'
1147
+ ' data-after="-' + duration.toString() + '"'
1148
+ ' data-points="' + duration.toString() + '"'
@@ -1172,8 +1159,6 @@ function prepareScreen(data) {
1159
+ ' data-units="%"'
1160
+ ' data-easypiechart-max-value="100"'
1161
+ ' data-width="8%"'
1175
- + ' data-height="1"'
1176
- + ' data-before="49px"'
1162
+ ' data-after="-' + duration.toString() + '"'
1163
+ ' data-points="' + duration.toString() + '"'
1164
+ ' data-colors="' + NETDATA.colors[7] + '"'
@@ -1187,7 +1172,6 @@ function prepareScreen(data) {
1172
+ ' data-chart-library="easypiechart"'
1173
+ ' data-title="Swap Read"'
1174
+ ' data-width="100px"'
1190
- + ' data-height="100px"'
1175
+ ' data-before="0"'
1176
+ ' data-after="-' + duration.toString() + '"'
1177
+ ' data-points="' + duration.toString() + '"'
@@ -1199,7 +1183,6 @@ function prepareScreen(data) {
1183
+ ' data-chart-library="easypiechart"'
1184
+ ' data-title="Swap Write"'
1185
+ ' data-width="100px"'
1202
- + ' data-height="100px"'
1186
+ ' data-before="0"'
1187
+ ' data-after="-' + duration.toString() + '"'
1188
+ ' data-points="' + duration.toString() + '"'
@@ -1214,7 +1197,6 @@ function prepareScreen(data) {
1197
+ ' data-chart-library="easypiechart"'
1198
+ ' data-title="Switches"'
1199
+ ' data-width="100px"'
1217
- + ' data-height="100px"'
1200
+ ' data-before="0"'
1201
+ ' data-after="-' + duration.toString() + '"'
1202
+ ' data-points="' + duration.toString() + '"'
@@ -1226,7 +1208,6 @@ function prepareScreen(data) {
1208
+ ' data-chart-library="easypiechart"'
1209
+ ' data-title="Interrupts"'
1210
+ ' data-width="100px"'
1229
- + ' data-height="100px"'
1211
+ ' data-before="0"'
1212
+ ' data-after="-' + duration.toString() + '"'
1213
+ ' data-points="' + duration.toString() + '"'
@@ -1258,8 +1239,7 @@ function prepareScreen(data) {
1239
+ ' data-chart-library="gauge"'
1240
+ ' data-title="Received"'
1241
+ ' data-gauge-adjust="width"'
1261
- + ' data-width="100px"'
1262
- + ' data-height="100px"'
1242
+ + ' data-width="12%"'
1243
+ ' data-before="0"'
1244
+ ' data-after="-' + duration.toString() + '"'
1245
+ ' data-points="' + duration.toString() + '"'
@@ -1270,8 +1250,7 @@ function prepareScreen(data) {
1250
+ ' data-chart-library="gauge"'
1251
+ ' data-title="Sent"'
1252
+ ' data-gauge-adjust="width"'
1273
- + ' data-width="100px"'
1274
- + ' data-height="100px"'
1253
+ + ' data-width="12%"'
1254
+ ' data-before="0"'
1255
+ ' data-after="-' + duration.toString() + '"'
1256
+ ' data-points="' + duration.toString() + '"'
@@ -1283,8 +1262,7 @@ function prepareScreen(data) {
1262
+ ' data-chart-library="gauge"'
1263
+ ' data-title="Requests / second"'
1264
+ ' data-gauge-adjust="width"'
1286
- + ' data-width="100px"'
1287
- + ' data-height="100px"'
1265
+ + ' data-width="12%"'
1266
+ ' data-before="0"'
1267
+ ' data-after="-' + duration.toString() + '"'
1268
+ ' data-points="' + duration.toString() + '"'
@@ -1297,8 +1275,7 @@ function prepareScreen(data) {
1275
+ ' data-chart-library="gauge"'
1276
+ ' data-title="Connections"'
1277
+ ' data-gauge-adjust="width"'
1300
- + ' data-width="100px"'
1301
- + ' data-height="100px"'
1278
+ + ' data-width="12%"'
1279
+ ' data-before="0"'
1280
+ ' data-after="-' + duration.toString() + '"'
1281
+ ' data-points="' + duration.toString() + '"'
@@ -1438,12 +1415,12 @@ function prepareScreen(data) {
1415
1416
NETDATA.pause(function() {
1417
1441
- $('#welcomeModal').on('hidden.bs.modal', function (e) {
1442
- NETDATA.updatedDom();
1443
- });
1444
- $('#welcomeModal').on('shown.bs.modal', function (e) {
1445
- NETDATA.updatedDom();
1446
- });
1418
+// $('#welcomeModal').on('hidden.bs.modal', function (e) {
1419
+// NETDATA.updatedDom();
1420
+// });
1421
+// $('#welcomeModal').on('shown.bs.modal', function (e) {
1422
+// NETDATA.updatedDom();
1423
+// });
1424
1425
// download all the charts the server knows
1426
NETDATA.chartRegistry.downloadAll(NETDATA.serverDefault, function(data) {