pan and zoom fixes
Costa Tsaousis (ktsaou) committed
Nov 27, 2017 at 20:47 UTC
2909f17bbe312ceab5ec03c41edaf60e36afc3fc
1 file changed
+76
-24
web/dashboard.js
+76
-24
@@ -732,16 +732,15 @@ var NETDATA = window.NETDATA || {};
732
NETDATA.onscroll_start_delay = function() {
733
NETDATA.options.last_page_scroll = Date.now();
734
735
- if(NETDATA.options.current.async_on_scroll === true)
736
- NETDATA.options.on_scroll_refresher_stop_until = NETDATA.options.last_page_scroll + 5000;
735
+ NETDATA.options.on_scroll_refresher_stop_until =
736
+ NETDATA.options.last_page_scroll
737
+ + ((NETDATA.options.current.async_on_scroll === true) ? 1000 : 0);
738
};
739
740
NETDATA.onscroll_end_delay = function() {
740
- if(NETDATA.options.current.async_on_scroll === true) {
741
- NETDATA.options.on_scroll_refresher_stop_until =
742
- Date.now()
743
- + ((NETDATA.options.current.async_on_scroll === true) ? NETDATA.options.current.onscroll_worker_duration_threshold : 0);
744
- }
741
+ NETDATA.options.on_scroll_refresher_stop_until =
742
+ Date.now()
743
+ + ((NETDATA.options.current.async_on_scroll === true) ? NETDATA.options.current.onscroll_worker_duration_threshold : 0);
744
};
745
746
NETDATA.onscroll_updater_timeout_id = undefined;
@@ -5148,6 +5147,16 @@ var NETDATA = window.NETDATA || {};
5147
return;
5148
}
5149
5150
+ if( now < NETDATA.options.auto_refresher_stop_until ) {
5151
+ NETDATA.chartRefresherTimeoutId = NETDATA.timeout.set(
5152
+ NETDATA.chartRefresher,
5153
+ NETDATA.chartRefresherWaitTime()
5154
+ );
5155
+
5156
+ //console.log('chartRefresher() end2 will run in ' + NETDATA.chartRefresherWaitTime().toString() + ' ms');
5157
+ return;
5158
+ }
5159
+
5160
if(NETDATA.options.pause === true) {
5161
// console.log('auto-refresher is paused');
5162
NETDATA.chartRefresherTimeoutId = NETDATA.timeout.set(
@@ -5155,7 +5164,7 @@ var NETDATA = window.NETDATA || {};
5164
NETDATA.chartRefresherWaitTime()
5165
);
5166
5158
- //console.log('chartRefresher() end2 will run in ' + NETDATA.chartRefresherWaitTime().toString() + ' ms');
5167
+ //console.log('chartRefresher() end3 will run in ' + NETDATA.chartRefresherWaitTime().toString() + ' ms');
5168
return;
5169
}
5170
@@ -5166,7 +5175,7 @@ var NETDATA = window.NETDATA || {};
5175
NETDATA.options.pauseCallback();
5176
NETDATA.chartRefresher();
5177
5169
- //console.log('chartRefresher() end3 (nested)');
5178
+ //console.log('chartRefresher() end4 (nested)');
5179
return;
5180
}
5181
@@ -5178,7 +5187,7 @@ var NETDATA = window.NETDATA || {};
5187
NETDATA.options.current.idle_between_loops
5188
);
5189
});
5181
- //console.log('chartRefresher() end4 (no parallel, nested)');
5190
+ //console.log('chartRefresher() end5 (no parallel, nested)');
5191
return;
5192
}
5193
@@ -5187,7 +5196,7 @@ var NETDATA = window.NETDATA || {};
5196
// get the dom parts again
5197
// console.log('auto-refresher is calling parseDom()');
5198
NETDATA.parseDom(NETDATA.chartRefresher);
5190
- //console.log('chartRefresher() end5 (parseDom)');
5199
+ //console.log('chartRefresher() end6 (parseDom)');
5200
return;
5201
}
5202
@@ -5578,15 +5587,17 @@ var NETDATA = window.NETDATA || {};
5587
NETDATA.dygraphSetSelection = function(state, t) {
5588
if(typeof state.tmp.dygraph_instance !== 'undefined') {
5589
var r = state.calculateRowForTime(t);
5581
- if(r !== -1)
5590
+ if(r !== -1) {
5591
state.tmp.dygraph_instance.setSelection(r);
5592
+ return true;
5593
+ }
5594
else {
5595
state.tmp.dygraph_instance.clearSelection();
5596
state.legendShowUndefined();
5597
}
5598
}
5599
5589
- return true;
5600
+ return false;
5601
};
5602
5603
NETDATA.dygraphClearSelection = function(state) {
@@ -6019,15 +6030,15 @@ var NETDATA = window.NETDATA || {};
6030
6031
state.tmp.dygraph_user_action = true;
6032
6022
- if(state.current && state.current.name !== 'auto')
6023
- NETDATA.globalSelectionSync.stop();
6024
-
6033
if(NETDATA.options.debug.dygraph === true)
6034
state.log('dygraphMouseDown()');
6035
6028
- // Right-click should not initiate a zoom.
6036
+ // Right-click should not initiate anything.
6037
if(event.button && event.button === 2) return;
6038
6039
+ NETDATA.globalSelectionSync.stop();
6040
+ NETDATA.globalSelectionSync.delay();
6041
+
6042
state.tmp.dygraph_mouse_down = true;
6043
context.initializeMouseDown(event, dygraph, context);
6044
@@ -6096,6 +6107,9 @@ var NETDATA = window.NETDATA || {};
6107
if(state.tmp.dygraph_highlight_after !== null) {
6108
//console.log('highlight selection...');
6109
6110
+ NETDATA.globalSelectionSync.stop();
6111
+ NETDATA.globalSelectionSync.delay();
6112
+
6113
state.tmp.dygraph_user_action = true;
6114
Dygraph.moveZoom(event, dygraph, context);
6115
event.preventDefault();
@@ -6103,6 +6117,9 @@ var NETDATA = window.NETDATA || {};
6117
else if(context.isPanning) {
6118
//console.log('panning...');
6119
6120
+ NETDATA.globalSelectionSync.stop();
6121
+ NETDATA.globalSelectionSync.delay();
6122
+
6123
state.tmp.dygraph_user_action = true;
6124
//NETDATA.globalSelectionSync.stop();
6125
//NETDATA.globalSelectionSync.delay();
@@ -6113,6 +6130,9 @@ var NETDATA = window.NETDATA || {};
6130
else if(context.isZooming) {
6131
//console.log('zooming...');
6132
6133
+ NETDATA.globalSelectionSync.stop();
6134
+ NETDATA.globalSelectionSync.delay();
6135
+
6136
state.tmp.dygraph_user_action = true;
6137
//NETDATA.globalSelectionSync.stop();
6138
//NETDATA.globalSelectionSync.delay();
@@ -6129,6 +6149,9 @@ var NETDATA = window.NETDATA || {};
6149
if(state.tmp.dygraph_highlight_after !== null) {
6150
//console.log('done highlight selection');
6151
6152
+ NETDATA.globalSelectionSync.stop();
6153
+ NETDATA.globalSelectionSync.delay();
6154
+
6155
if (!(event.offsetX && event.offsetY)){
6156
event.offsetX = event.layerX - event.target.offsetLeft;
6157
event.offsetY = event.layerY - event.target.offsetTop;
@@ -6146,20 +6169,33 @@ var NETDATA = window.NETDATA || {};
6169
context.isZooming = false;
6170
dygraph.clearZoomRect_();
6171
dygraph.drawGraph_(false);
6172
+
6173
+ // refresh all the charts immediately
6174
+ NETDATA.options.auto_refresher_stop_until = 0;
6175
}
6176
else if (context.isPanning) {
6177
//console.log('done panning');
6178
6179
+ NETDATA.globalSelectionSync.stop();
6180
+ NETDATA.globalSelectionSync.delay();
6181
+
6182
state.tmp.dygraph_user_action = true;
6154
- //NETDATA.globalSelectionSync.delay();
6183
Dygraph.endPan(event, dygraph, context);
6184
+
6185
+ // refresh all the charts immediately
6186
+ NETDATA.options.auto_refresher_stop_until = 0;
6187
}
6188
else if (context.isZooming) {
6189
//console.log('done zomming');
6190
6191
+ NETDATA.globalSelectionSync.stop();
6192
+ NETDATA.globalSelectionSync.delay();
6193
+
6194
state.tmp.dygraph_user_action = true;
6161
- //NETDATA.globalSelectionSync.delay();
6195
Dygraph.endZoom(event, dygraph, context);
6196
+
6197
+ // refresh all the charts immediately
6198
+ NETDATA.options.auto_refresher_stop_until = 0;
6199
}
6200
},
6201
click: function(event, dygraph, context) {
@@ -6248,9 +6284,7 @@ var NETDATA = window.NETDATA || {};
6284
if(event.altKey || event.shiftKey) {
6285
state.tmp.dygraph_user_action = true;
6286
6251
- if(state.current && state.current.name !== 'auto')
6252
- NETDATA.globalSelectionSync.stop();
6253
-
6287
+ NETDATA.globalSelectionSync.stop();
6288
NETDATA.globalSelectionSync.delay();
6289
6290
// http://dygraphs.com/gallery/interaction-api.js
@@ -6307,6 +6341,9 @@ var NETDATA = window.NETDATA || {};
6341
state.setMode('zoom');
6342
state.pauseChart();
6343
6344
+ NETDATA.globalSelectionSync.stop();
6345
+ NETDATA.globalSelectionSync.delay();
6346
+
6347
Dygraph.defaultInteractionModel.touchstart(event, dygraph, context);
6348
6349
// we overwrite the touch directions at the end, to overwrite
@@ -6325,6 +6362,9 @@ var NETDATA = window.NETDATA || {};
6362
if(NETDATA.options.debug.dygraph === true || state.debug === true)
6363
state.log('interactionModel.touchmove()');
6364
6365
+ NETDATA.globalSelectionSync.stop();
6366
+ NETDATA.globalSelectionSync.delay();
6367
+
6368
state.tmp.dygraph_user_action = true;
6369
Dygraph.defaultInteractionModel.touchmove(event, dygraph, context);
6370
@@ -6336,16 +6376,25 @@ var NETDATA = window.NETDATA || {};
6376
if(NETDATA.options.debug.dygraph === true || state.debug === true)
6377
state.log('interactionModel.touchend()');
6378
6379
+ NETDATA.globalSelectionSync.stop();
6380
+ NETDATA.globalSelectionSync.delay();
6381
+
6382
state.tmp.dygraph_user_action = true;
6383
Dygraph.defaultInteractionModel.touchend(event, dygraph, context);
6384
6385
// if it didn't move, it is a selection
6386
if(state.dygraph_last_touch_move === 0 && state.dygraph_last_touch_page_x !== 0) {
6387
+ NETDATA.globalSelectionSync.dont_sync_before = 0;
6388
+ NETDATA.globalSelectionSync.setMaster(state);
6389
+
6390
// internal api of dygraph
6391
var pct = (state.dygraph_last_touch_page_x - (dygraph.plotter_.area.x + state.element.getBoundingClientRect().left)) / dygraph.plotter_.area.w;
6346
- var t = Math.round(state.data_after + (state.data_before - state.data_after) * pct);
6347
- if(NETDATA.dygraphSetSelection(state, t) === true)
6392
+ console.log('pct: ' + pct.toString());
6393
+
6394
+ var t = Math.round(state.view_after + (state.view_before - state.view_after) * pct);
6395
+ if(NETDATA.dygraphSetSelection(state, t) === true) {
6396
NETDATA.globalSelectionSync.sync(state, t);
6397
+ }
6398
}
6399
6400
// if it was double tap within double click time, reset the charts
@@ -6360,6 +6409,9 @@ var NETDATA = window.NETDATA || {};
6409
6410
// remember the timestamp of the last touch end
6411
state.dygraph_last_touch_end = now;
6412
+
6413
+ // refresh all the charts immediately
6414
+ NETDATA.options.auto_refresher_stop_until = 0;
6415
}
6416
}
6417
};