@cdc/map 2.6.3 → 4.22.10-alpha.1

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,37 @@ const UsaMap = (props) => {
       displayGeoName={displayGeoName}
       applyLegendToRow={applyLegendToRow}
       titleCase={titleCase}
+      setSharedFilterValue={setSharedFilterValue}
+      isFilterValueSupported={isFilterValueSupported}
+      isGeoCodeMap={state.general.type === 'us-geocode'}
     />)
 
+    // 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)}

package/src/components/UsaRegionMap.js

@@ -0,0 +1,320 @@
+import React, { useState, useEffect, memo } from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary';
+import { geoCentroid } from "d3-geo";
+import { feature } from "topojson-client";
+import topoJSON from '../data/us-regions-topo-2.json';
+import { Mercator } from '@visx/geo';
+import chroma from 'chroma-js';
+
+const { features: unitedStates } = feature(topoJSON, topoJSON.objects.regions)
+
+const Rect = ({label, text, stroke, strokeWidth, ...props}) => {
+  return (
+    <svg viewBox="0 0 45 28">
+      <g {...props} strokeLinejoin="round">
+        <path stroke={stroke} strokeWidth={strokeWidth} d="M40,0.5 C41.2426407,0.5 42.3676407,1.00367966 43.1819805,1.81801948 C43.9963203,2.63235931 44.5,3.75735931 44.5,5 L44.5,5 L44.5,23 C44.5,24.2426407 43.9963203,25.3676407 43.1819805,26.1819805 C42.3676407,26.9963203 41.2426407,27.5 40,27.5 L40,27.5 L5,27.5 C3.75735931,27.5 2.63235931,26.9963203 1.81801948,26.1819805 C1.00367966,25.3676407 0.5,24.2426407 0.5,23 L0.5,23 L0.5,5 C0.5,3.75735931 1.00367966,2.63235931 1.81801948,1.81801948 C2.63235931,1.00367966 3.75735931,0.5 5,0.5 L5,0.5 Z" />
+        <text textAnchor="middle" dominantBaseline="middle" x="50%" y="54%" fill={text}>{label}</text>
+      </g>
+    </svg>
+  )
+}
+
+const UsaRegionMap = (props) => {
+  const {
+    state,
+    applyTooltipsToGeo,
+    data,
+    geoClickHandler,
+    applyLegendToRow,
+    displayGeoName,
+    supportedTerritories,
+    rebuildTooltips,
+    titleCase,
+    handleCircleClick,
+    handleMapAriaLabels
+  } = props;
+
+  // "Choose State" options
+  const [extent, setExtent] = useState(null)
+  const [focusedStates, setFocusedStates] = useState(unitedStates)
+  const [translate, setTranslate] = useState([455,200])
+
+  // When returning from another map we want to reset the state
+  useEffect(() => {
+    setTranslate( [455,250] )
+    setExtent( null )
+  }, [state.general.geoType]);
+
+  const isHex = state.general.displayAsHex
+
+  const [territoriesData, setTerritoriesData] = useState([]);
+
+  const territoriesKeys = Object.keys(supportedTerritories); // data will have already mapped abbreviated territories to their full names
+
+  useEffect(() => {
+    // Territories need to show up if they're in the data at all, not just if they're "active". That's why this is different from Cities
+    const territoriesList = territoriesKeys.filter(key => data[key]);
+
+    setTerritoriesData(territoriesList);
+  }, [data]);
+
+  useEffect(() => rebuildTooltips());
+
+  const geoStrokeColor = state.general.geoBorderColor === 'darkGray' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255,255,255,0.7)'
+
+  const territories = territoriesData.map(territory => {
+    const Shape = Rect
+
+    const territoryData = data[territory];
+
+    let toolTip;
+
+    let styles = {
+      fill: '#E6E6E6',
+      color: '#202020',
+    };
+
+    const label = supportedTerritories[territory][1]
+
+    if(!territoryData) return <Shape key={label} label={label} css={styles} text={styles.color} />
+
+    toolTip = applyTooltipsToGeo(displayGeoName(territory), territoryData);
+
+    const legendColors = applyLegendToRow(territoryData);
+
+    let textColor = '#FFF';
+
+    if (legendColors) {
+      // Use white text if the background is dark, and dark grey if it's light
+      if (chroma.contrast(textColor, legendColors[0]) < 3.5) {
+        textColor = '#202020';
+      }
+
+      let needsPointer = false;
+
+      // If we need to add a pointer cursor
+      if ((state.columns.navigate && territoryData[state.columns.navigate.name]) || state.tooltips.appearanceType === 'click') {
+        needsPointer = true;
+      }
+
+      styles = {
+        color: textColor,
+        fill: legendColors[0],
+        cursor: needsPointer ? 'pointer' : 'default',
+        '&:hover': {
+          fill: legendColors[1],
+        },
+        '&:active': {
+          fill: legendColors[2],
+        }
+      };
+
+      return (<Shape
+        key={label}
+        label={label}
+        css={styles}
+        text={styles.color}
+        data-tip={toolTip}
+        data-for="tooltip"
+        stroke={geoStrokeColor}
+        strokeWidth={1.5}
+        onClick={() => geoClickHandler(territory, territoryData)}
+      />)
+    }
+  });
+
+  const geoLabel = (geo, bgColor = "#FFFFFF", projection) => {
+      let centroid = projection(geoCentroid(geo))
+      let abbr = geo.properties.iso
+
+      if(undefined === abbr) return null
+
+      let textColor = "#FFF"
+
+      // Dynamic text color
+      if (chroma.contrast(textColor, bgColor) < 3.5 ) {
+        textColor = '#202020';
+      }
+
+      let x = 0, y = 5
+
+
+      return (
+        <g>
+          <line x1={centroid[0]} y1={centroid[1]} x2={centroid[0] + dx} y2={centroid[1] + dy} stroke="rgba(0,0,0,.5)" strokeWidth={1} />
+          <text x={4} strokeWidth="0" fontSize={13} style={{fill: "#202020"}} alignmentBaseline="middle" transform={`translate(${centroid[0] + dx}, ${centroid[1] + dy})`}>
+            {abbr.substring(3)}
+          </text>
+        </g>
+      )
+  }
+
+  // Constructs and displays markup for all geos on the map (except territories right now)
+  const constructGeoJsx = (geographies, projection) => {
+    let showLabel = state.general.displayStateLabels
+
+    const geosJsx = geographies.map(( {feature: geo, path = '', index}) => {
+      const key = isHex ? geo.properties.iso + '-hex-group' : geo.properties.iso + '-group'
+
+      let styles = {
+        fill: '#E6E6E6',
+        cursor: 'default'
+      }
+
+      // Map the name from the geo data with the appropriate key for the processed data
+      let geoKey = geo.properties.iso;
+
+      // Manually add Washington D.C. in for Hex maps
+
+      if(!geoKey) return
+
+      const geoData = data[geoKey];
+
+      let legendColors;
+      // Once we receive data for this geographic item, setup variables.
+      if (geoData !== undefined) {
+        legendColors = applyLegendToRow(geoData);
+      }
+
+      const geoDisplayName = displayGeoName(geoKey);
+
+      // If a legend applies, return it with appropriate information.
+      if (legendColors && legendColors[0] !== '#000000') {
+        const tooltip = applyTooltipsToGeo(geoDisplayName, geoData);
+
+        styles = {
+          fill: state.general.type !== 'bubble' ? legendColors[0] : '#E6E6E6',
+          cursor: 'default',
+          '&:hover': {
+            fill: state.general.type !== 'bubble' ? legendColors[1] : '#e6e6e6',
+          },
+          '&:active': {
+            fill: state.general.type !== 'bubble' ? legendColors[2] : '#e6e6e6',
+          },
+        };
+
+        // When to add pointer cursor
+        if ((state.columns.navigate && geoData[state.columns.navigate.name]) || state.tooltips.appearanceType === 'click') {
+          styles.cursor = 'pointer'
+        }
+
+        const TerratoryRect = (props) => {
+          const { posX = 0, tName } = props
+          let textColor = "#fff"
+
+          if (chroma.contrast(textColor, legendColors[0]) < 4.5) {
+            textColor = '#202020';
+          }
+          return (
+            <>
+              <rect x={posX} width="36" height="24" rx="6" stroke="#fff" strokeWidth="1" />
+              <text x={posX + 8} y="17" fill={textColor}>{tName}</text>
+            </>
+          )
+        }
+
+        const circleRadius = 15;
+
+        // SIDE CHART EXPERIMENT
+        // const height = state.data[index].Change;
+        // const barHeight = Math.abs(height * 20 );
+        // const barPositive = height > 0;
+        // const barY = barPositive ? -barHeight + 15 : 15;
+        // const baseY = 14;
+        // const barFill = barPositive ? "#fff" : "#fff";
+
+        return (
+          <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}   
+              d={path}
+            />
+            <g id={`region-${index+1}-label`}>
+              <circle fill="#fff" stroke="#999" cx={circleRadius} cy={circleRadius} r={circleRadius}/>
+              <text fill="#333" x="15px" y="20px" textAnchor="middle">{index+1}</text>
+              {/* SIDE CHART EXPERIMENT */}
+              {/*<g y={barY*20}>*/}
+              {/*  <rect x="-20" y={barY} width="10" height={barHeight} fill={barFill} stroke="#333"/>*/}
+              {/*  <rect x="-23" y={baseY} width="16" height="2" fill="#000" />*/}
+              {/*</g>*/}
+              {/* / SIDE CHART EXPERIMENT */}
+            </g>
+            {geoKey === 'region 2' &&
+              <g id="region-2-territories">
+                <TerratoryRect tName="PR" />
+                <TerratoryRect posX={45} tName="VI" />
+              </g>
+            }
+
+            { geoKey === 'region 9' &&
+              <g id="region-9-territories">
+                <g className="region-9-row1">
+                  <TerratoryRect tName="AS" />
+                  <TerratoryRect posX={45} tName="GU" />
+                  <TerratoryRect posX={90} tName="MP" />
+                </g>
+                <g className="region-9-row2">
+                  <TerratoryRect tName="FM" />
+                  <TerratoryRect posX={45} tName="PW" />
+                  <TerratoryRect posX={90} tName="MH" />
+                </g>
+              </g>
+            }
+          </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>
+      )
+    });
+    return geosJsx;
+  };
+  
+  return (
+    <ErrorBoundary component="UsaRegionMap">
+      <svg viewBox="0 0 880 500" role="img" aria-label={handleMapAriaLabels(state)}>
+
+        <Mercator data={focusedStates} scale={620} translate={[1500, 735]}>
+          {({ features, projection }) => constructGeoJsx(features, projection)}
+        </Mercator>
+
+      </svg>
+      {territories.length > 0 && (
+        <section className="territories">
+          <span className="label">{state.general.territoriesLabel}</span>
+          {territories}
+        </section>
+      )}
+    </ErrorBoundary>
+  );
+};
+
+export default memo(UsaRegionMap)