@cdc/map 4.24.2 → 4.24.3

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

@@ -117,6 +117,75 @@ const EditorPanel = props => {
     specialClasses = legend.specialClasses || []
   }
 
+  const getCityStyleOptions = target => {
+    switch (target) {
+      case 'value': {
+        const values = ['Circle', 'Square', 'Triangle', 'Diamond', 'Star', 'Pin']
+        const filteredValues = values.filter(val => String(state.visual.cityStyle).toLocaleLowerCase() !== val.toLocaleLowerCase())
+
+        return (
+          <>
+            <option value='' key={'Select Option'}>
+              - Select Option -
+            </option>
+            {filteredValues.map((val, i) => {
+              return (
+                <option key={i} value={val}>
+                  {val}
+                </option>
+              )
+            })}
+          </>
+        )
+      }
+    }
+  }
+
+  const editCityStyles = (target, index, fieldName, value) => {
+    switch (target) {
+      case 'add': {
+        const additionalCityStyles = state.visual.additionalCityStyles ? [...state.visual.additionalCityStyles] : []
+        additionalCityStyles.push({ label: '', column: '', value: '', shape: '' })
+        setState({
+          ...state,
+          visual: {
+            ...state.visual,
+            additionalCityStyles: additionalCityStyles
+          }
+        })
+        break
+      }
+      case 'remove': {
+        let additionalCityStyles = []
+        if (state.visual.additionalCityStyles) {
+          additionalCityStyles = [...state.visual.additionalCityStyles]
+        }
+
+        additionalCityStyles.splice(index, 1)
+        setState({
+          ...state,
+          visual: {
+            ...state.visual,
+            additionalCityStyles: additionalCityStyles
+          }
+        })
+        break
+      }
+      case 'update': {
+        let additionalCityStyles = []
+        additionalCityStyles = [...state.visual.additionalCityStyles]
+        additionalCityStyles[index][fieldName] = value
+        setState({
+          ...state,
+          visual: {
+            ...state.visual,
+            additionalCityStyles: additionalCityStyles
+          }
+        })
+      }
+    }
+  }
+
   const DynamicDesc = ({ label, fieldName, value: stateValue, type = 'input', ...attributes }) => {
     const [value, setValue] = useState(stateValue)
 
@@ -379,20 +448,6 @@ const EditorPanel = props => {
           }
         })
         break
