@cdc/map 4.25.7 → 4.25.10

package/src/_stories/_mock/us-bubble-cities.json

@@ -0,0 +1,306 @@
+{
+  "annotations": [],
+  "general": {
+    "title": "US Cities Bubble Map - CityList Test",
+    "subtext": "This bubble map uses CityList component to render bubble sizes based on data values",
+    "type": "bubble",
+    "geoType": "us",
+    "headerColor": "theme-green",
+    "showSidebar": true,
+    "showTitle": true,
+    "showDownloadButton": true,
+    "expandDataTable": false,
+    "backgroundColor": "#ffffff",
+    "geoBorderColor": "darkGray",
+    "territoriesLabel": "Territories",
+    "language": "en",
+    "hasRegions": false,
+    "showDownloadMediaButton": false,
+    "displayAsHex": false,
+    "displayStateLabels": false,
+    "fullBorder": false,
+    "palette": {
+      "isReversed": false
+    },
+    "allowMapZoom": true,
+    "hideGeoColumnInTooltip": false,
+    "hidePrimaryColumnInTooltip": false,
+    "territoriesAlwaysShow": false,
+    "geoLabelOverride": "",
+    "noDataFoundMessage": "No data found",
+    "convertFipsCodes": false
+  },
+  "type": "map",
+  "color": "orangered",
+  "columns": {
+    "geo": {
+      "name": "city",
+      "label": "City",
+      "tooltip": true,
+      "dataTable": true
+    },
+    "primary": {
+      "dataTable": true,
+      "tooltip": true,
+      "prefix": "",
+      "suffix": " cases",
+      "name": "covid_cases",
+      "label": "COVID-19 Cases"
+    },
+    "latitude": {
+      "name": "latitude",
+      "label": "Latitude"
+    },
+    "longitude": {
+      "name": "longitude", 
+      "label": "Longitude"
+    },
+    "navigate": {
+      "name": ""
+    }
+  },
+  "legend": {
+    "descriptions": {},
+    "specialClasses": [],
+    "unified": false,
+    "singleColumn": true,
+    "dynamicDescription": false,
+    "type": "equalinterval",
+    "numberOfItems": 5,
+    "position": "side",
+    "title": "COVID-19 Cases",
+    "showTitle": true,
+    "reversedOrder": false,
+    "singleColumnLegend": false,
+    "hideBorder": false
+  },
+  "filters": [],
+  "table": {
+    "label": "Data Table",
+    "expanded": false,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "showFullGeoNameInCSV": false,
+    "forceDisplay": true,
+    "download": true,
+    "indexLabel": "",
+    "wrapColumns": false,
+    "showDownloadLinkBelow": true
+  },
+  "tooltips": {
+    "appearanceType": "hover",
+    "linkLabel": "Learn More",
+    "capitalizeLabels": true,
+    "opacity": 90
+  },
+  "runtime": {
+    "editorErrorMessage": []
+  },
+  "visual": {
+    "minBubbleSize": 5,
+    "maxBubbleSize": 40,
+    "extraBubbleBorder": true,
+    "cityStyle": "circle",
+    "geoCodeCircleSize": 12,
+    "showBubbleZeros": true,
+    "cityStyleLabel": "City Bubbles",
+    "additionalCityStyles": []
+  },
+  "mapPosition": {
+    "coordinates": [0, 39],
+    "zoom": 1
+  },
+  "map": {
+    "layers": [],
+    "patterns": []
+  },
+  "hexMap": {
+    "type": "",
+    "shapeGroups": []
+  },
+  "data": [
+    {
+      "city": "New York",
+      "latitude": 40.7128,
+      "longitude": -74.0060,
+      "covid_cases": 2845
+    },
+    {
+      "city": "Los Angeles", 
+      "latitude": 34.0522,
+      "longitude": -118.2437,
+      "covid_cases": 2234
+    },
+    {
+      "city": "Chicago",
+      "latitude": 41.8781,
+      "longitude": -87.6298,
+      "covid_cases": 1567
+    },
+    {
+      "city": "Houston",
+      "latitude": 29.7604,
+      "longitude": -95.3698,
+      "covid_cases": 1890
+    },
+    {
+      "city": "Phoenix",
+      "latitude": 33.4484,
+      "longitude": -112.0740,
+      "covid_cases": 1234
+    },
+    {
+      "city": "Philadelphia",
+      "latitude": 39.9526,
+      "longitude": -75.1652,
+      "covid_cases": 1678
+    },
+    {
+      "city": "San Antonio",
+      "latitude": 29.4241,
+      "longitude": -98.4936,
+      "covid_cases": 987
+    },
+    {
+      "city": "San Diego",
+      "latitude": 32.7157,
+      "longitude": -117.1611,
+      "covid_cases": 1456
+    },
+    {
+      "city": "Dallas",
+      "latitude": 32.7767,
+      "longitude": -96.7970,
+      "covid_cases": 1789
+    },
+    {
+      "city": "San Jose",
+      "latitude": 37.3382,
+      "longitude": -121.8863,
+      "covid_cases": 934
+    },
+    {
+      "city": "Austin",
+      "latitude": 30.2672,
+      "longitude": -97.7431,
+      "covid_cases": 876
+    },
+    {
+      "city": "Jacksonville",
+      "latitude": 30.3322,
+      "longitude": -81.6557,
+      "covid_cases": 743
+    },
+    {
+      "city": "Fort Worth",
+      "latitude": 32.7555,
+      "longitude": -97.3308,
+      "covid_cases": 654
+    },
+    {
+      "city": "Columbus",
+      "latitude": 39.9612,
+      "longitude": -82.9988,
+      "covid_cases": 567
+    },
+    {
+      "city": "Charlotte",
+      "latitude": 35.2271,
+      "longitude": -80.8431,
+      "covid_cases": 789
+    },
+    {
+      "city": "San Francisco",
+      "latitude": 37.7749,
+      "longitude": -122.4194,
+      "covid_cases": 1123
+    },
+    {
+      "city": "Indianapolis",
+      "latitude": 39.7684,
+      "longitude": -86.1581,
+      "covid_cases": 445
+    },
+    {
+      "city": "Seattle",
+      "latitude": 47.6062,
+      "longitude": -122.3321,
+      "covid_cases": 823
+    },
+    {
+      "city": "Denver",
+      "latitude": 39.7392,
+      "longitude": -104.9903,
+      "covid_cases": 634
+    },
+    {
+      "city": "Boston",
+      "latitude": 42.3601,
+      "longitude": -71.0589,
+      "covid_cases": 976
+    },
+    {
+      "city": "El Paso",
+      "latitude": 31.7619,
+      "longitude": -106.4850,
+      "covid_cases": 312
+    },
+    {
+      "city": "Nashville",
+      "latitude": 36.1627,
+      "longitude": -86.7816,
+      "covid_cases": 456
+    },
+    {
+      "city": "Detroit",
+      "latitude": 42.3314,
+      "longitude": -83.0458,
+      "covid_cases": 578
+    },
+    {
+      "city": "Oklahoma City",
+      "latitude": 35.4676,
+      "longitude": -97.5164,
+      "covid_cases": 289
+    },
+    {
+      "city": "Portland",
+      "latitude": 45.5152,
+      "longitude": -122.6784,
+      "covid_cases": 387
+    },
+    {
+      "city": "Las Vegas",
+      "latitude": 36.1699,
+      "longitude": -115.1398,
+      "covid_cases": 534
+    },
+    {
+      "city": "Memphis",
+      "latitude": 35.1495,
+      "longitude": -90.0490,
+      "covid_cases": 267
+    },
+    {
+      "city": "Louisville",
+      "latitude": 38.2527,
+      "longitude": -85.7585,
+      "covid_cases": 189
+    },
+    {
+      "city": "Baltimore",
+      "latitude": 39.2904,
+      "longitude": -76.6122,
+      "covid_cases": 445
+    },
+    {
+      "city": "Milwaukee",
+      "latitude": 43.0389,
+      "longitude": -87.9065,
+      "covid_cases": 334
+    }
+  ]
+}

