@cdc/map 4.24.5 → 4.24.9

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

@@ -1,9 +1,13 @@
 //TODO: Move legends to core
-import { forwardRef, useContext } from 'react'
+import { forwardRef, useContext, useId } from 'react'
 import parse from 'html-react-parser'
 
+//types
+import { DimensionsType } from '@cdc/core/types/Dimensions'
+
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import LegendCircle from '@cdc/core/components/LegendCircle'
+import LegendShape from '@cdc/core/components/LegendShape'
+import LegendGradient from '@cdc/core/components/Legend/Legend.Gradient'
 import LegendItemHex from './LegendItem.Hex'
 import Button from '@cdc/core/components/elements/Button'
 
@@ -11,18 +15,21 @@ import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
 import ConfigContext from '../../../context'
 import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 import { GlyphStar, GlyphTriangle, GlyphDiamond, GlyphSquare, GlyphCircle } from '@visx/glyph'
+import { type ViewportSize } from '../../../types/MapConfig'
 import { Group } from '@visx/group'
 import './index.scss'
 
 type LegendProps = {
   skipId: string
+  currentViewport: ViewportSize
+  dimensions: DimensionsType
 }
 
-const Legend = forwardRef((props, ref) => {
-  const { skipId } = props
+const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
+  const { skipId, currentViewport, dimensions } = props
 
-  // prettier-ignore
   const {
+    // prettier-ignore
     displayDataAsText,
     resetLegendToggles,
     runtimeFilters,
@@ -31,10 +38,11 @@ const Legend = forwardRef((props, ref) => {
     setRuntimeLegend,
     state,
     viewport,
+    getTextWidth,
+    mapId
   } = useContext(ConfigContext)
 
   const { legend } = state
-  const fontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? { fontSize: '11px' } : null
 
   // Toggles if a legend is active and being applied to the map and data table.
   const toggleLegendActive = (i, legendLabel) => {
@@ -52,17 +60,15 @@ const Legend = forwardRef((props, ref) => {
 
     setRuntimeLegend(newLegend)
 
-    setAccessibleStatus(`Disabled legend item ${legendLabel ?? ''}. Please reference the data table to see updated values.`)
+    setAccessibleStatus(
+      `Disabled legend item ${legendLabel ?? ''}. Please reference the data table to see updated values.`
+    )
   }
-
-  const legendList = () => {
-    let legendItems
-
-    legendItems = runtimeLegend.map((entry, idx) => {
+  const getFormattedLegendItems = () => {
+    return runtimeLegend.map((entry, idx) => {
       const entryMax = displayDataAsText(entry.max, 'primary')
 
       const entryMin = displayDataAsText(entry.min, 'primary')
-
       let formattedText = `${entryMin}${entryMax !== entryMin ? ` - ${entryMax}` : ''}`
 
       // If interval, add some formatting
@@ -70,8 +76,6 @@ const Legend = forwardRef((props, ref) => {
         formattedText = `${entryMin} - < ${entryMax}`
       }
 
-      const { disabled } = entry
-
       if (legend.type === 'category') {
         formattedText = displayDataAsText(entry.value, 'primary')
       }
@@ -86,32 +90,49 @@ const Legend = forwardRef((props, ref) => {
         legendLabel = entry.label || entry.value
       }
 
+      return {
+        color: entry.color,
+        label: legendLabel,
+        disabled: entry.disabled,
+        special: entry.hasOwnProperty('special'),
+        value: [entry.min, entry.max]
+      }
+    })
+  }
+
+  const legendList = () => {
+    const formattedItems = getFormattedLegendItems()
+    let legendItems
+
+    legendItems = formattedItems.map((item, idx) => {
       const handleListItemClass = () => {
         let classes = ['legend-container__li']
-        if (disabled) classes.push('legend-container__li--disabled')
-        if (entry.hasOwnProperty('special')) classes.push('legend-container__li--special-class')
-        return classes
+        if (item.disabled) classes.push('legend-container__li--disabled')
+        if (item.special) classes.push('legend-container__li--special-class')
+        return classes.join(' ')
       }
 
       return (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
         <li
-          style={fontSize}
-          className={handleListItemClass().join(' ')}
+          className={handleListItemClass()}
           key={idx}
-          title={`Legend item ${legendLabel} - Click to disable`}
-          onClick={() => {
-            toggleLegendActive(idx, legendLabel)
-          }}
+          title={`Legend item ${item.label} - Click to disable`}
+          onClick={() => toggleLegendActive(idx, item.label)}
           onKeyDown={e => {
             if (e.key === 'Enter') {
               e.preventDefault()
-              toggleLegendActive(idx, legendLabel)
+              toggleLegendActive(idx, item.label)
             }
           }}
           tabIndex={0}
         >
-          <LegendCircle viewport={viewport} fill={entry.color} /> <span>{legendLabel}</span>
+          <LegendShape
+            shape={state.legend.style === 'boxes' ? 'square' : 'circle'}
+            viewport={viewport}
+            fill={item.color}
+          />
+          <span>{item.label}</span>
         </li>
       )
     })
@@ -131,13 +152,48 @@ const Legend = forwardRef((props, ref) => {
 
         legendItems.push(
           <>
-            <li className={`legend-container__li legend-container__li--geo-pattern`} aria-label='You are on a pattern button. We dont support toggling patterns on this legend at the moment, but provide the area as being focusable for congruity.' tabIndex={0}>
+            <li
+              className={`legend-container__li legend-container__li--geo-pattern`}
+              aria-label='You are on a pattern button. We dont support toggling patterns on this legend at the moment, but provide the area as being focusable for congruity.'
+              tabIndex={0}
+            >
               <span className='legend-item' style={{ border: 'unset' }}>
                 <svg width={legendSize} height={legendSize}>
-                  {pattern === 'waves' && <PatternWaves id={`${dataKey}--${patternDataIndex}`} height={sizes[size] ?? 10} width={sizes[size] ?? 10} fill={defaultPatternColor} />}
-                  {pattern === 'circles' && <PatternCircles id={`${dataKey}--${patternDataIndex}`} height={sizes[size] ?? 10} width={sizes[size] ?? 10} fill={defaultPatternColor} />}
-                  {pattern === 'lines' && <PatternLines id={`${dataKey}--${patternDataIndex}`} height={sizes[size] ?? 6} width={sizes[size] ?? 10} stroke={defaultPatternColor} strokeWidth={2} orientation={['diagonalRightToLeft']} />}
-                  <circle id={dataKey} fill={`url(#${dataKey}--${patternDataIndex})`} r={legendSize / 2} cx={legendSize / 2} cy={legendSize / 2} stroke='#0000004d' strokeWidth={1} />
+                  {pattern === 'waves' && (
+                    <PatternWaves
+                      id={`${mapId}--${dataKey}--${patternDataIndex}`}
+                      height={sizes[size] ?? 10}
+                      width={sizes[size] ?? 10}
+                      fill={defaultPatternColor}
+                    />
+                  )}
+                  {pattern === 'circles' && (
+                    <PatternCircles
+                      id={`${mapId}--${dataKey}--${patternDataIndex}`}
+                      height={sizes[size] ?? 10}
+                      width={sizes[size] ?? 10}
+                      fill={defaultPatternColor}
+                    />
+                  )}
+                  {pattern === 'lines' && (
+                    <PatternLines
+                      id={`${mapId}--${dataKey}--${patternDataIndex}`}
+                      height={sizes[size] ?? 6}
+                      width={sizes[size] ?? 10}
+                      stroke={defaultPatternColor}
+                      strokeWidth={2}
+                      orientation={['diagonalRightToLeft']}
+                    />
+                  )}
+                  <circle
+                    id={dataKey}
+                    fill={`url(#${mapId}--${dataKey}--${patternDataIndex})`}
+                    r={legendSize / 2}
+                    cx={legendSize / 2}
+                    cy={legendSize / 2}
+                    stroke='#0000004d'
+                    strokeWidth={1}
+                  />
                 </svg>
               </span>
               <p style={{ lineHeight: '22.4px' }}>{patternData.label || patternData.dataValue || ''}</p>
@@ -149,7 +205,6 @@ const Legend = forwardRef((props, ref) => {
 
     return legendItems
   }
-
   const { legendClasses } = useDataVizClasses(state, viewport)
 
   const handleReset = e => {
@@ -164,7 +219,15 @@ const Legend = forwardRef((props, ref) => {
     }
   }
 
-  const pin = <path className='marker' d='M0,0l-8.8-17.7C-12.1-24.3-7.4-32,0-32h0c7.4,0,12.1,7.7,8.8,14.3L0,0z' strokeWidth={2} stroke={'black'} transform={`scale(0.5)`} />
+  const pin = (
+    <path
+      className='marker'
+      d='M0,0l-8.8-17.7C-12.1-24.3-7.4-32,0-32h0c7.4,0,12.1,7.7,8.8,14.3L0,0z'
+      strokeWidth={2}
+      stroke={'black'}
+      transform={`scale(0.5)`}
+    />
+  )
 
   const cityStyleShapes = {
     pin: pin,
@@ -178,13 +241,18 @@ const Legend = forwardRef((props, ref) => {
   return (
     <ErrorBoundary component='Sidebar'>
       <div className='legends'>
-        <aside id={skipId || 'legend'} className={legendClasses.aside.join(' ') || ''} role='region' aria-label='Legend' tabIndex={0} ref={ref}>
+        <aside
+          id={skipId || 'legend'}
+          className={legendClasses.aside.join(' ') || ''}
+          role='region'
+          aria-label='Legend'
+          tabIndex={0}
+          ref={ref}
+        >
           <section className={legendClasses.section.join(' ') || ''} aria-label='Map Legend'>
             {legend.title && <h3 className={legendClasses.title.join(' ') || ''}>{parse(legend.title)}</h3>}
             {legend.dynamicDescription === false && legend.description && (
-              <p style={fontSize} className={legendClasses.description.join(' ') || ''}>
-                {parse(legend.description)}
-              </p>
+              <p className={legendClasses.description.join(' ') || ''}>{parse(legend.description)}</p>
             )}
             {legend.dynamicDescription === true &&
               runtimeFilters.map((filter, idx) => {
@@ -195,15 +263,25 @@ const Legend = forwardRef((props, ref) => {
 
                 if (desc.length > 0) {
                   return (
-                    <p style={fontSize} key={`dynamic-description-${lookupStr}`} className={`dynamic-legend-description-${lookupStr}`}>
+                    <p key={`dynamic-description-${lookupStr}`} className={`dynamic-legend-description-${lookupStr}`}>
                       {desc}
                     </p>
                   )
                 }
                 return true
               })}
+
+            <LegendGradient
+              labels={getFormattedLegendItems().map(item => item?.label) ?? []}
+              colors={getFormattedLegendItems().map(item => item?.color) ?? []}
+              values={getFormattedLegendItems().map(item => item?.value) ?? []}
+              dimensions={dimensions}
+              currentViewport={currentViewport}
+              config={state}
+              getTextWidth={getTextWidth}
+            />
             <ul className={legendClasses.ul.join(' ') || ''} aria-label='Legend items'>
-              {legendList()}
+              {state.legend.style === 'gradient' ? '' : legendList()}
             </ul>
             {(state.visual.additionalCityStyles.some(c => c.label) || state.visual.cityStyleLabel) && (
               <>
@@ -212,7 +290,10 @@ const Legend = forwardRef((props, ref) => {
                   {state.visual.cityStyleLabel && (
                     <div>
                       <svg>
-                        <Group top={state.visual.cityStyle === 'pin' ? 19 : state.visual.cityStyle === 'triangle' ? 13 : 11} left={10}>
+                        <Group
+                          top={state.visual.cityStyle === 'pin' ? 19 : state.visual.cityStyle === 'triangle' ? 13 : 11}
+                          left={10}
+                        >
                           {cityStyleShapes[state.visual.cityStyle.toLowerCase()]}
                         </Group>
                       </svg>
@@ -229,7 +310,7 @@ const Legend = forwardRef((props, ref) => {
                               {cityStyleShapes[shape.toLowerCase()]}
                             </Group>
                           </svg>
-                          <p style={fontSize}>{label}</p>
+                          <p>{label}</p>
                         </div>
                       )
                   )}
@@ -239,7 +320,9 @@ const Legend = forwardRef((props, ref) => {
             {runtimeLegend.disabledAmt > 0 && <Button onClick={handleReset}>Reset</Button>}
           </section>
         </aside>
-        {state.hexMap.shapeGroups?.length > 0 && state.hexMap.type === 'shapes' && state.general.displayAsHex && <LegendItemHex state={state} runtimeLegend={runtimeLegend} viewport={viewport} />}
+        {state.hexMap.shapeGroups?.length > 0 && state.hexMap.type === 'shapes' && state.general.displayAsHex && (
+          <LegendItemHex state={state} runtimeLegend={runtimeLegend} viewport={viewport} />
+        )}
       </div>
     </ErrorBoundary>
   )

package/src/components/Legend/components/index.scss

@@ -17,8 +17,10 @@
     background-color: #fff;
     z-index: 6;
     border-top: $lightGray 1px solid;
+
     @include breakpointClass(md) {
-      &.bottom {
+      &.bottom,
+      &.top {
         border: $lightGray 1px solid;
       }
       &.side {
@@ -35,8 +37,12 @@
         right: 1em;
 
         ul.vertical-sorted {
+          display: block;
           column-count: 2;
           column-fill: balance;
+          & > li {
+            white-space: nowrap;
+          }
         }
 
         ul:not(.vertical-sorted) {
@@ -47,29 +53,17 @@
           flex-wrap: wrap;
         }
       }
+      &.no-border {
+        border: none;
+      }
 
-      &.bottom {
+      &.bottom,
+      &.top {
         ul.legend-container__ul.vertical-sorted {
           display: block;
           column-count: 2;
           column-fill: balance;
         }
-
-        ul.legend-container__ul {
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-
-          li {
-            width: 50%;
-          }
-        }
-
-        ul.single-row {
-          display: block;
-          column-count: initial;
-          column-fill: auto;
-        }
       }
     }
 
@@ -103,9 +97,12 @@
       p {
         line-height: 1.4em;
       }
-      .legend-container__ul {
+      .legend-container__ul:not(.single-row) {
         list-style: none;
         padding-top: 1em;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+
         button {
           font-size: unset;
           background: transparent;
@@ -132,6 +129,7 @@
           transition: 0.1s opacity;
           display: flex;
           cursor: pointer;
+          white-space: nowrap;
           flex-grow: 1;
 
           &.legend-container__li--disabled {
@@ -139,6 +137,29 @@
           }
         }
       }
+      .legend-container__ul.single-row {
+        width: 100%;
+        list-style: none;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+
+        & > li {
+          margin-right: 1em;
+          margin-bottom: 1em;
+          white-space: nowrap;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          vertical-align: middle;
+
+          & svg {
+            vertical-align: baseline;
+          }
+        }
+      }
     }
 
     .bottom .legend-container__ul--single-column:not(.vertical-sorted) {
@@ -150,6 +171,7 @@
 
       .legend-container__li {
         width: 100%;
+        white-space: nowrap;
       }
     }
 
@@ -175,30 +197,8 @@
       }
     }
 
-    &.bottom.single-row {
-      width: 100%;
-      .legend-container ul {
-        flex-direction: row;
-        align-items: baseline;
-        justify-content: flex-start;
-        flex-wrap: wrap;
-        li {
-          justify-items: center;
-          line-break: loose;
-          align-items: center;
-          width: auto;
-          padding-right: 1em;
-          padding-bottom: 1em;
-          display: inline-block;
-          & > span {
-            margin: 0 !important;
-          }
-        }
-      }
-    }
-
     @include breakpointClass(sm) {
-      .legend-container ul {
+      .legend-container ul:not(.single-row) {
         align-items: flex-start;
         justify-content: space-between;
         li {

package/src/components/Modal.tsx

@@ -0,0 +1,25 @@
+import { useContext } from 'react'
+import LegendShape from '@cdc/core/components/LegendShape'
+import ConfigContext from '../context'
+import Icon from '@cdc/core/components/ui/Icon'
+
+const Modal = () => {
+  const { applyTooltipsToGeo, capitalize, applyLegendToRow, viewport, type, content } = useContext(ConfigContext)
+
+  const tooltip = applyTooltipsToGeo(content.geoName, content.keyedData, 'jsx')
+
+  const legendColors = applyLegendToRow(content.keyedData)
+
+  return (
+    <section
+      className={capitalize ? 'modal-content tooltip capitalize ' + viewport : 'modal-content tooltip ' + viewport}
+      aria-hidden='true'
+    >
+      {type === 'data' && <LegendShape fill={legendColors[0]} />}
+      <div className='content'>{tooltip}</div>
+      <Icon display='close' alt='Close Modal' size={20} color='#000' className='modal-close' />
+    </section>
+  )
+}
+
+export default Modal

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

@@ -0,0 +1,74 @@
+import React, { useContext } from 'react'
+import ConfigContext from '../../../../context'
+import { MapContext } from '../../../../types/MapContext'
+
+interface CountyOutputProps {
+  counties: any[]
+  scale: number
+  geoStrokeColor: string
+  tooltipId: string
+  path: any
+}
+
+const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoStrokeColor, tooltipId }) => {
+  const { applyTooltipsToGeo, applyLegendToRow, displayGeoName, state, data, geoClickHandler } = useContext<MapContext>(ConfigContext)
+  return (
+    <>
+      {counties.map(county => {
+        // Map the name from the geo data with the appropriate key for the processed data
+        const geoKey = county.id
+
+        if (!geoKey) return null
+
+        const countyPath = path(county)
+
+        const geoData = data[county.id]
+        let legendColors
+
+        // Once we receive data for this geographic item, setup variables.
+        if (geoData !== undefined) {
+          legendColors = applyLegendToRow(geoData)
+        }
+
+        const geoDisplayName = displayGeoName(geoKey)
+
+        // For some reason, these two geos are breaking the display.
+        if (geoDisplayName === 'Franklin City' || geoDisplayName === 'Waynesboro') return null
+
+        const toolTip = applyTooltipsToGeo(geoDisplayName, geoData)
+
+        if (legendColors && legendColors[0] !== '#000000') {
+          const styles = {
+            fill: legendColors[0],
+            cursor: 'default',
+            '&:hover': {
+              fill: legendColors[1]
+            },
+            '&:active': {
+              fill: legendColors[2]
+            }
+          }
+
+          // When to add pointer cursor
+          if ((state.columns.navigate && geoData[state.columns.navigate.name]) || state.tooltips.appearanceType === 'hover') {
+            styles.cursor = 'pointer'
+          }
+
+          return (
+            <g key={`key--${county.id}`} className={`county county--${geoDisplayName.split(' ').join('')} county--${geoData[state.columns.geo.name]}`} style={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} data-tooltip-id={`tooltip__${tooltipId}`} data-tooltip-html={toolTip}>
+              <path tabIndex={-1} className={`county`} stroke={geoStrokeColor} d={countyPath} strokeWidth={0.75 / scale} />
+            </g>
+          )
+        } else {
+          return (
+            <g key={`key--${county.id}`} className={`county county--${geoDisplayName.split(' ').join('')}`} style={{ fill: '#e6e6e6' }} data-tooltip-id={`tooltip__${tooltipId}`} data-tooltip-html={toolTip}>
+              <path tabIndex={-1} className={`county`} stroke={geoStrokeColor} d={countyPath} strokeWidth={0.75 / scale} />
+            </g>
+          )
+        }
+      })}
+    </>
+  )
+}
+
+export default CountyOutput

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

@@ -0,0 +1,29 @@
+import { useContext } from 'react'
+import { mesh, Topology } from 'topojson-client'
+import ConfigContext from '../../../../context'
+
+type StateOutputProps = {
+  topoData: Topology
+  path: any
+  scale: any
+}
+
+const StateOutput: React.FC<StateOutputProps> = ({ topoData, path, scale, stateToShow }: StateOutputProps) => {
+  const { state } = useContext(ConfigContext)
+  if (!topoData?.objects?.states) return null
+  let geo = topoData.objects.states.geometries.filter(s => {
+    return s.properties.name === state.general.statePicked.stateName
+  })
+
+  const geoStrokeColor = state.general.geoBorderColor === 'darkGray' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255,255,255,0.7)'
+
+  let stateLines = path(mesh(topoData, geo[0]))
+
+  return (
+    <g key={'single-state'} className='single-state' style={{ fill: '#E6E6E6' }} stroke={geoStrokeColor} strokeWidth={0.95 / scale}>
+      <path tabIndex={-1} className='state-path' d={stateLines} />
+    </g>
+  )
+}
+
+export default StateOutput

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

@@ -0,0 +1,9 @@
+import CountyOutput from './SingleState.CountyOutput'
+import StateOutput from './SingleState.StateOutput'
+
+const SingleState = {
+  StateOutput,
+  CountyOutput
+}
+
+export default SingleState

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

@@ -7,15 +7,16 @@ import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
 const TerritoryRectangle = ({ label, text, stroke, strokeWidth, textColor, hasPattern, territory, ...props }) => {
   const { state, supportedTerritories } = useContext<MapContext>(ConfigContext)
+  const { territoryData, ...otherProps } = props
 
   return (
-    <svg viewBox='0 0 45 28'>
-      <g {...props} strokeLinejoin='round' tabIndex={-1}>
+    <svg viewBox='0 0 45 28' key={territory} className={territory}>
+      <g {...otherProps} strokeLinejoin='round' tabIndex={-1}>
         <path
           stroke={stroke}
           strokeWidth={strokeWidth}
           d='M40,0.5 C41.2426407,0.5 42.3676407,1.00367966 43.1819805,1.81801948 C43.9963203,2.63235931 44.5,3.75735931 44.5,5 L44.5,5 L44.5,23 C44.5,24.2426407 43.9963203,25.3676407 43.1819805,26.1819805 C42.3676407,26.9963203 41.2426407,27.5 40,27.5 L40,27.5 L5,27.5 C3.75735931,27.5 2.63235931,26.9963203 1.81801948,26.1819805 C1.00367966,25.3676407 0.5,24.2426407 0.5,23 L0.5,23 L0.5,5 C0.5,3.75735931 1.00367966,2.63235931 1.81801948,1.81801948 C2.63235931,1.00367966 3.75735931,0.5 5,0.5 L5,0.5 Z'
-          {...props}
+          {...otherProps}
         />
         <text textAnchor='middle' dominantBaseline='middle' x='50%' y='54%' fill={text} style={{ stroke: textColor, strokeWidth: 1 }} className='territory-text' paintOrder='stroke'>
           {label}