Skip to content

N
nexpie-grafana-theme
Commit de7bb8cb by Torkel Ödegaard
Options

feat: new grid system progressW

parent a6bbcb8f
Showing with 215 additions and 30 deletions
public/app/core/core.ts
...@@ -46,7 +46,6 @@ import {contextSrv} from './services/context_srv'; ...@@ -46,7 +46,6 @@ import {contextSrv} from './services/context_srv';
import {KeybindingSrv} from './services/keybindingSrv'; import {KeybindingSrv} from './services/keybindingSrv';
import {helpModal} from './components/help/help'; import {helpModal} from './components/help/help';
import {NavModelSrv, NavModel} from './nav_model_srv'; import {NavModelSrv, NavModel} from './nav_model_srv';
import {dashGrid} from './components/dashgrid/dashgrid';
export { export {
arrayJoin, arrayJoin,
...@@ -72,5 +71,4 @@ export { ...@@ -72,5 +71,4 @@ export {
helpModal, helpModal,
NavModelSrv, NavModelSrv,
NavModel, NavModel,
dashGrid,
}; };
public/app/features/dashboard/all.js
...@@ -24,4 +24,5 @@ define([ ...@@ -24,4 +24,5 @@ define([
'./ad_hoc_filters', './ad_hoc_filters',
'./row/row_ctrl', './row/row_ctrl',
'./repeat_option/repeat_option', './repeat_option/repeat_option',
'./dashgrid/dashgrid',
], function () {}); ], function () {});
public/app/features/dashboard/dashboard_ctrl.ts
...@@ -113,10 +113,10 @@ export class DashboardCtrl { ...@@ -113,10 +113,10 @@ export class DashboardCtrl {
}; };
$scope.registerWindowResizeEvent = function() { $scope.registerWindowResizeEvent = function() {
angular.element(window).bind('resize', function() { // angular.element(window).bind('resize', function() {
$timeout.cancel(resizeEventTimeout); // $timeout.cancel(resizeEventTimeout);
resizeEventTimeout = $timeout(function() { $scope.$broadcast('render'); }, 200); // resizeEventTimeout = $timeout(function() { $scope.$broadcast('render'); }, 200);
}); // });
$scope.$on('$destroy', function() { $scope.$on('$destroy', function() {
angular.element(window).unbind('resize'); angular.element(window).unbind('resize');
......
public/app/features/dashboard/dashgrid/dashgrid.ts 0 → 100644
///<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/core/components/dashgrid/dashgrid.ts → public/app/features/dashboard/dashgrid/ref.txt
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" /> ///<reference path="../../../headers/common.d.ts" />
import $ from 'jquery'; import $ from 'jquery';
...@@ -15,7 +34,6 @@ const template = ` ...@@ -15,7 +34,6 @@ const template = `
on-drag-stop="ctrl.onDragStop(event, ui)" on-drag-stop="ctrl.onDragStop(event, ui)"
on-resize-start="ctrl.onResizeStart(event, ui)" on-resize-start="ctrl.onResizeStart(event, ui)"
on-resize-stop="ctrl.onResizeStop(event, ui)"> on-resize-stop="ctrl.onResizeStop(event, ui)">
<div gridstack-item ng-repeat="panel in ctrl.panels" <div gridstack-item ng-repeat="panel in ctrl.panels"
class="grid-stack-item" class="grid-stack-item"
gs-item-id="panel.id" gs-item-id="panel.id"
...@@ -210,3 +228,5 @@ coreModule.directive('gridstackItem', ['$timeout', function($timeout) { ...@@ -210,3 +228,5 @@ coreModule.directive('gridstackItem', ['$timeout', function($timeout) {
}]); }]);
coreModule.directive('dashGrid', dashGrid); 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'; ...@@ -10,6 +10,17 @@ import {Emitter, contextSrv, appEvents} from 'app/core/core';
import {DashboardRow} from './row/row_model'; import {DashboardRow} from './row/row_model';
import sortByKeys from 'app/core/utils/sort_by_keys'; 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 { export class DashboardModel {
id: any; id: any;
title: any; title: any;
...@@ -36,6 +47,7 @@ export class DashboardModel { ...@@ -36,6 +47,7 @@ export class DashboardModel {
meta: any; meta: any;
events: any; events: any;
editMode: boolean; editMode: boolean;
panels: Panel[];
constructor(data, meta?) { constructor(data, meta?) {
if (!data) { if (!data) {
...@@ -64,6 +76,7 @@ export class DashboardModel { ...@@ -64,6 +76,7 @@ export class DashboardModel {
this.version = data.version || 0; this.version = data.version || 0;
this.links = data.links || []; this.links = data.links || [];
this.gnetId = data.gnetId || null; this.gnetId = data.gnetId || null;
this.panels = data.panels || [];
this.rows = []; this.rows = [];
if (data.rows) { if (data.rows) {
...@@ -155,13 +168,9 @@ export class DashboardModel { ...@@ -155,13 +168,9 @@ export class DashboardModel {
} }
getPanelById(id) { getPanelById(id) {
for (var i = 0; i < this.rows.length; i++) { for (let panel of this.panels) {
var row = this.rows[i]; if (panel.id === id) {
for (var j = 0; j < row.panels.length; j++) { return panel;
var panel = row.panels[j];
if (panel.id === id) {
return panel;
}
} }
} }
return null; return null;
...@@ -303,7 +312,7 @@ export class DashboardModel { ...@@ -303,7 +312,7 @@ export class DashboardModel {
var i, j, k; var i, j, k;
var oldVersion = this.schemaVersion; var oldVersion = this.schemaVersion;
var panelUpgrades = []; var panelUpgrades = [];
this.schemaVersion = 14; this.schemaVersion = 15;
if (oldVersion === this.schemaVersion) { if (oldVersion === this.schemaVersion) {
return; return;
...@@ -612,6 +621,11 @@ export class DashboardModel { ...@@ -612,6 +621,11 @@ export class DashboardModel {
this.graphTooltip = old.sharedCrosshair ? 1 : 0; this.graphTooltip = old.sharedCrosshair ? 1 : 0;
} }
if (oldVersion < 15) {
this.upgradeToGridLayout();
console.log(this.panels);
}
if (panelUpgrades.length === 0) { if (panelUpgrades.length === 0) {
return; return;
} }
...@@ -625,5 +639,33 @@ export class DashboardModel { ...@@ -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'; ...@@ -6,6 +6,7 @@ import angular from 'angular';
import $ from 'jquery'; import $ from 'jquery';
import {profiler} from 'app/core/profiler'; import {profiler} from 'app/core/profiler';
import Remarkable from 'remarkable'; import Remarkable from 'remarkable';
import {CELL_HEIGHT, CELL_VMARGIN} from '../dashboard/model';
const TITLE_HEIGHT = 25; const TITLE_HEIGHT = 25;
const EMPTY_TITLE_HEIGHT = 9; const EMPTY_TITLE_HEIGHT = 9;
...@@ -171,8 +172,10 @@ export class PanelCtrl { ...@@ -171,8 +172,10 @@ export class PanelCtrl {
// this.containerHeight = parseInt(this.containerHeight.replace('px', ''), 10); // this.containerHeight = parseInt(this.containerHeight.replace('px', ''), 10);
// } // }
// } // }
const rowSpan = this.panel.height || 4; if (this.panel.id === 4) {
this.containerHeight = rowSpan * 60 + ((rowSpan-1) * 20); 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)); this.height = this.containerHeight - (PANEL_BORDER + PANEL_PADDING + (this.panel.title ? TITLE_HEIGHT : EMPTY_TITLE_HEIGHT));
} }
......
public/sass/components/_gridstack.scss
:root .grid-stack-item > .ui-resizable-handle { .grid-stack-item > .ui-resizable-handle {
filter: none; filter: none;
} }
...@@ -19,8 +19,8 @@ ...@@ -19,8 +19,8 @@
margin: 0; margin: 0;
position: absolute; position: absolute;
top: 0; top: 0;
left: 10px; left: 5px;
right: 10px; right: 5px;
bottom: 0; bottom: 0;
width: auto; width: auto;
z-index: 0 !important; z-index: 0 !important;
...@@ -37,8 +37,8 @@ ...@@ -37,8 +37,8 @@
margin: 0; margin: 0;
position: absolute; position: absolute;
top: 0; top: 0;
left: 10px; left: 7px;
right: 10px; right: 7px;
bottom: 0; bottom: 0;
width: auto; width: auto;
z-index: 0 !important; z-index: 0 !important;
...@@ -92,8 +92,8 @@ ...@@ -92,8 +92,8 @@
.grid-stack > .grid-stack-item > .ui-resizable-nw { .grid-stack > .grid-stack-item > .ui-resizable-nw {
cursor: nw-resize; cursor: nw-resize;
width: 20px; width: 16px;
height: 20px; height: 16px;
left: 10px; left: 10px;
top: 0; top: 0;
} }
...@@ -108,8 +108,8 @@ ...@@ -108,8 +108,8 @@
.grid-stack > .grid-stack-item > .ui-resizable-ne { .grid-stack > .grid-stack-item > .ui-resizable-ne {
cursor: ne-resize; cursor: ne-resize;
width: 20px; width: 16px;
height: 20px; height: 16px;
right: 10px; right: 10px;
top: 0; top: 0;
} }
...@@ -124,8 +124,8 @@ ...@@ -124,8 +124,8 @@
.grid-stack > .grid-stack-item > .ui-resizable-se { .grid-stack > .grid-stack-item > .ui-resizable-se {
cursor: se-resize; cursor: se-resize;
width: 20px; width: 16px;
height: 20px; height: 16px;
right: 10px; right: 10px;
bottom: 0; bottom: 0;
} }
...@@ -140,8 +140,8 @@ ...@@ -140,8 +140,8 @@
.grid-stack > .grid-stack-item > .ui-resizable-sw { .grid-stack > .grid-stack-item > .ui-resizable-sw {
cursor: sw-resize; cursor: sw-resize;
width: 20px; width: 16px;
height: 20px; height: 16px;
left: 10px; left: 10px;
bottom: 0; bottom: 0;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment