StatsPanel: small progress on stats panel

src/app/panels/stats/module.js

@@ -38,6 +38,10 @@ function (angular, app, _, TimeSeries, kbn) {
     var _d = {
       targets: [{}],
       cacheTimeout: null,
+      format: 'none',
+      avg: true,
+      stats: true,
+      table: true,
     };
 
     _.defaults($scope.panel, _d);
@@ -80,19 +84,7 @@ function (angular, app, _, TimeSeries, kbn) {
 
     $scope.dataHandler = function(results) {
       $scope.panelMeta.loading = false;
-      var data= {};
-      data.series = _.map(results.data, $scope.seriesHandler);
-      data.stats = [];
-
-      if (data.series.length > 0) {
-        var stat = {};
-        var firstSeries = data.series[0];
-        stat.value = $scope.formatValue(firstSeries.stats.avg);
-        stat.func = 'avg';
-        data.stats.push(stat);
-      }
-
-      $scope.data = data;
+      $scope.series = _.map(results.data, $scope.seriesHandler);
       $scope.render();
     };
 
@@ -119,6 +111,22 @@ function (angular, app, _, TimeSeries, kbn) {
     };
 
     $scope.render = function() {
+      var data = {
+        series: $scope.series,
+        stats: []
+      };
+
+      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' });
+      }
+
+      $scope.data = data;
       $scope.$emit('render');
     };
 
@@ -149,8 +157,10 @@ function (angular, app, _, TimeSeries, kbn) {
 
           if (scope.panel.stats) {
             body += '<div class="stats-panel-value-container">';
-            body += '<span class="stats-panel-value">' + data.stats[0].value + '</span>';
-            body += ' <span class="stats-panel-func">(' + data.stats[0].func + ')</span>';
+            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 += '</div>';
           }
 

src/app/panels/stats/statsEditor.html

@@ -2,8 +2,23 @@
   <div class="section">
     <h5>Main options</h5>
 		<editor-opt-bool text="Show table" model="panel.table" change="render()"></editor-opt-bool>
-		<editor-opt-bool text="Show values" model="panel.stats" change="render()"></editor-opt-bool>
+		<editor-opt-bool text="Show big values" model="panel.stats" change="render()"></editor-opt-bool>
   </div>
+  <div class="section" ng-if="panel.stats">
+    <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>
+	<div class="section">
+    <h5>Formats</h5>
+		<div class="editor-option">
+			<label class="small">Unit format</label>
+			<select class="input-small" ng-model="panel.format" ng-options="f for f in ['none','short','bytes', 'bits', 'bps', 's', 'ms', 'µs', 'ns', 'percent']" ng-change="render()"></select>
+		</div>
+	</div>
 </div>
 
 <div class="editor-row">
@@ -13,6 +28,10 @@
 			<div class="grafana-target-inner">
 				<ul class="grafana-segment-list">
 					<li class="grafana-target-segment">
+						<i class="icon-eye-open" ng-click="hideSeries(series)"></i>
+					</li>
+
+					<li class="grafana-target-segment">
 						{{series.info.alias}}
 					</li>
 

src/css/less/stats-panel.less

@@ -8,6 +8,10 @@
   font-weight: bold;
 }
 
+.stats-panel-value:not(:first-child) {
+  padding-left: 20px;
+}
+
 .stats-panel-func {
   font-size: 1.5em;
 }