diff --git a/src/worldmap.test.ts b/src/worldmap.test.ts index 58008d1..903007e 100644 --- a/src/worldmap.test.ts +++ b/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
Average lnd_7318u: 110'); + }); + }); + describe('when the data has three points', () => { beforeEach(() => { ctrl.data = new DataBuilder() diff --git a/src/worldmap.ts b/src/worldmap.ts index fcb478a..4408531 100644 --- a/src/worldmap.ts +++ b/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 `
${name}: ${value}`; + }) + .join(''); + + return `${locationName}: ${value} ${unit || ''}${freeDataDisplay}`.trim(); } } diff --git a/test/data_builder.ts b/test/data_builder.ts index 6d04f2f..9703abf 100644 --- a/test/data_builder.ts +++ b/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; }