From caddfd32463bb7af2dcbbdf9ee2066159e557bf0 Mon Sep 17 00:00:00 2001
From: Thomas LE MAGOUROU <tlemagourou@centravet.fr>
Date: Tue, 26 Oct 2021 16:29:56 +0200
Subject: [PATCH] Add possiblity to legend string values

---
 src/data_formatter.ts    | 15 +++++-----
 src/partials/editor.html | 20 +++++++++++---
 src/worldmap.ts          | 59 ++++++++++++++++++++++++++++------------
 src/worldmap_ctrl.ts     | 40 +++++++++++++++++++--------
 4 files changed, 95 insertions(+), 39 deletions(-)

diff --git a/src/data_formatter.ts b/src/data_formatter.ts
index 13121f0..158e173 100644
--- a/src/data_formatter.ts
+++ b/src/data_formatter.ts
@@ -192,16 +192,17 @@ export default class DataFormatter {
           valueFormatted: datapoint[this.ctrl.panel.tableQueryOptions.metricField],
           valueRounded: 0,
         };
+        if (this.ctrl.panel.legendMode === 'thresholds') {
+          if (dataValue.value > highestValue) {
+            highestValue = dataValue.value;
+          }
 
-        if (dataValue.value > highestValue) {
-          highestValue = dataValue.value;
-        }
+          if (dataValue.value < lowestValue) {
+            lowestValue = dataValue.value;
+          }
 
-        if (dataValue.value < lowestValue) {
-          lowestValue = dataValue.value;
+          dataValue.valueRounded = kbn.roundValue(dataValue.value, this.ctrl.panel.decimals || 0);
         }
-
-        dataValue.valueRounded = kbn.roundValue(dataValue.value, this.ctrl.panel.decimals || 0);
         data.push(dataValue);
       });
 
diff --git a/src/partials/editor.html b/src/partials/editor.html
index 63c474e..27c1e26 100644
--- a/src/partials/editor.html
+++ b/src/partials/editor.html
@@ -189,14 +189,26 @@ <h6 ng-show="ctrl.panel.locationData === 'table' || ctrl.panel.locationData ===
   </div>
 
   <div class="section gf-form-group">
-    <h5 class="section-heading">Threshold Options</h5>
+    <h5 class="section-heading">Legend Options</h5>
     <div class="gf-form">
-      <label class="gf-form-label width-10">Thresholds</label>
-      <input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.thresholds" ng-change="ctrl.changeThresholds()"
+      <label class="gf-form-label width-12">Mode</label>
+      <div class="gf-form-select-wrapper max-width-12">
+        <select class="input-small gf-form-input" ng-model="ctrl.panel.legendMode" ng-options="t for t in ['thresholds', 'legends']"
+          ng-change="ctrl.changeThresholds();"></select>
+      </div>
+    </div>
+    <div class="gf-form" ng-show="ctrl.panel.legendMode === 'thresholds'">
+      <label class="gf-form-label width-12">Thresholds</label>
+      <input type="text" class="input-small gf-form-input width-12" ng-model="ctrl.panel.thresholds" ng-change="ctrl.changeThresholds()"
+        placeholder="0,10" ng-model-onblur />
+    </div>
+    <div class="gf-form" ng-show="ctrl.panel.legendMode === 'legends'">
+      <label class="gf-form-label width-12">Legends</label>
+      <input type="text" class="input-small gf-form-input width-12" ng-model="ctrl.panel.legends" ng-change="ctrl.changeThresholds()"
         placeholder="0,10" ng-model-onblur />
     </div>
     <div class="gf-form">
-      <label class="gf-form-label width-10">Colors</label>
+      <label class="gf-form-label width-12">Colors</label>
       <spectrum-picker class="gf-form-input width-3" ng-repeat="color in ctrl.panel.colors track by $index" ng-model="ctrl.panel.colors[$index]"
         ng-change="ctrl.changeThresholds()"></spectrum-picker>
     </div>
