zoomed mode improvements - it still needs some work
Costa Tsaousis (ktsaou) committed
Apr 23, 2014 at 02:40 UTC
1bd487917149e800ef7048f8c2779cb2c599d503
2 files changed
+103
-40
web/index.html
+102
-40
@@ -36,7 +36,8 @@
36
var MAINCHART_MAX_TIME_TO_SHOW = 600;
37
var THUMBS_MAX_TIME_TO_SHOW = 600;
38
var MAINCHART_CONTROL_HEIGHT = 100;
39
- var MAINCHART_CONTROL_DIVISOR = 3;
39
+ var MAINCHART_CONTROL_DIVISOR = 1;
40
+ var MAINCHART_POINTS_DIVISOR = 5;
41
42
var MODE_THUMBS = 1;
43
var MODE_MAIN = 2;
@@ -111,6 +112,50 @@
112
// ------------------------------------------------------------------------
113
// MAINGRAPH = fullscreen view of 1 graph
114
115
+ function calculateChartGroup(c, divisor, maxtime, group) {
116
+ var before = c.before?c.before:new Date().getTime() / 1000;
117
+ var after = c.after?c.after:c.first_entry_t;
118
+
119
+ var dt = before - after;
120
+ if(dt > c.entries * c.update_every) dt = c.entries * c.update_every;
121
+
122
+ if(maxtime && dt > maxtime) dt = maxtime;
123
+
124
+ var data_points = dt / c.update_every;
125
+ var screen_points = Math.round(c.chartOptions.width / divisor);
126
+
127
+ if(!group) {
128
+ if(screen_points > data_points) {
129
+ c.group = 1;
130
+ c.points_to_show = data_points;
131
+ }
132
+ else {
133
+ c.group = Math.round(data_points / screen_points);
134
+
135
+ if(c.group > 60) c.group = 60;
136
+ else if(c.group > 45) c.group = 45;
137
+ else if(c.group > 30) c.group = 30;
138
+ else if(c.group > 20) c.group = 20;
139
+ else if(c.group > 15) c.group = 15;
140
+ else if(c.group > 10) c.group = 10;
141
+ else if(c.group > 5) c.group = 5;
142
+ else if(c.group > 2) c.group = 2;
143
+ else c.group = 1;
144
+
145
+ c.points_to_show = Math.round(data_points / c.group);
146
+ }
147
+ }
148
+ else {
149
+ c.group = group;
150
+ c.points_to_show = Math.round(data_points / group);
151
+ }
152
+
153
+ if(mainchart.chartType == 'LineChart') {
154
+ if(mainchart.group <= 2) mainchart.chartOptions.lineWidth = 1;
155
+ else mainchart.chartOptions.lineWidth = 2;
156
+ }
157
+ }
158
+
159
// copy the chart c to mainchart
160
// switch to main graphs screen
161
function initMainChart(c) {
@@ -123,17 +168,11 @@
168
mainchart.chartOptions.width = screenWidth();
169
mainchart.chartOptions.height = $(window).height() - 150 - MAINCHART_CONTROL_HEIGHT;
170
if(mainchart.chartOptions.height < 300) mainchart.chartOptions.height = 300;
126
-
127
- mainchart.group = 2;
171
+
172
mainchart.div = 'maingraph';
173
mainchart.last_updated = 0;
174
131
- mainchart.points_to_show = Math.round(mainchart.entries / mainchart.group) - 1;
132
- if(mainchart.points_to_show * mainchart.group > MAINCHART_MAX_TIME_TO_SHOW)
133
- mainchart.points_to_show = MAINCHART_MAX_TIME_TO_SHOW / mainchart.group;
134
-
135
- if(mainchart.chartOptions.isStacked) mainchart.group = 5;
136
- //mainchart.chartOptions.titlePosition = 'none';
175
+ calculateChartGroup(mainchart, MAINCHART_POINTS_DIVISOR, MAINCHART_MAX_TIME_TO_SHOW, 0);
176
mainchart.chartOptions.explorer = null;
177
178
// initialize the div
@@ -144,6 +183,15 @@
183
setMainChartMax('normal');
184
185
$('#group' + mainchart.group).trigger('click');
186
+ setMainChartGroup(mainchart.group, 'no-refresh');
187
+
188
+ var controlopts = $.extend(true, {}, mainchart.chartOptions, {
189
+ lineWidth: 1,
190
+ height: MAINCHART_CONTROL_HEIGHT,
191
+ chartArea: {'width': '90%'},
192
+ hAxis: {'baselineColor': 'none'},
193
+ vAxis: {'title': null},
194
+ });
195
196
mainchart.dashboard = new google.visualization.Dashboard(document.getElementById('maingraph_dashboard'));
197
mainchart.control = new google.visualization.ControlWrapper({
@@ -153,14 +201,8 @@
201
filterColumnIndex: 0,
202
ui: {
203
chartType: mainchart.chartType,
156
- chartOptions: {
157
- isStacked: mainchart.chartOptions.isStacked,
158
- width: mainchart.chartOptions.width,
159
- height: MAINCHART_CONTROL_HEIGHT,
160
- chartArea: {'width': '90%'},
161
- hAxis: {'baselineColor': 'none'}
162
- },
163
- minRangeSize: MAINCHART_MAX_TIME_TO_SHOW / mainchart.update_every * 1000,
204
+ chartOptions: controlopts,
205
+ minRangeSize: MAINCHART_MAX_TIME_TO_SHOW * mainchart.update_every / MAINCHART_POINTS_DIVISOR * 1000,
206
}
207
},
208
});
@@ -178,12 +220,10 @@
220
});
221
222
// load the data for the control and the hidden chart
181
- tempchart.points_to_show = Math.round(mainchart.chartOptions.width / MAINCHART_CONTROL_DIVISOR);
182
- tempchart.after = tempchart.first_entry_t;
183
- tempchart.before = Math.round(new Date().getTime() / 1000);
184
- if(tempchart.entries * tempchart.update_every > tempchart.before - tempchart.after)
185
- tempchart.after = tempchart.before - tempchart.entries * tempchart.update_every;
186
- tempchart.group = Math.round((tempchart.before - tempchart.after) / tempchart.points_to_show);
223
+ calculateChartGroup(tempchart, MAINCHART_CONTROL_DIVISOR, 0, 0);
224
+ // alert("diff = " + (tempchart.before - tempchart.after) + ", group = " + tempchart.group);
225
+
226
+ switchToMainGraph();
227
228
$.ajax({
229
url: generateChartURL(tempchart),
@@ -198,8 +238,6 @@
238
google.visualization.events.addListener(mainchart.control, 'ready', mainchartControlReadyEvent);
239
mainchart.dashboard.bind(mainchart.control, mainchart.hiddenchart);
240
mainchart.dashboard.draw(mainchart.control_data);
201
-
202
- switchToMainGraph();
241
});
242
}
243
@@ -214,11 +252,13 @@
252
mainchart.after = Math.round(state.range.start.getTime() / 1000);
253
mainchart.before = Math.round(state.range.end.getTime() / 1000);
254
217
- mainchart.points_to_show = mainchart.chartOptions.width / 2;
218
- mainchart.group = Math.round((mainchart.before - mainchart.after) / mainchart.points_to_show);
219
- console.log('group = ' + mainchart.group + ', points_to_show = ' + mainchart.position);
255
+ calculateChartGroup(mainchart, MAINCHART_POINTS_DIVISOR, 0, 0);
256
+ console.log('group = ' + mainchart.group + ', points_to_show = ' + mainchart.points_to_show + ', dt = ' + (mainchart.before - mainchart.after));
257
258
+ $('#group' + mainchart.group).trigger('click');
259
mainchart.last_updated = 0;
260
+
261
+ if(refresh_mode != REFRESH_ZOOMED) zoomGraphs();
262
}
263
264
function initMainChartIndex(i) {
@@ -256,12 +296,20 @@
296
mainchart.last_updated = 0;
297
}
298
259
- function setMainChartGroup(g) {
299
+ function setMainChartGroup(g, norefresh) {
300
if(!mainchart) return;
301
302
mainchart.group = g;
263
- mainchart.last_updated = 0;
264
- playGraphs();
303
+
304
+ if(!mainchart.before && !mainchart.after)
305
+ calculateChartGroup(mainchart, MAINCHART_POINTS_DIVISOR, MAINCHART_MAX_TIME_TO_SHOW, mainchart.group);
306
+ else
307
+ calculateChartGroup(mainchart, MAINCHART_POINTS_DIVISOR, 0, mainchart.group);
308
+
309
+ if(!norefresh) {
310
+ mainchart.last_updated = 0;
311
+ if(refresh_mode == REFRESH_PAUSED) playGraphs();
312
+ }
313
}
314
315
var last_main_chart_avg = null;
@@ -279,7 +327,7 @@
327
328
if(!norefresh) {
329
mainchart.last_updated = 0;
282
- playGraphs();
330
+ if(refresh_mode == REFRESH_PAUSED) playGraphs();
331
}
332
333
last_main_chart_avg = g;
@@ -289,7 +337,7 @@
337
if(!mainchart) return;
338
339
if(p == 'toggle') {
292
- if(stop_refreshing) p = 'play';
340
+ if(refresh_mode != REFRESH_ALWAYS) p = 'play';
341
else p = 'pause';
342
}
343
@@ -297,6 +345,9 @@
345
//mainchart.chartOptions.explorer = null;
346
mainchart.after = 0;
347
mainchart.before = 0;
348
+ calculateChartGroup(mainchart, MAINCHART_POINTS_DIVISOR, MAINCHART_MAX_TIME_TO_SHOW, 0);
349
+ $('#group' + mainchart.group).trigger('click');
350
+ mainchart.last_updated = 0;
351
playGraphs();
352
}
353
else {
@@ -400,10 +451,14 @@
451
// ------------------------------------------------------------------------
452
// Core of the thread refreshing the charts
453
403
- var stop_refreshing = 1;
454
+ var REFRESH_PAUSED = 0;
455
+ var REFRESH_ALWAYS = 1;
456
+ var REFRESH_ZOOMED = 2;
457
+
458
+ var refresh_mode = REFRESH_PAUSED;
459
var last_refresh = 0;
460
function playGraphs() {
406
- if(!stop_refreshing) {
461
+ if(refresh_mode != REFRESH_PAUSED) {
462
// check if the thread died due to a javascript error
463
var now = new Date().getTime();
464
if((now - last_refresh) > 5000) {
@@ -414,15 +469,22 @@
469
return;
470
}
471
417
- stop_refreshing = 0;
472
+ refresh_mode = REFRESH_ALWAYS;
473
$('.mainchart_play_button').button('play');
474
chartsRefresh();
475
}
476
477
function pauseGraphs() {
423
- if(stop_refreshing) return;
478
+ if(refresh_mode == REFRESH_PAUSED) return;
479
+
480
+ refresh_mode = REFRESH_PAUSED;
481
+ $('.mainchart_play_button').button('pause');
482
+ }
483
+
484
+ function zoomGraphs() {
485
+ if(refresh_mode == REFRESH_ZOOMED) return;
486
425
- stop_refreshing = 1;
487
+ refresh_mode = REFRESH_ZOOMED;
488
$('.mainchart_play_button').button('pause');
489
}
490
@@ -437,10 +499,10 @@
499
if(resize_request) {
500
resizeCharts();
501
resize_request = false;
440
- stop_refreshing = 0;
502
+ refresh_mode = REFRESH_ALWAYS;
503
}
504
443
- if(stop_refreshing) {
505
+ if(refresh_mode == REFRESH_PAUSED) {
506
//mylog("stop refresh");
507
return;
508
}
web/netdata.js
+1
@@ -61,6 +61,7 @@ function refreshChart(chart, doNext) {
61
if(chart.chart && chart.refreshCount > 50) {
62
chart.chart.clearChart();
63
chart.chart = null;
64
+ chart.refreshCount = 0;
65
}
66
67
// Instantiate and draw our chart, passing in some options.