@cdc/map 4.25.3 → 4.25.6

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

@@ -12,7 +12,7 @@ import LegendItemHex from './LegendItem.Hex'
 import Button from '@cdc/core/components/elements/Button'
 
 import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
-import ConfigContext from '../../../context'
+import ConfigContext, { MapDispatchContext } from '../../../context'
 import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 import { GlyphStar, GlyphTriangle, GlyphDiamond, GlyphSquare, GlyphCircle } from '@visx/glyph'
 import { Group } from '@visx/group'
@@ -20,6 +20,10 @@ import './index.scss'
 import { type ViewPort } from '@cdc/core/types/ViewPort'
 import { isBelowBreakpoint, isMobileHeightViewport } from '@cdc/core/helpers/viewports'
 import { displayDataAsText } from '@cdc/core/helpers/displayDataAsText'
+import { toggleLegendActive } from '@cdc/map/src/helpers/toggleLegendActive'
+import { resetLegendToggles } from '../../../helpers'
+import { MapContext } from '../../../types/MapContext'
+import LegendGroup from './LegendGroup/Legend.Group'
 
 const LEGEND_PADDING = 30
 
@@ -32,91 +36,76 @@ type LegendProps = {
 
 const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
   const { skipId, containerWidthPadding } = props
-  const { isEditor, dimensions, currentViewport } = useContext(ConfigContext)
 
   const {
-    // prettier-ignore
-    resetLegendToggles,
+    config,
+    currentViewport: viewport,
+    dimensions,
+    mapId,
     runtimeFilters,
     runtimeLegend,
-    setAccessibleStatus,
-    setRuntimeLegend,
-    state,
-    currentViewport: viewport,
-    mapId
-  } = useContext(ConfigContext)
+    setRuntimeLegend
+  } = useContext<MapContext>(ConfigContext)
 
-  const { legend } = state
+  const dispatch = useContext(MapDispatchContext)
+
+  const { legend } = config
   const isLegendGradient = legend.style === 'gradient'
-  const boxDynamicallyHidden = isBelowBreakpoint('md', currentViewport)
+  const boxDynamicallyHidden = isBelowBreakpoint('md', viewport)
   const legendWrapping =
-    (legend.position === 'left' || legend.position === 'right') && isBelowBreakpoint('md', currentViewport)
+    (legend.position === 'left' || legend.position === 'right') && isBelowBreakpoint('md', viewport)
   const legendOnBottom = legend.position === 'bottom' || legendWrapping
   const needsTopMargin = legend.hideBorder && legendOnBottom
 
-  // Toggles if a legend is active and being applied to the map and data table.
-  const toggleLegendActive = (i, legendLabel) => {
-    const newValue = !runtimeLegend[i].disabled
-
-    runtimeLegend[i].disabled = newValue // Toggle!
-
-    let newLegend = [...runtimeLegend]
-
-    newLegend[i].disabled = newValue
-
-    const disabledAmt = runtimeLegend.disabledAmt ?? 0
-
-    newLegend['disabledAmt'] = newValue ? disabledAmt + 1 : disabledAmt - 1
-
-    setRuntimeLegend(newLegend)
-
-    setAccessibleStatus(
-      `Disabled legend item ${legendLabel ?? ''}. Please reference the data table to see updated values.`
-    )
-  }
   const getFormattedLegendItems = () => {
-    return runtimeLegend.map((entry, idx) => {
-      const entryMax = displayDataAsText(entry.max, 'primary', state)
+    try {
+      if (!runtimeLegend.items) Error('No runtime legend data')
+      return runtimeLegend.items.map((entry, idx) => {
+        const entryMax = displayDataAsText(entry.max, 'primary', config)
 
-      const entryMin = displayDataAsText(entry.min, 'primary', state)
-      let formattedText = `${entryMin}${entryMax !== entryMin ? ` - ${entryMax}` : ''}`
+        const entryMin = displayDataAsText(entry.min, 'primary', config)
+        let formattedText = `${entryMin}${entryMax !== entryMin ? ` - ${entryMax}` : ''}`
 
-      // If interval, add some formatting
-      if (legend.type === 'equalinterval' && idx !== runtimeLegend.length - 1) {
-        formattedText = `${entryMin} - < ${entryMax}`
-      }
+        // If interval, add some formatting
+        if (legend.type === 'equalinterval' && idx !== runtimeLegend.length - 1) {
+          formattedText = `${entryMin} - < ${entryMax}`
+        }
 
-      if (legend.type === 'category') {
-        formattedText = displayDataAsText(entry.value, 'primary', state)
-      }
+        if (legend.type === 'category') {
+          formattedText = displayDataAsText(entry.value, 'primary', config)
+        }
 
-      if (entry.max === 0 && entry.min === 0) {
-        formattedText = '0'
-      }
+        if (entry.max === 0 && entry.min === 0) {
+          formattedText = '0'
+        }
 
-      if (entry.max === null && entry.min === null) {
-        formattedText = 'No data'
-      }
+        if (entry.max === null && entry.min === null) {
+          formattedText = 'No data'
+        }
 
-      let legendLabel = formattedText
+        let legendLabel = formattedText
 
-      if (entry.hasOwnProperty('special')) {
-        legendLabel = entry.label || entry.value
-      }
+        if (entry.hasOwnProperty('special')) {
+          legendLabel = entry.label || entry.value
+        }
 
-      return {
-        color: entry.color,
-        label: parse(legendLabel),
-        disabled: entry.disabled,
-        special: entry.hasOwnProperty('special'),
-        value: [entry.min, entry.max]
-      }
-    })
+        return {
+          color: entry.color,
+          label: parse(legendLabel),
+          disabled: entry.disabled,
+          special: entry.hasOwnProperty('special'),
+          value: [entry.min, entry.max]
+        }
+      })
+    } catch (e) {
+      console.error('Error in getFormattedLegendItems', e) // eslint-disable-line
+      return []
+    }
   }
 
   const legendList = (patternsOnly = false) => {
     const formattedItems = patternsOnly ? [] : getFormattedLegendItems()
-    const patternsOnlyFont = isMobileHeightViewport(currentViewport) ? '12px' : '14px'
+    const patternsOnlyFont = isMobileHeightViewport(viewport) ? '12px' : '14px'
     const hasDisabledItems = formattedItems.some(item => item.disabled)
     let legendItems
 
@@ -129,30 +118,33 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
         return classes.join(' ')
       }
 
