@cdc/map 4.25.3 → 4.25.6

package/src/store/map.actions.ts

@@ -0,0 +1,46 @@
+import { MapConfig, Coordinate } from '../types/MapConfig'
+import { GeneratedLegend } from '../hooks/useGenerateRuntimeLegend'
+import { VizFilter } from '@cdc/core/types/VizFilter'
+import { type Action } from '@cdc/core/types/Action'
+import { RuntimeData } from '../types/RuntimeData'
+import { Modal } from '../types/Modal'
+
+// Action Types
+type SET_ACCESSIBLE_STATUS = Action<'SET_ACCESSIBLE_STATUS', string>
+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_IS_DRAGGING_ANNOTATION = Action<'SET_IS_DRAGGING_ANNOTATION', boolean>
+type SET_LOADING = Action<'SET_LOADING', boolean>
+type SET_MODAL = Action<'SET_MODAL', Modal>
+type SET_POSITION = Action<'SET_POSITION', { coordinates: Coordinate; zoom: number }>
+type SET_REQUIRED_COLUMNS = Action<'SET_REQUIRED_COLUMNS', string[]>
+type SET_RUNTIME_DATA = Action<'SET_RUNTIME_DATA', RuntimeData>
+type SET_RUNTIME_FILTERS = Action<'SET_RUNTIME_FILTERS', VizFilter[]>
+type SET_RUNTIME_LEGEND = Action<'SET_RUNTIME_LEGEND', GeneratedLegend | []>
+type SET_SCALE = Action<'SET_SCALE', number>
+type SET_STATE_TO_SHOW = Action<'SET_STATE_TO_SHOW', string>
+type SET_TOPO_DATA = Action<'SET_TOPO_DATA', any>
+type SET_TRANSLATE = Action<'SET_TRANSLATE', [number, number]>
+
+export type MapActions =
+  | SET_ACCESSIBLE_STATUS
+  | SET_CONFIG
+  | SET_COVE_LOADED_HAS_RAN
+  | SET_DISPLAY_PANEL
+  | SET_FILTERED_COUNTRY_CODE
+  | SET_IS_DRAGGING_ANNOTATION
+  | SET_LOADING
+  | SET_MODAL
+  | SET_POSITION
+  | SET_REQUIRED_COLUMNS
+  | SET_RUNTIME_DATA
+  | SET_RUNTIME_FILTERS
+  | SET_RUNTIME_LEGEND
+  | SET_SCALE
+  | SET_STATE_TO_SHOW
+  | SET_TOPO_DATA
+  | SET_TRANSLATE
+
+export default MapActions

package/src/store/map.reducer.ts

@@ -0,0 +1,96 @@
+import { MapConfig } from '../types/MapConfig'
+import MapActions from './map.actions'
+import defaults from './../data/initial-state'
+import { devToolsWrapper } from '@cdc/core/helpers/withDevTools'
+import _ from 'lodash'
+
+export const getInitialState = (configObj = {}): MapState => {
+  return {
+    dataUrl: configObj.dataUrl || '',
+    config: _.merge({}, defaults, configObj),
+    loading: false,
+    accessibleStatus: '',
+    coveLoadedHasRan: false,
+    displayPanel: false,
+    filteredCountryCode: '',
+    isDraggingAnnotation: false,
+    topoData: null,
+    translate: [0, 0],
+    position: { coordinates: [0, 0], zoom: 1 },
+    projection: null,
+    requiredColumns: [],
+    scale: 1,
+    modal: null,
+    runtimeData: { init: true },
+    runtimeFilters: [],
+    runtimeLegend: [],
+    stateToShow: ''
+  }
+}
+
+export type MapState = {
+  config: MapConfig
+  loading: boolean
+  accessibleStatus: string
+  coveLoadedHasRan: boolean
+  displayPanel: boolean
+  filteredCountryCode: string
+  isDraggingAnnotation: boolean
+  topoData: object | null
+  translate: number[]
+  position: { coordinates: number[]; zoom: number }
+  projection: object | null
+  requiredColumns: string[]
+  scale: number
+  modal: object | null
+  runtimeData: object
+  runtimeFilters: object[]
+  runtimeLegend: object[]
+  stateToShow: string
+  dataUrl: string
+}
+
+const reducer = (state: MapState, action: MapActions): MapState => {
+  switch (action.type) {
+    case 'SET_CONFIG':
+      return { ...state, config: action.payload }
+    case 'SET_LOADING':
+      return { ...state, loading: action.payload }
+    case 'SET_ACCESSIBLE_STATUS':
+      return { ...state, accessibleStatus: action.payload }
+    case 'SET_COVE_LOADED_HAS_RAN':
+      return { ...state, coveLoadedHasRan: action.payload }
+    case 'SET_DISPLAY_PANEL':
+      return { ...state, displayPanel: action.payload }
+    case 'SET_FILTERED_COUNTRY_CODE':
+      return { ...state, filteredCountryCode: action.payload }
+    case 'SET_IS_DRAGGING_ANNOTATION':
+      return { ...state, isDraggingAnnotation: action.payload }
+    case 'SET_TOPO_DATA':
+      return { ...state, topoData: action.payload }
+    case 'SET_TRANSLATE':
+      return { ...state, translate: action.payload }
+    case 'SET_POSITION':
+      return { ...state, position: action.payload }
+    case 'SET_REQUIRED_COLUMNS':
+      return { ...state, requiredColumns: action.payload }
+    case 'SET_SCALE':
+      return { ...state, scale: action.payload }
+    case 'SET_MODAL':
+      return { ...state, modal: action.payload }
+    case 'SET_RUNTIME_DATA':
+      return { ...state, runtimeData: action.payload }
+    case 'SET_RUNTIME_FILTERS':
+      return { ...state, runtimeFilters: action.payload }
+    case 'SET_RUNTIME_LEGEND':
+      return { ...state, runtimeLegend: action.payload }
+    case 'SET_STATE_TO_SHOW':
+      return { ...state, stateToShow: action.payload }
+    default:
+      return state
+  }
+}
+
+export const mapReducer = devToolsWrapper(reducer)
+
+export type MapReducerType<MapState, MapActions> = (state: MapState, action: MapActions) => MapState

