@cdc/map 4.24.11 → 4.24.12-2

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

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react'
 import ConfigContext from '../../../../context'
 import { MapContext } from '../../../../types/MapContext'
+import { getGeoFillColor } from '../../../../helpers/colors'
 
 interface CountyOutputProps {
   counties: any[]
@@ -11,7 +12,10 @@ interface CountyOutputProps {
 }
 
 const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoStrokeColor, tooltipId }) => {
-  const { applyTooltipsToGeo, applyLegendToRow, displayGeoName, state, data, geoClickHandler } = useContext<MapContext>(ConfigContext)
+  const { applyTooltipsToGeo, applyLegendToRow, displayGeoName, state, data, geoClickHandler } =
+    useContext<MapContext>(ConfigContext)
+
+  const geoFillColor = getGeoFillColor(state)
   return (
     <>
       {counties.map(county => {
@@ -50,19 +54,49 @@ const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoS
           }
 
           // When to add pointer cursor
-          if ((state.columns.navigate && geoData[state.columns.navigate.name]) || state.tooltips.appearanceType === 'hover') {
+          if (
+            (state.columns.navigate && geoData[state.columns.navigate.name]) ||
+            state.tooltips.appearanceType === 'hover'
+          ) {
             styles.cursor = 'pointer'
           }
 
           return (
-            <g key={`key--${county.id}`} className={`county county--${geoDisplayName.split(' ').join('')} county--${geoData[state.columns.geo.name]}`} style={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} data-tooltip-id={`tooltip__${tooltipId}`} data-tooltip-html={toolTip}>
-              <path tabIndex={-1} className={`county`} stroke={geoStrokeColor} d={countyPath} strokeWidth={0.75 / scale} />
+            <g
+              key={`key--${county.id}`}
+              className={`county county--${geoDisplayName.split(' ').join('')} county--${
+                geoData[state.columns.geo.name]
+              }`}
+              style={styles}
+              onClick={() => geoClickHandler(geoDisplayName, geoData)}
+              data-tooltip-id={`tooltip__${tooltipId}`}
+              data-tooltip-html={toolTip}
+            >
+              <path
+                tabIndex={-1}
+                className={`county`}
+                stroke={geoStrokeColor}
+                d={countyPath}
+                strokeWidth={0.75 / scale}
+              />
             </g>
           )
         } else {
           return (
-            <g key={`key--${county.id}`} className={`county county--${geoDisplayName.split(' ').join('')}`} style={{ fill: '#e6e6e6' }} data-tooltip-id={`tooltip__${tooltipId}`} data-tooltip-html={toolTip}>
-              <path tabIndex={-1} className={`county`} stroke={geoStrokeColor} d={countyPath} strokeWidth={0.75 / scale} />
+            <g
+              key={`key--${county.id}`}
+              className={`county county--${geoDisplayName.split(' ').join('')}`}
+              style={{ fill: geoFillColor }}
+              data-tooltip-id={`tooltip__${tooltipId}`}
+              data-tooltip-html={toolTip}
+            >
+              <path
+                tabIndex={-1}
+                className={`county`}
+                stroke={geoStrokeColor}
+                d={countyPath}
+                strokeWidth={0.75 / scale}
+              />
             </g>
           )
         }

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

@@ -1,6 +1,7 @@
 import { useContext } from 'react'
 import { mesh, Topology } from 'topojson-client'
 import ConfigContext from '../../../../context'
+import { getGeoFillColor, getGeoStrokeColor } from '../../../../helpers/colors'
 
 type StateOutputProps = {
   topoData: Topology
@@ -15,12 +16,19 @@ const StateOutput: React.FC<StateOutputProps> = ({ topoData, path, scale, stateT
     return s.properties.name === state.general.statePicked.stateName
   })
 
-  const geoStrokeColor = state.general.geoBorderColor === 'darkGray' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255,255,255,0.7)'
+  const geoStrokeColor = getGeoStrokeColor(state)
+  const geoFillColor = getGeoFillColor(state)
 
   let stateLines = path(mesh(topoData, geo[0]))
 
   return (
-    <g key={'single-state'} className='single-state' style={{ fill: '#E6E6E6' }} stroke={geoStrokeColor} strokeWidth={0.95 / scale}>
+    <g
+      key={'single-state'}
+      className='single-state'
+      style={{ fill: geoFillColor }}
+      stroke={geoStrokeColor}
+      strokeWidth={0.95 / scale}
+    >
       <path tabIndex={-1} className='state-path' d={stateLines} />
     </g>
   )

package/src/components/UsaMap/components/Territory/Territory.Hexagon.tsx

@@ -176,7 +176,7 @@ const TerritoryHexagon = ({
 
   return (
     territoryData && (
-      <svg viewBox='0 0 45 51' className='territory-wrapper--hex'>
+      <svg viewBox='-1 -1 46 53' className='territory-wrapper--hex'>
         <g {...props} data-tooltip-html={dataTooltipHtml} data-tooltip-id={dataTooltipId} onClick={handleShapeClick}>
           <polygon
             stroke={stroke}

package/src/components/UsaMap/components/Territory/Territory.Rectangle.tsx

@@ -2,7 +2,7 @@ import { useContext } from 'react'
 import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 import ConfigContext from './../../../../context'
 import { type MapContext } from '../../../../types/MapContext'
-import { patternSizes } from './../../helpers/patternSizes'
+import { patternSizes } from '../../helpers/patternSizes'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 import { type TerritoryShape } from './TerritoryShape'
 
@@ -17,15 +17,16 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
   territory,
   text,
   textColor,
+  backgroundColor,
   ...props
 }) => {
-  const { state, supportedTerritories } = useContext<MapContext>(ConfigContext)
+  const { state } = useContext<MapContext>(ConfigContext)
   const { territoryData, ...otherProps } = props
   const rectanglePath =
-    'M40,0.5 C41.2426407,0.5 42.3676407,1.00367966 43.1819805,1.81801948 C43.9963203,2.63235931 44.5,3.75735931 44.5,5 L44.5,5 L44.5,23 C44.5,24.2426407 43.9963203,25.3676407 43.1819805,26.1819805 C42.3676407,26.9963203 41.2426407,27.5 40,27.5 L40,27.5 L5,27.5 C3.75735931,27.5 2.63235931,26.9963203 1.81801948,26.1819805 C1.00367966,25.3676407 0.5,24.2426407 0.5,23 L0.5,23 L0.5,5 C0.5,3.75735931 1.00367966,2.63235931 1.81801948,1.81801948 C2.63235931,1.00367966 3.75735931,0.5 5,0.5 L5,0.5 Z'
+    'M42,0.5 C42.8284271,0.5 43.5,1.17157288 43.5,2 L43.5,2 L43.5,26 C43.5,26.8284271 42.8284271,27.5 42,27.5 L42,27.5 L3,27.5 C2.17157288,27.5 1.5,26.8284271 1.5,26 L1.5,26 L1.5,2 C1.5,1.17157288 2.17157288,0.5 3,0.5 L3,0.5 Z'
 
   return (
-    <svg viewBox='0 0 45 28' key={territory} className={territory}>
+    <svg viewBox='0 0 45 29' key={territory} className={territory}>
       <g
         {...otherProps}
         strokeLinejoin='round'
@@ -41,7 +42,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
           x='50%'
           y='54%'
           fill={text}
-          style={{ stroke: textColor, strokeWidth: 1 }}
+          style={{ stroke: 'none' }}
           className='territory-text'
           paintOrder='stroke'
           onClick={handleShapeClick}
@@ -52,8 +53,8 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
         </text>
 
         {state.map.patterns.map((patternData, patternIndex) => {
-          const patternColor = getContrastColor('#FFF', props.style.fill)
-          const hasMatchingValues = supportedTerritories[territory]?.includes(patternData?.dataValue)
+          const patternColor = patternData.color || getContrastColor('#FFF', backgroundColor)
+          const hasMatchingValues = patternData.dataValue === territoryData?.[patternData.dataKey]
 
           if (!hasMatchingValues) return null
           if (!patternData.pattern) return null
@@ -62,7 +63,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
             <>
               {patternData?.pattern === 'waves' && (
                 <PatternWaves
-                  id={`territory-${patternData?.dataKey}--${patternIndex}`}
+                  id={`territory-${territory}-${patternData?.dataKey}--${patternIndex}`}
                   height={patternSizes[patternData?.size] ?? 10}
                   width={patternSizes[patternData?.size] ?? 10}
                   fill={patternColor}
@@ -71,7 +72,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
               )}
               {patternData?.pattern === 'circles' && (
                 <PatternCircles
-                  id={`territory-${patternData?.dataKey}--${patternIndex}`}
+                  id={`territory-${territory}-${patternData?.dataKey}--${patternIndex}`}
                   height={patternSizes[patternData?.size] ?? 10}
                   width={patternSizes[patternData?.size] ?? 10}
                   fill={patternColor}
@@ -80,7 +81,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
               )}
               {patternData?.pattern === 'lines' && (
                 <PatternLines
-                  id={`territory-${patternData?.dataKey}--${patternIndex}`}
+                  id={`territory-${territory}-${patternData?.dataKey}--${patternIndex}`}
                   height={patternSizes[patternData?.size] ?? 6}
                   width={patternSizes[patternData?.size] ?? 6}
                   stroke={patternColor}
@@ -92,11 +93,11 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
                 stroke={stroke}
                 strokeWidth={strokeWidth}
                 d={rectanglePath}
-                fill={`url(#territory-${patternData?.dataKey}--${patternIndex})`}
+                fill={`url(#territory-${territory}-${patternData?.dataKey}--${patternIndex})`}
                 color={patternData ? 'white' : textColor}
                 className={[
-                  `territory-pattern-${patternData.dataKey}`,
-                  `territory-pattern-${patternData.dataKey}--${patternData.dataValue}`
+                  `territory-pattern-${patternData?.dataKey}`,
+                  `territory-pattern-${patternData?.dataKey}--${patternData.dataValue}`
                 ].join(' ')}
               />
               <text

package/src/components/UsaMap/components/UsaMap.County.tsx

@@ -21,6 +21,7 @@ import {
   drawShape,
   createShapeProperties
 } from '../helpers/shapes'
+import { getGeoStrokeColor } from '../../../helpers/colors'
 
 const getCountyTopoURL = year => {
   return `https://www.cdc.gov/TemplatePackage/contrib/data/county-topography/cb_${year}_us_county_20m.json`
@@ -131,22 +132,23 @@ const CountyMap = props => {
   const {
       applyLegendToRow,
       applyTooltipsToGeo,
+      container,
       containerEl,
       data,
       displayGeoName,
       geoClickHandler,
       handleMapAriaLabels,
+      runtimeFilters,
       runtimeLegend,
+      setState,
       state,
-      runtimeFilters,
       tooltipId,
       tooltipRef,
-      container,
-      setState
   } = useContext(ConfigContext)
 
   // CREATE STATE LINES
   const projection = geoAlbersUsaTerritories()
+  const geoStrokeColor = getGeoStrokeColor(state)
 
   const [focus, setFocus] = useState({})
   const [topoData, setTopoData] = useState({})
@@ -210,9 +212,7 @@ const CountyMap = props => {
   }
 
   const runtimeKeys = Object.keys(data)
-
-  const geoStrokeColor = state.general.geoBorderColor === 'darkGray' ? 'rgb(90, 90, 90)' : 'rgb(255, 255, 255)'
-  const lineWidth = 0.3
+  const lineWidth = 1
 
   const onReset = () => {
     setState({
@@ -449,7 +449,7 @@ const CountyMap = props => {
     }
 
     if (focus.index !== -1) {
-      context.strokeStyle = 'black'
+      context.strokeStyle = geoStrokeColor
       context.lineWidth = 1
       context.beginPath()
       path(topoData.mapData[focus.index])
@@ -493,7 +493,6 @@ const CountyMap = props => {
 
       // Enforces stroke style of the county lines
       context.strokeStyle = geoStrokeColor
-      context.lineWidth = lineWidth
 
       // Iterates through each state/county topo and renders it
       topoData.mapData.forEach((geo, i) => {
@@ -518,7 +517,7 @@ const CountyMap = props => {
 
       // If the focused state is found in the geo data, render it with a thicker outline
       if (focus.index !== -1) {
-        context.strokeStyle = 'black'
+        context.strokeStyle = geoStrokeColor
         context.lineWidth = 2
         context.beginPath()
         path(topoData.mapData[focus.index])
@@ -531,8 +530,7 @@ const CountyMap = props => {
           context.beginPath()
           path(layer)
           context.fillStyle = layer.properties.fill
-          context.globalAlpha = layer.properties['fill-opacity']
-          context.strokeStyle = layer.properties['stroke']
+          context.strokeStyle = geoStrokeColor
           context.lineWidth = layer.properties['stroke-width']
           context.fill()
           context.stroke()
@@ -540,7 +538,7 @@ const CountyMap = props => {
       }
 
       if (state.general.type === 'us-geocode') {
-        context.strokeStyle = 'black'
+        context.strokeStyle = geoStrokeColor
         const geoRadius = (state.visual.geoCodeCircleSize || 5) * (focus.id ? 2 : 1)
         const { additionalCityStyles } = state.visual || []
         const cityStyles = Object.values(data)
@@ -604,7 +602,7 @@ const CountyMap = props => {
         className='county-map-canvas'
       ></canvas>
 
-      <button className={`btn btn-primary btn--reset`} onClick={onReset} ref={resetButton} tabIndex='0'>
+      <button className={`btn btn--reset btn-primary`} onClick={onReset} ref={resetButton} tabIndex='0'>
         Reset Zoom
       </button>
     </ErrorBoundary>

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

@@ -11,6 +11,7 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import topoJSON from '../data/us-regions-topo-2.json'
 import ConfigContext from '../../../context'
 import Annotation from '../../Annotation'
+import { getGeoFillColor, getGeoStrokeColor } from '../../../helpers/colors'
 
 const { features: unitedStates } = feature(topoJSON, topoJSON.objects.regions)
 
@@ -69,7 +70,8 @@ const UsaRegionMap = props => {
     setTerritoriesData(territoriesList)
   }, [data])
 
-  const geoStrokeColor = state.general.geoBorderColor === 'darkGray' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255,255,255,0.7)'
+  const geoStrokeColor = getGeoStrokeColor(state)
+  const geoFillColor = getGeoFillColor(state)
 
   const territories = territoriesData.map(territory => {
     const Shape = Rect
@@ -79,7 +81,7 @@ const UsaRegionMap = props => {
     let toolTip
 
     let styles: React.CSSProperties = {
-      fill: '#E6E6E6',
+      fill: geoFillColor,
       color: '#202020'
     }
 
@@ -97,7 +99,10 @@ const UsaRegionMap = props => {
       let needsPointer = false
 
       // If we need to add a pointer cursor
-      if ((state.columns.navigate && territoryData[state.columns.navigate.name]) || state.tooltips.appearanceType === 'click') {
+      if (
+        (state.columns.navigate && territoryData[state.columns.navigate.name]) ||
+        state.tooltips.appearanceType === 'click'
+      ) {
         needsPointer = true
       }
 
@@ -113,7 +118,19 @@ const UsaRegionMap = props => {
         }
       }
 
-      return <Shape key={label} label={label} css={styles} text={styles.color} stroke={geoStrokeColor} strokeWidth={1.5} onClick={() => geoClickHandler(territory, territoryData)} data-tooltip-id={`tooltip__${tooltipId}`} data-tooltip-html={toolTip} />
+      return (
+        <Shape
+          key={label}
+          label={label}
+          css={styles}
+          text={styles.color}
+          stroke={geoStrokeColor}
+          strokeWidth={1}
+          onClick={() => geoClickHandler(territory, territoryData)}
+          data-tooltip-id={`tooltip__${tooltipId}`}
+          data-tooltip-html={toolTip}
+        />
+      )
     }
   })
 
@@ -130,8 +147,22 @@ const UsaRegionMap = props => {
 
     return (
       <g>
-        <line x1={centroid[0]} y1={centroid[1]} x2={centroid[0] + dx} y2={centroid[1] + dy} stroke='rgba(0,0,0,.5)' strokeWidth={1} />
-        <text x={4} strokeWidth='0' fontSize={13} style={{ fill: '#202020' }} alignmentBaseline='middle' transform={`translate(${centroid[0] + dx}, ${centroid[1] + dy})`}>
+        <line
+          x1={centroid[0]}
+          y1={centroid[1]}
+          x2={centroid[0] + dx}
+          y2={centroid[1] + dy}
+          stroke='rgba(0,0,0,.5)'
+          strokeWidth={1}
+        />
+        <text
+          x={4}
+          strokeWidth='0'
+          fontSize={13}
+          style={{ fill: '#202020' }}
+          alignmentBaseline='middle'
+          transform={`translate(${centroid[0] + dx}, ${centroid[1] + dy})`}
+        >
           {abbr.substring(3)}
         </text>
       </g>
@@ -146,7 +177,7 @@ const UsaRegionMap = props => {
       const key = isHex ? geo.properties.iso + '-hex-group' : geo.properties.iso + '-group'
 
       let styles = {
-        fill: '#E6E6E6',
+        fill: geoFillColor,
         cursor: 'default'
       }
 
@@ -172,28 +203,32 @@ const UsaRegionMap = props => {
         const toolTip = applyTooltipsToGeo(geoDisplayName, geoData)
 
         styles = {
-          fill: state.general.type !== 'bubble' ? legendColors[0] : '#E6E6E6',
+          fill: state.general.type !== 'bubble' ? legendColors[0] : geoFillColor,
           cursor: 'default',
           '&:hover': {
-            fill: state.general.type !== 'bubble' ? legendColors[1] : '#e6e6e6'
+            fill: state.general.type !== 'bubble' ? legendColors[1] : geoFillColor
           },
           '&:active': {
-            fill: state.general.type !== 'bubble' ? legendColors[2] : '#e6e6e6'
+            fill: state.general.type !== 'bubble' ? legendColors[2] : geoFillColor
           }
         }
 
         // When to add pointer cursor
-        if ((state.columns.navigate && geoData[state.columns.navigate.name]) || state.tooltips.appearanceType === 'click') {
+        if (
+          (state.columns.navigate && geoData[state.columns.navigate.name]) ||
+          state.tooltips.appearanceType === 'click'
+        ) {
           styles.cursor = 'pointer'
         }
 
         const TerratoryRect = props => {
           const { posX = 0, tName } = props
           const textColor = getContrastColor('#FFF', legendColors[0])
+          const geoStrokeColor = getGeoStrokeColor(state)
           return (
             <>
-              <rect x={posX} width='36' height='24' rx='6' stroke='#fff' strokeWidth='1' />
-              <text x={posX + 8} y='17' fill={textColor}>
+              <rect x={posX} width='36' height='24' rx='2' stroke={geoStrokeColor} strokeWidth='1' />
+              <text textAnchor='middle' x={36 / 2 + posX} y='17' fill={textColor}>
                 {tName}
               </text>
             </>
@@ -203,8 +238,16 @@ const UsaRegionMap = props => {
         const circleRadius = 15
 
         return (
-          <g key={key} className='geo-group' style={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} data-tooltip-id={`tooltip__${tooltipId}`} data-tooltip-html={toolTip} tabIndex={-1}>
-            <path tabIndex={-1} className='single-geo' stroke={geoStrokeColor} strokeWidth={1.3} d={path} />
+          <g
+            key={key}
+            className='geo-group'
+            style={styles}
+            onClick={() => geoClickHandler(geoDisplayName, geoData)}
+            data-tooltip-id={`tooltip__${tooltipId}`}
+            data-tooltip-html={toolTip}
+            tabIndex={-1}
+          >
+            <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} />
               <text fill='#333' x='15px' y='20px' textAnchor='middle'>
@@ -239,7 +282,7 @@ const UsaRegionMap = props => {
       // Default return state, just geo with no additional information
       return (
         <g key={key} className='geo-group' style={styles}>
-          <path tabIndex={-1} className='single-geo' stroke={geoStrokeColor} strokeWidth={1.3} d={path} />
+          <path tabIndex={-1} className='single-geo' stroke={geoStrokeColor} strokeWidth={1} d={path} />
           {(isHex || showLabel) && geoLabel(geo, styles.fill, projection)}
         </g>
       )

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

@@ -14,6 +14,7 @@ import ZoomControls from '../../ZoomControls'
 import { MapContext } from '../../../types/MapContext'
 import useStateZoom from '../../../hooks/useStateZoom'
 import { Text } from '@visx/text'
+import { getGeoStrokeColor } from '../../../helpers/colors'
 
 // SVG ITEMS
 const WIDTH = 880
@@ -49,7 +50,7 @@ const SingleStateMap = props => {
   const cityListProjection = geoAlbersUsaTerritories()
     .translate([WIDTH / 2, HEIGHT / 2])
     .scale(1)
-  const geoStrokeColor = state.general.geoBorderColor === 'darkGray' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255,255,255,0.7)'
+  const geoStrokeColor = getGeoStrokeColor(state)
   const path = geoPath().projection(projection)
 
   useEffect(() => {