support different color thresholds per layer (#9)

orchestracities · Aug 16, 2019 · a680fbc · a680fbc
1 parent 391666b
commit a680fbc
Show file tree

Hide file tree

Showing 10 changed files with 136 additions and 137 deletions.
diff --git a/dist/partials/editor.html b/dist/partials/editor.html
@@ -151,55 +151,46 @@ <h5 class="section-heading">{{layerName}}</h5>
         >
         <option value=""></option>
       </select>
-    </div>
-  </div>
-</div>
 
-<div class="section gf-form-group">
-  <h5 class="section-heading">Markers Coloring</h5>
 
-  <div class="gf-form">
-    <label class="gf-form-label width-10">Column</label>
-    <input type="text" 
-      class="input-small gf-form-input width-12" 
-      ng-model="ctrl.panel.geoMarkerColoringBinding"
-      ng-change="ctrl.render()" />
-  </div>
+      <label class="gf-form-label width-10">Column</label>
+      <input type="text" 
+        class="input-small gf-form-input width-12" 
+        ng-model="ctrl.panel.geoMarkerColoringBinding[layerName]"
+        ng-change="ctrl.render()" />
 
-  <div class="gf-form">
-    <label class="gf-form-label width-10">Color Thresholds</label>
-    <input type="text" 
-      class="input-small gf-form-input width-12" 
-      placeholder="50, 100"
-      ng-model="ctrl.panel.geoMarkerColoringThresholds" 
-      ng-change="ctrl.render()" />
-  </div>
+      <label class="gf-form-label width-10">Color Thresholds</label>
+      <input type="text" 
+        class="input-small gf-form-input width-12" 
+        placeholder="50, 100"
+        ng-model="ctrl.panel.geoMarkerColoringThresholds[layerName]" 
+        ng-change="ctrl.render()" />
+
+      <label class="gf-form-label width-10">Colors</label>
+
+      <select class="gf-form-input width-12"
+        ng-model="ctrl.panel.geoMarkerColoringColorLow[layerName]"
+        ng-options="markerColor for markerColor in ctrl.markerColors"
+        ng-change="ctrl.render()" 
+        title="Color low">
+      </select>
 
-  <div class="gf-form">
-    <label class="gf-form-label width-10">Colors</label>
-
-    <select class="gf-form-input"
-      ng-model="ctrl.panel.geoMarkerColoringColorLow"
-      ng-options="markerColor for markerColor in ctrl.markerColors"
-      ng-change="ctrl.render()" 
-      title="Color low">
-    </select>
-
-    <select class="gf-form-input"
-      ng-model="ctrl.panel.geoMarkerColoringColorMedium"
-      ng-options="markerColor for markerColor in ctrl.markerColors"
-      ng-change="ctrl.render()" 
-      title="Color medium">
-    </select>
-
-    <select class="gf-form-input"
-      ng-model="ctrl.panel.geoMarkerColoringColorHigh"
-      ng-options="markerColor for markerColor in ctrl.markerColors"
-      ng-change="ctrl.render()" 
-      title="Color high">
-    </select>
-  </div>
+      <select class="gf-form-input width-12"
+        ng-model="ctrl.panel.geoMarkerColoringColorMedium[layerName]"
+        ng-options="markerColor for markerColor in ctrl.markerColors"
+        ng-change="ctrl.render()" 
+        title="Color medium">
+      </select>
+
+      <select class="gf-form-input width-12"
+        ng-model="ctrl.panel.geoMarkerColoringColorHigh[layerName]"
+        ng-options="markerColor for markerColor in ctrl.markerColors"
+        ng-change="ctrl.render()" 
+        title="Color high">
+      </select>
 
+    </div>
+  </div>
 </div>
 
 <div>

diff --git a/dist/plugin.json b/dist/plugin.json
@@ -18,7 +18,7 @@
       {"name": "Project site", "url": ""},
       {"name": "MIT License", "url": ""}
     ],
