IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

graph: render legend before graph

Browse Source
This commit is contained in:
Alexander Zobnin 2017-12-06 14:08:15 +03:00
parent ae80a589c1
commit 0c3e04ca60
2 changed files with 27 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -53,18 +53,28 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) {
} }
}); });
ctrl.events.on('render', function(renderData) { /**
* Split graph rendering into two parts.
* First, calculate series stats in buildFlotPairs() function. Then legend rendering started
* (see ctrl.events.on('render') in legend.ts).
* When legend is rendered it emits 'legend-rendering-complete' and graph rendered.
*/
ctrl.events.on('render', (renderData) => {
data = renderData || data; data = renderData || data;
if (!data) { if (!data) {
return; return;
} }
annotations = ctrl.annotations || []; annotations = ctrl.annotations || [];
buildFlotPairs(data); buildFlotPairs(data);
ctrl.events.emit('render-legend');
});
ctrl.events.on('legend-rendering-complete', () => {
render_panel(); render_panel();
}); });
// global events // global events
appEvents.on('graph-hover', function(evt) { appEvents.on('graph-hover', (evt) => {
// ignore other graph hover events if shared tooltip is disabled // ignore other graph hover events if shared tooltip is disabled
if (!dashboard.sharedTooltipModeEnabled()) { if (!dashboard.sharedTooltipModeEnabled()) {
return; return;
@ -78,7 +88,7 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) {
tooltip.show(evt.pos); tooltip.show(evt.pos);
}, scope); }, scope);
appEvents.on('graph-hover-clear', function(event, info) { appEvents.on('graph-hover-clear', (event, info) => {
if (plot) { if (plot) {
tooltip.clear(plot); tooltip.clear(plot);
} }
@ -86,9 +96,7 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) {
function getLegendHeight(panelHeight) { function getLegendHeight(panelHeight) {
const LEGEND_TABLE_LINE_HEIGHT = 21; const LEGEND_TABLE_LINE_HEIGHT = 21;
const LEGEND_LINE_HEIGHT = 17;
const LEGEND_PADDING = 23; const LEGEND_PADDING = 23;
const LEGEND_CHAR_WIDTH = 5;
if (!panel.legend.show || panel.legend.rightSide) { if (!panel.legend.show || panel.legend.rightSide) {
return 0; return 0;
@ -102,25 +110,22 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) {
let total = LEGEND_PADDING + (LEGEND_TABLE_LINE_HEIGHT * legendSeries.length); let total = LEGEND_PADDING + (LEGEND_TABLE_LINE_HEIGHT * legendSeries.length);
return Math.min(total, Math.floor(panelHeight/2)); return Math.min(total, Math.floor(panelHeight/2));
} else { } else {
let linesCount = getLegendBoxHeight(legendSeries, panelWidth, LEGEND_CHAR_WIDTH); let legendHeight = getLegendContainerHeight();
let total = LEGEND_PADDING + (LEGEND_LINE_HEIGHT * linesCount); let total = LEGEND_PADDING + (legendHeight);
return Math.min(total, Math.floor(panelHeight/2)); return Math.min(total, Math.floor(panelHeight/2));
} }
} }
function getLegendBoxHeight(legendSeries, legendWidth, charWidth) { function getLegendContainerHeight() {
let linesCount = 1; try {
let currentLineLength = 0; let graphWrapperElem = elem.parent().parent();
let legendWidthChars = Math.floor(legendWidth / charWidth); let legendElem = graphWrapperElem.find('.graph-legend-wrapper');
_.each(legendSeries, (series) => { let legendHeight = legendElem.height();
let nextLength = series.aliasEscaped.length + 4; return legendHeight;
currentLineLength += nextLength; } catch (e) {
if (currentLineLength > legendWidthChars) { console.log(e);
linesCount++; return 0;
currentLineLength = nextLength; }
}
});
return linesCount;
} }
function setElementHeight() { function setElementHeight() {

3
public/app/plugins/panel/graph/legend.ts
View File

@ -18,11 +18,12 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
var i; var i;
var legendScrollbar; var legendScrollbar;
ctrl.events.on('render', function() { ctrl.events.on('render-legend', () => {
data = ctrl.seriesList; data = ctrl.seriesList;
if (data) { if (data) {
render(); render();
} }
ctrl.events.emit('legend-rendering-complete');
}); });
function getSeriesIndexForElement(el) { function getSeriesIndexForElement(el) {