@cdc/map 2.6.4 → 4.22.10-alpha.1

package/src/components/BubbleList.js

@@ -2,6 +2,7 @@ import React, {memo, useState, useEffect} from 'react'
 import { scaleLinear } from 'd3-scale';
 import { countryCoordinates } from '../data/country-coordinates';
 import stateCoordinates from '../data/state-coordinates';
+import ReactTooltip from 'react-tooltip'
 
 export const BubbleList = (
 	{
@@ -15,6 +16,9 @@ export const BubbleList = (
 		displayGeoName
 	}) => {
 
+	useEffect(() => {
+		ReactTooltip.hide()
+	}, [runtimeData]);
 
 	const maxDataValue = Math.max(...dataImport.map(d => d[state.columns.primary.name]))
 	const hasBubblesWithZeroOnMap = state.visual.showBubbleZeros ? 0 : 1;
@@ -56,7 +60,7 @@ export const BubbleList = (
 						key={`circle-${countryName.replace(' ', '')}`}
 						data-tip={toolTip}
 						data-for="tooltip"
-						className="bubble"
+						className={`bubble country--${countryName}`}
 						cx={ Number(projection(coordinates[1], coordinates[0])[0]) || 0  } // || 0 handles error on loads where the data isn't ready
 						cy={ Number(projection(coordinates[1], coordinates[0])[1]) || 0 }
 						r={ Number(size(country[primaryKey])) }
@@ -197,9 +201,9 @@ export const BubbleList = (
 						data-tip={toolTip}
 						data-for="tooltip"
 						className="bubble"
-						cx={projection(coordinates)[0] || 0} // || 0 handles error on loads where the data isn't ready
-						cy={projection(coordinates)[1] || 0}
-						r={Number(size(item[primaryKey]) + 1)}
+						cx={ projection(coordinates)[0] || 0 } // || 0 handles error on loads where the data isn't ready
+						cy={ projection(coordinates)[1] || 0 }
+						r={ Number(size(item[primaryKey])) + 1 }
 						fill={"transparent"}
 						stroke={"white"}
 						strokeWidth={.5}
@@ -237,4 +241,4 @@ export const BubbleList = (
 		return bubbles;
 	}
 }
-export default memo(BubbleList)
+export default BubbleList

package/src/components/CityList.js

@@ -3,6 +3,7 @@ import React, { useState, useEffect, useContext } from 'react';
 import { jsx } from '@emotion/react'
 import { supportedCities } from '../data/supported-geos';
 import { scaleLinear } from 'd3-scale';
+import ReactTooltip from 'react-tooltip';
 
 const CityList = (({
   data,
@@ -12,19 +13,33 @@ const CityList = (({
   displayGeoName,
   applyLegendToRow,
   projection,
-  titleCase
+  titleCase,
+  setSharedFilterValue,
+  isFilterValueSupported,
+  isGeoCodeMap
 }) => {
+
   const [citiesData, setCitiesData] = useState({});
 
   useEffect(() => {
-    const citiesList = Object.keys(data).filter((item) => Object.keys(supportedCities).includes(item));
-
-    const citiesDictionary = {};
-
-    citiesList.map((city) => citiesDictionary[city] = data[city]);
+    ReactTooltip.rebuild()
+  });
 
-    setCitiesData(citiesDictionary);
-  }, [data]);
+  useEffect(() => {
+    if(!isGeoCodeMap) {
+      const citiesList = Object.keys(data).filter((item) => Object.keys(supportedCities).includes(item));
+  
+      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);
+    }
+  }, [data, state.data]);
 
   if (state.general.type === 'bubble') {
     const maxDataValue = Math.max(...state.data.map(d => d[state.columns.primary.name]))
@@ -37,13 +52,17 @@ const CityList = (({
       .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]);
+  if(!cityList) return true;
 
-  const cityList = Object.keys(citiesData).filter((c) => undefined !== data[c]);
-
+  // Cities output
   const cities = cityList.map((city, i) => {
-    const cityDisplayName = titleCase( displayGeoName(city) );
 
-    const legendColors = applyLegendToRow(data[city]);
+    const geoData = isGeoCodeMap ? state.data.filter(item => city === item[state.columns.geo.name])[0] : data[city];
+
+    const cityDisplayName = isGeoCodeMap ? city : titleCase( displayGeoName(city) );
+
+    const legendColors = (isGeoCodeMap && geoData) ? applyLegendToRow(geoData) : data[city] ? applyLegendToRow(data[city]) : false;
 
     if (legendColors === false) {
       return true;
@@ -51,8 +70,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
@@ -63,16 +82,16 @@ const CityList = (({
       }
     };
 
-    const geoData = data[city];
+
 
     const toolTip = applyTooltipsToGeo(cityDisplayName, data[city]);
 
     // If we need to add a cursor pointer
-    if ((state.columns.navigate && geoData[state.columns.navigate.name]) || state.tooltips.appearanceType === 'click') {
+    if ((state.columns.navigate && (geoData?.[state.columns.navigate.name] && geoData[state.columns.navigate.name]) ) || state.tooltips.appearanceType === 'click') {
       styles.cursor = 'pointer'
     }
 
-    const radius = state.general.geoType === 'us' ? 8 : 4;
+    const radius = state.general.geoType === 'us' && !isGeoCodeMap ? 8 : isGeoCodeMap ? 2 : 4;
 
     const additionalProps = {
       fillOpacity: state.general.type === 'bubble' ? .4 : 1
@@ -91,7 +110,31 @@ const CityList = (({
       />
     );
 
-    let transform = `translate(${projection(supportedCities[city])})`
+    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 = '';
+
+    if (!isGeoCodeMap)  {
+      transform = `translate(${projection(supportedCities[city])})`
+    }
+
+    if (isGeoCodeMap) {
+      let coords = [Number(geoData?.[state.columns.longitude.name]), Number(geoData?.[state.columns.latitude.name])]
+      transform = `translate(${projection(coords)})`
+    }
 
     return (
       <g
@@ -100,7 +143,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,8 +8,9 @@ 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';
+import CityList from './CityList';
 
 const offsets = {
 	Vermont: [50, -8],
@@ -44,31 +45,21 @@ const STATE_INACTIVE_FILL = '#F4F7FA';
 const projection = geoAlbersUsaTerritories().translate([WIDTH / 2, HEIGHT / 2]);
 const path = geoPath().projection(projection);
 const stateLines = path(mesh(testJSON, testJSON.objects.states));
+const countyLines = path(mesh(testJSON, testJSON.objects.counties));
 
-const nudges = {
-	'US-FL': [15, 3],
-	'US-AK': [0, -8],
-	'US-CA': [-10, 0],
-	'US-NY': [5, 0],
-	'US-MI': [13, 20],
-	'US-LA': [-10, -3],
-	'US-HI': [-10, 10],
-	'US-ID': [0, 10],
-	'US-WV': [-2, 2],
-};
 
 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 +71,10 @@ const CountyMap = (props) => {
 		displayGeoName,
 		rebuildTooltips,
 		containerEl,
+		handleMapAriaLabels,
+		titleCase,
+		setSharedFilterValue,
+		isFilterValueSupported
 	} = props;
 
 	useEffect(() => {
@@ -214,27 +209,42 @@ const CountyMap = (props) => {
 	};
 
 	const onReset = (e) => {
-		e.preventDefault();
-		const svg = document.querySelector('.svg-container')
 
-		svg.setAttribute('data-scaleZoom', 0)
+		if (state.general.type !== 'us-geocode') {
+			e.preventDefault();
+			const svg = document.querySelector('.svg-container') 
 
+			svg.setAttribute('data-scaleZoom', 0)
 
-		const allStates = document.querySelectorAll('.state path');
-		const allCounties = document.querySelectorAll('.county path');
 
-		stateLinesPath.current.setAttribute('stroke', geoStrokeColor);
-		stateLinesPath.current.setAttribute('stroke-width', startingLineWidth);
+			const allStates = document.querySelectorAll('.state path');
+			const allCounties = document.querySelectorAll('.county path');
+
+			stateLinesPath.current.setAttribute('stroke', geoStrokeColor);
+			stateLinesPath.current.setAttribute('stroke-width', startingLineWidth);
 
-		let otherStates = document.querySelectorAll(`.state--inactive`);
-		otherStates.forEach((el) => (el.style.display = 'none'));
-		allCounties.forEach((el) => (el.style.strokeWidth = 0.85));
-		allStates.forEach((state) => state.setAttribute('stroke-width', .75 / .85 ));
+			let otherStates = document.querySelectorAll(`.state--inactive`);
+			otherStates.forEach((el) => (el.style.display = 'none'));
+			allCounties.forEach((el) => (el.style.strokeWidth = 0.85));
+			allStates.forEach((state) => state.setAttribute('stroke-width', .75 / .85));
 
-		mapGroup.current.setAttribute('transform', `translate(${[0, 0]}) scale(${0.85})`);
+			mapGroup.current.setAttribute('transform', `translate(${[0, 0]}) scale(${0.85})`);
 
-		// reset button
-		resetButton.current.style.display = 'none';
+			// reset button
+			resetButton.current.style.display = 'none';
+		} else {
+			const svg = document.querySelector('.svg-container')
+			const allStates = document.querySelectorAll('.state');
+			document.querySelector('#focusedBorder path').style.stroke = 'none';
+			allStates.forEach(item => item.classList.remove('state--inactive'))
+			//document.querySelectorAll('.state path').forEach(item => item.style.fill = 'rgb(244, 247, 250)')
+			document.querySelectorAll('.state').forEach(item => item.style.display = 'block')
+			stateLinesPath.current.setAttribute('stroke', geoStrokeColor);
+			stateLinesPath.current.setAttribute('stroke-width', startingLineWidth);
+			svg.setAttribute('data-scaleZoom', 0)
+			mapGroup.current.setAttribute('transform', `translate(${[0, 0]}) scale(${0.85})`);
+			resetButton.current.style.display = 'none';
+		}
 	};
 
 	function setStateLeave() {
@@ -260,11 +270,11 @@ const CountyMap = (props) => {
 		focusedBorderPath.current.setAttribute('d', focusedStateLine);
 		focusedBorderPath.current.setAttribute('stroke', '#000');
 
-		if(scale) {
-			allStates.forEach( state => state.setAttribute('stroke-width', 0.75 / scale))
-			focusedBorderPath.current.setAttribute('stroke-width', 0.75 / scale );
+		if (scale) {
+			allStates.forEach(state => state.setAttribute('stroke-width', 0.75 / scale))
+			focusedBorderPath.current.setAttribute('stroke-width', 0.75 / scale);
 		}
-		
+
 	}
 
 	const StateLines = memo(({ stateLines, lineWidth, geoStrokeColor }) => {
@@ -423,6 +433,12 @@ const CountyMap = (props) => {
 		return output;
 	});
 
+	const GeoCodeCountyLines = memo(() => {
+		return (
+			<path d={countyLines} className="county-borders" style={{ stroke: geoStrokeColor}} />
+		)
+	})
+
 	const StateOutput = memo(({ geographies, states }) => {
 		let output = [];
 		output.push(
@@ -445,13 +461,25 @@ const CountyMap = (props) => {
 
 				const geoDisplayName = displayGeoName(geoKey);
 
-				let stateStyles = {
-					cursor: 'default',
-					stroke: STATE_BORDER,
-					strokeWidth: 0.75 / scale,
-					display: !focusedState ? 'none' : focusedState && focusedState !== geo.id ? 'block' : 'none',
-					fill: focusedState && focusedState !== geo.id ? STATE_INACTIVE_FILL : 'none',
-				};
+				let stateStyles = {}
+
+				if (state.general.type !== 'us-geocode') {
+					stateStyles = {
+						cursor: 'default',
+						stroke: STATE_BORDER,
+						strokeWidth: 0.75 / scale,
+						display: !focusedState ? 'none' : focusedState && focusedState !== geo.id ? 'block' : 'none',
+						fill: focusedState && focusedState !== geo.id ? STATE_INACTIVE_FILL : 'none',
+					};
+				} else {
+					stateStyles = {
+						cursor: 'default',
+						stroke: STATE_BORDER,
+						strokeWidth: 0.75 / scale,
+						display: 'block',
+						fill: '#f4f7fa',
+					};
+				}
 
 				let stateSelectedStyles = {
 					fillOpacity: 1,
@@ -502,7 +530,14 @@ const CountyMap = (props) => {
 		const states = geographies.slice(0, 56);
 		const counties = geographies.slice(56);
 		let geosJsx = [];
-		geosJsx.push(<CountyOutput geographies={geographies} counties={counties} key="county-key" />);
+		{
+			'us-geocode' !== state.general.type &&
+			geosJsx.push(<CountyOutput geographies={geographies} counties={counties} key="county-key" />);
+		}
+		{
+			'us-geocode' === state.general.type &&
+			geosJsx.push(<GeoCodeCountyLines />);
+		}
 		geosJsx.push(<StateOutput geographies={geographies} states={states} key="state-key" />);
 		geosJsx.push(
 			<StateLines
@@ -513,12 +548,34 @@ const CountyMap = (props) => {
 			/>
 		);
 		geosJsx.push(<FocusedStateBorder key="focused-border-key" />);
+		geosJsx.push(<CityList
+			projection={projection}
+			key="cities"
+			data={data}
+			state={state}
+			geoClickHandler={geoClickHandler}
+			applyTooltipsToGeo={applyTooltipsToGeo}
+			displayGeoName={displayGeoName}
+			applyLegendToRow={applyLegendToRow}
+			titleCase={titleCase}
+			setSharedFilterValue={setSharedFilterValue}
+			isFilterValueSupported={isFilterValueSupported}
+			isGeoCodeMap={state.general.type === 'us-geocode'}
+			/>)
 		return geosJsx;
 	};
 	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}
@@ -541,12 +598,14 @@ const CountyMap = (props) => {
 								transform={`translate(${translate}) scale(${scale})`}
 								key='countyMapGroup'
 							>
-								{constructGeoJsx(features, geoAlbersUsaTerritories)}
+								{constructGeoJsx(features, projection)}
 							</g>
 						);
 					}}
 				</CustomProjection>
 			</svg>
+
+			{/* TODO: Refactor to COVE button */}
 			<button className={`btn btn--reset`} onClick={onReset} ref={resetButton} style={{ display: 'none' }} tabIndex="0">
 				Reset Zoom
 			</button>

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';
@@ -206,7 +206,7 @@ const DataTable = (props) => {
 
             const legendColor = applyLegendToRow(rowObj);
 
-            if(state.general.geoType !== 'us-county') {
+            if(state.general.geoType !== 'us-county' || state.general.type === 'us-geocode') {
               var labelValue = displayGeoName(row.original);
             } else {
               var labelValue = formatLegendLocation(row.original)
@@ -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"
@@ -344,11 +344,14 @@ const DataTable = (props) => {
               prepareRow(row);
               return (
                 <tr {...row.getRowProps()} role="row">
-                  {row.cells.map((cell) => (
-                    <td tabIndex="0" {...cell.getCellProps()} role="gridcell" onClick={ (e) => (state.general.type === 'bubble' && state.general.allowMapZoom && state.general.geoType === 'world') ? setFilteredCountryCode(cell.row.original) : true }>
-                      {cell.render('Cell')}
-                    </td>
-                  ))}
+                  {row.cells.map((cell) => {
+                    return (
+                      <td tabIndex="0" {...cell.getCellProps()} role="gridcell" onClick={ (e) => (state.general.type === 'bubble' && state.general.allowMapZoom && state.general.geoType === 'world') ? setFilteredCountryCode(cell.row.original) : true }>
+                        {cell.render('Cell')}
+                      </td>
+                    )
+                  }
+                  )}
                 </tr>
               );
             })}