public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix right side legend rendering in phantomjs

Browse Source
This commit is contained in:
Alexander Zobnin
2018-04-12 14:22:19 +03:00
parent cdcaaa5d03
commit 74c10515ad
2 changed files with 20 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/plugins/panel/graph/legend.ts
+4 -3
View File
@@ -16,6 +16,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
var i; var i;
var legendScrollbar; var legendScrollbar;
const legendRightDefaultWidth = 10; const legendRightDefaultWidth = 10;
let legendElem = elem.parent();
scope.$on('$destroy', function() { scope.$on('$destroy', function() {
destroyScrollbar(); destroyScrollbar();
@@ -110,7 +111,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
} }
function render() { function render() {
let legendWidth = elem.width(); let legendWidth = legendElem.width();
if (!ctrl.panel.legend.show) { if (!ctrl.panel.legend.show) {
elem.empty(); elem.empty();
firstRender = true; firstRender = true;
@@ -132,8 +133,8 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
// Set width so it works with IE11 // Set width so it works with IE11
var width: any = panel.legend.rightSide && panel.legend.sideWidth ? panel.legend.sideWidth + 'px' : ''; var width: any = panel.legend.rightSide && panel.legend.sideWidth ? panel.legend.sideWidth + 'px' : '';
var ieWidth: any = panel.legend.rightSide && panel.legend.sideWidth ? panel.legend.sideWidth - 1 + 'px' : ''; var ieWidth: any = panel.legend.rightSide && panel.legend.sideWidth ? panel.legend.sideWidth - 1 + 'px' : '';
elem.css('min-width', width); legendElem.css('min-width', width);
elem.css('width', ieWidth); legendElem.css('width', ieWidth);
elem.toggleClass('graph-legend-table', panel.legend.alignAsTable === true); elem.toggleClass('graph-legend-table', panel.legend.alignAsTable === true);
public/sass/components/_panel_graph.scss
+16
View File
@@ -7,6 +7,10 @@
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
flex-direction: row; flex-direction: row;
.graph-panel__chart {
flex: 2 1 10px;
}
.graph-legend { .graph-legend {
flex: 0 1 10px; flex: 0 1 10px;
max-height: 100%; max-height: 100%;
@@ -131,8 +135,20 @@
// fix for phantomjs // fix for phantomjs
.body--phantomjs { .body--phantomjs {
.graph-panel--legend-right { .graph-panel--legend-right {
.graph-legend {
display: inline-block;
}
.graph-panel__chart {
display: flex;
}
.graph-legend-table { .graph-legend-table {
display: table; display: table;
.graph-legend-scroll {
display: table;
}
} }
} }
} }