heatmap: able to hide buckets with zero value #12080

public/app/plugins/panel/heatmap/heatmap_ctrl.ts

@@ -55,6 +55,7 @@ const panelDefaults = {
     showHistogram: false,
   },
   highlightCards: true,
+  hideZeroBuckets: false,
 };
 
 const colorModes = ['opacity', 'spectrum'];
@@ -204,7 +205,7 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
       yBucketSize = 1;
     }
 
-    const { cards, cardStats } = convertToCards(bucketsData);
+    const { cards, cardStats } = convertToCards(bucketsData, this.panel.hideZeroBuckets);
 
     this.data = {
       buckets: bucketsData,
@@ -246,7 +247,7 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
     // Always let yBucketSize=1 in 'tsbuckets' mode
     yBucketSize = 1;
 
-    const { cards, cardStats } = convertToCards(bucketsData);
+    const { cards, cardStats } = convertToCards(bucketsData, this.panel.hideZeroBuckets);
 
     this.data = {
       buckets: bucketsData,

public/app/plugins/panel/heatmap/heatmap_data_converter.ts

@@ -93,25 +93,43 @@ function parseHistogramLabel(label: string): number {
   return value;
 }
 
+interface HeatmapCard {
+  x: number;
+  y: number;
+  yBounds: {
+    top: number | null;
+    bottom: number | null;
+  };
+  values: number[];
+  count: number;
+}
+
+interface HeatmapCardStats {
+  min: number;
+  max: number;
+}
+
 /**
  * Convert buckets into linear array of "cards" - objects, represented heatmap elements.
  * @param  {Object} buckets
- * @return {Array}          Array of "card" objects
+ * @return {Object}          Array of "card" objects and stats
  */
-function convertToCards(buckets) {
+function convertToCards(buckets: any, hideZero = false): { cards: HeatmapCard[]; cardStats: HeatmapCardStats } {
   let min = 0,
     max = 0;
-  const cards = [];
+  const cards: HeatmapCard[] = [];
   _.forEach(buckets, xBucket => {
     _.forEach(xBucket.buckets, yBucket => {
-      const card = {
+      const card: HeatmapCard = {
         x: xBucket.x,
         y: yBucket.y,
         yBounds: yBucket.bounds,
         values: yBucket.values,
         count: yBucket.count,
       };
-      cards.push(card);
+      if (!hideZero || card.count !== 0) {
+        cards.push(card);
+      }
 
       if (cards.length === 1) {
         min = yBucket.count;

public/app/plugins/panel/heatmap/partials/display_editor.html

@@ -63,6 +63,10 @@
 
   <div class="section gf-form-group">
     <h5 class="section-heading">Buckets</h5>
+    <gf-form-switch class="gf-form" label-class="width-8"
+      label="Hide zero"
+      checked="ctrl.panel.hideZeroBuckets" on-change="ctrl.render()">
+    </gf-form-switch>
     <div class="gf-form">
       <label class="gf-form-label width-8">Space</label>
       <input type="number" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="''" ng-model="ctrl.panel.cards.cardPadding" ng-change="ctrl.refresh()" ng-model-onblur>