@cdc/map 4.24.12 → 4.25.2-25

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

@@ -5,6 +5,7 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 // United States Topojson resources
 import topoJSON from '../data/us-topo.json'
 import hexTopoJSON from '../data/us-hex-topo.json'
+import { supportedTerritories } from '../../../data/supported-geos'
 
 import { geoCentroid, geoPath } from 'd3-geo'
 import { feature } from 'topojson-client'
@@ -17,15 +18,16 @@ import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 import HexIcon from './HexIcon'
 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 { checkColorContrast, getContrastColor, outlinedTextColor } from '@cdc/core/helpers/cove/accessibility'
 import { getGeoFillColor, getGeoStrokeColor } from '../../../helpers/colors'
+import { handleMapAriaLabels } from '../../../helpers/handleMapAriaLabels'
+import { titleCase } from '../../../helpers/titleCase'
+import TerritoriesSection from './TerritoriesSection'
 
 const { features: unitedStates } = feature(topoJSON, topoJSON.objects.states)
 const { features: unitedStatesHex } = feature(hexTopoJSON, hexTopoJSON.objects.states)
@@ -61,11 +63,8 @@ const UsaMap = () => {
       data,
       displayGeoName,
       geoClickHandler,
-      handleMapAriaLabels,
       setSharedFilterValue,
       state,
-      supportedTerritories,
-      titleCase,
       tooltipId,
       handleDragStateChange,
       mapId,
@@ -407,7 +406,7 @@ const UsaMap = () => {
               {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
@@ -521,12 +520,11 @@ const UsaMap = () => {
 
     if (undefined === abbr) return null
 
-    let textColor = getContrastColor('#FFF', bgColor)
-
-    // always make HI black since it is off to the side
+    // HI background is always white since it is off to the side
     if (abbr === 'US-HI' && !general.displayAsHex) {
-      textColor = '#000'
+      bgColor = '#FFF'
     }
+    const { textColor, strokeColor } = outlinedTextColor(bgColor)
 
     let x = 0,
       y = hexMap.type === 'shapes' && general.displayAsHex ? -10 : 5
@@ -540,7 +538,16 @@ const UsaMap = () => {
     if (undefined === offsets[abbr] || isHex) {
       return (
         <g transform={`translate(${centroid})`} tabIndex={-1}>
-          <text x={x} y={y} fontSize={14} strokeWidth='0' style={{ fill: textColor }} textAnchor='middle'>
+          <text
+            x={x}
+            y={y}
+            fontSize={14}
+            strokeWidth='0'
+            // paintOrder='stroke' // PENDING DEV-9278: Adds a stroke around the text potentially for 508 compliance
+            // stroke={strokeColor}
+            style={{ fill: textColor }}
+            textAnchor='middle'
+          >
             {abbr.substring(3)}
           </text>
         </g>
@@ -562,8 +569,10 @@ const UsaMap = () => {
         <text
           x={4}
           strokeWidth='0'
+          // paintOrder='stroke' // PENDING DEV-9278: Adds a stroke around the text potentially for 508 compliance
+          // stroke={strokeColor}
           fontSize={13}
-          style={{ fill: '#202020' }}
+          style={{ fill: textColor }}
           alignmentBaseline='middle'
           transform={`translate(${centroid[0] + dx}, ${centroid[1] + dy})`}
         >
@@ -588,22 +597,7 @@ const UsaMap = () => {
         {annotations.length > 0 && <Annotation.Draggable onDragStateChange={handleDragStateChange} />}
       </svg>
 
-      {territories.length > 0 && (
-        <>
-          {/* Temporarily make the max width fit the image width */}
-          <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='mt-1 mb-2 d-flex flex-wrap territories'>{territories}</span>
-            </div>
-          </div>
-        </>
-      )}
+      <TerritoriesSection territories={territories} logo={logo} config={state} territoriesData={territoriesData} />
     </ErrorBoundary>
   )
 }

package/src/components/WorldMap/WorldMap.tsx

@@ -12,6 +12,9 @@ import BubbleList from '../BubbleList'
 import ConfigContext from '../../context'
 import ZoomControls from '../ZoomControls'
 import { getGeoFillColor, getGeoStrokeColor } from '../../helpers/colors'
+import { supportedCountries } from '../../data/supported-geos'
+import { handleMapAriaLabels } from '../../helpers/handleMapAriaLabels'
+import { titleCase } from '../../helpers/titleCase'
 
 const { features: world } = feature(topoJSON, topoJSON.objects.countries)
 
@@ -26,7 +29,6 @@ const WorldMap = () => {
     displayGeoName,
     generateRuntimeData,
     geoClickHandler,
-    handleMapAriaLabels,
     hasZoom,
     position,
     setFilteredCountryCode,
@@ -34,11 +36,7 @@ const WorldMap = () => {
     setRuntimeData,
     setState,
     state,
-    supportedCountries,
-    titleCase,
     tooltipId,
-    setScale,
-    setTranslate
   } = useContext(ConfigContext)
 
   // TODO Refactor - state should be set together here to avoid rerenders

package/src/context.ts

@@ -4,17 +4,12 @@ import { MapConfig } from './types/MapConfig'
 type MapContext = {
   applyLegendToRow
   applyTooltipsToGeo
-  closeModal
-  columnsInData
-  currentViewport
   data
-  displayDataAsText
   displayGeoName
   filteredCountryCode
   generateColorsArray
   generateRuntimeData
   geoClickHandler
-  handleMapAriaLabels
   handleCircleClick: Function
   hasZoom
   innerContainerRef
@@ -22,7 +17,6 @@ type MapContext = {
   isDebug
   isEditor
   loadConfig
-  navigationHandler
   position
   resetLegendToggles
   runtimeFilters
@@ -37,13 +31,7 @@ type MapContext = {
   setSharedFilterValue
   setState
   state: MapConfig
-  supportedCities
-  supportedCounties
-  supportedCountries
-  supportedTerritories
-  titleCase
   tooltipId: string
-  viewport
 }
 
 const ConfigContext = createContext({} as MapContext)

package/src/data/initial-state.js

@@ -1,6 +1,7 @@
 export default {
   annotations: [],
   general: {
+    navigationTarget: '_self',
     noStateFoundMessage: 'Map Unavailable',
     annotationDropdownText: 'Annotations',
     geoBorderColor: 'darkGray',
@@ -11,8 +12,7 @@ export default {
     showDownloadButton: false,
     showDownloadMediaButton: false,
     displayAsHex: false,
-    displayStateLabels: false,
-    territoriesLabel: 'Territories',
+    displayStateLabels: true,
     territoriesAlwaysShow: false,
     language: 'en',
     geoType: 'single-state',

package/src/data/supported-geos.js

@@ -537,6 +537,9 @@ export const supportedTerritories = {
 // prettier-ignore
 export const supportedCities = {
   'ALASKA NATIVE TRIBAL HEALTH CONSORTIUM': [-149.8067, 61.1827],
+  'ALBANY, NEW YORK': [-73.9665676, 42.6679788],
+  'ALBANY, NY': [-73.9665676, 42.6679788],
+  'ALBANY': [-73.9665676, 42.6679788],
   'ALBUQUERQUE': [-106.650421, 35.084385],
   'ALEXANDRIA': [-77.0469, 38.8048],
   'AMERICAN INDIAN CANCER FOUNDATION': [-93.1777, 45.0119],
@@ -568,6 +571,7 @@ export const supportedCities = {
   'COLUMBUS': [-82.998795, 39.961178],
   'CORPUS CHRISTI': [-97.396378, 27.800583],
   'DALLAS': [-96.796989, 32.776665],
+  'DC': [-77.036873, 38.907192],
   'DENVER': [-104.990250, 39.739235],
   'DETROIT': [-83.045753, 42.331429],
   'DISTRICT OF COLUMBIA': [-77.036873, 38.907192],
@@ -601,10 +605,16 @@ export const supportedCities = {
   'IRVINE': [-117.826508, 33.684566],
   'IRVING': [-96.948891, 32.814018],
   'JACKSONVILLE': [-81.655647, 30.332184],
+  'JAMAICA PLAINS, MA': [-71.1382393, 42.308217],
+  'JAMAICA PLAINS, MARYLAND': [-71.1382393, 42.308217],
+  'JAMAICA PLAINS': [-71.1382393, 42.308217],
   'JERSEY CITY': [-74.077644, 40.728157],
   'KANSAS CITY': [-94.578568, 39.099728],
   'KAW NATION OF OKLAHOMA': [-96.8633, 36.7669],
   'LAKEVIEW': [-104.9903, 39.7392],
+  'LANSING, MI': [-84.6418571, 42.721154],
+  'LANSING, MICHIGAN': [-84.6418571, 42.721154],
+  'LANSING': [-84.6418571, 42.721154],
   'LAREDO': [-99.507553, 27.503561],
   'LAS VEGAS': [-115.139832, 36.169941],
   'LEXINGTON': [-84.503716, 38.040585],
@@ -638,6 +648,9 @@ export const supportedCities = {
   'NORTHWEST PORTLAND AREA INDIAN HEALTH BOARD': [-122.6863, 45.5076],
   'OAKLAND': [-122.271111, 37.804363],
   'OKLAHOMA CITY': [-97.516426, 35.467560],
+  'OLYMPIA, WA': [-122.9382403, 47.0394791],
+  'OLYMPIA, WASHINGTON': [-122.9382403, 47.0394791],
+  'OLYMPIA': [-122.9382403, 47.0394791],
   'OMAHA': [-95.934502, 41.256538],
   'ORLANDO': [-81.379234, 28.538336],
   'PASADENA':[-95.209099,29.691063],
@@ -650,7 +663,10 @@ export const supportedCities = {
   'PROVO, UTAH': [-111.6585, 40.2338],
   'RALEIGH': [-78.638176, 35.779591],
   'RENO': [-119.813805, 39.529633],
-  'RICHMOND': [-77.436050, 37.540726],
+  'RICHMOND, CA': [-122.4248668, 37.9559018],
+  'RICHMOND, CALIFORNIA': [-122.4248668, 37.9559018],
+  'RICHMOND, VA': [-77.436050, 37.540726],
+  'RICHMOND, VIRGINIA': [-77.436050, 37.540726],
   'RIVERSIDE': [-117.375496, 33.980602],
   'ROUND ROCK, TEXAS': [-97.6789, 30.5083],
   'ROUND ROCK, TX': [-97.6789, 30.5083],
@@ -663,7 +679,6 @@ export const supportedCities = {
   'SALEM, MASSACHUSETTS': [-70.8955, 42.5197],
   'SALEM, OR': [-123.0351, 44.9429],
   'SALEM, OREGON': [-123.0351, 44.9429],
-  'SALEM, OREGON': [-123.0351, 44.9429],
   'SALT LAKE CITY': [-112.0605644, 40.7767833],
   'SALUDA, VA': [-76.5950, 37.6064],
   'SALUDA, VIRGINIA': [-76.5950, 37.6064],
@@ -686,7 +701,13 @@ export const supportedCities = {
   'ST. PETERSBURG': [-82.640289, 27.767601],
   'STOCKTON': [-121.290779, 37.957703],
   'SYRACUSE': [-76.1742992, 43.0352913],
+  'TALLAHASSEE, FL': [-84.253917, 30.467056],
+  'TALLAHASSEE, FLORIDA': [-84.253917, 30.467056],
+  'TALLAHASSEE': [-84.253917, 30.467056],
   'TAMPA': [-82.457176, 27.950575],
+  'TAYLORSVILLE, UT': [-111.9702728, 40.658078],
+  'TAYLORSVILLE, UTAH': [-111.9702728, 40.658078],
+  'TAYLORSVILLE': [-111.9702728, 40.658078],
   'TOLEDO': [-83.537865, 41.652805],
   'TUCSON': [-110.974709, 32.222607],
   'TULSA': [-95.992775, 36.153980],
@@ -695,7 +716,6 @@ export const supportedCities = {
   'VIRGINIA BEACH': [-75.977982, 36.852924],
   'WARREN': [-80.8184, 41.2376],
   'WASHINGTON D.C.': [-77.036873, 38.907192],
-  'DC': [-77.036873, 38.907192],
   'WASHINGTON DC.': [-77.036873, 38.907192],
   'WASHINGTON DC': [-77.036873, 38.907192],
   'WICHITA': [-97.330055, 37.687176],

package/src/helpers/applyColorToLegend.ts

@@ -1,7 +1,7 @@
 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'
+import isOlderVersion from '@cdc/core/helpers/isOlderVersion'
 
 /**
  * applyColorToLegend
@@ -45,7 +45,7 @@ export const applyColorToLegend = (legendIdx: number, config: ChartConfig, resul
 
     // Special Classes (No Data)
     if (result[legendIdx].special) {
-      if (isOlderVersion(config.version, '4.24.11')) {
+      if (!config?.migrations?.addColorMigration) {
         const specialClassColors = chroma.scale(['#D4D4D4', '#939393']).colors(specialClasses)
         return specialClassColors[legendIdx]
       } else {
@@ -57,7 +57,7 @@ export const applyColorToLegend = (legendIdx: number, config: ChartConfig, resul
     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?.migrations?.addColorMigration) {
       if (config.customColors) return mapColorPalette[legendIdx - specialClasses.length]
     }
 

package/src/helpers/closeModal.ts

@@ -0,0 +1,9 @@
+export const closeModal = ({ target }, modal: string, setModal: Function) => {
+  if (
+    'string' === typeof target.className &&
+    (target.className.includes('modal-close') || target.className.includes('modal-background')) &&
+    null !== modal
+  ) {
+    setModal(null)
+  }
+}

package/src/helpers/handleMapAriaLabels.ts

@@ -0,0 +1,38 @@
+export const handleMapAriaLabels = (state: MapConfig = '', testing = false) => {
+  if (testing) console.log(`handleMapAriaLabels Testing On: ${state}`) // eslint-disable-line
+  try {
+    if (!state.general.geoType) throw Error('handleMapAriaLabels: no geoType found in state')
+    const {
+      general: { title, geoType, statePicked }
+    } = state
+    let ariaLabel = ''
+    switch (geoType) {
+      case 'world':
+        ariaLabel += 'World map'
+        break
+      case 'us':
+        ariaLabel += 'United States map'
+        break
+      case 'us-county':
+        ariaLabel += `United States county map`
+        break
+      case 'single-state':
+        ariaLabel += `${statePicked.stateName} county map`
+        break
+      case 'us-region':
+        ariaLabel += `United States HHS Region map`
+        break
+      default:
+        ariaLabel = 'Data visualization container'
+        break
+    }
+
+    if (title) {
+      ariaLabel += ` with the title: ${title}`
+    }
+
+    return ariaLabel
+  } catch (e) {
+    console.error('COVE: ', e.message) // eslint-disable-line
+  }
+}

package/src/helpers/indexOfIgnoreType.ts

@@ -0,0 +1,8 @@
+export const indexOfIgnoreType = (arr, item) => {
+  for (let i = 0; i < arr.length; i++) {
+    if (item === arr[i]) {
+      return i
+    }
+  }
+  return -1
+}

package/src/helpers/navigationHandler.ts

@@ -0,0 +1,21 @@
+export const navigationHandler = (
+  navigationTarget: '_self' | '_blank',
+  urlString: string,
+  customNavigationHandler?: Function
+): void => {
+  // Call custom navigation method if passed
+  if (customNavigationHandler) {
+    customNavigationHandler(urlString)
+    return
+  }
+
+  // Abort if value is blank
+  if (0 === urlString.length) {
+    throw Error('Blank string passed as URL. Navigation aborted.')
+  }
+
+  const urlObj = new URL(urlString, window.location.origin)
+
+  // Open constructed link in new tab/window
+  window.open(urlObj.toString(), navigationTarget)
+}

package/src/helpers/toTitleCase.ts

@@ -0,0 +1,44 @@
+// if city has a hyphen then in tooltip it ends up UPPER CASE instead of just regular Upper Case
+// - this function is used to prevent that and instead give the formatting that is wanted
+// Example:  Desired city display in tooltip on map: "Inter-Tribal Indian Reservation"
+export const titleCase = string => {
+  // guard clause else error in editor
+  if (!string) return
+
+  if (string !== undefined) {
+    const toTitleCase = word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase()
+
+    if (string.toUpperCase().includes('U.S.') || string.toUpperCase().includes('US')) {
+      return string
+        .split(' ')
+        .map(word => {
+          if (word.toUpperCase() === 'U.S.' || word.toUpperCase() === 'US') {
+            return word.toUpperCase()
+          } else {
+            return toTitleCase(word)
+          }
+        })
+        .join(' ')
+    }
+    // if hyphen found, then split, uppercase each word, and put back together
+    if (string.includes('–') || string.includes('-')) {
+      let dashSplit = string.includes('–') ? string.split('–') : string.split('-') // determine hyphen or en dash to split on
+      let splitCharacter = string.includes('–') ? '–' : '-' // print hyphen or en dash later on.
+      let frontSplit = dashSplit[0]
+        .split(' ')
+        .map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase())
+        .join(' ')
+      let backSplit = dashSplit[1]
+        .split(' ')
+        .map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase())
+        .join(' ')
+      return frontSplit + splitCharacter + backSplit
+    } else {
+      // just return with each word uppercase
+      return string
+        .split(' ')
+        .map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase())
+        .join(' ')
+    }
+  }
+}

package/src/helpers/validateFipsCodeLength.ts

@@ -0,0 +1,30 @@
+import { MapConfig } from '../types/MapConfig'
+
+/**
+ * Validates and ensures proper formatting of FIPS codes in the provided `MapConfig` object.
+ *
+ * - If the `geoType` is "us-county" or "us" with associated data:
+ *   - Iterates through each data entry in `newState.data`.
+ *   - Checks if the value in the `geo` column is numeric and has a length of 4.
+ *     - If so, prepends a `0` to ensure a valid 5-digit FIPS code.
+ *   - Converts the `geo` column value to a string for consistency.
+ *
+ * @param newState - The state object containing map data and configuration.
+ * @returns The updated state object with corrected FIPS code formatting.
+ */
+export const validateFipsCodeLength = (newState: MapConfig) => {
+  if (newState.general.geoType === 'us-county' || (newState.general.geoType === 'us' && newState?.data)) {
+    newState?.data.forEach(dataPiece => {
+      if (dataPiece[newState.columns.geo.name]) {
+        if (
+          !isNaN(parseInt(dataPiece[newState.columns.geo.name])) &&
+          dataPiece[newState.columns.geo.name].length === 4
+        ) {
+          dataPiece[newState.columns.geo.name] = 0 + dataPiece[newState.columns.geo.name]
+        }
+        dataPiece[newState.columns.geo.name] = dataPiece[newState.columns.geo.name].toString()
+      }
+    })
+  }
+  return newState
+}

package/src/hooks/useResizeObserver.ts

@@ -0,0 +1,42 @@
+import { useState, useCallback, useEffect } from 'react'
+import { type ViewPort } from '@cdc/core/types/ViewPort'
+import { type DimensionsType } from '@cdc/core/types/Dimensions'
+import getViewport from '@cdc/core/helpers/getViewport'
+import ResizeObserver from 'resize-observer-polyfill'
+
+export const useResizeObserver = (isEditor: boolean) => {
+  const [dimensions, setDimensions] = useState<DimensionsType>([0, 0])
+  const [currentViewport, setCurrentViewport] = useState<ViewPort>(null)
+  const [container, setContainer] = useState<HTMLElement | null>(null)
+
+  const resizeObserver = new ResizeObserver(entries => {
+    for (let entry of entries) {
+      let { width, height } = entry.contentRect
+      let newViewport = getViewport(entry.contentRect.width)
+
+      let editorWidth = 350
+
+      setCurrentViewport(newViewport)
+
+      if (isEditor) {
+        width = width - editorWidth
+      }
+      setDimensions([width, height])
+    }
+  })
+
+  const outerContainerRef = useCallback(node => {
+    if (node !== null) {
+      resizeObserver.observe(node)
+    }
+    setContainer(node)
+
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [])
+
+  return { resizeObserver, dimensions, currentViewport, outerContainerRef, container }
+}
+
+export default useResizeObserver

package/src/hooks/useTooltip.ts

@@ -1,5 +1,7 @@
+import { displayDataAsText } from '../../../core/helpers/displayDataAsText'
+
 const useTooltip = props => {
-  const { state, displayGeoName, displayDataAsText, supportedStatesFipsCodes } = props
+  const { state, displayGeoName, supportedStatesFipsCodes } = props
 
   const config = state
 
@@ -105,7 +107,7 @@ const useTooltip = props => {
           let tooltipValue = handleTooltipSpecialClassText(specialClasses, column, row, '', columnKey)
 
           if (!tooltipValue) {
-            tooltipValue = row ? displayDataAsText(row[column.name], columnKey) : 'No Data'
+            tooltipValue = row ? displayDataAsText(row[column.name], columnKey, state) : 'No Data'
           }
 
           toolTipText += handleTooltipPrimaryColumn(tooltipValue, column)

package/src/index.jsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client'
 
 import CdcMap from './CdcMap'
 
+import '@cdc/core/styles/cove-main.scss'
 import 'react-tooltip/dist/react-tooltip.css'
 import './coreStyles_map.scss'
 

package/src/scss/editor-panel.scss

@@ -17,8 +17,9 @@
 .cdc-open-viz-module {
   .geo-buttons {
     list-style: none;
-    display: flex;
     color: var(--mediumGray);
+    display: grid;
+    button { width: 100% !important; }
     svg {
       display: block;
       max-width: 80px;

package/src/scss/filters.scss

@@ -12,7 +12,6 @@
     label {
       display: inherit;
       margin-bottom: 5px;
-      font-weight: 600;
       font-size: 16px;
     }
   }
@@ -22,10 +21,6 @@
     flex-wrap: wrap;
   }
 
-  label:not(:empty) {
-    margin-right: 0.4em;
-  }
-
   .single-filter {
     margin-bottom: 0.5em;
   }