+      const setAccessibleStatus = (message: string) => {
+        dispatch({ type: 'SET_ACCESSIBLE_STATUS', payload: message })
+      }
+
       return (
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
         <li
           className={handleListItemClass()}
           key={idx}
           title={`Legend item ${item.label} - Click to disable`}
-          onClick={() => toggleLegendActive(idx, item.label)}
+          onClick={() => toggleLegendActive(idx, item.label, runtimeLegend, setRuntimeLegend, setAccessibleStatus)}
           onKeyDown={e => {
             if (e.key === 'Enter') {
               e.preventDefault()
-              toggleLegendActive(idx, item.label)
+              toggleLegendActive(idx, item.label, runtimeLegend, setRuntimeLegend, setAccessibleStatus)
             }
           }}
           tabIndex={0}
         >
-          <LegendShape shape={state.legend.style === 'boxes' ? 'square' : 'circle'} fill={item.color} />
+          <LegendShape shape={config.legend.style === 'boxes' ? 'square' : 'circle'} fill={item.color} />
           <span>{item.label}</span>
         </li>
       )
     })
 
-    if (state.map.patterns) {
+    if (config.map.patterns) {
       // loop over map patterns
-      state.map.patterns.map((patternData, patternDataIndex) => {
+      config.map.patterns.map((patternData, patternDataIndex) => {
         const { pattern, dataKey, size } = patternData
         let defaultPatternColor = 'black'
         const sizes = {
@@ -178,6 +170,7 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
                       height={sizes[size] ?? 10}
                       width={sizes[size] ?? 10}
                       fill={defaultPatternColor}
+                      strokeWidth={0.25}
                     />
                   )}
                   {pattern === 'circles' && (
@@ -186,6 +179,7 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
                       height={sizes[size] ?? 10}
                       width={sizes[size] ?? 10}
                       fill={defaultPatternColor}
+                      radius={1.25}
                     />
                   )}
                   {pattern === 'lines' && (
@@ -194,7 +188,7 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
                       height={sizes[size] ?? 6}
                       width={sizes[size] ?? 10}
                       stroke={defaultPatternColor}
-                      strokeWidth={2}
+                      strokeWidth={0.75}
                       orientation={['diagonalRightToLeft']}
                     />
                   )}
@@ -222,15 +216,18 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
   }
   const legendListItems = legendList(isLegendGradient)
 
-  const { legendClasses } = useDataVizClasses(state, viewport)
+  const { legendClasses } = useDataVizClasses(config, viewport)
 
   const handleReset = e => {
     const legend = ref.current
     if (e) {
       e.preventDefault()
     }
-    resetLegendToggles()
-    setAccessibleStatus('Legend has been reset, please reference the data table to see updated values.')
+    resetLegendToggles(runtimeLegend, setRuntimeLegend)
+    dispatch({
+      type: 'SET_ACCESSIBLE_STATUS',
+      payload: 'Legend has been reset, please reference the data table to see updated values.'
+    })
     if (legend) {
       legend.focus()
     }
@@ -255,9 +252,11 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
     triangle: <GlyphTriangle color='#000' size={150} />
   }
 
+  const shouldRenderLegendList = legendListItems.length > 0 && ['Select Option', ''].includes(config.legend.groupBy)
+
   return (
     <ErrorBoundary component='Sidebar'>
-      <div className={`legends ${needsTopMargin ? 'mt-1' : ''}`}>
+      <div className={`legends ${needsTopMargin ? 'mt-4' : ''}`}>
         <aside
           id={skipId || 'legend'}
           className={legendClasses.aside.join(' ') || ''}
@@ -296,38 +295,44 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
             )}
 
             <LegendGradient
-              labels={getFormattedLegendItems().map(item => item?.label) ?? []}
-              colors={getFormattedLegendItems().map(item => item?.color) ?? []}
+              labels={getFormattedLegendItems()?.map(item => item?.label) ?? []}
+              colors={getFormattedLegendItems()?.map(item => item?.color) ?? []}
               dimensions={dimensions}
               parentPaddingToSubtract={
                 containerWidthPadding + (legend.hideBorder || boxDynamicallyHidden ? 0 : LEGEND_PADDING)
               }
-              config={state}
+              config={config}
             />
-            {!!legendListItems.length && (
-              <ul className={legendClasses.ul.join(' ') || ''} aria-label='Legend items'>
+            <LegendGroup legendItems={getFormattedLegendItems()} />
+
+            {shouldRenderLegendList && (
+              <ul className={legendClasses.ul.join(' ')} aria-label='Legend items'>
                 {legendListItems}
               </ul>
             )}
-            {(state.visual.additionalCityStyles.some(c => c.label) || state.visual.cityStyleLabel) && (
+
+            {((config.visual.additionalCityStyles && config.visual.additionalCityStyles.some(c => c.label)) ||
+              config.visual.cityStyleLabel) && (
               <>
                 <hr />
                 <div className={legendClasses.div.join(' ') || ''}>
-                  {state.visual.cityStyleLabel && (
+                  {config.visual.cityStyleLabel && (
                     <div>
                       <svg>
                         <Group
-                          top={state.visual.cityStyle === 'pin' ? 19 : state.visual.cityStyle === 'triangle' ? 13 : 11}
+                          top={
+                            config.visual.cityStyle === 'pin' ? 19 : config.visual.cityStyle === 'triangle' ? 13 : 11
+                          }
                           left={10}
                         >
-                          {cityStyleShapes[state.visual.cityStyle.toLowerCase()]}
+                          {cityStyleShapes[config.visual.cityStyle.toLowerCase()]}
                         </Group>
                       </svg>
-                      <p>{state.visual.cityStyleLabel}</p>
+                      <p>{config.visual.cityStyleLabel}</p>
                     </div>
                   )}
 
-                  {state.visual.additionalCityStyles.map(
+                  {config.visual.additionalCityStyles.map(
                     ({ shape, label }) =>
                       label && (
                         <div>
@@ -350,8 +355,8 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
             )}
           </section>
         </aside>
-        {state.hexMap.shapeGroups?.length > 0 && state.hexMap.type === 'shapes' && state.general.displayAsHex && (
-          <LegendItemHex state={state} runtimeLegend={runtimeLegend} viewport={viewport} />
+        {config.hexMap?.shapeGroups?.length > 0 && config.hexMap.type === 'shapes' && config.general.displayAsHex && (
+          <LegendItemHex runtimeLegend={runtimeLegend} viewport={viewport} />
         )}
       </div>
     </ErrorBoundary>

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

@@ -0,0 +1,128 @@
+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 ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import ConfigContext, { MapDispatchContext } from '../../../../context'
+
+interface LegendItem {
+  color: string
+  label: string
+  disabled?: boolean
+  special: boolean
+}
+
+interface GroupedData {
+  [key: string]: LegendItem[]
+}
+
+const LegendGroup = ({ legendItems }) => {
+  const { runtimeLegend, setRuntimeLegend, config } = useContext(ConfigContext)
+  const dispatch = useContext(MapDispatchContext)
+  const groupLegendItems = (items: LegendItem[], data: object[], groupByKey: string): GroupedData => {
+    if (!groupByKey || !data || !items) return {}
+
+    const columnKey = config.columns.primary.name || ''
+    const result: GroupedData = {}
+
+    for (const row of data) {
+      const groupValue = row[groupByKey]
+      if (!groupValue) continue
+
+      const label = row[columnKey]
+      const match = items.find(i => i.label === label)
+      if (!match) continue
+
+      result[groupValue] ||= []
+      if (!result[groupValue].some(i => i.label === label)) {
+        result[groupValue].push(match)
+      }
+    }
+
+    // Sort items in each group
+    Object.entries(result).forEach(([group, items]) => {
+      result[group] = [...items].sort(
+        (a, b) =>
+          (config.legend.categoryValuesOrder ?? []).indexOf(a.label) -
+          (config.legend.categoryValuesOrder ?? []).indexOf(b.label)
+      )
+    })
+
+    return result
+  }
+
+  const handleToggleItem = (item: LegendItem) => {
+    const newItems = runtimeLegend.items.map(legend =>
+      legend.value === item.label ? { ...legend, disabled: !legend.disabled } : legend
+    )
+
+    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
+    })
+    const message = `${wasDisabled ? 'Enabled' : 'Disabled'} legend item ${
+      item.label
+    }. Please reference the data table.`
+    dispatch({ type: 'SET_ACCESSIBLE_STATUS', payload: message })
+  }
+
+  const getLegendItemClasses = (item: LegendItem, hasDisabledItems: boolean) => {
+    return [
+      'group-list-item',
+      item.disabled ? 'legend-group-item-disable' : hasDisabledItems ? 'legend-group-item-not-disable' : ''
+    ]
+      .filter(Boolean)
+      .join(' ')
+  }
+
+  const gridClass =
+    config.legend.position === 'bottom' || config.legend.position === 'top'
+      ? 'col-12 col-sm-6 col-md-4 col-lg-3'
+      : 'col-12'
+
+  const groupedData = useMemo(
+    () => groupLegendItems(legendItems, config.data, config.legend.groupBy),
+    [legendItems, config.data, config.legend.groupBy]
+  )
+
+  const hasDisabledItems = runtimeLegend.items.some(item => item.disabled)
+
+  return (
+    <ErrorBoundary component='Grouped Legend'>
+      <div className='row'>
+        {Object.entries(groupedData).map(([groupName, items]) => (
+          <div className={`${gridClass} group-container`} key={groupName}>
+            <p className='group-label'>{groupName}</p>
+            <ul className='row'>
+              {items.map((item, index) => (
+                <li
+                  key={`${item.label}-${index}`}
+                  role='button'
+                  tabIndex={0}
+                  title={`Legend item ${item.label} - Click to disable`}
+                  className={getLegendItemClasses(item, hasDisabledItems)}
+                  onClick={() => handleToggleItem(item)}
+                  onKeyDown={e => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault()
+                      toggleLegendActive(index, item.label, runtimeLegend, setRuntimeLegend, setAccessibleStatus)
+                    }
+                  }}
+                >
+                  <LegendShape shape={config.legend.style === 'boxes' ? 'square' : 'circle'} fill={item.color} />
+                  <span>{item.label}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </ErrorBoundary>
+  )
+}
+
+export default LegendGroup

package/src/components/Legend/components/LegendGroup/legend.group.css

@@ -0,0 +1,27 @@
+.group-label {
+  font-weight: 500;
+  font-family: Nunito, sans-serif;
+  font-size: 1rem;
+  margin-bottom: 0.5rem;
+}
+.group-list-item {
+  list-style: none;
+  font-weight: 400;
+  font-size: 0.889rem;
+  margin-top: 0.5rem !important;
+  cursor: pointer;
+}
+
+.group-container {
+  margin-bottom: 2rem;
+}
+
+.legend-group-item-disable {
+  opacity: 0.4;
+}
+
+.legend-group-item-not-disable {
+  outline: 1px solid #005ea2;
+  outline-offset: 5px;
+  border-radius: 1px;
+}

package/src/components/Legend/components/LegendItem.Hex.tsx

@@ -1,9 +1,12 @@
 import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
 import { AiOutlineArrowUp, AiOutlineArrowDown, AiOutlineArrowRight } from 'react-icons/ai'
 import parse from 'html-react-parser'
+import ConfigContext from '../../../context'
+import { useContext } from 'react'
 
 const LegendItemHex = props => {
-  const { state, currentViewport: viewport } = props
+  const { currentViewport: viewport } = props
+  const { config: state } = useContext(ConfigContext)
 
   const getItemShape = shape => {
     switch (shape) {