fixed fygraphs synchronization performance by disabling animations and series highlit; added css info and css file
Costa Tsaousis (ktsaou) committed
Dec 6, 2015 at 08:03 UTC
5a1912218a3c4f8d98fdc0f8981cf8b6dca47036
4 files changed
+198
-51
web/Makefile.am
+2
-1
@@ -10,9 +10,9 @@ dist_web_DATA = \
10
netdata.js \
11
robots.txt \
12
theme.css \
13
- css/morris.css \
13
dashboard.html \
14
dashboard.js \
15
+ dashboard.css \
16
$(NULL)
17
18
@@ -24,6 +24,7 @@ dist_weblib_DATA = \
24
lib/jquery.peity.min.js \
25
lib/jquery.sparkline.min.js \
26
lib/morris.min.js \
27
+ css/morris.css \
28
lib/raphael-min.js \
29
lib/visible.js \
30
$(NULL)
web/dashboard.css
new
+84
@@ -0,0 +1,84 @@
1
+html {
2
+ font-family: sans-serif;
3
+}
4
+
5
+.netdata-container {
6
+ display: -webkit-flex; /* Safari */
7
+ -webkit-flex-wrap: wrap; /* Safari 6.1+ */
8
+ display: inline-block;
9
+ flex-wrap: wrap;
10
+ overflow: hidden;
11
+}
12
+
13
+.netdata-message {
14
+ font-size: x-small;
15
+ width: 100%;
16
+ height: 100%;
17
+ overflow: hidden;
18
+}
19
+
20
+.netdata-error-message {
21
+ background: #EEEEEE;
22
+}
23
+
24
+.netdata-info-message {
25
+
26
+}
27
+
28
+/*
29
+.netdata-legend {
30
+ width: 50px;
31
+ height: 100%;
32
+ background-color:Gray;
33
+ overflow: auto;
34
+ overflow-y: scroll;
35
+}
36
+*/
37
+
38
+.netdata-chart-container {
39
+
40
+}
41
+
42
+.netdata-peity-container {
43
+
44
+}
45
+
46
+.netdata-sparkline-container {
47
+
48
+}
49
+
50
+.netdata-dygraph-container {
51
+
52
+}
53
+
54
+.netdata-morris-container {
55
+
56
+}
57
+
58
+.netdata-google-container {
59
+
60
+}
61
+
62
+/* make dygraph legend disappear on hover */
63
+.dygraph-legend {
64
+ opacity: 0.9;
65
+ -webkit-transition:opacity 0.2s ease;
66
+ -moz-transition:opacity 0.2s ease;
67
+ -o-transition:opacity 0.2s ease;
68
+}
69
+
70
+.dygraph-legend:hover {
71
+ /* Red(0-255), Blue(0-255), Green(0-255), Alpha (0-1) */
72
+ background-color:rgba(100,100,100,0);
73
+ opacity:0;
74
+}
75
+
76
+.dygraph-title {
77
+ text-indent: 56px;
78
+ text-align: left;
79
+ position: absolute;
80
+ left: 0px;
81
+ top: 4px;
82
+ font-size: 11px;
83
+ font-weight: bold;
84
+}
web/dashboard.html
+58
-7
@@ -10,10 +10,6 @@
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
- <style type="text/css">
15
- html{font-family:sans-serif;}
16
- </style>
13
</head>
14
<body>
15
@@ -170,7 +166,7 @@ The fastest charting engine that can chart complete charts (not just sparklines)
166
The charts are zoomable (drag their contents to pan, shift with mouse wheel to zoom-in or zoom-out, double click to reset it).
167
<b>Netdata magic!</b> Realtime charts on your web page!
168
<br/>
173
-<div style="width: 32%; display: inline-block;">
169
+<div style="width: 24%; display: inline-block;">
170
<div data-netdata="system.processes"
171
data-chart-library="dygraph"
172
data-width="100%"
@@ -181,7 +177,7 @@ The charts are zoomable (drag their contents to pan, shift with mouse wheel to z
177
<br/>
178
<small>rendered in <span id="time201">X</span> ms</small>
179
</div>
184
-<div style="width: 32%; display: inline-block;">
180
+<div style="width: 24%; display: inline-block;">
181
<div data-netdata="system.ipv4"
182
data-chart-library="dygraph"
183
data-width="100%"
@@ -192,7 +188,7 @@ The charts are zoomable (drag their contents to pan, shift with mouse wheel to z
188
<br/>
189
<small>rendered in <span id="time202">X</span> ms</small>
190
</div>
195
-<div style="width: 32%; display: inline-block;">
191
+<div style="width: 24%; display: inline-block;">
192
<div data-netdata="system.cpu"
193
data-chart-library="dygraph"
194
data-width="100%"
@@ -203,6 +199,61 @@ The charts are zoomable (drag their contents to pan, shift with mouse wheel to z
199
<br/>
200
<small>rendered in <span id="time203">X</span> ms</small>
201
</div>
202
+<div style="width: 24%; display: inline-block;">
203
+ <div data-netdata="system.io"
204
+ data-chart-library="dygraph"
205
+ data-width="100%"
206
+ data-height="200"
207
+ data-after="-300"
208
+ data-dt-element-name="time204"
209
+ ></div>
210
+ <br/>
211
+ <small>rendered in <span id="time204">X</span> ms</small>
212
+</div>
213
+<div style="width: 24%; display: inline-block;">
214
+ <div data-netdata="system.interrupts"
215
+ data-chart-library="dygraph"
216
+ data-width="100%"
217
+ data-height="200"
218
+ data-after="-300"
219
+ data-dt-element-name="time205"
220
+ ></div>
221
+ <br/>
222
+ <small>rendered in <span id="time205">X</span> ms</small>
223
+</div>
224
+<div style="width: 24%; display: inline-block;">
225
+ <div data-netdata="apps.mem"
226
+ data-chart-library="dygraph"
227
+ data-width="100%"
228
+ data-height="200"
229
+ data-after="-300"
230
+ data-dt-element-name="time206"
231
+ ></div>
232
+ <br/>
233
+ <small>rendered in <span id="time206">X</span> ms</small>
234
+</div>
235
+<div style="width: 24%; display: inline-block;">
236
+ <div data-netdata="tc.world_in"
237
+ data-chart-library="dygraph"
238
+ data-width="100%"
239
+ data-height="200"
240
+ data-after="-300"
241
+ data-dt-element-name="time207"
242
+ ></div>
243
+ <br/>
244
+ <small>rendered in <span id="time207">X</span> ms</small>
245
+</div>
246
+<div style="width: 24%; display: inline-block;">
247
+ <div data-netdata="tc.world_out"
248
+ data-chart-library="dygraph"
249
+ data-width="100%"
250
+ data-height="200"
251
+ data-after="-300"
252
+ data-dt-element-name="time208"
253
+ ></div>
254
+ <br/>
255
+ <small>rendered in <span id="time208">X</span> ms</small>
256
+</div>
257
258
259
web/dashboard.js
+54
-43
@@ -5,6 +5,7 @@
5
// var netdataStopPeity = 1; // do not use peity
6
// var netdataStopGoogleCharts = 1; // do not use google
7
// var netdataStopMorris = 1; // do not use morris
8
+// var netdataDontInit = 1; // do not start the thread to process the charts
9
//
10
// You can also set the default netdata server, using the following.
11
// When this variable is not set, we assume the page is hosted on your
@@ -59,17 +60,18 @@
60
else
61
NETDATA.serverDefault = NETDATA._scriptSource();
62
62
- NETDATA.jQuery = NETDATA.serverDefault + 'lib/jquery-1.11.3.min.js';
63
- NETDATA.peity_js = NETDATA.serverDefault + 'lib/jquery.peity.min.js';
64
- NETDATA.sparkline_js = NETDATA.serverDefault + 'lib/jquery.sparkline.min.js';
65
- NETDATA.dygraph_js = NETDATA.serverDefault + 'lib/dygraph-combined.js';
66
- NETDATA.raphael_js = NETDATA.serverDefault + 'lib/raphael-min.js';
67
- NETDATA.morris_js = NETDATA.serverDefault + 'lib/morris.min.js';
68
- NETDATA.morris_css = NETDATA.serverDefault + 'css/morris.css';
69
- NETDATA.google_js = 'https://www.google.com/jsapi';
70
- NETDATA.colors = [ '#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6',
71
- '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11',
72
- '#6633CC', '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC' ];
63
+ NETDATA.jQuery = NETDATA.serverDefault + 'lib/jquery-1.11.3.min.js';
64
+ NETDATA.peity_js = NETDATA.serverDefault + 'lib/jquery.peity.min.js';
65
+ NETDATA.sparkline_js = NETDATA.serverDefault + 'lib/jquery.sparkline.min.js';
66
+ NETDATA.dygraph_js = NETDATA.serverDefault + 'lib/dygraph-combined.js';
67
+ NETDATA.raphael_js = NETDATA.serverDefault + 'lib/raphael-min.js';
68
+ NETDATA.morris_js = NETDATA.serverDefault + 'lib/morris.min.js';
69
+ NETDATA.morris_css = NETDATA.serverDefault + 'css/morris.css';
70
+ NETDATA.dashboard_css = NETDATA.serverDefault + 'dashboard.css';
71
+ NETDATA.google_js = 'https://www.google.com/jsapi';
72
+ NETDATA.colors = [ '#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6',
73
+ '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11',
74
+ '#6633CC', '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC' ];
75
76
// ----------------------------------------------------------------------------------------------------------------
77
// the defaults for all charts
@@ -78,6 +80,7 @@
80
host: NETDATA.serverDefault, // the server to get data from
81
width: '100%', // the chart width
82
height: '100%', // the chart height
83
+ min_width: 240, //
84
library: 'dygraph', // the graphing library to use
85
method: 'max', // the grouping method
86
before: 0, // panning
@@ -334,7 +337,7 @@
337
refresh_dt_element_name: self.data('dt-element-name') || null, // string - the element to print refresh_dt_ms
338
refresh_dt_element: null,
339
337
- log(msg) {
340
+ log: function(msg) {
341
console.log(this.id + ' (' + this.library_name + ' ' + this.uuid + '): ' + msg);
342
},
343
@@ -517,7 +520,7 @@
520
521
updateChart: function(callback) {
522
if(!this.library || !this.library.enabled) {
520
- this.error('chart library "' + this.library_name + '" is not enabled');
523
+ this.error('charting library "' + this.library_name + '" is not available');
524
if(typeof callback != 'undefined') callback();
525
return;
526
}
@@ -787,20 +790,21 @@
790
// resize the chart to its real dimensions
791
// as given by the caller
792
sizeChart: function() {
793
+ element.className += "netdata-container";
794
+
795
if(this.debug) this.log('sizing element');
796
self.css('width', this.width)
792
- .css('height', this.height)
793
- .css('display', 'inline-block')
794
- .css('overflow', 'hidden');
797
+ .css('height', this.height);
798
+ //.css('display', 'inline-block')
799
+ //.css('overflow', 'hidden');
800
+
801
+ if(NETDATA.chartDefaults.min_width)
802
+ self.css('min-width', NETDATA.chartDefaults.min_width);
803
},
804
805
// show a message in the chart
798
- message: function(msg) {
799
- var bgcolor = ""
800
- if(NETDATA.options.debug.show_boxes)
801
- bgcolor = " background-color: lightgrey;";
802
-
803
- this.element.innerHTML = '<div style="font-size: x-small; overflow: hidden;' + bgcolor + ' width: 100%; height: 100%;"><small>'
806
+ message: function(type, msg) {
807
+ this.element.innerHTML = '<div class="netdata-message netdata-' + type + '-message" style="font-size: x-small; overflow: hidden; width: 100%; height: 100%;"><small>'
808
+ msg
809
+ '</small></div>';
810
@@ -812,19 +816,19 @@
816
817
// show an error on the chart and stop it forever
818
error: function(msg) {
815
- this.message(msg);
819
+ this.message('error', this.id + ': ' + msg);
820
this.enabled = false;
821
},
822
823
// show a message indicating the chart is loading
820
- loading: function() {
821
- this.message('chart ' + this.id + ' is loading...');
824
+ info: function(msg) {
825
+ this.message('info', this.id + ': ' + msg);
826
}
827
};
828
829
if(state.debug) state.log('created');
830
state.sizeChart();
827
- state.loading();
831
+ state.info("loading...");
832
833
if(typeof NETDATA.chartLibraries[state.library_name] == 'undefined') {
834
NETDATA.error(402, state.library_name);
@@ -882,6 +886,16 @@
886
callback();
887
}
888
889
+ NETDATA._loadCSS = function(filename) {
890
+ var fileref = document.createElement("link");
891
+ fileref.setAttribute("rel", "stylesheet");
892
+ fileref.setAttribute("type", "text/css");
893
+ fileref.setAttribute("href", filename);
894
+
895
+ if (typeof fileref != "undefined")
896
+ document.getElementsByTagName("head")[0].appendChild(fileref);
897
+ }
898
+
899
NETDATA.ColorLuminance = function(hex, lum) {
900
// validate hex string
901
hex = String(hex).replace(/[^0-9a-f]/gi, '');
@@ -1055,7 +1069,7 @@
1069
}
1070
1071
NETDATA.peityChartCreate = function(element, data) {
1058
- element.innerHTML = '<div id="peity-' + data.state.uuid + '">' + data.result + '</div>';
1072
+ element.innerHTML = '<div class="netdata-chart-container netdata-peity-container" id="peity-' + data.state.uuid + '">' + data.result + '</div>';
1073
data.state.peity_element = document.getElementById('peity-' + data.state.uuid);
1074
var peity = $(data.state.peity_element);
1075
@@ -1194,7 +1208,7 @@
1208
height: data.state.calculated_height
1209
};
1210
1197
- element.innerHTML = '<div id="sparkline-' + data.state.uuid + '" style="display: inline-block; position: relative;"></div>';
1211
+ element.innerHTML = '<div class="netdata-chart-container netdata-sparkline-container" id="sparkline-' + data.state.uuid + '" style="display: inline-block; position: relative;"></div>';
1212
data.state.sparkline_element = document.getElementById('sparkline-' + data.state.uuid);
1213
1214
spark = $(data.state.sparkline_element);
@@ -1379,7 +1393,7 @@
1393
1394
var self = $(element);
1395
var title = self.data('dygraph-title') || data.state.chart.title;
1382
- var titleHeight = self.data('dygraph-titleheight') || 20;
1396
+ var titleHeight = self.data('dygraph-titleheight') || 19;
1397
var labelsDiv = self.data('dygraph-labelsdiv') || undefined;
1398
var connectSeparatedPoints = self.data('dygraph-connectseparatedpoints') || false;
1399
var yLabelWidth = self.data('dygraph-ylabelwidth') || 12;
@@ -1393,7 +1407,7 @@
1407
var labelsSeparateLines = self.data('dygraph-labelsseparatelines') || false;
1408
var labelsShowZeroValues = self.data('dygraph-labelsshowzerovalues') || true;
1409
var legend = self.data('dygraph-legend') || 'onmouseover';
1396
- var showLabelsOnHighlight = self.data('dygraph-showlabelsonhighlight') || true;
1410
+ var showLabelsOnHighlight = self.data('dygraph-showlabelsonhighlight') || true; // true FIXME
1411
var gridLineColor = self.data('dygraph-gridlinecolor') || '#EEE';
1412
var axisLineColor = self.data('dygraph-axislinecolor') || '#EEE';
1413
var maxNumberWidth = self.data('dygraph-maxnumberwidth') || 8;
@@ -1411,8 +1425,8 @@
1425
var strokeBorderWidth = self.data('dygraph-strokeborderwidth') || (data.state.chart.chart_type == 'stacked')?1.0:0.0;
1426
var strokePattern = self.data('dygraph-strokepattern') || undefined;
1427
var highlightCircleSize = self.data('dygraph-highlightcirclesize') || 3;
1414
- var highlightSeriesOpts = self.data('dygraph-highlightseriesopts') || { strokeWidth: 1.5 };
1415
- var highlightSeriesBackgroundAlpha = self.data('dygraph-highlightseriesbackgroundalpha') || (data.state.chart.chart_type == 'stacked')?0.7:0.5;
1428
+ var highlightSeriesOpts = self.data('dygraph-highlightseriesopts') || null; // FIXME { strokeWidth: 1.5 };
1429
+ var highlightSeriesBackgroundAlpha = self.data('dygraph-highlightseriesbackgroundalpha') || null; // FIXME (data.state.chart.chart_type == 'stacked')?0.7:0.5;
1430
var pointClickCallback = self.data('dygraph-pointclickcallback') || undefined;
1431
var showRangeSelector = self.data('dygraph-showrangeselector') || false;
1432
var showRoller = self.data('dygraph-showroller') || false;
@@ -1639,7 +1653,7 @@
1653
}
1654
};
1655
1642
- self.html('<div id="dygraph-' + data.state.uuid + '" style="width: 100%; height: 100%;"></div>');
1656
+ self.html('<div class="netdata-chart-container netdata-dygraph-container" id="dygraph-' + data.state.uuid + '" style="width: 100%; height: 100%;"></div>');
1657
1658
data.state.dygraph_instance = new Dygraph(document.getElementById('dygraph-' + data.state.uuid),
1659
data.result.data, data.state.dygraph_options);
@@ -1665,13 +1679,7 @@
1679
}
1680
}
1681
else {
1668
- var fileref = document.createElement("link");
1669
- fileref.setAttribute("rel", "stylesheet");
1670
- fileref.setAttribute("type", "text/css");
1671
- fileref.setAttribute("href", NETDATA.morris_css);
1672
-
1673
- if (typeof fileref != "undefined")
1674
- document.getElementsByTagName("head")[0].appendChild(fileref);
1682
+ NETDATA._loadCSS(NETDATA.morris_css);
1683
1684
$.getScript(NETDATA.morris_js)
1685
.done(function() {
@@ -1699,7 +1707,7 @@
1707
1708
NETDATA.morrisChartCreate = function(element, data) {
1709
1702
- element.innerHTML = '<div id="morris-' + data.state.uuid + '" style="width: ' + data.state.calculated_width + 'px; height: ' + data.state.calculated_height + 'px;"></div>';
1710
+ element.innerHTML = '<div class="netdata-chart-container netdata-morris-container" id="morris-' + data.state.uuid + '" style="width: ' + data.state.calculated_width + 'px; height: ' + data.state.calculated_height + 'px;"></div>';
1711
1712
var options = {
1713
element: 'morris-' + data.state.uuid,
@@ -1868,7 +1876,7 @@
1876
isStacked: false
1877
};
1878
1871
- element.innerHTML = '<div id="google-' + data.state.uuid + '" style="width: 100%; height: 100%;"></div>';
1879
+ element.innerHTML = '<div class="netdata-chart-container netdata-google-container" id="google-' + data.state.uuid + '" style="width: 100%; height: 100%;"></div>';
1880
1881
var gchart;
1882
switch(data.state.chart.chart_type) {
@@ -2006,7 +2014,10 @@
2014
2015
NETDATA._loadjQuery(function() {
2016
$.getScript(NETDATA.serverDefault + 'lib/visible.js').then(function() {
2009
- NETDATA.init();
2017
+ NETDATA._loadCSS(NETDATA.dashboard_css);
2018
+
2019
+ if(typeof netdataDontInit == 'undefined')
2020
+ NETDATA.init();
2021
})
2022
});
2023