@cdc/map 4.24.11 → 4.24.12-2

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

@@ -19,11 +19,13 @@ import { patternSizes } from '../helpers/patternSizes'
 import Annotation from '../../Annotation'
 
 import Territory from './Territory'
+import { cityKeys } from '../../../data/supported-geos'
 
 import useMapLayers from '../../../hooks/useMapLayers'
 import ConfigContext from '../../../context'
 import { MapContext } from '../../../types/MapContext'
 import { checkColorContrast, getContrastColor, getColorContrast } from '@cdc/core/helpers/cove/accessibility'
+import { getGeoFillColor, getGeoStrokeColor } from '../../../helpers/colors'
 
 const { features: unitedStates } = feature(topoJSON, topoJSON.objects.states)
 const { features: unitedStatesHex } = feature(hexTopoJSON, hexTopoJSON.objects.states)
@@ -59,7 +61,6 @@ const UsaMap = () => {
       data,
       displayGeoName,
       geoClickHandler,
-      handleCircleClick,
       handleMapAriaLabels,
       setSharedFilterValue,
       state,
@@ -67,11 +68,12 @@ const UsaMap = () => {
       titleCase,
       tooltipId,
       handleDragStateChange,
-      setState,
-      mapId
+      mapId,
+      logo,
     } = useContext<MapContext>(ConfigContext)
 
   let isFilterValueSupported = false
+  const { general, columns, feature, tooltips, hexMap, map, annotations } = state
 
   if (setSharedFilterValue) {
     Object.keys(supportedStates).forEach(supportedState => {
@@ -101,16 +103,16 @@ const UsaMap = () => {
   useEffect(() => {
     setTranslate([455, 250])
     setExtent(null)
-  }, [state.general.geoType])
+  }, [general.geoType])
 
-  const isHex = state.general.displayAsHex
+  const isHex = general.displayAsHex
 
   const [territoriesData, setTerritoriesData] = useState([])
 
   const territoriesKeys = Object.keys(supportedTerritories) // data will have already mapped abbreviated territories to their full names
 
   useEffect(() => {
-    if (state.general.territoriesAlwaysShow) {
+    if (general.territoriesAlwaysShow) {
       // show all Territories whether in the data or not
       setTerritoriesData(territoriesKeys)
     } else {
@@ -118,17 +120,10 @@ const UsaMap = () => {
       const territoriesList = territoriesKeys.filter(key => data[key])
       setTerritoriesData(territoriesList)
     }
-  }, [data, state.general.territoriesAlwaysShow])
+  }, [data, general.territoriesAlwaysShow])
 
-  const geoStrokeColor = state.general.geoBorderColor === 'darkGray' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255,255,255,0.7)'
-
-  const getTerritoriesClasses = () => {
-    const screenWidth = window?.visualViewport?.width
-    let className = 'territories'
-    if (screenWidth < 700) return 'territories--mobile'
-    if (screenWidth < 900) return 'territories--tablet'
-    return className
-  }
+  const geoStrokeColor = getGeoStrokeColor(state)
+  const geoFillColor = getGeoFillColor(state)
 
   const territories = territoriesData.map((territory, territoryIndex) => {
     const Shape = isHex ? Territory.Hexagon : Territory.Rectangle
@@ -138,13 +133,24 @@ const UsaMap = () => {
     let toolTip
 
     let styles = {
-      fill: '#E6E6E6',
+      fill: geoFillColor,
+      stroke: geoStrokeColor,
       color: '#202020'
     }
 
     const label = supportedTerritories[territory][1]
 
-    if (!territoryData) return <Shape key={label} label={label} style={styles} text={styles.color} />
+    if (!territoryData)
+      return (
+        <Shape
+          key={label}
+          label={label}
+          style={styles}
+          text={styles.color}
+          territoryData={territoryData}
+          backgroundColor={styles.fill}
+        />
+      )
 
     toolTip = applyTooltipsToGeo(displayGeoName(territory), territoryData)
 
@@ -156,10 +162,7 @@ const UsaMap = () => {
       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 ((columns.navigate && territoryData[columns.navigate.name]) || tooltips.appearanceType === 'click') {
         needsPointer = true
       }
 
@@ -167,15 +170,11 @@ const UsaMap = () => {
         color: textColor,
         fill: legendColors[0],
         opacity:
-          setSharedFilterValue &&
-          isFilterValueSupported &&
-          setSharedFilterValue !== territoryData[state.columns.geo.name]
+          setSharedFilterValue && isFilterValueSupported && setSharedFilterValue !== territoryData[columns.geo.name]
             ? 0.5
             : 1,
         stroke:
-          setSharedFilterValue &&
-          isFilterValueSupported &&
-          setSharedFilterValue === territoryData[state.columns.geo.name]
+          setSharedFilterValue && isFilterValueSupported && setSharedFilterValue === territoryData[columns.geo.name]
             ? 'rgba(0, 0, 0, 1)'
             : geoStrokeColor,
         cursor: needsPointer ? 'pointer' : 'default',
@@ -193,7 +192,7 @@ const UsaMap = () => {
           label={label}
           style={styles}
           text={styles.color}
-          strokeWidth={1.5}
+          strokeWidth={1}
           textColor={textColor}
           handleShapeClick={() => geoClickHandler(territory, territoryData)}
           dataTooltipId={`tooltip__${tooltipId}`}
@@ -201,6 +200,7 @@ const UsaMap = () => {
           territory={territory}
           territoryData={territoryData}
           tabIndex={-1}
+          backgroundColor={styles.fill}
         />
       )
     }
@@ -213,7 +213,7 @@ const UsaMap = () => {
 
   // Constructs and displays markup for all geos on the map (except territories right now)
   const constructGeoJsx = (geographies, projection) => {
-    let showLabel = state.general.displayStateLabels
+    let showLabel = general.displayStateLabels
 
     // Order alphabetically. Important for accessibility if ever read out loud.
     geographies.map(state => {
@@ -239,7 +239,7 @@ const UsaMap = () => {
       const key = isHex ? geo.properties.iso + '-hex-group' : geo.properties.iso + '-group'
 
       let styles = {
-        fill: '#E6E6E6',
+        fill: geoFillColor,
         cursor: 'default'
       }
 
@@ -247,8 +247,6 @@ const UsaMap = () => {
       let geoKey = geo.properties.iso
       let geoName = geo.properties.name
 
-      // Manually add Washington D.C. in for Hex maps
-
       if (!geoKey) return
 
       const geoData = data[geoKey]
@@ -267,29 +265,26 @@ const UsaMap = () => {
         const tooltip = applyTooltipsToGeo(geoDisplayName, geoData)
 
         styles = {
-          fill: state.general.type !== 'bubble' ? legendColors[0] : '#E6E6E6',
+          fill: state.general.type !== 'bubble' ? legendColors[0] : geoFillColor,
           opacity:
-            setSharedFilterValue && isFilterValueSupported && setSharedFilterValue !== geoData[state.columns.geo.name]
+            setSharedFilterValue && isFilterValueSupported && setSharedFilterValue !== geoData[columns.geo.name]
               ? 0.5
               : 1,
           stroke:
-            setSharedFilterValue && isFilterValueSupported && setSharedFilterValue === geoData[state.columns.geo.name]
+            setSharedFilterValue && isFilterValueSupported && setSharedFilterValue === geoData[columns.geo.name]
               ? 'rgba(0, 0, 0, 1)'
               : geoStrokeColor,
           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 ((columns.navigate && geoData[columns.navigate.name]) || tooltips.appearanceType === 'click') {
           styles.cursor = 'pointer'
         }
 
@@ -302,7 +297,7 @@ const UsaMap = () => {
 
           return (
             <>
-              {state.hexMap.shapeGroups.map((group, groupIndex) => {
+              {hexMap.shapeGroups.map((group, groupIndex) => {
                 return group.items.map((item, itemIndex) => {
                   switch (item.operator) {
                     case '=':
@@ -406,13 +401,13 @@ const UsaMap = () => {
               tabIndex={-1}
             >
               {/* state path */}
-              <path tabIndex={-1} className='single-geo' strokeWidth={1.3} d={path} />
+              <path tabIndex={-1} className='single-geo' strokeWidth={1} d={path} />
 
               {/* apply patterns on top of state path*/}
-              {state.map.patterns.map((patternData, patternIndex) => {
+              {map.patterns.map((patternData, patternIndex) => {
                 const { pattern, dataKey, size } = patternData
                 const currentFill = styles.fill
-                const hasMatchingValues = patternData.dataValue === geoData[patternData.dataKey]
+                const hasMatchingValues = patternData.dataValue === geoData?.[patternData.dataKey]
                 const patternColor = patternData.color || getContrastColor('#000', currentFill)
 
                 if (!hasMatchingValues) return
@@ -422,7 +417,7 @@ const UsaMap = () => {
                   <>
                     {pattern === 'waves' && (
                       <PatternWaves
-                        id={`${mapId}--${dataKey}--${geoIndex}`}
+                        id={`${mapId}--${String(dataKey).replace(' ', '-')}--${geoIndex}`}
                         height={patternSizes[size] ?? 10}
                         width={patternSizes[size] ?? 10}
                         fill={patternColor}
@@ -430,7 +425,7 @@ const UsaMap = () => {
                     )}
                     {pattern === 'circles' && (
                       <PatternCircles
-                        id={`${mapId}--${dataKey}--${geoIndex}`}
+                        id={`${mapId}--${String(dataKey).replace(' ', '-')}--${geoIndex}`}
                         height={patternSizes[size] ?? 10}
                         width={patternSizes[size] ?? 10}
                         fill={patternColor}
@@ -438,7 +433,7 @@ const UsaMap = () => {
                     )}
                     {pattern === 'lines' && (
                       <PatternLines
-                        id={`${mapId}--${dataKey}--${geoIndex}`}
+                        id={`${mapId}--${String(dataKey).replace(' ', '-')}--${geoIndex}`}
                         height={patternSizes[size] ?? 6}
                         width={patternSizes[size] ?? 6}
                         stroke={patternColor}
@@ -451,13 +446,13 @@ const UsaMap = () => {
                       tabIndex={-1}
                       stroke='transparent'
                       d={path}
-                      fill={`url(#${mapId}--${dataKey}--${geoIndex})`}
+                      fill={`url(#${mapId}--${String(dataKey).replace(' ', '-')}--${geoIndex})`}
                     />
                   </>
                 )
               })}
               {(isHex || showLabel) && geoLabel(geo, legendColors[0], projection)}
-              {isHex && state.hexMap.type === 'shapes' && getArrowDirection(geoData, geo, legendColors[0])}
+              {isHex && hexMap.type === 'shapes' && getArrowDirection(geoData, geo, legendColors[0])}
             </g>
           </g>
         )
@@ -495,7 +490,7 @@ const UsaMap = () => {
     )
 
     // Bubbles
-    if (state.general.type === 'bubble') {
+    if (general.type === 'bubble') {
       geosJsx.push(
         <BubbleList
           key='bubbles'
@@ -529,12 +524,12 @@ const UsaMap = () => {
     let textColor = getContrastColor('#FFF', bgColor)
 
     // always make HI black since it is off to the side
-    if (abbr === 'US-HI' && !state.general.displayAsHex) {
+    if (abbr === 'US-HI' && !general.displayAsHex) {
       textColor = '#000'
     }
 
     let x = 0,
-      y = state.hexMap.type === 'shapes' && state.general.displayAsHex ? -10 : 5
+      y = hexMap.type === 'shapes' && general.displayAsHex ? -10 : 5
 
     // used to nudge/move some of the labels for better readability
     if (nudges[abbr] && false === isHex) {
@@ -581,7 +576,7 @@ const UsaMap = () => {
   return (
     <ErrorBoundary component='UsaMap'>
       <svg viewBox='0 0 880 500' role='img' aria-label={handleMapAriaLabels(state)}>
-        {state.general.displayAsHex ? (
+        {general.displayAsHex ? (
           <Mercator data={unitedStatesHex} scale={650} translate={[1600, 775]}>
             {({ features, projection }) => constructGeoJsx(features, projection)}
           </Mercator>
@@ -590,18 +585,21 @@ const UsaMap = () => {
             {({ features, projection }) => constructGeoJsx(features, projection)}
           </AlbersUsa>
         )}
-        {state.annotations.length > 0 && <Annotation.Draggable onDragStateChange={handleDragStateChange} />}
+        {annotations.length > 0 && <Annotation.Draggable onDragStateChange={handleDragStateChange} />}
       </svg>
 
       {territories.length > 0 && (
         <>
           {/* Temporarily make the max width fit the image width */}
-          <div className='two-col' style={{ maxWidth: 'calc(100% - 75px)' }}>
-            <div>
-              <span className='territories-label label'>{state.general.territoriesLabel}</span>
+          <div>
+            <div className='d-flex mt-2'>
+              <h5>{general.territoriesLabel}</h5>
+              {'data' === general.type && logo && (
+                <img src={logo} alt='' className='map-logo' style={{ maxWidth: '50px' }} />
+              )}
             </div>
             <div>
-              <span className={getTerritoriesClasses()}>{territories}</span>
+              <span className='mt-1 mb-2 d-flex flex-wrap territories'>{territories}</span>
             </div>
           </div>
         </>

package/src/components/WorldMap/WorldMap.tsx

@@ -11,6 +11,7 @@ import CityList from '../CityList'
 import BubbleList from '../BubbleList'
 import ConfigContext from '../../context'
 import ZoomControls from '../ZoomControls'
+import { getGeoFillColor, getGeoStrokeColor } from '../../helpers/colors'
 
 const { features: world } = feature(topoJSON, topoJSON.objects.countries)
 
@@ -77,7 +78,12 @@ const WorldMap = () => {
     const geosJsx = geographies.map(({ feature: geo, path }, i) => {
       // If the geo.properties.state value is found in the data use that, otherwise fall back to geo.properties.iso
       const dataHasStateName = state.data.some(d => d[state.columns.geo.name] === geo.properties.state)
-      const geoKey = geo.properties.state && data[geo.properties.state] ? geo.properties.state : geo.properties.name ? geo.properties.name : geo.properties.iso
+      const geoKey =
+        geo.properties.state && data[geo.properties.state]
+          ? geo.properties.state
+          : geo.properties.name
+          ? geo.properties.name
+          : geo.properties.iso
 
       const additionalData = {
         name: geo.properties.name
@@ -98,33 +104,36 @@ const WorldMap = () => {
         legendColors = applyLegendToRow(geoData)
       }
 
-      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 styles: Record<string, string | Record<string, string>> = {
-        fill: '#E6E6E6',
+        fill: geoFillColor,
         cursor: 'default'
       }
 
       const strokeWidth = 0.9
 
       // If a legend applies, return it with appropriate information.
+      const toolTip = applyTooltipsToGeo(geoDisplayName, geoData)
       if (legendColors && legendColors[0] !== '#000000' && state.general.type !== 'bubble') {
-        const toolTip = applyTooltipsToGeo(geoDisplayName, geoData)
-
         styles = {
           ...styles,
-          fill: state.general.type !== 'world-geocode' ? legendColors[0] : '#E6E6E6',
+          fill: state.general.type !== 'world-geocode' ? legendColors[0] : geoFillColor,
           cursor: 'default',
           '&:hover': {
-            fill: state.general.type !== 'world-geocode' ? legendColors[1] : '#E6E6E6'
+            fill: state.general.type !== 'world-geocode' ? legendColors[1] : geoFillColor
           },
           '&:active': {
-            fill: state.general.type !== 'world-geocode' ? legendColors[2] : '#E6E6E6'
+            fill: state.general.type !== 'world-geocode' ? 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'
         }
 
@@ -147,11 +156,38 @@ const WorldMap = () => {
       }
 
       // Default return state, just geo with no additional information
-      return <Geo additionaldata={JSON.stringify(additionalData)} geodata={JSON.stringify(geoData)} state={state} key={i + '-geo'} stroke={geoStrokeColor} strokeWidth={strokeWidth} style={styles} path={path} />
+      return (
+        <Geo
+          additionaldata={JSON.stringify(additionalData)}
+          geodata={JSON.stringify(geoData)}
+          state={state}
+          key={i + '-geo'}
+          stroke={geoStrokeColor}
+          strokeWidth={strokeWidth}
+          style={styles}
+          styles={styles}
+          path={path}
+          data-tooltip-id={`tooltip__${tooltipId}`}
+          data-tooltip-html={toolTip}
+        />
+      )
     })
 
     // Cities
-    geosJsx.push(<CityList applyLegendToRow={applyLegendToRow} applyTooltipsToGeo={applyTooltipsToGeo} data={data} displayGeoName={displayGeoName} geoClickHandler={geoClickHandler} key='cities' projection={projection} state={state} titleCase={titleCase} tooltipId={tooltipId} />)
+    geosJsx.push(
+      <CityList
+        applyLegendToRow={applyLegendToRow}
+        applyTooltipsToGeo={applyTooltipsToGeo}
+        data={data}
+        displayGeoName={displayGeoName}
+        geoClickHandler={geoClickHandler}
+        key='cities'
+        projection={projection}
+        state={state}
+        titleCase={titleCase}
+        tooltipId={tooltipId}
+      />
+    )
 
     // Bubbles
     if (state.general.type === 'bubble') {
@@ -166,7 +202,9 @@ const WorldMap = () => {
           applyTooltipsToGeo={applyTooltipsToGeo}
           displayGeoName={displayGeoName}
           tooltipId={tooltipId}
-          handleCircleClick={country => handleCircleClick(country, state, setState, setRuntimeData, generateRuntimeData)}
+          handleCircleClick={country =>
+            handleCircleClick(country, state, setState, setRuntimeData, generateRuntimeData)
+          }
         />
       )
     }
@@ -178,19 +216,42 @@ const WorldMap = () => {
     <ErrorBoundary component='WorldMap'>
       {hasZoom ? (
         <svg viewBox='0 0 880 500' role='img' aria-label={handleMapAriaLabels(state)}>
-          <rect height={500} width={880} onClick={() => handleReset(state, setState, setRuntimeData, generateRuntimeData)} fill='white' />
-          <ZoomableGroup zoom={position.zoom} center={position.coordinates} onMoveEnd={handleMoveEnd} maxZoom={4} projection={projection} width={880} height={500}>
+          <rect
+            height={500}
+            width={880}
+            onClick={() => handleReset(state, setState, setRuntimeData, generateRuntimeData)}
+            fill='white'
+          />
+          <ZoomableGroup
+            zoom={position.zoom}
+            center={position.coordinates}
+            onMoveEnd={handleMoveEnd}
+            maxZoom={4}
+            projection={projection}
+            width={880}
+            height={500}
+          >
             <Mercator data={world}>{({ features }) => constructGeoJsx(features)}</Mercator>
           </ZoomableGroup>
         </svg>
       ) : (
         <svg viewBox='0 0 880 500'>
-          <ZoomableGroup zoom={1} center={position.coordinates} onMoveEnd={handleMoveEnd} maxZoom={0} projection={projection} width={880} height={500}>
+          <ZoomableGroup
+            zoom={1}
+            center={position.coordinates}
+            onMoveEnd={handleMoveEnd}
+            maxZoom={0}
+            projection={projection}
+            width={880}
+            height={500}
+          >
             <Mercator data={world}>{({ features }) => constructGeoJsx(features)}</Mercator>
           </ZoomableGroup>
         </svg>
       )}
-      {(state.general.type === 'data' || (state.general.type === 'world-geocode' && hasZoom) || (state.general.type === 'bubble' && hasZoom)) && (
+      {(state.general.type === 'data' ||
+        (state.general.type === 'world-geocode' && hasZoom) ||
+        (state.general.type === 'bubble' && hasZoom)) && (
         <ZoomControls
           // prettier-ignore
           generateRuntimeData={generateRuntimeData}

package/src/data/initial-state.js

@@ -126,5 +126,6 @@ export default {
       }
     ]
   },
-  filterBehavior: 'Filter Change'
+  filterBehavior: 'Filter Change',
+  filterIntro: ''
 }

package/src/helpers/applyColorToLegend.ts

@@ -0,0 +1,80 @@
+import colorPalettes from '@cdc/core/data/colorPalettes'
+import chroma from 'chroma-js'
+import { isOlderVersion } from '@cdc/core/helpers/ver/versionNeedsUpdate'
+import { type ChartConfig } from '@cdc/chart/src/types/ChartConfig'
+
+/**
+ * applyColorToLegend
+ * @param legendIdx legend item index
+ * @param config chart config
+ * @param result hash of legend items
+ * @returns
+ */
+export const applyColorToLegend = (legendIdx: number, config: ChartConfig, result = []) => {
+  try {
+    if (!config) throw new Error('Config is required')
+
+    const colorDistributions = {
+      1: [1],
+      2: [1, 3],
+      3: [1, 3, 5],
+      4: [0, 2, 4, 6],
+      5: [0, 2, 4, 6, 7],
+      6: [0, 2, 3, 4, 5, 7],
+      7: [0, 2, 3, 4, 5, 6, 7],
+      8: [0, 2, 3, 4, 5, 6, 7, 8],
+      9: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+      10: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+    }
+
+    const specialClasses = config?.legend?.specialClasses
+    const { general } = config || {}
+    // Default to "bluegreen" color scheme if the passed color isn't valid
+    let mapColorPalette = config.customColors || colorPalettes[config.color] || colorPalettes['bluegreen']
+
+    // Handle Region Maps need for a 10th color
+    if (general.geoType === 'us-region' && mapColorPalette.length < 10 && mapColorPalette.length > 8) {
+      if (!general.palette.isReversed) {
+        mapColorPalette.push(chroma(mapColorPalette[8]).darken(0.75).hex())
+      } else {
+        mapColorPalette.unshift(chroma(mapColorPalette[0]).darken(0.75).hex())
+      }
+    }
+
+    let colorIdx = legendIdx - specialClasses.length
+
+    // Special Classes (No Data)
+    if (result[legendIdx].special) {
+      if (isOlderVersion(config.version, '4.24.11')) {
+        const specialClassColors = chroma.scale(['#D4D4D4', '#939393']).colors(specialClasses)
+        return specialClassColors[legendIdx]
+      } else {
+        const specialClassColors = ['#A9AEB1', '#71767A']
+        return specialClassColors[legendIdx]
+      }
+    }
+
+    if (config.color.includes('qualitative')) return mapColorPalette[colorIdx]
+
+    // If the current version is newer than 4.24.10, use the color palette
+    if (!isOlderVersion(config.version, '4.24.12')) {
+      if (config.customColors) return mapColorPalette[legendIdx - specialClasses.length]
+    }
+
+    let amt = Math.max(result.length - specialClasses.length, 1)
+    let distributionArray = colorDistributions[amt]
+    let specificColor
+
+    if (distributionArray) {
+      specificColor = distributionArray[legendIdx - specialClasses.length]
+    } else if (mapColorPalette[colorIdx]) {
+      specificColor = colorIdx
+    } else {
+      specificColor = mapColorPalette.length - 1
+    }
+
+    return mapColorPalette[specificColor]
+  } catch (error) {
+    console.error('Error in applyColorToLegend', error)
+  }
+}

package/src/helpers/colors.ts

@@ -0,0 +1,23 @@
+import { MapConfig } from '../types/MapConfig'
+
+/**
+ * Returns the stroke color for geographical borders based on the provided map configuration.
+ *
+ * @param {MapConfig} config - The map configuration object.
+ * @returns {string} The stroke color for geographical borders.
+ * @see DEV-9726 Map Border Colors and Fills
+ *
+ */
+export const getGeoStrokeColor = (config: MapConfig) => {
+  const bodyStyles = getComputedStyle(document.body)
+  if (config.general.geoBorderColor === 'darkGray') {
+    return bodyStyles.getPropertyValue('--cool-gray-90')
+  } else {
+    return bodyStyles.getPropertyValue('--white')
+  }
+}
+
+export const getGeoFillColor = (config: MapConfig) => {
+  const bodyStyles = getComputedStyle(document.body)
+  return bodyStyles.getPropertyValue('--cool-gray-10')
+}

package/src/hooks/useTooltip.ts

@@ -14,7 +14,9 @@ const useTooltip = props => {
     if (geoType === 'us-county' && type !== 'us-geocode') {
       let stateFipsCode = row[config.columns.geo.name].substring(0, 2)
       const stateName = supportedStatesFipsCodes[stateFipsCode]
-      toolTipText += hideGeoColumnInTooltip ? `<strong>${stateName}</strong><br/>` : `<strong>Location:  ${stateName}</strong><br/>`
+      toolTipText += hideGeoColumnInTooltip
+        ? `<strong>${stateName}</strong><br/>`
+        : `<strong>Location:  ${stateName}</strong><br/>`
     }
     return toolTipText
   }
@@ -61,7 +63,7 @@ const useTooltip = props => {
   const handleTooltipSpecialClassText = (specialClasses, column, row, value, columnKey) => {
     if (specialClasses && specialClasses.length && typeof specialClasses[0] === 'object') {
       for (const specialClass of specialClasses) {
-        if (column.name === specialClass.key && String(row[specialClass.key]) === specialClass.value) {
+        if (column.name === specialClass.key && String(row?.[specialClass.key]) === specialClass.value) {
           value = displayDataAsText(specialClass.label, columnKey)
           break
         }
@@ -73,7 +75,8 @@ const useTooltip = props => {
   const handleTooltipPrimaryColumn = (tooltipValue, column) => {
     const { hidePrimaryColumnInTooltip } = config.general as { hidePrimaryColumnInTooltip: boolean }
     let tooltipPrefix = column.label?.length > 0 ? column.label : ''
-    if ((column.name === config.columns.primary.name && hidePrimaryColumnInTooltip) || !tooltipPrefix) return `<li class="tooltip-body">${tooltipValue}</li>`
+    if ((column.name === config.columns.primary.name && hidePrimaryColumnInTooltip) || !tooltipPrefix)
+      return `<li class="tooltip-body">${tooltipValue}</li>`
     return `<li class="tooltip-body">${tooltipPrefix}: ${tooltipValue}</li>`
   }
 
@@ -91,7 +94,7 @@ const useTooltip = props => {
       legend: { specialClasses }
     } = config
 
-    if (tooltipEnabledMaps.includes(currentMapType) && undefined !== row) {
+    if (tooltipEnabledMaps.includes(currentMapType) && (row !== undefined || config.general.geoType === 'world')) {
       toolTipText += `<ul>`
 
       // if tooltips are allowed, loop through each column
@@ -102,7 +105,7 @@ const useTooltip = props => {
           let tooltipValue = handleTooltipSpecialClassText(specialClasses, column, row, '', columnKey)
 
           if (!tooltipValue) {
-            tooltipValue = displayDataAsText(row[column.name], columnKey)
+            tooltipValue = row ? displayDataAsText(row[column.name], columnKey) : 'No Data'
           }
 
           toolTipText += handleTooltipPrimaryColumn(tooltipValue, column)
@@ -115,7 +118,7 @@ const useTooltip = props => {
   }
 
   const buildTooltip = (row, geoName, toolTipText = '') => {
-    if (!row) return
+    if (!row && config.general.geoType !== 'world') return
 
     // Handle County Location Columns
     toolTipText += handleTooltipStateNameColumn(toolTipText, row)