diff --git a/package.json b/package.json index 5dfdd0d..10c3c3f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "location-geo-map", - "version": "2.3.1", + "version": "2.3.2", "scripts": { "start": "nr1 nerdpack:serve", "prettier": "prettier --write ." diff --git a/visualizations/store-map-viz/components/Region.tsx b/visualizations/store-map-viz/components/Region.tsx index b237877..6c49a9e 100644 --- a/visualizations/store-map-viz/components/Region.tsx +++ b/visualizations/store-map-viz/components/Region.tsx @@ -16,11 +16,7 @@ const Region = ({ const { regionColors } = useProps(); const { customColors } = useCustomColors(regionColors, false); - if (!regionFeature) { - console.log("Region not found for data, will not render", location); - return null; - } - + const gradientColor = getGradientColor(location.value); const style = useMemo(() => { @@ -53,6 +49,8 @@ const Region = ({ location.status, ]); + + // determine the tooltip title, memoized to avoid unnecessary recalculations const getTooltipTitle = () => { if (location.tooltip_header === "NONE" || location.tooltip_header === "") { @@ -60,11 +58,11 @@ const Region = ({ } return location.tooltip_header ? location.tooltip_header - : regionFeature.name; + : regionFeature?.name; }; const tooltipTitle = useMemo(getTooltipTitle, [ location.tooltip_header, - regionFeature.name, + regionFeature?.name, ]); // extracted onClick handler @@ -74,6 +72,11 @@ const Region = ({ } }; + if (!regionFeature) { + console.log("Region not found for data, will not render", location); + return null; + } + return (