Metric vis should display a ? or 0 for empty sets

src/plugins/metric_vis/public/metric_vis.html

@@ -1,6 +1,6 @@
 <div ng-controller="KbnMetricVisController" class="metric-vis">
-    <div class="metric-container" ng-repeat="metric in metrics">
-        <div class="metric-value" ng-style="{'font-size': vis.params.fontSize+'pt'}">{{metric.value}}</div>
-        <div>{{metric.label}}</div>
-    </div>
+  <div class="metric-container" ng-repeat="metric in metrics">
+      <div class="metric-value" ng-style="{'font-size': vis.params.fontSize+'pt'}">{{metric.value}}</div>
+      <div>{{metric.label}}</div>
+  </div>
 </div>

src/plugins/metric_vis/public/metric_vis.js

@@ -23,6 +23,7 @@ define(function (require) {
       template: require('plugins/metric_vis/metric_vis.html'),
       params: {
         defaults: {
+          handleNoResults: true,
           fontSize: 60
         },
         editor: require('plugins/metric_vis/metric_vis_params.html')

src/plugins/metric_vis/public/metric_vis_controller.js

@@ -1,4 +1,5 @@
 define(function (require) {
+  var _ = require('lodash');
   // get the kibana/metric_vis module, and make sure that it requires the "kibana" module if it
   // didn't already
   var module = require('ui/modules').get('kibana/metric_vis', ['kibana']);
@@ -8,13 +9,21 @@ define(function (require) {
 
     var metrics = $scope.metrics = [];
 
+    function isInvalid(val) {
+      return _.isUndefined(val) || _.isNull(val) || _.isNaN(val);
+    }
+
     $scope.processTableGroups = function (tableGroups) {
       tableGroups.tables.forEach(function (table) {
         table.columns.forEach(function (column, i) {
           var fieldFormatter = table.aggConfig(column).fieldFormatter();
+          var value = table.rows[0][i];
+
+          value = isInvalid(value) ? '?' : fieldFormatter(value);
+
           metrics.push({
             label: column.title,
-            value: fieldFormatter(table.rows[0][i])
+            value: value
           });
         });
       });

src/ui/public/agg_types/metrics/MetricAggType.js

@@ -19,10 +19,17 @@ define(function (require) {
     /**
      * Read the values for this metric from the
      * @param  {[type]} bucket [description]
-     * @return {[type]}        [description]
+     * @return {*}        [description]
      */
     MetricAggType.prototype.getValue = function (agg, bucket) {
-      return bucket[agg.id].value;
+      // Metric types where an empty set equals `zero`
+      var isSettableToZero = ['cardinality', 'sum'].indexOf(agg.__type.name) !== -1;
+
+      // Return proper values when no buckets are present
+      // `Count` handles empty sets properly
+      if (!bucket[agg.id] && isSettableToZero) return 0;
+
+      return bucket[agg.id] && bucket[agg.id].value;
     };
 
     /**

src/ui/public/agg_types/metrics/percentile_ranks.js

@@ -49,7 +49,7 @@ define(function (require) {
       getValue: function (agg, bucket) {
         // values for 1, 5, and 10 will come back as 1.0, 5.0, and 10.0 so we
         // parse the keys and respond with the value that matches
-        return _.find(bucket[agg.parentId].values, function (value, key) {
+        return _.find(bucket[agg.parentId] && bucket[agg.parentId].values, function (value, key) {
           return agg.key === parseFloat(key);
         }) / 100;
       }

src/ui/public/agg_types/metrics/percentiles.js

@@ -44,7 +44,7 @@ define(function (require) {
       getValue: function (agg, bucket) {
         // percentiles for 1, 5, and 10 will come back as 1.0, 5.0, and 10.0 so we
         // parse the keys and respond with the value that matches
-        return _.find(bucket[agg.parentId].values, function (value, key) {
+        return _.find(bucket[agg.parentId] && bucket[agg.parentId].values, function (value, key) {
           return agg.key === parseFloat(key);
         });
       }

src/ui/public/visualize/visualize.html

@@ -1,16 +1,12 @@
-<div
-  ng-if="vis.type.requiresSearch && esResp.hits.total === 0"
-  class="text-center visualize-error visualize-chart">
+<div ng-if="showNoResultsMessage()" class="text-center visualize-error visualize-chart">
   <div class="item top"></div>
   <div class="item">
     <h2 aria-hidden="true"><i aria-hidden="true" class="fa fa-meh-o"></i></h2>
     <h4>No results found</h4>
   </div>
   <div class="item bottom"></div>
 </div>
-<div
-  ng-hide="vis.type.requiresSearch && esResp.hits.total === 0"
-  class="vis-container">
+<div div ng-hide="showNoResultsMessage()" class="vis-container">
   <div
     ng-style="loadingStyle"
     ng-class="{ loading: vis.type.requiresSearch && searchSource.activeFetchCount > 0 }"

src/ui/public/visualize/visualize.js

@@ -44,6 +44,19 @@ define(function (require) {
         var getVisEl = getter('.visualize-chart');
         var getVisContainer = getter('.vis-container');
 
+        // Show no results message when hasZeroHits is true and it requires search
+        $scope.showNoResultsMessage = function () {
+          var requiresSearch = _.get($scope, 'vis.type.requiresSearch');
+          var isZeroHits = _.get($scope,'esResp.hits.total') === 0;
+          var shouldNotShowMessage = _.get($scope, 'vis.params.handleNoResults');
+
+          if (requiresSearch && isZeroHits) {
+            // if the vis type handles instances when there are no results,
+            // do not show a no results message
+            return shouldNotShowMessage ? false : true;
+          }
+        };
+
         $scope.fullScreenSpy = false;
         $scope.spy = {};
         $scope.spy.mode = ($scope.uiState) ? $scope.uiState.get('spy.mode', {}) : {};