@cdc/map 4.25.8 → 4.25.11

package/src/_stories/_mock/small_multiples/wastewater-map-small-multiples.json

@@ -0,0 +1,221 @@
+{
+  "annotations": [],
+  "general": {
+    "geoBorderColor": "darkGray",
+    "headerColor": "theme-blue",
+    "title": "",
+    "showTitle": true,
+    "showSidebar": true,
+    "showDownloadButton": false,
+    "showDownloadMediaButton": false,
+    "displayAsHex": false,
+    "displayStateLabels": false,
+    "territoriesAlwaysShow": false,
+    "language": "en",
+    "geoType": "us",
+    "geoLabelOverride": "State/Territory",
+    "hasRegions": false,
+    "fullBorder": false,
+    "type": "map",
+    "convertFipsCodes": true,
+    "palette": {
+      "isReversed": true
+    },
+    "allowMapZoom": true,
+    "hideGeoColumnInTooltip": false,
+    "hidePrimaryColumnInTooltip": false,
+    "statePicked": {
+      "fipsCode": "01",
+      "stateName": "Alabama"
+    },
+    "expandDataTable": false,
+    "annotationDropdownText": "Annotations",
+    "noStateFoundMessage": "Map Unavailable",
+    "subtext": "<div class=\"text-left\">Data last updated on <span data-timestamp=\"nwss_rsv_sc2_flua_combined_state_map:Data_as_of\"></span> and presented through <span data-timestamp=\"nwss_rsv_sc2_flua_combined_state_map:Data_Presented_Through\"></span>. ",
+    "navigationTarget": "_self"
+  },
+  "type": "map",
+  "color": "greenbluereverse",
+  "columns": {
+    "geo": {
+      "name": "State",
+      "label": "Location",
+      "tooltip": false,
+      "dataTable": true
+    },
+    "primary": {
+      "dataTable": true,
+      "tooltip": true,
+      "prefix": "",
+      "suffix": "",
+      "name": "activity_level_label",
+      "label": "Viral Activity Level",
+      "roundToPlace": 0
+    },
+    "navigate": {
+      "name": ""
+    },
+    "latitude": {
+      "name": ""
+    },
+    "longitude": {
+      "name": ""
+    },
+    "additionalColumn1": {
+      "label": "Sites Currently Reporting",
+      "dataTable": true,
+      "tooltips": false,
+      "prefix": "",
+      "suffix": "",
+      "name": "num_sites",
+      "tooltip": true
+    },
+    "additionalColumn2": {
+      "label": "Limited Coverage",
+      "dataTable": true,
+      "tooltips": false,
+      "prefix": "",
+      "suffix": "",
+      "tooltip": false,
+      "name": "hatch"
+    },
+    "additionalColumn3": {
+      "label": "",
+      "dataTable": false,
+      "tooltips": false,
+      "prefix": "",
+      "suffix": "",
+      "tooltip": true,
+      "useCommas": true,
+      "name": "hatch"
+    }
+  },
+  "legend": {
+    "descriptions": {},
+    "specialClasses": [],
+    "unified": false,
+    "singleColumn": false,
+    "singleRow": true,
+    "verticalSorted": false,
+    "showSpecialClassesLast": true,
+    "dynamicDescription": false,
+    "type": "category",
+    "numberOfItems": 8,
+    "position": "top",
+    "title": "Wastewater Viral Activity Level",
+    "categoryValuesOrder": ["Very Low", "Low", "Moderate", "High", "Very High", "No Data", "Minimal"],
+    "additionalCategories": ["No Data", "Very Low", "Low", "Moderate", "High", "Very High"],
+    "description": "",
+    "style": "gradient",
+    "subStyle": "linear blocks",
+    "tickRotation": "",
+    "singleColumnLegend": false,
+    "hideBorder": true
+  },
+  "filters": [],
+  "table": {
+    "label": "Data Table",
+    "expanded": false,
+    "limitHeight": true,
+    "height": "500",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "showFullGeoNameInCSV": false,
+    "forceDisplay": true,
+    "download": true,
+    "indexLabel": "State/Territory",
+    "wrapColumns": false,
+    "showDownloadLinkBelow": true
+  },
+  "tooltips": {
+    "appearanceType": "hover",
+    "linkLabel": "Learn More",
+    "capitalizeLabels": true,
+    "opacity": 90
+  },
+  "visual": {
+    "minBubbleSize": 1,
+    "maxBubbleSize": 20,
+    "extraBubbleBorder": false,
+    "cityStyle": "circle",
+    "geoCodeCircleSize": 2,
+    "showBubbleZeros": false,
+    "cityStyleLabel": "",
+    "additionalCityStyles": []
+  },
+  "mapPosition": {
+    "coordinates": [0, 30],
+    "zoom": 1
+  },
+  "map": {
+    "layers": [],
+    "patterns": [
+      {
+        "dataKey": "hatch",
+        "pattern": "lines",
+        "dataValue": "Limited Coverage",
+        "label": "Limited Coverage*",
+        "size": "medium"
+      }
+    ]
+  },
+  "hexMap": {
+    "type": "",
+    "shapeGroups": [
+      {
+        "legendTitle": "",
+        "legendDescription": "",
+        "items": [
+          {
+            "key": "",
+            "shape": "Arrow Up",
+            "column": "",
+            "operator": "=",
+            "value": ""
+          }
+        ]
+      }
+    ]
+  },
+  "smallMultiples": {
+    "mode": "by-column",
+    "tileColumn": "pathogen",
+    "tilesPerRowDesktop": 3,
+    "tilesPerRowMobile": "",
+    "tileOrderType": "custom",
+    "tileOrder": ["Influenza A", "RSV", "COVID-19"],
+    "tileTitles": {
+      "COVID-19": "COVID-19",
+      "Influenza A": "Influenza AAA",
+      "RSV": "RSV"
+    },
+    "synchronizedTooltips": true
+  },
+  "filterBehavior": "Filter Change",
+  "filterIntro": "",
+  "customColors": [
+    "#C8EFDA",
+    "#9FDAD0",
+    "#9FDAD0",
+    "#6BB0BD",
+    "#4B7F9B",
+    "#34547B",
+    "#B4B4B4",
+    "#B4B4B4",
+    "#B4B4B4",
+    "#B4B4B4"
+  ],
+  "datasets": {},
+  "dataFileName": "https://www.cdc.gov/wcms/vizdata/ncezid_didri/NWSSStateMapCombined.json",
+  "dataFileSourceType": "url",
+  "dataDescription": {
+    "horizontal": false,
+    "series": false
+  },
+  "version": "4.25.1",
+  "dataUrl": "https://www.cdc.gov/wcms/vizdata/ncezid_didri/NWSSStateMapCombined.json",
+  "migrations": {
+    "addColorMigration": true
+  }
+}

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/_stories/_mock/usa-state-gradient.json

