@cdc/map 4.24.5 → 4.24.9

package/src/data/supported-geos.js

@@ -190,6 +190,7 @@ export const supportedStatesFipsCodes = {
   '08': 'Colorado',
   '09': 'Connecticut',
   10: 'Delaware',
+  11: 'District of Columbia',
   12: 'Florida',
   13: 'Georgia',
   15: 'Hawaii',
@@ -234,9 +235,9 @@ export const supportedStatesFipsCodes = {
   56: 'Wyoming',
   60: 'American Samoa',
   66: 'Guam',
-  69: 'Northern Mariana Islands',
+  69: 'Commonwealth of the Northern Mariana Islands',
   72: 'Puerto Rico',
-  78: 'Virgin Islands'
+  78: 'United States Virgin Islands'
 }
 
 export const supportedCountries = {
@@ -289,7 +290,12 @@ export const supportedCountries = {
   COL: ['Colombia'],
   COM: ['Comoros'],
   COG: ['Congo', 'Congo, Republic of the', 'Republic of the Congo'],
-  COD: ['Democratic Republic of the Congo', 'Congo, Democratic Republic of the', 'Congo, the Democratic Republic of the', 'Dem. Rep. Congo'],
+  COD: [
+    'Democratic Republic of the Congo',
+    'Congo, Democratic Republic of the',
+    'Congo, the Democratic Republic of the',
+    'Dem. Rep. Congo'
+  ],
   COK: ['Cook Islands', 'Cook Is.', 'Cook Islands (New Zealand)'],
   CRI: ['Costa Rica'],
   CIV: ["Côte d'Ivoire"],
@@ -382,7 +388,12 @@ export const supportedCountries = {
   MUS: ['Mauritius'],
   MYT: ['Mayotte', 'Mayotte (France)'],
   MEX: ['Mexico'],
-  FSM: ['Micronesia', 'Federated States of Micronesia', 'Micronesia (Federated States of)', 'Micronesia, Federated States of'],
+  FSM: [
+    'Micronesia',
+    'Federated States of Micronesia',
+    'Micronesia (Federated States of)',
+    'Micronesia, Federated States of'
+  ],
   MDA: ['Moldova', 'Moldova, Republic of'],
   MCO: ['Monaco'],
   MNG: ['Mongolia'],

package/src/helpers/generateColorsArray.ts

@@ -0,0 +1,13 @@
+import chroma from 'chroma-js'
+
+/**
+ * Generate an array of colors based on a given color [color, hoverColor, darkColor]
+ * @param {string} color - The base color to generate the array from
+ * @param {boolean} special - A flag to determine if the hover color should be brighter or saturated
+ * @returns {string[]} - An array of colors
+ */
+export const generateColorsArray = (color: string = '#000000', special: boolean = false) => {
+  let colorObj = chroma(color)
+  let hoverColor = special ? colorObj.brighten(0.5).hex() : colorObj.saturate(1.3).hex()
+  return [color, hoverColor, colorObj.darken(0.3).hex()]
+}

package/src/helpers/generateRuntimeLegendHash.ts

@@ -0,0 +1,23 @@
+import { hashObj } from './hashObj'
+
+export const generateRuntimeLegendHash = (state, runtimeFilters) => {
+  return hashObj({
+    unified: state.legend.unified ?? false,
+    equalNumberOptIn: state.general.equalNumberOptIn ?? false,
+    specialClassesLast: state.legend.showSpecialClassesLast ?? false,
+    color: state.color,
+    customColors: state.customColors,
+    numberOfItems: state.legend.numberOfItems,
+    type: state.legend.type,
+    separateZero: state.legend.separateZero ?? false,
+    primary: state.columns.primary.name,
+    categoryValuesOrder: state.legend.categoryValuesOrder,
+    specialClasses: state.legend.specialClasses,
+    geoType: state.general.geoType,
+    data: state.data,
+    filters: {
+      ...state.filters
+    },
+    ...runtimeFilters
+  })
+}

package/src/helpers/getUniqueValues.ts

@@ -0,0 +1,19 @@
+/**
+ * Get unique values from a column in a dataset
+ * @returns {Array} - The unique values
+ */
+export const getUniqueValues = (data: Array<Record<string, any>>, columnName: string) => {
+  let result = {}
+
+  for (let i = 0; i < data.length; i++) {
+    let val = data[i][columnName]
+
+    if (undefined === val) continue
+
+    if (undefined === result[val]) {
+      result[val] = true
+    }
+  }
+
+  return Object.keys(result)
+}

package/src/helpers/hashObj.ts

@@ -0,0 +1,25 @@
+/**
+ * Hashes an object
+ * @param {Object} row - The object to hash
+ * @returns {number} - The hash of the object
+ */
+export const hashObj = row => {
+  try {
+    if (!row || row === undefined) throw new Error('No row supplied to hashObj')
+
+    let str = JSON.stringify(row)
+    let hash = 0
+
+    if (str.length === 0) return hash
+
+    for (let i = 0; i < str.length; i++) {
+      let char = str.charCodeAt(i)
+      hash = (hash << 5) - hash + char
+      hash = hash & hash
+    }
+
+    return hash
+  } catch (e) {
+    console.error({ state: 'COVE: ' + e.message }) // eslint-disable-line
+  }
+}

package/src/helpers/tests/generateColorsArray.test.ts

@@ -0,0 +1,18 @@
+import { generateColorsArray } from '../generateColorsArray'
+
+describe('generateColorsArray', () => {
+  it('should return an array of colors', () => {
+    const colors = generateColorsArray('#fde0dd', false)
+    expect(colors).toEqual(expect.arrayContaining(['#fde0dd', '#ffd0c9', '#edd1ce']))
+  })
+
+  it('should return a brighter hover color when special flag is true', () => {
+    const colors = generateColorsArray('#fde0dd', true)
+    expect(colors[1]).toEqual('#fffaf7')
+  })
+
+  it('should return a darker color for the third element in the array', () => {
+    const colors = generateColorsArray('#fde0dd', false)
+    expect(colors[2]).toBe('#edd1ce')
+  })
+})

package/src/helpers/tests/generateRuntimeLegendHash.test.ts

@@ -0,0 +1,11 @@
+import { generateRuntimeLegendHash } from '../generateRuntimeLegendHash'
+import usaExample from './../../../examples/default-usa.json'
+
+describe('generateRuntimeLegendHash', () => {
+  it('should return a hash value for a given state and runtime filters', () => {
+    const runtimeFilters = []
+    const expectedHash = 1253406922
+    const result = generateRuntimeLegendHash(usaExample, runtimeFilters)
+    expect(result).toBe(expectedHash)
+  })
+})

package/src/helpers/tests/hashObj.test.ts

@@ -0,0 +1,10 @@
+import { hashObj } from '../hashObj'
+
+describe('hashObj', () => {
+  it('should return a hash value for a given object', () => {
+    const obj = { state: 'Georgia', city: 'Atlanta' }
+    const expectedHash = -380051767
+    const result = hashObj(obj)
+    expect(result).toBe(expectedHash)
+  })
+})

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

@@ -159,10 +159,13 @@ $medium: 768px;
     @extend .territories;
     width: 60%;
   }
-}
 
-@media screen and (max-width: $small) {
-  .territories {
+  &--tablet {
+    @extend .territories;
+    width: 70%;
+    svg {
+      margin-bottom: 0.2em;
+    }
   }
 }
 
@@ -255,6 +258,10 @@ $medium: 768px;
   stroke: none !important;
 }
 
+.countyMapGroup--no-transition {
+  transition: none !important;
+}
+
 // .state {
 // 	display: none;
 // }
@@ -371,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
@@ -14,12 +14,15 @@ export type MapContext = {
   generateRuntimeData
   geoClickHandler
   handleCircleClick: Function
+  handleDragStateChange: Function
+  isDraggingAnnotation: boolean
   handleMapAriaLabels
   hasZoom
   innerContainerRef
   isDashboard
   isDebug
   isEditor
+  isFilterValueSupported: boolean
   loadConfig
   navigationHandler
   position
@@ -42,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
 }