fix zoom flip-flop while zooming with the wheel
Costa Tsaousis (ktsaou) committed
Nov 19, 2017 at 22:58 UTC
c836d7b8437c7325bb01c310099af1728ee75d7b
2 files changed
+39
-6
web/dashboard.js
+31
-6
@@ -2994,6 +2994,9 @@ var NETDATA = window.NETDATA || {};
2994
var logme = 'updateChartPanOrZoom(' + after + ', ' + before + '): ';
2995
var ret = true;
2996
2997
+ NETDATA.globalPanAndZoom.delay();
2998
+ NETDATA.globalSelectionSync.delay();
2999
+
3000
if(this.debug === true)
3001
this.log(logme);
3002
@@ -3086,8 +3089,8 @@ var NETDATA = window.NETDATA || {};
3089
clearTimeout(this.updateChartPanOrZoomAsyncTimeOutId);
3090
3091
setTimeout(function() {
3089
- that.updateChartPanOrZoom(after, before, callback);
3092
that.updateChartPanOrZoomAsyncTimeOutId = null;
3093
+ that.updateChartPanOrZoom(after, before, callback);
3094
}, 0);
3095
};
3096
@@ -5306,6 +5309,7 @@ var NETDATA = window.NETDATA || {};
5309
NETDATA.globalSelectionSync.delay();
5310
state.tmp.dygraph_user_action = true;
5311
state.tmp.dygraph_force_zoom = true;
5312
+ // state.log('toolboxPanAndZoom');
5313
state.updateChartPanOrZoom(after, before);
5314
NETDATA.globalPanAndZoom.setMaster(state, after, before);
5315
};
@@ -5643,6 +5647,16 @@ var NETDATA = window.NETDATA || {};
5647
return '';
5648
},
5649
drawCallback: function(dygraph, is_initial) {
5650
+
5651
+ // the user has panned the chart and this is called to re-draw the chart
5652
+ // 1. refresh this chart by adding data to it
5653
+ // 2. notify all the other charts about the update they need
5654
+
5655
+ // to prevent an infinite loop (feedback), we use
5656
+ // state.tmp.dygraph_user_action
5657
+ // - when true, this is initiated by a user
5658
+ // - when false, this is feedback
5659
+
5660
if(state.current.name !== 'auto' && state.tmp.dygraph_user_action === true) {
5661
state.tmp.dygraph_user_action = false;
5662
@@ -5651,17 +5665,24 @@ var NETDATA = window.NETDATA || {};
5665
var before = Math.round(x_range[1]);
5666
5667
if(NETDATA.options.debug.dygraph === true)
5654
- state.log('dygraphDrawCallback(dygraph, ' + is_initial + '): ' + (after / 1000).toString() + ' - ' + (before / 1000).toString());
5668
+ state.log('dygraphDrawCallback(dygraph, ' + is_initial + '): mode ' + state.current.name + ' ' + (after / 1000).toString() + ' - ' + (before / 1000).toString());
5669
+ //console.log(state);
5670
5671
if(before <= state.netdata_last && after >= state.netdata_first)
5657
- state.updateChartPanOrZoomAsync(after, before);
5672
+ // update only when we are within the data limits
5673
+ state.updateChartPanOrZoom(after, before);
5674
}
5675
},
5676
zoomCallback: function(minDate, maxDate, yRanges) {
5677
+
5678
+ // the user has selected a range on the chart
5679
+ // 1. refresh this chart by adding data to it
5680
+ // 2. notify all the other charts about the update they need
5681
+
5682
void(yRanges);
5683
5684
if(NETDATA.options.debug.dygraph === true)
5664
- state.log('dygraphZoomCallback()');
5685
+ state.log('dygraphZoomCallback(): ' + state.current.name);
5686
5687
NETDATA.globalSelectionSync.stop();
5688
NETDATA.globalSelectionSync.delay();
@@ -5670,7 +5691,7 @@ var NETDATA = window.NETDATA || {};
5691
// refresh it to the greatest possible zoom level
5692
state.tmp.dygraph_user_action = true;
5693
state.tmp.dygraph_force_zoom = true;
5673
- state.updateChartPanOrZoomAsync(minDate, maxDate);
5694
+ state.updateChartPanOrZoom(minDate, maxDate);
5695
},
5696
highlightCallback: function(event, x, points, row, seriesName) {
5697
void(seriesName);
@@ -5704,6 +5725,10 @@ var NETDATA = window.NETDATA || {};
5725
NETDATA.globalSelectionSync.stop();
5726
},
5727
underlayCallback: function(canvas, area, g) {
5728
+
5729
+ // the chart is about to be drawn
5730
+ // this function renders global highlighted time-frame
5731
+
5732
if(NETDATA.options.highlight_after !== null && NETDATA.options.highlight_before !== null) {
5733
var after = NETDATA.options.highlight_after;
5734
var before = NETDATA.options.highlight_before;
@@ -6009,7 +6034,7 @@ var NETDATA = window.NETDATA || {};
6034
}
6035
6036
state.setMode('zoom');
6012
- state.updateChartPanOrZoomAsync(after, before, function() {
6037
+ state.updateChartPanOrZoom(after, before, function() {
6038
dygraph.updateOptions({ dateWindow: [ after, before ] });
6039
});
6040
web/index.html
+8
@@ -362,6 +362,14 @@
362
display: inline-block;
363
}
364
365
+ /* https://github.com/seiyria/bootstrap-slider/issues/746 */
366
+ .tooltip {
367
+ -webkit-user-select: none;
368
+ -moz-user-select: none;
369
+ -ms-user-select: none;
370
+ user-select: none;
371
+ }
372
+
373
@media print {
374
body {
375
overflow: visible !important;