Adds clickthrough links mappable from data for circles

dist/partials/editor.html

@@ -156,6 +156,11 @@ <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.metricField" ng-change="ctrl.refresh()"
         ng-model-onblur />
     </div>
+    <div class="gf-form" ng-show="ctrl.panel.locationData === 'table'">
+      <label class="gf-form-label width-12">Link Field</label>
+      <input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.tableQueryOptions.linkField" ng-change="ctrl.refresh()"
+        ng-model-onblur />
+    </div>
     <div class="gf-form" ng-show="ctrl.showTableGeohashOptions()">
       <label class="gf-form-label width-12">Geohash Field</label>
       <input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.tableQueryOptions.geohashField" ng-change="ctrl.refresh()"
@@ -186,6 +191,11 @@ <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.esMetric" ng-change="ctrl.refresh()" ng-model-onblur
       />
     </div>
+    <div class="gf-form" ng-show="ctrl.panel.locationData === 'geohash'">
+      <label class="gf-form-label width-12">Link Field</label>
+      <input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.esLink" ng-change="ctrl.refresh()" ng-model-onblur
+      />
+    </div>
   </div>
 
   <div class="section gf-form-group">

src/data_formatter.ts

@@ -53,7 +53,7 @@ export default class DataFormatter {
     }
   }
 
-  createDataValue(encodedGeohash, decodedGeohash, locationName, value) {
+  createDataValue(encodedGeohash, decodedGeohash, locationName, value, link) {
     const dataValue = {
       key: encodedGeohash,
       locationName: locationName,
@@ -62,6 +62,7 @@ export default class DataFormatter {
       value: value,
       valueFormatted: value,
       valueRounded: 0,
+      link: link
     };
 
     dataValue.valueRounded = kbn.roundValue(dataValue.value, this.ctrl.panel.decimals || 0);
@@ -92,8 +93,11 @@ export default class DataFormatter {
               ? row[columnNames[this.ctrl.panel.esLocationName]]
               : encodedGeohash;
             const value = row[columnNames[this.ctrl.panel.esMetric]];
+            const link = this.ctrl.panel.esLink
+              ? row[columnNames[this.ctrl.panel.esLink]]
+              : null;
 
-            const dataValue = this.createDataValue(encodedGeohash, decodedGeohash, locationName, value);
+            const dataValue = this.createDataValue(encodedGeohash, decodedGeohash, locationName, value, link);
             if (dataValue.value > highestValue) {
               highestValue = dataValue.value;
             }
@@ -116,8 +120,11 @@ export default class DataFormatter {
               ? datapoint[this.ctrl.panel.esLocationName]
               : encodedGeohash;
             const value = datapoint[this.ctrl.panel.esMetric];
+            const link = this.ctrl.panel.esLink
+              ? datapoint[this.ctrl.panel.esLink]
+              : null;
 
-            const dataValue = this.createDataValue(encodedGeohash, decodedGeohash, locationName, value);
+            const dataValue = this.createDataValue(encodedGeohash, decodedGeohash, locationName, value, link);
             if (dataValue.value > highestValue) {
               highestValue = dataValue.value;
             }
@@ -191,6 +198,7 @@ export default class DataFormatter {
           value: datapoint[this.ctrl.panel.tableQueryOptions.metricField],
           valueFormatted: datapoint[this.ctrl.panel.tableQueryOptions.metricField],
           valueRounded: 0,
+          link: datapoint[this.ctrl.panel.tableQueryOptions.linkField] || null
         };
 
         if (dataValue.value > highestValue) {

src/partials/editor.html

@@ -156,6 +156,11 @@ <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.metricField" ng-change="ctrl.refresh()"
         ng-model-onblur />
     </div>
+    <div class="gf-form" ng-show="ctrl.panel.locationData === 'table'">
+      <label class="gf-form-label width-12">Link Field</label>
+      <input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.tableQueryOptions.linkField" ng-change="ctrl.refresh()"
+        ng-model-onblur />
+    </div>
     <div class="gf-form" ng-show="ctrl.showTableGeohashOptions()">
       <label class="gf-form-label width-12">Geohash Field</label>
       <input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.tableQueryOptions.geohashField" ng-change="ctrl.refresh()"
@@ -186,6 +191,11 @@ <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.esMetric" ng-change="ctrl.refresh()" ng-model-onblur
       />
     </div>
+    <div class="gf-form" ng-show="ctrl.panel.locationData === 'geohash'">
+      <label class="gf-form-label width-12">Link Field</label>
+      <input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.esLink" ng-change="ctrl.refresh()" ng-model-onblur
+      />
+    </div>
   </div>
 
   <div class="section gf-form-group">

src/worldmap.ts

@@ -156,6 +156,7 @@ export default class WorldMap {
           location: dataPoint.key,
         });
         circle.unbindPopup();
+        this.createClickthrough(circle, dataPoint.link);
         this.createPopup(circle, dataPoint.locationName, dataPoint.valueRounded);
       }
     });
@@ -170,6 +171,7 @@ export default class WorldMap {
       location: dataPoint.key,
     });
 
+    this.createClickthrough(circle, dataPoint.link);
     this.createPopup(circle, dataPoint.locationName, dataPoint.valueRounded);
     return circle;
   }
@@ -188,6 +190,15 @@ export default class WorldMap {
     return circleSizeRange * dataFactor + circleMinSize;
   }
 
+  createClickthrough(circle, linkUrl) {
+    circle.off('click');
+    if (linkUrl) {
+      circle.on('click', function onClick(evt) {
+        window.location.assign(linkUrl);
+      });
+    }
+  }
+
   createPopup(circle, locationName, value) {
     const unit = value && value === 1 ? this.ctrl.panel.unitSingular : this.ctrl.panel.unitPlural;
     const label = (locationName + ': ' + value + ' ' + (unit || '')).trim();

src/worldmap_ctrl.ts

@@ -38,7 +38,8 @@ const panelDefaults = {
     geohashField: "geohash",
     latitudeField: "latitude",
     longitudeField: "longitude",
-    metricField: "metric"
+    metricField: "metric",
+    linkField: "link"
   }
 };