Merge branch 'jifwin-load_on_Scroll'

public/app/features/panel/metrics_panel_ctrl.ts

@@ -12,6 +12,7 @@ import * as dateMath from 'app/core/utils/datemath';
 import {Subject} from 'vendor/npm/rxjs/Subject';
 
 class MetricsPanelCtrl extends PanelCtrl {
+  scope: any;
   loading: boolean;
   datasource: any;
   datasourceName: any;
@@ -40,6 +41,7 @@ class MetricsPanelCtrl extends PanelCtrl {
     this.datasourceSrv = $injector.get('datasourceSrv');
     this.timeSrv = $injector.get('timeSrv');
     this.templateSrv = $injector.get('templateSrv');
+    this.scope = $scope;
 
     if (!this.panel.targets) {
       this.panel.targets = [{}];

public/app/features/panel/panel_ctrl.ts

@@ -35,6 +35,8 @@ export class PanelCtrl {
   containerHeight: any;
   events: Emitter;
   timing: any;
+  skippedLastRefresh: boolean;
+  isPanelVisible: any;
 
   constructor($scope, $injector) {
     this.$injector = $injector;
@@ -74,7 +76,18 @@ export class PanelCtrl {
     profiler.renderingCompleted(this.panel.id, this.timing);
   }
 
+  private isRenderingPng () {
+    return window.location.href.indexOf("/dashboard-solo/db") >= 0;
+  }
+
   refresh() {
+    if (!this.isPanelVisible() && !this.isRenderingPng() && !this.dashboard.snapshot) {
+      this.skippedLastRefresh = true;
+      return;
+    }
+
+    this.skippedLastRefresh = false;
+
     this.events.emit('refresh', null);
   }
 

public/app/features/panel/panel_directive.ts

@@ -57,7 +57,7 @@ var panelTemplate = `
   </div>
 `;
 
-module.directive('grafanaPanel', function($rootScope) {
+module.directive('grafanaPanel', function($rootScope, $document) {
   return {
     restrict: 'E',
     template: panelTemplate,
@@ -175,9 +175,23 @@ module.directive('grafanaPanel', function($rootScope) {
       elem.on('mouseenter', mouseEnter);
       elem.on('mouseleave', mouseLeave);
 
+      ctrl.isPanelVisible = function () {
+        var position = panelContainer[0].getBoundingClientRect();
+        return (0 < position.top) && (position.top < window.innerHeight);
+      };
+
+      const refreshOnScroll = _.debounce(function () {
+        if (ctrl.skippedLastRefresh) {
+          ctrl.refresh();
+        }
+      }, 250);
+
+      $document.on('scroll', refreshOnScroll);
+
       scope.$on('$destroy', function() {
         elem.off();
         cornerInfoElem.off();
+        $document.off('scroll', refreshOnScroll);
 
         if (infoDrop) {
           infoDrop.destroy();