generated html elements now get a uuid
Costa Tsaousis (ktsaou) committed
Nov 30, 2015 at 00:28 UTC
a0338b3bec921e4345481c6b4882617351714254
2 files changed
+49
-5
web/dashboard.html
+27
@@ -94,6 +94,33 @@ This is a template for building custom dashboards. To build a dashboard you just
94
Sparkline charts support 'NULL' values, so the charts can indicate that values are missing.
95
Sparkline charts stretch the values to show the variations between values in more detail.
96
They also have mouse-hover support.
97
+ <br/>
98
+ Sparklines are fantastic. You can inline charts in text. For example this
99
+ <div style="display: inline; position: relative;"
100
+ data-netdata="system.cpu"
101
+ data-chart-library="sparkline"
102
+ data-width="60"
103
+ data-height="15"
104
+ data-after="-30"
105
+ </div> is my current cpu usage,
106
+ <br/>
107
+ while this
108
+ <div style="display: inline; position: relative;"
109
+ data-netdata="netdata.net"
110
+ data-dimensions="out"
111
+ data-chart-library="sparkline"
112
+ data-width="60"
113
+ data-height="15"
114
+ data-after="-30"
115
+ </div> is the bandwidth my netdata server is currently transmitting and this
116
+
117
+ <div style="display: inline; position: relative;"
118
+ data-netdata="netdata.requests"
119
+ data-chart-library="sparkline"
120
+ data-width="60"
121
+ data-height="15"
122
+ data-after="-30"
123
+ </div> is the requests/sec it serves.
124
</td></tr>
125
<tr>
126
<td width="600" align="center">
web/dashboard.js
+22
-5
@@ -86,7 +86,8 @@
86
}
87
88
NETDATA.all_url = 'all2.js';
89
- NETDATA_idle_between_charts = 50;
89
+ NETDATA.idle_between_charts = 50;
90
+ NETDATA.idle_between_loops = 100;
91
NETDATA.debug = 1;
92
93
if(NETDATA.debug) console.log('welcome to NETDATA');
@@ -385,7 +386,7 @@
386
// finished, restart
387
setTimeout(function() {
388
netdataRefreshTargets(targets, 0);
388
- }, 1000);
389
+ }, NETDATA.idle_between_loops);
390
}
391
else {
392
var self = $(target);
@@ -398,11 +399,20 @@
399
netdataDownloadChartData.call(target, function() {
400
netdataRefreshTargets(targets, ++index);
401
});
401
- }, NETDATA_idle_between_charts);
402
+ }, NETDATA.idle_between_charts);
403
}
404
}
405
}
406
407
+ NETDATA.guid = function() {
408
+ function s4() {
409
+ return Math.floor((1 + Math.random()) * 0x10000)
410
+ .toString(16)
411
+ .substring(1);
412
+ }
413
+
414
+ return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
415
+ }
416
417
// ----------------------------------------------------------------------------------------------------------------
418
// piety
@@ -574,8 +584,13 @@
584
height: height
585
};
586
587
+ var uuid = NETDATA.guid();
588
+ this.innerHTML = '<div style="display: inline-block; position: relative;" id="' + uuid + '"></div>';
589
+ var div = document.getElementById(uuid);
590
+
591
self.sparkline(data, options);
592
self.data('sparkline-options', options)
593
+ .data('uuid', uuid)
594
.data('created', true);
595
};
596
@@ -757,13 +772,15 @@
772
}
773
};
774
760
- self.html('<div id="dygraph-' + chart.id + '"></div>');
775
+ var uuid = NETDATA.guid();
776
+ self.html('<div id="' + uuid + '"></div>');
777
762
- var dchart = new Dygraph(document.getElementById('dygraph-' + chart.id),
778
+ var dchart = new Dygraph(document.getElementById(uuid),
779
data.data, options);
780
781
self.data('dygraph-instance', dchart)
782
.data('dygraph-options', options)
783
+ .data('uuid', uuid)
784
.data('created', true);
785
786
//NETDATA.dygraphAllCharts.push(dchart);