@cdc/map 4.24.7 → 4.24.9

package/src/components/UsaMap/components/SingleState/SingleState.CountyOutput.tsx

@@ -0,0 +1,74 @@
+import React, { useContext } from 'react'
+import ConfigContext from '../../../../context'
+import { MapContext } from '../../../../types/MapContext'
+
+interface CountyOutputProps {
+  counties: any[]
+  scale: number
+  geoStrokeColor: string
+  tooltipId: string
+  path: any
+}
+
+const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoStrokeColor, tooltipId }) => {
+  const { applyTooltipsToGeo, applyLegendToRow, displayGeoName, state, data, geoClickHandler } = useContext<MapContext>(ConfigContext)
+  return (
+    <>
+      {counties.map(county => {
+        // Map the name from the geo data with the appropriate key for the processed data
+        const geoKey = county.id
+
+        if (!geoKey) return null
+
+        const countyPath = path(county)
+
+        const geoData = data[county.id]
+        let legendColors
+
+        // Once we receive data for this geographic item, setup variables.
+        if (geoData !== undefined) {
+          legendColors = applyLegendToRow(geoData)
+        }
+
+        const geoDisplayName = displayGeoName(geoKey)
+
+        // For some reason, these two geos are breaking the display.
+        if (geoDisplayName === 'Franklin City' || geoDisplayName === 'Waynesboro') return null
+
+        const toolTip = applyTooltipsToGeo(geoDisplayName, geoData)
+
+        if (legendColors && legendColors[0] !== '#000000') {
+          const styles = {
+            fill: legendColors[0],
+            cursor: 'default',
+            '&:hover': {
+              fill: legendColors[1]
+            },
+            '&:active': {
+              fill: legendColors[2]
+            }
+          }
+
+          // When to add pointer cursor
+          if ((state.columns.navigate && geoData[state.columns.navigate.name]) || state.tooltips.appearanceType === 'hover') {
+            styles.cursor = 'pointer'
+          }
+
+          return (
+            <g key={`key--${county.id}`} className={`county county--${geoDisplayName.split(' ').join('')} county--${geoData[state.columns.geo.name]}`} style={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} data-tooltip-id={`tooltip__${tooltipId}`} data-tooltip-html={toolTip}>
+              <path tabIndex={-1} className={`county`} stroke={geoStrokeColor} d={countyPath} strokeWidth={0.75 / scale} />
+            </g>
+          )
+        } else {
+          return (
+            <g key={`key--${county.id}`} className={`county county--${geoDisplayName.split(' ').join('')}`} style={{ fill: '#e6e6e6' }} data-tooltip-id={`tooltip__${tooltipId}`} data-tooltip-html={toolTip}>
+              <path tabIndex={-1} className={`county`} stroke={geoStrokeColor} d={countyPath} strokeWidth={0.75 / scale} />
+            </g>
+          )
+        }
+      })}
+    </>
+  )
+}
+
+export default CountyOutput

package/src/components/UsaMap/components/SingleState/SingleState.StateOutput.tsx

@@ -0,0 +1,29 @@
+import { useContext } from 'react'
+import { mesh, Topology } from 'topojson-client'
+import ConfigContext from '../../../../context'
+
+type StateOutputProps = {
+  topoData: Topology
+  path: any
+  scale: any
+}
+
+const StateOutput: React.FC<StateOutputProps> = ({ topoData, path, scale, stateToShow }: StateOutputProps) => {
+  const { state } = useContext(ConfigContext)
+  if (!topoData?.objects?.states) return null
+  let geo = topoData.objects.states.geometries.filter(s => {
+    return s.properties.name === state.general.statePicked.stateName
+  })
+
+  const geoStrokeColor = state.general.geoBorderColor === 'darkGray' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255,255,255,0.7)'
+
+  let stateLines = path(mesh(topoData, geo[0]))
+
+  return (
+    <g key={'single-state'} className='single-state' style={{ fill: '#E6E6E6' }} stroke={geoStrokeColor} strokeWidth={0.95 / scale}>
+      <path tabIndex={-1} className='state-path' d={stateLines} />
+    </g>
+  )
+}
+
+export default StateOutput

