feat: new grid system progressW

public/app/core/core.ts

@@ -46,7 +46,6 @@ import {contextSrv} from './services/context_srv';
 import {KeybindingSrv} from './services/keybindingSrv';
 import {helpModal} from './components/help/help';
 import {NavModelSrv, NavModel} from './nav_model_srv';
-import {dashGrid} from './components/dashgrid/dashgrid';
 
 export {
   arrayJoin,
@@ -72,5 +71,4 @@ export {
   helpModal,
   NavModelSrv,
   NavModel,
-  dashGrid,
 };

public/app/features/dashboard/all.js

@@ -24,4 +24,5 @@ define([
   './ad_hoc_filters',
   './row/row_ctrl',
   './repeat_option/repeat_option',
+  './dashgrid/dashgrid',
 ], function () {});

public/app/features/dashboard/dashboard_ctrl.ts

@@ -113,10 +113,10 @@ export class DashboardCtrl {
       };
 
       $scope.registerWindowResizeEvent = function() {
-        angular.element(window).bind('resize', function() {
-          $timeout.cancel(resizeEventTimeout);
-          resizeEventTimeout = $timeout(function() { $scope.$broadcast('render'); }, 200);
-        });
+        // angular.element(window).bind('resize', function() {
+        //   $timeout.cancel(resizeEventTimeout);
+        //   resizeEventTimeout = $timeout(function() { $scope.$broadcast('render'); }, 200);
+        // });
 
         $scope.$on('$destroy', function() {
           angular.element(window).unbind('resize');

public/app/features/dashboard/dashgrid/dashgrid.ts

@@ -0,0 +1,121 @@
+///<reference path="../../../headers/common.d.ts" />
+
+import $ from 'jquery';
+import coreModule from 'app/core/core_module';
+import {DashboardModel, CELL_HEIGHT, CELL_VMARGIN} from '../model';
+
+import 'jquery-ui';
+import 'gridstack';
+import 'gridstack.jquery-ui';
+
+const template = `
+<div class="grid-stack">
+  <dash-grid-item ng-repeat="panel in ctrl.panels"
+                  class="grid-stack-item"
+                  grid-ctrl="ctrl"
+                  panel="panel">
+    <plugin-component type="panel" class="grid-stack-item-content">
+    </plugin-component>
+  </dash-grid-item>
+</div>
+`;
+
+export class GridCtrl {
+  options: any;
+  dashboard: any;
+  panels: any;
+  gridstack: any;
+  gridElem: any;
+
+  /** @ngInject */
+  constructor(private $rootScope, private $element, private $timeout) {
+    this.panels = this.dashboard.panels;
+  }
+
+  init() {
+    this.gridElem = this.$element.find('.grid-stack');
+
+    this.gridstack = this.gridElem.gridstack({
+      animate: true,
+      cellHeight: CELL_HEIGHT,
+      verticalMargin: CELL_VMARGIN,
+    }).data('gridstack');
+
+    this.gridElem.on('change', (e, items) => {
+      this.$timeout(() => this.itemsChanged(items), 50);
+    });
+  }
+
+  itemsChanged(items) {
+    for (let item of items) {
+      var panel = this.dashboard.getPanelById(parseInt(item.id));
+      panel.x = item.x;
+      panel.y = item.y;
+      panel.width = item.width;
+      panel.height = item.height;
+      console.log('update panel', panel.id, panel.height);
+    }
+    this.$rootScope.$broadcast('render');
+    console.log('broadcast render');
+  }
+
+  bindItem(element) {
+    this.gridstack.makeWidget(element);
+  }
+}
+
+/** @ngInject **/
+export function dashGrid($timeout) {
+  return {
+    restrict: 'E',
+    template: template,
+    controller: GridCtrl,
+    bindToController: true,
+    controllerAs: 'ctrl',
+    scope: {
+      dashboard: "="
+    },
+    link: function(scope, elem, attrs, ctrl) {
+      $timeout(function() {
+        console.log(elem.html());
+        ctrl.init();
+      });
+    }
+  };
+}
+
+/** @ngInject **/
+export function dashGridItem($timeout) {
+  return {
+    restrict: "E",
+    scope: {
+      panel: '=',
+      gridCtrl: '='
+    },
+    link: function (scope, element, attrs) {
+      let gridCtrl = scope.gridCtrl;
+      let panel = scope.panel;
+
+      element.attr({
+        'data-gs-id': panel.id,
+        'data-gs-x': panel.x,
+        'data-gs-y': panel.y,
+        'data-gs-width': panel.width,
+        'data-gs-height': panel.height,
+      });
+
+      //var item = element.data('_gridstack_node');
+      //console.log('link item', item);
+      //gridCtrl.bindItem(element);
+
+      // element.bind('$destroy', function() {
+      //   var item = element.data('_gridstack_node');
+      //   scope.onItemRemoved({item: item});
+      //   ctrl.removeItem(element);
+      // });
+    }
+  };
+}
+
+coreModule.directive('dashGrid', dashGrid);
+coreModule.directive('dashGridItem', dashGridItem);

public/app/features/dashboard/dashgrid/ref.txt

@@ -1,3 +1,22 @@
+Skip to content
+This repository
+Search
+Pull requests
+Issues
+Marketplace
+Gist
+ @torkelo
+ Sign out
+ Unwatch 946
+  Unstar 17,021
+ Fork 2,862 grafana/grafana
+ Code  Issues 1,079  Pull requests 46  Projects 1  Wiki  Settings Insights
+Branch: gridstack Find file Copy pathgrafana/public/app/core/components/dashgrid/dashgrid.ts
+a6bbcb8  on Jun 13
+@torkelo torkelo ux: gridstack poc
+1 contributor
+RawBlameHistory
+213 lines (181 sloc)  5.45 KB
 ///<reference path="../../../headers/common.d.ts" />
 
 import $ from 'jquery';
@@ -15,7 +34,6 @@ const template = `
       on-drag-stop="ctrl.onDragStop(event, ui)"
       on-resize-start="ctrl.onResizeStart(event, ui)"
       on-resize-stop="ctrl.onResizeStop(event, ui)">
-
       <div gridstack-item ng-repeat="panel in ctrl.panels"
           class="grid-stack-item"
           gs-item-id="panel.id"
@@ -210,3 +228,5 @@ coreModule.directive('gridstackItem', ['$timeout', function($timeout) {
 }]);
 
 coreModule.directive('dashGrid', dashGrid);
+Contact GitHub API Training Shop Blog About
+© 2017 GitHub, Inc. Terms Privacy Security Status Help

public/app/features/dashboard/model.ts

@@ -10,6 +10,17 @@ import {Emitter, contextSrv, appEvents} from 'app/core/core';
 import {DashboardRow} from './row/row_model';
 import sortByKeys from 'app/core/utils/sort_by_keys';
 
+export interface Panel {
+  id: number;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export const CELL_HEIGHT = 60;
+export const CELL_VMARGIN = 15;
+
 export class DashboardModel {
   id: any;
   title: any;
@@ -36,6 +47,7 @@ export class DashboardModel {
   meta: any;
   events: any;
   editMode: boolean;
+  panels: Panel[];
 
   constructor(data, meta?) {
     if (!data) {
@@ -64,6 +76,7 @@ export class DashboardModel {
     this.version = data.version || 0;
     this.links = data.links || [];
     this.gnetId = data.gnetId || null;
+    this.panels = data.panels || [];
 
     this.rows = [];
     if (data.rows) {
@@ -155,13 +168,9 @@ export class DashboardModel {
   }
 
   getPanelById(id) {
-    for (var i = 0; i < this.rows.length; i++) {
-      var row = this.rows[i];
-      for (var j = 0; j < row.panels.length; j++) {
-        var panel = row.panels[j];
-        if (panel.id === id) {
-          return panel;
-        }
+    for (let panel of this.panels) {
+      if (panel.id === id) {
+        return panel;
       }
     }
     return null;
@@ -303,7 +312,7 @@ export class DashboardModel {
     var i, j, k;
     var oldVersion = this.schemaVersion;
     var panelUpgrades = [];
-    this.schemaVersion = 14;
+    this.schemaVersion = 15;
 
     if (oldVersion === this.schemaVersion) {
       return;
@@ -612,6 +621,11 @@ export class DashboardModel {
         this.graphTooltip = old.sharedCrosshair ? 1 : 0;
       }
 
+      if (oldVersion < 15) {
+        this.upgradeToGridLayout();
+        console.log(this.panels);
+      }
+
       if (panelUpgrades.length === 0) {
         return;
       }
@@ -625,5 +639,33 @@ export class DashboardModel {
         }
       }
     }
+
+    upgradeToGridLayout() {
+      let yPos = 0;
+
+      for (let row of this.rows) {
+        let xPos = 0;
+        let height: any = row.height;
+
+        if (_.isString(height)) {
+          height = parseInt(height.replace('px', ''), 10);
+        }
+
+        height = Math.ceil(height / CELL_HEIGHT);
+
+        for (let panel of row.panels) {
+          panel.x = xPos;
+          panel.y = yPos;
+          panel.width = panel.span;
+          panel.height = height;
+
+          xPos += panel.width;
+
+          this.panels.push(panel);
+        }
+
+        yPos += height;
+      }
+    }
 }
 

public/app/features/panel/panel_ctrl.ts

@@ -6,6 +6,7 @@ import angular from 'angular';
 import $ from 'jquery';
 import {profiler} from 'app/core/profiler';
 import Remarkable from 'remarkable';
+import {CELL_HEIGHT, CELL_VMARGIN} from '../dashboard/model';
 
 const TITLE_HEIGHT = 25;
 const EMPTY_TITLE_HEIGHT = 9;
@@ -171,8 +172,10 @@ export class PanelCtrl {
     //     this.containerHeight = parseInt(this.containerHeight.replace('px', ''), 10);
     //   }
     // }
-    const rowSpan = this.panel.height || 4;
-    this.containerHeight = rowSpan * 60 + ((rowSpan-1) * 20);
+    if (this.panel.id === 4) {
+      console.log(this.panel.id, this.panel.height);
+    }
+    this.containerHeight = this.panel.height * CELL_HEIGHT + ((this.panel.height-1) * CELL_VMARGIN);
     this.height = this.containerHeight - (PANEL_BORDER + PANEL_PADDING + (this.panel.title ? TITLE_HEIGHT : EMPTY_TITLE_HEIGHT));
   }
 

public/sass/components/_gridstack.scss

@@ -1,4 +1,4 @@
-:root .grid-stack-item > .ui-resizable-handle {
+.grid-stack-item > .ui-resizable-handle {
   filter: none;
 }
 
@@ -19,8 +19,8 @@
   margin: 0;
   position: absolute;
   top: 0;
-  left: 10px;
-  right: 10px;
+  left: 5px;
+  right: 5px;
   bottom: 0;
   width: auto;
   z-index: 0 !important;
@@ -37,8 +37,8 @@
   margin: 0;
   position: absolute;
   top: 0;
-  left: 10px;
-  right: 10px;
+  left: 7px;
+  right: 7px;
   bottom: 0;
   width: auto;
   z-index: 0 !important;
@@ -92,8 +92,8 @@
 
 .grid-stack > .grid-stack-item > .ui-resizable-nw {
   cursor: nw-resize;
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
   left: 10px;
   top: 0;
 }
@@ -108,8 +108,8 @@
 
 .grid-stack > .grid-stack-item > .ui-resizable-ne {
   cursor: ne-resize;
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
   right: 10px;
   top: 0;
 }
@@ -124,8 +124,8 @@
 
 .grid-stack > .grid-stack-item > .ui-resizable-se {
   cursor: se-resize;
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
   right: 10px;
   bottom: 0;
 }
@@ -140,8 +140,8 @@
 
 .grid-stack > .grid-stack-item > .ui-resizable-sw {
   cursor: sw-resize;
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
   left: 10px;
   bottom: 0;
 }