Singlestat: progress on singlestat panel

src/app/panels/graph/module.js

@@ -347,13 +347,6 @@ function (angular, app, $, _, kbn, moment, TimeSeries) {
       $scope.render();
     };
 
-    $scope.toggleEditorHelp = function(index) {
-      if ($scope.editorHelpIndex === index) {
-        $scope.editorHelpIndex = null;
-        return;
-      }
-      $scope.editorHelpIndex = index;
-    };
 
     panelSrv.init($scope);
   });

src/app/panels/stats/module.js

@@ -40,7 +40,9 @@ function (angular, app, _, TimeSeries, kbn) {
       targets: [{}],
       cacheTimeout: null,
       format: 'none',
-      template: '{{avg}} !(avg)',
+      prefix: '',
+      postfix: '',
+      valueName: 'avg',
       thresholds: '',
       colorBackground: false,
       colorValue: false,
@@ -103,7 +105,7 @@ function (angular, app, _, TimeSeries, kbn) {
         info: { alias: seriesData.target },
       });
 
-      series.data = series.getFlotPairs('connected');
+      series.flotpairs = series.getFlotPairs('connected');
 
       return series;
     };
@@ -128,15 +130,17 @@ function (angular, app, _, TimeSeries, kbn) {
     };
 
     $scope.render = function() {
-      var i, series;
-      var data = {
-        series: $scope.series,
-        stats: []
-      };
+      var data = {};
 
-      for (i = 0; i < data.series.length; i++) {
-        series = data.series[i];
+      if (!$scope.series || $scope.series.length === 0) {
+        data.series = { mainValue: null, datapoints: [] };
+      }
+      else {
+        var series = $scope.series[0];
         series.updateLegendValues(kbn.valueFormats[$scope.panel.format], 2, -7);
+        data.mainValue = series.stats[$scope.panel.valueName];
+        data.mainValueFormated = $scope.formatValue(data.mainValue);
+        data.flotpairs = series.flotpairs;
       }
 
       data.thresholds = $scope.panel.thresholds.split(',').map(function(strVale) {

src/app/panels/stats/statsDirective.js

@@ -18,15 +18,12 @@ function (angular, app, _, kbn, $) {
     return {
       link: function(scope, elem) {
         var data;
-        var valueRegex = /\{\{([a-zA-Z]+)\}\}/g;
-        var smallValueTextRegex = /!(\S+)/g;
         var $panelContainer = elem.parents('.panel-container');
 
         scope.$on('render', function() {
           data = scope.data;
-          data.mainValue = null;
 
-          if (!data || data.series.length === 0) {
+          if (!data || data.flotpairs.length === 0) {
             elem.html('no data');
             return;
           }
@@ -73,15 +70,8 @@ function (angular, app, _, kbn, $) {
           return null;
         }
 
-        function valueTemplateReplaceFunc(match, statType) {
-          var stats = data.series[0].stats;
-          data.mainValue = stats[statType];
-          var valueFormated = scope.formatValue(data.mainValue);
-          return applyColoringThresholds(data.mainValue, valueFormated);
-        }
-
-        function smallValueTextReplaceFunc(match, text) {
-          return '<span class="stats-panel-value-small">' + text + '</span>';
+        function getBigValueHtml() {
+          return applyColoringThresholds(data.mainValue, data.mainValueFormated);
         }
 
         function addSparkline() {
@@ -130,10 +120,13 @@ function (angular, app, _, kbn, $) {
 
           elem.append(plotCanvas);
 
-          data.series[0].color = panel.sparkline.lineColor;
+          var plotSeries = {
+            data: data.flotpairs,
+            color: panel.sparkline.lineColor
+          };
 
           setTimeout(function() {
-            $.plot(plotCanvas, [data.series[0]], options);
+            $.plot(plotCanvas, [plotSeries], options);
           }, 10);
         }
 
@@ -145,8 +138,7 @@ function (angular, app, _, kbn, $) {
 
           body += '<div class="stats-panel-value-container">';
           body += '<span class="stats-panel-value">';
-          var valueHtml = panel.template.replace(valueRegex, valueTemplateReplaceFunc);
-          body += valueHtml.replace(smallValueTextRegex, smallValueTextReplaceFunc);
+          body += getBigValueHtml();
           body += '</div>';
           body += '</div>';
 

src/app/panels/stats/statsEditor.html

@@ -1,9 +1,17 @@
 <div class="editor-row">
 	<div class="section">
-    <h5>Big values</h5>
+    <h5>Big value</h5>
 		<div class="editor-option">
-			<label class="small">Template</label>
-			<input type="text" class="input-xlarge" ng-model="panel.template" ng-blur="render()"></input>
+			<label class="small">Prefix</label>
+			<input type="text" class="input-medium" ng-model="panel.prefix" ng-blur="render()"></input>
+		</div>
+		<div class="editor-option">
+			<label class="small">Value</label>
+			<select class="input-small" ng-model="panel.valueName" ng-options="f for f in ['min','max','avg', 'current', 'total']" ng-change="render()"></select>
+		</div>
+		<div class="editor-option">
+			<label class="small">Postfix</label>
+			<input type="text" class="input-medium" ng-model="panel.prefix" ng-blur="render()"></input>
 		</div>
 	</div>
 	<div class="section">
@@ -39,6 +47,9 @@
 		<div class="editor-option">
 			<label class="small">Line color</label>
 			<spectrum-picker ng-model="panel.sparkline.lineColor" ng-change="render()" ></spectrum-picker>
+		</div>
+		<div class="editor-option">
+			<label class="small">Fill color</label>
 			<spectrum-picker ng-model="panel.sparkline.fillColor" ng-change="render()" ></spectrum-picker>
 		</div>
 	</div>

src/app/services/panelSrv.js

@@ -99,6 +99,14 @@ function (angular, _) {
         $scope.get_data();
       };
 
+      $scope.toggleEditorHelp = function(index) {
+        if ($scope.editorHelpIndex === index) {
+          $scope.editorHelpIndex = null;
+          return;
+        }
+        $scope.editorHelpIndex = index;
+      };
+
       $scope.toggleFullscreen = function(edit) {
         $scope.dashboardViewState.update({ fullscreen: true, edit: edit, panelId: $scope.panel.id });
       };