@cdc/map 2.6.3 → 9.22.9

package/src/components/BubbleList.js

@@ -0,0 +1,244 @@
+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 = (
+	{
+		data: dataImport,
+		state,
+		projection,
+		applyLegendToRow,
+		applyTooltipsToGeo,
+		handleCircleClick,
+		runtimeData,
+		displayGeoName
+	}) => {
+
+	useEffect(() => {
+		ReactTooltip.hide()
+	}, [runtimeData]);
+
+	const maxDataValue = Math.max(...dataImport.map(d => d[state.columns.primary.name]))
+	const hasBubblesWithZeroOnMap = state.visual.showBubbleZeros ? 0 : 1;
+	// sort runtime data. Smaller bubbles should appear on top.
+	const sortedRuntimeData = Object.values(runtimeData).sort((a, b) => a[state.columns.primary.name] < b[state.columns.primary.name] ? 1 : -1 )
+	if(!sortedRuntimeData) return;
+
+	const clickTolerance = 10;
+
+	// Set bubble sizes
+	var size = scaleLinear()
+		.domain([hasBubblesWithZeroOnMap, maxDataValue])
+		.range([state.visual.minBubbleSize, state.visual.maxBubbleSize])
+
+	// Start looping through the countries to create the bubbles.
+	if(state.general.geoType === 'world') {
+		const countries = sortedRuntimeData && sortedRuntimeData.map( (country, index) => {
+
+			let coordinates = countryCoordinates[country.uid]
+
+			if(!coordinates) return true;
+
+			const countryName = displayGeoName(country[state.columns.geo.name]);
+			const toolTip = applyTooltipsToGeo(countryName, country);
+			const legendColors = applyLegendToRow(country);
+			
+			let primaryKey = state.columns.primary.name
+			if ((Math.floor(Number(size(country[primaryKey]))) === 0 || country[primaryKey] === "") && !state.visual.showBubbleZeros) return;
+
+			let transform = `translate(${projection([coordinates[1], coordinates[0]])})`
+
+			let pointerX, pointerY;
+
+			if( !projection(coordinates) ) return true;
+
+			const circle = (
+				<>
+					<circle
+						key={`circle-${countryName.replace(' ', '')}`}
+						data-tip={toolTip}
+						data-for="tooltip"
+						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])) }
+						fill={legendColors[0] }
+						stroke={legendColors[0]}
+						strokeWidth={1.25}
+						fillOpacity={.4}
+						onPointerDown={(e) => {
+							pointerX = e.clientX; 
+							pointerY = e.clientY;
+						}}
+						onPointerUp={(e) => {
+							if(pointerX && pointerY &&
+								e.clientX > (pointerX - clickTolerance) &&
+								e.clientX < (pointerX + clickTolerance) &&
+								e.clientY > (pointerY - clickTolerance) &&
+								e.clientY < (pointerY + clickTolerance)
+							){ 
+								handleCircleClick(country)
+								pointerX = undefined;
+								pointerY = undefined;
+							}
+						}}
+						transform={transform}
+						style={{ transition: 'all .25s ease-in-out', cursor: "pointer" }}
+					/>
+
+					{state.visual.extraBubbleBorder &&
+						<circle
+							key={`circle-${countryName.replace(' ', '')}`}
+							data-tip={toolTip}
+							data-for="tooltip"
+							className="bubble"
+							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])) + 1 }
+							fill={ "transparent" }
+							stroke={ "white" }
+							strokeWidth={.5}
+							onPointerDown={(e) => {
+								pointerX = e.clientX; 
+								pointerY = e.clientY;
+							}}
+							onPointerUp={(e) => {
+								if(pointerX && pointerY &&
+									e.clientX > (pointerX - clickTolerance) &&
+									e.clientX < (pointerX + clickTolerance) &&
+									e.clientY > (pointerY - clickTolerance) &&
+									e.clientY < (pointerY + clickTolerance)
+								){ 
+									handleCircleClick(country)
+									pointerX = undefined;
+									pointerY = undefined;
+								}
+							}}
+							transform={transform}
+							style={{ transition: 'all .25s ease-in-out', cursor: "pointer" }}
+						/>
+					}
+				</>
+			);
+		
+
+			return (
+				<g key={`group-${countryName.replace(' ', '')}`}>
+					{circle}
+				</g>
+			)
+		})
+		return countries;
+	}
+
+	if(state.general.geoType === 'us') {
+		const bubbles = sortedRuntimeData && sortedRuntimeData.map( (item, index) => {
+			let stateData = stateCoordinates[item.uid]
+			let primaryKey = state?.columns?.primary?.name
+			if ( Number(size(item[primaryKey])) === 0) return;
+
+			if (item[primaryKey] === null) item[primaryKey] = ""
+
+			// Return if hiding zeros on the map
+			if( (Math.floor(Number(size(item[primaryKey]))) === 0 || item[primaryKey] === "" )&& !state.visual.showBubbleZeros ) return;
+
+			if(!stateData) return true;
+			let longitude = Number( stateData.Longitude);
+			let latitude = Number( stateData.Latitude);
+			let coordinates = [longitude, latitude]
+			//console.log('projection', projection([longitude, latitude]))
+			let stateName = stateData.Name;
+			if (!coordinates) return true;
+
+			stateName = displayGeoName(stateName);
+			const toolTip = applyTooltipsToGeo(stateName, item);
+			const legendColors = applyLegendToRow(item);
+
+
+			let transform = `translate(${projection([coordinates[1], coordinates[0]])})`
+
+			if ( !projection(coordinates) ) return true;
+
+			let pointerX, pointerY;
+			const circle = (
+				<>
+					<circle
+						key={`circle-${stateName.replace(' ', '')}`}
+						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]))}
+						fill={legendColors[0]}
+						stroke={legendColors[0]}
+						strokeWidth={1.25}
+						fillOpacity={.4}
+						onPointerDown={(e) => {
+							pointerX = e.clientX;
+							pointerY = e.clientY;
+						}}
+						onPointerUp={(e) => {
+							if (pointerX && pointerY &&
+								e.clientX > (pointerX - clickTolerance) &&
+								e.clientX < (pointerX + clickTolerance) &&
+								e.clientY > (pointerY - clickTolerance) &&
+								e.clientY < (pointerY + clickTolerance)
+							) {
+								handleCircleClick(state)
+								pointerX = undefined;
+								pointerY = undefined;
+							}
+						}}
+						transform={transform}
+						style={{ transition: 'all .25s ease-in-out', cursor: "pointer" }}
+					/>
+					{ state.visual.extraBubbleBorder &&
+						<circle
+						key={`circle-${stateName.replace(' ', '')}`}
+						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 }
+						fill={"transparent"}
+						stroke={"white"}
+						strokeWidth={.5}
+						fillOpacity={.4}
+						onPointerDown={(e) => {
+							pointerX = e.clientX;
+							pointerY = e.clientY;
+						}}
+						onPointerUp={(e) => {
+							if (pointerX && pointerY &&
+								e.clientX > (pointerX - clickTolerance) &&
+								e.clientX < (pointerX + clickTolerance) &&
+								e.clientY > (pointerY - clickTolerance) &&
+								e.clientY < (pointerY + clickTolerance)
+							) {
+								handleCircleClick(state)
+								pointerX = undefined;
+								pointerY = undefined;
+							}
+						}}
+						transform={transform}
+						style={{ transition: 'all .25s ease-in-out', cursor: "pointer" }}
+						/>
+					}
+				</>
+			);
+
+
+			return (
+				<g key={`group-${stateName.replace(' ', '')}`}>
+					{circle}
+				</g>
+			)
+		})
+		return bubbles;
+	}
+}
+export default BubbleList

