optimized for loading speed
Costa Tsaousis (ktsaou) committed
Apr 25, 2014 at 01:10 UTC
4f58641752e2a905f4a5040563e4fcea72d9b7c9
1 file changed
+105
-93
web/netdata.js
+105
-93
@@ -87,104 +87,88 @@ function refreshChart(chart, doNext) {
87
return true;
88
}
89
90
-/*
91
-function showChartWithRange(chart) {
92
- var oldgroup = chart.group;
93
- var oldpoints = chart.points_to_show;
94
- chart.group = 1;
95
- chart.points_to_show = 0; // all
90
97
- $.ajax({
98
- url: generateChartURL(chart),
99
- dataType:"json",
100
- cache: false
101
- })
102
- .done(function(jsondata) {
103
- chart.jsondata = jsondata;
104
-
105
- chart.control_div = chart.div + "_control";
106
- chart.chart_div = chart.div + "_chart";
107
-
108
- var div = document.getElementById(chart.div);
109
- div.innerHTML = "<div class=\"maingraph\" id=\"" + chart.chart_div + "\"></div><div class=\"maingraph\" id=\"" + chart.control_div + "\"></div>";
110
- //div.width = chart.chartOptions.width;
111
- //div.height = chart.chartOptions.height;
112
-
113
- console.log(chart.div);
114
- chart.dashboard = new google.visualization.Dashboard(div);
115
- console.log('dashboard ok');
116
- console.log(chart.dashboard);
117
-
118
- chart.data = new google.visualization.DataTable(chart.jsondata);
119
- var range = chart.data.getColumnRange(0);
120
-
121
- chart.control = new google.visualization.ControlWrapper({
122
- 'controlType': 'ChartRangeFilter',
123
- 'containerId': chart.control_div,
124
- 'options': {
125
- // Filter by the date axis.
126
- 'filterColumnIndex': 0,
127
- 'ui': {
128
- 'chartType': 'AreaChart',
129
- 'chartOptions': {
130
- 'height': chart.chartOptions.height * 0.15,
131
- 'width': chart.chartOptions.width,
132
- 'chartArea': {'width': "90%"},
133
- 'hAxis': {'baselineColor': 'none'}
134
- },
135
-
136
- //'chartView': {
137
- // 'columns': [0, 1]
138
- //},
139
-
140
- // 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
141
- //'minRangeSize': 86400000
142
- }
143
- },
144
-
145
- // Initial range: 2012-02-09 to 2012-03-20.
146
- 'state': {'range': {'start': range.min, 'end': range.max}}
147
- });
148
- console.log('control ok');
149
- console.log(chart.control);
150
-
151
- var columns = new Array();
152
- var i;
153
- for (i = 0; i < chart.data.getNumberOfColumns(); i++)
154
- columns[i] = i;
155
-
156
- columns[0] = {
157
- 'calc': function(dataTable, rowIndex) {
158
- return dataTable.getFormattedValue(rowIndex, 0);
159
- },
160
- 'type': 'string'
161
- };
162
-
163
-
164
- chart.chartOptions.height = chart.chartOptions.height * 0.85;
165
- chart.chartOptions.chartArea = {'height': "80%", 'width': "90%"};
166
- chart.chartOptions.legend = 'none';
167
-
168
- chart.chartwrap = new google.visualization.ChartWrapper({
169
- 'chartType': chart.chartType,
170
- 'containerId': chart.chart_div,
171
- 'options': chart.chartOptions,
172
- });
173
- console.log('chart ok');
174
- console.log(chart.chartwrap);
91
+// calculateChartPointsToShow
92
+// calculate the chart group and point to show properties.
93
+// This uses the chartOptions.width and the supplied divisor
94
+// to calculate the propers values so that the chart will
95
+// be visually correct (not too much or too less points shown).
96
+//
97
+// c = the chart
98
+// divisor = when calculating screen points, divide width with this
99
+// if all screen points are used the chart will be overcrowded
100
+// the default is 2
101
+// maxtime = the maxtime to show
102
+// the default is to render all the server data
103
+// group = the required grouping on points
104
+// if undefined or negative, any calculated value will be used
105
+// if zero, one of 1,2,5,10,15,20,30,45,60 will be used
106
+
107
+function calculateChartPointsToShow(c, divisor, maxtime, group) {
108
+ if(!divisor) divisor = 2;
109
+
110
+ var before = c.before?c.before:new Date().getTime() / 1000;
111
+ var after = c.after?c.after:c.first_entry_t;
112
+
113
+ var dt = before - after;
114
+ if(dt > c.entries * c.update_every) dt = c.entries * c.update_every;
115
+
116
+ if(maxtime) dt = maxtime;
117
+
118
+ var data_points = Math.round(dt / c.update_every);
119
+ var screen_points = Math.round(c.chartOptions.width / divisor);
120
+ mylog('screen = ' + screen_points + ', data = ' + data_points + ', divisor = ' + divisor);
121
+
122
+ if(group == undefined || group <= 0) {
123
+ if(screen_points > data_points) {
124
+ c.group = 1;
125
+ c.points_to_show = data_points;
126
+ //mylog("rendering at full detail");
127
+ }
128
+ else {
129
+ c.group = Math.round(data_points / screen_points);
130
+
131
+ if(group != undefined && group >= 0) {
132
+ if(c.group > 60) c.group = 60;
133
+ else if(c.group > 45) c.group = 45;
134
+ else if(c.group > 30) c.group = 30;
135
+ else if(c.group > 20) c.group = 20;
136
+ else if(c.group > 15) c.group = 15;
137
+ else if(c.group > 10) c.group = 10;
138
+ else if(c.group > 5) c.group = 5;
139
+ else if(c.group > 2) c.group = 2;
140
+ else c.group = 1;
141
+ }
142
176
- chart.dashboard.bind(chart.control, chart.chartwrap);
177
- console.log('bind ok');
143
+ c.points_to_show = Math.round(data_points / c.group);
144
+ //mylog("rendering adaptive");
145
+ }
146
+ }
147
+ else {
148
+ c.group = group;
149
+ c.points_to_show = Math.round(data_points / group);
150
+ //mylog("rendering with given group");
151
+ }
152
+ mylog('group = ' + c.group + ', points = ' + c.points_to_show);
153
+
154
+ if(c.chartType == 'LineChart') {
155
+ if(c.points_to_show > c.chartOptions.width / 2) {
156
+ c.chartOptions.lineWidth = 1;
157
+ c.chartOptions.curveType = 'line';
158
+ }
159
179
- chart.dashboard.draw(chart.data);
180
- console.log('draw ok');
160
+ else if(c.points_to_show > c.chartOptions.width / 3) {
161
+ c.chartOptions.lineWidth = 1;
162
+ c.chartOptions.curveType = 'function';
163
+ }
164
182
- // restore what we changed
183
- chart.group = oldgroup;
184
- chart.points_to_show = oldpoints;
185
- });
165
+ else {
166
+ c.chartOptions.lineWidth = 2;
167
+ c.chartOptions.curveType = 'function';
168
+ }
169
+ }
170
}
187
-*/
171
+
172
173
// loadCharts()
174
// fetches all the charts from the server
@@ -379,3 +363,31 @@ function loadCharts(base_url, doNext) {
363
if(typeof doNext == "function") doNext();
364
});
365
};
366
+
367
+// jquery visible plugin
368
+(function($){
369
+
370
+ /**
371
+ * Copyright 2012, Digital Fusion
372
+ * Licensed under the MIT license.
373
+ * http://teamdf.com/jquery-plugins/license/
374
+ *
375
+ * @author Sam Sehnert
376
+ * @desc A small plugin that checks whether elements are within
377
+ * the user visible viewport of a web browser.
378
+ * only accounts for vertical position, not horizontal.
379
+ */
380
+ $.fn.visible = function(partial){
381
+
382
+ var $t = $(this),
383
+ $w = $(window),
384
+ viewTop = $w.scrollTop(),
385
+ viewBottom = viewTop + $w.height(),
386
+ _top = $t.offset().top,
387
+ _bottom = _top + $t.height(),
388
+ compareTop = partial === true ? _bottom : _top,
389
+ compareBottom = partial === true ? _top : _bottom;
390
+
391
+ return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
392
+ };
393
+})(jQuery);