diff --git a/public/app/plugins/panel/graph/graph.js b/public/app/plugins/panel/graph/graph.js index 86ad3b5f025..3097bc6eac6 100755 --- a/public/app/plugins/panel/graph/graph.js +++ b/public/app/plugins/panel/graph/graph.js @@ -31,6 +31,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) { var sortedSeries; var legendSideLastValue = null; var rootScope = scope.$root; + var panelWidth = 0; rootScope.onAppEvent('setCrosshair', function(event, info) { // do not need to to this if event is from this panel @@ -104,11 +105,28 @@ function (angular, $, moment, _, kbn, GraphTooltip) { return true; } - if (elem.width() === 0) { + if (panelWidth === 0) { return true; } } + function getLabelWidth(type, text, elem) { + var labelWidth = 0; + if (!rootScope.labelWidthCache) { + rootScope.labelWidthCache = {}; + } + if (!rootScope.labelWidthCache[type]) { + rootScope.labelWidthCache[type] = {}; + } + if (rootScope.labelWidthCache[type][text]) { + labelWidth = rootScope.labelWidthCache[type][text]; + } else { + labelWidth = elem.width(); + rootScope.labelWidthCache[type][text] = labelWidth; + } + return labelWidth; + } + function drawHook(plot) { // Update legend values var yaxis = plot.getYAxes(); @@ -137,7 +155,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) { .text(panel.yaxes[0].label) .appendTo(elem); - yaxisLabel.css("margin-top", yaxisLabel.width() / 2); + yaxisLabel[0].style.marginTop = (getLabelWidth('left', panel.yaxes[0].label, yaxisLabel) / 2) + 'px'; } // add right axis labels @@ -146,7 +164,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) { .text(panel.yaxes[1].label) .appendTo(elem); - rightLabel.css("margin-top", rightLabel.width() / 2); + rightLabel[0].style.marginTop = (getLabelWidth('right', panel.yaxes[1].label, rightLabel) / 2) + 'px'; } } @@ -159,6 +177,16 @@ function (angular, $, moment, _, kbn, GraphTooltip) { // Function for rendering panel function render_panel() { + if (!rootScope.panelWidthCache) { + rootScope.panelWidthCache = {}; + } + if (rootScope.panelWidthCache[panel.span]) { + panelWidth = rootScope.panelWidthCache[panel.span]; + } else { + panelWidth = elem.width(); + rootScope.panelWidthCache[panel.span] = panelWidth; + } + if (shouldAbortRender()) { return; } @@ -276,7 +304,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) { } function addTimeAxis(options) { - var ticks = elem.width() / 100; + var ticks = panelWidth / 100; var min = _.isUndefined(ctrl.range.from) ? null : ctrl.range.from.valueOf(); var max = _.isUndefined(ctrl.range.to) ? null : ctrl.range.to.valueOf(); @@ -444,7 +472,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) { } function render_panel_as_graphite_png(url) { - url += '&width=' + elem.width(); + url += '&width=' + panelWidth; url += '&height=' + elem.css('height').replace('px', ''); url += '&bgcolor=1f1f1f'; // @grayDarker & @grafanaPanelBackground url += '&fgcolor=BBBFC2'; // @textColor & @grayLighter