package/src/types/Annotations.ts

@@ -0,0 +1,24 @@
+type Annotation = {
+  /** The x-coordinate of the annotation */
+  x: number
+  /** The y-coordinate of the annotation */
+  y: number
+  /** The x-offset for the annotation's text */
+  dx: number
+  /** The y-offset for the annotation's text */
+  dy: number
+  /** The opacity level of the annotation */
+  opacity: number
+  /** The text content of the annotation */
+  text: string
+  /** The type of connection for the annotation */
+  connectionType: string
+  edit: {
+    /** Indicates if the label can be edited */
+    label: boolean
+    /** Indicates if the subject can be edited */
+    subject: boolean
+  }
+  /** The type of marker used for the annotation */
+  marker: 'arrow' | 'circle'
+}

package/src/types/MapConfig.ts

@@ -23,7 +23,7 @@ export type MapVisualSettings = {
   additionalCityStyles: [] | [{ label: string; column: string; value: string; shape: string }]
 }
 
-type PatternSelection = {
+export type PatternSelection = {
   // dropdown selection for getting the column used on a pattern
   dataKey: string
   // text field input to match values found in the column
@@ -68,9 +68,17 @@ export type HexMapSettings = {
 
 export type Coordinate = [number, number]
 
+export type DataRow = {
+  uid?: string // optional 'uid' property
+  [key: string]: any // allowing any additional properties with a dynamic key (e.g., for `configPrimaryName`)
+}
+
 export type MapConfig = Visualization & {
-  color: string // map color palette
-  customColors: string[] // custom color palette
+  annotations: Annotation[]
+  // map color palette
+  color: string
+  // custom color palette
+  customColors: string[]
   columns: {
     geo: GeoColumnProperties
     primary: PrimaryColumnProperties
@@ -80,9 +88,13 @@ export type MapConfig = Visualization & {
     categorical: { name: string }
   }
   dataUrl: string
+  data: DataRow[]
   runtimeDataUrl: string
   filters: VizFilter[]
   general: {
+    navigationTarget: '_self' | '_blank'
+    subtext: string
+    introText: string
     allowMapZoom: boolean
     convertFipsCodes: boolean
     displayAsHex: boolean
@@ -90,6 +102,8 @@ export type MapConfig = Visualization & {
     fullBorder: boolean
     geoBorderColor: string
     geoLabelOverride: string
+    // whether to use the old custom quantile scaling method or new custom quantile scaling method
+    equalNumberOptIn: boolean
     geoType:
       | 'us'
       | 'us-region'
@@ -109,6 +123,8 @@ export type MapConfig = Visualization & {
       isReversed: boolean
     }
     showDownloadMediaButton: boolean
+    showDownloadImgButton: boolean
+    showDownloadPdfButton: boolean
     showSidebar: boolean
     showTitle: boolean
     statePicked: {
@@ -142,6 +158,7 @@ export type MapConfig = Visualization & {
     tickRotation: string
     hideBorder: false
     singleColumnLegend: false
+    separators?: string
   }
   table: {
     label: string
@@ -154,6 +171,7 @@ export type MapConfig = Visualization & {
     forceDisplay: boolean
     download: boolean
     indexLabel: string
+    cellMinWidth: string
   }
   tooltips: {
     appearanceType: 'hover' | 'click'
@@ -175,6 +193,8 @@ export type MapConfig = Visualization & {
   filterBehavior: string
   filterIntro: string
   visual: MapVisualSettings
+  // visualization type
+  type: 'map'
   // version of the map
   version: Version
 }

package/src/types/MapContext.ts

@@ -1,51 +1,52 @@
-import { type MapConfig } from './MapConfig'
+import { DataRow, type MapConfig } from './MapConfig'
 import { type ViewPort } from '@cdc/core/types/ViewPort'
+import { DimensionsType } from '@cdc/core/types/Dimensions'
+import { VizFilter } from '@cdc/core/types/VizFilter'
+import { type RefObject } from 'react'
 
 export type MapContext = {
-  applyLegendToRow
-  applyTooltipsToGeo
   currentViewport: ViewPort
-  data
-  displayDataAsText
-  displayGeoName
-  filteredCountryCode
-  generateColorsArray
-  generateRuntimeData
-  geoClickHandler
+  content: { geoName: string; keyedData: Record<string, any> }
+  data: DataRow[]
+  dimensions: DimensionsType
+  displayDataAsText: string | number
+  displayGeoName: (key: string, convertFipsCodes: boolean) => string
+  filteredCountryCode: string
+  generateRuntimeData: (
+    configObj: MapConfig,
+    filters: VizFilter[],
+    hash: number,
+    test?: boolean
+  ) => { [uid: string]: DataRow }
+  geoClickHandler: (geoDisplayName: string, geoData: object) => void
   handleCircleClick: Function
   handleDragStateChange: Function
   isDraggingAnnotation: boolean
-  hasZoom
-  innerContainerRef
-  isDashboard
-  isDebug
-  isEditor
+  innerContainerRef: RefObject<HTMLDivElement>
+  isDashboard: boolean
+  isEditor: boolean
   isFilterValueSupported: boolean
-  loadConfig
+  loadConfig: (configObj: MapConfig) => void
   logo: string
-  position
-  resetLegendToggles
-  runtimeFilters
+  mapId: string
+  position: 'side' | 'top' | 'bottom'
+  resetLegendToggles: Function
+  runtimeFilters: Function
+  legendMemo: Function
+  legendSpecialClassLastMemo: Function
   runtimeLegend
-  setAccessibleStatus
-  setFilteredCountryCode
-  setParentConfig
-  setPosition
-  setRuntimeData
-  setRuntimeFilters
-  setRuntimeLegend
-  setSharedFilterValue
-  setState: (newState: MapConfig) => MapConfig
-  state: MapConfig
-  viewport
-  setStateToShow: (string) => void
+  setParentConfig: Function
+  setRuntimeData: Function
+  setRuntimeFilters: Function
+  setRuntimeLegend: Function
+  setSharedFilterValue: Function
+  setConfig: (newState: MapConfig) => MapConfig
+  config: MapConfig
+  viewport: ViewPort
   stateToShow: string
   scale: number
   translate: [number, number]
-  topoData
-  setScale: (number) => void
-  setTranslate: ([x, y]: [number, number]) => void
+  topoData: object
   runtimeData: Object[]
   tooltipId: string
-  setTopoData: Function
 }

package/src/types/Modal.ts

@@ -0,0 +1 @@
+export type Modal = { geoName: string; keyedData: Record<string, any>[] }

package/src/types/RuntimeData.ts

@@ -0,0 +1,3 @@
+import { DataRow } from './MapConfig'
+
+export type RuntimeData = { [uid: string]: DataRow }[]

package/examples/private/DEV-9644.json

@@ -1,184 +0,0 @@
-{
-  "annotations": [],
-  "general": {
-    "geoType": "us",
-    "noStateFoundMessage": "Map Unavailable",
-    "annotationDropdownText": "Annotations",
-    "geoBorderColor": "darkGray",
-    "headerColor": "theme-blue",
-    "title": "Number, percentage, and proportion of infants born with use of assisted reproductive technology in 2022, by preterm gestational age and female patient’s reporting area of residence at time of treatment",
-    "showTitle": false,
-    "showSidebar": true,
-    "showDownloadButton": true,
-    "showDownloadMediaButton": false,
-    "displayAsHex": false,
-    "displayStateLabels": false,
-    "territoriesLabel": "Territories",
-    "territoriesAlwaysShow": false,
-    "language": "en",
-    "geoLabelOverride": "",
-    "hasRegions": false,
-    "fullBorder": false,
-    "type": "data",
-    "convertFipsCodes": true,
-    "palette": {
-      "isReversed": false
-    },
-    "allowMapZoom": true,
-    "hideGeoColumnInTooltip": false,
-    "hidePrimaryColumnInTooltip": false,
-    "statePicked": {
-      "fipsCode": "01",
-      "stateName": "Alabama"
-    },
-    "expandDataTable": false
-  },
-  "type": "map",
-  "color": "sequential-blue-2(MPX)",
-  "columns": {
-    "geo": {
-      "name": "State",
-      "label": "Location",
-      "tooltip": false,
-      "dataTable": true
-    },
-    "primary": {
-      "dataTable": true,
-      "tooltip": true,
-      "prefix": "",
-      "suffix": "",
-      "name": "Ranges",
-      "label": "",
-      "roundToPlace": "1"
-    },
-    "navigate": {
-      "name": ""
-    },
-    "latitude": {
-      "name": ""
-    },
-    "longitude": {
-      "name": ""
-    }
-  },
-  "legend": {
-    "descriptions": {
-      "0,0": [
-        "National Rate: 17.3"
-      ],
-      "0,1": [
-        "National Rate: 4.3"
-      ]
-    },
-    "specialClasses": [],
-    "unified": false,
-    "singleColumn": true,
-    "singleRow": false,
-    "verticalSorted": false,
-    "showSpecialClassesLast": false,
-    "dynamicDescription": true,
-    "type": "category",
-    "numberOfItems": 5,
-    "position": "side",
-    "title": "",
-    "style": "circles",
-    "subStyle": "linear blocks",
-    "tickRotation": "",
-    "singleColumnLegend": false,
-    "hideBorder": false,
-    "categoryValuesOrder": [
-      "20.6 - 23.3",
-      "23.4 - 28.3",
-      "18.5 - 20.5",
-      "10.2 - 15.5",
-      "15.6 - 18.4"
-    ]
-  },
-  "filters": [
-    {
-      "order": "asc",
-      "label": "Select a Measure",
-      "columnName": "Year",
-      "values": [
-        "Percentages of preterm infants conceived through ART",
-        "Proportion of infants conceived through ART that were born preterm among all preterm births "
-      ],
-      "active": "Percentages of preterm infants conceived through ART",
-      "filterStyle": "dropdown"
-    }
-  ],
-  "table": {
-    "wrapColumns": false,
-    "label": "Data Table",
-    "expanded": false,
-    "limitHeight": false,
-    "height": "",
-    "caption": "",
-    "showDownloadUrl": false,
-    "showDataTableLink": false,
-    "showFullGeoNameInCSV": false,
-    "forceDisplay": true,
-    "download": true,
-    "indexLabel": ""
-  },
-  "tooltips": {
-    "appearanceType": "hover",
-    "linkLabel": "Learn More",
-    "capitalizeLabels": true,
-    "opacity": 90
-  },
-  "visual": {
-    "minBubbleSize": 1,
-    "maxBubbleSize": 20,
-    "extraBubbleBorder": false,
-    "cityStyle": "circle",
-    "cityStyleLabel": "",
-    "showBubbleZeros": false,
-    "additionalCityStyles": [],
-    "geoCodeCircleSize": 8
-  },
-  "mapPosition": {
-    "coordinates": [
-      0,
-      30
-    ],
-    "zoom": 1
-  },
-  "map": {
-    "layers": [],
-    "patterns": []
-  },
-  "hexMap": {
-    "type": "",
-    "shapeGroups": [
-      {
-        "legendTitle": "",
-        "legendDescription": "",
-        "items": [
-          {
-            "key": "",
-            "shape": "Arrow Up",
-            "column": "",
-            "operator": "=",
-            "value": ""
-          }
-        ]
-      }
-    ]
-  },
-  "filterBehavior": "Filter Change",
-  "openModal": true,
-  "uid": "map1728585388205",
-  "dataDescription": {
-    "horizontal": false,
-    "series": false
-  },
-  "dataKey": "table - 6 dashboard.csv",
-  "version": "4.24.9",
-  "editor": {
-    "activeFilterValueForDescription": [
-      0,
-      0
-    ]
-  }
-}