pan_and_zoom_factor_multiplier_shift: 3.0,
pan_and_zoom_factor_multiplier_alt: 4.0,
- abort_ajax_on_scroll: false,
+ abort_ajax_on_scroll: false, // kill pending ajax page scroll
+ async_on_scroll: false, // sync/async onscroll handler
+ onscroll_worker_duration_threshold: 30, // time in ms, to consider slow the onscroll handler
setOptionCallback: function() { ; }
},
NETDATA.onscroll();
};
- NETDATA.onscroll = function() {
- // console.log('onscroll');
-
- NETDATA.options.last_page_scroll = new Date().getTime();
- NETDATA.options.auto_refresher_stop_until = 0;
+ NETDATA.onscroll_updater_count = 0;
+ NETDATA.onscroll_updater_running = false;
+ NETDATA.onscroll_updater_last_run = 0;
+ NETDATA.onscroll_updater_watchdog = null;
+ NETDATA.onscroll_updater_max_duration = 0;
+ NETDATA.onscroll_updater_above_threshold_count = 0;
+ NETDATA.onscroll_updater = function() {
+ NETDATA.onscroll_updater_running = true;
+ NETDATA.onscroll_updater_count++;
+ var start = new Date().getTime();
- if(NETDATA.options.targets === null) return;
+ var targets = NETDATA.options.targets;
+ var len = targets.length;
// when the user scrolls he sees that we have
// hidden all the not-visible charts
// using this little function we try to switch
// the charts back to visible quickly
- var targets = NETDATA.options.targets;
- var len = targets.length;
+
+
if(NETDATA.options.abort_ajax_on_scroll === true) {
+ // we have to cancel pending requests too
+
while (len--) {
if (targets[len]._updating === true) {
if (typeof targets[len].xhr !== 'undefined') {
}
}
else {
+ // just find which chart is visible
+
while (len--)
targets[len].isVisible();
}
+
+ var end = new Date().getTime();
+ // console.log('scroll No ' + NETDATA.onscroll_updater_count + ' calculation took ' + (end - start).toString() + ' ms');
+
+ if(NETDATA.options.current.async_on_scroll === false) {
+ var dt = end - start;
+ if(dt > NETDATA.onscroll_updater_max_duration) {
+ // console.log('max onscroll event handler duration increased to ' + dt);
+ NETDATA.onscroll_updater_max_duration = dt;
+ }
+
+ if(dt > NETDATA.options.current.onscroll_worker_duration_threshold) {
+ // console.log('slow: ' + dt);
+ NETDATA.onscroll_updater_above_threshold_count++;
+
+ if(NETDATA.onscroll_updater_above_threshold_count > 2 && NETDATA.onscroll_updater_above_threshold_count * 100 / NETDATA.onscroll_updater_count > 2) {
+ NETDATA.options.current.async_on_scroll = true;
+ console.log('NETDATA: your browser is slow - enabling asynchronous onscroll event handler.');
+ }
+ }
+ }
+
+ NETDATA.onscroll_updater_last_run = start;
+ NETDATA.onscroll_updater_running = false;
+ };
+
+ NETDATA.onscroll = function() {
+ // console.log('onscroll');
+
+ NETDATA.options.last_page_scroll = new Date().getTime();
+ NETDATA.options.auto_refresher_stop_until = 0;
+
+ if(NETDATA.options.targets === null) return;
+
+ if(NETDATA.options.current.async_on_scroll === true) {
+ // async
+ if(NETDATA.onscroll_updater_running === false) {
+ NETDATA.onscroll_updater_running = true;
+ setTimeout(NETDATA.onscroll_updater, 0);
+ }
+ else {
+ if(NETDATA.onscroll_updater_watchdog !== null)
+ clearTimeout(NETDATA.onscroll_updater_watchdog);
+
+ NETDATA.onscroll_updater_watchdog = setTimeout(function() {
+ if(NETDATA.onscroll_updater_running === false && NETDATA.options.last_page_scroll > NETDATA.onscroll_updater_last_run) {
+ // console.log('watchdog');
+ NETDATA.onscroll_updater();
+ }
+
+ NETDATA.onscroll_updater_watchdog = null;
+ }, 200);
+ }
+ }
+ else {
+ // sync
+ NETDATA.onscroll_updater();
+ }
};
window.onresize = NETDATA.onresize;
sync_option('eliminate_zero_dimensions');
sync_option('destroy_on_hide');
+ sync_option('async_on_scroll');
sync_option('parallel_refresher');
sync_option('concurrent_refreshes');
sync_option('sync_selection');
// handle options changes
$('#eliminate_zero_dimensions').change(function() { NETDATA.setOption('eliminate_zero_dimensions', $(this).prop('checked')); });
$('#destroy_on_hide').change(function() { NETDATA.setOption('destroy_on_hide', $(this).prop('checked')); });
+ $('#async_on_scroll').change(function() { NETDATA.setOption('async_on_scroll', $(this).prop('checked')); });
$('#parallel_refresher').change(function() { NETDATA.setOption('parallel_refresher', $(this).prop('checked')); });
$('#concurrent_refreshes').change(function() { NETDATA.setOption('concurrent_refreshes', $(this).prop('checked')); });
$('#sync_selection').change(function() { NETDATA.setOption('sync_selection', $(this).prop('checked')); });
// parallel javascript downloader in netdata
var netdataPrepCallback = function() {
NETDATA.requiredJs.push({
- url: NETDATA.serverDefault + 'dashboard_info.js?v57',
+ url: NETDATA.serverDefault + 'dashboard_info.js?v58',
isAlreadyLoaded: function() { return false; }
});
<tr class="option-row">
<td class="option-control"><input id="destroy_on_hide" type="checkbox" data-toggle="toggle" data-on="Destroy" data-off="Hide" data-width="110px"></td>
<td class="option-info"><strong>How to handle hidden charts?</strong><br/>
- <small>When set to <b>Destroy</b>, charts that are not in the current viewport of the browser (are above, or below the visible area of the page), will be destroyed and re-created if and when they become visible again. When set to <b>Hide</b>, the not-visible charts will be just hidden, to simplify the DOM and speed up your browser. Set it to <b>Destroy</b>, to lower the memory requirements of your browser. Set it to <b>Hide</b> for smoother page scrolling.</small>
+ <small>When set to <b>Destroy</b>, charts that are not in the current viewport of the browser (are above, or below the visible area of the page), will be destroyed and re-created if and when they become visible again. When set to <b>Hide</b>, the not-visible charts will be just hidden, to simplify the DOM and speed up your browser. Set it to <b>Destroy</b>, to lower the memory requirements of your browser. Set it to <b>Hide</b> for faster restoration of charts on page scrolling.</small>
+ </td>
+ </tr>
+ <tr class="option-row">
+ <td class="option-control"><input id="async_on_scroll" type="checkbox" data-toggle="toggle" data-on="Async" data-off="Sync" data-width="110px"></td>
+ <td class="option-info"><strong>Page scroll handling?</strong><br/>
+ <small>When set to <b>Sync</b>, charts will be examined for their visibility synchronously. On slow computers this may impact the smoothness of page scrolling. To work asynchronously set it to <b>Async</b>. When set to <b>Sync</b>, the performance of page scrolling is monitored and this setting switches automatically to <b>Async</b> if the browser is found slow. Set it to <b>Sync</b> for best visual experience. Set it to <b>Async</b> for smoother page scrolling.</small>
</td>
</tr>
</table>
</div>
</body>
</html>
-<script async type="text/javascript" src="dashboard.js?v57"></script>
+<script async type="text/javascript" src="dashboard.js?v58"></script>
projects / netdata.git / commitdiff