@cdc/map 4.25.8 → 4.25.11

package/src/components/UsaMap/components/UsaMap.Region.tsx

@@ -7,8 +7,12 @@ import { Mercator } from '@visx/geo'
 
 // Cdc Components
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 import ConfigContext from '../../../context'
+import { useLegendMemoContext } from '../../../context/LegendMemoContext'
 import Annotation from '../../Annotation'
+import SmallMultiples from '../../SmallMultiples/SmallMultiples'
 
 // Data
 import { supportedTerritories } from '../../../data/supported-geos'
@@ -20,6 +24,7 @@ import useGeoClickHandler from '../../../hooks/useGeoClickHandler'
 import useApplyTooltipsToGeo from '../../../hooks/useApplyTooltipsToGeo'
 import './UsaMap.Region.styles.css'
 import { applyLegendToRow } from '../../../helpers/applyLegendToRow'
+import { useSynchronizedGeographies } from '../../../hooks/useSynchronizedGeographies'
 
 type TerritoryRectProps = {
   posX?: number
@@ -51,10 +56,12 @@ const Rect: React.FC<RectProps> = ({ label, text, stroke, strokeWidth, ...props
 }
 
 const UsaRegionMap = () => {
-  const { data, config, tooltipId, legendMemo, legendSpecialClassLastMemo, runtimeLegend } = useContext(ConfigContext)
+  const { runtimeData, config, tooltipId, runtimeLegend, interactionLabel } = useContext(ConfigContext)
+  const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
   const [focusedStates, setFocusedStates] = useState(null)
   const { geoClickHandler } = useGeoClickHandler()
   const { applyTooltipsToGeo } = useApplyTooltipsToGeo()
+  const { getSyncProps, syncHandlers } = useSynchronizedGeographies()
   const { general } = config
   const { displayStateLabels, territoriesLabel, displayAsHex, type } = general
   const tooltipInteractionType = config.tooltips.appearanceType
@@ -75,22 +82,27 @@ const UsaRegionMap = () => {
 
   useEffect(() => {
     // Territories need to show up if they're in the data at all, not just if they're "active". That's why this is different from Cities
-    const territoriesList = territoriesKeys.filter(key => data[key])
+    const territoriesList = territoriesKeys.filter(key => runtimeData[key])
 
     setTerritoriesData(territoriesList)
-  }, [data])
+  }, [runtimeData])
 
   if (!focusedStates) {
     return <></>
   }
 
+  // Early return for small multiples rendering
+  if (config.smallMultiples?.mode) {
+    return <SmallMultiples />
+  }
+
   const geoStrokeColor = getGeoStrokeColor(config)
   const geoFillColor = getGeoFillColor(config)
 
   const territories = territoriesData.map(territory => {
     const Shape = Rect
 
-    const territoryData = data[territory]
+    const territoryData = runtimeData[territory]
 
     let toolTip: string
 
@@ -162,7 +174,7 @@ const UsaRegionMap = () => {
 
       if (!geoKey) return
 
-      const geoData = data[geoKey]
+      const geoData = runtimeData[geoKey]
 
       let legendColors
       // Once we receive data for this geographic item, setup variables.
@@ -208,6 +220,7 @@ const UsaRegionMap = () => {
 
         return (
           <g
+            {...getSyncProps(geoKey)}
             key={key}
             className='geo-group'
             style={styles}
@@ -215,6 +228,24 @@ const UsaRegionMap = () => {
             data-tooltip-id={`tooltip__${tooltipId}`}
             data-tooltip-html={toolTip}
             tabIndex={-1}
+            onMouseEnter={e => {
+              // Track hover analytics event if this is a new location
+              const locationName = geoDisplayName.replace(/[^a-zA-Z0-9]/g, '_')
+              publishAnalyticsEvent({
+                vizType: config.type,
+                vizSubType: getVizSubType(config),
+                eventType: `map_hover`,
+                eventAction: 'hover',
+                eventLabel: interactionLabel,
+                vizTitle: getVizTitle(config),
+                location: geoDisplayName,
+                specifics: `location: ${locationName?.toLowerCase()}`
+              })
+              syncHandlers.onMouseEnter(geoKey, e.clientY)
+            }}
+            onMouseLeave={() => {
+              syncHandlers.onMouseLeave()
+            }}
           >
             <path tabIndex={-1} className='single-geo' stroke={geoStrokeColor} strokeWidth={1} d={path} />
             <g id={`region-${index + 1}-label`}>

package/src/components/UsaMap/components/UsaMap.SingleState.tsx

@@ -13,6 +13,7 @@ import ZoomControls from '../../ZoomControls'
 import { MapContext } from '../../../types/MapContext'
 import useStateZoom from '../../../hooks/useStateZoom'
 import { Text } from '@visx/text'
+import SmallMultiples from '../../SmallMultiples/SmallMultiples'
 
 import './UsaMap.SingleState.styles.css'
 
@@ -37,11 +38,12 @@ const SingleStateMap: React.FC = () => {
     position,
     topoData,
     scale,
-    translate
+    translate,
+    useDynamicViewbox
   } = useContext<MapContext>(ConfigContext)
 
   const dispatch = useContext(MapDispatchContext)
-  const { handleMoveEnd, handleZoomIn, handleZoomOut, handleReset, projection } = useStateZoom(topoData)
+  const { handleMoveEnd, handleZoomIn, handleZoomOut, handleZoomReset, projection, bounds } = useStateZoom(topoData)
 
   // Memoize statesPicked to prevent creating new arrays on every render
   const statesPicked = useMemo(() => {
@@ -62,6 +64,19 @@ const SingleStateMap: React.FC = () => {
   const geoStrokeColor = getGeoStrokeColor(config)
   const path = geoPath().projection(projection)
 
+  const dynamicViewBox = useMemo(() => {
+    if (!useDynamicViewbox || !bounds) {
+      return SVG_VIEWBOX
+    }
+
+    const x = Math.floor(bounds[0][0] - SVG_PADDING)
+    const y = Math.floor(bounds[0][1] - SVG_PADDING)
+    const width = Math.ceil(bounds[1][0] - bounds[0][0] + SVG_PADDING * 2)
+    const height = Math.ceil(bounds[1][1] - bounds[0][1] + SVG_PADDING * 2)
+
+    return `${x} ${y} ${width} ${height}`
+  }, [useDynamicViewbox, bounds])
+
   useEffect(() => {
     let currentYear = getCurrentTopoYear(config, runtimeFilters)
 
@@ -70,7 +85,7 @@ const SingleStateMap: React.FC = () => {
         dispatch({ type: 'SET_TOPO_DATA', payload: response })
       })
     }
-  }, [runtimeFilters?.length, topoData?.year])
+  }, [config.general.countyCensusYear, config.general.filterControlsCountyYear, JSON.stringify(runtimeFilters)])
 
   if (!isTopoReady(topoData, config, runtimeFilters)) {
     return (
@@ -80,6 +95,11 @@ const SingleStateMap: React.FC = () => {
     )
   }
 
+  // Early return for small multiples rendering
+  if (config.smallMultiples?.mode) {
+    return <SmallMultiples />
+  }
+
   const checkForNoData = () => {
     // If no statesPicked, return true
     if (statesPicked?.every(sp => !sp.fipsCode)) return true
@@ -129,9 +149,9 @@ const SingleStateMap: React.FC = () => {
   }
   return (
     <ErrorBoundary component='SingleStateMap'>
-      {statesPicked.length && config.general.allowMapZoom && statesPicked.some(sp => sp.fipsCode) && (
+      {!!statesPicked.length && config.general.allowMapZoom && statesPicked.some(sp => sp.fipsCode) && (
         <svg
-          viewBox={SVG_VIEWBOX}
+          viewBox={dynamicViewBox}
           preserveAspectRatio='xMinYMin'
           className='svg-container'
           role='img'
@@ -192,9 +212,9 @@ const SingleStateMap: React.FC = () => {
           </ZoomableGroup>
         </svg>
       )}
-      {statesPicked && !config.general.allowMapZoom && statesPicked.some(sp => sp.fipsCode) && (
+      {!!statesPicked && !config.general.allowMapZoom && statesPicked.some(sp => sp.fipsCode) && (
         <svg
-          viewBox={SVG_VIEWBOX}
+          viewBox={dynamicViewBox}
           preserveAspectRatio='xMinYMin'
           className='svg-container'
           role='img'
@@ -247,7 +267,7 @@ const SingleStateMap: React.FC = () => {
 
       {checkForNoData() && (
         <svg
-          viewBox={SVG_VIEWBOX}
+          viewBox={dynamicViewBox}
           preserveAspectRatio='xMinYMin'
           className='svg-container'
           role='img'
@@ -262,7 +282,7 @@ const SingleStateMap: React.FC = () => {
             fontSize={18}
             style={{ fontSize: '28px', height: '18px' }}
           >
-            {config.general.noStateFoundMessage}
+            {config.general.noDataMessage}
           </Text>
         </svg>
       )}
@@ -270,7 +290,7 @@ const SingleStateMap: React.FC = () => {
         // prettier-ignore
         handleZoomIn={handleZoomIn}
         handleZoomOut={handleZoomOut}
-        handleReset={handleReset}
+        handleZoomReset={handleZoomReset}
       />
     </ErrorBoundary>
   )

package/src/components/UsaMap/components/UsaMap.State.tsx

@@ -1,6 +1,8 @@
 import React, { useState, useEffect, useContext, useRef } from 'react'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 // United States Topojson resources
 import hexTopoJSON from '../data/us-hex-topo.json'
@@ -20,9 +22,12 @@ import Annotation from '../../Annotation'
 import Territory from './Territory'
 
 import ConfigContext, { MapDispatchContext } from '../../../context'
+import { useLegendMemoContext } from '../../../context/LegendMemoContext'
 import { MapContext } from '../../../types/MapContext'
 import { checkColorContrast, getContrastColor, outlinedTextColor } from '@cdc/core/helpers/cove/accessibility'
 import TerritoriesSection from './TerritoriesSection'
+import SmallMultiples from '../../SmallMultiples'
+import { useSynchronizedGeographies } from '../../../hooks/useSynchronizedGeographies'
 
 import { isMobileStateLabelViewport } from '@cdc/core/helpers/viewports'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
@@ -69,20 +74,25 @@ const nudges = {
 
 const UsaMap = () => {
   const {
-    data,
+    runtimeData,
     setSharedFilterValue,
     config,
     setConfig,
     tooltipId,
     mapId,
     logo,
-    legendMemo,
-    legendSpecialClassLastMemo,
     currentViewport,
+    vizViewport,
+    dimensions,
     translate,
-    runtimeLegend
+    runtimeLegend,
+    interactionLabel
   } = useContext<MapContext>(ConfigContext)
 
+  const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
+
+  const { getSyncProps, syncHandlers } = useSynchronizedGeographies()
+
   let isFilterValueSupported = false
   const { general, columns, tooltips, hexMap, map, annotations } = config
   const { displayAsHex } = general
@@ -120,14 +130,14 @@ const UsaMap = () => {
 
   const legendMemoUpdated = focusedStates?.every(geo => {
     const geoKey = geo.properties.iso
-    const geoData = data[geoKey]
+    const geoData = runtimeData[geoKey]
     const hash = hashObj(geoData)
     return legendMemo.current.has(hash)
   })
 
   // we use dataRef so that we can use the old data when legendMemo has not been updated yet
   // prevents flickering of the map when filter is changed
-  if (legendMemoUpdated) dataRef.current = data
+  if (legendMemoUpdated) dataRef.current = runtimeData
 
   useEffect(() => {
     const fetchData = async () => {
@@ -153,18 +163,22 @@ const UsaMap = () => {
       setTerritoriesData(territoriesKeys)
     } else {
       // Territories need to show up if they're in the data at all, not just if they're "active". That's why this is different from Cities
-      const territoriesList = territoriesKeys.filter(key => data?.[key])
+      const territoriesList = territoriesKeys.filter(key => runtimeData?.[key])
       setTerritoriesData(territoriesList)
     }
-  }, [data, dataRef.current, general.territoriesAlwaysShow])
+  }, [runtimeData, dataRef.current, general.territoriesAlwaysShow])
 
   const geoStrokeColor = getGeoStrokeColor(config)
   const geoFillColor = getGeoFillColor(config)
 
+  // Chrome needs wider stroke for small maps or it doesn't render the pattern
+  const mapWidth = dimensions?.[0] || 880
+  const patternLinesStrokeWidth = mapWidth < 200 ? 1.75 : mapWidth < 375 ? 1.25 : 0.75
+
   const territories = territoriesData.map((territory, territoryIndex) => {
     const Shape = displayAsHex ? Territory.Hexagon : Territory.Rectangle
 
-    const territoryData = data?.[territory]
+    const territoryData = runtimeData?.[territory]
 
     let toolTip
 
@@ -186,6 +200,8 @@ const UsaMap = () => {
           strokeColor='#fff'
           territoryData={territoryData}
           backgroundColor={styles.fill}
+          getSyncProps={getSyncProps}
+          syncHandlers={syncHandlers}
         />
       )
 
@@ -238,6 +254,8 @@ const UsaMap = () => {
           territoryData={territoryData}
           tabIndex={-1}
           backgroundColor={styles.fill}
+          getSyncProps={getSyncProps}
+          syncHandlers={syncHandlers}
         />
       )
     }
@@ -252,6 +270,10 @@ const UsaMap = () => {
     return <></>
   }
 
+  if (config.smallMultiples?.mode) {
+    return <SmallMultiples />
+  }
+
   // Constructs and displays markup for all geos on the map (except territories right now)
   const constructGeoJsx = (geographies, projection) => {
     let showLabel = general.displayStateLabels
@@ -290,7 +312,7 @@ const UsaMap = () => {
 
       if (!geoKey) return
 
-      const geoData = data?.[geoKey]
+      const geoData = runtimeData?.[geoKey]
 
       let legendColors
 
@@ -433,6 +455,7 @@ const UsaMap = () => {
         return (
           <g data-name={geoName} key={key} tabIndex={-1}>
             <g
+              {...getSyncProps(geoKey)}
               className='geo-group'
               style={styles}
               onClick={() => geoClickHandler(geoDisplayName, geoData)}
@@ -440,6 +463,24 @@ const UsaMap = () => {
               data-tooltip-id={`tooltip__${tooltipId}`}
               data-tooltip-html={tooltip}
               tabIndex={-1}
+              onMouseEnter={e => {
+                // Track hover analytics event if this is a new location
+                const locationName = geoDisplayName.replace(/[^a-zA-Z0-9]/g, '_')
+                publishAnalyticsEvent({
+                  vizType: config.type,
+                  vizSubType: getVizSubType(config),
+                  eventType: `map_hover`,
+                  eventAction: 'hover',
+                  eventLabel: interactionLabel,
+                  vizTitle: getVizTitle(config),
+                  location: geoDisplayName,
+                  specifics: `location: ${locationName?.toLowerCase()}`
+                })
+                syncHandlers.onMouseEnter(geoKey, e.clientY)
+              }}
+              onMouseLeave={() => {
+                syncHandlers.onMouseLeave()
+              }}
             >
               {/* state path */}
               <path tabIndex={-1} className='single-geo' strokeWidth={1} d={path} />
@@ -481,7 +522,7 @@ const UsaMap = () => {
                         height={patternSizes[size] ?? 6}
                         width={patternSizes[size] ?? 6}
                         stroke={patternColor}
-                        strokeWidth={0.75}
+                        strokeWidth={patternLinesStrokeWidth}
                         orientation={['diagonalRightToLeft']}
                       />
                     )}
@@ -572,7 +613,7 @@ const UsaMap = () => {
           <text
             x={x}
             y={y}
-            fontSize={isMobileStateLabelViewport(currentViewport) ? 16 : 13}
+            fontSize={isMobileStateLabelViewport(vizViewport) ? 16 : 13}
             fontWeight={900}
             strokeWidth='1'
             paintOrder='stroke'

package/src/components/UsaMap/helpers/map.ts

@@ -1,7 +1,7 @@
 import { feature } from 'topojson-client'
 import usExtendedGeography from './../data/us-extended-geography.json'
 
-export const getCountyTopoURL = year => {
+const getCountyTopoURL = year => {
   return `https://www.cdc.gov/TemplatePackage/contrib/data/county-topography/cb_${year}_us_county_20m.json`
 }
 
@@ -85,7 +85,7 @@ export const isTopoReady = (topoData, state, runtimeFilters) => {
   return topoData?.year && (!currentYear || currentYear === topoData?.year)
 }
 
-export const hasMoreThanFromHash = (data: { [key: string]: any }): boolean => {
+const hasMoreThanFromHash = (data: { [key: string]: any }): boolean => {
   // Get all keys of the data object
   const keys = Object.keys(data)
 
@@ -96,7 +96,7 @@ export const hasMoreThanFromHash = (data: { [key: string]: any }): boolean => {
   return otherKeys.length > 0
 }
 
-export const getFilterControllingStatesPicked = (state, runtimeData) => {
+export const getFilterControllingStatesPicked = (state, runtimeData): string[] => {
   if (!state.general.filterControlsStatesPicked || !runtimeData) {
     return state?.general?.statesPicked?.map(sp => sp.stateName) || []
   } else {
@@ -111,7 +111,7 @@ export const getFilterControllingStatesPicked = (state, runtimeData) => {
       } else if (statesPickedFromFilter) {
         return [statesPickedFromFilter]
       } else {
-        return state?.general?.statesPicked?.map(sp => sp.stateName) || ['Alabama']
+        return state?.general?.statesPicked?.map(sp => sp.stateName) || []
       }
     }
     return state?.general?.statesPicked?.map(sp => sp.stateName) || []

package/src/components/UsaMap/helpers/shapes.ts

@@ -1,4 +1,4 @@
-export const drawCircle = (circle, context, state) => {
+const drawCircle = (circle, context, state) => {
   const percentOfOriginalSize = 0.75
   const scaleVal = 1
   const adjustedGeoRadius =
@@ -12,7 +12,8 @@ export const drawCircle = (circle, context, state) => {
   context.fill()
   context.stroke()
 }
-export const drawSquare = (square, context, state) => {
+
+const drawSquare = (square, context, state) => {
   const percentOfOriginalSize = 0.75
   const scaleVal = 1.75
   const sideLength = square.size * scaleVal
@@ -32,7 +33,7 @@ export const drawSquare = (square, context, state) => {
   context.stroke()
 }
 
-export const drawDiamond = (diamond, context, state) => {
+const drawDiamond = (diamond, context, state) => {
   const percentOfOriginalSize = 0.75
   const scaleVal = 2.2
   const fullSize = diamond.size * scaleVal
@@ -69,7 +70,8 @@ export const drawDiamond = (diamond, context, state) => {
   context.fill()
   context.stroke()
 }
-export const drawTriangle = (triangle, context, state) => {
+
+const drawTriangle = (triangle, context, state) => {
   const percentOfOriginalSize = 0.75
   const scaleVal = 2.2
   const baseLength = triangle.size * scaleVal
@@ -102,7 +104,8 @@ export const drawTriangle = (triangle, context, state) => {
   context.fill()
   context.stroke()
 }
-export const drawStar = (star, context, state) => {
+
+const drawStar = (star, context, state) => {
   const percentOfOriginalSize = 0.75
   const scaleVal = 2.2
   const spikes = star.spikes
@@ -155,7 +158,7 @@ export const drawStar = (star, context, state) => {
   context.stroke()
 }
 
-export const drawPin = (pin, ctx, state) => {
+const drawPin = (pin, ctx, state) => {
   const scaleVal = 10
   const percentOfOriginalSize = 0.75
   const baseSize = pin.size * scaleVal