@cdc/map 4.24.7 → 4.24.9

package/src/hooks/useStateZoom.tsx

@@ -0,0 +1,157 @@
+import { useContext, useEffect, useState } from 'react'
+import ConfigContext from '../context'
+import { geoAlbersUsaTerritories, GeoProjection } 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'
+
+interface StateData {
+  geometry: { type: 'MultiPolygon'; coordinates: number[][][][] }
+  // FIPS ID of US state
+  id: string
+  // name of US state
+  properties: { name: string }
+  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'
+  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))
+  }, [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
+      }
+    })
+    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)
+  )
+
+  /*
+    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]
+    ],
+    _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
+
+  const path: GeoPath = geoPath().projection(projection)
+  const featureCenter = path.centroid(_statePickedData)
+  const stateCenter = newProjection.invert(featureCenter)
+
+  const switchState = () => {
+    setStateToShow(_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
+      }
+    })
+
+    if (zoomFunction === 'reset') {
+      setTranslate([0, 0]) // needed for state switcher
+      setScale(1) // needed for state switcher
+    }
+  }
+
+  const handleZoomIn = () => {
+    setScaleAndTranslate('zoomIn')
+  }
+
+  const handleZoomOut = () => {
+    setScaleAndTranslate('zoomOut')
+  }
+
+  const handleMoveEnd = position => {
+    setPosition(position)
+  }
+
+  const handleReset = () => {
+    setScaleAndTranslate('reset')
+  }
+
+  return {
+    statePicked,
+    setScaleAndTranslate,
+    switchState,
+    handleZoomIn,
+    handleZoomOut,
+    handleMoveEnd,
+    handleReset,
+    projection
+  }
+}
+
+export default useSetScaleAndTranslate

package/src/hooks/{useZoomPan.js → useZoomPan.ts}

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react'
 import { zoom as d3Zoom, zoomIdentity as d3ZoomIdentity } from 'd3-zoom'
 import { select as d3Select } from 'd3-selection'
 
-function getCoords(w, h, t) {
+const getCoords = (w, h, t) => {
   const xOffset = (w * t.k - w) / 2
   const yOffset = (h * t.k - h) / 2
   return [w / 2 - (xOffset + t.x) / t.k, h / 2 - (yOffset + t.y) / t.k]
@@ -39,12 +39,12 @@ export default function useZoomPan({
   useEffect(() => {
     const svg = d3Select(mapRef.current)
 
-    function handleZoomStart(d3Event) {
+    const handleZoomStart = d3Event => {
       if (!onMoveStart || bypassEvents.current) return
       onMoveStart({ coordinates: projection.invert(getCoords(width, height, d3Event.transform)), zoom: d3Event.transform.k }, d3Event)
     }
 
-    function handleZoom(d3Event) {
+    const handleZoom = d3Event => {
       if (bypassEvents.current) return
       const { transform, sourceEvent } = d3Event
       setPosition({ x: transform.x, y: transform.y, k: transform.k, dragging: sourceEvent })
@@ -52,7 +52,7 @@ export default function useZoomPan({
       onMove({ x: transform.x, y: transform.y, k: transform.k, dragging: sourceEvent }, d3Event)
     }
 
-    function handleZoomEnd(d3Event) {
+    const handleZoomEnd = d3Event => {
       if (bypassEvents.current) {
         bypassEvents.current = false
         return
@@ -63,7 +63,7 @@ export default function useZoomPan({
       onMoveEnd({ coordinates: [x, y], zoom: d3Event.transform.k }, d3Event)
     }
 
-    function filterFunc(d3Event) {
+    const filterFunc = d3Event => {
       if (filterZoomEvent) {
         return filterZoomEvent(d3Event)
       }
@@ -89,6 +89,7 @@ export default function useZoomPan({
     if (lon === lastPosition.current.x && lat === lastPosition.current.y && zoom === lastPosition.current.k) return
 
     const coords = projection([lon, lat])
+    if (!coords) return
     const x = coords[0] * zoom
     const y = coords[1] * zoom
     const svg = d3Select(mapRef.current)

package/src/scss/editor-panel.scss

@@ -710,12 +710,8 @@
   }
 
   @include breakpointClass(md) {
-    .editor-panel:not(.hidden) + .cdc-map-inner-container {
-      padding-left: $editorWidth;
-    }
     .waiting {
       background-color: #fff;
-      padding-left: $editorWidth;
     }
   }
 }

package/src/scss/main.scss

@@ -5,6 +5,21 @@
 @import 'filters';
 @import '@cdc/core/styles/v2/components/ui/tooltip';
 
+.type-map--has-error {
+  overflow: hidden !important;
+  height: 100vh;
+
+  .waiting {
+    display: flex;
+    align-content: center;
+    flex-wrap: wrap;
+    display: flex;
+    align-content: center;
+    flex-wrap: wrap;
+    height: 100vh;
+  }
+}
+
 .cdc-map-outer-container {
   position: relative;
   display: flex; // Needed for the main content
@@ -58,6 +73,14 @@
     display: flex;
     position: relative;
     flex-direction: column;
+
+    &.bottom {
+      flex-direction: column;
+    }
+    &.top {
+      flex-direction: column-reverse;
+    }
+
     &.modal-background {
       position: relative;
       &::before {
@@ -142,7 +165,6 @@
 
   p.subtext {
     font-size: 0.9em;
-    padding: 0 0.8em 0.8em;
     em {
       font-style: italic;
     }

package/src/scss/map.scss

@@ -258,6 +258,10 @@ $medium: 768px;
   stroke: none !important;
 }
 
+.countyMapGroup--no-transition {
+  transition: none !important;
+}
+
 // .state {
 // 	display: none;
 // }
@@ -374,3 +378,7 @@ canvas {
   pointer-events: none;
   display: none;
 }
+
+.data-table-container {
+  margin: 5px 0px !important;
+}

package/src/types/MapConfig.ts

@@ -33,6 +33,7 @@ type PatternSelection = {
   label: string
   // size of pattern
   size: 'small' | 'medium' | 'large'
+  contrastCheck: boolean
 }
 
 export type GeoColumnProperties = Pick<EditorColumnProperties, 'name' | 'label' | 'tooltip' | 'dataTable'>
@@ -40,7 +41,7 @@ export type LatitudeColumnProperties = Pick<EditorColumnProperties, 'name'>
 export type LongitudeColumnProperties = Pick<EditorColumnProperties, 'name'>
 export type NavigateColumnProperties = Pick<EditorColumnProperties, 'name'>
 export type PrimaryColumnProperties = Pick<EditorColumnProperties, 'dataTable' | 'label' | 'name' | 'prefix' | 'suffix' | 'tooltip'>
-
+export type ViewportSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'
 export type LegendShapeItem = {
   column: string
   key: string
@@ -123,6 +124,11 @@ export type MapConfig = Visualization & {
     numberOfItems: number
     position: string
     title: string
+    style: 'circles' | 'boxes' | 'gradient'
+    subStyle: 'linear blocks' | 'smooth'
+    tickRotation: string
+    hideBorder: false
+    singleColumnLegend: false
   }
   table: {
     label: string
@@ -144,6 +150,8 @@ export type MapConfig = Visualization & {
   }
   runtime: {
     editorErrorMessage: string[]
+    // when a single state map doesn't include a fips code show a message...
+    noStateFoundMessage: string
   }
   mapPosition: { coordinates: Coordinate; zoom: number }
   map: {

package/src/types/MapContext.ts

@@ -1,11 +1,11 @@
-import { type MapConfig } from './MapConfig'
+import { type MapConfig, type ViewportSize } from './MapConfig'
 
 export type MapContext = {
   applyLegendToRow
   applyTooltipsToGeo
   closeModal
   columnsInData
-  currentViewport
+  currentViewport: ViewportSize
   data
   displayDataAsText
   displayGeoName
@@ -22,6 +22,7 @@ export type MapContext = {
   isDashboard
   isDebug
   isEditor
+  isFilterValueSupported: boolean
   loadConfig
   navigationHandler
   position
@@ -44,4 +45,15 @@ export type MapContext = {
   supportedTerritories
   titleCase
   viewport
+  setStateToShow: (string) => void
+  stateToShow: string
+  scale: number
+  translate: [number, number]
+  topoData
+  setScale: (number) => void
+  setTranslate: ([x, y]: [number, number]) => void
+  runtimeData: Object[]
+  tooltipId: string
+  setTopoData: Function
+  getTextWidth: (text: string, font: string) => string | undefined
 }

package/src/components/Modal.jsx

@@ -1,22 +0,0 @@
-import React, { useContext } from 'react'
-import closeIcon from '../images/close.svg?inline'
-import LegendCircle from '@cdc/core/components/LegendCircle'
-import ConfigContext from '../context'
-
-const Modal = props => {
-  const { applyTooltipsToGeo, capitalize, applyLegendToRow, viewport, type, content } = useContext(ConfigContext)
-
-  const tooltip = applyTooltipsToGeo(content.geoName, content.keyedData, 'jsx')
-
-  const legendColors = applyLegendToRow(content.keyedData)
-
-  return (
-    <section className={capitalize ? 'modal-content tooltip capitalize ' + viewport : 'modal-content tooltip ' + viewport} aria-hidden='true'>
-      <img src={closeIcon} className='modal-close' alt='Close Modal' />
-      {type === 'data' && <LegendCircle fill={legendColors[0]} />}
-      <div className='content'>{tooltip}</div>
-    </section>
-  )
-}
-
-export default Modal