package/src/components/UsaMap/components/SingleState/index.tsx

@@ -0,0 +1,9 @@
+import CountyOutput from './SingleState.CountyOutput'
+import StateOutput from './SingleState.StateOutput'
+
+const SingleState = {
+  StateOutput,
+  CountyOutput
+}
+
+export default SingleState

package/src/components/UsaMap/components/UsaMap.County.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState, useRef, useContext } from 'react'
+import * as d3 from 'd3-geo'
 
 import { geoCentroid, geoPath, geoContains } from 'd3-geo'
 import { feature } from 'topojson-client'
@@ -131,7 +132,8 @@ const CountyMap = props => {
       runtimeFilters,
       tooltipId,
       tooltipRef,
-      container
+      container,
+      setState
   } = useContext(ConfigContext)
 
   // CREATE STATE LINES
@@ -204,6 +206,10 @@ const CountyMap = props => {
   const lineWidth = 0.3
 
   const onReset = () => {
+    setState({
+      ...state,
+      mapPosition: { coordinates: [0, 30], zoom: 1 }
+    })
     setFocus({})
   }
 
@@ -225,10 +231,19 @@ const CountyMap = props => {
 
     // If the user clicked outside of all states, no behavior
     if (clickedState) {
+      setState({
+        ...state,
+        mapPosition: { coordinates: [0, 30], zoom: 3 }
+      })
+
       // If a county within the state was also clicked and has data, call parent click handler
       if (topoData.countyIndecies[clickedState.id]) {
         let county
-        for (let i = topoData.countyIndecies[clickedState.id][0]; i <= topoData.countyIndecies[clickedState.id][1]; i++) {
+        for (
+          let i = topoData.countyIndecies[clickedState.id][0];
+          i <= topoData.countyIndecies[clickedState.id][1];
+          i++
+        ) {
           if (geoContains(topoData.mapData[i], pointCoordinates)) {
             county = topoData.mapData[i]
             break
@@ -239,23 +254,26 @@ const CountyMap = props => {
         }
       }
 
-      let focusIndex = -1;
-      for(let i = 0; i < topoData.mapData.length; i++){
-        if(topoData.mapData[i].id === clickedState.id){
-          focusIndex = i;
-          break;
+      let focusIndex = -1
+      for (let i = 0; i < topoData.mapData.length; i++) {
+        if (topoData.mapData[i].id === clickedState.id) {
+          focusIndex = i
+          break
         }
       }
 
       // Redraw with focus on state
-      setFocus({ id: clickedState.id, index: focusIndex, center: geoCentroid(clickedState) })
+      setFocus({ id: clickedState.id, index: focusIndex, center: geoCentroid(clickedState), feature: clickedState })
     }
 
     if (state.general.type === 'us-geocode') {
       const geoRadius = (state.visual.geoCodeCircleSize || 5) * (focus.id ? 2 : 1)
       let clickedGeo
       for (let i = 0; i < runtimeKeys.length; i++) {
-        const pixelCoords = topoData.projection([data[runtimeKeys[i]][state.columns.longitude.name], data[runtimeKeys[i]][state.columns.latitude.name]])
+        const pixelCoords = topoData.projection([
+          data[runtimeKeys[i]][state.columns.longitude.name],
+          data[runtimeKeys[i]][state.columns.latitude.name]
+        ])
         if (pixelCoords && Math.sqrt(Math.pow(pixelCoords[0] - x, 2) + Math.pow(pixelCoords[1] - y, 2)) < geoRadius) {
           clickedGeo = data[runtimeKeys[i]]
           break
@@ -269,7 +287,12 @@ const CountyMap = props => {
   }
 
   const canvasHover = e => {
-    if (!tooltipRef.current || state.tooltips.appearanceType !== 'hover' || window.matchMedia('(any-hover: none)').matches) return
+    if (
+      !tooltipRef.current ||
+      state.tooltips.appearanceType !== 'hover' ||
+      window.matchMedia('(any-hover: none)').matches
+    )
+      return
 
     const canvas = e.target
     const canvasBounds = canvas.getBoundingClientRect()
@@ -281,7 +304,7 @@ const CountyMap = props => {
     let pointCoordinates = topoData.projection.invert([x, y])
 
     const currentTooltipIndex = parseInt(tooltipRef.current.getAttribute('data-index'))
-    const geoRadius = (state.visual.geoCodeCircleSize || 5) * (focus.id ? 2 : 1)
+    const geoRadius = (state.visual.geoCodeCircleSize || 5) * 1
 
     const context = canvas.getContext('2d')
     const path = geoPath(topoData.projection, context)
@@ -337,13 +360,13 @@ const CountyMap = props => {
 
           tooltipRef.current.style.display = 'block'
           tooltipRef.current.style.top = tooltipY + 'px'
-        if(tooltipX > containerBounds.width / 2) {
-          tooltipRef.current.style.transform = 'translate(-100%, -50%)'
-          tooltipRef.current.style.left = (tooltipX - 5) + 'px'
-        } else {
-          tooltipRef.current.style.transform = 'translate(0, -50%)'
-          tooltipRef.current.style.left = (tooltipX + 5) + 'px'
-        }
+          if (tooltipX > containerBounds.width / 2) {
+            tooltipRef.current.style.transform = 'translate(-100%, -50%)'
+            tooltipRef.current.style.left = tooltipX - 5 + 'px'
+          } else {
+            tooltipRef.current.style.transform = 'translate(0, -50%)'
+            tooltipRef.current.style.left = tooltipX + 5 + 'px'
+          }
           tooltipRef.current.innerHTML = applyTooltipsToGeo(displayGeoName(county.id), data[county.id])
           tooltipRef.current.setAttribute('data-index', countyIndex)
         } else {
@@ -354,7 +377,10 @@ const CountyMap = props => {
     } else {
       // Handle geo map hover
       if (!isNaN(currentTooltipIndex)) {
-        const pixelCoords = topoData.projection([data[runtimeKeys[currentTooltipIndex]][state.columns.longitude.name], data[runtimeKeys[currentTooltipIndex]][state.columns.latitude.name]])
+        const pixelCoords = topoData.projection([
+          data[runtimeKeys[currentTooltipIndex]][state.columns.longitude.name],
+          data[runtimeKeys[currentTooltipIndex]][state.columns.latitude.name]
+        ])
         if (pixelCoords && Math.sqrt(Math.pow(pixelCoords[0] - x, 2) + Math.pow(pixelCoords[1] - y, 2)) < geoRadius) {
           // Who knew pythagorean theorum was useful
           return // The user is still hovering over the previous geo point, don't redraw tooltip
@@ -367,8 +393,16 @@ const CountyMap = props => {
       let hoveredGeo
       let hoveredGeoIndex
       for (let i = 0; i < runtimeKeys.length; i++) {
-        const pixelCoords = topoData.projection([data[runtimeKeys[i]][state.columns.longitude.name], data[runtimeKeys[i]][state.columns.latitude.name]])
-        if (state.visual.cityStyle === 'circle' && pixelCoords && Math.sqrt(Math.pow(pixelCoords[0] - x, 2) + Math.pow(pixelCoords[1] - y, 2)) < geoRadius && applyLegendToRow(data[runtimeKeys[i]])) {
+        const pixelCoords = topoData.projection([
+          data[runtimeKeys[i]][state.columns.longitude.name],
+          data[runtimeKeys[i]][state.columns.latitude.name]
+        ])
+        if (
+          state.visual.cityStyle === 'circle' &&
+          pixelCoords &&
+          Math.sqrt(Math.pow(pixelCoords[0] - x, 2) + Math.pow(pixelCoords[1] - y, 2)) < geoRadius &&
+          applyLegendToRow(data[runtimeKeys[i]])
+        ) {
           hoveredGeo = data[runtimeKeys[i]]
           hoveredGeoIndex = i
           break
@@ -387,14 +421,17 @@ const CountyMap = props => {
       if (hoveredGeo) {
         tooltipRef.current.style.display = 'block'
         tooltipRef.current.style.top = tooltipY + 'px'
-        if(tooltipX > containerBounds.width / 2) {
+        if (tooltipX > containerBounds.width / 2) {
           tooltipRef.current.style.transform = 'translate(-100%, -50%)'
-          tooltipRef.current.style.left = (tooltipX - 5) + 'px'
+          tooltipRef.current.style.left = tooltipX - 5 + 'px'
         } else {
           tooltipRef.current.style.transform = 'translate(0, -50%)'
-          tooltipRef.current.style.left = (tooltipX + 5) + 'px'
+          tooltipRef.current.style.left = tooltipX + 5 + 'px'
         }
-        tooltipRef.current.innerHTML = applyTooltipsToGeo(displayGeoName(hoveredGeo[state.columns.geo.name]), hoveredGeo)
+        tooltipRef.current.innerHTML = applyTooltipsToGeo(
+          displayGeoName(hoveredGeo[state.columns.geo.name]),
+          hoveredGeo
+        )
         tooltipRef.current.setAttribute('data-index', hoveredGeoIndex)
       } else {
         tooltipRef.current.style.display = 'none'
@@ -431,10 +468,15 @@ const CountyMap = props => {
       }
 
       // Centers the projection on the paramter passed
-      if (focus.center) {
-        topoData.projection.scale(canvas.width * (focus.id === '72' ? 10 : 2.5))
-        let offset = topoData.projection(focus.center)
-        topoData.projection.translate([-offset[0] + canvas.width, -offset[1] + canvas.height])
+      // Centers the projection on the parameter passed
+      if (focus.feature) {
+        const PADDING = 10
+        // Fit the feature within the canvas dimensions with padding
+        const fitExtent = [
+          [PADDING, PADDING],
+          [canvas.width - 0, canvas.height - PADDING]
+        ]
+        topoData.projection.fitExtent(fitExtent, focus.feature)
       }
 
       // Erases previous renderings before redrawing map
@@ -508,25 +550,34 @@ const CountyMap = props => {
       }
 
       const drawCircle = (circle, context) => {
+        const adjustedGeoRadius = Number(circle.geoRadius)
         context.lineWidth = lineWidth
         context.fillStyle = circle.color
         context.beginPath()
-        context.arc(circle.x, circle.y, circle.geoRadius, 0, 2 * Math.PI)
+        context.arc(circle.x, circle.y, adjustedGeoRadius, 0, 2 * Math.PI)
         context.fill()
         context.stroke()
       }
 
       if (state.general.type === 'us-geocode') {
         context.strokeStyle = 'black'
-        const geoRadius = (state.visual.geoCodeCircleSize || 5) * (focus.id ? 2 : 1)
+        const geoRadius = state.visual.geoCodeCircleSize || 5
 
         runtimeKeys.forEach(key => {
-          const pixelCoords = topoData.projection([data[key][state.columns.longitude.name], data[key][state.columns.latitude.name]])
+          const pixelCoords = topoData.projection([
+            data[key][state.columns.longitude.name],
+            data[key][state.columns.latitude.name]
+          ])
 
           if (pixelCoords) {
             const legendValues = data[key] !== undefined ? applyLegendToRow(data[key]) : false
             if (legendValues && state.visual.cityStyle === 'circle') {
-              const circle = { x: pixelCoords[0], y: pixelCoords[1], color: legendValues[0], geoRadius }
+              const circle = {
+                x: pixelCoords[0],
+                y: pixelCoords[1],
+                color: legendValues[0],
+                geoRadius: geoRadius
+              }
               drawCircle(circle, context)
             }
             if (legendValues && state.visual.cityStyle === 'pin') {