heatmap: refactoring

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

@@ -8,7 +8,6 @@ export class AxesEditorCtrl {
   unitFormats: any;
   logScales: any;
   dataFormats: any;
-  yBucketModes: any[];
 
   /** @ngInject */
   constructor($scope, uiSegmentSrv) {
@@ -29,11 +28,6 @@ export class AxesEditorCtrl {
       'Time series': 'timeseries',
       'Time series Pre-bucketed': 'tsbuckets'
     };
-
-    this.yBucketModes =  [
-      {text: 'Count',  value: 'count'},
-      {text: 'Interval', value: 'interval'},
-    ];
   }
 
   setUnitFormat(subItem) {

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

@@ -30,7 +30,11 @@ let panelDefaults = {
   dataFormat: 'timeseries',
   xAxis: {
     show: true,
-    buckets: 'auto',
+    buckets: {
+      mode: 'count',
+      count: null,
+      size: null,
+    },
   },
   yAxis: {
     show: true,
@@ -40,7 +44,11 @@ let panelDefaults = {
     splitFactor: null,
     min: null,
     max: null,
-    buckets: 'auto',
+    buckets: {
+      mode: 'count',
+      count: null,
+      size: null,
+    },
     removeZeroValues: false
   },
   tooltip: {

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

@@ -4,9 +4,9 @@
     <div class="gf-form">
       <label class="gf-form-label width-6">Unit</label>
       <div class="gf-form-dropdown-typeahead max-width-10"
-        ng-model="ctrl.panel.yAxis.format"
-        dropdown-typeahead2="editor.unitFormats"
-        dropdown-typeahead-on-select="editor.setUnitFormat($subItem)">
+           ng-model="ctrl.panel.yAxis.format"
+           dropdown-typeahead2="editor.unitFormats"
+           dropdown-typeahead-on-select="editor.setUnitFormat($subItem)">
       </div>
     </div>
     <div class="gf-form">
@@ -26,54 +26,66 @@
     <div class="gf-form">
       <label class="gf-form-label width-6">Decimals</label>
       <input type="number" class="gf-form-input width-10" placeholder="auto" data-placement="right"
-        bs-tooltip="'Override automatic decimal precision for axis.'"
-        ng-model="ctrl.panel.yAxis.decimals" ng-change="ctrl.render()" ng-model-onblur>
+                                                                             bs-tooltip="'Override automatic decimal precision for axis.'"
+                                                                             ng-model="ctrl.panel.yAxis.decimals" ng-change="ctrl.render()" ng-model-onblur>
     </div>
+  </div>
+
+  <div class="section gf-form-group" ng-if="ctrl.panel.dataFormat == 'timeseries'">
+    <h5 class="section-heading">Buckets</h5>
     <div ng-show="ctrl.panel.yAxis.logBase === 1">
       <div class="gf-form-inline">
         <div class="gf-form">
-          <label class="gf-form-label width-6">Bucket</label>
-          <div class="gf-form-select-wrapper width-7">
-            <select class="input-small gf-form-input" ng-model="ctrl.panel.yAxis.bucketMode" ng-options="f.value as f.text for f in editor.yBucketModes" ng-change="ctrl.render()"></select>
-          </div>
-          <input type="number"
-                 class="gf-form-input width-5"
-                 placeholder="auto"
-                 ng-model="ctrl.panel.yAxis.bucketCount"
-                 ng-change="ctrl.render()"
-                 ng-model-onblur>
-          </input>
-          <info-popover mode="right-normal">Number of buckets for Y axis</info-popover>
+          <label class="gf-form-label">Y Axis</label>
+          <label class="gf-form-label">Buckets</label>
+          <input type="number" class="gf-form-input width-5" placeholder="auto" data-placement="right"
+                                                                                bs-tooltip="'Number of buckets for Y axis.'"
+                                                                                ng-model="ctrl.panel.yBucketNumber" ng-change="ctrl.refresh()" ng-model-onblur>
+        </div>
+        <div class="gf-form">
+          <label class="gf-form-label">Size</label>
+          <input type="number" class="gf-form-input width-5" placeholder="auto" data-placement="right"
+                                                                                bs-tooltip="'Size of bucket. Has priority over Buckets option.'"
+                                                                                ng-model="ctrl.panel.yBucketSize" ng-change="ctrl.refresh()" ng-model-onblur>
+        </div>
+      </div>
+      <div class="gf-form-inline">
+        <div class="gf-form">
+          <label class="gf-form-label">X Axis</label>
+          <label class="gf-form-label">Buckets</label>
+          <input type="number" class="gf-form-input width-5" placeholder="auto" data-placement="right"
+                                                                                bs-tooltip="'Number of buckets for Y axis.'"
+                                                                                ng-model="ctrl.panel.yBucketNumber" ng-change="ctrl.refresh()" ng-model-onblur>
+        </div>
+        <div class="gf-form">
+          <label class="gf-form-label">Size</label>
+          <input type="text" class="gf-form-input width-5" placeholder="auto" data-placement="right"
+                                                                              bs-tooltip="'Size of bucket. Number or interval (10s, 5m, 1h, etc). Supported intervals: ms, s, m, h, d, w, M, y. Has priority over Buckets option.'"
+                                                                              ng-model="ctrl.panel.xBucketSize" ng-change="ctrl.refresh()" ng-model-onblur>
         </div>
       </div>
     </div>
     <div ng-show="ctrl.panel.yAxis.logBase !== 1">
       <div class="gf-form">
-        <label class="gf-form-label width-7">Split Buckets</label>
-        <input type="number" class="gf-form-input width-10" placeholder="1" data-placement="right"
-          bs-tooltip="'For log scales only. By default Y values is splitted by integer powers of log base (1, 2, 4, 8, 16, ... for log2). This option allows to split each default bucket into specified number of buckets.'"
-          ng-model="ctrl.panel.yAxis.splitFactor" ng-change="ctrl.refresh()" ng-model-onblur>
+        <label class="gf-form-label width-7">Split Factor</label>
+        <input type="number"
+               class="gf-form-input width-3"
+               placeholder="1"
+               data-placement="right"
+               bs-tooltip="'For log scales only. By default Y values is splitted by integer powers of log base (1, 2, 4, 8, 16, ... for log2). This option allows to split each default bucket into specified number of buckets.'"
+               ng-model="ctrl.panel.yAxis.splitFactor" ng-change="ctrl.refresh()" ng-model-onblur>
+        </input>
       </div>
     </div>
   </div>
 
   <div class="section gf-form-group">
-    <h5 class="section-heading">X Axis</h5>
+    <h5 class="section-heading">Data format</h5>
     <div class="gf-form">
-      <label class="gf-form-label width-6">Buckets</label>
-      <input type="number" class="gf-form-input width-8" placeholder="auto" data-placement="right"
-        bs-tooltip="'Number of buckets for X axis.'"
-        ng-model="ctrl.panel.xBucketNumber" ng-change="ctrl.refresh()" ng-model-onblur>
-    </div>
-  </div>
-
-  <div class="section gf-form-group">
-  <h5 class="section-heading">Data format</h5>
-  <div class="gf-form">
-    <label class="gf-form-label width-5">Format</label>
-    <div class="gf-form-select-wrapper max-width-15">
-      <select class="gf-form-input" ng-model="ctrl.panel.dataFormat" ng-options="v as k for (k, v) in editor.dataFormats" ng-change="ctrl.render()"></select>
+      <label class="gf-form-label width-5">Format</label>
+      <div class="gf-form-select-wrapper max-width-15">
+        <select class="gf-form-input" ng-model="ctrl.panel.dataFormat" ng-options="v as k for (k, v) in editor.dataFormats" ng-change="ctrl.render()"></select>
+      </div>
     </div>
   </div>
 </div>
-</div>