@cdc/map 4.24.2 → 4.24.4

package/src/components/CityList.jsx

@@ -3,8 +3,9 @@ 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 }) => {
+const CityList = ({ data, state, geoClickHandler, applyTooltipsToGeo, displayGeoName, applyLegendToRow, projection, titleCase, setSharedFilterValue, isFilterValueSupported, tooltipId }) => {
   const [citiesData, setCitiesData] = useState({})
 
   useEffect(() => {
@@ -60,18 +61,18 @@ const CityList = ({ data, state, geoClickHandler, applyTooltipsToGeo, displayGeo
       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-id={`tooltip__${tooltipId}`}
         data-tooltip-html={toolTip}
+        transform={`scale(${radius / 9})`}
+        stroke={state.general.geoBorderColor === 'sameAsBackground' ? '#ffffff' : '#000000'}
+        strokeWidth={'2px'}
+        tabIndex='-1'
         {...additionalProps}
       />
     )
@@ -96,8 +97,8 @@ const CityList = ({ data, state, geoClickHandler, applyTooltipsToGeo, displayGeo
 
     const styles = {
       fill: legendColors[0],
-      opacity: setSharedFilterValue && isFilterValueSupported && data[city][state.columns.geo.name] !== setSharedFilterValue ? 0.5 : 1,
-      stroke: setSharedFilterValue && isFilterValueSupported && data[city][state.columns.geo.name] === setSharedFilterValue ? 'rgba(0, 0, 0, 1)' : 'rgba(0, 0, 0, 0.4)',
+      opacity: setSharedFilterValue && isFilterValueSupported && data[city] && data[city][state.columns.geo.name] !== setSharedFilterValue ? 0.5 : 1,
+      stroke: setSharedFilterValue && isFilterValueSupported && data[city] && data[city][state.columns.geo.name] === setSharedFilterValue ? 'rgba(0, 0, 0, 1)' : 'rgba(0, 0, 0, 0.4)',
       '&:hover': {
         fill: legendColors[1],
         outline: 0
@@ -114,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__${tooltipId}`,
+      '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>
   )
 }