-      case 'toggleDownloadButton':
-        setState({
-          ...state,
-          general: {
-            ...state.general,
-            showDownloadButton: !state.general.showDownloadButton
-          },
-          table: {
-            // setting both bc DataTable new core needs it here
-            ...state.table,
-            download: !state.general.showDownloadButton
-          }
-        })
-        break
       case 'toggleShowFullGeoNameInCSV':
         setState({
           ...state,
@@ -1289,6 +1344,8 @@ const EditorPanel = props => {
             </select>
           </label>
 
+          <TextField value={state.filters[index].setByQueryParameter} section='filters' subsection={index} fieldName='setByQueryParameter' label='Default Value Set By Query String Parameter' updateField={updateField} />
+
           {filter.order === 'cust' && (
             <DragDropContext onDragEnd={({ source, destination }) => handleFilterOrder(source.index, destination.index, index, state.filters[index])}>
               <Droppable droppableId='filter_order'>
@@ -1928,7 +1985,7 @@ const EditorPanel = props => {
                     </label>
                   </fieldset>
                 )}
-                {(
+                {
                   <>
                     <label>Latitude Column</label>
                     <select
@@ -1949,7 +2006,7 @@ const EditorPanel = props => {
                       {columnsOptions}
                     </select>
                   </>
-                )}
+                }
 
                 {'navigation' !== state.general.type && (
                   <fieldset className='primary-fieldset edit-block'>
@@ -2634,16 +2691,6 @@ const EditorPanel = props => {
                       <span className='edit-label'>Show URL to Automatically Updated Data</span>
                     </label>
                   )}
-                  <label className='checkbox'>
-                    <input
-                      type='checkbox'
-                      checked={state.general.showDownloadButton}
-                      onChange={event => {
-                        handleEditorChanges('toggleDownloadButton', event.target.checked)
-                      }}
-                    />
-                    <span className='edit-label'>Show Download CSV Link</span>
-                  </label>
                   <label className='checkbox'>
                     <input
                       type='checkbox'
@@ -2849,12 +2896,10 @@ const EditorPanel = props => {
                     )
                   })}
                 </ul>
-                {state.visual.cityStyle === 'circle' && (
-                  <label>
-                    Geocode Settings
-                    <TextField type='number' value={state.visual.geoCodeCircleSize} section='visual' max='10' fieldName='geoCodeCircleSize' label='Geocode Circle Size' updateField={updateField} />
-                  </label>
-                )}
+                <label>
+                  Geocode Settings
+                  <TextField type='number' value={state.visual.geoCodeCircleSize} section='visual' max='10' fieldName='geoCodeCircleSize' label='Geocode Circle Size' updateField={updateField} />
+                </label>
 
                 {state.general.type === 'bubble' && (
                   <>
@@ -2899,19 +2944,109 @@ const EditorPanel = props => {
                   </label>
                 )}
                 {(state.general.geoType === 'us' || state.general.geoType === 'us-county' || state.general.geoType === 'world') && (
-                  <label>
-                    <span className='edit-label'>City Style</span>
-                    <select
-                      value={state.visual.cityStyle || false}
-                      onChange={event => {
-                        handleEditorChanges('handleCityStyle', event.target.value)
-                      }}
-                    >
-                      <option value='circle'>Circle</option>
-                      <option value='pin'>Pin</option>
-                    </select>
-                  </label>
+                  <>
+                    <label>
+                      <span className='edit-label'>Default City Style</span>
+                      <select
+                        value={state.visual.cityStyle || false}
+                        onChange={event => {
+                          handleEditorChanges('handleCityStyle', event.target.value)
+                        }}
+                      >
+                        <option value='circle'>Circle</option>
+                        <option value='pin'>Pin</option>
+                        <option value='square'>Square</option>
+                        <option value='triangle'>Triangle</option>
+                        <option value='diamond'>Diamond</option>
+                        <option value='star'>Star</option>
+                      </select>
+                    </label>
+                    <TextField
+                      value={state.visual.cityStyleLabel}
+                      section='visual'
+                      fieldName='cityStyleLabel'
+                      label='Label (Optional) '
+                      updateField={updateField}
+                      tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>When a label is provided, the default city style will appear in the legend.</p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      }
+                    />
+                  </>
                 )}
+                {/* <AdditionalCityStyles /> */}
+                <>
+                  {state.visual.additionalCityStyles.length > 0 &&
+                    state.visual.additionalCityStyles.map(({ label, column, value, shape }, i) => {
+                      return (
+                        <div className='edit-block' key={`additional-city-style-${i}`}>
+                          <button
+                            className='remove-column'
+                            onClick={e => {
+                              e.preventDefault()
+                              editCityStyles('remove', i, '', '')
+                            }}
+                          >
+                            Remove
+                          </button>
+                          <p>City Style {i + 1}</p>
+                          <label>
+                            <span className='edit-label column-heading'>Column with configuration value</span>
+                            <select
+                              value={column}
+                              onChange={e => {
+                                editCityStyles('update', i, 'column', e.target.value)
+                              }}
+                            >
+                              {columnsOptions}
+                            </select>
+                          </label>
+                          <label>
+                            <span className='edit-label column-heading'>Value to Trigger</span>
+                            <input
+                              type='text'
+                              value={value}
+                              onChange={e => {
+                                editCityStyles('update', i, 'value', e.target.value)
+                              }}
+                            ></input>
+                          </label>
+                          <label>
+                            <span className='edit-label column-heading'>Shape</span>
+                            <select
+                              value={shape}
+                              onChange={e => {
+                                editCityStyles('update', i, 'shape', e.target.value)
+                              }}
+                            >
+                              {getCityStyleOptions('value')}
+                            </select>
+                          </label>
+                          <label>
+                            <span className='edit-label column-heading'>Label</span>
+                            <input
+                              key={i}
+                              type='text'
+                              value={label}
+                              onChange={e => {
+                                editCityStyles('update', i, 'label', e.target.value)
+                              }}
+                            />
+                          </label>
+                        </div>
+                      )
+                    })}
+
+                  <button type='button' onClick={() => editCityStyles('add', 0, '', '')} className='btn full-width'>
+                    Add city style
+                  </button>
+                </>
                 <label htmlFor='opacity'>
                   <TextField type='number' min={0} max={100} value={state.tooltips.opacity ? state.tooltips.opacity : 100} section='tooltips' fieldName='opacity' label='Tooltip Opacity (%)' updateField={updateField} />
                 </label>
@@ -2961,6 +3096,7 @@ const EditorPanel = props => {
                 <button className={'btn full-width'} onClick={handleAddLayer}>
                   Add Map Layer
                 </button>
+                <p className='layer-purpose-details'>Context should be added to your visualization or associated page to describe the significance of layers that are added to maps.</p>
               </AccordionItemPanel>
             </AccordionItem>
             {state.general.geoType === 'us' && <Panels.PatternSettings name='Pattern Settings' />}

package/src/components/EditorPanel/components/HexShapeSettings.tsx

@@ -4,7 +4,7 @@ import parse from 'html-react-parser'
 import { AiOutlineArrowUp, AiOutlineArrowDown, AiOutlineArrowRight } from 'react-icons/ai'
 import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
 
-const shapeOptions = ['Arrow Up', 'Arrow Down', 'Arrow Right', 'None']
+const shapeOptions = ['Arrow Up', 'Arrow Down', 'Arrow Right', 'Arrow Left', 'None']
 
 // todo: Move duplicated operators to CORE
 export const DATA_OPERATOR_LESS = '<'
@@ -221,6 +221,21 @@ const HexSettingShapeColumns = props => {
                                               {[DATA_OPERATOR_EQUAL].map(option => {
                                                 return <option value={option}>{option}</option>
                                               })}
+                                              {[DATA_OPERATOR_NOTEQUAL].map(option => {
+                                                return <option value={option}>{option}</option>
+                                              })}
+                                              {[DATA_OPERATOR_LESS].map(option => {
+                                                return <option value={option}>{option}</option>
+                                              })}
+                                              {[DATA_OPERATOR_GREATER].map(option => {
+                                                return <option value={option}>{option}</option>
+                                              })}
+                                              {[DATA_OPERATOR_LESSEQUAL].map(option => {
+                                                return <option value={option}>{option}</option>
+                                              })}
+                                              {[DATA_OPERATOR_GREATEREQUAL].map(option => {
+                                                return <option value={option}>{option}</option>
+                                              })}
                                             </select>
                                           </div>
                                           <div className='cove-accordion__panel-col cove-input'>

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

@@ -1,18 +1,20 @@
 //TODO: Move legends to core
-import { useContext } from 'react'
+import { forwardRef, 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 Button from '@cdc/core/components/elements/Button'
 
 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 { Group } from '@visx/group'
 import './index.scss'
 
-const Legend = () => {
+const Legend = forwardRef((props, ref) => {
   // prettier-ignore
   const {
     displayDataAsText,
@@ -93,8 +95,16 @@ const Legend = () => {
           onClick={() => {
             toggleLegendActive(idx, legendLabel)
           }}
+          onKeyDown={e => {
+            if (e.key === 'Enter') {
+              e.preventDefault()
+              toggleLegendActive(idx, legendLabel)
+            }
+          }}
+          role='button'
+          tabIndex={0}
         >
-          <LegendCircle fill={entry.color} /> <span className='label'>{legendLabel}</span>
+          <LegendCircle fill={entry.color} /> <span>{legendLabel}</span>
         </li>
       )
     })
@@ -114,7 +124,7 @@ const Legend = () => {
 
         legendItems.push(
           <>
-            <li className={`legend-container__li legend-container__li--geo-pattern`}>
+            <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} />}
@@ -136,21 +146,33 @@ const Legend = () => {
   const { legendClasses } = useDataVizClasses(state, viewport)
 
   const handleReset = e => {
-    e.preventDefault()
+    const legend = ref.current
+    if (e) {
+      e.preventDefault()
+    }
     resetLegendToggles()
     setAccessibleStatus('Legend has been reset, please reference the data table to see updated values.')
+    if (legend) {
+      legend.focus()
+    }
+  }
+
+  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,
+    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} />
   }
 
   return (
     <ErrorBoundary component='Sidebar'>
       <div className='legends'>
-        <aside id='legend' className={legendClasses.aside.join(' ') || ''} role='region' aria-label='Legend'>
+        <aside id='legend' className={legendClasses.aside.join(' ') || ''} role='region' aria-label='Legend' tabIndex={0} ref={ref}>
           <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 &&
@@ -172,12 +194,44 @@ const Legend = () => {
             <ul className={legendClasses.ul.join(' ') || ''} aria-label='Legend items'>
               {legendList()}
             </ul>
+            {(state.visual.additionalCityStyles.some(c => c.label) || state.visual.cityStyleLabel) && (
+              <>
+                <hr />
+                <div className={legendClasses.div.join(' ') || ''}>
+                  {state.visual.cityStyleLabel && (
+                    <div>
+                      <svg>
+                        <Group top={state.visual.cityStyle === 'pin' ? 19 : state.visual.cityStyle === 'triangle' ? 13 : 11} left={10}>
+                          {cityStyleShapes[state.visual.cityStyle.toLowerCase()]}
+                        </Group>
+                      </svg>
+                      <p>{state.visual.cityStyleLabel}</p>
+                    </div>
+                  )}
+
+                  {state.visual.additionalCityStyles.map(
+                    ({ shape, label }) =>
+                      label && (
+                        <div>
+                          <svg>
+                            <Group top={shape === 'Pin' ? 19 : shape === 'Triangle' ? 13 : 11} left={10}>
+                              {cityStyleShapes[shape.toLowerCase()]}
+                            </Group>
+                          </svg>
+                          <p>{label}</p>
+                        </div>
+                      )
+                  )}
+                </div>
+              </>
+            )}
+            {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} />}
       </div>
     </ErrorBoundary>
   )
-}
+})
 
 export default Legend

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

@@ -89,17 +89,14 @@
       }
       .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;
+        padding: 0.375rem;
         &:hover {
           text-decoration: none;
-          background: rgba(0, 0, 0, 0.15);
           transition: 0.2s all;
         }
       }
@@ -118,7 +115,7 @@
           flex-direction: column;
         }
 
-        &:not(.vertical-sorted, .legend-container__ul--single-column) {
+        &:not(.vertical-sorted, .legend-container__ul--single-column, .single-row) {
           width: 100%;
           @include breakpoint(sm) {
             .legend-container__li {
@@ -231,5 +228,34 @@
         }
       }
     }
+    & .shape-container {
+      &.single-row {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+
+        & > div {
+          margin-right: 2em;
+        }
+        & > div:last-child {
+          margin-right: 0;
+        }
+      }
+
+      & > div {
+        display: flex;
+        flex-direction: row;
+      }
+      & div > svg {
+        width: 25px;
+        height: 32px;
+      }
+      & div > p {
+        white-space: nowrap;
+        margin-top: 1px;
+      }
+    }
   }
 }

