@cdc/map 4.25.10 → 4.26.1

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

@@ -8,6 +8,7 @@
     "geoBorderColor": "darkGray",
     "headerColor": "theme-blue",
     "title": "",
+    "titleStyle": "small",
     "showTitle": true,
     "showSidebar": true,
     "showDownloadButton": true,
@@ -114,7 +115,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 +124,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 +177,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 +186,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

@@ -17,7 +17,7 @@ type BubbleListProps = {
   customProjection?: GeoProjection
 }
 
-export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
+const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
   const { config, tooltipId, runtimeData, runtimeLegend } = useContext<MapContext>(ConfigContext)
   const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
   const { columns, data, general, visual } = config

package/src/components/CityList.tsx

@@ -4,8 +4,7 @@ import { GlyphCircle, GlyphDiamond, GlyphSquare, GlyphStar, GlyphTriangle } from
 import ConfigContext from '../context'
 import { useLegendMemoContext } from '../context/LegendMemoContext'
 import { supportedCities } from '../data/supported-geos'
-import { getFilterControllingStatesPicked } from './UsaMap/helpers/map'
-import { displayGeoName, getGeoStrokeColor, SVG_HEIGHT, SVG_PADDING, SVG_WIDTH, isLegendItemDisabled } from '../helpers'
+import { displayGeoName, getGeoStrokeColor, isLegendItemDisabled } from '../helpers'
 import useGeoClickHandler from '../hooks/useGeoClickHandler'
 import useApplyTooltipsToGeo from '../hooks/useApplyTooltipsToGeo'
 import { applyLegendToRow } from '../helpers/applyLegendToRow'
@@ -19,7 +18,7 @@ type CityListProps = {
 }
 
 const CityList: React.FC<CityListProps> = ({ setSharedFilterValue, isFilterValueSupported, tooltipId, projection }) => {
-  const { config, topoData, runtimeData, position, runtimeLegend } = useContext(ConfigContext)
+  const { config, runtimeData, position, runtimeLegend } = useContext(ConfigContext)
   const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
   const { geoClickHandler } = useGeoClickHandler()
   const { applyTooltipsToGeo } = useApplyTooltipsToGeo()
@@ -146,20 +145,12 @@ const CityList: React.FC<CityListProps> = ({ setSharedFilterValue, isFilterValue
     }
 
     if (geoData?.[longitudeColumnName] && geoData?.[latitudeColumnName] && config.general.geoType === 'single-state') {
-      const statesPicked = getFilterControllingStatesPicked(config, runtimeData)
-      const _statesPickedData = (topoData as any)?.states?.find(s => statesPicked.includes(s.properties.name))
-
-      const newProjection = projection.fitExtent(
-        [
-          [SVG_PADDING, SVG_PADDING],
-          [SVG_WIDTH - SVG_PADDING, SVG_HEIGHT - SVG_PADDING]
-        ],
-        _statesPickedData
-      )
-      let coords = [Number(geoData?.[longitudeColumnName]), Number(geoData?.[latitudeColumnName])]
-      transform = `translate(${newProjection(coords)}) scale(${
-        config.visual.geoCodeCircleSize / ((position as any).zoom > 1 ? (position as any).zoom : 1)
-      })`
+      // For single-state maps, the projection passed in is already fitted from CustomProjection
+      // We just need to project the coordinates and apply zoom adjustment
+      const coords = [Number(geoData?.[longitudeColumnName]), Number(geoData?.[latitudeColumnName])]
+      const projectedCoords = projection(coords)
+      const zoomScale = (position as any).zoom > 1 ? 1 / (position as any).zoom : 1
+      transform = `translate(${projectedCoords}) scale(${zoomScale})`
       needsPointer = true
     }
 
@@ -216,10 +207,25 @@ const CityList: React.FC<CityListProps> = ({ setSharedFilterValue, isFilterValue
       triangle: <GlyphTriangle {...shapeProps} />
     }
 
+    // Check if this city matches any additionalCityStyles
+    let shapeToUse = config.visual.cityStyle?.toLowerCase() || 'circle'
+    if (config.visual.additionalCityStyles && config.visual.additionalCityStyles.length > 0) {
+      for (const style of config.visual.additionalCityStyles) {
+        if (style.column && style.value && style.shape) {
+          const columnValue = geoData[style.column]
+          // Convert both to strings for comparison to handle different data types
+          if (String(columnValue) === String(style.value)) {
+            shapeToUse = style.shape.toLowerCase()
+            break
+          }
+        }
+      }
+    }
+
     // Render the city marker
     return (
       <g key={i} transform={transform} style={styles} className='geo-point' tabIndex={-1}>
-        {cityStyleShapes[config.visual.cityStyle?.toLowerCase() || 'circle']}
+        {cityStyleShapes[shapeToUse]}
       </g>
     )
   })