smoother dashboard scrolling; always show units on charts
Costa Tsaousis (ktsaou) committed
Nov 4, 2017 at 07:06 UTC
c474f10f0721103972a4898fd9d4526421afe521
1 file changed
+34
-28
web/dashboard.js
+34
-28
@@ -287,6 +287,9 @@ var NETDATA = window.NETDATA || {};
287
// rendering the chart that is panned or zoomed).
288
// Used with .current.global_pan_sync_time
289
290
+ on_scroll_refresher_stop_until: 0, // timestamp in ms - used to stop evaluating
291
+ // charts for some time, after a page scroll
292
+
293
last_page_resize: Date.now(), // the timestamp of the last resize request
294
295
last_page_scroll: 0, // the timestamp the last time the page was scrolled
@@ -327,11 +330,11 @@ var NETDATA = window.NETDATA || {};
330
idle_lost_focus: 500, // ms - when the window does not have focus, check
331
// if focus has been regained, every this time
332
330
- global_pan_sync_time: 1000, // ms - when you pan or zoom a chart, the background
333
+ global_pan_sync_time: 300, // ms - when you pan or zoom a chart, the background
334
// auto-refreshing of charts is paused for this amount
335
// of time
336
334
- sync_selection_delay: 1500, // ms - when you pan or zoom a chart, wait this amount
337
+ sync_selection_delay: 400, // ms - when you pan or zoom a chart, wait this amount
338
// of time before setting up synchronized selections
339
// on hover.
340
@@ -589,16 +592,13 @@ var NETDATA = window.NETDATA || {};
592
NETDATA.onresizeCallback();
593
};
594
595
+ NETDATA.onscroll_updater_timeout_id = 0;
596
NETDATA.onscroll_updater_count = 0;
593
- NETDATA.onscroll_updater_running = false;
594
- NETDATA.onscroll_updater_last_run = 0;
595
- NETDATA.onscroll_updater_watchdog = null;
597
NETDATA.onscroll_updater_max_duration = 0;
598
NETDATA.onscroll_updater_above_threshold_count = 0;
599
NETDATA.onscroll_updater = function() {
600
NETDATA.globalSelectionSync.stop();
601
601
- NETDATA.onscroll_updater_running = true;
602
NETDATA.onscroll_updater_count++;
603
var start = Date.now();
604
@@ -653,8 +653,7 @@ var NETDATA = window.NETDATA || {};
653
}
654
}
655
656
- NETDATA.onscroll_updater_last_run = start;
657
- NETDATA.onscroll_updater_running = false;
656
+ NETDATA.onscroll_updater_timeout_id = 0;
657
};
658
659
NETDATA.scrollUp = false;
@@ -666,29 +665,16 @@ var NETDATA = window.NETDATA || {};
665
NETDATA.scrollY = window.scrollY;
666
667
NETDATA.options.last_page_scroll = Date.now();
669
- NETDATA.options.auto_refresher_stop_until = 0;
668
+ NETDATA.options.on_scroll_refresher_stop_until = NETDATA.options.last_page_scroll + 25;
669
670
if(NETDATA.options.targets === null) return;
671
672
if(NETDATA.options.current.async_on_scroll === true) {
673
// async
675
- if(NETDATA.onscroll_updater_running === false) {
676
- NETDATA.onscroll_updater_running = true;
677
- setTimeout(NETDATA.onscroll_updater, 0);
678
- }
679
- else {
680
- if(NETDATA.onscroll_updater_watchdog !== null)
681
- clearTimeout(NETDATA.onscroll_updater_watchdog);
674
+ if(NETDATA.onscroll_updater_timeout_id !== 0)
675
+ clearTimeout(NETDATA.onscroll_updater_timeout_id);
676
683
- NETDATA.onscroll_updater_watchdog = setTimeout(function() {
684
- if(NETDATA.onscroll_updater_running === false && NETDATA.options.last_page_scroll > NETDATA.onscroll_updater_last_run) {
685
- // console.log('watchdog');
686
- NETDATA.onscroll_updater();
687
- }
688
-
689
- NETDATA.onscroll_updater_watchdog = null;
690
- }, 200);
691
- }
677
+ NETDATA.onscroll_updater_timeout_id = setTimeout(NETDATA.onscroll_updater, 0);
678
}
679
else {
680
// sync
@@ -2448,10 +2434,14 @@ var NETDATA = window.NETDATA || {};
2434
2435
if(that.chart_created === true) {
2436
if(NETDATA.options.current.destroy_on_hide === true) {
2437
+ // that.log('hideChart() init');
2438
+
2439
// we should destroy it
2440
init('force');
2441
}
2442
else {
2443
+ // that.log('hideChart()');
2444
+
2445
showRendering();
2446
that.element_chart.style.display = 'none';
2447
if(that.element_legend !== null) that.element_legend.style.display = 'none';
@@ -2479,11 +2469,13 @@ var NETDATA = window.NETDATA || {};
2469
that.updates_since_last_unhide = 0;
2470
2471
if(that.chart_created === false) {
2472
+ // that.log('unhideChart() init');
2473
// we need to re-initialize it, to show our background
2474
// logo in bootstrap tabs, until the chart loads
2475
init('force');
2476
}
2477
else {
2478
+ // that.log('unhideChart()');
2479
that.tm.last_unhidden = Date.now();
2480
that.element_chart.style.display = '';
2481
if(that.element_legend !== null) that.element_legend.style.display = '';
@@ -2495,7 +2487,13 @@ var NETDATA = window.NETDATA || {};
2487
};
2488
2489
var canBeRendered = function() {
2498
- return (isHidden() === false && that.isVisible(true) === true);
2490
+ return (
2491
+ (
2492
+ NETDATA.options.page_is_visible === true ||
2493
+ NETDATA.options.current.stop_updates_when_focus_is_lost === false
2494
+ )
2495
+ && isHidden() === false && that.isVisible(true) === true
2496
+ );
2497
};
2498
2499
// https://github.com/petkaantonov/bluebird/wiki/Optimization-killers
@@ -3189,7 +3187,7 @@ var NETDATA = window.NETDATA || {};
3187
this.legendShowUndefined = function() {
3188
this.legendSetDateString(this.legendPluginModuleString(false));
3189
this.legendSetTimeString(this.chart.context.toString());
3192
- this.legendSetUnitsString(' ');
3190
+ // this.legendSetUnitsString(' ');
3191
3192
if(this.data && this.element_legend_childs.series !== null) {
3193
var labels = this.data.dimension_names;
@@ -4230,6 +4228,7 @@ var NETDATA = window.NETDATA || {};
4228
this.tmp.___isVisible___ = __isVisible();
4229
if(this.tmp.___isVisible___ === true) unhideChart();
4230
else hideChart();
4231
+
4232
return this.tmp.___isVisible___;
4233
};
4234
@@ -4294,7 +4293,7 @@ var NETDATA = window.NETDATA || {};
4293
}
4294
4295
// options valid only for autoRefresh()
4297
- if(NETDATA.options.auto_refresher_stop_until === 0 || NETDATA.options.auto_refresher_stop_until < now) {
4296
+ if(NETDATA.options.auto_refresher_stop_until < now) {
4297
if(NETDATA.globalPanAndZoom.isActive()) {
4298
if(NETDATA.globalPanAndZoom.shouldBeAutoRefreshed(this)) {
4299
if(this.debug === true)
@@ -4697,6 +4696,13 @@ var NETDATA = window.NETDATA || {};
4696
NETDATA.chartRefresher = function() {
4697
// console.log('auto-refresher...');
4698
4699
+ var now = Date.now();
4700
+ if( now < NETDATA.options.on_scroll_refresher_stop_until ) {
4701
+ setTimeout(NETDATA.chartRefresher,
4702
+ NETDATA.chartRefresherWaitTime());
4703
+ return;
4704
+ }
4705
+
4706
if(NETDATA.options.pause === true) {
4707
// console.log('auto-refresher is paused');
4708
setTimeout(NETDATA.chartRefresher,