@cdc/map 4.23.11 → 4.24.2

package/src/components/EditorPanel/components/Inputs.tsx

@@ -0,0 +1,59 @@
+import { memo, useState, useEffect } from 'react'
+import { useDebounce } from 'use-debounce'
+
+// todo: look into combining these with core
+const CheckBox = memo(({ label, value, fieldName, section = null, subsection = null, tooltip, updateField, ...attributes }) => (
+  <label className='checkbox column-heading'>
+    <input
+      type='checkbox'
+      name={fieldName}
+      checked={value}
+      onChange={e => {
+        updateField(section, subsection, fieldName, !value)
+      }}
+      {...attributes}
+    />
+    <span className='edit-label'>
+      {label}
+      {tooltip}
+    </span>
+  </label>
+))
+
+const TextField = ({ label, section = null, subsection = null, fieldName, updateField, value: stateValue, type = 'input', tooltip, ...attributes }) => {
+  const [value, setValue] = useState(stateValue)
+
+  const [debouncedValue] = useDebounce(value, 500)
+
+  useEffect(() => {
+    if ('string' === typeof debouncedValue && stateValue !== debouncedValue) {
+      updateField(section, subsection, fieldName, debouncedValue)
+    }
+  }, [debouncedValue]) // eslint-disable-line
+
+  let name = subsection ? `${section}-${subsection}-${fieldName}` : `${section}-${subsection}-${fieldName}`
+
+  const onChange = e => setValue(e.target.value)
+
+  let formElement = <input type='text' name={name} onChange={onChange} {...attributes} value={value} />
+
+  if ('textarea' === type) {
+    formElement = <textarea name={name} onChange={onChange} {...attributes} value={value}></textarea>
+  }
+
+  if ('number' === type) {
+    formElement = <input type='number' name={name} onChange={onChange} {...attributes} value={value} />
+  }
+
+  return (
+    <label>
+      <span className='edit-label column-heading'>
+        {label}
+        {tooltip}
+      </span>
+      {formElement}
+    </label>
+  )
+}
+
+export { CheckBox, TextField }

package/src/components/EditorPanel/components/Panel.PatternSettings.tsx

