@cdc/map 4.25.3 → 4.25.5-1

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

@@ -1,7 +1,10 @@
 import React, { useContext } from 'react'
 import ConfigContext from '../../../../context'
 import { MapContext } from '../../../../types/MapContext'
-import { getGeoFillColor } from '../../../../helpers/colors'
+import { getGeoFillColor, displayGeoName } from '../../../../helpers'
+import useApplyTooltipsToGeo from '../../../../hooks/useApplyTooltipsToGeo'
+import { applyLegendToRow } from '../../../../helpers/applyLegendToRow'
+import useGeoClickHandler, { geoClickHandler } from '././../../../../hooks/useGeoClickHandler'
 
 interface CountyOutputProps {
   counties: any[]
@@ -12,10 +15,11 @@ interface CountyOutputProps {
 }
 
 const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoStrokeColor, tooltipId }) => {
-  const { applyTooltipsToGeo, applyLegendToRow, displayGeoName, state, data, geoClickHandler } =
-    useContext<MapContext>(ConfigContext)
+  const { config, data, legendMemo, legendSpecialClassLastMemo, runtimeLegend } = useContext<MapContext>(ConfigContext)
+  const { applyTooltipsToGeo } = useApplyTooltipsToGeo()
+  const geoFillColor = getGeoFillColor(config)
+  const { geoClickHandler } = useGeoClickHandler()
 
-  const geoFillColor = getGeoFillColor(state)
   return (
     <>
       {counties.map(county => {
@@ -31,7 +35,7 @@ const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoS
 
         // 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)
@@ -55,8 +59,8 @@ 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'
+            (config.columns.navigate && geoData[config.columns.navigate.name]) ||
+            config.tooltips.appearanceType === 'hover'
           ) {
             styles.cursor = 'pointer'
           }
@@ -65,7 +69,7 @@ const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoS
             <g
               key={`key--${county.id}`}
               className={`county county--${geoDisplayName.split(' ').join('')} county--${
-                geoData[state.columns.geo.name]
+                geoData[config.columns.geo.name]
               }`}
               style={styles}
               onClick={() => geoClickHandler(geoDisplayName, geoData)}

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

@@ -10,14 +10,14 @@ type StateOutputProps = {
 }
 
 const StateOutput: React.FC<StateOutputProps> = ({ topoData, path, scale, stateToShow }: StateOutputProps) => {
-  const { state } = useContext(ConfigContext)
+  const { config } = useContext(ConfigContext)
   if (!topoData?.objects?.states) return null
   let geo = topoData.objects.states.geometries.filter(s => {
-    return s.properties.name === state.general.statePicked.stateName
+    return s.properties.name === config.general.statePicked.stateName
   })
 
-  const geoStrokeColor = getGeoStrokeColor(state)
-  const geoFillColor = getGeoFillColor(state)
+  const geoStrokeColor = getGeoStrokeColor(config)
+  const geoFillColor = getGeoFillColor(config)
 
   let stateLines = path(mesh(topoData, geo[0]))
 

package/src/components/UsaMap/components/TerritoriesSection.tsx

@@ -1,4 +1,7 @@
-import React from 'react'
+import React, { useContext } from 'react'
+
+import ConfigContext from '../../../context'
+import { isMobileTerritoryViewport } from '@cdc/core/helpers/viewports'
 
 type TerritoriesSectionProps = {
   territories: JSX.Element[]
@@ -9,6 +12,8 @@ type TerritoriesSectionProps = {
 }
 
 const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, logo, config, territoriesData }) => {
+  const { currentViewport } = useContext<MapContext>(ConfigContext)
+
   // filter territioriesData into the two groups below
   const freelyAssociatedKeys = territoriesData.filter(territory => {
     return ['US-FM', 'US-MH', 'US-PW'].includes(territory)
@@ -33,6 +38,10 @@ const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, lo
       return a.props.label.localeCompare(b.props.label)
     })
 
+  const isMobileViewport = isMobileTerritoryViewport(currentViewport)
+  const SVG_GAP = 9
+  const SVG_WIDTH = isMobileViewport ? 30 : 45
+
   return (
     territoriesData.length > 0 && (
       <>
@@ -43,18 +52,32 @@ const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, lo
               <img src={logo} alt='' className='map-logo' style={{ maxWidth: '50px' }} />
             )}
           </div>
-          <div>
+          <div className='d-flex flex-wrap' style={{ columnGap: '1.5rem' }}>
             {(usTerritories.length > 0 || config.general.territoriesAlwaysShow) && (
-              <>
-                <h5 className='territories-label'>U.S. Territories</h5>
-                <span className='mt-1 mb-2 d-flex flex-wrap territories'>{usTerritories}</span>
-              </>
+              <div>
+                <h5 className='territories-label'>U.S. territories</h5>
+                <span
+                  className={`mt-2 ${isMobileViewport ? 'mb-3' : 'mb-4'} d-flex territories`}
+                  style={{ minWidth: `${usTerritories.length * SVG_WIDTH + (usTerritories.length - 1) * SVG_GAP}px` }}
+                >
+                  {usTerritories}
+                </span>
+              </div>
             )}
             {(freelyAssociatedStates.length > 0 || config.general.territoriesAlwaysShow) && (
-              <>
-                <h5 className='territories-label'>Freely Associated States</h5>
-                <span className='mt-1 mb-2 d-flex flex-wrap territories'>{freelyAssociatedStates}</span>
-              </>
+              <div>
+                <h5 className='territories-label'>Freely associated states</h5>
+                <span
+                  className={`mt-2 ${isMobileViewport ? 'mb-3' : 'mb-4'} d-flex territories`}
+                  style={{
+                    minWidth: `${
+                      freelyAssociatedStates.length * SVG_WIDTH + (freelyAssociatedStates.length - 1) * SVG_GAP
+                    }px`
+                  }}
+                >
+                  {freelyAssociatedStates}
+                </span>
+              </div>
             )}
           </div>
         </div>

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

@@ -5,6 +5,7 @@ import { MapContext } from './../../../../types/MapContext'
 import HexIcon from '../HexIcon'
 import { Text } from '@visx/text'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
+import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 
 const offsets = {
   'US-VT': [50, -8],
@@ -37,16 +38,16 @@ const TerritoryHexagon = ({
   handleShapeClick,
   label,
   stroke,
+  strokeColor,
   strokeWidth,
   territory,
   territoryData,
-  text,
   textColor,
   ...props
 }) => {
-  const { state } = useContext<MapContext>(ConfigContext)
+  const { config } = useContext<MapContext>(ConfigContext)
 
-  const isHex = state.general.displayAsHex
+  const isHex = config.general.displayAsHex
 
   // Labels
   const hexagonLabel = (geo, bgColor = '#FFFFFF', projection) => {
@@ -61,7 +62,7 @@ const TerritoryHexagon = ({
 
       return (
         <>
-          {state.hexMap.shapeGroups.map((group, groupIndex) => {
+          {config.hexMap.shapeGroups.map((group, groupIndex) => {
             return group.items.map((item, itemIndex) => {
               if (!geoData) return
               switch (item.operator) {
@@ -116,7 +117,7 @@ const TerritoryHexagon = ({
     }
 
     let x = 0,
-      y = state.hexMap.type === 'shapes' ? -10 : 5
+      y = config.hexMap.type === 'shapes' ? -10 : 5
 
     // used to nudge/move some of the labels for better readability
     if (nudges[abbr] && false === isHex) {
@@ -125,14 +126,15 @@ const TerritoryHexagon = ({
     }
 
     if (undefined === offsets[abbr] || isHex) {
-      let y = state.hexMap.type === 'shapes' ? '30%' : '50%'
+      let y = config.hexMap.type === 'shapes' ? '30%' : '50%'
       return (
         <>
           <Text
             fontSize={14}
             x={'50%'}
             y={y}
-            style={{ fill: 'currentColor', stroke: 'initial', fontWeight: 400, opacity: 1, fillOpacity: 1 }}
+            style={{ fill: 'currentColor', stroke: strokeColor, fontWeight: 900, opacity: 1, fillOpacity: 1 }}
+            paintOrder='stroke'
             textAnchor='middle'
             verticalAnchor='middle'
             onClick={handleShapeClick}
@@ -141,7 +143,7 @@ const TerritoryHexagon = ({
           >
             {abbr.substring(3)}
           </Text>
-          {state.general.displayAsHex && state.hexMap.type === 'shapes' && getArrowDirection(territoryData, geo, true)}
+          {config.general.displayAsHex && config.hexMap.type === 'shapes' && getArrowDirection(territoryData, geo, true)}
         </>
       )
     }
@@ -162,7 +164,7 @@ const TerritoryHexagon = ({
           x={4}
           strokeWidth='0'
           fontSize={13}
-          style={{ fill: '#202020' }}
+          style={{ fill: APP_FONT_COLOR }}
           alignmentBaseline='middle'
           transform={`translate(${centroid[0] + dx}, ${centroid[1] + dy})`}
           onClick={handleShapeClick}
@@ -183,7 +185,7 @@ const TerritoryHexagon = ({
           strokeWidth={strokeWidth}
           points='22 0 44 12.702 44 38.105 22 50.807 0 38.105 0 12.702'
         />
-        {state.general.displayAsHex && hexagonLabel(territoryData, stroke, false)}
+        {config.general.displayAsHex && hexagonLabel(territoryData, stroke, false)}
       </g>
     </svg>
   )

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

@@ -13,14 +13,14 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
   hasPattern,
   label,
   stroke,
+  strokeColor,
   strokeWidth,
   territory,
-  text,
   textColor,
   backgroundColor,
   ...props
 }) => {
-  const { state } = useContext<MapContext>(ConfigContext)
+  const { config } = useContext<MapContext>(ConfigContext)
   const { territoryData, ...otherProps } = props
   const rectanglePath =
     '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'
@@ -41,8 +41,8 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
           dominantBaseline='middle'
           x='50%'
           y='54%'
-          fill={text}
-          style={{ stroke: 'none' }}
+          fill={textColor}
+          stroke={strokeColor}
           className='territory-text'
           paintOrder='stroke'
           onClick={handleShapeClick}
@@ -52,7 +52,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
           {label}
         </text>
 
-        {state.map.patterns.map((patternData, patternIndex) => {
+        {config.map.patterns.map((patternData, patternIndex) => {
           const patternColor = patternData.color || getContrastColor('#FFF', backgroundColor)
           const hasMatchingValues = patternData.dataValue === territoryData?.[patternData.dataKey]
 
@@ -67,6 +67,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
                   height={patternSizes[patternData?.size] ?? 10}
                   width={patternSizes[patternData?.size] ?? 10}
                   fill={patternColor}
+                  strokeWidth={0.25}
                   complement
                 />
               )}
@@ -76,6 +77,8 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
                   height={patternSizes[patternData?.size] ?? 10}
                   width={patternSizes[patternData?.size] ?? 10}
                   fill={patternColor}
+                  stroke={patternColor}
+                  radius={0.5}
                   complement
                 />
               )}
@@ -85,7 +88,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
                   height={patternSizes[patternData?.size] ?? 6}
                   width={patternSizes[patternData?.size] ?? 6}
                   stroke={patternColor}
-                  strokeWidth={1}
+                  strokeWidth={0.75}
                   orientation={['diagonalRightToLeft']}
                 />
               )}
@@ -94,7 +97,6 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
                 strokeWidth={strokeWidth}
                 d={rectanglePath}
                 fill={`url(#territory-${territory}-${patternData?.dataKey}--${patternIndex})`}
-                color={patternData ? 'white' : textColor}
                 className={[
                   `territory-pattern-${patternData?.dataKey}`,
                   `territory-pattern-${patternData?.dataKey}--${patternData.dataValue}`
@@ -105,14 +107,10 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
                 dominantBaseline='middle'
                 x='50%'
                 y='54%'
-                fill={text}
-                style={{
-                  fill: patternData ? 'white' : 'black',
-                  stroke: patternData ? 'black' : textColor,
-                  strokeWidth: patternData ? 6 : 0
-                }}
+                fill={textColor}
+                stroke={strokeColor}
                 className='territory-text'
-                paint-order='stroke'
+                paintOrder='stroke'
                 onClick={handleShapeClick}
                 data-tooltip-id={dataTooltipId}
                 data-tooltip-html={dataTooltipHtml}

package/src/components/UsaMap/components/Territory/TerritoryShape.ts

@@ -1,13 +1,14 @@
 export type TerritoryShape = {
   handleShapeClick: () => void
+  backgroundColor: string
   dataTooltipHtml: string
   dataTooltipId: string
   hasPattern: boolean
   label: string
   stroke: string
+  strokeColor: string
   strokeWidth: number
   territory: string
   territoryData: object
-  text: string
   textColor: string
 }