@cdc/map 4.25.3 → 4.25.6

package/src/hooks/useStateZoom.tsx

@@ -1,11 +1,12 @@
-import { useContext, useEffect, useState } from 'react'
-import ConfigContext from '../context'
-import { geoAlbersUsaTerritories, GeoProjection } from 'd3-composite-projections'
+import { useContext, useEffect } from 'react'
+import ConfigContext, { MapDispatchContext } from '../context'
+import { geoAlbersUsaTerritories } from 'd3-composite-projections'
 import { MapContext } from '../types/MapContext'
 import { geoPath, GeoPath } from 'd3-geo'
-import _ from 'lodash'
 import { getFilterControllingStatePicked } from '../components/UsaMap/helpers/map'
 import { supportedStatesFipsCodes } from '../data/supported-geos'
+import { SVG_HEIGHT, SVG_WIDTH, SVG_PADDING } from '../helpers'
+import _ from 'lodash'
 
 interface StateData {
   geometry: { type: 'MultiPolygon'; coordinates: number[][][][] }
@@ -16,113 +17,89 @@ interface StateData {
   type: 'Feature'
 }
 
-interface Position {
-  zoom: number
-  coordinates: [number, number]
-}
-
 const useSetScaleAndTranslate = (topoData: { states: StateData[] }) => {
-  const { setTranslate, setScale, setStateToShow, setPosition, state, setState, runtimeData } = useContext<MapContext>(ConfigContext)
-  const statePicked = getFilterControllingStatePicked(state, runtimeData)
-  const defaultStateToShow = 'Alabama'
+  const { config, runtimeData, position } = useContext<MapContext>(ConfigContext)
+  const statePicked = getFilterControllingStatePicked(config, runtimeData)
+  const dispatch = useContext(MapDispatchContext)
+
   useEffect(() => {
     const fipsCode = Object.keys(supportedStatesFipsCodes).find(key => supportedStatesFipsCodes[key] === statePicked)
     const stateName = statePicked
     const stateData = { fipsCode, stateName }
-    setScale(1)
-    setTranslate([0, 0])
-    setState({
-      ...state,
-      general: {
-        ...state.general,
-        statePicked: stateData
-      }
-    })
-    setStateToShow(topoData?.states?.find(s => s.properties.name === statePicked))
+    const newConfig = _.cloneDeep(config)
+    newConfig.general.statePicked = stateData
+    const stateToShow = topoData?.states?.find(s => s.properties.name === statePicked)
+
+    dispatch({ type: 'SET_SCALE', payload: 1 })
+    dispatch({ type: 'SET_TRANSLATE', payload: [0, 0] })
+    dispatch({ type: 'SET_CONFIG', payload: newConfig })
+    dispatch({ type: 'SET_STATE_TO_SHOW', payload: stateToShow })
   }, [topoData])
 
   useEffect(() => {
     const fipsCode = Object.keys(supportedStatesFipsCodes).find(key => supportedStatesFipsCodes[key] === statePicked)
     const stateName = statePicked
     const stateData = { fipsCode, stateName }
-
-    setState({
-      ...state,
-      general: {
-        ...state.general,
-        statePicked: stateData
-      }
-    })
+    const newConfig = _.cloneDeep(config)
+    newConfig.general.statePicked = stateData
+    dispatch({ type: 'SET_CONFIG', payload: newConfig })
     setScaleAndTranslate('reset')
   }, [statePicked])
 
-  // SVG ITEMS
-  const WIDTH = 880
-  const HEIGHT = 500
-  const PADDING = 50
-
   // TODO: same as city list projection?
-  const [projection, setProjection] = useState(() =>
-    geoAlbersUsaTerritories()
-      .translate([WIDTH / 2, HEIGHT / 2])
-      .scale(1)
-  )
+  const projection = geoAlbersUsaTerritories()
+    .translate([SVG_WIDTH / 2, SVG_HEIGHT / 2])
+    .scale(1)
 
-  /*
-    NORMALIZATION_FACTOR NOTES:
-    This is used during state switching,
-    I'm not sure why the value is 1070 but it does appear to work during the switching.
-    During zoom it does not work.
-  */
-  const NORMALIZATION_FACTOR = 1070
   const _statePickedData = topoData?.states?.find(s => s.properties.name === statePicked)
   const newProjection = projection.fitExtent(
     [
-      [PADDING, PADDING],
-      [WIDTH - PADDING, HEIGHT - PADDING]
+      [SVG_PADDING, SVG_PADDING],
+      [SVG_WIDTH - SVG_PADDING, SVG_HEIGHT - SVG_PADDING]
     ],
     _statePickedData
   )
 
   // Work for centering the state.
-  const newScale = newProjection.scale()
-  const normalizedScale = newScale / NORMALIZATION_FACTOR
   let [x, y] = newProjection.translate()
-  x = x - WIDTH / 2
-  y = y - HEIGHT / 2
+  x = x - SVG_WIDTH / 2
+  y = y - SVG_HEIGHT / 2
 
   const path: GeoPath = geoPath().projection(projection)
   const featureCenter = path.centroid(_statePickedData)
   const stateCenter = newProjection.invert(featureCenter)
 
   const switchState = () => {
-    setStateToShow(_statePickedData)
+    dispatch({ type: 'SET_STATE_TO_SHOW', payload: _statePickedData })
     setScaleAndTranslate('reset')
   }
 
   const setScaleAndTranslate = (zoomFunction: string = '') => {
-    setPosition((pos: Position) => {
-      let newZoom = pos.zoom
-      let newCoordinates = pos.coordinates
-      if (zoomFunction === 'zoomIn' && pos.zoom < 4) {
-        newZoom = pos.zoom * 1.5
-        newCoordinates = pos.coordinates[0] !== 0 && pos.coordinates[1] !== 0 ? pos.coordinates : stateCenter
-      } else if (zoomFunction === 'zoomOut' && pos.zoom > 1) {
-        newZoom = pos.zoom / 1.5
-        newCoordinates = pos.coordinates[0] !== 0 && pos.coordinates[1] !== 0 ? pos.coordinates : stateCenter
-      } else if (zoomFunction === 'reset') {
-        newZoom = 1
-        newCoordinates = stateCenter
-      }
-      return {
-        zoom: newZoom,
-        coordinates: newCoordinates
-      }
-    })
+    const _prevPosition = position
+    let newZoom = _prevPosition.zoom
+    let newCoordinates = _prevPosition.coordinates
+    if (zoomFunction === 'zoomIn' && _prevPosition.zoom < 4) {
+      newZoom = _prevPosition.zoom * 1.5
+      newCoordinates =
+        _prevPosition.coordinates[0] !== 0 && _prevPosition.coordinates[1] !== 0
+          ? _prevPosition.coordinates
+          : stateCenter
+    } else if (zoomFunction === 'zoomOut' && _prevPosition.zoom > 1) {
+      newZoom = _prevPosition.zoom / 1.5
+      newCoordinates =
+        _prevPosition.coordinates[0] !== 0 && _prevPosition.coordinates[1] !== 0
+          ? _prevPosition.coordinates
+          : stateCenter
+    } else if (zoomFunction === 'reset') {
+      newZoom = 1
+      newCoordinates = stateCenter
+    }
+
+    dispatch({ type: 'SET_POSITION', payload: { coordinates: newCoordinates, zoom: newZoom } })
 
     if (zoomFunction === 'reset') {
-      setTranslate([0, 0]) // needed for state switcher
-      setScale(1) // needed for state switcher
+      dispatch({ type: 'SET_TRANSLATE', payload: [0, 0] }) // needed for state switcher
+      dispatch({ type: 'SET_SCALE', payload: 1 }) // needed for state switcher
     }
   }
 
@@ -135,7 +112,7 @@ const useSetScaleAndTranslate = (topoData: { states: StateData[] }) => {
   }
 
   const handleMoveEnd = position => {
-    setPosition(position)
+    dispatch({ type: 'SET_POSITION', payload: position })
   }
 
   const handleReset = () => {

package/src/hooks/useTooltip.ts

@@ -2,9 +2,8 @@ import { displayDataAsText } from '../../../core/helpers/displayDataAsText'
 import { displayGeoName } from '../helpers/displayGeoName'
 
 const useTooltip = props => {
-  const { state, supportedStatesFipsCodes } = props
+  const { config, supportedStatesFipsCodes } = props
 
-  const config = state
 
   /**
    * On county maps there's a need to append the state name
@@ -108,7 +107,7 @@ const useTooltip = props => {
           let tooltipValue = handleTooltipSpecialClassText(specialClasses, column, row, '', columnKey)
 
           if (!tooltipValue) {
-            tooltipValue = row ? displayDataAsText(row[column.name], columnKey, state) : 'No Data'
+            tooltipValue = row ? displayDataAsText(row[column.name], columnKey, config) : 'No Data'
           }
 
           toolTipText += handleTooltipPrimaryColumn(tooltipValue, column)

package/src/index.jsx

@@ -1,23 +1,17 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 
-import CdcMap from './CdcMap'
-
 import '@cdc/core/styles/cove-main.scss'
 import 'react-tooltip/dist/react-tooltip.css'
 import './coreStyles_map.scss'
 
+import CdcMap from './CdcMap'
+
 let isEditor = window.location.href.includes('editor=true')
-let isDebug = window.location.href.includes('debug=true')
 let domContainer = document.getElementsByClassName('react-container')[0]
 
 ReactDOM.createRoot(domContainer).render(
   <React.StrictMode>
-    <CdcMap
-      isEditor={isEditor}
-      isDebug={isDebug}
-      configUrl={domContainer.attributes['data-config'].value}
-      containerEl={domContainer}
-    />
+    <CdcMap isEditor={isEditor} configUrl={domContainer.attributes['data-config'].value} containerEl={domContainer} />
   </React.StrictMode>
 )

package/src/scss/editor-panel.scss

@@ -7,7 +7,7 @@
       cursor: default !important;
       appearance: auto !important;
       box-sizing: border-box !important;
-      margin: 3px 3px 0px 5px !important;
+      margin: 3px 3px 0 5px !important;
       padding: initial !important;
       border: initial !important;
     }
@@ -15,100 +15,6 @@
   }
 }
 .cdc-open-viz-module {
-  .geo-buttons {
-    list-style: none;
-    color: var(--mediumGray);
-    display: grid;
-    button { width: 100% !important; }
-    svg {
-      display: block;
-      max-width: 80px;
-      max-height: 40px;
-      margin: 0.5em auto;
-      box-sizing: border-box;
-      path {
-        fill: currentColor;
-      }
-    }
-    button {
-      background: transparent;
-      padding: 0.3em 0.75em;
-      display: flex;
-      border: var(--lightGray) 1px solid;
-      width: 40%;
-      align-items: center;
-      margin-right: 1em;
-      cursor: pointer;
-      overflow: hidden;
-      flex-direction: column;
-      transition: 0.2s all;
-      svg {
-        display: block;
-        height: 25px;
-        margin: 0.5em auto;
-        max-width: 100%;
-      }
-      span {
-        text-transform: none;
-        font-size: 1em;
-      }
-      &:hover {
-        background: #f2f2f2;
-        transition: 0.2s all;
-      }
-      &.active {
-        background: #fff;
-        border-color: #005eaa;
-        color: #005eaa;
-        position: relative;
-        path {
-          fill: #005eaa;
-        }
-        &:before {
-          content: ' ';
-          width: 5px;
-          background: #005eaa;
-          left: 0;
-          top: 0;
-          bottom: 0;
-          position: absolute;
-        }
-      }
-    }
-  }
-
-  .editor-toggle {
-    background: #f2f2f2;
-    border-radius: 60px;
-    color: #000;
-    font-size: 1em;
-    border: 0;
-    position: fixed;
-    z-index: 100;
-    transition: 0.1s background;
-    cursor: pointer;
-    width: 25px;
-    height: 25px;
-    left: 307px;
-    box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;
-    &:before {
-      top: 43%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      position: absolute;
-      content: '\00ab';
-    }
-    &.collapsed {
-      left: 1em;
-      margin-left: 0;
-      &:before {
-        content: '\00bb';
-      }
-    }
-    &:hover {
-      background: rgba(255, 255, 255, 1);
-    }
-  }
 
   .editor-panel {
     .cove-input-group,
@@ -186,13 +92,12 @@
       margin-left: 0.3rem;
     }
 
-    .accordion__heading {
-      background: var(--lightestGray);
-    }
+
     .form-container {
       border-right: var(--lightGray) 1px solid;
       flex-grow: 1;
     }
+
     .guidance-link {
       margin: 2em 1em 0;
       padding: 0.75em 1em;
@@ -242,7 +147,6 @@
       margin-right: 1em;
       border-bottom: 2px solid currentColor;
       border-right: 2px solid currentColor;
-      transform: rotate(-45deg);
       right: 0;
       position: absolute;
       top: 50%;

package/src/scss/main.scss

@@ -1,18 +1,11 @@
 @import 'mixins';
-
-@import 'variables';
 @import 'editor-panel';
-@import 'filters';
 
 .type-map--has-error {
-  overflow: hidden !important;
-  height: 100vh;
 
   .waiting {
     display: flex;
-    align-content: center;
-    flex-wrap: wrap;
-    display: flex;
+    overflow: hidden !important;
     align-content: center;
     flex-wrap: wrap;
     height: 100vh;
@@ -26,16 +19,6 @@
     margin-top: 20%;
   }
 
-  .visually-hidden {
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
   @include breakpointClass(md) {
     .map-container.modal-background::before {
       border-bottom: var(--lightGray) 1px solid;
@@ -48,7 +31,6 @@
 .cdc-map-inner-container {
   @import './map';
   flex-grow: 1;
-  color: #202020;
   border: 0;
   text-align: left;
   max-width: 100%;

package/src/scss/map.scss

@@ -1,48 +1,4 @@
-// Map Download UI
-.map-downloads {
-  position: relative;
-  z-index: 3;
-
-  .map-downloads__ui.btn-group {
-    transform: scale(0.8);
-  }
-
-  .map-downloads__ui {
-    position: absolute;
-    top: 0.5em;
-    left: 0.5em;
-    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
-    box-shadow: 0 5px 12px -8px rgba(0, 0, 0, 0.5);
-    user-select: none;
-    height: 42px;
-  }
-}
-
-.map-container {
-  &.full-border {
-    border: #c2c2c2 1px solid;
-  }
-}
-
-header + .map-container.full-border {
-  border-top: 0; // When they have a header, don't add a border top
-}
-
-// World Specific Styles
-.map-container.world {
-  &.data .geography-container {
-    border-bottom: var(--lightGray) 1px solid;
-  }
-  .geography-container {
-    cursor: move;
-  }
-}
-
 @include breakpointClass(md) {
-  // US Specific
-  .map-container.us {
-    margin: 0 1em;
-  }
   // Data Specific
   .map-container.data {
     &.side {
@@ -71,27 +27,6 @@ header + .map-container.full-border {
 $small: 500px;
 $medium: 768px;
 
-.geography-container {
-  position: relative;
-  flex-grow: 1;
-  width: 100%;
-  .geo-point {
-    transition: 0.3s all;
-    circle {
-      fill: inherit;
-      transition: 0.1s transform;
-    }
-    &:hover {
-      transition: 0.2s all;
-    }
-  }
-  .map-logo {
-    display: block;
-    margin: 0 0 0 auto;
-    max-height: 35px;
-  }
-}
-
 .single-geo {
   transition: 0.2s fill;
   cursor: pointer;
@@ -101,77 +36,34 @@ $medium: 768px;
 }
 
 .territories-label {
-  font-size: 1em;
+  font-size: 0.8rem;
+  font-weight: 700;
+}
+
+@include breakpointClass(sm) {
+  .territories-label {
+    font-size: 1rem;
+  }
 }
 
 // Cities and Territories
 .territories {
   gap: 0.5em;
   svg {
-    max-width: 35px;
-    min-width: 25px;
+    max-width: 30px;
+    min-width: 30px;
     transition: 0.3s all;
 
     text {
-      font-size: 0.95em;
+      font-size: var(--territory-label-font-size);
+      font-weight: 900;
+      @include breakpointClass(sm) {
+        font-size: var(--territory-label-font-size-mobile);
+      }
     }
   }
 }
 
-.zoom-controls {
-  display: flex;
-  position: absolute;
-  bottom: 2em;
-  left: 1em;
-  z-index: 4;
-  > button.reset {
-    margin-left: 5px;
-    background: rgba(0, 0, 0, 0.65);
-    transition: 0.2s all;
-    color: #fff;
-    &:hover {
-      background: rgba(0, 0, 0, 0.8);
-      transition: 0.2s all;
-    }
-    &:active {
-      transform: scale(0.9);
-    }
-    &:focus {
-      background: #005eaa;
-    }
-  }
-  > button:not(.reset) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.2em;
-    height: 1.75em;
-    width: 1.75em;
-    background: rgba(0, 0, 0, 0.65);
-    transition: 0.2s all;
-    color: #fff;
-    border-radius: 100%;
-    border: 0;
-    &:hover {
-      background: rgba(0, 0, 0, 0.8);
-      transition: 0.2s all;
-    }
-    &:active {
-      transform: scale(0.9);
-    }
-    svg {
-      height: 1.75em;
-      width: 1.75em;
-    }
-    &:focus {
-      background: #005eaa;
-    }
-  }
-  > button:first-child {
-    margin-right: 0.25em;
-  }
-}
-
 @include breakpointClass(sm) {
   .zoom-controls > button:not(.reset) {
     height: 2.5em;
@@ -181,35 +73,13 @@ $medium: 768px;
       width: 2.5em;
     }
   }
-}
-
-@include breakpointClass(md) {
-  .map-downloads .map-downloads__ui.btn-group {
-    top: 1em;
-    left: 1em;
-    transform: none;
-  }
   .territories {
-    > span {
-      margin-left: 0;
-    }
     svg {
       max-width: 45px;
     }
   }
 }
 
-.countyMapGroup {
-  transition: transform 1s;
-  will-change: transform;
-  transform-origin: center;
-  stroke: none !important;
-}
-
-.countyMapGroup--no-transition {
-  transition: none !important;
-}
-
 .state {
   &--inactive:hover path {
     cursor: pointer;
@@ -228,81 +98,6 @@ $medium: 768px;
   display: none;
 }
 
-//Region Maps
-#region-1-label,
-#region-2-label,
-#region-3-label,
-#region-4-label,
-#region-5-label,
-#region-6-label,
-#region-7-label,
-#region-8-label,
-#region-9-label,
-#region-10-label {
-  background: #fff;
-}
-
-#region-1-label {
-  transform: translate(90%, 22%);
-}
-
-#region-2-label {
-  //transform: translate(83%, 31%); SIDE CHART EXPERIMENT
-  transform: translate(83%, 33%);
-}
-
-#region-3-label {
-  //transform: translate(78%, 48%); SIDE CHART EXPERIMENT
-  transform: translate(75%, 45%);
-}
-
-#region-4-label {
-  transform: translate(68%, 70%);
-}
-
-#region-5-label {
-  transform: translate(65%, 44%);
-}
-
-#region-6-label {
-  transform: translate(45%, 75%);
-}
-
-#region-7-label {
-  transform: translate(53%, 47%);
-}
-
-#region-8-label {
-  transform: translate(35%, 30%);
-}
-
-#region-9-label {
-  transform: translate(18%, 58%);
-}
-
-#region-10-label {
-  transform: translate(15%, 28%);
-}
-
-#region-2-territories,
-#region-9-territories {
-  text {
-    font-weight: bold;
-    font-size: 14px;
-  }
-}
-
-#region-2-territories {
-  transform: translate(86%, 40%);
-}
-
-#region-9-territories {
-  transform: translate(4%, 72%);
-
-  .region-9-row2 {
-    transform: translateY(34px);
-  }
-}
 
 .county-borders {
   fill: none;