-    "version": "1.3.1"
+    "version": "1.3.2"
   },
 
   "dependencies": {

diff --git a/dist/worldmap.js b/dist/worldmap.js
diff --git a/dist/worldmap.js.map b/dist/worldmap.js.map
diff --git a/dist/worldmap_ctrl.js b/dist/worldmap_ctrl.js
diff --git a/dist/worldmap_ctrl.js.map b/dist/worldmap_ctrl.js.map
diff --git a/src/partials/editor.html b/src/partials/editor.html
@@ -151,55 +151,46 @@ <h5 class="section-heading">{{layerName}}</h5>
         >
         <option value=""></option>
       </select>
-    </div>
-  </div>
-</div>
 
-<div class="section gf-form-group">
-  <h5 class="section-heading">Markers Coloring</h5>
 
-  <div class="gf-form">
-    <label class="gf-form-label width-10">Column</label>
-    <input type="text" 
-      class="input-small gf-form-input width-12" 
-      ng-model="ctrl.panel.geoMarkerColoringBinding"
-      ng-change="ctrl.render()" />
-  </div>
+      <label class="gf-form-label width-10">Column</label>
+      <input type="text" 
+        class="input-small gf-form-input width-12" 
+        ng-model="ctrl.panel.geoMarkerColoringBinding[layerName]"
+        ng-change="ctrl.render()" />
 
-  <div class="gf-form">
-    <label class="gf-form-label width-10">Color Thresholds</label>
-    <input type="text" 
-      class="input-small gf-form-input width-12" 
-      placeholder="50, 100"
-      ng-model="ctrl.panel.geoMarkerColoringThresholds" 
-      ng-change="ctrl.render()" />
-  </div>
+      <label class="gf-form-label width-10">Color Thresholds</label>
+      <input type="text" 
+        class="input-small gf-form-input width-12" 
+        placeholder="50, 100"
+        ng-model="ctrl.panel.geoMarkerColoringThresholds[layerName]" 
+        ng-change="ctrl.render()" />
+
+      <label class="gf-form-label width-10">Colors</label>
+
+      <select class="gf-form-input width-12"
+        ng-model="ctrl.panel.geoMarkerColoringColorLow[layerName]"
+        ng-options="markerColor for markerColor in ctrl.markerColors"
+        ng-change="ctrl.render()" 
+        title="Color low">
+      </select>
 
-  <div class="gf-form">
-    <label class="gf-form-label width-10">Colors</label>
-
-    <select class="gf-form-input"
-      ng-model="ctrl.panel.geoMarkerColoringColorLow"
-      ng-options="markerColor for markerColor in ctrl.markerColors"
-      ng-change="ctrl.render()" 
-      title="Color low">
-    </select>
-
-    <select class="gf-form-input"
-      ng-model="ctrl.panel.geoMarkerColoringColorMedium"
-      ng-options="markerColor for markerColor in ctrl.markerColors"
-      ng-change="ctrl.render()" 
-      title="Color medium">
-    </select>
-
-    <select class="gf-form-input"
-      ng-model="ctrl.panel.geoMarkerColoringColorHigh"
-      ng-options="markerColor for markerColor in ctrl.markerColors"
-      ng-change="ctrl.render()" 
-      title="Color high">
-    </select>
-  </div>
+      <select class="gf-form-input width-12"
+        ng-model="ctrl.panel.geoMarkerColoringColorMedium[layerName]"
+        ng-options="markerColor for markerColor in ctrl.markerColors"
+        ng-change="ctrl.render()" 
+        title="Color medium">
+      </select>
+
+      <select class="gf-form-input width-12"
+        ng-model="ctrl.panel.geoMarkerColoringColorHigh[layerName]"
+        ng-options="markerColor for markerColor in ctrl.markerColors"
+        ng-change="ctrl.render()" 
+        title="Color high">
+      </select>
 
+    </div>
+  </div>
 </div>
 
 <div>

diff --git a/src/plugin.json b/src/plugin.json
@@ -18,7 +18,7 @@
       {"name": "Project site", "url": ""},
       {"name": "MIT License", "url": ""}
     ],
