@cdc/map 4.25.3 → 4.25.5-1

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

@@ -1,4 +1,4 @@
-import { useState, useEffect, memo, useContext } from 'react'
+import React, { memo, useContext, useEffect, useState } from 'react'
 
 // 3rd party
 import { geoCentroid } from 'd3-geo'
@@ -15,10 +15,25 @@ import { supportedTerritories } from '../../../data/supported-geos'
 
 // Helpers
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
-import { getGeoFillColor, getGeoStrokeColor } from '../../../helpers/colors'
-import { handleMapAriaLabels } from '../../../helpers/handleMapAriaLabels'
+import { displayGeoName, getGeoFillColor, getGeoStrokeColor, handleMapAriaLabels, SVG_VIEWBOX } from '../../../helpers'
+import useGeoClickHandler from '../../../hooks/useGeoClickHandler'
+import useApplyTooltipsToGeo from '../../../hooks/useApplyTooltipsToGeo'
+import './UsaMap.Region.styles.css'
+import { applyLegendToRow } from '../../../helpers/applyLegendToRow'
+
+type TerritoryRectProps = {
+  posX?: number
+  tName: string
+}
+
+type RectProps = {
+  label: string
+  text: string
+  stroke: string
+  strokeWidth: number
+}
 
-const Rect = ({ label, text, stroke, strokeWidth, ...props }) => {
+const Rect: React.FC<RectProps> = ({ label, text, stroke, strokeWidth, ...props }) => {
   return (
     <svg viewBox='0 0 45 28'>
       <g {...props} strokeLinejoin='round'>
@@ -35,22 +50,17 @@ const Rect = ({ label, text, stroke, strokeWidth, ...props }) => {
   )
 }
 
-const UsaRegionMap = props => {
-  // prettier-ignore
-  const {
-    applyLegendToRow,
-    applyTooltipsToGeo,
-    data,
-    displayGeoName,
-    geoClickHandler,
-    state,
-    tooltipId
-  } = useContext(ConfigContext)
-
-  // "Choose State" options
-  const [extent, setExtent] = useState(null)
+const UsaRegionMap = () => {
+  const { data, config, tooltipId, legendMemo, legendSpecialClassLastMemo, runtimeLegend } = useContext(ConfigContext)
   const [focusedStates, setFocusedStates] = useState(null)
-  const [translate, setTranslate] = useState([455, 200])
+  const { geoClickHandler } = useGeoClickHandler()
+  const { applyTooltipsToGeo } = useApplyTooltipsToGeo()
+  const { general } = config
+  const { displayStateLabels, territoriesLabel, displayAsHex, type } = general
+  const tooltipInteractionType = config.tooltips.appearanceType
+  const isHex = displayAsHex
+  const [territoriesData, setTerritoriesData] = useState([])
+  const CIRCLE_RADIUS = 15
 
   useEffect(() => {
     const fetchData = async () => {
@@ -61,16 +71,6 @@ const UsaRegionMap = props => {
     fetchData()
   }, [])
 
-  // When returning from another map we want to reset the state
-  useEffect(() => {
-    setTranslate([455, 250])
-    setExtent(null)
-  }, [state.general.geoType])
-
-  const isHex = state.general.displayAsHex
-
-  const [territoriesData, setTerritoriesData] = useState([])
-
   const territoriesKeys = Object.keys(supportedTerritories) // data will have already mapped abbreviated territories to their full names
 
   useEffect(() => {
@@ -84,19 +84,18 @@ const UsaRegionMap = props => {
     return <></>
   }
 
-  const geoStrokeColor = getGeoStrokeColor(state)
-  const geoFillColor = getGeoFillColor(state)
+  const geoStrokeColor = getGeoStrokeColor(config)
+  const geoFillColor = getGeoFillColor(config)
 
   const territories = territoriesData.map(territory => {
     const Shape = Rect
 
     const territoryData = data[territory]
 
-    let toolTip
+    let toolTip: string
 
     let styles: React.CSSProperties = {
-      fill: geoFillColor,
-      color: '#202020'
+      fill: geoFillColor
     }
 
     const label = supportedTerritories[territory][1]
@@ -105,7 +104,7 @@ const UsaRegionMap = props => {
 
     toolTip = applyTooltipsToGeo(displayGeoName(territory), territoryData)
 
-    const legendColors = applyLegendToRow(territoryData)
+    const legendColors = applyLegendToRow(territoryData, config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
 
     if (legendColors) {
       const textColor = getContrastColor('#FFF', legendColors[0])
@@ -114,8 +113,8 @@ const UsaRegionMap = props => {
 
       // If we need to add a pointer cursor
       if (
-        (state.columns.navigate && territoryData[state.columns.navigate.name]) ||
-        state.tooltips.appearanceType === 'click'
+        (config.columns.navigate && territoryData[config.columns.navigate.name]) ||
+        tooltipInteractionType === 'click'
       ) {
         needsPointer = true
       }
@@ -148,46 +147,9 @@ const UsaRegionMap = props => {
     }
   })
 
-  const geoLabel = (geo, bgColor = '#FFFFFF', projection) => {
-    let centroid = projection(geoCentroid(geo))
-    let abbr = geo.properties.iso
-
-    if (undefined === abbr) return null
-
-    const textColor = getContrastColor('#FFF', bgColor)
-
-    let x = 0,
-      y = 5
-
-    return (
-      <g>
-        <line
-          x1={centroid[0]}
-          y1={centroid[1]}
-          x2={centroid[0] + x}
-          y2={centroid[1] + y}
-          stroke='rgba(0,0,0,.5)'
-          strokeWidth={1}
-        />
-        <text
-          x={4}
-          strokeWidth='0'
-          fontSize={13}
-          style={{ fill: '#202020' }}
-          alignmentBaseline='middle'
-          transform={`translate(${centroid[0] + x}, ${centroid[1] + y})`}
-        >
-          {abbr.substring(3)}
-        </text>
-      </g>
-    )
-  }
-
   // Constructs and displays markup for all geos on the map (except territories right now)
   const constructGeoJsx = (geographies, projection) => {
-    let showLabel = state.general.displayStateLabels
-
-    const geosJsx = geographies.map(({ feature: geo, path = '', index }) => {
+    return geographies.map(({ feature: geo, path = '', index }) => {
       const key = isHex ? geo.properties.iso + '-hex-group' : geo.properties.iso + '-group'
 
       let styles = {
@@ -198,8 +160,6 @@ const UsaRegionMap = props => {
       // Map the name from the geo data with the appropriate key for the processed data
       let geoKey = geo.properties.iso
 
-      // Manually add Washington D.C. in for Hex maps
-
       if (!geoKey) return
 
       const geoData = data[geoKey]
@@ -207,7 +167,7 @@ const UsaRegionMap = props => {
       let legendColors
       // Once we receive data for this geographic item, setup variables.
       if (geoData !== undefined) {
-        legendColors = applyLegendToRow(geoData)
+        legendColors = applyLegendToRow(geoData, config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
       }
 
       const geoDisplayName = displayGeoName(geoKey)
@@ -217,28 +177,25 @@ const UsaRegionMap = props => {
         const toolTip = applyTooltipsToGeo(geoDisplayName, geoData)
 
         styles = {
-          fill: state.general.type !== 'bubble' ? legendColors[0] : geoFillColor,
+          fill: type !== 'bubble' ? legendColors[0] : geoFillColor,
           cursor: 'default',
           '&:hover': {
-            fill: state.general.type !== 'bubble' ? legendColors[1] : geoFillColor
+            fill: type !== 'bubble' ? legendColors[1] : geoFillColor
           },
           '&:active': {
-            fill: state.general.type !== 'bubble' ? legendColors[2] : geoFillColor
+            fill: type !== 'bubble' ? legendColors[2] : geoFillColor
           }
         }
 
         // When to add pointer cursor
-        if (
-          (state.columns.navigate && geoData[state.columns.navigate.name]) ||
-          state.tooltips.appearanceType === 'click'
-        ) {
+        if ((config.columns.navigate && geoData[config.columns.navigate.name]) || tooltipInteractionType === 'click') {
           styles.cursor = 'pointer'
         }
 
-        const TerratoryRect = props => {
+        const TerritoryRect: React.FC<TerritoryRectProps> = props => {
           const { posX = 0, tName } = props
           const textColor = getContrastColor('#FFF', legendColors[0])
-          const geoStrokeColor = getGeoStrokeColor(state)
+          const geoStrokeColor = getGeoStrokeColor(config)
           return (
             <>
               <rect x={posX} width='36' height='24' rx='2' stroke={geoStrokeColor} strokeWidth='1' />
@@ -249,8 +206,6 @@ const UsaRegionMap = props => {
           )
         }
 
-        const circleRadius = 15
-
         return (
           <g
             key={key}
@@ -263,29 +218,29 @@ const UsaRegionMap = props => {
           >
             <path tabIndex={-1} className='single-geo' stroke={geoStrokeColor} strokeWidth={1} d={path} />
             <g id={`region-${index + 1}-label`}>
-              <circle fill='#fff' stroke='#999' cx={circleRadius} cy={circleRadius} r={circleRadius} />
+              <circle fill='#fff' stroke='#999' cx={CIRCLE_RADIUS} cy={CIRCLE_RADIUS} r={CIRCLE_RADIUS} />
               <text fill='#333' x='15px' y='20px' textAnchor='middle'>
                 {index + 1}
               </text>
             </g>
             {geoKey === 'region 2' && (
               <g id='region-2-territories'>
-                <TerratoryRect tName='PR' />
-                <TerratoryRect posX={45} tName='VI' />
+                <TerritoryRect tName='PR' />
+                <TerritoryRect posX={45} tName='VI' />
               </g>
             )}
 
             {geoKey === 'region 9' && (
               <g id='region-9-territories'>
                 <g className='region-9-row1'>
-                  <TerratoryRect tName='AS' />
-                  <TerratoryRect posX={45} tName='GU' />
-                  <TerratoryRect posX={90} tName='MP' />
+                  <TerritoryRect tName='AS' />
+                  <TerritoryRect posX={45} tName='GU' />
+                  <TerritoryRect posX={90} tName='MP' />
                 </g>
                 <g className='region-9-row2'>
-                  <TerratoryRect tName='FM' />
-                  <TerratoryRect posX={45} tName='PW' />
-                  <TerratoryRect posX={90} tName='MH' />
+                  <TerritoryRect tName='FM' />
+                  <TerritoryRect posX={45} tName='PW' />
+                  <TerritoryRect posX={90} tName='MH' />
                 </g>
               </g>
             )}
@@ -297,24 +252,22 @@ const UsaRegionMap = props => {
       return (
         <g key={key} className='geo-group' style={styles}>
           <path tabIndex={-1} className='single-geo' stroke={geoStrokeColor} strokeWidth={1} d={path} />
-          {(isHex || showLabel) && geoLabel(geo, styles.fill, projection)}
         </g>
       )
     })
-    return geosJsx
   }
 
   return (
     <ErrorBoundary component='UsaRegionMap'>
-      <svg viewBox='0 0 880 500' role='img' aria-label={handleMapAriaLabels(state)}>
+      <svg viewBox={SVG_VIEWBOX} role='img' aria-label={handleMapAriaLabels(config)}>
         <Mercator data={focusedStates} scale={620} translate={[1500, 735]}>
           {({ features, projection }) => constructGeoJsx(features, projection)}
         </Mercator>
-        {state.annotations.length > 0 && <Annotation.Draggable />}
+        {config.annotations.length > 0 && <Annotation.Draggable />}
       </svg>
       {territories.length > 0 && (
         <section className='territories'>
-          <span className='label'>{state.general.territoriesLabel}</span>
+          <span className='label'>{territoriesLabel}</span>
           {territories}
         </section>
       )}

package/src/components/UsaMap/components/UsaMap.SingleState.styles.css

@@ -0,0 +1,10 @@
+.countyMapGroup {
+  transition: transform 1s;
+  will-change: transform;
+  transform-origin: center;
+  stroke: none !important;
+}
+
+.countyMapGroup--no-transition {
+  transition: none !important;
+}

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

@@ -1,75 +1,73 @@
-import { useEffect, memo, useContext, useRef, useState } from 'react'
+import { useEffect, memo, useContext } from 'react'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { geoPath } from 'd3-geo'
 import { CustomProjection } from '@visx/geo'
 import Loading from '@cdc/core/components/Loading'
 import { geoAlbersUsaTerritories } from 'd3-composite-projections'
 import CityList from '../../CityList'
-import ConfigContext from '../../../context'
+import ConfigContext, { MapDispatchContext } from '../../../context'
 import Annotation from '../../Annotation'
 import SingleState from './SingleState'
-import { getTopoData, getCurrentTopoYear, isTopoReady } from './../helpers/map'
 import ZoomableGroup from '../../ZoomableGroup'
 import ZoomControls from '../../ZoomControls'
 import { MapContext } from '../../../types/MapContext'
 import useStateZoom from '../../../hooks/useStateZoom'
 import { Text } from '@visx/text'
-import { getGeoStrokeColor } from '../../../helpers/colors'
-import { handleMapAriaLabels } from '../../../helpers/handleMapAriaLabels'
-import { titleCase } from '../../../helpers/titleCase'
 
-// SVG ITEMS
-const WIDTH = 880
-const HEIGHT = 500
-const PADDING = 25
+import './UsaMap.SingleState.styles.css'
 
-const SingleStateMap = props => {
+// map-level helpers
+import { titleCase, handleMapAriaLabels, getGeoStrokeColor, MAX_ZOOM_LEVEL } from '../../../helpers'
+
+// state-level helpers
+import { getTopoData, getCurrentTopoYear, isTopoReady } from '../helpers/map'
+import useGeoClickHandler from '../../../hooks/useGeoClickHandler'
+import { SVG_WIDTH, SVG_HEIGHT, SVG_PADDING, SVG_VIEWBOX } from '../../../helpers'
+
+const SingleStateMap = () => {
   const {
-    state,
-    applyTooltipsToGeo,
-    data,
-    geoClickHandler,
-    applyLegendToRow,
-    displayGeoName,
+    config,
     setSharedFilterValue,
     isFilterValueSupported,
     runtimeFilters,
     tooltipId,
     position,
-    setPosition,
     stateToShow,
     topoData,
-    setTopoData,
     scale,
     translate,
-    setStateToShow
+    legendMemo,
+    legendSpecialClassLastMemo
   } = useContext<MapContext>(ConfigContext)
 
+  const dispatch = useContext(MapDispatchContext)
   const { handleMoveEnd, handleZoomIn, handleZoomOut, handleReset, projection, statePicked } = useStateZoom(topoData)
+  const { geoClickHandler } = useGeoClickHandler()
 
   const cityListProjection = geoAlbersUsaTerritories()
-    .translate([WIDTH / 2, HEIGHT / 2])
+    .translate([SVG_WIDTH / 2, SVG_HEIGHT / 2])
     .scale(1)
-  const geoStrokeColor = getGeoStrokeColor(state)
+  const geoStrokeColor = getGeoStrokeColor(config)
   const path = geoPath().projection(projection)
 
   useEffect(() => {
-    setStateToShow(topoData?.states?.find(s => s.properties.name === state.general.statePicked.stateName))
+    const stateToShow = topoData?.states?.find(s => s.properties.name === config.general.statePicked.stateName)
+    dispatch({ type: 'SET_STATE_TO_SHOW', payload: stateToShow })
   }, [statePicked])
 
   useEffect(() => {
-    let currentYear = getCurrentTopoYear(state, runtimeFilters)
+    let currentYear = getCurrentTopoYear(config, runtimeFilters)
 
-    if (currentYear !== topoData.year) {
+    if (currentYear !== topoData?.year) {
       getTopoData(currentYear).then(response => {
-        setTopoData(response)
+        dispatch({ type: 'SET_TOPO_DATA', payload: response })
       })
     }
-  }, [state.general.countyCensusYear, state.general.filterControlsCountyYear, JSON.stringify(runtimeFilters)])
+  }, [config.general.countyCensusYear, config.general.filterControlsCountyYear, JSON.stringify(runtimeFilters)])
 
-  if (!isTopoReady(topoData, state, runtimeFilters)) {
+  if (!isTopoReady(topoData, config, runtimeFilters)) {
     return (
-      <div style={{ height: `${HEIGHT}px` }}>
+      <div style={{ height: `${SVG_HEIGHT}px` }}>
         <Loading />
       </div>
     )
@@ -77,16 +75,16 @@ const SingleStateMap = props => {
 
   const checkForNoData = () => {
     // If no statePicked, return true
-    if (!state.general.statePicked.fipsCode) return true
+    if (!config.general.statePicked.fipsCode) return true
   }
 
   // Constructs and displays markup for all geos on the map (except territories right now)
-  const constructGeoJsx = (geographies, projection) => {
+  const constructGeoJsx = geographies => {
     const counties = geographies[0].feature.counties
 
     let geosJsx = []
 
-    // Push state lines
+    // Push config lines
     geosJsx.push(
       // prettier-ignore
       <SingleState.StateOutput
@@ -113,12 +111,7 @@ const SingleStateMap = props => {
       <CityList
         projection={cityListProjection}
         key='cities'
-        data={data}
-        state={state}
         geoClickHandler={geoClickHandler}
-        applyTooltipsToGeo={applyTooltipsToGeo}
-        displayGeoName={displayGeoName}
-        applyLegendToRow={applyLegendToRow}
         titleCase={titleCase}
         setSharedFilterValue={setSharedFilterValue}
         isFilterValueSupported={isFilterValueSupported}
@@ -130,28 +123,28 @@ const SingleStateMap = props => {
   }
   return (
     <ErrorBoundary component='SingleStateMap'>
-      {statePicked && state.general.allowMapZoom && state.general.statePicked.fipsCode && (
+      {statePicked && config.general.allowMapZoom && config.general.statePicked.fipsCode && (
         <svg
-          viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
+          viewBox={SVG_VIEWBOX}
           preserveAspectRatio='xMinYMin'
           className='svg-container'
           role='img'
-          aria-label={handleMapAriaLabels(state)}
+          aria-label={handleMapAriaLabels(config)}
         >
           <ZoomableGroup
             center={position.coordinates}
             zoom={position.zoom}
             minZoom={1} // Adjust this value if needed
-            maxZoom={4} // Adjust this value to limit the maximum zoom level
+            maxZoom={MAX_ZOOM_LEVEL}
             onMoveEnd={handleMoveEnd}
             projection={projection}
-            width={880}
-            height={500}
+            width={SVG_WIDTH}
+            height={SVG_HEIGHT}
           >
             <rect
               className='background center-container ocean'
-              width={WIDTH}
-              height={HEIGHT}
+              width={SVG_WIDTH}
+              height={SVG_HEIGHT}
               fillOpacity={1}
               fill='white'
             ></rect>
@@ -159,14 +152,14 @@ const SingleStateMap = props => {
               data={[
                 {
                   states: topoData?.states,
-                  counties: topoData.counties.filter(c => c.id.substring(0, 2) === state.general.statePicked.fipsCode)
+                  counties: topoData.counties.filter(c => c.id.substring(0, 2) === config.general.statePicked.fipsCode)
                 }
               ]}
               projection={geoAlbersUsaTerritories}
               fitExtent={[
                 [
-                  [PADDING, PADDING],
-                  [WIDTH - PADDING, HEIGHT - PADDING]
+                  [SVG_PADDING, SVG_PADDING],
+                  [SVG_WIDTH - SVG_PADDING, SVG_HEIGHT - SVG_PADDING]
                 ],
                 stateToShow
               ]}
@@ -176,7 +169,7 @@ const SingleStateMap = props => {
                   <g
                     id='mapGroup'
                     className={`countyMapGroup ${
-                      state.general.geoType === 'single-state' ? `countyMapGroup--no-transition` : ''
+                      config.general.geoType === 'single-state' ? `countyMapGroup--no-transition` : ''
                     }`}
                     transform={`translate(${translate}) scale(${scale})`}
                     data-scale=''
@@ -187,22 +180,22 @@ const SingleStateMap = props => {
                 )
               }}
             </CustomProjection>
-            {state.annotations.length > 0 && <Annotation.Draggable />}
+            {config.annotations.length > 0 && <Annotation.Draggable />}
           </ZoomableGroup>
         </svg>
       )}
-      {statePicked && !state.general.allowMapZoom && state.general.statePicked.fipsCode && (
+      {statePicked && !config.general.allowMapZoom && config.general.statePicked.fipsCode && (
         <svg
-          viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
+          viewBox={SVG_VIEWBOX}
           preserveAspectRatio='xMinYMin'
           className='svg-container'
           role='img'
-          aria-label={handleMapAriaLabels(state)}
+          aria-label={handleMapAriaLabels(config)}
         >
           <rect
             className='background center-container ocean'
-            width={WIDTH}
-            height={HEIGHT}
+            width={SVG_WIDTH}
+            height={SVG_HEIGHT}
             fillOpacity={1}
             fill='white'
           ></rect>
@@ -210,14 +203,14 @@ const SingleStateMap = props => {
             data={[
               {
                 states: topoData?.states,
-                counties: topoData.counties.filter(c => c.id.substring(0, 2) === state.general.statePicked.fipsCode)
+                counties: topoData.counties.filter(c => c.id.substring(0, 2) === config.general.statePicked.fipsCode)
               }
             ]}
             projection={geoAlbersUsaTerritories}
             fitExtent={[
               [
-                [PADDING, PADDING],
-                [WIDTH - PADDING, HEIGHT - PADDING]
+                [SVG_PADDING, SVG_PADDING],
+                [SVG_WIDTH - SVG_PADDING, SVG_HEIGHT - SVG_PADDING]
               ],
               stateToShow
             ]}
@@ -227,7 +220,7 @@ const SingleStateMap = props => {
                 <g
                   id='mapGroup'
                   className={`countyMapGroup ${
-                    state.general.geoType === 'single-state' ? `countyMapGroup--no-transition` : ''
+                    config.general.geoType === 'single-state' ? `countyMapGroup--no-transition` : ''
                   }`}
                   transform={`translate(${translate}) scale(${scale})`}
                   data-scale=''
@@ -238,28 +231,28 @@ const SingleStateMap = props => {
               )
             }}
           </CustomProjection>
-          {state.annotations.length > 0 && <Annotation.Draggable />}
+          {config.annotations.length > 0 && <Annotation.Draggable />}
         </svg>
       )}
 
       {checkForNoData() && (
         <svg
-          viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
+          viewBox={SVG_VIEWBOX}
           preserveAspectRatio='xMinYMin'
           className='svg-container'
           role='img'
-          aria-label={handleMapAriaLabels(state)}
+          aria-label={handleMapAriaLabels(config)}
         >
           <Text
             verticalAnchor='start'
             textAnchor='middle'
-            x={WIDTH / 2}
-            width={WIDTH}
-            y={HEIGHT / 2}
+            x={SVG_WIDTH / 2}
+            width={SVG_WIDTH}
+            y={SVG_HEIGHT / 2}
             fontSize={18}
             style={{ fontSize: '28px', height: '18px' }}
           >
-            {state.general.noStateFoundMessage}
+            {config.general.noStateFoundMessage}
           </Text>
         </svg>
       )}