@cryptotaxi247 / netdata-1 / commits / 2909f17bb

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 };