apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactoring: changing how graph height and legend height is calculated, using flex box seems to actually work, #10079

Browse Source
pull/10145/head
Torkel Ödegaard 8 years ago
parent c629a58b6d
commit 8415ea6c71
5 changed files with 62 additions and 118 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      public/app/features/panel/panel_directive.ts
  2. 41
      public/app/plugins/panel/graph/graph.ts
  3. 45
      public/app/plugins/panel/graph/legend.ts
  4. 20
      public/app/plugins/panel/graph/template.ts
  5. 72
      public/sass/components/_panel_graph.scss

2
public/app/features/panel/panel_directive.ts
Unescape View File

@ -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>

41
public/app/plugins/panel/graph/graph.ts
Unescape View File

@ -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);
}

45
public/app/plugins/panel/graph/legend.ts
Unescape View File

@ -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();
}
}

20
public/app/plugins/panel/graph/template.ts
Unescape View File

@ -1,22 +1,10 @@
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;

72
public/sass/components/_panel_graph.scss
Unescape View File

@ -1,10 +1,39 @@
.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,

Write Preview
Loading…
Cancel
Save