Sort options for Y axis

- sort as on metrics tab
- ascending and descending natural sort (1-2-10)

src/partials/options_editor.html

@@ -118,7 +118,16 @@
       label="Show tooltip"
       checked="ctrl.panel.tooltip.show" on-change="ctrl.render()">
     </gf-form-switch>
-  </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-8">Y axis sort</label>
+      <div class="gf-form-select-wrapper">
+        <select class="gf-form-input max-width-8"
+                ng-model="ctrl.panel.yAxisSort"
+                ng-options="f for f in ['metrics', 'a → z', 'z → a']"
+                ng-change="ctrl.render()"></select>
+      </div>
+    </div>
+</div>
 
   <div class="section gf-form-group">
     <h5 class="section-heading">Bucket</h5>

src/rendering.js

@@ -129,9 +129,10 @@ export default function link(scope, elem, attrs, ctrl) {
   function getYScale(ticks) {
     let range = [];
     let step = chartHeight / ticks.length;
-    range.push(chartHeight);
+    // svg has y=0 on the top, so top card should have a minimal value in range
+    range.push(step);
     for (let i = 1; i < ticks.length; i++) {
-      range.push(chartHeight - step * i);
+      range.push(step * (i+1));
     }
     return d3.scaleOrdinal()
       .domain(ticks)
@@ -142,9 +143,10 @@ export default function link(scope, elem, attrs, ctrl) {
   function getYAxisScale(ticks) {
     let range = [];
     let step = chartHeight / ticks.length;
-    range.push(chartHeight - yOffset);
+    // svg has y=0 on the top, so top tick should have a minimal value in range
+    range.push(yOffset);
     for (let i = 1; i < ticks.length; i++) {
-      range.push(chartHeight - step * i - yOffset);
+      range.push(step * i + yOffset);
     }
     return d3.scaleOrdinal()
       .domain(ticks)
@@ -159,6 +161,12 @@ export default function link(scope, elem, attrs, ctrl) {
       ticks = [''];
     }
 
+    if (panel.yAxisSort == 'a → z') {
+      ticks.sort((a, b) => a.localeCompare(b, 'en', {ignorePunctuation: false, numeric: true}));
+    } else if (panel.yAxisSort == 'z → a') {
+      ticks.sort((b, a) => a.localeCompare(b, 'en', {ignorePunctuation: false, numeric: true}));
+    }
+
     let yAxisScale = getYAxisScale(ticks);
     scope.yScale = yScale = getYScale(ticks);
 

src/status_heatmap_ctrl.js

@@ -57,6 +57,7 @@ const panelDefaults = {
   },
   // how null points should be handled
   nullPointMode: 'as empty',
+  yAxisSort: 'metrics',
   highlightCards: true,
   useMax: true
 };
@@ -280,7 +281,6 @@ export class StatusHeatmapCtrl extends MetricsPanelCtrl {
 
     // TODO add some logic for targets heirarchy
     cardsData.targets = _.keys(cardsData.targetIndex);
-    cardsData.targets.sort();
     cardsData.yBucketSize = cardsData.targets.length;
     cardsData.xBucketSize = _.min(_.map(data, d => d.datapoints.length));