Skip to content

N
nexpie-grafana-theme
Commit 8415ea6c by Torkel Ödegaard
Options

refactoring: changing how graph height and legend height is calculated, using… 

refactoring: changing how graph height and legend height is calculated, using flex box seems to actually work, #10079
parent c629a58b
Showing with 62 additions and 118 deletions
public/app/features/panel/panel_directive.ts
......@@ -20,7 +20,7 @@ var panelTemplate = `
</div>
<div class="panel-content">
<ng-transclude></ng-transclude>
<ng-transclude class="panel-height-helper"></ng-transclude>
</div>
</div>
......
public/app/plugins/panel/graph/graph.ts
......@@ -92,48 +92,11 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) {
}
}, scope);
function getLegendHeight(panelHeight) {
const LEGEND_PADDING = 23;
if (!panel.legend.show || panel.legend.rightSide) {
return 0;
}
let legendHeight = getLegendContainerHeight() + LEGEND_PADDING;
return Math.min(legendHeight, Math.floor(panelHeight/2));
}
function getLegendContainerHeight() {
try {
let graphWrapperElem = elem.parent().parent();
let legendElem = graphWrapperElem.find('.graph-legend-wrapper');
let legendHeight = legendElem.height();
return legendHeight;
} catch (e) {
console.log(e);
return 0;
}
}
function setElementHeight() {
try {
var height = ctrl.height - getLegendHeight(ctrl.height);
elem.css('height', height + 'px');
return true;
} catch (e) { // IE throws errors sometimes
console.log(e);
return false;
}
}
function shouldAbortRender() {
if (!data) {
return true;
}
if (!setElementHeight()) { return true; }
if (panelWidth === 0) {
return true;
}
......@@ -152,6 +115,10 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) {
$("<div class='axisLabel right-yaxis-label flot-temp-elem'></div>").text(panel.yaxes[1].label).appendTo(elem);
}
if (ctrl.dataWarning) {
$(`<div class="datapoints-warning flot-temp-elem">${ctrl.dataWarning.title}</div>`).appendTo(elem);
}
thresholdManager.draw(plot);
}
......
public/app/plugins/panel/graph/legend.ts
......@@ -10,7 +10,6 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
return {
link: function(scope, elem) {
var $container = $('<section class="graph-legend"></section>');
var firstRender = true;
var ctrl = scope.ctrl;
var panel = ctrl.panel;
......@@ -20,7 +19,9 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
var legendScrollbar;
scope.$on("$destroy", function() {
legendScrollbar.destroy();
if (!legendScrollbar) {
legendScrollbar.destroy();
}
});
ctrl.events.on('render-legend', () => {
......@@ -73,9 +74,9 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
var el = $(e.currentTarget);
var index = getSeriesIndexForElement(el);
var seriesInfo = seriesList[index];
var scrollPosition = $($container.children('tbody')).scrollTop();
var scrollPosition = $(elem.children('tbody')).scrollTop();
ctrl.toggleSeries(seriesInfo, e);
$($container.children('tbody')).scrollTop(scrollPosition);
$(elem.children('tbody')).scrollTop(scrollPosition);
}
function sortLegend(e) {
......@@ -117,22 +118,21 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
}
if (firstRender) {
elem.append($container);
$container.on('click', '.graph-legend-icon', openColorSelector);
$container.on('click', '.graph-legend-alias', toggleSeries);
$container.on('click', 'th', sortLegend);
elem.on('click', '.graph-legend-icon', openColorSelector);
elem.on('click', '.graph-legend-alias', toggleSeries);
elem.on('click', 'th', sortLegend);
firstRender = false;
}
seriesList = data;
$container.empty();
elem.empty();
// Set min-width if side style and there is a value, otherwise remove the CSS propery
var width = panel.legend.rightSide && panel.legend.sideWidth ? panel.legend.sideWidth + "px" : "";
$container.css("min-width", width);
elem.css("min-width", width);
$container.toggleClass('graph-legend-table', panel.legend.alignAsTable === true);
elem.toggleClass('graph-legend-table', panel.legend.alignAsTable === true);
var tableHeaderElem;
if (panel.legend.alignAsTable) {
......@@ -162,7 +162,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
if (!panel.legend.rightSide) {
renderLegendElement(tableHeaderElem);
updateLegendDecimals();
$container.empty();
elem.empty();
} else {
updateLegendDecimals();
}
......@@ -214,26 +214,17 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
var seriesElements = renderSeriesLegendElements();
if (panel.legend.alignAsTable) {
var maxHeight = ctrl.height;
if (!panel.legend.rightSide) {
maxHeight = maxHeight/2;
}
var topPadding = 6;
var tbodyElem = $('<tbody></tbody>');
tbodyElem.css("max-height", maxHeight - topPadding);
tbodyElem.append(tableHeaderElem);
tbodyElem.append(seriesElements);
$container.append(tbodyElem);
elem.append(tbodyElem);
} else {
var maxLegendHeight = ctrl.height / 2;
$container.css("max-height", maxLegendHeight - 6);
$container.append(seriesElements);
elem.append(seriesElements);
}
if (!legendScrollbar) {
legendScrollbar = new PerfectScrollbar($container[0]);
}
if (!legendScrollbar) {
legendScrollbar = new PerfectScrollbar(elem[0]);
} else {
legendScrollbar.update();
}
}
......
public/app/plugins/panel/graph/template.ts
var template = `
<div class="graph-wrapper" ng-class="{'graph-legend-rightside': ctrl.panel.legend.rightSide}">
<div class="graph-canvas-wrapper">
<div class="datapoints-warning" ng-if="ctrl.dataWarning">
<span class="small" bs-tooltip="ctrl.dataWarning.tip">{{ctrl.dataWarning.title}}</span>
</div>
<div grafana-graph class="histogram-chart" ng-dblclick="ctrl.zoomOut()">
</div>
<div class="graph-panel" ng-class="{'graph-panel--legend-right': ctrl.panel.legend.rightSide}">
<div class="graph-panel__chart" grafana-graph ng-dblclick="ctrl.zoomOut()">
</div>
<div class="graph-legend-wrapper" graph-legend></div>
</div>
<div class="clearfix"></div>
<div class="graph-legend" graph-legend></div>
</div>
`;
export default template;
public/sass/components/_panel_graph.scss
.graph-canvas-wrapper {
position: relative;
cursor: crosshair;
.graph-panel {
display: flex;
flex-direction: column;
height: 100%;
&--legend-right {
flex-direction: row;
// .graph-panel__chart {
// display: table-cell;
// width: 100%;
// position: relative;
// }
.graph-legend {
max-height: 100%;
position: relative;
left: 4px;
margin: 0 0 0 1rem;
}
.graph-legend-series {
display: block;
padding-left: 0px;
}
.graph-legend-table .graph-legend-series {
display: table-row;
}
}
}
.histogram-chart {
.graph-panel__chart {
position: relative;
cursor: crosshair;
flex-grow: 1;
}
.datapoints-warning {
......@@ -23,6 +52,8 @@
.graph-legend {
@include clearfix();
flex: 0 1 auto;
max-height: 30%;
margin: 0 $spacer;
text-align: center;
width: calc(100% - $spacer);
......@@ -161,39 +192,6 @@
}
}
.graph-legend-rightside {
&.graph-wrapper {
display: table;
width: 100%;
}
.graph-canvas-wrapper {
display: table-cell;
width: 100%;
position: relative;
}
.graph-legend-wrapper {
display: table-cell;
vertical-align: top;
position: relative;
left: 4px;
}
.graph-legend {
margin: 0 0 0 1rem;
}
.graph-legend-series {
display: block;
padding-left: 0px;
}
.graph-legend-table .graph-legend-series {
display: table-row;
}
}
.graph-legend-series-hidden {
.graph-legend-value,
......
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