@cdc/map 4.25.8 → 4.25.10

package/src/components/Legend/components/Legend.tsx

@@ -1,6 +1,7 @@
 //TODO: Move legends to core
-import { forwardRef, useContext } from 'react'
+import { forwardRef, useContext, useMemo } from 'react'
 import parse from 'html-react-parser'
+import { processMarkupVariables } from '@cdc/core/helpers/markupProcessor'
 
 //types
 import { DimensionsType } from '@cdc/core/types/Dimensions'
@@ -20,11 +21,12 @@ import './index.scss'
 import { type ViewPort } from '@cdc/core/types/ViewPort'
 import { isBelowBreakpoint, isMobileFontViewport } from '@cdc/core/helpers/viewports'
 import { displayDataAsText } from '@cdc/core/helpers/displayDataAsText'
-import { toggleLegendActive } from '@cdc/map/src/helpers/toggleLegendActive'
+import { toggleLegendActive } from '../../../helpers/toggleLegendActive'
 import { resetLegendToggles } from '../../../helpers'
 import { MapContext } from '../../../types/MapContext'
 import LegendGroup from './LegendGroup/Legend.Group'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 const LEGEND_PADDING = 30
 
@@ -45,8 +47,7 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
     dimensions,
     mapId,
     runtimeFilters,
-    runtimeLegend,
-    setRuntimeLegend
+    runtimeLegend
   } = useContext<MapContext>(ConfigContext)
 
   const dispatch = useContext(MapDispatchContext)
