Merge pull request #21 from flant/sort_for_y_axis

Sort options for Y axis

README.md

@@ -146,6 +146,7 @@ This plugin is based on "Heatmap" panel by Grafana and partly inspired by ideas
 
 ##### v0.0.3
 
+- Add simple sort options for Y axis
 - Fix display null values as zero
 
 ##### v0.0.2

dist/README.md

@@ -146,6 +146,7 @@ This plugin is based on "Heatmap" panel by Grafana and partly inspired by ideas
 
 ##### v0.0.3
 
+- Add simple sort options for Y axis
 - Fix display null values as zero
 
 ##### v0.0.2

dist/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>

dist/rendering.js

@@ -121,9 +121,10 @@ System.register(['lodash', 'jquery', 'moment', 'app/core/utils/kbn', 'app/core/c
     function getYScale(ticks) {
       var range = [];
       var 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 (var i = 1; i < ticks.length; i++) {
-        range.push(chartHeight - step * i);
+        range.push(step * (i + 1));
       }
       return d3.scaleOrdinal().domain(ticks).range(range);
     }
@@ -132,9 +133,10 @@ System.register(['lodash', 'jquery', 'moment', 'app/core/utils/kbn', 'app/core/c
     function getYAxisScale(ticks) {
       var range = [];
       var 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 (var i = 1; i < ticks.length; i++) {
-        range.push(chartHeight - step * i - yOffset);
+        range.push(step * i + yOffset);
       }
       return d3.scaleOrdinal().domain(ticks).range(range);
     }
@@ -149,6 +151,16 @@ System.register(['lodash', 'jquery', 'moment', 'app/core/utils/kbn', 'app/core/c
         ticks = [''];
       }
 
+      if (panel.yAxisSort == 'a → z') {
+        ticks.sort(function (a, b) {
+          return a.localeCompare(b, 'en', { ignorePunctuation: false, numeric: true });
+        });
+      } else if (panel.yAxisSort == 'z → a') {
+        ticks.sort(function (b, a) {
+          return a.localeCompare(b, 'en', { ignorePunctuation: false, numeric: true });
+        });
+      }
+
       var yAxisScale = getYAxisScale(ticks);
       scope.yScale = yScale = getYScale(ticks);
 

dist/status_heatmap_ctrl.js

@@ -97,6 +97,7 @@ System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/k
         },
         // how null points should be handled
         nullPointMode: 'as empty',
+        yAxisSort: 'metrics',
         highlightCards: true,
         useMax: true
       };
@@ -263,7 +264,6 @@ System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/k
 
             // 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, function (d) {
               return d.datapoints.length;

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));