diff --git a/src/worldmap.ts b/src/worldmap.ts
index 341f9a6..96711c3 100644
--- a/src/worldmap.ts
+++ b/src/worldmap.ts
@@ -65,22 +65,35 @@ export default class WorldMap {
     };
 
     this.legend.update = () => {
-      const thresholds = this.ctrl.data.thresholds;
       let legendHtml = '';
-      legendHtml +=
-        '<div class="legend-item"><i style="background:' +
-        this.ctrl.panel.colors[0] +
-        '"></i> ' +
-        '&lt; ' +
-        thresholds[0] +
-        '</div>';
-      for (let index = 0; index < thresholds.length; index += 1) {
+
+      if (this.ctrl.data.legends) {
+        const legends = this.ctrl.data.legends
+        for (let i = 0; i < legends.length; i++) {
+          legendHtml +=
+          '<div class="legend-item"><i style="background:' +
+          this.ctrl.panel.colors[i] +
+          '"></i> ' +
+          legends[i] +
+          '</div>';
+        }
+      } else {
+        const thresholds = this.ctrl.data.c;
         legendHtml +=
           '<div class="legend-item"><i style="background:' +
-          this.ctrl.panel.colors[index + 1] +
+          this.ctrl.panel.colors[0] +
           '"></i> ' +
-          thresholds[index] +
-          (thresholds[index + 1] ? '&ndash;' + thresholds[index + 1] + '</div>' : '+');
+          '&lt; ' +
+          thresholds[0] +
+          '</div>';
+        for (let index = 0; index < thresholds.length; index += 1) {
+          legendHtml +=
+            '<div class="legend-item"><i style="background:' +
+            this.ctrl.panel.colors[index + 1] +
+            '"></i> ' +
+            thresholds[index] +
+            (thresholds[index + 1] ? '&ndash;' + thresholds[index + 1] + '</div>' : '+');
+        }
       }
       this.legend._div.innerHTML = legendHtml;
     };
@@ -175,6 +188,11 @@ export default class WorldMap {
   }
 
   calcCircleSize(dataPointValue) {
+    let value = dataPointValue;
+    // force values string to 1
+    if(this.ctrl.data.legends) 
+      value = 1;
+
     const circleMinSize = parseInt(this.ctrl.panel.circleMinSize, 10) || 2;
     const circleMaxSize = parseInt(this.ctrl.panel.circleMaxSize, 10) || 30;
 
@@ -182,7 +200,7 @@ export default class WorldMap {
       return circleMaxSize;
     }
 
-    const dataFactor = (dataPointValue - this.ctrl.data.lowestValue) / this.ctrl.data.valueRange;
+    const dataFactor = (value - this.ctrl.data.lowestValue) / this.ctrl.data.valueRange;
     const circleSizeRange = circleMaxSize - circleMinSize;
 
     return circleSizeRange * dataFactor + circleMinSize;
@@ -211,12 +229,19 @@ export default class WorldMap {
   }
 
   getColor(value) {
-    for (let index = this.ctrl.data.thresholds.length; index > 0; index -= 1) {
-      if (value >= this.ctrl.data.thresholds[index - 1]) {
-        return this.ctrl.panel.colors[index];
+    if(this.ctrl.data.legends) {
+      let idx = this.ctrl.data.legends.indexOf(value);
+      if(idx >= 0)
+        return this.ctrl.panel.colors[idx];
+      return 'rgb(71, 71, 71)';
+    } else {
+      for (let index = this.ctrl.data.thresholds.length; index > 0; index -= 1) {
+        if (value >= this.ctrl.data.thresholds[index - 1]) {
+          return this.ctrl.panel.colors[index];
+        }
       }
+      return _.first(this.ctrl.panel.colors);
     }
-    return _.first(this.ctrl.panel.colors);
   }
 
   resize() {
diff --git a/src/worldmap_ctrl.ts b/src/worldmap_ctrl.ts
index 4aa746c..a3ffddb 100644
--- a/src/worldmap_ctrl.ts
+++ b/src/worldmap_ctrl.ts
@@ -19,6 +19,8 @@ const panelDefaults = {
   circleMinSize: 2,
   circleMaxSize: 30,
   locationData: "countries",
+  legendMode: "thresholds",
+  legends: [],
   thresholds: "0,10",
   colors: [
     "rgba(245, 54, 54, 0.9)",
@@ -277,17 +279,33 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
   }
 
   updateThresholdData() {
-    this.data.thresholds = this.panel.thresholds.split(",").map(strValue => {
-      return Number(strValue.trim());
-    });
-    while (_.size(this.panel.colors) > _.size(this.data.thresholds) + 1) {
-      // too many colors. remove the last one.
-      this.panel.colors.pop();
-    }
-    while (_.size(this.panel.colors) < _.size(this.data.thresholds) + 1) {
-      // not enough colors. add one.
-      const newColor = "rgba(50, 172, 45, 0.97)";
-      this.panel.colors.push(newColor);
+    if(this.panel.legendMode === 'thresholds')
+      this.data.thresholds = this.panel.thresholds.split(",").map(strValue => {
+        return Number(strValue.trim());
+      });
+    else 
+      this.data.legends = this.panel.legends.split(",");
+    
+    if(this.panel.legendMode === 'thresholds') {
+      while (_.size(this.panel.colors) > _.size(this.data.thresholds) + 1) {
+        // too many colors. remove the last one.
+        this.panel.colors.pop();
+      }
+      while (_.size(this.panel.colors) < _.size(this.data.thresholds) + 1) {
+        // not enough colors. add one.
+        const newColor = "rgba(50, 172, 45, 0.97)";
+        this.panel.colors.push(newColor);
+      }
+    } else {
+      while (_.size(this.panel.colors) > _.size(this.data.legends)) {
+        // too many colors. remove the last one.
+        this.panel.colors.pop();
+      }
+      while (_.size(this.panel.colors) < _.size(this.data.legends)) {
+        // not enough colors. add one.
+        const newColor = "rgba(50, 172, 45, 0.97)";
+        this.panel.colors.push(newColor);
+      }
     }
   }