Merge branch 'heatmap-refactor'

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

@@ -10,11 +10,10 @@ export class AxesEditorCtrl {
   dataFormats: 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 = {

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

@@ -28,12 +28,13 @@ let panelDefaults = {
     fillBackground: false
   },
   dataFormat: 'timeseries',
-  xBucketSize: null,
-  xBucketNumber: null,
-  yBucketSize: null,
-  yBucketNumber: null,
   xAxis: {
-    show: true
+    show: true,
+    buckets: {
+      mode: 'count',
+      count: null,
+      size: null,
+    },
   },
   yAxis: {
     show: true,
@@ -43,6 +44,11 @@ let panelDefaults = {
     splitFactor: null,
     min: null,
     max: null,
+    buckets: {
+      mode: 'count',
+      count: null,
+      size: null,
+    },
     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,95 +1,91 @@
 <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>
-      <div class="gf-form-dropdown-typeahead max-width-15"
-        ng-model="ctrl.panel.yAxis.format"
-        dropdown-typeahead2="editor.unitFormats"
-        dropdown-typeahead-on-select="editor.setUnitFormat($subItem)">
+      <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)">
       </div>
     </div>
     <div class="gf-form">
-      <label class="gf-form-label width-5">Scale</label>
-      <div class="gf-form-select-wrapper max-width-15">
+      <label class="gf-form-label width-6">Scale</label>
+      <div class="gf-form-select-wrapper max-width-10">
         <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">
-        <label class="gf-form-label width-5">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>
-      </div>
-      <div class="gf-form max-width-10">
-        <label class="gf-form-label width-5">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>
-      </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-6">Y-Min</label>
+      <input type="text" class="gf-form-input width-10" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.min" ng-change="ctrl.render()" ng-model-onblur>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-6">Y-Max</label>
+      <input type="text" class="gf-form-input width-10" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.max" ng-change="ctrl.render()" ng-model-onblur>
     </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>
+                                                                             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">
-        <label class="gf-form-label width-10">Buckets</label>
-        <input type="number" class="gf-form-input width-10" 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 class="gf-form-inline">
+        <div class="gf-form">
+          <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">
-        <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 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-10">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>
-      <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>
+    <h5 class="section-heading">Data format</h5>
     <div class="gf-form">
-      <label class="gf-form-label width-8">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">
-  <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>