@cdc/map 4.25.8 → 4.25.11

package/src/components/EditorPanel/components/Panels/Panel.SmallMultiples.tsx

@@ -0,0 +1,354 @@
+import { useContext, FC } from 'react'
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
+import {
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  AccordionItemButton
+} from 'react-accessible-accordion'
+
+// core
+import { TextField, Select, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Icon from '@cdc/core/components/ui/Icon'
+
+// contexts
+import ConfigContext from '../../../../context'
+import { MapContext } from '../../../../types/MapContext'
+import { getTileKeys } from '../../../../helpers/smallMultiplesHelpers'
+
+interface PanelSmallMultiplesProps {
+  name?: string
+}
+
+const PanelSmallMultiples: FC<PanelSmallMultiplesProps> = props => {
+  const { config, setConfig } = useContext<MapContext>(ConfigContext)
+  const { general } = config
+
+  const getColumns = () => {
+    let columns = {}
+    config.data?.forEach(row => {
+      Object.keys(row).forEach(columnName => (columns[columnName] = true))
+    })
+
+    // Filter out geo and primary columns
+    if (config.columns?.geo?.name) {
+      delete columns[config.columns.geo.name]
+    }
+    if (config.columns?.primary?.name) {
+      delete columns[config.columns.primary.name]
+    }
+
+    return Object.keys(columns)
+  }
+
+  const updateField = (section, subsection, fieldName, value) => {
+    const newConfig = { ...config }
+
+    if (subsection) {
+      newConfig[section] = {
+        ...newConfig[section],
+        [subsection]: {
+          ...newConfig[section]?.[subsection],
+          [fieldName]: value
+        }
+      }
+    } else {
+      newConfig[section] = {
+        ...newConfig[section],
+        [fieldName]: value
+      }
+    }
+
+    setConfig(newConfig)
+  }
+
+  const handleColumnChange = (section, subsection, fieldName, value) => {
+    const newConfig = { ...config }
+
+    // Set the column value
+    newConfig.smallMultiples = {
+      ...newConfig.smallMultiples,
+      tileColumn: value
+    }
+
+    // Automatically set mode based on whether a column is selected
+    if (value) {
+      newConfig.smallMultiples.mode = 'by-column'
+    } else {
+      newConfig.smallMultiples.mode = undefined
+    }
+
+    setConfig(newConfig)
+  }
+
+  return (
+    <AccordionItem>
+      <AccordionItemHeading>
+        <AccordionItemButton>Small Multiples</AccordionItemButton>
+      </AccordionItemHeading>
+      <AccordionItemPanel>
+        <Select
+          value={config.smallMultiples?.tileColumn || ''}
+          fieldName='tileColumn'
+          section='smallMultiples'
+          label='Tile By Column'
+          initial='Select Column'
+          updateField={handleColumnChange}
+          options={getColumns()}
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>
+                  Select the column whose unique values will create separate map tiles. Choosing a column will enable
+                  small multiples mode.
+                </p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+
+        {config.smallMultiples?.tileColumn && (
+          <>
+            <TextField
+              type='number'
+              value={config.smallMultiples?.tilesPerRowDesktop}
+              section='smallMultiples'
+              fieldName='tilesPerRowDesktop'
+              label='Tiles Per Row (Desktop)'
+              updateField={updateField}
+              min={1}
+              max={3}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>
+                      Number of map tiles to display per row on desktop screens. Mobile will always show 1 tile per row.
+                    </p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+
+            {/* Tile Ordering */}
+            {(() => {
+              const availableTiles = getTileKeys(config, config.data).map(String)
+              if (availableTiles.length === 0) return null
+
+              const tileOrderOptions = [
+                {
+                  label: 'Ascending By Title',
+                  value: 'asc'
+                },
+                {
+                  label: 'Descending By Title',
+                  value: 'desc'
+                },
+                {
+                  label: 'Custom',
+                  value: 'custom'
+                }
+              ]
+
+              const currentOrderType = config.smallMultiples?.tileOrderType || 'asc'
+
+              const handleOrderTypeChange = orderType => {
+                const newConfig = {
+                  ...config,
+                  smallMultiples: {
+                    ...config.smallMultiples,
+                    tileOrderType: orderType
+                  }
+                }
+
+                // If switching to custom, initialize with current tile order
+                if (orderType === 'custom' && !config.smallMultiples?.tileOrder?.length) {
+                  newConfig.smallMultiples.tileOrder = [...availableTiles]
+                }
+
+                setConfig(newConfig)
+              }
+
+              const handleCustomTileOrderChange = (sourceIndex, destinationIndex) => {
+                if (destinationIndex === null) return
+
+                const currentOrder = config.smallMultiples?.tileOrder || [...availableTiles]
+                const newOrder = [...currentOrder]
+                const [removed] = newOrder.splice(sourceIndex, 1)
+                newOrder.splice(destinationIndex, 0, removed)
+
+                setConfig({
+                  ...config,
+                  smallMultiples: {
+                    ...config.smallMultiples,
+                    tileOrder: newOrder,
+                    tileOrderType: 'custom'
+                  }
+                })
+              }
+
+              return (
+                <>
+                  <Select
+                    value={currentOrderType}
+                    options={tileOrderOptions}
+                    label='Tile Order'
+                    updateField={(_section, _subsection, _fieldName, value) => {
+                      handleOrderTypeChange(value)
+                    }}
+                  />
+
+                  {currentOrderType === 'custom' && (
+                    <DragDropContext
+                      onDragEnd={({ source, destination }) =>
+                        handleCustomTileOrderChange(source.index, destination?.index)
+                      }
+                    >
+                      <Droppable droppableId='tile_order'>
+                        {provided => (
+                          <ul
+                            {...provided.droppableProps}
+                            className='sort-list'
+                            ref={provided.innerRef}
+                            style={{ marginTop: '1em' }}
+                          >
+                            {(config.smallMultiples?.tileOrder || availableTiles).map((tileKey, index) => (
+                              <Draggable key={tileKey} draggableId={`tile-${tileKey}`} index={index}>
+                                {(provided, snapshot) => (
+                                  <li>
+                                    <div
+                                      className={snapshot.isDragging ? 'currently-dragging' : ''}
+                                      style={provided.draggableProps.style}
+                                      ref={provided.innerRef}
+                                      {...provided.draggableProps}
+                                      {...provided.dragHandleProps}
+                                    >
+                                      {tileKey}
+                                    </div>
+                                  </li>
+                                )}
+                              </Draggable>
+                            ))}
+                            {provided.placeholder}
+                          </ul>
+                        )}
+                      </Droppable>
+                    </DragDropContext>
+                  )}
+                </>
+              )
+            })()}
+
+            {/* Custom Tile Titles */}
+            <div>
+              <label style={{ marginTop: '1.5rem', marginBottom: '0.5rem' }}>Custom Tile Titles</label>
+
+              {(() => {
+                const availableTiles = getTileKeys(config, config.data).map(String)
+                if (availableTiles.length === 0) return null
+
+                const handleTitleChange = (tileKey, customTitle) => {
+                  const newTitles = { ...config.smallMultiples?.tileTitles }
+                  if (customTitle.trim() === '' || customTitle === tileKey) {
+                    delete newTitles[tileKey] // Remove entry if empty or same as key
+                  } else {
+                    newTitles[tileKey] = customTitle
+                  }
+
+                  setConfig({
+                    ...config,
+                    smallMultiples: {
+                      ...config.smallMultiples,
+                      tileTitles: newTitles
+                    }
+                  })
+                }
+
+                return (
+                  <div className='tile-titles-editor' style={{ maxWidth: '100%', overflow: 'hidden' }}>
+                    {availableTiles.map(tileKey => {
+                      const customTitle = config.smallMultiples?.tileTitles?.[tileKey] || ''
+                      return (
+                        <div
+                          key={tileKey}
+                          className='tile-title-row'
+                          style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            marginBottom: '0.75rem',
+                            maxWidth: '100%'
+                          }}
+                        >
+                          <label
+                            style={{
+                              minWidth: '80px',
+                              maxWidth: '120px',
+                              marginRight: '0.75rem',
+                              fontWeight: 'normal',
+                              fontSize: '13px',
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis',
+                              whiteSpace: 'nowrap',
+                              flexShrink: 0
+                            }}
+                          >
+                            {tileKey}:
+                          </label>
+                          <input
+                            type='text'
+                            value={customTitle}
+                            placeholder={tileKey}
+                            onChange={event => handleTitleChange(tileKey, event.target.value)}
+                            style={{
+                              flex: 1,
+                              minWidth: 0,
+                              maxWidth: '200px',
+                              fontSize: '13px',
+                              padding: '4px 8px',
+                              height: '30px',
+                              border: '1px solid #ccc',
+                              borderRadius: '3px'
+                            }}
+                          />
+                        </div>
+                      )
+                    })}
+                  </div>
+                )
+              })()}
+            </div>
+
+            <CheckBox
+              value={config.smallMultiples?.synchronizedTooltips}
+              fieldName='synchronizedTooltips'
+              section='smallMultiples'
+              label='Synchronized Tooltips'
+              updateField={updateField}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>
+                      When checked, hovering over a geography in one map will show synchronized tooltips for that same
+                      geography on all other maps at the same position.
+                    </p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+          </>
+        )}
+      </AccordionItemPanel>
+    </AccordionItem>
+  )
+}
+
+export default PanelSmallMultiples

