@cdc/map 2.6.3 → 9.22.9

package/src/components/Geo.js

@@ -18,4 +18,4 @@ const Geo = ({path, styles, stroke, strokeWidth, ...props}) => {
   )
 }
 
-export default memo(Geo)
+export default memo(Geo)

package/src/components/Modal.js

@@ -2,6 +2,7 @@ import React from 'react';
 import closeIcon from '../images/close.svg?inline';
 import LegendCircle from '@cdc/core/components/LegendCircle';
 
+//TODO: Where is this being used? Transfer to new Modal component?
 const Modal = (props) => {
   const {
     applyTooltipsToGeo,
@@ -28,4 +29,4 @@ const Modal = (props) => {
 };
 
 
-export default Modal;
+export default Modal;

package/src/components/NavigationMenu.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 
 const NavigationMenu = ({
-  data, navigationHandler, options, columns, displayGeoName
+  data, navigationHandler, options, columns, displayGeoName, mapTabbingID
 }) => {
   const [activeGeo, setActiveGeo] = useState('');
 
@@ -15,6 +15,7 @@ const NavigationMenu = ({
       navigationHandler(urlString);
     }
   };
+
   let navSelect; let
     navGo;
 
@@ -51,9 +52,9 @@ const NavigationMenu = ({
   return (
     <section className="navigation-menu">
       <form onSubmit={handleSubmit} type="get">
-        <label htmlFor="dropdown">
+        <label htmlFor={mapTabbingID.replace('#', '')}>
           <div className="select-heading">{navSelect}</div>
-          <select value={activeGeo} id="dropdown" onChange={(e) => setActiveGeo(e.target.value)}>
+          <select value={activeGeo} id={mapTabbingID.replace('#', '')} onChange={(e) => setActiveGeo(e.target.value)}>
             {Object.keys(dropdownItems).map((key, i) => <option key={key} value={key}>{key}</option>)}
           </select>
         </label>

package/src/components/Sidebar.js

@@ -16,18 +16,10 @@ const Sidebar = (props) => {
     setRuntimeLegend,
     prefix,
     suffix,
-    viewport
+    viewport,
+    displayDataAsText
   } = props;
 
-  const addCommas = (value) => {
-    // If value is a number, apply specific formattings
-    if (value && columns.primary.hasOwnProperty('useCommas') && columns.primary.useCommas === true) {
-      return value.toLocaleString('en-US', { style: 'decimal' });
-    }
-
-    return value;
-  };
-
   // Toggles if a legend is active and being applied to the map and data table.
   const toggleLegendActive = (i, legendLabel) => {
     const newValue = !runtimeLegend[i].disabled;
@@ -48,21 +40,22 @@ const Sidebar = (props) => {
   };
 
   const legendList = runtimeLegend.map((entry, idx) => {
-    const entryMax = addCommas(entry.max);
 
-    const entryMin = addCommas(entry.min);
+    const entryMax = displayDataAsText(entry.max, 'primary');
 
-    let formattedText = `${prefix + entryMin + suffix}${entryMax !== entryMin ? ` - ${prefix + entryMax + suffix}` : ''}`;
+    const entryMin = displayDataAsText(entry.min, 'primary');
+
+    let formattedText = `${entryMin}${entryMax !== entryMin ? ` - ${entryMax}` : ''}`;
 
     // If interval, add some formatting
     if (legend.type === 'equalinterval' && idx !== runtimeLegend.length - 1) {
-      formattedText = `${prefix + entryMin + suffix} - < ${prefix + entryMax + suffix}`;
+      formattedText = `${entryMin} - < ${entryMax}`;
     }
 
     const { disabled } = entry;
 
     if (legend.type === 'category') {
-      formattedText = prefix + entry.value + suffix;
+      formattedText = displayDataAsText(entry.value, 'primary');
     }
 
     if (entry.max === 0 && entry.min === 0) {
@@ -76,12 +69,13 @@ const Sidebar = (props) => {
     }
 
     return (
-      <li
+      <li 
+        className={disabled ? 'disabled single-legend' : 'single-legend'}
         key={idx}
         title={`Legend item ${legendLabel} - Click to disable`}
-        onClick={() => { toggleLegendActive(idx, legendLabel); }}
-        className={disabled ? 'disabled single-legend' : 'single-legend'}
-      ><LegendCircle fill={entry.color} /> <span className="label">{legendLabel}</span>
+        onClick={() => { toggleLegendActive(idx, legendLabel); } }
+        >
+        <LegendCircle fill={entry.color} /> <span className="label">{legendLabel}</span>
       </li>
     );
   });
@@ -105,6 +99,7 @@ const Sidebar = (props) => {
         <select
           id={`filter-${idx}`}
           className="filter-select"
+          aria-label="select filter"
           value={singleFilter.active}
           onChange={(val) => {
             changeFilterActive(idx, val.target.value);

package/src/components/SingleStateMap.js

@@ -5,9 +5,9 @@ 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';
 
 const abbrs = {
   Alabama: 'AL',
@@ -99,7 +99,8 @@ const SingleStateMap = (props) => {
     supportedTerritories,
     rebuildTooltips,
     runtimeLegend,
-    generateColorsArray
+    generateColorsArray,
+    handleMapAriaLabels
   } = props;
 
 
@@ -290,11 +291,16 @@ const SingleStateMap = (props) => {
     return geosJsx;
   };
 
-
   return (
     <ErrorBoundary component="SingleStateMap">
 		{stateToShow &&
-			<svg viewBox={`0 0 ${WIDTH} ${HEIGHT}`} preserveAspectRatio="xMinYMin" className="svg-container">
+			<svg 
+        viewBox={`0 0 ${WIDTH} ${HEIGHT}`} 
+        preserveAspectRatio="xMinYMin" 
+        className="svg-container" 
+        role="img"
+        aria-label={handleMapAriaLabels(state)}
+      >
 				<rect className="background center-container ocean" width={WIDTH} height={HEIGHT} fillOpacity={1} fill="white"></rect>
 				<CustomProjection 
 					data={ [{states: stateToShow, counties: countiesToShow }] } 

package/src/components/UsaMap.js

@@ -9,6 +9,8 @@ import hexTopoJSON from '../data/us-hex-topo.json';
 import { AlbersUsa, Mercator } from '@visx/geo';
 import chroma from 'chroma-js';
 import CityList from './CityList';
+import BubbleList from './BubbleList';
+import { supportedCities, supportedStates } from '../data/supported-geos';
 
 const { features: unitedStates } = feature(topoJSON, topoJSON.objects.states)
 const { features: unitedStatesHex } = feature(hexTopoJSON, hexTopoJSON.objects.states)
@@ -68,9 +70,32 @@ const UsaMap = (props) => {
     displayGeoName,
     supportedTerritories,
     rebuildTooltips,
-    titleCase
+    titleCase,
+    handleCircleClick,
+    setSharedFilterValue,
+    handleMapAriaLabels
   } = props;
 
+  let isFilterValueSupported = false;
+
+  if(setSharedFilterValue){
+    Object.keys(supportedStates).forEach(supportedState => {
+      if(supportedStates[supportedState].indexOf(setSharedFilterValue.toUpperCase()) !== -1){
+        isFilterValueSupported = true;
+      }
+    });
+    Object.keys(supportedTerritories).forEach(supportedTerritory => {
+      if(supportedTerritories[supportedTerritory].indexOf(setSharedFilterValue.toUpperCase()) !== -1){
+        isFilterValueSupported = true;
+      }
+    });
+    Object.keys(supportedCities).forEach(supportedCity => {
+      if(supportedCity === setSharedFilterValue.toUpperCase()){
+        isFilterValueSupported = true;
+      }
+    });
+  }
+
   // "Choose State" options
   const [extent, setExtent] = useState(null)
   const [focusedStates, setFocusedStates] = useState(unitedStates)
@@ -123,7 +148,7 @@ const UsaMap = (props) => {
 
     if (legendColors) {
       // Use white text if the background is dark, and dark grey if it's light
-      if (chroma.contrast(textColor, legendColors[0]) < 4.5) {
+      if (chroma.contrast(textColor, legendColors[0]) < 3.5) {
         textColor = '#202020';
       }
 
@@ -137,6 +162,8 @@ const UsaMap = (props) => {
       styles = {
         color: textColor,
         fill: legendColors[0],
+        opacity: setSharedFilterValue && isFilterValueSupported && setSharedFilterValue !== territoryData[state.columns.geo.name] ? .5 : 1,
+        stroke: setSharedFilterValue && isFilterValueSupported && setSharedFilterValue === territoryData[state.columns.geo.name] ? 'rgba(0, 0, 0, 1)' : geoStrokeColor,
         cursor: needsPointer ? 'pointer' : 'default',
         '&:hover': {
           fill: legendColors[1],
@@ -153,7 +180,6 @@ const UsaMap = (props) => {
         text={styles.color}
         data-tip={toolTip}
         data-for="tooltip"
-        stroke={geoStrokeColor}
         strokeWidth={1.5}
         onClick={() => geoClickHandler(territory, territoryData)}
       />)
@@ -169,7 +195,7 @@ const UsaMap = (props) => {
       let textColor = "#FFF"
 
       // Dynamic text color
-      if (chroma.contrast(textColor, bgColor) < 4.5 ) {
+      if (chroma.contrast(textColor, bgColor) < 3.5 ) {
         textColor = '#202020';
       }
 
@@ -206,6 +232,25 @@ const UsaMap = (props) => {
   const constructGeoJsx = (geographies, projection) => {
     let showLabel = state.general.displayStateLabels
 
+    // Order alphabetically. Important for accessibility if ever read out loud.
+    geographies.map ( state => {
+      if(!state.feature.properties.iso) return;
+      state.feature.properties.name = titleCase(supportedStates[state.feature.properties.iso][0])
+    })
+
+    geographies.sort( (a,b) => {
+      const first = a.feature.properties.name.toUpperCase(); // ignore upper and lowercase
+      const second = b.feature.properties.name.toUpperCase(); // ignore upper and lowercase
+      if (first < second) {
+        return -1;
+      }
+      if (first > second) {
+        return 1;
+      }
+
+      // names must be equal
+      return 0;
+    })
     const geosJsx = geographies.map(( {feature: geo, path = ''}) => {
       const key = isHex ? geo.properties.iso + '-hex-group' : geo.properties.iso + '-group'
 
@@ -216,11 +261,9 @@ const UsaMap = (props) => {
 
       // Map the name from the geo data with the appropriate key for the processed data
       let geoKey = geo.properties.iso;
+      let geoName = geo.properties.name;
 
       // Manually add Washington D.C. in for Hex maps
-      if(isHex && geoKey === 'US-DC') {
-        geoKey = 'District of Columbia'
-      }
 
       if(!geoKey) return
 
@@ -240,13 +283,15 @@ const UsaMap = (props) => {
         const tooltip = applyTooltipsToGeo(geoDisplayName, geoData);
 
         styles = {
-          fill: legendColors[0],
+          fill: state.general.type !== 'bubble' ? legendColors[0] : '#E6E6E6',
+          opacity: setSharedFilterValue && isFilterValueSupported && setSharedFilterValue !== geoData[state.columns.geo.name] ? .5 : 1,
+          stroke: setSharedFilterValue && isFilterValueSupported && setSharedFilterValue === geoData[state.columns.geo.name] ? 'rgba(0, 0, 0, 1)' : geoStrokeColor,
           cursor: 'default',
           '&:hover': {
-            fill: legendColors[1],
+            fill: state.general.type !== 'bubble' ? legendColors[1] : '#e6e6e6',
           },
           '&:active': {
-            fill: legendColors[2],
+            fill: state.general.type !== 'bubble' ? legendColors[2] : '#e6e6e6',
           },
         };
 
@@ -254,43 +299,43 @@ const UsaMap = (props) => {
         if ((state.columns.navigate && geoData[state.columns.navigate.name]) || state.tooltips.appearanceType === 'click') {
           styles.cursor = 'pointer'
         }
-
         return (
+          <g data-name={geoName} key={key}>
+            <g
+              data-for="tooltip"
+              data-tip={tooltip}
+              className="geo-group"
+              css={styles}
+              onClick={() => geoClickHandler(geoDisplayName, geoData)}
+            >
+              <path
+                tabIndex={-1}
+                className='single-geo'
+                strokeWidth={1.3}   
+                d={path}
+              />
+              {(isHex || showLabel) && geoLabel(geo, legendColors[0], projection)}
+            </g>
+          </g>
+        )
+      }
+
+      // Default return state, just geo with no additional information
+      return (
+        <g data-name={geoName} key={key}>
           <g
-            data-for="tooltip"
-            data-tip={tooltip}
-            key={key}         
             className="geo-group"
             css={styles}
-            onClick={() => geoClickHandler(geoDisplayName, geoData)}
           >
             <path
               tabIndex={-1}
               className='single-geo'
               stroke={geoStrokeColor}
-              strokeWidth={1.3}   
+              strokeWidth={1.3}
               d={path}
             />
-            {(isHex || showLabel) && geoLabel(geo, legendColors[0], projection)}
+            {(isHex || showLabel) && geoLabel(geo, styles.fill, projection)}
           </g>
-        )
-      }
-
-      // Default return state, just geo with no additional information
-      return (
-        <g
-        key={key}
-          className="geo-group"
-          css={styles}
-        >
-          <path
-            tabIndex={-1}
-            className='single-geo'
-            stroke={geoStrokeColor}
-            strokeWidth={1.3}
-            d={path}
-          />
-          {(isHex || showLabel) && geoLabel(geo, styles.fill, projection)}
         </g>
       )
     });
@@ -308,14 +353,36 @@ const UsaMap = (props) => {
       displayGeoName={displayGeoName}
       applyLegendToRow={applyLegendToRow}
       titleCase={titleCase}
+      setSharedFilterValue={setSharedFilterValue}
+      isFilterValueSupported={isFilterValueSupported}
     />)
 
+    // Bubbles
+    if (state.general.type === 'bubble') {
+      geosJsx.push(
+        <BubbleList
+          key="bubbles"
+          data={state.data}
+          runtimeData={data}
+          state={state}
+          projection={projection}
+          applyLegendToRow={applyLegendToRow}
+          applyTooltipsToGeo={applyTooltipsToGeo}
+          displayGeoName={displayGeoName}
+        />
+      )
+    }
+
     return geosJsx;
   };
   
   return (
     <ErrorBoundary component="UsaMap">
-      <svg viewBox="0 0 880 500">
+      <svg 
+        viewBox="0 0 880 500" 
+        role="img" 
+        aria-label={handleMapAriaLabels(state)}
+      >
         {state.general.displayAsHex ?
             (<Mercator data={unitedStatesHex} scale={650} translate={[1600, 775]}>
               {({ features, projection }) => constructGeoJsx(features, projection)}