@@ -0,0 +1,140 @@
+import { useContext } from 'react'
+import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import ConfigContext from '../../../context'
+import { type MapContext } from '../../../types/MapContext'
+import Button from '@cdc/core/components/elements/Button'
+
+type PanelProps = {
+  name: string
+}
+
+const PatternSettings = ({ name }: PanelProps) => {
+  const { state, setState } = useContext<MapContext>(ConfigContext)
+  const defaultPattern = 'circles'
+  const patternTypes = ['circles', 'waves', 'lines']
+
+  const {
+    map: { patterns },
+    data
+  } = state
+
+  /** Updates the map config with a new pattern item */
+  const handleAddGeoPattern = () => {
+    let patterns = [...state.map.patterns]
+    patterns.push({ dataKey: '', pattern: defaultPattern })
+    setState({
+      ...state,
+      map: {
+        ...state.map,
+        patterns
+      }
+    })
+  }
+
+  /** Updates the map pattern at a given index */
+  const handleUpdateGeoPattern = (value: string, index: number, keyToUpdate: 'dataKey' | 'pattern' | 'dataValue' | 'size' | 'label') => {
+    const updatedPatterns = [...state.map.patterns]
+    updatedPatterns[index] = { ...updatedPatterns[index], [keyToUpdate]: value }
+
+    setState({
+      ...state,
+      map: {
+        ...state.map,
+        patterns: updatedPatterns
+      }
+    })
+  }
+
+  const handleRemovePattern = index => {
+    const updatedPatterns = state.map.patterns.filter((pattern, i) => i !== index)
+
+    setState({
+      ...state,
+      map: {
+        ...state.map,
+        patterns: updatedPatterns
+      }
+    })
+  }
+
+  return (
+    <AccordionItem>
+      <AccordionItemHeading>
+        <AccordionItemButton>{name}</AccordionItemButton>
+      </AccordionItemHeading>
+      <AccordionItemPanel>
+        {patterns &&
+          patterns.map((pattern, patternIndex) => {
+            const dataValueOptions = [...new Set(data?.map(d => d?.[pattern?.dataKey]))]
+            const dataKeyOptions = Object.keys(data[0])
+            dataValueOptions.unshift('Select')
+            dataKeyOptions.unshift('Select')
+
+            dataValueOptions.sort()
+            dataKeyOptions.sort()
+
+            return (
+              <Accordion allowZeroExpanded>
+                <AccordionItem>
+                  <AccordionItemHeading>
+                    <AccordionItemButton>{pattern.dataKey ? `${pattern.dataKey}: ${pattern.dataValue ?? 'No Value'}` : 'Select Column'}</AccordionItemButton>
+                  </AccordionItemHeading>
+                  <AccordionItemPanel>
+                    <>
+                      <label htmlFor={`pattern-dataKey--${patternIndex}`}>Data Key:</label>
+                      <select id={`pattern-dataKey--${patternIndex}`} value={pattern.dataKey !== '' ? pattern.dataKey : 'Select'} onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'dataKey')}>
+                        {/* TODO: sort these? */}
+                        {dataKeyOptions.map((d, index) => {
+                          return (
+                            <option value={d} key={index}>
+                              {d}
+                            </option>
+                          )
+                        })}
+                      </select>
+
+                      <label htmlFor={`pattern-dataValue--${patternIndex}`}>
+                        Data Value:
+                        <input type='text' onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'dataValue')} id={`pattern-dataValue--${patternIndex}`} value={pattern.dataValue === '' ? '' : pattern.dataValue} />
+                      </label>
+
+                      <label htmlFor={`pattern-label--${patternIndex}`}>
+                        Label (optional):
+                        <input type='text' onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'label')} id={`pattern-dataValue--${patternIndex}`} value={pattern.label === '' ? '' : pattern.label} />
+                      </label>
+
+                      <label htmlFor={`pattern-type--${patternIndex}`}>Pattern Type:</label>
+                      <select id={`pattern-type--${patternIndex}`} value={pattern?.pattern} onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'pattern')}>
+                        {patternTypes.map((patternName, index) => (
+                          <option value={patternName} key={index}>
+                            {patternName}
+                          </option>
+                        ))}
+                      </select>
+
+                      <label htmlFor={`pattern-size--${patternIndex}`}>Pattern Size:</label>
+                      <select id={`pattern-size--${patternIndex}`} value={pattern?.size} onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'size')}>
+                        {['small', 'medium', 'large'].map((size, index) => (
+                          <option value={size} key={index}>
+                            {size}
+                          </option>
+                        ))}
+                      </select>
+                      <Button onClick={e => handleRemovePattern(patternIndex)} className='btn btn--remove warn'>
+                        Remove Pattern
+                      </Button>
+                    </>
+                  </AccordionItemPanel>
+                </AccordionItem>
+              </Accordion>
+            )
+          })}
+        <button className='btn full-width' onClick={handleAddGeoPattern}>
+          Add Geo Pattern
+        </button>
+      </AccordionItemPanel>
+    </AccordionItem>
+  )
+}
+
+export default PatternSettings

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

@@ -0,0 +1,7 @@
+import PatternSettings from './Panel.PatternSettings'
+
+const Panels = {
+  PatternSettings
+}
+
+export default Panels

package/src/components/EditorPanel/index.tsx

@@ -0,0 +1,3 @@
+import EditorPanel from './components/EditorPanel'
+
+export default EditorPanel

package/src/components/Geo.jsx

