Add reversible legend option

Fixes grafana-toolbox#85
matschaffer · Dec 27, 2020 · 7eac93b · 7eac93b
1 parent 3a7dc70
commit 7eac93b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 8 deletions.
diff --git a/src/partials/editor.html b/src/partials/editor.html
@@ -413,11 +413,17 @@ <h5>Appearance</h5>
     <div class="gf-form-subgroup">
         <gf-form-switch class="gf-form" label="Show Legend" label-class="width-10" checked="ctrl.panel.showLegend"
                         on-change="ctrl.toggleLegend()"></gf-form-switch>
-        <div class="gf-form" ng-show="ctrl.panel.showLegend == true">
-            <label class="gf-form-label width-10">Legend container</label>
-            <input type="text" class="input-small gf-form-input max-width-18"
-                   ng-model="ctrl.panel.legendContainerSelector"
-                   placeholder=".shared-map-legend" ng-change="ctrl.restart()" ng-model-onblur/>
+
+        <div ng-show="ctrl.panel.showLegend == true">
+            <gf-form-switch class="gf-form" label="Reverse Legend" label-class="width-10" checked="ctrl.panel.reverseLegend"
+                            on-change="ctrl.toggleLegendDirection()"></gf-form-switch>
+
+            <div class="gf-form">
+                <label class="gf-form-label width-10">Legend container</label>
+                <input type="text" class="input-small gf-form-input max-width-18"
+                       ng-model="ctrl.panel.legendContainerSelector"
+                       placeholder=".shared-map-legend" ng-change="ctrl.restart()" ng-model-onblur/>
+            </div>
         </div>
     </div>
 

diff --git a/src/worldmap.ts b/src/worldmap.ts
@@ -126,19 +126,26 @@ export default class WorldMap {
       case ColorModes.threshold.id:
       default:
         return () => {
-          const thresholds = this.ctrl.data.thresholds;
+          const thresholds = this.ctrl.data.thresholds.slice();
+          const colors = this.ctrl.settings.colors.slice();
+
+          if (this.ctrl.settings.reverseLegend) {
+            thresholds.reverse();
+            colors.reverse();
+          }
+
           let legendHtml = '';
           legendHtml +=
             '<div class="legend-item"><i style="background:' +
-            this.ctrl.settings.colors[0] +
+            colors[0] +
             '"></i> ' +
             '&lt; ' +
             thresholds[0] +
             '</div>';
           for (let index = 0; index < thresholds.length; index += 1) {
             legendHtml +=
               '<div class="legend-item"><i style="background:' +
-              this.ctrl.settings.colors[index + 1] +
+              colors[index + 1] +
               '"></i> ' +
               thresholds[index] +
               (thresholds[index + 1] ? '&ndash;' + thresholds[index + 1] + '</div>' : '+');

diff --git a/src/worldmap_ctrl.ts b/src/worldmap_ctrl.ts
@@ -38,6 +38,7 @@ const panelDefaults = {
   unitSingular: '',
   unitPlural: '',
   showLegend: true,
+  reverseLegend: false,
   legendContainerSelector: null,
   showZoomControl: true,
   showAttribution: true,
@@ -549,6 +550,10 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
     this.render();
   }
 
+  toggleLegendDirection() {
+    this.map.legend.update();
+  }
+
   refreshOverlay() {
     this.map.overlay.remove();
     this.map.overlay = null;