-    "version": "1.3.1"
+    "version": "1.3.2"
   },
 
   "dependencies": {

diff --git a/src/worldmap.js b/src/worldmap.js
@@ -193,20 +193,20 @@ export default class WorldMap {
   }
 
   getGeoMarkerColor(objectValues) {
-    const bindingValue = objectValues[this.ctrl.panel.geoMarkerColoringBinding];
-    const {medium, high} = this.getGeoMarkerColorThesholds();
+    const bindingValue = objectValues[this.ctrl.panel.geoMarkerColoringBinding[objectValues.type]];
+    const {medium, high} = this.getGeoMarkerColorThesholds(objectValues);
 
     if (bindingValue < medium) {
-      return this.ctrl.panel.geoMarkerColoringColorLow;
+      return this.ctrl.panel.geoMarkerColoringColorLow[objectValues.type];
     }
     if (bindingValue > high) {
-      return this.ctrl.panel.geoMarkerColoringColorHigh;
+      return this.ctrl.panel.geoMarkerColoringColorHigh[objectValues.type];
     }
-    return this.ctrl.panel.geoMarkerColoringColorMedium;
+    return this.ctrl.panel.geoMarkerColoringColorMedium[objectValues.type];
   }
 
-  getGeoMarkerColorThesholds() {
-    const thresholds = this.ctrl.panel.geoMarkerColoringThresholds || '';
+  getGeoMarkerColorThesholds(objectValues) {
+    const thresholds = this.ctrl.panel.geoMarkerColoringThresholds[objectValues.type] || '';
     const splitted = thresholds.split(',');
     return {
       medium: parseInt(splitted[0], 10),
@@ -407,23 +407,25 @@ export default class WorldMap {
   }
 
   setDefaultValues() {
-    if (this.ctrl.panel.geoMarkerColoringBinding === undefined) {
-      this.ctrl.panel.geoMarkerColoringBinding = 'value';
-    }
+    Object.keys(this.ctrl.data).forEach((layerKey) => {
+      if (this.ctrl.panel.geoMarkerColoringBinding[layerKey] === undefined) {
+        this.ctrl.panel.geoMarkerColoringBinding[layerKey] = 'value';
+      }
 
-    if (this.ctrl.panel.geoMarkerColoringThresholds === undefined) {
-      this.ctrl.panel.geoMarkerColoringThresholds = '30, 50';
-    }
+      if (this.ctrl.panel.geoMarkerColoringThresholds[layerKey] === undefined) {
+        this.ctrl.panel.geoMarkerColoringThresholds[layerKey] = '30, 50';
+      }
 
-    if (this.ctrl.panel.geoMarkerColoringColorLow === undefined) {
-      this.ctrl.panel.geoMarkerColoringColorLow = 'red';
-    }
-    if (this.ctrl.panel.geoMarkerColoringColorMedium === undefined) {
-      this.ctrl.panel.geoMarkerColoringColorMedium = 'orange';
-    }
-    if (this.ctrl.panel.geoMarkerColoringColorHigh === undefined) {
-      this.ctrl.panel.geoMarkerColoringColorHigh = 'green';
-    }
+      if (this.ctrl.panel.geoMarkerColoringColorLow[layerKey] === undefined) {
+        this.ctrl.panel.geoMarkerColoringColorLow[layerKey] = 'red';
+      }
+      if (this.ctrl.panel.geoMarkerColoringColorMedium[layerKey] === undefined) {
+        this.ctrl.panel.geoMarkerColoringColorMedium[layerKey] = 'orange';
+      }
+      if (this.ctrl.panel.geoMarkerColoringColorHigh[layerKey] === undefined) {
+        this.ctrl.panel.geoMarkerColoringColorHigh[layerKey] = 'green';
+      }
+    });
   }
 }
 

diff --git a/src/worldmap_ctrl.js b/src/worldmap_ctrl.js
@@ -35,6 +35,12 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
     this.markerColors = MARKER_COLORS;
     this.environmentVars = this.templateSrv.variables.map((elem) => elem.name);
 
+    this.panel.geoMarkerColoringColorHigh = [];
+    this.panel.geoMarkerColoringColorMedium = [];
+    this.panel.geoMarkerColoringColorLow = [];
+    this.panel.geoMarkerColoringThresholds = [];
+    this.panel.geoMarkerColoringBinding = [];
+
     // bind grafana events
     this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
     this.events.on('data-error', this.onDataError.bind(this));