@@ -1,9 +1,11 @@
 import React, { memo } from 'react'
 
 const Geo = ({ path, styles, stroke, strokeWidth, ...props }) => {
+  const { className, ...restProps } = props
+  const geoClassName = String(props.additionalData?.name)?.toLowerCase()?.replaceAll(' ', '') || 'country'
   return (
-    <g className='geo-group' css={styles} {...props}>
-      <path tabIndex={-1} className='single-geo' stroke={stroke} strokeWidth={strokeWidth} d={path} />
+    <g className={`geo-group ${geoClassName}`} style={styles} {...restProps}>
+      <path tabIndex={-1} className={`single-geo ${geoClassName}`} stroke={stroke} strokeWidth={strokeWidth} d={path} />
     </g>
   )
 }

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

@@ -0,0 +1,183 @@
+//TODO: Move legends to core
+import { useContext } from 'react'
+import parse from 'html-react-parser'
+import chroma from 'chroma-js'
+
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import LegendCircle from '@cdc/core/components/LegendCircle'
+import LegendItemHex from './LegendItem.Hex'
+
+import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
+import ConfigContext from '../../../context'
+import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
+import './index.scss'
+
+const Legend = () => {
+  // prettier-ignore
+  const {
+    displayDataAsText,
+    resetLegendToggles,
+    runtimeFilters,
+    runtimeLegend,
+    setAccessibleStatus,
+    setRuntimeLegend,
+    state,
+    viewport,
+  } = useContext(ConfigContext)
+
+  const { legend } = state
+
+  // 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 legendList = () => {
+    let legendItems
+
+    legendItems = 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
+      if (legend.type === 'equalinterval' && idx !== runtimeLegend.length - 1) {
+        formattedText = `${entryMin} - < ${entryMax}`
+      }
+
+      const { disabled } = entry
+
+      if (legend.type === 'category') {
+        formattedText = displayDataAsText(entry.value, 'primary')
+      }
+
+      if (entry.max === 0 && entry.min === 0) {
+        formattedText = '0'
+      }
+
+      let legendLabel = formattedText
+
+      if (entry.hasOwnProperty('special')) {
+        legendLabel = entry.label || entry.value
+      }
+
+      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
+      }
+
+      return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
+        <li
+          className={handleListItemClass().join(' ')}
+          key={idx}
+          title={`Legend item ${legendLabel} - Click to disable`}
+          onClick={() => {
+            toggleLegendActive(idx, legendLabel)
+          }}
+        >
+          <LegendCircle fill={entry.color} /> <span className='label'>{legendLabel}</span>
+        </li>
+      )
+    })
+
+    if (state.map.patterns) {
+      // loop over map patterns
+      state.map.patterns.map((patternData, patternDataIndex) => {
+        const { pattern, dataKey, size } = patternData
+        let defaultPatternColor = 'black'
+        const sizes = {
+          small: '8',
+          medium: '10',
+          large: '12'
+        }
+
+        const legendSize = 16
+
+        legendItems.push(
+          <>
+            <li className={`legend-container__li legend-container__li--geo-pattern`}>
+              <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} />
+                </svg>
+              </span>
+              <p style={{ lineHeight: '22.4px' }}>{patternData.label || patternData.dataValue || ''}</p>
+            </li>
+          </>
+        )
+      })
+    }
+
+    return legendItems
+  }
+
+  const { legendClasses } = useDataVizClasses(state, viewport)
+
+  const handleReset = e => {
+    e.preventDefault()
+    resetLegendToggles()
+    setAccessibleStatus('Legend has been reset, please reference the data table to see updated values.')
+  }
+
+  return (
+    <ErrorBoundary component='Sidebar'>
+      <div className='legends'>
+        <aside id='legend' className={legendClasses.aside.join(' ') || ''} role='region' aria-label='Legend'>
+          <section className={legendClasses.section.join(' ') || ''} aria-label='Map Legend'>
+            {runtimeLegend.disabledAmt > 0 && (
+              <button onClick={handleReset} className={legendClasses.resetButton.join(' ') || ''}>
+                Clear
+              </button>
+            )}
+            {legend.title && <span className={legendClasses.title.join(' ') || ''}>{parse(legend.title)}</span>}
+            {legend.dynamicDescription === false && legend.description && <p className={legendClasses.description.join(' ') || ''}>{parse(legend.description)}</p>}
+            {legend.dynamicDescription === true &&
+              runtimeFilters.map((filter, idx) => {
+                const lookupStr = `${idx},${filter.values.indexOf(String(filter.active))}`
+
+                // Do we have a custom description for this?
+                const desc = legend.descriptions[lookupStr] || ''
+
+                if (desc.length > 0) {
+                  return (
+                    <p key={`dynamic-description-${lookupStr}`} className={`dynamic-legend-description-${lookupStr}`}>
+                      {desc}
+                    </p>
+                  )
+                }
+                return true
+              })}
+            <ul className={legendClasses.ul.join(' ') || ''} aria-label='Legend items'>
+              {legendList()}
+            </ul>
+          </section>
+        </aside>
+        {state.hexMap.shapeGroups?.length > 0 && state.hexMap.type === 'shapes' && state.general.displayAsHex && <LegendItemHex state={state} runtimeLegend={runtimeLegend} viewport={viewport} />}
+      </div>
+    </ErrorBoundary>
+  )
+}
+
+export default Legend

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

