hide the chart toolbox when hiding a chart
Costa Tsaousis (ktsaou) committed
May 16, 2017 at 02:12 UTC
1c299313199491cb055db98b5e07bf40c798ac10
1 file changed
+26
-19
web/dashboard.js
+26
-19
@@ -287,7 +287,7 @@ var NETDATA = window.NETDATA || {};
287
// rendering the chart that is panned or zoomed).
288
// Used with .current.global_pan_sync_time
289
290
- last_resized: Date.now(), // the timestamp of the last resize request
290
+ last_page_resize: Date.now(), // the timestamp of the last resize request
291
292
last_page_scroll: 0, // the timestamp the last time the page was scrolled
293
@@ -571,7 +571,7 @@ var NETDATA = window.NETDATA || {};
571
572
NETDATA.onresizeCallback = null;
573
NETDATA.onresize = function() {
574
- NETDATA.options.last_resized = Date.now();
574
+ NETDATA.options.last_page_resize = Date.now();
575
NETDATA.onscroll();
576
577
if(typeof NETDATA.onresizeCallback === 'function')
@@ -1829,6 +1829,9 @@ var NETDATA = window.NETDATA || {};
1829
showRendering();
1830
that.element_chart.style.display = 'none';
1831
if(that.element_legend !== null) that.element_legend.style.display = 'none';
1832
+ if(that.element_legend_childs.toolbox !== null) that.element_legend_childs.toolbox.style.display = 'none';
1833
+ if(that.element_legend_childs.resize_handler !== null) that.element_legend_childs.resize_handler.style.display = 'none';
1834
+
1835
that.tm.last_hidden = Date.now();
1836
1837
// de-allocate data
@@ -1858,6 +1861,8 @@ var NETDATA = window.NETDATA || {};
1861
that.tm.last_unhidden = Date.now();
1862
that.element_chart.style.display = '';
1863
if(that.element_legend !== null) that.element_legend.style.display = '';
1864
+ if(that.element_legend_childs.toolbox !== null) that.element_legend_childs.toolbox.style.display = '';
1865
+ if(that.element_legend_childs.resize_handler !== null) that.element_legend_childs.resize_handler.style.display = '';
1866
resizeChart();
1867
hideMessage();
1868
}
@@ -1928,7 +1933,7 @@ var NETDATA = window.NETDATA || {};
1933
// to be called just before the chart library to make sure that
1934
// a properly sized dom is available
1935
var resizeChart = function() {
1931
- if(that.isVisible() === true && that.tm.last_resized < NETDATA.options.last_resized) {
1936
+ if(that.isVisible() === true && that.tm.last_resized < NETDATA.options.last_page_resize) {
1937
if(that.chart_created === false) return;
1938
1939
if(that.needsRecreation()) {
@@ -3247,7 +3252,7 @@ var NETDATA = window.NETDATA || {};
3252
this.chart_created === true
3253
&& this.library
3254
&& this.library.autoresize() === false
3250
- && this.tm.last_resized < NETDATA.options.last_resized
3255
+ && this.tm.last_resized < NETDATA.options.last_page_resize
3256
);
3257
};
3258
@@ -3574,31 +3579,31 @@ var NETDATA = window.NETDATA || {};
3579
if(nocache === false && this.tm.last_visible_check > NETDATA.options.last_page_scroll)
3580
return this.___isVisible___;
3581
3582
+ // tolerance is the number of pixels a chart can be off-screen
3583
+ // to consider it as visible and refresh it as if was visible
3584
+ var tolerance = 0;
3585
+
3586
this.tm.last_visible_check = Date.now();
3587
3579
- var wh = window.innerHeight;
3580
- var x = this.element.getBoundingClientRect();
3581
- var ret = 0;
3582
- var tolerance = 0;
3588
+ var rect = this.element.getBoundingClientRect();
3589
+
3590
+ var screenTop = window.scrollY;
3591
+ var screenBottom = screenTop + window.innerHeight;
3592
+
3593
+ var chartTop = rect.top + screenTop;
3594
+ var chartBottom = chartTop + rect.height;
3595
3584
- if(x.width === 0 || x.height === 0) {
3596
+ if(rect.width === 0 || rect.height === 0) {
3597
hideChart();
3598
this.___isVisible___ = false;
3599
return this.___isVisible___;
3600
}
3601
3590
- if(x.top < 0 && -x.top > x.height) {
3591
- // the chart is entirely above
3592
- ret = -x.top - x.height;
3593
- }
3594
- else if(x.top > wh) {
3595
- // the chart is entirely below
3596
- ret = x.top - wh;
3597
- }
3598
-
3599
- if(ret > tolerance) {
3602
+ if(chartBottom + tolerance < screenTop || chartTop - tolerance > screenBottom) {
3603
// the chart is too far
3604
3605
+ // this.log('nocache: ' + nocache.toString() + ', screen top: ' + screenTop.toString() + ', bottom: ' + screenBottom.toString() + ', chart top: ' + chartTop.toString() + ', bottom: ' + chartBottom.toString() + ', OFF SCREEN');
3606
+
3607
hideChart();
3608
this.___isVisible___ = false;
3609
return this.___isVisible___;
@@ -3606,6 +3611,8 @@ var NETDATA = window.NETDATA || {};
3611
else {
3612
// the chart is inside or very close
3613
3614
+ // this.log('nocache: ' + nocache.toString() + ', screen top: ' + screenTop.toString() + ', bottom: ' + screenBottom.toString() + ', chart top: ' + chartTop.toString() + ', bottom: ' + chartBottom.toString() + ', VISIBLE');
3615
+
3616
unhideChart();
3617
this.___isVisible___ = true;
3618
return this.___isVisible___;