Merge branch 'load_on_Scroll' of git://github.com/jifwin/grafana into jifwin-load_on_Scroll

public/app/features/dashboard/model.ts

@@ -36,6 +36,7 @@ export class DashboardModel {
   meta: any;
   events: any;
   editMode: boolean;
+  loadOnScroll: boolean;
 
   constructor(data, meta?) {
     if (!data) {
@@ -64,6 +65,7 @@ export class DashboardModel {
     this.version = data.version || 0;
     this.links = data.links || [];
     this.gnetId = data.gnetId || null;
+    this.loadOnScroll = data.loadOnScroll || false;
 
     this.rows = [];
     if (data.rows) {

public/app/features/dashboard/partials/settings.html

@@ -61,6 +61,12 @@
                         checked="dashboard.hideControls"
                         label-class="width-11">
         </gf-form-switch>
+        <gf-form-switch class="gf-form"
+                        label="Load on scroll"
+                        tooltip="Load panels as they become visible"
+                        checked="dashboard.loadOnScroll"
+                        label-class="width-11">
+        </gf-form-switch>
       </div>
     </div>
 

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,14 @@ class MetricsPanelCtrl extends PanelCtrl {
     // ignore fetching data if another panel is in fullscreen
     if (this.otherPanelInFullscreenMode()) { return; }
 
+    if (this.scope.ctrl.dashboard.loadOnScroll) {
+      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

@@ -57,7 +57,7 @@ var panelTemplate = `
   </div>
 `;
 
-module.directive('grafanaPanel', function($rootScope) {
+module.directive('grafanaPanel', function($rootScope, $document, $timeout) {
   return {
     restrict: 'E',
     template: panelTemplate,
@@ -183,6 +183,19 @@ module.directive('grafanaPanel', function($rootScope) {
           infoDrop.destroy();
         }
       });
+
+      scope.needsRefresh = false;
+
+      scope.isVisible = function () {
+        var position = panelContainer[0].getBoundingClientRect();
+        return (0 < position.top) && (position.top < window.innerHeight);
+      };
+
+      $document.bind('scroll', _.debounce(function () {
+        if (scope.ctrl.dashboard.loadOnScroll && scope.needsRefresh) {
+          scope.ctrl.refresh();
+        }
+      }, 250));
     }
   };
 });