@@ -0,0 +1,49 @@
+import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
+import { AiOutlineArrowUp, AiOutlineArrowDown, AiOutlineArrowRight } from 'react-icons/ai'
+import parse from 'html-react-parser'
+
+const LegendItemHex = props => {
+  const { state, viewport } = props
+
+  const getItemShape = shape => {
+    switch (shape) {
+      case 'Arrow Down':
+        return <AiOutlineArrowDown />
+      case 'Arrow Up':
+        return <AiOutlineArrowUp />
+      case 'Arrow Right':
+        return <AiOutlineArrowRight />
+      default:
+        return
+    }
+  }
+
+  const { legendClasses } = useDataVizClasses(state, viewport)
+
+  // TODO: create core legend for reusability
+  return (
+    state.hexMap.type === 'shapes' &&
+    state.hexMap.shapeGroups.map((shapeGroup, shapeGroupIndex) => {
+      return (
+        <aside id='legend' className={legendClasses.aside.join(' ')} role='region' aria-label='Legend' tabIndex={0}>
+          <section className={legendClasses.section.join(' ')} aria-label='Map Legend'>
+            {shapeGroup.legendTitle && <span className={legendClasses.title.join(' ')}>{parse(shapeGroup.legendTitle)}</span>}
+            {shapeGroup.legendDescription && <p className={legendClasses.description.join(' ')}>{parse(shapeGroup.legendDescription)}</p>}
+
+            <ul className={legendClasses.ul.join(' ')} aria-label='Legend items' style={{ listStyle: 'none' }}>
+              {shapeGroup.items.map((item, itemIndex) => {
+                return (
+                  <li className={legendClasses.li.join(' ')} key={`hex-legend-item-${itemIndex}`}>
+                    {getItemShape(item.shape)} {item.value}
+                  </li>
+                )
+              })}
+            </ul>
+          </section>
+        </aside>
+      )
+    })
+  )
+}
+
+export default LegendItemHex

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

