@cdc/map 2.6.3 → 9.22.9

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)

package/src/components/WorldMap.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, memo } from 'react';
+import React, {  useEffect, memo } from 'react';
 /** @jsx jsx */
 import { jsx } from '@emotion/react'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary';
@@ -9,11 +9,44 @@ import topoJSON from '../data/world-topo.json';
 import ZoomableGroup from './ZoomableGroup';
 import Geo from './Geo'
 import CityList from './CityList';
+import BubbleList from './BubbleList';
 
 const { features: world } = feature(topoJSON, topoJSON.objects.countries)
 
 let projection = geoMercator()
 
+const WorldMap = (props) => {
+  const {
+    state,
+    applyTooltipsToGeo,
+    data,
+    geoClickHandler,
+    applyLegendToRow,
+    displayGeoName,
+    supportedCountries,
+    rebuildTooltips,
+    setState,
+    setRuntimeData,
+    generateRuntimeData,
+    setFilteredCountryCode,
+    position,
+    setPosition,
+    hasZoom,
+    handleMapAriaLabels
+  } = props;
+
+// TODO Refactor - state should be set together here to avoid rerenders
+// Resets to original data & zooms out
+const handleReset = (state, setState, setRuntimeData, generateRuntimeData) => {
+  let reRun = generateRuntimeData(state)
+  setRuntimeData(reRun)
+  setState({
+    ...state,
+    focusedCountry: false,
+    mapPosition: { coordinates: [0, 30], zoom: 1 }
+  })
+  setFilteredCountryCode('')
+}
 const handleZoomIn = (position, setPosition) => {
   if (position.zoom >= 4) return;
   setPosition((pos) => ({ ...pos, zoom: pos.zoom * 1.5 }));
@@ -24,9 +57,9 @@ const handleZoomOut = (position, setPosition) => {
   setPosition((pos) => ({ ...pos, zoom: pos.zoom / 1.5 }));
 };
 
-const ZoomControls = ({position, setPosition}) => (
+const ZoomControls = ({position, setPosition, state, setState, setRuntimeData, generateRuntimeData}) => (
   <div className="zoom-controls" data-html2canvas-ignore>
-    <button onClick={() => handleZoomIn(position, setPosition)}>
+    <button onClick={() => handleZoomIn(position, setPosition)} aria-label="Zoom In">
       <svg
         viewBox="0 0 24 24"
         stroke="currentColor"
@@ -36,7 +69,7 @@ const ZoomControls = ({position, setPosition}) => (
         <line x1="5" y1="12" x2="19" y2="12" />
       </svg>
     </button>
-    <button onClick={() => handleZoomOut(position, setPosition)}>
+    <button onClick={() => handleZoomOut(position, setPosition)} aria-label="Zoom Out">
       <svg
         viewBox="0 0 24 24"
         stroke="currentColor"
@@ -45,22 +78,20 @@ const ZoomControls = ({position, setPosition}) => (
         <line x1="5" y1="12" x2="19" y2="12" />
       </svg>
     </button>
+    {state.general.type === 'bubble' &&
+      <button onClick={() => handleReset(state, setState, setRuntimeData, generateRuntimeData)} className="reset" aria-label="Reset Zoom and Map Filters">
+          Reset Filters
+      </button>
+    }
   </div>
 );
 
-const WorldMap = (props) => {
-  const {
-    state,
-    applyTooltipsToGeo,
-    data,
-    geoClickHandler,
-    applyLegendToRow,
-    displayGeoName,
-    supportedCountries,
-    rebuildTooltips
-  } = props;
-
-  const [position, setPosition] = useState({ coordinates: [0, 30], zoom: 1 });
+  // TODO Refactor - state should be set together here to avoid rerenders
+  const handleCircleClick = (country, state, setState, setRuntimeData, generateRuntimeData) => {
+    if(!state.general.allowMapZoom) return;
+    let newRuntimeData = state.data.filter(item => item[state.columns.geo.name] === country[state.columns.geo.name])
+    setFilteredCountryCode(newRuntimeData[0].uid)
+  }
 
   useEffect(() => rebuildTooltips());
 
@@ -95,7 +126,7 @@ const WorldMap = (props) => {
       const strokeWidth = .9
 
       // If a legend applies, return it with appropriate information.
-      if (legendColors && legendColors[0] !== '#000000') {
+      if (legendColors && legendColors[0] !== '#000000' && state.general.type !== 'bubble') {
         const tooltip = applyTooltipsToGeo(geoDisplayName, geoData);
 
           styles = {
@@ -145,29 +176,80 @@ const WorldMap = (props) => {
       applyLegendToRow={applyLegendToRow}
     />)
 
+    // 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}
+          handleCircleClick={(country) => handleCircleClick(country, state, setState, setRuntimeData, generateRuntimeData) }
+        />
+      )
+    }
+
     return geosJsx;
   };
 
   return (
     <ErrorBoundary component="WorldMap">
-      <svg viewBox="0 0 880 500">
-        <ZoomableGroup
-          zoom={position.zoom}
-          center={position.coordinates}
-          onMoveEnd={handleMoveEnd}
-          maxZoom={4}
-          projection={projection}
-          width={880}
-          height={500}
+      {hasZoom ? (
+        <svg 
+          viewBox="0 0 880 500"
+          role="img"
+          aria-label={handleMapAriaLabels(state)}
         >
-          <Mercator
-            data={world}
+          <rect height={500} width={880} onClick={() => handleReset(state, setState, setRuntimeData, generateRuntimeData)} fill="white"/>
+          <ZoomableGroup
+            zoom={position.zoom}
+            center={position.coordinates}
+            onMoveEnd={handleMoveEnd}
+            maxZoom={4}
+            projection={projection}
+            width={880}
+            height={500}
           >
-            {({features}) => constructGeoJsx(features)}
-          </Mercator>
-        </ZoomableGroup>
-      </svg>
-      {state.general.type === 'data' && <ZoomControls position={position} setPosition={setPosition} />}
+            <Mercator
+              data={world}
+            >
+              {({ features }) => constructGeoJsx(features)}
+            </Mercator>
+          </ZoomableGroup>
+        </svg>
+      ) :
+        <svg viewBox="0 0 880 500">
+          <ZoomableGroup
+            zoom={1}
+            center={position.coordinates}
+            onMoveEnd={handleMoveEnd}
+            maxZoom={0}
+            projection={projection}
+            width={880}
+            height={500}
+          >
+            <Mercator
+              data={world}
+            >
+              {({ features }) => constructGeoJsx(features)}
+            </Mercator>
+          </ZoomableGroup>
+        </svg>
+      }
+      {(state.general.type === 'data' || state.general.type === 'bubble' && hasZoom) &&
+        <ZoomControls
+          position={position}
+          setPosition={setPosition}
+          setRuntimeData={setRuntimeData}
+          state={state}
+          setState={setState}
+          generateRuntimeData={generateRuntimeData} />
+      }
+
     </ErrorBoundary>
   );
 };