mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
work on scrollable panels
This commit is contained in:
parent
18ca7a53aa
commit
68bd17bd0e
@ -45,16 +45,24 @@ export class PanelCtrl {
|
||||
}
|
||||
|
||||
$scope.$on("refresh", () => this.refresh());
|
||||
$scope.$on("component-did-mount", () => this.panelDidMount());
|
||||
|
||||
$scope.$on("$destroy", () => {
|
||||
this.events.emit('panel-teardown');
|
||||
this.events.removeAllListeners();
|
||||
});
|
||||
|
||||
this.calculatePanelHeight();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.events.on('panel-size-changed', this.onSizeChanged.bind(this));
|
||||
this.publishAppEvent('panel-initialized', {scope: this.$scope});
|
||||
this.events.emit('panel-initialized');
|
||||
this.publishAppEvent('panel-initialized', {scope: this.$scope});
|
||||
}
|
||||
|
||||
panelDidMount() {
|
||||
this.events.emit('component-did-mount');
|
||||
}
|
||||
|
||||
renderingCompleted() {
|
||||
@ -62,7 +70,6 @@ export class PanelCtrl {
|
||||
}
|
||||
|
||||
refresh() {
|
||||
this.setPanelHeight();
|
||||
this.events.emit('refresh', null);
|
||||
}
|
||||
|
||||
@ -171,14 +178,14 @@ export class PanelCtrl {
|
||||
}
|
||||
|
||||
setPanelHeight() {
|
||||
if (this.$scope.setPanelHeight) {
|
||||
this.$scope.setPanelHeight();
|
||||
}
|
||||
// console.log('setPanelHeight');
|
||||
// if (this.$scope.setPanelHeight) {
|
||||
// this.$scope.setPanelHeight();
|
||||
// }
|
||||
}
|
||||
|
||||
render(payload?) {
|
||||
this.timing.renderStart = new Date().getTime();
|
||||
this.setPanelHeight();
|
||||
this.events.emit('render', payload);
|
||||
}
|
||||
|
||||
|
@ -73,7 +73,7 @@ module.directive('grafanaPanel', function($rootScope, $document) {
|
||||
var lastHasAlertRule = false;
|
||||
var lastAlertState;
|
||||
var hasAlertRule;
|
||||
// var lastHeight = 0;
|
||||
var lastHeight = 0;
|
||||
|
||||
function mouseEnter() {
|
||||
panelContainer.toggleClass('panel-hover-highlight', true);
|
||||
@ -85,28 +85,11 @@ module.directive('grafanaPanel', function($rootScope, $document) {
|
||||
ctrl.dashboard.setPanelFocus(0);
|
||||
}
|
||||
|
||||
// set initial height
|
||||
if (!ctrl.height) {
|
||||
ctrl.calculatePanelHeight();
|
||||
if (ctrl.__proto__.constructor.scrollable) {
|
||||
panelContent.addClass('panel-content--scrollable');
|
||||
|
||||
panelScrollbar = new GeminiScrollbar({
|
||||
autoshow: false,
|
||||
element: panelContent[0]
|
||||
}).create();
|
||||
}
|
||||
}
|
||||
|
||||
function setPanelHeight() {
|
||||
panelContent.height(ctrl.height);
|
||||
function panelHeightUpdated() {
|
||||
if (panelScrollbar) {
|
||||
panelScrollbar.update();
|
||||
}
|
||||
}
|
||||
|
||||
if (ctrl.__proto__.constructor.scrollable) {
|
||||
ctrl.$scope.setPanelHeight = setPanelHeight;
|
||||
lastHeight = ctrl.height;
|
||||
}
|
||||
|
||||
// set initial transparency
|
||||
@ -115,11 +98,20 @@ module.directive('grafanaPanel', function($rootScope, $document) {
|
||||
panelContainer.addClass('panel-transparent', true);
|
||||
}
|
||||
|
||||
if (ctrl.__proto__.constructor.scrollable) {
|
||||
panelContent.addClass('panel-content--scrollable');
|
||||
panelScrollbar = new GeminiScrollbar({ autoshow: false, element: panelContent[0] }).create();
|
||||
}
|
||||
|
||||
// update scrollbar after mounting
|
||||
ctrl.events.on('component-did-mount', () => {
|
||||
panelHeightUpdated();
|
||||
});
|
||||
|
||||
ctrl.events.on('render', () => {
|
||||
// if (lastHeight !== ctrl.height) {
|
||||
// panelContent.css({'height': ctrl.height + 'px'});
|
||||
// lastHeight = ctrl.height;
|
||||
// }
|
||||
if (lastHeight !== ctrl.height) {
|
||||
panelHeightUpdated();
|
||||
}
|
||||
|
||||
if (transparentLastState !== ctrl.panel.transparent) {
|
||||
panelContainer.toggleClass('panel-transparent', ctrl.panel.transparent === true);
|
||||
|
@ -221,6 +221,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
|
||||
setTimeout(function() {
|
||||
elem.append(child);
|
||||
scope.$applyAsync(function() {
|
||||
scope.$broadcast('component-did-mount');
|
||||
scope.$broadcast('refresh');
|
||||
});
|
||||
});
|
||||
|
@ -1,5 +1,3 @@
|
||||
///<reference path="../../../headers/common.d.ts" />
|
||||
|
||||
import _ from 'lodash';
|
||||
import {PanelCtrl} from 'app/plugins/sdk';
|
||||
import {impressions} from 'app/features/dashboard/impression_store';
|
||||
|
@ -1,10 +1,9 @@
|
||||
///<reference path="../../../headers/common.d.ts" />
|
||||
|
||||
import _ from 'lodash';
|
||||
import {PanelCtrl} from '../../../features/panel/panel_ctrl';
|
||||
|
||||
class PluginListCtrl extends PanelCtrl {
|
||||
static templateUrl = 'module.html';
|
||||
static scrollable = true;
|
||||
|
||||
pluginList: any[];
|
||||
viewModel: any;
|
||||
@ -15,6 +14,7 @@ class PluginListCtrl extends PanelCtrl {
|
||||
/** @ngInject */
|
||||
constructor($scope, $injector, private backendSrv, private $location) {
|
||||
super($scope, $injector);
|
||||
|
||||
_.defaults(this.panel, this.panelDefaults);
|
||||
|
||||
this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
|
||||
|
@ -395,11 +395,6 @@ class SingleStatCtrl extends MetricsPanelCtrl {
|
||||
var data, linkInfo;
|
||||
var $panelContainer = elem.find('.panel-container');
|
||||
elem = elem.find('.singlestat-panel');
|
||||
console.log('singlestat element', elem.length);
|
||||
|
||||
function setElementHeight() {
|
||||
/// elem.css('height', ctrl.height + 'px');
|
||||
}
|
||||
|
||||
function applyColoringThresholds(value, valueString) {
|
||||
if (!panel.colorValue) {
|
||||
@ -561,8 +556,6 @@ class SingleStatCtrl extends MetricsPanelCtrl {
|
||||
plotCss.height = Math.floor(height * 0.25) + "px";
|
||||
}
|
||||
|
||||
console.log('singlestat height', ctrl.height);
|
||||
console.log('singlestat plotCss', plotCss.height);
|
||||
plotCanvas.css(plotCss);
|
||||
|
||||
var options = {
|
||||
@ -607,8 +600,6 @@ class SingleStatCtrl extends MetricsPanelCtrl {
|
||||
});
|
||||
data.colorMap = panel.colors;
|
||||
|
||||
setElementHeight();
|
||||
|
||||
var body = panel.gauge.show ? '' : getBigValueHtml();
|
||||
|
||||
if (panel.colorBackground) {
|
||||
|
BIN
public/img/tgr288gear_line6.pdf
Normal file
BIN
public/img/tgr288gear_line6.pdf
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user