@@ -0,0 +1,235 @@
+@import '@cdc/core/styles/base';
+@import '@cdc/core/styles/heading-colors';
+
+.cdc-map-inner-container {
+  .map-container.world aside.side {
+    border-top: 0;
+  }
+  @include breakpointClass(md) {
+    .map-container.world aside.side {
+      border-top: $lightGray 1px solid;
+      position: absolute;
+      box-shadow: rgba(0, 0, 0, 0.2) 0 10px 18px;
+    }
+  }
+
+  aside {
+    background-color: #fff;
+    z-index: 6;
+    border-top: $lightGray 1px solid;
+    @include breakpointClass(md) {
+      &.bottom {
+        border: $lightGray 1px solid;
+      }
+      &.side {
+        z-index: 1;
+        box-sizing: content-box;
+        max-width: 450px;
+        margin-top: 2em;
+        margin-bottom: 2em;
+        align-self: flex-start;
+        z-index: 4;
+        right: 1em;
+        border: $lightGray 1px solid;
+        top: 2em;
+        right: 1em;
+
+        ul.vertical-sorted {
+          column-count: 2;
+          column-fill: balance;
+        }
+
+        ul:not(.vertical-sorted) {
+          column-count: initial;
+          column-fill: initial;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+        }
+      }
+
+      &.bottom {
+        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;
+        }
+      }
+    }
+
+    .legend-container {
+      padding: 1em;
+      position: relative;
+      .legend-container__title {
+        font-size: 1.3em;
+        padding-bottom: 0;
+        display: inline-block;
+      }
+      .legend-container__title + p,
+      .legend-container__title + ul,
+      p + ul,
+      p + p {
+        padding-top: 1em;
+      }
+      .legend-container__reset-button {
+        font-size: 0.75em;
+        color: rgba(0, 0, 0, 0.6);
+        position: absolute;
+        right: 1em;
+        background: rgba(0, 0, 0, 0.1);
+        text-transform: uppercase;
+        transition: 0.2s all;
+        padding: 0.2em 0.5em;
+        border: rgba(0, 0, 0, 0.2) 1px solid;
+        &:hover {
+          text-decoration: none;
+          background: rgba(0, 0, 0, 0.15);
+          transition: 0.2s all;
+        }
+      }
+      p {
+        line-height: 1.4em;
+      }
+      .legend-container__ul {
+        list-style: none;
+        padding-top: 1em;
+        button {
+          font-size: unset;
+          background: transparent;
+        }
+
+        &.vertical-sorted {
+          flex-direction: column;
+        }
+
+        &:not(.vertical-sorted, .legend-container__ul--single-column) {
+          width: 100%;
+          @include breakpoint(sm) {
+            .legend-container__li {
+              width: 50%;
+            }
+          }
+        }
+        .legend-container__li {
+          flex-shrink: 0;
+          display: inline-block;
+          padding-right: 1em;
+          padding-bottom: 1em;
+          vertical-align: middle;
+          transition: 0.1s opacity;
+          display: flex;
+          cursor: pointer;
+          flex-grow: 1;
+
+          &.legend-container__li--disabled {
+            opacity: 0.4;
+          }
+        }
+      }
+    }
+
+    .bottom .legend-container__ul--single-column:not(.vertical-sorted) {
+      display: inline-block;
+
+      @include breakpoint(md) {
+        display: flex;
+      }
+
+      .legend-container__li {
+        width: 100%;
+      }
+    }
+
+    &.side .legend-container .legend-container__ul--single-column {
+      @include breakpointClass(md) {
+        width: 25%;
+        min-width: 200px;
+        .legend-section ul {
+          flex-direction: column;
+          li {
+            width: 100%;
+            &:nth-last-of-type(-n + 2) {
+              padding-bottom: 1em;
+            }
+            &:last-child {
+              padding-bottom: 0;
+            }
+          }
+        }
+      }
+      li {
+        width: 100%;
+      }
+    }
+
+    &.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 {
+        align-items: flex-start;
+        justify-content: space-between;
+        li {
+          flex-grow: 1;
+          padding-right: 0.5em;
+        }
+      }
+    }
+
+    .filters-section {
+      padding: 0 1em 1em;
+      .heading-3 {
+        font-weight: bold;
+        margin-bottom: 0.5em;
+      }
+      form {
+        margin-top: 0.5em;
+        line-height: 2em;
+        display: flex;
+        align-items: flex-end;
+        section + section {
+          margin-left: 0.75em;
+        }
+        select {
+          display: block;
+          font-size: 1em;
+        }
+      }
+    }
+  }
+}