@cdc/map 4.24.12-2 → 4.25.1

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;
   }

package/src/scss/main.scss

@@ -48,7 +48,6 @@
 .cdc-map-inner-container {
   @import './map';
   flex-grow: 1;
-  text-rendering: geometricPrecision;
   color: #202020;
   border: 0;
   text-align: left;
@@ -81,10 +80,7 @@
         content: ' ';
         position: absolute;
         top: 0;
-        left: -1em;
-        right: -1em;
         bottom: 0;
-        background: rgba(0, 0, 0, 0.05);
         z-index: 7;
       }
       .modal-content {
@@ -94,71 +90,72 @@
         top: 50%;
         left: 50%;
         display: flex;
-        flex-direction: row;
-        border-radius: 5px;
+        flex-direction: column;
         transform: translate(-50%, -50%);
-        border: rgba(0, 0, 0, 0.3) 1px solid;
-        box-shadow: rgba(0, 0, 0, 0.2) 3px 3px 7px;
-        opacity: 1;
-        line-height: 1.4em;
-        font-size: 1rem;
-        border-radius: 4px;
+        border: 1px solid rgba(0, 0, 0, 0.3);
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        border-radius: 5px;
+        padding: 16px 40px;
         min-width: 250px;
-        padding: 16px 40px 16px 20px;
         width: auto;
-        .content {
-          flex-grow: 1;
-        }
-        .legend-item {
-          margin-right: 0.75em;
-          margin-top: 3px;
-          flex-shrink: 0;
-        }
-        @include breakpointClass(sm) {
-          transform: translate(-50%, -100%);
-        }
-        @include breakpointClass(md) {
-          transform: translate(-50%, -120%);
-        }
-        @include breakpointClass(lg) {
-          font-size: 0.9em;
-          min-width: 300px;
-          .legend-item {
-            height: 1.3em;
-            width: 1.3em;
-          }
-        }
-        strong {
-          font-weight: 600;
-          font-size: 1.2em;
-        }
-        .modal-close {
-          position: absolute;
-          right: 20px;
-          top: 18px;
-          cursor: pointer;
-          width: 1em;
-        }
-        a.navigation-link {
-          text-decoration: underline;
-          cursor: pointer;
-          color: #075290;
-          display: flex;
-          svg {
-            display: inline-block;
-            max-width: 13px;
-            margin-left: 0.5em;
-          }
-        }
-        &.capitalize p {
-          text-transform: capitalize;
+        max-height: 90vh; /* Constrain the modal's height to 90% of the viewport */
+        overflow-y: auto; /* Enable vertical scrolling if content overflows */
+        font-size: 1rem;
+        line-height: 1.4em;
+      }
+
+      .modal-content .content {
+        flex-grow: 1;
+      }
+
+      .modal-content .legend-item {
+        margin-right: 0.75em;
+        margin-top: 3px;
+        flex-shrink: 0;
+      }
+
+      .modal-content strong {
+        font-weight: 600;
+        font-size: 1.2em;
+      }
+
+      .modal-content .modal-close {
+        position: absolute;
+        right: 20px;
+        top: 18px;
+        cursor: pointer;
+        width: 1em;
+      }
+
+      .modal-content a.navigation-link {
+        text-decoration: underline;
+        cursor: pointer;
+        color: #075290;
+        display: flex;
+      }
+
+      .modal-content a.navigation-link svg {
+        display: inline-block;
+        max-width: 13px;
+        margin-left: 0.5em;
+      }
+
+      .modal-content.capitalize p {
+        text-transform: capitalize;
+      }
+
+      /* Responsive adjustments for smaller screens */
+      @media (max-width: 1048px) {
+        .modal-content {
+          width: 90%; /* Adjust width to fit smaller screens */
+          top: 10%; /* Offset from the top for better usability */
+          transform: translate(-50%, 0); /* Remove vertical centering */
         }
       }
     }
   }
 
   p.subtext {
-    font-size: 0.9em;
     em {
       font-style: italic;
     }
@@ -168,7 +165,6 @@
   }
 
   span.legend-item {
-    margin-right: 5px;
     border-radius: 300px;
     vertical-align: middle;
     display: inline-block;

package/src/scss/map.scss

@@ -75,7 +75,6 @@ $medium: 768px;
   position: relative;
   flex-grow: 1;
   width: 100%;
-  overflow: hidden;
   .geo-point {
     transition: 0.3s all;
     circle {
@@ -102,10 +101,7 @@ $medium: 768px;
 }
 
 .territories-label {
-  color: black;
-  font-size: 1.1em;
-  display: block;
-  margin-top: 15px;
+  font-size: 1em;
 }
 
 // Cities and Territories
@@ -194,7 +190,6 @@ $medium: 768px;
     transform: none;
   }
   .territories {
-    font-size: 1em;
     > span {
       margin-left: 0;
     }
@@ -327,10 +322,3 @@ canvas {
   pointer-events: none;
   display: none;
 }
-
-.data-table-container {
-  margin: 20px 0px 0px;
-  &.download-link-above {
-    margin-top: 0;
-  }
-}

package/src/types/MapConfig.ts

@@ -1,8 +1,8 @@
-import { ComponentThemes } from '@cdc/core/types/ComponentThemes'
-import { Visualization } from '@cdc/core/types/Visualization'
-import { EditorColumnProperties } from '@cdc/core/types/EditorColumnProperties'
-import { Version } from '@cdc/core/types/Version'
-import { VizFilter } from '@cdc/core/types/VizFilter'
+import { type ComponentThemes } from '@cdc/core/types/ComponentThemes'
+import { type Visualization } from '@cdc/core/types/Visualization'
+import { type EditorColumnProperties } from '@cdc/core/types/EditorColumnProperties'
+import { type Version } from '@cdc/core/types/Version'
+import { type VizFilter } from '@cdc/core/types/VizFilter'
 
 export type MapVisualSettings = {
   /** minBubbleSize - Minimum Circle Size when the map has a type of bubble */
@@ -16,9 +16,8 @@ export type MapVisualSettings = {
   /** cityStyle - optional visual indicator of label on the Legend */
   cityStyleLabel: string
   /** geoCodeCircleSize - controls the size of the city style option (circle or pin) */
-
   geoCodeCircleSize: number
-  /** showBubbleZeros - shows circles on maps when the data is provided even if its a zero value */
+  /** showBubbleZeros - shows circles on maps when the data is provided even if it's a zero value */
   showBubbleZeros: boolean
   /** additionalCityStyles - shows Circle, Square, Triangle, Rhombus/Diamond, Star, Map Pin on maps when the additionalCityStyles is added */
   additionalCityStyles: [] | [{ label: string; column: string; value: string; shape: string }]
@@ -47,7 +46,7 @@ export type PrimaryColumnProperties = Pick<
   EditorColumnProperties,
   'dataTable' | 'label' | 'name' | 'prefix' | 'suffix' | 'tooltip'
 >
-export type ViewportSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'
+
 export type LegendShapeItem = {
   column: string
   key: string
@@ -78,7 +77,7 @@ export type MapConfig = Visualization & {
     navigate: NavigateColumnProperties
     latitude: LatitudeColumnProperties
     longitude: LongitudeColumnProperties
-    categorical: { name }
+    categorical: { name: string }
   }
   dataUrl: string
   runtimeDataUrl: string
@@ -91,7 +90,16 @@ export type MapConfig = Visualization & {
     fullBorder: boolean
     geoBorderColor: string
     geoLabelOverride: string
-    geoType: 'us' | 'us-county' | 'world'
+    geoType:
+      | 'us'
+      | 'us-region'
+      | 'us-county'
+      | 'world'
+      | 'us-geocode'
+      | 'world-geocode'
+      | 'bubble'
+      | 'single-state'
+      | 'google-map'
     hasRegions: boolean
     headerColor: ComponentThemes
     hideGeoColumnInTooltip: boolean
@@ -151,7 +159,7 @@ export type MapConfig = Visualization & {
   tooltips: {
     appearanceType: 'hover' | 'click'
     linkLabel: string
-    capitalizeLabels: true
+    capitalizeLabels: boolean
     opacity: number
   }
   runtime: {

package/src/types/MapContext.ts

@@ -1,11 +1,10 @@
-import { type MapConfig, type ViewportSize } from './MapConfig'
+import { type MapConfig } from './MapConfig'
+import { type ViewPort } from '@cdc/core/types/ViewPort'
 
 export type MapContext = {
   applyLegendToRow
   applyTooltipsToGeo
-  closeModal
-  columnsInData
-  currentViewport: ViewportSize
+  currentViewport: ViewPort
   data
   displayDataAsText
   displayGeoName
@@ -16,7 +15,6 @@ export type MapContext = {
   handleCircleClick: Function
   handleDragStateChange: Function
   isDraggingAnnotation: boolean
-  handleMapAriaLabels
   hasZoom
   innerContainerRef
   isDashboard
@@ -25,7 +23,6 @@ export type MapContext = {
   isFilterValueSupported: boolean
   loadConfig
   logo: string
-  navigationHandler
   position
   resetLegendToggles
   runtimeFilters
@@ -38,13 +35,8 @@ export type MapContext = {
   setRuntimeFilters
   setRuntimeLegend
   setSharedFilterValue
-  setState
+  setState: (newState: MapConfig) => MapConfig
   state: MapConfig
-  supportedCities
-  supportedCounties
-  supportedCountries
-  supportedTerritories
-  titleCase
   viewport
   setStateToShow: (string) => void
   stateToShow: string