@cdc/map 4.24.1 → 4.24.3

package/src/components/CityList.jsx

@@ -3,86 +3,98 @@ import { useState, useEffect } from 'react'
 import { jsx } from '@emotion/react'
 import { supportedCities } from '../data/supported-geos'
 import { scaleLinear } from 'd3-scale'
+import { GlyphStar, GlyphTriangle, GlyphDiamond, GlyphSquare, GlyphCircle } from '@visx/glyph'
 
-const CityList = ({ data, state, geoClickHandler, applyTooltipsToGeo, displayGeoName, applyLegendToRow, projection, titleCase, setSharedFilterValue, isFilterValueSupported, isGeoCodeMap }) => {
+const CityList = ({ data, state, geoClickHandler, applyTooltipsToGeo, displayGeoName, applyLegendToRow, projection, titleCase, setSharedFilterValue, isFilterValueSupported }) => {
   const [citiesData, setCitiesData] = useState({})
 
   useEffect(() => {
-    if (!isGeoCodeMap) {
-      const citiesList = Object.keys(data).filter(item => Object.keys(supportedCities).includes(item))
+    const citiesDictionary = {}
 
-      const citiesDictionary = {}
-
-      citiesList.map(city => (citiesDictionary[city] = data[city]))
-
-      setCitiesData(citiesDictionary)
-    } else {
-      const citiesDictionary = {}
-      state.data.map(city => (citiesDictionary[city[state.columns.geo.name]] = city))
-      setCitiesData(citiesDictionary)
+    if (data) {
+      Object.keys(data).forEach(key => {
+        const city = data[key]
+        citiesDictionary[city[state.columns.geo.name]] = city
+      })
     }
-  }, [data, state.data])
+
+    setCitiesData(citiesDictionary)
+  }, [data])
 
   if (state.general.type === 'bubble') {
-    const maxDataValue = Math.max(...state.data.map(d => d[state.columns.primary.name]))
+    const maxDataValue = Math.max(...(data ? Object.keys(data).map(key => data[key][state.columns.primary.name]) : [0]))
     const sortedRuntimeData = Object.values(data).sort((a, b) => (a[state.columns.primary.name] < b[state.columns.primary.name] ? 1 : -1))
     if (!sortedRuntimeData) return
 
     // Set bubble sizes
     var size = scaleLinear().domain([1, maxDataValue]).range([state.visual.minBubbleSize, state.visual.maxBubbleSize])
   }
-  let cityList = isGeoCodeMap ? Object.keys(citiesData).filter(c => undefined !== c) : Object.keys(citiesData).filter(c => undefined !== data[c])
+  let cityList = Object.keys(citiesData).filter(c => undefined !== c || undefined !== data[c])
   if (!cityList) return true
 
   // Cities output
   const cities = cityList.map((city, i) => {
-    const geoData = isGeoCodeMap ? state.data.filter(item => city === item[state.columns.geo.name])[0] : data[city]
-    const cityDisplayName = isGeoCodeMap ? city : titleCase(displayGeoName(city))
+    let geoData
+    if (data) {
+      Object.keys(data).forEach(key => {
+        if (city === data[key][state.columns.geo.name]) {
+          geoData = data[key]
+        }
+      })
+    }
+    if (!geoData) {
+      geoData = data ? data[city] : undefined
+    }
+    const cityDisplayName = titleCase(displayGeoName(city))
 
-    const legendColors = isGeoCodeMap && geoData ? applyLegendToRow(geoData) : data[city] ? applyLegendToRow(data[city]) : false
+    const legendColors = geoData ? applyLegendToRow(geoData) : data[city] ? applyLegendToRow(data[city]) : false
 
     if (legendColors === false) {
       return true
     }
 
-    const toolTip = applyTooltipsToGeo(cityDisplayName, isGeoCodeMap ? geoData : data[city])
+    const toolTip = applyTooltipsToGeo(cityDisplayName, geoData || data[city])
 
-    const radius = state.general.geoType === 'us' && !isGeoCodeMap ? 8 : isGeoCodeMap ? state.visual.geoCodeCircleSize : 4
+    const radius = state.visual.geoCodeCircleSize || 8
 
     const additionalProps = {
       fillOpacity: state.general.type === 'bubble' ? 0.4 : 1
     }
 
-    const circle = <circle cx={0} cy={0} r={state.general.type === 'bubble' ? size(geoData[state.columns.primary.name]) : radius} title='Click for more information' onClick={() => geoClickHandler(cityDisplayName, geoData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip} {...additionalProps} />
-
     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'
-        title='Click for more information'
+        title='Select for more information'
         onClick={() => geoClickHandler(cityDisplayName, geoData)}
-        strokeWidth={2}
-        stroke={'black'}
         data-tooltip-id='tooltip'
         data-tooltip-html={toolTip}
+        transform={`scale(${radius / 9})`}
+        stroke={state.general.geoBorderColor === 'sameAsBackground' ? '#ffffff' : '#000000'}
+        strokeWidth={'2px'}
+        tabIndex='-1'
         {...additionalProps}
       />
     )
 
     let transform = ''
 
-    if (!isGeoCodeMap) {
-      transform = `translate(${projection(supportedCities[city])})`
+    if (!geoData?.[state.columns.longitude.name] && !geoData?.[state.columns.latitude.name] && city && supportedCities[city.toUpperCase()]) {
+      transform = `translate(${projection(supportedCities[city.toUpperCase()])})`
     }
 
     let needsPointer = false
 
-    if (isGeoCodeMap) {
+    if (geoData?.[state.columns.longitude.name] && geoData?.[state.columns.latitude.name]) {
       let coords = [Number(geoData?.[state.columns.longitude.name]), Number(geoData?.[state.columns.latitude.name])]
       transform = `translate(${projection(coords)})`
       needsPointer = true
     }
 
+    if (!transform) {
+      return
+    }
+
     const styles = {
       fill: legendColors[0],
       opacity: setSharedFilterValue && isFilterValueSupported && data[city][state.columns.geo.name] !== setSharedFilterValue ? 0.5 : 1,
@@ -103,10 +115,61 @@ const CityList = ({ data, state, geoClickHandler, applyTooltipsToGeo, displayGeo
       styles.cursor = 'pointer'
     }
 
+    const shapeProps = {
+      onClick: () => geoClickHandler(cityDisplayName, geoData),
+      size: state.general.type === 'bubble' ? size(geoData[state.columns.primary.name]) : radius * 30,
+      title: 'Select for more information',
+      'data-tooltip-id': 'tooltip',
+      'data-tooltip-html': toolTip,
+      stroke: state.general.geoBorderColor === 'sameAsBackground' ? '#ffffff' : '#000000',
+      strokeWidth: '2px',
+      tabIndex: -1,
+      ...additionalProps
+    }
+
+    const cityStyleShapes = {
+      circle: <GlyphCircle {...shapeProps} />,
+      pin: pin,
+      square: <GlyphSquare {...shapeProps} />,
+      diamond: <GlyphDiamond {...shapeProps} />,
+      star: <GlyphStar {...shapeProps} />,
+      triangle: <GlyphTriangle {...shapeProps} />
+    }
+
+    const { additionalCityStyles } = state.visual || []
+    const cityStyle = Object.values(data)
+      .filter(d => additionalCityStyles.some(style => String(d[style.column]) === String(style.value)))
+      .map(d => {
+        const conditionsMatched = additionalCityStyles.find(style => String(d[style.column]) === String(style.value))
+        return { ...conditionsMatched, ...d }
+      })
+      .find(item => {
+        return Object.keys(item).find(key => item[key] === city)
+      })
+
+    if (cityStyle !== undefined && cityStyle.shape) {
+      if (!geoData?.[state.columns.longitude.name] && !geoData?.[state.columns.latitude.name] && city && supportedCities[city.toUpperCase()]) {
+        let translate = `translate(${projection(supportedCities[city.toUpperCase()])})`
+        return (
+          <g key={i} transform={translate} style={styles} className='geo-point' tabIndex={-1}>
+            {cityStyleShapes[cityStyle.shape.toLowerCase()]}
+          </g>
+        )
+      }
+
+      if (geoData?.[state.columns.longitude.name] && geoData?.[state.columns.latitude.name]) {
+        const coords = [Number(geoData?.[state.columns.longitude.name]), Number(geoData?.[state.columns.latitude.name])]
+        let translate = `translate(${projection(coords)})`
+        return (
+          <g key={i} transform={translate} style={styles} className='geo-point' tabIndex={-1}>
+            {cityStyleShapes[cityStyle.shape.toLowerCase()]}
+          </g>
+        )
+      }
+    }
     return (
-      <g key={i} transform={transform} style={styles} className='geo-point'>
-        {state.visual.cityStyle === 'circle' && circle}
-        {state.visual.cityStyle === 'pin' && pin}
+      <g key={i} transform={transform} style={styles} className='geo-point' tabIndex={-1}>
+        {cityStyleShapes[state.visual.cityStyle.toLowerCase()]}
       </g>
     )
   })

package/src/components/DataTable.jsx

@@ -7,6 +7,7 @@ import Icon from '@cdc/core/components/ui/Icon'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import LegendCircle from '@cdc/core/components/LegendCircle'
 import MediaControls from '@cdc/core/components/MediaControls'
+import SkipTo from '@cdc/core/components/elements/SkipTo'
 
 import Loading from '@cdc/core/components/Loading'
 
@@ -193,9 +194,7 @@ const DataTable = props => {
         {state.general.showDownloadButton && <DownloadButton />}
       </MediaControls.Section>
       <section id={tabbingId.replace('#', '')} className={`data-table-container ${viewport}`} aria-label={accessibilityLabel}>
-        <a id='skip-nav' className='cdcdataviz-sr-only-focusable' href={`#${skipId}`}>
-          Skip Navigation or Skip to Content
-        </a>
+        <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
         <div
           className={expanded ? 'data-table-heading' : 'collapsed data-table-heading'}
           onClick={() => {
@@ -229,7 +228,7 @@ const DataTable = props => {
                     return (
                       <th
                         key={`col-header-${column}`}
-                        tabIndex='0'
+                        tabIndex={0}
                         title={text}
                         role='columnheader'
                         scope='col'
@@ -245,9 +244,7 @@ const DataTable = props => {
                         {...(sortBy.column === column ? (sortBy.asc ? { 'aria-sort': 'ascending' } : { 'aria-sort': 'descending' }) : null)}
                       >
                         {text}
-                        <button>
-                          <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'} `} order</span>
-                        </button>
+                        <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'} order`}</span>
                       </th>
                     )
                   })}
@@ -298,6 +295,9 @@ const DataTable = props => {
           </table>
         </div>
       </section>
+      <div id={skipId} className='cdcdataviz-sr-only'>
+        Skipped data table.
+      </div>
     </ErrorBoundary>
   )
 }

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)
 
@@ -134,8 +203,6 @@ const EditorPanel = props => {
   }
 
   const handleEditorChanges = async (property, value) => {
-    console.log('prop', property)
-    console.log('value', value)
     switch (property) {
       // change these to be more generic.
       // updateVisualPropertyValue
@@ -278,6 +345,7 @@ const EditorPanel = props => {
         setState({
           ...state,
           visual: {
+            ...state.visual,
             cityStyle: value
           }
         })
@@ -380,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,
@@ -1290,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'>
@@ -1929,7 +1985,7 @@ const EditorPanel = props => {
                     </label>
                   </fieldset>
                 )}
-                {('us-geocode' === state.general.type || 'world-geocode' === state.general.type) && (
+                {
                   <>
                     <label>Latitude Column</label>
                     <select
@@ -1950,7 +2006,7 @@ const EditorPanel = props => {
                       {columnsOptions}
                     </select>
                   </>
-                )}
+                }
 
                 {'navigation' !== state.general.type && (
                   <fieldset className='primary-fieldset edit-block'>
@@ -2635,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'
@@ -2850,12 +2896,10 @@ const EditorPanel = props => {
                     )
                   })}
                 </ul>
-                {('us-geocode' === state.general.type || 'world-geocode' === state.general.type) && 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' && (
                   <>
@@ -2900,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>
@@ -2962,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'>
@@ -255,7 +270,7 @@ const HexSettingShapeColumns = props => {
                                             ...group.items,
                                             {
                                               key: '',
-                                              shape: 'Arrow up',
+                                              shape: 'Arrow Up',
                                               column: '',
                                               operator: '=',
                                               value: ''
@@ -309,7 +324,7 @@ const HexSettingShapeColumns = props => {
               copy.push({
                 legendTitle: '',
                 legendDescription: '',
-                items: [{ key: '', shape: 'Arrow up', column: '', operator: '=', value: '' }]
+                items: [{ key: '', shape: 'Arrow Up', column: '', operator: '=', value: '' }]
               })
               copy.legendTitle = ''
               copy.legendDescription = ''

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>
   )
 }