smoother panning and zooming on all browsers
Costa Tsaousis (ktsaou) committed
Oct 30, 2017 at 09:35 UTC
b1511379c17c0c6ed2f0303f29271beed42f57ca
1 file changed
+31
-12
web/dashboard.js
+31
-12
@@ -1950,7 +1950,7 @@ var NETDATA = window.NETDATA || {};
1950
delay: function(ms) {
1951
// console.log('delay()');
1952
1953
- if(this.state !== null && NETDATA.options.current.sync_selection === true) {
1953
+ if(NETDATA.options.current.sync_selection === true) {
1954
if(typeof ms === 'number')
1955
this.dont_sync_before = Date.now() + ms;
1956
else
@@ -1959,12 +1959,14 @@ var NETDATA = window.NETDATA || {};
1959
},
1960
1961
__syncSlaves: function() {
1962
- var t = NETDATA.globalSelectionSync.last_t;
1963
- var len = NETDATA.globalSelectionSync.slaves.length;
1964
- while(len--)
1965
- NETDATA.globalSelectionSync.slaves[len].setSelection(t);
1962
+ if(NETDATA.globalSelectionSync.enabled() === true) {
1963
+ var t = NETDATA.globalSelectionSync.last_t;
1964
+ var len = NETDATA.globalSelectionSync.slaves.length;
1965
+ while (len--)
1966
+ NETDATA.globalSelectionSync.slaves[len].setSelection(t);
1967
1967
- this.timeout_id = null;
1968
+ this.timeout_id = null;
1969
+ }
1970
},
1971
1972
// sync all the visible charts to the given time
@@ -2836,7 +2838,7 @@ var NETDATA = window.NETDATA || {};
2838
}
2839
};
2840
2839
- this.updateChartPanOrZoom = function(after, before) {
2841
+ this.updateChartPanOrZoom = function(after, before, callback) {
2842
var logme = 'updateChartPanOrZoom(' + after + ', ' + before + '): ';
2843
var ret = true;
2844
@@ -2909,9 +2911,24 @@ var NETDATA = window.NETDATA || {};
2911
this.current.force_after_ms = after;
2912
this.current.force_before_ms = before;
2913
NETDATA.globalPanAndZoom.setMaster(this, after, before);
2914
+
2915
+ if(ret === true && typeof callback === 'function')
2916
+ callback();
2917
+
2918
return ret;
2919
};
2920
2921
+ this.updateChartPanOrZoomAsyncTimeOutId = null;
2922
+ this.updateChartPanOrZoomAsync = function(after, before, callback) {
2923
+ if(this.updateChartPanOrZoomAsyncTimeOutId !== null)
2924
+ clearTimeout(this.updateChartPanOrZoomAsyncTimeOutId);
2925
+
2926
+ setTimeout(function() {
2927
+ that.updateChartPanOrZoom(after, before, callback);
2928
+ that.updateChartPanOrZoomAsyncTimeOutId = null;
2929
+ }, 0);
2930
+ };
2931
+
2932
var __unitsConversionLastUnits = undefined;
2933
var __unitsConversionLastUnitsDesired = undefined;
2934
var __unitsConversionLastMin = undefined;
@@ -5003,8 +5020,9 @@ var NETDATA = window.NETDATA || {};
5020
NETDATA.globalSelectionSync.delay();
5021
state.tmp.dygraph_user_action = true;
5022
state.tmp.dygraph_force_zoom = true;
5006
- state.updateChartPanOrZoom(after, before);
5007
- NETDATA.globalPanAndZoom.setMaster(state, after, before);
5023
+ state.updateChartPanOrZoomAsync(after, before, function() {
5024
+ NETDATA.globalPanAndZoom.setMaster(state, after, before);
5025
+ });
5026
};
5027
5028
NETDATA.dygraphSetSelection = function(state, t) {
@@ -5315,7 +5333,7 @@ var NETDATA = window.NETDATA || {};
5333
state.log('dygraphDrawCallback(dygraph, ' + is_initial + '): ' + (after / 1000).toString() + ' - ' + (before / 1000).toString());
5334
5335
if(before <= state.netdata_last && after >= state.netdata_first)
5318
- state.updateChartPanOrZoom(after, before);
5336
+ state.updateChartPanOrZoomAsync(after, before);
5337
}
5338
},
5339
zoomCallback: function(minDate, maxDate, yRanges) {
@@ -5331,7 +5349,7 @@ var NETDATA = window.NETDATA || {};
5349
// refresh it to the greatest possible zoom level
5350
state.tmp.dygraph_user_action = true;
5351
state.tmp.dygraph_force_zoom = true;
5334
- state.updateChartPanOrZoom(minDate, maxDate);
5352
+ state.updateChartPanOrZoomAsync(minDate, maxDate);
5353
},
5354
highlightCallback: function(event, x, points, row, seriesName) {
5355
void(seriesName);
@@ -5562,8 +5580,9 @@ var NETDATA = window.NETDATA || {};
5580
}
5581
5582
state.setMode('zoom');
5565
- if(state.updateChartPanOrZoom(after, before) === true)
5583
+ state.updateChartPanOrZoomAsync(after, before, function() {
5584
dygraph.updateOptions({ dateWindow: [ after, before ] });
5585
+ });
5586
5587
event.preventDefault();
5588
}