@cdc/map 4.26.2 → 4.26.4

package/src/scss/main.scss

@@ -1,6 +1,7 @@
-@import '@cdc/core/styles/v2/utils/breakpoints';
+@import '@cdc/core/styles/utils/breakpoints';
 @import 'editor-panel';
-@import '@cdc/core/styles/accessibility';
+@import '@cdc/core/styles/utils/accessibility';
+@import '@cdc/core/styles/layout/wrapper-padding';
 
 .type-map--has-error {
   .waiting {
@@ -21,7 +22,7 @@
   }
 
   @include breakpointClass(md) {
-    .map-container.modal-background::before {
+    .visualization-container.modal-background::before {
       border-bottom: var(--lightGray) 1px solid;
       margin-bottom: -1px;
       bottom: 1px;
@@ -37,6 +38,129 @@
   max-width: 100%;
   background-color: white;
 
+  .cove-visualization__title,
+  .cove-visualization__header {
+    margin-bottom: 0 !important;
+  }
+
+  &.theme-blue {
+    --map-theme-color: #005eaa;
+    --map-theme-bg: #d9ebf9;
+  }
+
+  &.theme-purple {
+    --map-theme-color: #712177;
+    --map-theme-bg: #f3e4f4;
+  }
+
+  &.theme-brown {
+    --map-theme-color: #705043;
+    --map-theme-bg: #f0e6e1;
+  }
+
+  &.theme-teal {
+    --map-theme-color: #00695c;
+    --map-theme-bg: #d9f2ef;
+  }
+
+  &.theme-pink {
+    --map-theme-color: #af4448;
+    --map-theme-bg: #fde7e8;
+  }
+
+  &.theme-orange {
+    --map-theme-color: #bb4d00;
+    --map-theme-bg: #fff0dd;
+  }
+
+  &.theme-slate {
+    --map-theme-color: #29434e;
+    --map-theme-bg: #e3e8ea;
+  }
+
+  &.theme-indigo {
+    --map-theme-color: #26418f;
+    --map-theme-bg: #e5eaf8;
+  }
+
+  &.theme-cyan {
+    --map-theme-color: #007b91;
+    --map-theme-bg: #dff3f7;
+  }
+
+  &.theme-green {
+    --map-theme-color: #4b830d;
+    --map-theme-bg: #e8f3dc;
+  }
+
+  &.theme-amber {
+    --map-theme-color: #fbab18;
+    --map-theme-bg: #fff6da;
+  }
+
+  .cove-visualization__body {
+    @include cove-visualization-body-padding;
+
+    &:not(.no-borders) {
+      border: 1px solid var(--lightGray);
+    }
+
+    &.component--has-border-color-theme:not(.no-borders) {
+      border-color: var(--map-theme-color, var(--lightGray));
+    }
+
+    &.component--has-accent {
+      border-left: 0.5rem solid var(--map-theme-color, var(--blue));
+    }
+
+    &.component--has-background:not(.component--hide-background-color) {
+      background-color: var(--map-theme-bg, var(--lightestGray));
+    }
+
+    &.component--hide-background-color {
+      background-color: transparent;
+    }
+
+    &.component--tp5-treatment {
+      background: transparent;
+
+      .cdc-callout {
+        box-shadow: 0 2px 4px rgb(159 159 159 / 10%);
+        border: 1px solid #dff2f6;
+        margin: 0;
+        padding: 1.25rem;
+        border-radius: 0.25rem;
+        position: relative;
+        background: transparent;
+
+        .cdc-callout__flag {
+          position: absolute;
+          top: -0.36rem;
+          right: 1.08rem;
+          width: 1.84rem;
+          height: auto;
+        }
+
+        .cove-visualization__title,
+        .cove-visualization__header {
+          background: transparent;
+          border: 0;
+          color: var(--cool-gray-90, #1f2937);
+          margin: 0 0 1rem;
+          padding: 0;
+          border-radius: 0;
+
+          h2 {
+            color: var(--cool-gray-90, #1f2937);
+            font-family: var(--fonts-nunito, var(--app-font-secondary));
+            font-size: 1.1rem;
+            font-weight: 700;
+          }
+        }
+      }
+    }
+  }
+
   header.hidden {
     display: none;
   }
@@ -45,17 +169,23 @@
     border: 0;
   }
 
-  .map-container {
+  .visualization-container {
     display: flex;
     position: relative;
     flex-direction: column;
 
     &.bottom {
       flex-direction: column;
+      row-gap: var(--cove-visualization-section-gap, 1.5rem);
+
+      >.legends {
+        margin-top: var(--cove-visualization-section-gap, 1.5rem) !important;
+      }
     }
 
     &.top {
       flex-direction: column-reverse;
+      row-gap: var(--cove-visualization-section-gap, 1.5rem);
     }
 
     &.modal-background {
@@ -88,7 +218,6 @@
         /* Constrain the modal's height to 90% of the viewport */
         overflow-y: auto;
         /* Enable vertical scrolling if content overflows */
-        font-size: 1rem;
         line-height: 1.4em;
       }
 
@@ -142,6 +271,11 @@
     }
   }
 
+  .visualization-container.legend-wrapped-bottom>.legends,
+  .legends.legend-wrapped-bottom {
+    margin-top: var(--cove-visualization-section-gap, 1.5rem) !important;
+  }
+
   p.subtext {
     em {
       font-style: italic;
@@ -213,4 +347,4 @@
   [tabIndex]:focus {
     outline-color: rgb(0, 95, 204);
   }
-}
+}

package/src/scss/map.scss

@@ -1,23 +1,23 @@
 @include breakpointClass(md) {
   // Data Specific
-  .map-container.data {
+  .visualization-container.data {
     &.side {
       flex-direction: row;
     }
   }
-  .map-container.map {
+  .visualization-container.map {
     &.side {
       flex-direction: row;
     }
   }
   // Bubble Specific
-  .map-container.bubble {
+  .visualization-container.bubble {
     &.side {
       flex-direction: row;
     }
   }
 
-  .map-container.us-geocode {
+  .visualization-container.us-geocode {
     &.side {
       flex-direction: row;
     }
@@ -114,3 +114,8 @@ canvas {
   pointer-events: none;
   display: none;
 }
+
+.county-map-canvas {
+  touch-action: none;
+  cursor: move;
+}

package/src/store/map.actions.ts

@@ -11,6 +11,10 @@ type SET_CONFIG = Action<'SET_CONFIG', MapConfig>
 type SET_COVE_LOADED_HAS_RAN = Action<'SET_COVE_LOADED_HAS_RAN', boolean>
 type SET_DISPLAY_PANEL = Action<'SET_DISPLAY_PANEL', boolean>
 type SET_FILTERED_COUNTRY_CODE = Action<'SET_FILTERED_COUNTRY_CODE', string>
+type SET_FILTERED_STATE_COUNTY_CODE = Action<
+  'SET_FILTERED_STATE_COUNTY_CODE',
+  { stateCode?: string; countyCode?: string }
+>
 type SET_IS_DRAGGING_ANNOTATION = Action<'SET_IS_DRAGGING_ANNOTATION', boolean>
 type SET_LOADING = Action<'SET_LOADING', boolean>
 type SET_MODAL = Action<'SET_MODAL', Modal>
@@ -30,6 +34,7 @@ type MapActions =
   | SET_COVE_LOADED_HAS_RAN
   | SET_DISPLAY_PANEL
   | SET_FILTERED_COUNTRY_CODE
+  | SET_FILTERED_STATE_COUNTY_CODE
   | SET_IS_DRAGGING_ANNOTATION
   | SET_LOADING
   | SET_MODAL

package/src/store/map.reducer.ts

@@ -6,8 +6,11 @@ import _ from 'lodash'
 import { Modal } from '../types/Modal'
 import { GeneratedLegend } from '../helpers/generateRuntimeLegend'
 import { RuntimeData } from '../types/RuntimeData'
+import { getQueryParam } from '@cdc/core/helpers/queryStringUtils'
 
 export const getInitialState = (configObj = {}): MapState => {
+  const filteredStateCode = typeof window !== 'undefined' ? getQueryParam('state-code') || '' : ''
+  const filteredCountyCode = typeof window !== 'undefined' ? getQueryParam('county-code') || '' : ''
   // Create defaults without palette version to avoid overriding legacy configs
   const defaultsWithoutPaletteaName = { ...defaults }
 
@@ -24,6 +27,8 @@ export const getInitialState = (configObj = {}): MapState => {
     coveLoadedHasRan: false,
     displayPanel: false,
     filteredCountryCode: '',
+    filteredCountyCode,
+    filteredStateCode,
     isDraggingAnnotation: false,
     topoData: null,
     translate: [0, 0],
@@ -46,6 +51,8 @@ export type MapState = {
   coveLoadedHasRan: boolean
   displayPanel: boolean
   filteredCountryCode: string
+  filteredCountyCode: string
+  filteredStateCode: string
   isDraggingAnnotation: boolean
   topoData: object | null
   translate: number[]
@@ -75,6 +82,12 @@ const reducer = (state: MapState, action: MapActions): MapState => {
       return { ...state, displayPanel: action.payload }
     case 'SET_FILTERED_COUNTRY_CODE':
       return { ...state, filteredCountryCode: action.payload }
+    case 'SET_FILTERED_STATE_COUNTY_CODE':
+      return {
+        ...state,
+        filteredStateCode: action.payload.stateCode || '',
+        filteredCountyCode: action.payload.countyCode || ''
+      }
     case 'SET_IS_DRAGGING_ANNOTATION':
       return { ...state, isDraggingAnnotation: action.payload }
     case 'SET_TOPO_DATA':

package/src/test/CdcMap.test.jsx

@@ -1,11 +1,35 @@
-import path from 'path'
+import path from 'node:path'
+import fs from 'node:fs'
+import vm from 'node:vm'
 import { testStandaloneBuild } from '@cdc/core/helpers/tests/testStandaloneBuild.ts'
 import { describe, it, expect } from 'vitest'
 
+const extractMarkedExampleConfig = (content, label) => {
+  const match = content.match(
+    /<!-- README_EXAMPLE_CONFIG_START -->\s*```jsx\s*([\s\S]*?)\s*```\s*<!-- README_EXAMPLE_CONFIG_END -->/
+  )
+  expect(match, `${label} should contain a marked README example block`).toBeTruthy()
+  const configMatch = match[1].match(/const config = (\{[\s\S]*?\})\n\nfunction App\(\)/)
+  expect(configMatch, `${label} should define const config before function App()`).toBeTruthy()
+  return vm.runInNewContext(`(${configMatch[1]})`)
+}
+
 describe('Map', () => {
   it('Can be built in isolation', async () => {
     const pkgDir = path.join(__dirname, '..')
-    const result = testStandaloneBuild(pkgDir)
+    const result = await testStandaloneBuild(pkgDir)
     expect(result).toBe(true)
   }, 300000)
+
+  it('keeps the minimal example in sync with the README docs', () => {
+    const pkgRoot = path.join(__dirname, '..', '..')
+    const minimalExamplePath = path.join(pkgRoot, 'examples', 'minimal-example.json')
+    const readmePath = path.join(pkgRoot, 'README.md')
+
+    const minimalExample = JSON.parse(fs.readFileSync(minimalExamplePath, 'utf8'))
+    const readmeBlock = extractMarkedExampleConfig(fs.readFileSync(readmePath, 'utf8'), 'README.md')
+
+    expect(readmeBlock).toEqual(minimalExample)
+    expect(minimalExample.version).toBeTruthy()
+  })
 })

package/src/types/MapConfig.ts

@@ -10,6 +10,20 @@ import { MarkupConfig } from '@cdc/core/types/MarkupVariable'
 export type RuntimeFilters = VizFilter[] & { fromHash?: number }
 
 type MapVisualSettings = {
+  /** border - shows or hides component border */
+  border?: boolean
+  /** borderColorTheme - use themed border color */
+  borderColorTheme?: boolean
+  /** accent - use accent styling */
+  accent?: boolean
+  /** background - use themed background color */
+  background?: boolean
+  /** hideBackgroundColor - hide default background color */
+  hideBackgroundColor?: boolean
+  /** tp5Treatment - render the TP5 callout shell */
+  tp5Treatment?: boolean
+  /** tp5Background - enable the TP5 cyan background */
+  tp5Background?: boolean
   /** minBubbleSize - Minimum Circle Size when the map has a type of bubble */
   minBubbleSize: number
   /** maxBubbleSize - Maximum Circle Size when the map has a type of bubble */
@@ -29,9 +43,9 @@ type MapVisualSettings = {
 }
 
 export type PatternSelection = {
-  // dropdown selection for getting the column used on a pattern
+  // column used to match patterns; empty string means match dataValue across all row columns
   dataKey: string
-  // text field input to match values found in the column
+  // value to match (numeric-like values are compared numerically)
   dataValue: string
   // style of pattern to use
   pattern: 'lines' | 'circles' | 'waves'
@@ -51,7 +65,8 @@ type BaseColumnProperties = Pick<EditorColumnProperties, 'name'> &
 type SimpleColumnProperties = Pick<EditorColumnProperties, 'name'>
 
 // Specific column types for better semantics
-type GeoColumnProperties = BaseColumnProperties
+type GeoColumnProperties = BaseColumnProperties & { displayColumn?: string }
+type HSAColumnProperties = SimpleColumnProperties
 type LatitudeColumnProperties = SimpleColumnProperties
 type LongitudeColumnProperties = SimpleColumnProperties
 type NavigateColumnProperties = SimpleColumnProperties
@@ -100,6 +115,7 @@ export type MapConfig = Visualization & {
   color: string
   columns: {
     geo: GeoColumnProperties
+    hsa: HSAColumnProperties
     primary: PrimaryColumnProperties
     navigate: NavigateColumnProperties
     latitude: LatitudeColumnProperties
@@ -150,12 +166,16 @@ export type MapConfig = Visualization & {
     showDownloadImgButton: boolean
     includeContextInDownload?: boolean
     showDownloadPdfButton: boolean
+    showHSABoundaries?: boolean
+    showNeighboringStates?: boolean
     showSidebar: boolean
+    showStateDropdown?: boolean
     showTitle: boolean
     statesPicked: {
       fipsCode: string
       stateName: string
     }[]
+    hideUnselectedStates?: boolean
     countriesPicked?: {
       iso: string
       name: string
@@ -197,16 +217,20 @@ export type MapConfig = Visualization & {
     limitHeight: boolean
     height: string
     caption: string
+    download: boolean
+    downloadDataLabel?: string
+    downloadImageLabel?: string
+    downloadUrlLabel?: string
     showDownloadUrl: boolean
     showFullGeoNameInCSV: boolean
     forceDisplay: boolean
-    download: boolean
     indexLabel: string
     cellMinWidth: string
   }
   tooltips: {
     appearanceType: 'hover' | 'click'
     linkLabel: string
+    noDataLabel?: string
     opacity: number
   }
   runtime: {

package/src/types/MapContext.ts

@@ -7,12 +7,15 @@ import { MutableRefObject } from 'react'
 
 export type MapContext = {
   currentViewport: ViewPort
+  customNavigationHandler?: Function
   vizViewport?: ViewPort
   content: { geoName: string; keyedData: Record<string, any> }
   dimensions: DimensionsType
   displayDataAsText: string | number
-  displayGeoName: (key: string, convertFipsCodes: boolean) => string
+  displayGeoName: (key: string, displayOverride?: string) => string
   filteredCountryCode: string
+  filteredCountyCode: string
+  filteredStateCode: string
   generateRuntimeData: (
     configObj: MapConfig,
     filters: VizFilter[],
@@ -36,6 +39,7 @@ export type MapContext = {
   runtimeLegend
   setParentConfig: Function
   setRuntimeData: Function
+  setFilteredStateCountyCode: (stateCode: string, countyCode?: string) => void
   setSharedFilterValue: Function
   setConfig: (newState: MapConfig) => MapConfig
   config: MapConfig

package/topojson-updater/README.txt

@@ -4,7 +4,7 @@ Node script to convert shapefile data from census.gov to topojson, and format/op
 
 
 Usage
-1. Run yarn install at root folder
+1. Run "yarn install" inside the packages/map/topojson-updater folder (this package is not part of the root Yarn workspace)
 2. Download shapefiles from census.gov (https://www.census.gov/geographies/mapping-files/time-series/geo/cartographic-boundary.html) for the year that needs to be supported to the "shapefiles" folder of the project
     - Always choose the options with the smallest file size
     - Shapefiles for both states and counties should be downloaded for each year being added