fix for gauge jumping when min/max value is updated
Costa Tsaousis (ktsaou) committed
Jan 12, 2016 at 02:17 UTC
e68d8586840df086d26281907c5636c77c9f1fe0
4 files changed
+97
-3
web/Makefile.am
+1
@@ -6,6 +6,7 @@ MAINTAINERCLEANFILES= $(srcdir)/Makefile.in
6
dist_web_DATA = \
7
robots.txt \
8
index.html \
9
+ demo.html \
10
dashboard.html \
11
dashboard.js \
12
dashboard.css \
web/dashboard.js
+6
-3
@@ -4444,14 +4444,17 @@
4444
if(value > max) max = value;
4445
if(value < min) min = value;
4446
4447
- if(max >= state.___gaugeOld__.max && min <= state.___gaugeOld__.min) {
4447
+ var dvalue = state.gauge_instance.displayedValue;
4448
+
4449
+ if(dvalue >= min && dvalue <= max) {
4450
state.gauge_instance.minValue = min;
4451
state.gauge_instance.maxValue = max;
4452
state.gauge_instance.set(value);
4453
}
4454
else {
4453
- // we can lower the maxValue or increase the minValue
4454
- // of gauge.js, only if we disable animation
4455
+ // the current display value of the gauge
4456
+ // is outside min-max.
4457
+ // we have to disable animation
4458
// otherwise, the gauge will go crazy
4459
var old_speed = state.___gaugeOld__.speed;
4460
NETDATA.gaugeAnimation(state, false);
web/demo.html
new
+42
@@ -0,0 +1,42 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+<head>
4
+ <title>NetData Dashboard</title>
5
+
6
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7
+ <meta charset="utf-8">
8
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9
+ <meta name="viewport" content="width=device-width, initial-scale=1">
10
+ <meta name="apple-mobile-web-app-capable" content="yes">
11
+ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
12
+ <meta name="author" content="costa@tsaousis.gr">
13
+
14
+ <script type="text/javascript" src="dashboard.js"></script>
15
+</head>
16
+<body>
17
+
18
+<div style="width: 100%; text-align: center;">
19
+ <div data-netdata="netdata.server_cpu"
20
+ data-dimensions="user"
21
+ data-chart-library="gauge"
22
+ data-width="150px"
23
+ data-after="-60"
24
+ data-points="60"
25
+ data-title="Yes! Realtime!"
26
+ data-units="I am alive!"
27
+ data-colors="#FF5555"
28
+ ></div>
29
+ <br/>
30
+ <div data-netdata="netdata.server_cpu"
31
+ data-dimensions="user"
32
+ data-chart-library="dygraph"
33
+ data-dygraph-theme="sparkline"
34
+ data-width="200px"
35
+ data-height="30px"
36
+ data-after="-60"
37
+ data-points="60"
38
+ data-colors="#FF5555"
39
+ ></div>
40
+</div>
41
+</body>
42
+</html>
web/index.html
+48
@@ -1243,6 +1243,7 @@ function prepareScreen(data) {
1243
+ ' data-before="0"'
1244
+ ' data-after="-' + duration.toString() + '"'
1245
+ ' data-points="' + duration.toString() + '"'
1246
+ + ' data-colors="' + NETDATA.colors[0] + '"'
1247
+ ' role="application"></div>';
1248
1249
head += '<div data-netdata="' + f.id + '"'
@@ -1254,6 +1255,7 @@ function prepareScreen(data) {
1255
+ ' data-before="0"'
1256
+ ' data-after="-' + duration.toString() + '"'
1257
+ ' data-points="' + duration.toString() + '"'
1258
+ + ' data-colors="' + NETDATA.colors[1] + '"'
1259
+ ' role="application"></div>';
1260
break;
1261
@@ -1295,6 +1297,52 @@ function prepareScreen(data) {
1297
head += '</div>';
1298
html += head + all;
1299
}
1300
+ else if(t.name === 'netfilter') {
1301
+ var head = '<div style="width: 100%; text-align: center;">';
1302
+ var all = '';
1303
+
1304
+ $.each(t.charts, function(x, f) {
1305
+ switch(f.id) {
1306
+ case 'netfilter.sockets' :
1307
+ head += '<div data-netdata="' + f.id + '"'
1308
+ + ' data-chart-library="gauge"'
1309
+ + ' data-title="Active Connections"'
1310
+ + ' data-units="connections"'
1311
+ + ' data-gauge-adjust="width"'
1312
+ + ' data-width="12%"'
1313
+ + ' data-before="0"'
1314
+ + ' data-after="-' + duration.toString() + '"'
1315
+ + ' data-points="' + duration.toString() + '"'
1316
+ + ' data-colors="' + NETDATA.colors[0] + '"'
1317
+ + ' role="application"></div>';
1318
+ break;
1319
+
1320
+ case 'netfilter.new':
1321
+ head += '<div data-netdata="' + f.id + '"'
1322
+ + ' data-dimensions="new"'
1323
+ + ' data-chart-library="gauge"'
1324
+ + ' data-title="New Connections"'
1325
+ + ' data-gauge-adjust="width"'
1326
+ + ' data-width="12%"'
1327
+ + ' data-before="0"'
1328
+ + ' data-after="-' + duration.toString() + '"'
1329
+ + ' data-points="' + duration.toString() + '"'
1330
+ + ' data-colors="' + NETDATA.colors[2] + '"'
1331
+ + ' role="application"></div>';
1332
+ break;
1333
+ }
1334
+
1335
+ all += getMessage(f.id) + '<div data-netdata="' + f.id + '"'
1336
+ + ' data-width="' + pcent_width.toString() + '%"'
1337
+ + ' data-height="' + options.chartsHeight.toString() + 'px"'
1338
+ + ' data-before="0"'
1339
+ + ' data-after="-' + duration.toString() + '"'
1340
+ + ' data-id="' + name2id(options.hostname + '/' + f.id) + '"'
1341
+ + ' role="application"></div>';
1342
+ });
1343
+ head += '</div>';
1344
+ html += head + all;
1345
+ }
1346
else {
1347
$.each(t.charts, function(x, f) {
1348
html += getMessage(f.id) + '<div data-netdata="' + f.id + '"'