package/src/components/BubbleList.tsx

@@ -3,6 +3,7 @@ import { scaleLinear } from 'd3-scale'
 import { countryCoordinates } from '../data/country-coordinates'
 import stateCoordinates from '../data/state-coordinates'
 import ConfigContext, { MapDispatchContext } from '../context'
+import { useLegendMemoContext } from '../context/LegendMemoContext'
 import { type Coordinate, DataRow } from '../types/MapConfig'
 import useApplyTooltipsToGeo from '../hooks/useApplyTooltipsToGeo'
 import { applyLegendToRow } from '../helpers/applyLegendToRow'
@@ -17,8 +18,8 @@ type BubbleListProps = {
 }
 
 export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
-  const { config, tooltipId, legendMemo, legendSpecialClassLastMemo, setRuntimeData, runtimeData, runtimeLegend } =
-    useContext<MapContext>(ConfigContext)
+  const { config, tooltipId, runtimeData, runtimeLegend } = useContext<MapContext>(ConfigContext)
+  const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
   const { columns, data, general, visual } = config
   const { geoType, allowMapZoom } = general
   const { minBubbleSize, maxBubbleSize, showBubbleZeros, extraBubbleBorder } = visual
@@ -65,7 +66,7 @@ export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
     dispatch({ type: 'SET_POSITION', payload: { coordinates: reversedCoordinates, zoom: 3 } })
 
     // ...and show the data for the clicked country
