@cdc/map 2.6.4 → 9.22.9

package/src/components/CityList.js

@@ -12,7 +12,9 @@ const CityList = (({
   displayGeoName,
   applyLegendToRow,
   projection,
-  titleCase
+  titleCase,
+  setSharedFilterValue,
+  isFilterValueSupported
 }) => {
   const [citiesData, setCitiesData] = useState({});
 
@@ -51,8 +53,8 @@ const CityList = (({
 
     const styles = {
       fill: legendColors[0],
-      outline: 0,
-      stroke: 'rgba(0, 0, 0, 0.4)',
+      opacity: setSharedFilterValue && isFilterValueSupported && data[city][state.columns.geo.name] !== setSharedFilterValue ? .5 : 1,
+      stroke: setSharedFilterValue && isFilterValueSupported && data[city][state.columns.geo.name] === setSharedFilterValue ? 'rgba(0, 0, 0, 1)' : 'rgba(0, 0, 0, 0.4)',
       '&:hover': {
         fill: legendColors[1],
         outline: 0
@@ -91,6 +93,21 @@ const CityList = (({
       />
     );
 
+    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"
+        onClick={() => geoClickHandler(cityDisplayName, geoData)}
+        data-tip={toolTip}
+        data-for="tooltip"
+        strokeWidth={2}
+        stroke={'black'}
+        {...additionalProps}
+        >
+      </path>
+    );
+
     let transform = `translate(${projection(supportedCities[city])})`
 
     return (
@@ -100,7 +117,8 @@ const CityList = (({
         css={styles}
         className="geo-point"
       >
-        {circle}
+        {state.visual.cityStyle === 'circle' && circle }
+        {state.visual.cityStyle === 'pin' && pin }
       </g>
     );
   });

package/src/components/CountyMap.js

@@ -8,7 +8,7 @@ import { feature, mesh } from 'topojson-client';
 import { CustomProjection } from '@visx/geo';
 import colorPalettes from '../../../core/data/colorPalettes'
 import { geoAlbersUsaTerritories } from 'd3-composite-projections';
-import testJSON from '../data/dfc-map.json';
+import testJSON from '../data/county-map.json';
 import { abbrs } from '../data/abbreviations';
 
 const offsets = {
@@ -58,17 +58,17 @@ const nudges = {
 };
 
 function CountyMapChecks(prevState, nextState) {
+	const equalNumberOptIn = prevState.state.general.equalNumberOptIn && nextState.state.general.equalNumberOptIn;
 	const equalColumnName = prevState.state.general.type && nextState.state.general.type;
 	const equalNavColumn = prevState.state.columns.navigate && nextState.state.columns.navigate;
 	const equalLegend = prevState.runtimeLegend === nextState.runtimeLegend;
 	const equalBorderColors = prevState.state.general.geoBorderColor === nextState.state.general.geoBorderColor; // update when geoborder color changes
 	const equalMapColors = prevState.state.color === nextState.state.color; // update when map colors change
 	const equalData = prevState.data === nextState.data; // update when data changes
-	return equalMapColors && equalData && equalBorderColors && equalLegend && equalColumnName && equalNavColumn ? true : false;
+	return equalMapColors && equalData && equalBorderColors && equalLegend && equalColumnName && equalNavColumn && equalNumberOptIn ? true : false;
 }
 
 const CountyMap = (props) => {
-
 	let mapData = states.concat(counties);
 
 	const {
@@ -80,6 +80,7 @@ const CountyMap = (props) => {
 		displayGeoName,
 		rebuildTooltips,
 		containerEl,
+		handleMapAriaLabels
 	} = props;
 
 	useEffect(() => {
@@ -518,7 +519,15 @@ const CountyMap = (props) => {
 	if(!data) <Loading />
 	return (
 		<ErrorBoundary component='CountyMap'>
-			<svg viewBox={`0 0 ${WIDTH} ${HEIGHT}`} preserveAspectRatio='xMinYMin' className='svg-container' data-scale={scale ? scale : ''} data-translate={translate ? translate : ''}>
+			<svg 
+				viewBox={`0 0 ${WIDTH} ${HEIGHT}`} 
+				preserveAspectRatio='xMinYMin' 
+				className='svg-container' 
+				data-scale={scale ? scale : ''} 
+				data-translate={translate ? translate : ''}
+				role="img"
+				aria-label={handleMapAriaLabels(state)}
+			>
 				<rect
 					className='background center-container ocean'
 					width={WIDTH}

package/src/components/DataTable.js

@@ -5,7 +5,7 @@ import {
   useTable, useSortBy, useResizeColumns, useBlockLayout
 } from 'react-table';
 import Papa from 'papaparse';
-import ExternalIcon from '../images/external-link.svg';
+import ExternalIcon from '../images/external-link.svg'; // TODO: Move to Icon component
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary';
 import LegendCircle from '@cdc/core/components/LegendCircle';
@@ -288,7 +288,7 @@ const DataTable = (props) => {
   if(!state.data) return <Loading />
   return (
     <ErrorBoundary component="DataTable">
-      <section id={state.general.title ? `dataTableSection__${state.general.title.replace(/\s/g, '')}` : `dataTableSection`} className={`data-table-container ${viewport}`} aria-label={accessibilityLabel}>
+      <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>
@@ -298,17 +298,17 @@ const DataTable = (props) => {
         tabIndex="0"
         onKeyDown={(e) => { if (e.keyCode === 13) { setExpanded(!expanded); } }}
       >
- 
+
         {tableTitle}
       </div>
-      <div 
+      <div
         className="table-container"
-        style={ { maxHeight: state.dataTable.limitHeight && `${state.dataTable.height}px`, overflowY: 'scroll' } } 
+        style={ { maxHeight: state.dataTable.limitHeight && `${state.dataTable.height}px`, overflowY: 'scroll' } }
       >
         <table
-          height={expanded ? null : 0} {...getTableProps()} 
-          aria-live="assertive" 
-          className={expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}  
+          height={expanded ? null : 0} {...getTableProps()}
+          aria-live="assertive"
+          className={expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}
           hidden={!expanded}
           aria-rowcount={state?.data.length ? state.data.length : '-1' }
         >
@@ -317,7 +317,7 @@ const DataTable = (props) => {
             {headerGroups.map((headerGroup) => (
               <tr {...headerGroup.getHeaderGroupProps()}>
                 {headerGroup.headers.map((column) => (
-                  <th 
+                  <th
                     tabIndex="0"
                     title={column.Header}
                     role="columnheader"