@@ -114,7 +114,7 @@
     { "STATE": "Alabama", "Rate": 130, "Location": "Vehicle", "URL": "https://www.cdc.gov/" },
     { "STATE": "Alaska", "Rate": 40, "Location": "Work", "URL": "https://www.cdc.gov/" },
     { "STATE": "American Samoa", "Rate": 55, "Location": "Home", "URL": "https://www.cdc.gov/" },
-    { "STATE": "Arizona", "Rate": 57, "Location": "School", "URL": "https://www.cdc.gov/" },
+    { "STATE": "Arizona", "Rate": 0, "Location": "School", "URL": "https://www.cdc.gov/" },
     { "STATE": "Arkansas", "Rate": 60, "Location": "School", "URL": "https://www.cdc.gov/" },
     { "STATE": "California", "Rate": 30, "Location": "Home", "URL": "https://www.cdc.gov/" },
     { "STATE": "Colorado", "Rate": 40, "Location": "Vehicle", "URL": "https://www.cdc.gov/" },
@@ -123,7 +123,6 @@
     { "STATE": "DC", "Rate": 60, "Location": "Home", "URL": "https://www.cdc.gov/" },
     { "STATE": "Florida", "Rate": 30, "Location": "Work", "URL": "https://www.cdc.gov/" },
     { "STATE": "Georgia", "Rate": 40, "Location": "Work", "URL": "https://www.cdc.gov/" },
-    { "STATE": "Guam", "Rate": 55, "Location": "Home", "URL": "https://www.cdc.gov/" },
     { "STATE": "Hawaii", "Rate": 57, "Location": "School", "URL": "https://www.cdc.gov/" },
     { "STATE": "Idaho", "Rate": 60, "Location": "School", "URL": "https://www.cdc.gov/" },
     { "STATE": "Illinois", "Rate": 30, "Location": "Work", "URL": "https://www.cdc.gov/" },
@@ -177,7 +176,7 @@
     { "STATE": "Alabama", "Rate": 130, "Location": "Vehicle", "URL": "https://www.cdc.gov/" },
     { "STATE": "Alaska", "Rate": 40, "Location": "Work", "URL": "https://www.cdc.gov/" },
     { "STATE": "American Samoa", "Rate": 55, "Location": "Home", "URL": "https://www.cdc.gov/" },
-    { "STATE": "Arizona", "Rate": 57, "Location": "School", "URL": "https://www.cdc.gov/" },
+    { "STATE": "Arizona", "Rate": 0, "Location": "School", "URL": "https://www.cdc.gov/" },
     { "STATE": "Arkansas", "Rate": 60, "Location": "School", "URL": "https://www.cdc.gov/" },
     { "STATE": "California", "Rate": 30, "Location": "Home", "URL": "https://www.cdc.gov/" },
     { "STATE": "Colorado", "Rate": 40, "Location": "Vehicle", "URL": "https://www.cdc.gov/" },
@@ -186,7 +185,6 @@
     { "STATE": "DC", "Rate": 60, "Location": "Home", "URL": "https://www.cdc.gov/" },
     { "STATE": "Florida", "Rate": 30, "Location": "Work", "URL": "https://www.cdc.gov/" },
     { "STATE": "Georgia", "Rate": 40, "Location": "Work", "URL": "https://www.cdc.gov/" },
-    { "STATE": "Guam", "Rate": 55, "Location": "Home", "URL": "https://www.cdc.gov/" },
     { "STATE": "Hawaii", "Rate": 57, "Location": "School", "URL": "https://www.cdc.gov/" },
     { "STATE": "Idaho", "Rate": 60, "Location": "School", "URL": "https://www.cdc.gov/" },
     { "STATE": "Illinois", "Rate": 30, "Location": "Work", "URL": "https://www.cdc.gov/" },

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'
@@ -16,9 +17,9 @@ type BubbleListProps = {
   customProjection?: GeoProjection
 }
 
-export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
-  const { config, tooltipId, legendMemo, legendSpecialClassLastMemo, setRuntimeData, runtimeData, runtimeLegend } =
-    useContext<MapContext>(ConfigContext)
+const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
+  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>
       })
     )
   }