package/src/components/CityList.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useContext } from 'react';
 /** @jsx jsx */
 import { jsx } from '@emotion/react'
 import { supportedCities } from '../data/supported-geos';
+import { scaleLinear } from 'd3-scale';
 
 const CityList = (({
   data,
@@ -11,7 +12,9 @@ const CityList = (({
   displayGeoName,
   applyLegendToRow,
   projection,
-  titleCase
+  titleCase,
+  setSharedFilterValue,
+  isFilterValueSupported
 }) => {
   const [citiesData, setCitiesData] = useState({});
 
@@ -25,6 +28,18 @@ const CityList = (({
     setCitiesData(citiesDictionary);
   }, [data]);
 
+  if (state.general.type === 'bubble') {
+    const maxDataValue = Math.max(...state.data.map(d => d[state.columns.primary.name]))
+    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])
+
+  }
+
   const cityList = Object.keys(citiesData).filter((c) => undefined !== data[c]);
 
   const cities = cityList.map((city, i) => {
@@ -38,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
@@ -61,18 +76,38 @@ const CityList = (({
 
     const radius = state.general.geoType === 'us' ? 8 : 4;
 
+    const additionalProps = {
+      fillOpacity: state.general.type === 'bubble' ? .4 : 1
+    }
+
     const circle = (
       <circle
         data-tip={toolTip}
         data-for="tooltip"
         cx={0}
         cy={0}
-        r={radius}
+        r={ state.general.type === 'bubble' ? size(geoData[state.columns.primary.name]) : radius}
         title="Click for more information"
         onClick={() => geoClickHandler(cityDisplayName, geoData)}
+       {...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"
+        onClick={() => geoClickHandler(cityDisplayName, geoData)}
+        data-tip={toolTip}
+        data-for="tooltip"
+        strokeWidth={2}
+        stroke={'black'}
+        {...additionalProps}
+        >
+      </path>
+    );
+
     let transform = `translate(${projection(supportedCities[city])})`
 
     return (
@@ -82,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

@@ -1,13 +1,14 @@
 import React, { useState, useEffect, memo, useRef } from 'react';
+import Loading from '@cdc/core/components/Loading';
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary';
 import { geoCentroid, geoPath } from 'd3-geo';
 import { feature, mesh } from 'topojson-client';
 import { CustomProjection } from '@visx/geo';
-import colorPalettes from '../data/color-palettes';
+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 = {
@@ -57,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 {
@@ -79,6 +80,7 @@ const CountyMap = (props) => {
 		displayGeoName,
 		rebuildTooltips,
 		containerEl,
+		handleMapAriaLabels
 	} = props;
 
 	useEffect(() => {
@@ -514,10 +516,18 @@ const CountyMap = (props) => {
 		geosJsx.push(<FocusedStateBorder key="focused-border-key" />);
 		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}

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';
@@ -30,7 +30,10 @@ const DataTable = (props) => {
     applyLegendToRow,
     displayGeoName,
     navigationHandler,
-    viewport
+    viewport,
+    formatLegendLocation,
+    tabbingId,
+    setFilteredCountryCode
   } = props;
 
   const [expanded, setExpanded] = useState(expandDataTable);
@@ -39,7 +42,7 @@ const DataTable = (props) => {
 
   const [ready, setReady] = useState(false)
 
-  const fileName = `${mapTitle}.csv`;
+  const fileName = `${mapTitle || 'data-table'}.csv`;
 
 
   // Catch all sorting method used on load by default but also on user click
@@ -164,7 +167,6 @@ const DataTable = (props) => {
           id={`${skipId}`}
           data-html2canvas-ignore
           role="button"
-          tabIndex="-1"
         >
           Download Data (CSV)
         </a>
@@ -176,9 +178,9 @@ const DataTable = (props) => {
     const newTableColumns = [];
 
     Object.keys(columns).forEach((column) => {
-      if (columns[column].dataTable === true && '' !== columns[column].name) {
+      if (columns[column].dataTable === true && columns[column].name) {
         const newCol = {
-          Header: columns[column].label || columns[column].name,
+          Header: columns[column].label ? columns[column].label : columns[column].name,
           id: column,
           accessor: (row) => {
             if (runtimeData) {
@@ -204,7 +206,11 @@ const DataTable = (props) => {
 
             const legendColor = applyLegendToRow(rowObj);
 
-            let labelValue = displayGeoName(row.original);
+            if(state.general.geoType !== 'us-county') {
+              var labelValue = displayGeoName(row.original);
+            } else {
+              var labelValue = formatLegendLocation(row.original)
+            }
 
             labelValue = getCellAnchor(labelValue, rowObj);
 
@@ -230,11 +236,11 @@ const DataTable = (props) => {
     });
 
     return newTableColumns;
-  }, [indexTitle, columns, runtimeData, runtimeLegend]);
+  }, [indexTitle, columns, runtimeData,getCellAnchor,displayDataAsText,applyLegendToRow,customSort,displayGeoName,state.legend.specialClasses]);
 
   const tableData = useMemo(
     () => Object.keys(runtimeData).filter((key) => applyLegendToRow(runtimeData[key])).sort((a, b) => customSort(a, b)),
-    [runtimeLegend, runtimeData, applyLegendToRow, customSort]
+    [ runtimeData, applyLegendToRow, customSort]
   );
 
   // Change accessibility label depending on expanded status
@@ -282,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>
@@ -292,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' }
         >
@@ -311,7 +317,8 @@ const DataTable = (props) => {
             {headerGroups.map((headerGroup) => (
               <tr {...headerGroup.getHeaderGroupProps()}>
                 {headerGroup.headers.map((column) => (
-                  <th tabIndex="0"
+                  <th
+                    tabIndex="0"
                     title={column.Header}
                     role="columnheader"
                     scope="col"
@@ -338,7 +345,7 @@ const DataTable = (props) => {
               return (
                 <tr {...row.getRowProps()} role="row">
                   {row.cells.map((cell) => (
-                    <td tabIndex="0" {...cell.getCellProps()} role="gridcell">
+                    <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>
                   ))}