Merge pull request #13 from newrelic-experimental/fix-geo-countryname

Fix: Geo country name on tool tip

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "location-geo-map",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "scripts": {
     "start": "nr1 nerdpack:serve",
     "prettier": "prettier --write ."

visualizations/store-map-viz/components/LocationPopup.tsx

@@ -1,26 +1,45 @@
 import React from "react";
 import { Tooltip } from "react-leaflet";
 
-const LocationPopup = ({ location, config, title, sticky }) => {
-  const items = config.map((item) => {
-    return (
-      <>
+type AttributesListProps = {
+  location: any;
+  config: any;
+};
+
+type LocationPopupProps = {
+  location: any;
+  config: any;
+  title?: string;
+  sticky?: boolean;
+};
+
+const AttributesList = ({ location, config }: AttributesListProps) => {
+  const items = config.map((item, index) => {
+    const value = location[item.queryField];
+    const formattedValue =
+      typeof item.formatFn === "function" ? item.formatFn(value) : value;
+
+    return value ? (
+      <React.Fragment key={index}>
         <div className="popup-label">{item.label}:</div>
-        <div>
-          {typeof item.formatFn === "function"
-            ? item.formatFn?.(location[item.queryField])
-            : location[item.queryField]}
-        </div>
-      </>
-    );
+        <div>{formattedValue}</div>
+      </React.Fragment>
+    ) : null;
   });
 
-  return (
-    <Tooltip sticky={sticky}>
-      {title && title !== "" && <h4>{title}</h4>}
-      <div className="popup-grid">{items}</div>
-    </Tooltip>
-  );
+  return <div className="popup-grid">{items}</div>;
 };
 
+const LocationPopup = ({
+  location,
+  config,
+  title,
+  sticky,
+}: LocationPopupProps) => (
+  <Tooltip sticky={sticky}>
+    {title && <h4>{title}</h4>}
+    <AttributesList location={location} config={config} />
+  </Tooltip>
+);
+
 export default LocationPopup;

visualizations/store-map-viz/hooks/useRegionFeature.tsx

@@ -1,38 +1,68 @@
 import { useMemo } from "react";
 
-import countries from "../geo/countries.geojson.json";
+import countriesData from "../geo/countries.geojson.json";
 import geoUSStates from "../geo/us-states/us-states";
 import allUKRegions from "../geo/uk-regions/all-uk-regions";
 
-const useRegionFeature = (location) => {
+interface Location {
+  geoISOCountry?: string;
+  geoUSState?: string;
+  geoUKRegion?: string;
+}
+
+interface GeoJSONFeatureCollection {
+  type: "FeatureCollection";
+  features: GeoJSONFeature[];
+}
+
+interface GeoJSONFeature {
+  name?: string;
+  properties?: {
+    ADMIN?: string;
+    ISO_A3?: string;
+    ISO_A2?: string;
+    STATECODE?: string;
+    STATE?: string;
+    NAME?: string;
+  };
+  geometry?: {
+    type: string;
+    coordinates: number[][] | number[][][] | number[][][][];
+  };
+}
+
+const countries: GeoJSONFeatureCollection =
+  countriesData as GeoJSONFeatureCollection;
+
+const useRegionFeature = (location: Location): GeoJSONFeature | null => {
   return useMemo(() => {
-    let feature = null;
+    let feature: GeoJSONFeature | undefined = undefined;
 
     if (location.geoISOCountry) {
-      feature = countries.features.find((f) =>
-        [f.properties.ISO_A3, f.properties.ISO_A2].includes(
-          location.geoISOCountry,
-        ),
+      feature = countries.features.find((f: GeoJSONFeature) =>
+        [f.properties?.ISO_A3, f.properties?.ISO_A2].includes(
+          location.geoISOCountry
+        )
       );
       if (feature) {
-        feature.name = feature.properties.NAME;
+        feature.name = feature.properties?.ADMIN || "";
       }
     } else if (location.geoUSState) {
       feature = geoUSStates.features.find((f) =>
         [
           f.properties.STATECODE,
           f.properties.STATE,
           f.properties.NAME,
-        ].includes(location.geoUSState),
+        ].includes(location.geoUSState)
       );
       if (feature) {
-        feature.name = feature.properties.NAME;
+        feature.name = feature.properties?.NAME || "";
       }
     } else if (location.geoUKRegion) {
       feature = allUKRegions.find((r) => r.name === location.geoUKRegion);
     }
 
-    return feature;
+    return feature || null;
   }, [location.geoISOCountry, location.geoUSState, location.geoUKRegion]);
 };