StatsPanel: made big values template based

src/app/panels/stats/module.js

@@ -39,12 +39,18 @@ function (angular, app, _, TimeSeries, kbn) {
       targets: [{}],
       targets: [{}],
       cacheTimeout: null,
       cacheTimeout: null,
       format: 'none',
       format: 'none',
-      avg: true,
-      stats: true,
-      table: true,
+      stats: {
+        show: true,
+        avg: true,
+        template: '{{value}} {{func}}'
+      },
+      table: {
+        show: true,
+      }
     };
     };
 
 
     _.defaults($scope.panel, _d);
     _.defaults($scope.panel, _d);
+    _.defaults($scope.panel.stats, _d.stats);
 
 
     $scope.init = function() {
     $scope.init = function() {
       panelSrv.init($scope);
       panelSrv.init($scope);
@@ -121,19 +127,6 @@ function (angular, app, _, TimeSeries, kbn) {
         series.updateLegendValues(kbn.valueFormats[$scope.panel.format], 2, -7);
         series.updateLegendValues(kbn.valueFormats[$scope.panel.format], 2, -7);
       }
       }
 
 
-      var main = data.series[0];
-
-      if ($scope.panel.avg) {
-        data.stats.push({ value: $scope.formatValue(main.stats.avg), func: 'avg' });
-      }
-      if ($scope.panel.total) {
-        data.stats.push({ value: $scope.formatValue(main.stats.total), func: 'total' });
-      }
-      if ($scope.panel.current) {
-        data.stats.push({ value: $scope.formatValue(main.stats.current), func: 'current' });
-      }
-
-
       $scope.data = data;
       $scope.data = data;
       $scope.$emit('render');
       $scope.$emit('render');
     };
     };
@@ -146,8 +139,9 @@ function (angular, app, _, TimeSeries, kbn) {
     return {
     return {
       link: function(scope, elem) {
       link: function(scope, elem) {
         var data;
         var data;
+        var valueRegex = /\{\{([a-zA-Z]+)\}\}/g;
+        var smallValueTextRegex = /!(\S+)/g;
 
 
-        console.log('asd');
         scope.$on('render', function() {
         scope.$on('render', function() {
           data = scope.data;
           data = scope.data;
 
 
@@ -159,20 +153,31 @@ function (angular, app, _, TimeSeries, kbn) {
           render();
           render();
         });
         });
 
 
+        function valueTemplateReplaceFunc(match, statType) {
+          var stats = data.series[0].stats;
+          var value = scope.formatValue(stats[statType]);
+          return value;
+        }
+
+        function smallValueTextReplaceFunc(match, text) {
+          return '<span class="stats-panel-value-small">' + text + '</span>';
+        }
+
         function render() {
         function render() {
+          var panel = scope.panel;
           var body = '';
           var body = '';
           var i, series;
           var i, series;
 
 
-          if (scope.panel.stats) {
+          if (panel.stats.show) {
             body += '<div class="stats-panel-value-container">';
             body += '<div class="stats-panel-value-container">';
-            for (i = 0; i < scope.data.stats.length; i++) {
-              body += '<span class="stats-panel-value">' + data.stats[i].value + '</span>';
-              body += ' <span class="stats-panel-func">(' + data.stats[i].func + ')</span>';
-            }
+            body += '<span class="stats-panel-value">';
+            var valueHtml = panel.stats.template.replace(valueRegex, valueTemplateReplaceFunc);
+            body += valueHtml.replace(smallValueTextRegex, smallValueTextReplaceFunc);
+            body += '</div>';
             body += '</div>';
             body += '</div>';
           }
           }
 
 
-          if (scope.panel.table) {
+          if (panel.table.show) {
             body += '<table class="stats-panel-table">';
             body += '<table class="stats-panel-table">';
             body += '<tr>';
             body += '<tr>';
             body += '<th></th><th>avg</th><th>min</th><th>max</th><th>current</th><th>total</th>';
             body += '<th></th><th>avg</th><th>min</th><th>max</th><th>current</th><th>total</th>';

src/app/panels/stats/statsEditor.html

 <div class="editor-row">
 <div class="editor-row">
   <div class="section">
   <div class="section">
     <h5>Main options</h5>
     <h5>Main options</h5>
-		<editor-opt-bool text="Show table" model="panel.table" change="render()"></editor-opt-bool>
-		<editor-opt-bool text="Show big values" model="panel.stats" change="render()"></editor-opt-bool>
+		<editor-opt-bool text="Show table" model="panel.table.show" change="render()"></editor-opt-bool>
+		<editor-opt-bool text="Show big values" model="panel.stats.show" change="render()"></editor-opt-bool>
   </div>
   </div>
   <div class="section" ng-if="panel.stats">
   <div class="section" ng-if="panel.stats">
     <h5>Big values</h5>
     <h5>Big values</h5>
-		<editor-opt-bool text="Avg" model="panel.avg" change="render()"></editor-opt-bool>
-		<editor-opt-bool text="Min" model="panel.min" change="render()"></editor-opt-bool>
-		<editor-opt-bool text="Max" model="panel.max" change="render()"></editor-opt-bool>
-		<editor-opt-bool text="Total" model="panel.total" change="render()"></editor-opt-bool>
-		<editor-opt-bool text="Current" model="panel.current" change="render()"></editor-opt-bool>
+		<div class="editor-option">
+			<label class="small">Template</label>
+			<input type="text" class="input-large" ng-model="panel.stats.template" ng-blur="render()"></input>
+		</div>
 	</div>
 	</div>
 	<div class="section">
 	<div class="section">
     <h5>Formats</h5>
     <h5>Formats</h5>

src/css/less/stats-panel.less

@@ -12,8 +12,8 @@
   padding-left: 20px;
   padding-left: 20px;
 }
 }
 
 
-.stats-panel-func {
-  font-size: 1.5em;
+.stats-panel-value-small {
+  font-size: 50%;
 }
 }
 
 
 .stats-panel-table {
 .stats-panel-table {