Commit 0c3e04ca by Alexander Zobnin

graph: render legend before graph

parent ae80a589
...@@ -53,18 +53,28 @@ function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) { ...@@ -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) { ...@@ -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) { ...@@ -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) { ...@@ -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() {
......
...@@ -18,11 +18,12 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { ...@@ -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) {
......
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