implement panels loading on scroll

public/app/features/panel/metrics_panel_ctrl.ts

@@ -12,6 +12,8 @@ import * as dateMath from 'app/core/utils/datemath';
 import {Subject} from 'vendor/npm/rxjs/Subject';
 
 class MetricsPanelCtrl extends PanelCtrl {
+  scope: any;
+  needsRefresh: boolean;
   loading: boolean;
   datasource: any;
   datasourceName: any;
@@ -40,6 +42,8 @@ class MetricsPanelCtrl extends PanelCtrl {
     this.datasourceSrv = $injector.get('datasourceSrv');
     this.timeSrv = $injector.get('timeSrv');
     this.templateSrv = $injector.get('templateSrv');
+    this.scope = $scope;
+    this.needsRefresh = false;
 
     if (!this.panel.targets) {
       this.panel.targets = [{}];
@@ -50,6 +54,10 @@ class MetricsPanelCtrl extends PanelCtrl {
     this.events.on('panel-teardown', this.onPanelTearDown.bind(this));
   }
 
+  private isRenderGraph () {
+    return window.location.href.indexOf("/dashboard-solo/") === 0;
+  }
+
   private onPanelTearDown() {
     if (this.dataSubscription) {
       this.dataSubscription.unsubscribe();
@@ -66,6 +74,13 @@ class MetricsPanelCtrl extends PanelCtrl {
     // ignore fetching data if another panel is in fullscreen
     if (this.otherPanelInFullscreenMode()) { return; }
 
+    if (!this.scope.$$childHead || (!this.scope.$$childHead.isVisible() && !this.isRenderGraph())) {
+      this.scope.$$childHead.needsRefresh = true;
+      return;
+    }
+
+    this.scope.$$childHead.needsRefresh = false;
+
     // if we have snapshot data use that
     if (this.panel.snapshotData) {
       this.updateTimeRange();

public/app/features/panel/panel_directive.ts

@@ -1,9 +1,8 @@
 ///<reference path="../../headers/common.d.ts" />
 
-import angular from 'angular';
-import $ from 'jquery';
-import _ from 'lodash';
-import Drop from 'tether-drop';
+import angular from "angular";
+import $ from "jquery";
+import Drop from "tether-drop";
 
 var module = angular.module('grafana.directives');
 
@@ -57,7 +56,7 @@ var panelTemplate = `
   </div>
 `;
 
-module.directive('grafanaPanel', function($rootScope) {
+module.directive('grafanaPanel', function($rootScope, $document, $timeout) {
   return {
     restrict: 'E',
     template: panelTemplate,
@@ -183,6 +182,25 @@ module.directive('grafanaPanel', function($rootScope) {
           infoDrop.destroy();
         }
       });
+
+      var getDataPromise = null;
+      scope.needsRefresh = false;
+
+      scope.isVisible = function () {
+        var position = panelContainer[0].getBoundingClientRect();
+        return (0 < position.top) && (position.top < window.innerHeight);
+      };
+
+      $document.bind('scroll', function () {
+        if (getDataPromise) {
+          $timeout.cancel(getDataPromise);
+        }
+        if (scope.needsRefresh) {
+          getDataPromise = $timeout(function () {
+            scope.ctrl.refresh();
+          }, 250);
+        }
+      });
     }
   };
 });