package/src/components/UsaMap/components/HexIcon.tsx

@@ -0,0 +1,41 @@
+import { AiOutlineArrowUp, AiOutlineArrowDown, AiOutlineArrowRight, AiOutlineArrowLeft } from 'react-icons/ai'
+import { Group } from '@visx/group'
+
+type HexIconProps = {
+  item: {
+    operator: '=' | '≠' | '<' | '>' | '<=' | '>='
+    shape: 'Arrow Up' | 'Arrow Down' | 'Arrow Right' | 'Arrow Left'
+    key: string
+    value: string
+  }
+  index: number
+  centroid: [number, number]
+  iconSize: number
+  textColor: string
+  isTerritory: boolean
+}
+
+const HexIcon: React.FC<HexIconProps> = props => {
+  const { item, index, centroid, iconSize, textColor, isTerritory } = props
+  if (!centroid) return
+
+  if (isTerritory) {
+    return (
+      <Group style={{ transform: `translate(36%, 50%)`, fill: 'currentColor' }} key={`territory-hex--${index}`}>
+        {item.shape === 'Arrow Down' && <AiOutlineArrowDown size={12} stroke='none' fontWeight={100} />}
+        {item.shape === 'Arrow Up' && <AiOutlineArrowUp size={12} stroke='none' fontWeight={100} />}
+        {item.shape === 'Arrow Right' && <AiOutlineArrowRight size={12} stroke='none' fontWeight={100} />}
+        {item.shape === 'Arrow Left' && <AiOutlineArrowLeft size={12} stroke='none' fontWeight={100} />}
+      </Group>
+    )
+  }
+  return (
+    <Group top={centroid[1] - 5} left={centroid[0] - iconSize} color={textColor} textAnchor='start' key={`hex--${item.key}-${item.value}-${index}`}>
+      {item.shape === 'Arrow Down' && <AiOutlineArrowDown />}
+      {item.shape === 'Arrow Up' && <AiOutlineArrowUp />}
+      {item.shape === 'Arrow Right' && <AiOutlineArrowRight />}
+      {item.shape === 'Arrow Left' && <AiOutlineArrowLeft />}
+    </Group>
+  )
+}
+export default HexIcon

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

