diff --git a/src/app/panels/stats/statsDirective.js b/src/app/panels/stats/statsDirective.js index f486445b73c..19d7e39b477 100644 --- a/src/app/panels/stats/statsDirective.js +++ b/src/app/panels/stats/statsDirective.js @@ -84,34 +84,8 @@ function (angular, app, _, kbn, $) { return '' + text + ''; } - function render() { - setElementHeight(); - + function addSparkline() { var panel = scope.panel; - var body = ''; - - body += '
'; - body += ''; - var valueHtml = panel.template.replace(valueRegex, valueTemplateReplaceFunc); - body += valueHtml.replace(smallValueTextRegex, smallValueTextReplaceFunc); - body += '
'; - body += ''; - - if (panel.colorBackground && data.mainValue) { - var color = getColorForValue(data.mainValue); - if (color) { - $panelContainer.css('background-color', color); - if (scope.fullscreen) { - elem.css('background-color', color); - } else { - elem.css('background-color', ''); - } - } - } else { - $panelContainer.css('background-color', ''); - elem.css('background-color', ''); - } - var width = elem.width() + 20; var height = elem.height() || 100; @@ -154,14 +128,48 @@ function (angular, app, _, kbn, $) { grid: { hoverable: false, show: false }, }; - elem.html(body); elem.append(plotCanvas); data.series[0].color = panel.sparkline.lineColor; setTimeout(function() { $.plot(plotCanvas, [data.series[0]], options); - }, 200); + }, 10); + } + + function render() { + setElementHeight(); + + var panel = scope.panel; + var body = ''; + + body += '
'; + body += ''; + var valueHtml = panel.template.replace(valueRegex, valueTemplateReplaceFunc); + body += valueHtml.replace(smallValueTextRegex, smallValueTextReplaceFunc); + body += '
'; + body += ''; + + if (panel.colorBackground && data.mainValue) { + var color = getColorForValue(data.mainValue); + if (color) { + $panelContainer.css('background-color', color); + if (scope.fullscreen) { + elem.css('background-color', color); + } else { + elem.css('background-color', ''); + } + } + } else { + $panelContainer.css('background-color', ''); + elem.css('background-color', ''); + } + + elem.html(body); + + if (panel.sparkline.show) { + addSparkline(); + } } } };