-    setRuntimeData(_tempRuntimeData)
+    dispatch({ type: 'SET_RUNTIME_DATA', payload: _tempRuntimeData })
   }
 
   const sortedRuntimeData: DataRow = Object.values(runtimeData).sort((a, b) =>
@@ -77,7 +78,7 @@ export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
   if (geoType === 'world') {
     return (
       sortedRuntimeData &&
-      sortedRuntimeData.map(country => {
+      sortedRuntimeData.map((country, index) => {
         let coordinates = countryCoordinates[country.uid]
 
         if (!coordinates) return true
@@ -99,10 +100,9 @@ export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
         if (!projection(coordinates)) return true
 
         const circle = (
-          <>
+          <React.Fragment key={`circle-fragment-${countryName.replace(' ', '')}`}>
             <circle
               tabIndex={-1}
-              key={`circle-${countryName.replace(' ', '')}`}
               className={`bubble country--${countryName}`}
               cx={Number(projection(coordinates[1], coordinates[0])[0]) || 0}
               cy={Number(projection(coordinates[1], coordinates[0])[1]) || 0}
@@ -111,6 +111,7 @@ export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
               stroke={legendColors[0]}
               strokeWidth={1.25}
               fillOpacity={0.4}
+              onMouseEnter={() => {}}
               onPointerDown={e => {
                 pointerX = e.clientX
                 pointerY = e.clientY
@@ -138,7 +139,7 @@ export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
             {extraBubbleBorder && (
               <circle
                 tabIndex={-1}
-                key={`circle-${countryName.replace(' ', '')}`}
+                key={`circle-border-${countryName.replace(' ', '')}`}
                 className='bubble'
                 cx={Number(projection(coordinates[1], coordinates[0])[0]) || 0}
                 cy={Number(projection(coordinates[1], coordinates[0])[1]) || 0}
@@ -146,6 +147,7 @@ export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
                 fill={'transparent'}
                 stroke={'white'}
                 strokeWidth={0.5}
+                onMouseEnter={() => {}}
                 onPointerDown={e => {
                   pointerX = e.clientX
                   pointerY = e.clientY
@@ -170,11 +172,11 @@ export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
                 data-tooltip-html={toolTip}
               />
             )}
-          </>
+          </React.Fragment>
         )
 
         return (
-          <g key={`group-${countryName.replace(' ', '')}`} tabIndex={-1}>
+          <g key={`group-${index}-${countryName.replace(' ', '')}`} tabIndex={-1}>
             {circle}
           </g>
         )
@@ -185,7 +187,7 @@ export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
   if (geoType === 'us') {
     return (
       sortedRuntimeData &&
-      sortedRuntimeData.map(item => {
+      sortedRuntimeData.map((item, index) => {
         let stateData = stateCoordinates[item.uid]
         if (Number(size(item[primaryColumnName])) === 0) return
 
@@ -223,6 +225,7 @@ export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
               stroke={legendColors[0]}
               strokeWidth={1.25}
               fillOpacity={0.4}
+              onMouseEnter={() => {}}
               onPointerDown={e => {
                 pointerX = e.clientX
                 pointerY = e.clientY
@@ -249,7 +252,7 @@ export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
             {extraBubbleBorder && (
               <circle
                 tabIndex={-1}
-                key={`circle-${stateName.replace(' ', '')}`}
+                key={`circle-border-${stateName.replace(' ', '')}`}
                 className='bubble'
                 cx={projection(coordinates)[0] || 0}
                 cy={projection(coordinates)[1] || 0}
@@ -258,6 +261,7 @@ export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
                 stroke={'white'}
                 strokeWidth={0.5}
                 fillOpacity={0.4}
+                onMouseEnter={() => {}}
                 onPointerDown={e => {
                   pointerX = e.clientX
                   pointerY = e.clientY
@@ -285,7 +289,7 @@ export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
           </>
         )
 
-        return <g key={`group-${stateName.replace(' ', '')}`}>{circle}</g>
+        return <g key={`group-${index}-${stateName.replace(' ', '')}`}>{circle}</g>
       })
     )
   }