@@ -2,10 +2,9 @@ import { useContext } from 'react'
 import { geoCentroid, geoPath } from 'd3-geo'
 import ConfigContext from './../../../../context'
 import { MapContext } from './../../../../types/MapContext'
-import { AiOutlineArrowUp, AiOutlineArrowDown, AiOutlineArrowRight } from 'react-icons/ai'
-import { Group } from '@visx/group'
+import HexIcon from '../HexIcon'
 import { Text } from '@visx/text'
-import chroma from 'chroma-js'
+import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
 const offsets = {
   'US-VT': [50, -8],
@@ -52,16 +51,41 @@ const TerritoryHexagon = ({ label, text, stroke, strokeWidth, textColor, territo
         <>
           {state.hexMap.shapeGroups.map((group, groupIndex) => {
             return group.items.map((item, itemIndex) => {
-              if (item.operator === '=') {
-                if (geoData[item.key] === item.value || Number(geoData[item.key]) === Number(item.value)) {
-                  return (
-                    <Group style={{ transform: `translate(36%, 50%)`, fill: 'currentColor' }} key={`territory-hex--${itemIndex}`}>
-                      {item.shape === 'Arrow Down' && <AiOutlineArrowDown size={12} stroke='none' fontWeight={100} />}
-                      {item.shape === 'Arrow Up' && <AiOutlineArrowUp size={12} stroke='none' fontWeight={100} />}
-                      {item.shape === 'Arrow Right' && <AiOutlineArrowRight size={12} stroke='none' fontWeight={100} />}
-                    </Group>
-                  )
-                }
+              switch (item.operator) {
+                case '=':
+                  if (geoData[item.key] === item.value || Number(geoData[item.key]) === Number(item.value)) {
+                    return <HexIcon item={item} index={itemIndex} centroid={centroid} isTerritory />
+                  }
+                  break
+                case '≠':
+                  if (geoData[item.key] !== item.value && Number(geoData[item.key]) !== Number(item.value)) {
+                    return <HexIcon item={item} index={itemIndex} centroid={centroid} isTerritory />
+                  }
+                  break
+                case '<':
+                  if (Number(geoData[item.key]) < Number(item.value)) {
+                    return <HexIcon item={item} index={itemIndex} centroid={centroid} isTerritory />
+                  }
+                  break
+                case '>':
+                  if (Number(geoData[item.key]) > Number(item.value)) {
+                    return <HexIcon item={item} index={itemIndex} centroid={centroid} isTerritory />
+                  }
+                  break
+                case '<=':
+                  if (Number(geoData[item.key]) <= Number(item.value)) {
+                    return <HexIcon item={item} index={itemIndex} centroid={centroid} isTerritory />
+                  }
+                  break
+                case '>=':
+                  if (item.operator === '>=') {
+                    if (Number(geoData[item.key]) >= Number(item.value)) {
+                      return <HexIcon item={item} index={itemIndex} centroid={centroid} isTerritory />
+                    }
+                  }
+                  break
+                default:
+                  break
               }
             })
           })}
@@ -71,12 +95,7 @@ const TerritoryHexagon = ({ label, text, stroke, strokeWidth, textColor, territo
 
     if (undefined === abbr) return null
 
-    let textColor = '#FFF'
-
-    // Dynamic text color
-    if (chroma.contrast(textColor, bgColor) < 3.5) {
-      textColor = '#202020' // dark gray
-    }
+    let textColor = getContrastColor('#FFF', bgColor)
 
     // always make HI black since it is off to the side
     if (abbr === 'US-HI') {