Merge pull request #2 from HBOCodeLabs/eduelias/CAPS-5810-make-geolabel-optional

feat(label): hide location label in tooltip

Author: eduelias

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "advanced-wordmap-panel",
+  "name": "advanced-worldmap-panel",
   "version": "1.0",
   "description": "Advanced Worldmap Panel Plugin for Grafana",
   "main": "src/module.js",

package.json

@@ -3,8 +3,8 @@ import {loadPluginCss} from 'grafana/app/plugins/sdk';
 import WorldmapCtrl from './worldmap_ctrl';
 
 loadPluginCss({
-  dark: 'plugins/advanced-wordmap-panel/css/worldmap.dark.css',
-  light: 'plugins/advanced-wordmap-panel/css/worldmap.light.css'
+  dark: 'plugins/advanced-worldmap-panel/css/worldmap.dark.css',
+  light: 'plugins/advanced-worldmap-panel/css/worldmap.light.css'
 });
 
 export {

src/module.ts

@@ -171,6 +171,7 @@ <h6 ng-show="ctrl.panel.locationData === 'table' || ctrl.panel.locationData ===
       <input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.tableQueryOptions.longitudeField" ng-change="ctrl.refresh()"
         ng-model-onblur />
     </div>
+    <gf-form-switch class="gf-form" ng-show="ctrl.panel.locationData === 'geohash'" label="Hide Location Name" label-class="width-10" checked="ctrl.panel.hideLocationName" ng-model="ctrl.panel.hideLocationName" on-change="ctrl.render()"></gf-form-switch>
     <div class="gf-form" ng-show="ctrl.panel.locationData === 'geohash'">
       <label class="gf-form-label width-12">Location Name Field</label>
       <input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.esLocationName" ng-change="ctrl.refresh()"
@@ -189,16 +190,11 @@ <h6 ng-show="ctrl.panel.locationData === 'table' || ctrl.panel.locationData ===
   </div>
 
   <div class="section gf-form-group">
-    <h5 class="section-heading">Drawing Options</h5>
-    <div class="gf-form">
-      <label class="gf-form-label width-10">Minimum threshold value </label>
-      <input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.minThreshold" ng-change="ctrl.render()"
-        placeholder="10" ng-model-onblur />
-    </div>
+    <h5 class="section-heading">Coloring Options</h5>
     <div class="gf-form">
       <label class="gf-form-label width-10">Color property </label>
       <input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.colorMetric" ng-change="ctrl.render()"
-        placeholder="Percent Column" ng-model-onblur />
+        placeholder="Bucket Script" ng-model-onblur />
     </div>
     <div class="gf-form">
       <label class="gf-form-label width-10">Color label </label>
@@ -229,6 +225,11 @@ <h5 class="section-heading">Drawing Options</h5>
 
   <div class="section gf-form-group">
     <h5 class="section-heading">Hide series</h5>
+    <div class="gf-form">
+      <label class="gf-form-label width-10">With values under </label>
+      <input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.minValue" ng-change="ctrl.render()"
+        placeholder="10" ng-model-onblur />
+    </div>
     <gf-form-switch class="gf-form" label="With only nulls" label-class="width-10" checked="ctrl.panel.hideEmpty" on-change="ctrl.render()">
     </gf-form-switch>
     <gf-form-switch class="gf-form" label="With only zeros" label-class="width-10" checked="ctrl.panel.hideZero" on-change="ctrl.render()">

src/partials/editor.html

@@ -1,7 +1,7 @@
 {
   "type": "panel",
   "name": "Advanced Worldmap Panel",
-  "id": "advanced-wordmap-panel",
+  "id": "advanced-worldmap-panel",
 
   "info": {
     "description": "World Map panel for Grafana. Displays time series data or geohash data from Elasticsearch overlaid on a world map.",

src/plugin.json

@@ -105,7 +105,7 @@ export default class WorldMap {
     return _.filter(data, o => {
       return !(this.ctrl.panel.hideEmpty && _.isNil(o.value)) 
           && !(this.ctrl.panel.hideZero && o.value === 0)
-          && !(this.ctrl.panel.minThreshold && o.value <= this.ctrl.panel.minThreshold)
+          && !(this.ctrl.panel.minValue !== undefined && o.value <= this.ctrl.panel.minValue)
     });
   }
 
@@ -196,8 +196,8 @@ export default class WorldMap {
 
   createPopup(circle, locationName, value, colorValue) {
     const unit = value && value === 1 ? this.ctrl.panel.unitSingular : this.ctrl.panel.unitPlural;
-    const firstLine = `${locationName}: ${value} ${(unit || '')}`.trim();
-    const secondLine = colorValue !== undefined ? `${(this.ctrl.panel.colorLabel !== undefined ? this.ctrl.panel.colorLabel + ': ':'') + colorValue + (this.ctrl.panel.colorUnit || '')}`.trim(): '';
+    const firstLine = `${this.ctrl.panel.hideLocationName ? "" : locationName + ": "}`+`${value} ${(unit || '')}`.trim();
+    const secondLine = colorValue !== undefined ? `${(this.ctrl.panel.colorLabel !== undefined ? this.ctrl.panel.colorLabel + ': ':'') + (colorValue || '0')  + (this.ctrl.panel.colorUnit || '')}`.trim(): '';
     const label = `${firstLine}${secondLine !== '' ? '<br>' + secondLine : ''}`;
     circle.bindPopup(label, {
       offset: (<any>window).L.point(0, -2),

src/worldmap.ts

@@ -16,7 +16,7 @@ const panelDefaults = {
   mapCenterLongitude: 0,
   initialZoom: 1,
   valueName: "total",
-  minThreshold: 0,
+  minValue: 0,
   colorMetric:"",
   colorLabel: "",
   colorUnit:"%",
@@ -34,6 +34,7 @@ const panelDefaults = {
   unitPlural: "",
   showLegend: true,
   mouseWheelZoom: false,
+  hideLocationName: false,
   esMetric: "Count",
   decimals: 0,
   hideEmpty: false,
@@ -143,7 +144,7 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
       this.panel.locationData !== "json result"
     ) {
       $.getJSON(
-        "public/plugins/advanced-wordmap-panel/data/" +
+        "public/plugins/advanced-worldmap-panel/data/" +
           this.panel.locationData +
           ".json"
       ).then(this.reloadLocations.bind(this));
@@ -178,7 +179,7 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
   onInitEditMode() {
     this.addEditorTab(
       "Worldmap",
-      "public/plugins/advanced-wordmap-panel/partials/editor.html",
+      "public/plugins/advanced-worldmap-panel/partials/editor.html",
       2
     );
   }