IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-09 23:53:25 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fix phantomjs legend rendering issue, #10526

Browse Source
This commit is contained in:
Alexander Zobnin 2018-02-15 12:56:57 +03:00
parent 1a041a2250
commit b4c51f8822
1 changed files with 18 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -234,6 +234,24 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
elem.append(seriesElements);
}
// Phantomjs has rendering issue for CSS float property, so when legend values are present, legend takes
// all graph width and rendering fails. So it should be handled to avoid rendering timeout.
// See issue #10526 https://github.com/grafana/grafana/issues/10526
if (panel.legend.rightSide) {
const legendWidth = elem.parent().width();
const panelWidth = elem.parent().width();
let maxLegendElementWidth = _.max(_.map(seriesElements, el => $(el).width()));
maxLegendElementWidth = _.isNumber(maxLegendElementWidth) ? maxLegendElementWidth : 0;
const widthDiff = Math.abs(panelWidth - maxLegendElementWidth);
// Set width to content size, but table takes all space anyway, so width shouldn't be more
// than 40% of panel in this case.
if (widthDiff < panelWidth * 0.1 || legendWidth > panelWidth * 0.9) {
const maxTableWidthPercent = 0.4;
const maxWidth = Math.min(Math.ceil(maxLegendElementWidth * 1.05), panelWidth * maxTableWidthPercent);
elem.css('max-width', maxWidth);
}
}
if (!panel.legend.rightSide) {
addScrollbar();
} else {