package/src/components/EditorPanel/components/Panels/index.tsx

@@ -1,10 +1,12 @@
 import React from 'react'
 import Annotate from './Panel.Annotate'
 import PatternSettings from './Panel.PatternSettings'
+import SmallMultiples from './Panel.SmallMultiples'
 
 const Panels = {
   Annotate,
-  PatternSettings
+  PatternSettings,
+  SmallMultiples
 }
 
 export default Panels

package/src/components/Geo.tsx

@@ -6,14 +6,33 @@ type GeoProps = {
   strokeWidth?: number
   path?: string
   className?: string
+  onMouseEnter?: () => void
+  onClick?: () => void
+  'data-country-code'?: string
+  'data-tooltip-id'?: string
+  'data-tooltip-html'?: string
+  additionalData?: any
+  geoData?: any
+  additionaldata?: string
+  geodata?: string
+  tabIndex?: number
 }
 
 const Geo: React.FC<GeoProps> = ({ path, styles, stroke, strokeWidth, ...props }) => {
-  const { className, ...restProps } = props
-  const geoClassName = String(props.additionalData?.name)?.toLowerCase()?.replaceAll(' ', '') || 'country'
+  const { className, 'data-country-code': dataCountryCode, ...restProps } = props
+  const geoClassName = String(props.additionalData?.name)?.toLowerCase()?.replace(/\s+/g, '') || 'country'
   return (
     <g className={`geo-group ${geoClassName}`} style={styles} {...restProps}>
-      <path tabIndex={-1} className={`single-geo ${geoClassName}`} stroke={stroke} strokeWidth={strokeWidth} d={path} />
+      <path
+        tabIndex={-1}
+        className={`single-geo ${geoClassName} ${className || ''}`}
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinejoin='round'
+        strokeLinecap='round'
+        d={path}
+        data-country-code={dataCountryCode}
+      />
     </g>
   )
 }

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) => {
@@ -351,9 +387,9 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
                   )}
 
                   {config.visual.additionalCityStyles.map(
-                    ({ shape, label }) =>
+                    ({ shape, label }, index) =>
                       label && (
-                        <div>
+                        <div key={`additional-city-style-${index}-${shape}`}>
                           <svg>
                             <Group top={shape === 'Pin' ? 19 : shape === 'Triangle' ? 13 : 11} left={10}>
                               {cityStyleShapes[shape.toLowerCase()]}

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/Legend/components/index.scss

@@ -1,4 +1,4 @@
-@import '../../../scss/mixins';
+@import '@cdc/core/styles/v2/utils/breakpoints';
 
 .cdc-map-inner-container {
   .map-container.world aside.side {