@@ -61,7 +62,10 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
 
   const getFormattedLegendItems = () => {
     try {
-      if (!runtimeLegend.items) Error('No runtime legend data')
+      if (!runtimeLegend.items) {
+        console.warn('No runtime legend data available')
+        return []
+      }
       return runtimeLegend.items.map((entry, idx) => {
         const entryMax = displayDataAsText(entry.max, 'primary', config)
 
@@ -120,34 +124,36 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
         return classes.join(' ')
       }
 
-      const setAccessibleStatus = (message: string) => {
-        dispatch({ type: 'SET_ACCESSIBLE_STATUS', payload: message })
-      }
-
       return (
         <li
           className={handleListItemClass()}
           key={idx}
           title={`Legend item ${item.label} - Click to disable`}
           onClick={() => {
-            toggleLegendActive(idx, item.label, runtimeLegend, setRuntimeLegend, setAccessibleStatus)
-            publishAnalyticsEvent(
-              `map_legend_item_toggled--isolate-mode`,
-              'click',
-              `${interactionLabel}|${item.label}`,
-              'map'
-            )
+            toggleLegendActive(idx, item.label, runtimeLegend, dispatch)
+            publishAnalyticsEvent({
+              vizType: config.type,
+              vizSubType: getVizSubType(config),
+              eventType: `map_legend_item_toggled`,
+              eventAction: 'click',
+              eventLabel: `${interactionLabel}`,
+              vizTitle: getVizTitle(config),
+              specifics: `mode: isolate, label: ${item.label}`
+            })
           }}
           onKeyDown={e => {
             if (e.key === 'Enter') {
               e.preventDefault()
-              toggleLegendActive(idx, item.label, runtimeLegend, setRuntimeLegend, setAccessibleStatus)
-              publishAnalyticsEvent(
-                `map_legend_item_toggled--isolate-mode`,
-                'keydown',
-                `${interactionLabel}|${item.label}`,
-                'map'
-              )
+              toggleLegendActive(idx, item.label, runtimeLegend, dispatch)
+              publishAnalyticsEvent({
+                vizType: config.type,
+                vizSubType: getVizSubType(config),
+                eventType: `map_legend_item_toggled`,
+                eventAction: 'keydown',
+                eventLabel: `${interactionLabel}`,
+                vizTitle: getVizTitle(config),
+                specifics: `mode: isolate, label: ${item.label}`
+              })
             }
           }}
           tabIndex={0}
@@ -165,9 +171,9 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
         const { pattern, dataKey, size } = patternData
         let defaultPatternColor = 'black'
         const sizes = {
-          small: '8',
-          medium: '10',
-          large: '12'
+          small: 8,
+          medium: 10,
+          large: 12
         }
 
         const legendSize = 16
@@ -240,8 +246,15 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
     if (e) {
       e.preventDefault()
     }
-    publishAnalyticsEvent('map_legend_reset', 'click', interactionLabel, 'map')
-    resetLegendToggles(runtimeLegend, setRuntimeLegend)
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: 'map_legend_reset',
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config)
+    })
+    resetLegendToggles(runtimeLegend, dispatch)
     dispatch({
       type: 'SET_ACCESSIBLE_STATUS',
       payload: 'Legend has been reset, please reference the data table to see updated values.'
@@ -261,14 +274,17 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
     />
   )
 
-  const cityStyleShapes = {
-    pin: pin,
-    circle: <GlyphCircle color='#000' size={150} />,
-    square: <GlyphSquare color='#000' size={150} />,
-    diamond: <GlyphDiamond color='#000' size={150} />,
-    star: <GlyphStar color='#000' size={150} />,
-    triangle: <GlyphTriangle color='#000' size={150} />
-  }
+  const cityStyleShapes = useMemo(
+    () => ({
+      pin: pin,
+      circle: <GlyphCircle color='#000' size={150} />,
+      square: <GlyphSquare color='#000' size={150} />,
+      diamond: <GlyphDiamond color='#000' size={150} />,
+      star: <GlyphStar color='#000' size={150} />,
+      triangle: <GlyphTriangle color='#000' size={150} />
+    }),
+    [pin]
+  )
 
   const shouldRenderLegendList = legendListItems.length > 0 && ['Select Option', ''].includes(config.legend.groupBy)
 
@@ -286,9 +302,29 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
           <section className={legendClasses.section.join(' ') || ''} aria-label='Map Legend'>
             {(legend.title || legend.description || legend.dynamicDescription) && (
               <div className='mb-3'>
-                {legend.title && <h3 className={legendClasses.title.join(' ') || ''}>{parse(legend.title)}</h3>}
+                {legend.title && (
+                  <h3 className={legendClasses.title.join(' ') || ''}>
+                    {parse(
+                      config.enableMarkupVariables && config.markupVariables?.length > 0
+                        ? processMarkupVariables(legend.title, config.data || [], config.markupVariables, {
+                            isEditor: false,
+                            filters: config.filters || []
+                          }).processedContent
+                        : legend.title
+                    )}
+                  </h3>
+                )}
                 {legend.dynamicDescription === false && legend.description && (
-                  <p className={legendClasses.description.join(' ') || ''}>{parse(legend.description)}</p>
+                  <p className={legendClasses.description.join(' ') || ''}>
+                    {parse(
+                      config.enableMarkupVariables && config.markupVariables?.length > 0
+                        ? processMarkupVariables(legend.description, config.data || [], config.markupVariables, {
+                            isEditor: false,
+                            filters: config.filters || []
+                          }).processedContent
+                        : legend.description
+                    )}
+                  </p>
                 )}
                 {legend.dynamicDescription === true &&
                   runtimeFilters.map((filter, idx) => {
@@ -331,41 +367,41 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
 
             {((config.visual.additionalCityStyles && config.visual.additionalCityStyles.some(c => c.label)) ||
               config.visual.cityStyleLabel) && (
-              <>
-                <hr />
-                <div className={legendClasses.div.join(' ') || ''}>
-                  {config.visual.cityStyleLabel && (
-                    <div>
-                      <svg>
-                        <Group
-                          top={
-                            config.visual.cityStyle === 'pin' ? 19 : config.visual.cityStyle === 'triangle' ? 13 : 11
-                          }
-                          left={10}
-                        >
-                          {cityStyleShapes[config.visual.cityStyle.toLowerCase()]}
-                        </Group>
-                      </svg>
-                      <p>{config.visual.cityStyleLabel}</p>
-                    </div>
-                  )}
-
-                  {config.visual.additionalCityStyles.map(
-                    ({ shape, label }) =>
-                      label && (
-                        <div>
-                          <svg>
-                            <Group top={shape === 'Pin' ? 19 : shape === 'Triangle' ? 13 : 11} left={10}>
-                              {cityStyleShapes[shape.toLowerCase()]}
-                            </Group>
-                          </svg>
-                          <p>{label}</p>
-                        </div>
-                      )
-                  )}
-                </div>
-              </>
-            )}
+                <>
+                  <hr />
+                  <div className={legendClasses.div.join(' ') || ''}>
+                    {config.visual.cityStyleLabel && (
+                      <div>
+                        <svg>
+                          <Group
+                            top={
+                              config.visual.cityStyle === 'pin' ? 19 : config.visual.cityStyle === 'triangle' ? 13 : 11
+                            }
+                            left={10}
+                          >
+                            {cityStyleShapes[config.visual.cityStyle.toLowerCase()]}
+                          </Group>
+                        </svg>
+                        <p>{config.visual.cityStyleLabel}</p>
+                      </div>
+                    )}
+
+                    {config.visual.additionalCityStyles.map(
+                      ({ shape, label }, index) =>
+                        label && (
+                          <div key={`additional-city-style-${index}-${shape}`}>
+                            <svg>
+                              <Group top={shape === 'Pin' ? 19 : shape === 'Triangle' ? 13 : 11} left={10}>
+                                {cityStyleShapes[shape.toLowerCase()]}
+                              </Group>
+                            </svg>
+                            <p>{label}</p>
+                          </div>
+                        )
+                    )}
+                  </div>
+                </>
+              )}
             {runtimeLegend.disabledAmt > 0 && (
               <Button className={legendClasses.showAllButton.join(' ')} onClick={handleReset}>
                 Show All

package/src/components/Legend/components/LegendGroup/Legend.Group.tsx

@@ -1,7 +1,7 @@
 import { useContext, useMemo } from 'react'
 import './legend.group.css'
 import LegendShape from '@cdc/core/components/LegendShape'
-import { toggleLegendActive } from '@cdc/map/src/helpers/toggleLegendActive'
+import { toggleLegendActive } from '../../../../helpers/toggleLegendActive'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import ConfigContext, { MapDispatchContext } from '../../../../context'
 
@@ -17,7 +17,7 @@ interface GroupedData {
 }
 
 const LegendGroup = ({ legendItems }) => {
-  const { runtimeLegend, setRuntimeLegend, config } = useContext(ConfigContext)
+  const { runtimeLegend, config } = useContext(ConfigContext)
   const dispatch = useContext(MapDispatchContext)
   const groupLegendItems = (items: LegendItem[], data: object[], groupByKey: string): GroupedData => {
     if (!groupByKey || !data || !items) return {}
@@ -59,10 +59,13 @@ const LegendGroup = ({ legendItems }) => {
     const wasDisabled = runtimeLegend.items.find(i => i.value === item.label)?.disabled
     const delta = wasDisabled ? -1 : 1
 
-    setRuntimeLegend({
-      ...runtimeLegend,
-      items: newItems,
-      disabledAmt: (runtimeLegend.disabledAmt ?? 0) + delta
+    dispatch({
+      type: 'SET_RUNTIME_LEGEND',
+      payload: {
+        ...runtimeLegend,
+        items: newItems,
+        disabledAmt: (runtimeLegend.disabledAmt ?? 0) + delta
+      }
     })
     const message = `${wasDisabled ? 'Enabled' : 'Disabled'} legend item ${
       item.label
@@ -109,7 +112,7 @@ const LegendGroup = ({ legendItems }) => {
                   onKeyDown={e => {
                     if (e.key === 'Enter' || e.key === ' ') {
                       e.preventDefault()
-                      toggleLegendActive(index, item.label, runtimeLegend, setRuntimeLegend, setAccessibleStatus)
+                      toggleLegendActive(index, item.label, runtimeLegend, dispatch)
                     }
                   }}
                 >

package/src/components/MapContainer.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import Modal from './Modal'
+import UsaMap from './UsaMap'
+import WorldMap from './WorldMap'
+import GoogleMap from './GoogleMap'
+import { MapConfig } from '../types/MapConfig'
+import { LOGO_MAX_WIDTH } from '../helpers/constants'
+
+interface MapContainerProps {
+  config: MapConfig
+  modal: any
+  currentViewport: string
+  geoType: string
+  general: any
+  logo: string
+  mapSvgRef: React.RefObject<HTMLElement>
+}
+
+const MapContainer: React.FC<MapContainerProps> = ({
+  config,
+  modal,
+  currentViewport,
+  geoType,
+  general,
+  logo,
+  mapSvgRef
+}) => {
+  return (
+    <section className='outline-none geography-container w-100 position-relative' ref={mapSvgRef} tabIndex={0}>
+      {currentViewport && (
+        <>
+          {modal && <Modal />}
+          {'single-state' === geoType && <UsaMap.SingleState />}
+          {'us' === geoType && 'us-geocode' !== config.general.type && <UsaMap.State />}
+          {'us-region' === geoType && <UsaMap.Region />}
+          {'us-county' === geoType && <UsaMap.County />}
+          {'world' === geoType && <WorldMap />}
+          {'google-map' === geoType && <GoogleMap />}
+          {
+            /* logo is handled in UsaMap.State when applicable */
+            // prettier-ignore
+            'data' === general.type && logo && ('us' !== geoType || 'us-geocode' === general.type) && (
+              <img src={logo} alt='' className='map-logo' style={{ maxWidth: LOGO_MAX_WIDTH }} />
+            )
+          }
+        </>
+      )}
+    </section>
+  )
+}
+
+export default MapContainer

package/src/components/MapControls.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import MediaControls from '@cdc/core/components/MediaControls'
+import { MapConfig } from '../types/MapConfig'
+
+interface MapControlsProps {
+  config: MapConfig
+  imageId: string
+  interactionLabel: string
+}
+
+const MapControls: React.FC<MapControlsProps> = ({ config, imageId, interactionLabel }) => {
+  const { showDownloadImgButton, showDownloadPdfButton } = config.general
+
+  if (!showDownloadImgButton && !showDownloadPdfButton) {
+    return null
+  }
+
+  return (
+    <MediaControls.Section classes={['download-buttons']}>
+      {showDownloadImgButton && (
+        <MediaControls.Button
+          text='Download Image'
+          title='Download Chart as Image'
+          type='image'
+          state={config}
+          elementToCapture={imageId}
+          interactionLabel={interactionLabel}
+        />
+      )}
+      {showDownloadPdfButton && (
+        <MediaControls.Button
+          text='Download PDF'
+          title='Download Chart as PDF'
+          type='pdf'
+          state={config}
+          interactionLabel={interactionLabel}
+          elementToCapture={imageId}
+        />
+      )}
+    </MediaControls.Section>
+  )
+}
+
+export default MapControls

package/src/components/NavigationMenu.tsx

@@ -1,9 +1,10 @@
 import React, { useContext, useEffect, useState } from 'react'
 import ConfigContext from '../context'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 const NavigationMenu = ({ data, navigationHandler, options, columns, displayGeoName, mapTabbingID }) => {
-  const { interactionLabel } = useContext(ConfigContext)
+  const { interactionLabel, config } = useContext(ConfigContext)
   const [activeGeo, setActiveGeo] = useState('')
   const [dropdownItems, setDropdownItems] = useState({})
 
@@ -12,7 +13,15 @@ const NavigationMenu = ({ data, navigationHandler, options, columns, displayGeoN
     if (activeGeo !== '') {
       const urlString = data[dropdownItems[activeGeo]][columns.navigate.name]
 
-      publishAnalyticsEvent('map_navigation_menu', 'submit', `${interactionLabel}|${urlString}`)
+      publishAnalyticsEvent({
+        vizType: config.type,
+        vizSubType: getVizSubType(config),
+        eventType: `map_navigation_menu`,
+        eventAction: 'submit',
+        eventLabel: `${interactionLabel}`,
+        vizTitle: getVizTitle(config),
+        specifics: `url: ${urlString}, activeGeo: ${activeGeo}`
+      })
 
       navigationHandler(urlString)
     }

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

@@ -1,10 +1,13 @@
-import React, { useContext } from 'react'
+import React, { useContext, useState } from 'react'
 import ConfigContext from '../../../../context'
+import { useLegendMemoContext } from '../../../../context/LegendMemoContext'
 import { MapContext } from '../../../../types/MapContext'
 import { getGeoFillColor, displayGeoName } from '../../../../helpers'
 import useApplyTooltipsToGeo from '../../../../hooks/useApplyTooltipsToGeo'
 import { applyLegendToRow } from '../../../../helpers/applyLegendToRow'
 import useGeoClickHandler, { geoClickHandler } from '././../../../../hooks/useGeoClickHandler'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 interface CountyOutputProps {
   counties: any[]
@@ -15,14 +18,15 @@ interface CountyOutputProps {
 }
 
 const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoStrokeColor, tooltipId }) => {
-  const { config, data, legendMemo, legendSpecialClassLastMemo, runtimeLegend } = useContext<MapContext>(ConfigContext)
+  const { config, runtimeData, runtimeLegend, interactionLabel } = useContext<MapContext>(ConfigContext)
+  const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
   const { applyTooltipsToGeo } = useApplyTooltipsToGeo()
   const geoFillColor = getGeoFillColor(config)
   const { geoClickHandler } = useGeoClickHandler()
 
   return (
     <>
-      {counties.map(county => {
+      {counties.map((county, countyIndex) => {
         // Map the name from the geo data with the appropriate key for the processed data
         const geoKey = county.id
 
@@ -30,7 +34,7 @@ const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoS
 
         const countyPath = path(county)
 
-        const geoData = data[county.id]
+        const geoData = runtimeData[county.id]
         let legendColors
 
         // Once we receive data for this geographic item, setup variables.
@@ -68,13 +72,26 @@ const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoS
           return (
             <g
               key={`key--${county.id}`}
-              className={`county county--${geoDisplayName.split(' ').join('')} county--${
-                geoData[config.columns.geo.name]
-              }`}
+              className={`county county--${geoDisplayName.split(' ').join('')} county--${geoData[config.columns.geo.name]
+                }`}
               style={styles}
               onClick={() => geoClickHandler(geoDisplayName, geoData)}
               data-tooltip-id={`tooltip__${tooltipId}`}
               data-tooltip-html={toolTip}
+              onMouseEnter={() => {
+                // Track hover analytics event if this is a new location
+                const locationName = geoDisplayName.replace(/[^a-zA-Z0-9]/g, '_')
+                publishAnalyticsEvent({
+                  vizType: config.type,
+                  vizSubType: getVizSubType(config),
+                  eventType: `map_hover`,
+                  eventAction: 'hover',
+                  eventLabel: interactionLabel,
+                  vizTitle: getVizTitle(config),
+                  location: geoDisplayName,
+                  specifics: `location: ${locationName?.toLowerCase()}`
+                })
+              }}
             >
               <path
                 tabIndex={-1}