wip: heatmap refactor

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

@@ -8,13 +8,14 @@ export class AxesEditorCtrl {
   unitFormats: any;
   logScales: any;
   dataFormats: any;
+  yBucketOptions: any[];
+  xBucketOptions: any[];
 
   /** @ngInject */
-  constructor($scope) {
+  constructor($scope, uiSegmentSrv) {
     $scope.editor = this;
     this.panelCtrl = $scope.ctrl;
     this.panel = this.panelCtrl.panel;
-
     this.unitFormats = kbn.getUnitFormats();
 
     this.logScales = {
@@ -29,6 +30,26 @@ export class AxesEditorCtrl {
       'Time series': 'timeseries',
       'Time series Pre-bucketed': 'tsbuckets'
     };
+
+    this.yBucketOptions =  [
+      {text: '5',  value: '5'},
+      {text: '10', value: '10'},
+      {text: '20', value: '20'},
+      {text: '30', value: '30'},
+      {text: '50', value: '50'},
+    ];
+
+    this.xBucketOptions =  [
+      {text: '15', value: '15'},
+      {text: '20', value: '20'},
+      {text: '30', value: '30'},
+      {text: '50', value: '50'},
+      {text: '1m', value: '1m'},
+      {text: '5m', value: '5m'},
+      {text: '10m', value: '10m'},
+      {text: '20m', value: '20m'},
+      {text: '1h', value: '1h'},
+    ];
   }
 
   setUnitFormat(subItem) {

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

@@ -28,12 +28,9 @@ let panelDefaults = {
     fillBackground: false
   },
   dataFormat: 'timeseries',
-  xBucketSize: null,
-  xBucketNumber: null,
-  yBucketSize: null,
-  yBucketNumber: null,
   xAxis: {
-    show: true
+    show: true,
+    buckets: 'auto',
   },
   yAxis: {
     show: true,
@@ -43,6 +40,7 @@ let panelDefaults = {
     splitFactor: null,
     min: null,
     max: null,
+    buckets: 'auto',
     removeZeroValues: false
   },
   tooltip: {

public/app/plugins/panel/heatmap/module.html

@@ -7,6 +7,5 @@
 
 		<div class="heatmap-panel" ng-dblclick="ctrl.zoomOut()"></div>
 	</div>
-	<!-- <div class="graph-legend-wrapper" ng-if="ctrl.panel.legend.show" heatmap-legend></div> -->
 </div>
 <div class="clearfix"></div>

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

@@ -1,12 +1,8 @@
 <div class="editor-row">
   <div class="section gf-form-group">
     <h5 class="section-heading">Y Axis</h5>
-    <gf-form-switch class="gf-form" label-class="width-5"
-      label="Show"
-      checked="ctrl.panel.yAxis.show" on-change="ctrl.render()">
-    </gf-form-switch>
     <div class="gf-form">
-      <label class="gf-form-label width-5">Unit</label>
+      <label class="gf-form-label width-6">Unit</label>
       <div class="gf-form-dropdown-typeahead max-width-15"
         ng-model="ctrl.panel.yAxis.format"
         dropdown-typeahead2="editor.unitFormats"
@@ -14,73 +10,55 @@
       </div>
     </div>
     <div class="gf-form">
-      <label class="gf-form-label width-5">Scale</label>
+      <label class="gf-form-label width-6">Scale</label>
       <div class="gf-form-select-wrapper max-width-15">
         <select class="gf-form-input" ng-model="ctrl.panel.yAxis.logBase" ng-options="v as k for (k, v) in editor.logScales" ng-change="ctrl.refresh()"></select>
       </div>
     </div>
     <div class="gf-form-inline">
-      <div class="gf-form max-width-10">
+      <div class="gf-form">
-        <label class="gf-form-label width-5">Y-Min</label>
+        <label class="gf-form-label width-6">Y-Min</label>
-        <input type="text" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.min" ng-change="ctrl.render()" ng-model-onblur>
+        <input type="text" class="gf-form-input width-5" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.min" ng-change="ctrl.render()" ng-model-onblur>
       </div>
-      <div class="gf-form max-width-10">
+      <div class="gf-form">
-        <label class="gf-form-label width-5">Y-Max</label>
+        <label class="gf-form-label">Y-Max</label>
-        <input type="text" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.max" ng-change="ctrl.render()" ng-model-onblur>
+        <input type="text" class="gf-form-input width-5" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.max" ng-change="ctrl.render()" ng-model-onblur>
       </div>
     </div>
     <div class="gf-form">
-      <label class="gf-form-label width-10">Decimals</label>
+      <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>
     </div>
     <div ng-show="ctrl.panel.yAxis.logBase === 1">
-      <div class="gf-form">
+      <div class="gf-form-inline">
-        <label class="gf-form-label width-10">Buckets</label>
+        <div class="gf-form">
-        <input type="number" class="gf-form-input width-10" placeholder="auto" data-placement="right"
+          <label class="gf-form-label width-6">Buckets
-          bs-tooltip="'Number of buckets for Y axis.'"
+            <info-popover mode="right-normal">Number of buckets for Y axis</info-popover>
-          ng-model="ctrl.panel.yBucketNumber" ng-change="ctrl.refresh()" ng-model-onblur>
+          </label>
-      </div>
+          <metric-segment-model css-class="width-10" property="ctrl.panel.yAxis.buckets" options="editor.yBucketOptions" on-change="ctrl.render()" select-mode="true"></metric-segment>
-      <div class="gf-form">
+        </div>
-        <label class="gf-form-label width-10">Bucket Size</label>
-        <input type="number" class="gf-form-input width-10" 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 ng-show="ctrl.panel.yAxis.logBase !== 1">
       <div class="gf-form">
-        <label class="gf-form-label width-10">Split Buckets</label>
+        <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>
       </div>
-      <gf-form-switch class="gf-form" label-class="width-10"
-        label="Remove zero values"
-        checked="ctrl.panel.yAxis.removeZeroValues" on-change="ctrl.render()">
-      </gf-form-switch>
     </div>
   </div>
 
   <div class="section gf-form-group">
     <h5 class="section-heading">X Axis</h5>
-    <gf-form-switch class="gf-form" label-class="width-8"
-      label="Show"
-      checked="ctrl.panel.xAxis.show" on-change="ctrl.render()">
-    </gf-form-switch>
     <div class="gf-form">
-      <label class="gf-form-label width-8">Buckets</label>
+      <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 class="gf-form">
-      <label class="gf-form-label width-8">Bucket Size</label>
-      <input type="text" class="gf-form-input width-8" 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 class="section gf-form-group">