Support multiple metrics in popup content (#77)

This allows us to inspect the `__field_` info and display it if we have data
beyond what's used in creating the circle size/color.

This is elasticsearch-centric for the moment. We can add support for
other data sources once we have them available.

Author: matschaffer

src/worldmap.test.ts

@@ -138,6 +138,28 @@ describe('Worldmap', () => {
     });
   });
 
+  describe('when the data has multiple metrics', () => {
+    beforeEach(() => {
+      ctrl.data = new DataBuilder()
+        .withCountryAndValue('SE', 1, {
+          __field_device_urn: 'safecast:903348716',
+          '__field_ingest.location': 'wecnv3p07bjj',
+          '__field_Average pms_pm02_5': 33,
+          '__field_Average lnd_7318u': 110,
+        })
+        .build();
+
+      ctrl.panel.esGeoPoint = 'ingest.location';
+      ctrl.panel.esLocationName = 'device_urn';
+      ctrl.panel.esMetric = 'Average pms_pm02_5';
+      worldMap.drawCircles();
+    });
+
+    it('should create a circle popup with additional metrics', () => {
+      expect(worldMap.circles[0]._popup._content).toBe('Sweden: 1 <br />Average lnd_7318u: 110');
+    });
+  });
+
   describe('when the data has three points', () => {
     beforeEach(() => {
       ctrl.data = new DataBuilder()

src/worldmap.ts

@@ -297,7 +297,7 @@ export default class WorldMap {
     });
 
     this.createClickthrough(circle, dataPoint);
-    const content = this.getPopupContent(dataPoint.locationName, dataPoint.valueRounded);
+    const content = this.getPopupContent(dataPoint);
     this.createPopup(circle, content);
     return circle;
   }
@@ -319,7 +319,7 @@ export default class WorldMap {
 
       // Re-create popup.
       circle.unbindPopup();
-      const content = this.getPopupContent(dataPoint.locationName, dataPoint.valueRounded);
+      const content = this.getPopupContent(dataPoint);
       this.createPopup(circle, content);
 
       // Re-create clickthrough-link.
@@ -418,12 +418,16 @@ export default class WorldMap {
   extendPopupContent(circle, dataPoint) {
     const popup = circle.getPopup();
     let popupContent = popup._content;
-    popupContent += `\n${this.getPopupContent(dataPoint.locationName, dataPoint.valueRounded)}`;
+    popupContent += `\n${this.getPopupContent(dataPoint)}`;
     circle.setPopupContent(popupContent);
   }
 
-  getPopupContent(locationName, value) {
+  getPopupContent(dataPoint) {
     let unit;
+
+    let locationName = dataPoint.locationName;
+    let value = dataPoint.value;
+
     if (_.isNaN(value)) {
       value = 'n/a';
     } else {
@@ -433,7 +437,27 @@ export default class WorldMap {
     if (this.ctrl.settings.formatOmitEmptyValue && value === 'n/a') {
       return `${locationName}`.trim();
     } else {
-      return `${locationName}: ${value} ${unit || ''}`.trim();
+      let fieldPrefix = '__field_';
+
+      let specialFields = [
+        fieldPrefix + this.ctrl.settings.esLocationName,
+        fieldPrefix + this.ctrl.settings.esMetric,
+        fieldPrefix + this.ctrl.settings.esGeoPoint,
+      ];
+
+      let freeDataFields = Object.keys(dataPoint).filter(
+        (key: string) => key.startsWith(fieldPrefix) && !specialFields.includes(key)
+      );
+
+      let freeDataDisplay = freeDataFields
+        .map((field: string) => {
+          let name = field.slice(fieldPrefix.length);
+          let value = dataPoint[field];
+          return `<br />${name}: ${value}`;
+        })
+        .join('');
+
+      return `${locationName}: ${value} ${unit || ''}${freeDataDisplay}`.trim();
     }
   }
 

test/data_builder.ts

@@ -7,7 +7,7 @@ export default class DataBuilder {
     this.data.categories = [];
   }
 
-  withCountryAndValue(countryCode, value) {
+  withCountryAndValue(countryCode, value, overrides?: {[key: string]: any}) {
     let dataPoint;
     if (countryCode === 'SE') {
       dataPoint = {
@@ -39,7 +39,7 @@ export default class DataBuilder {
     } else {
       throw new Error(`Unable to create fixture for country code ${countryCode}`);
     }
-    this.data.push(dataPoint);
+    this.data.push({...dataPoint, ...overrides});
 
     return this;
   }