@cdc/map 4.25.8 → 4.25.11

package/src/types/MapConfig.ts

@@ -3,8 +3,13 @@ import { type Visualization } from '@cdc/core/types/Visualization'
 import { type EditorColumnProperties } from '@cdc/core/types/EditorColumnProperties'
 import { type Version } from '@cdc/core/types/Version'
 import { type VizFilter } from '@cdc/core/types/VizFilter'
+import { type Annotation } from '@cdc/core/types/Annotation'
+import { MarkupConfig } from '@cdc/core/types/MarkupVariable'
 
-export type MapVisualSettings = {
+// Runtime data types
+export type RuntimeFilters = VizFilter[] & { fromHash?: number }
+
+type MapVisualSettings = {
   /** 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 */
@@ -38,16 +43,21 @@ export type PatternSelection = {
   contrastCheck: boolean
 }
 
-export type GeoColumnProperties = Pick<EditorColumnProperties, 'name' | 'label' | 'tooltip' | 'dataTable'>
-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'
->
+// Base column properties with name required, all others optional
+type BaseColumnProperties = Pick<EditorColumnProperties, 'name'> &
+  Partial<Pick<EditorColumnProperties, 'label' | 'tooltip' | 'dataTable' | 'prefix' | 'suffix'>>
+
+// Simple column type for name-only columns
+type SimpleColumnProperties = Pick<EditorColumnProperties, 'name'>
 
-export type LegendShapeItem = {
+// Specific column types for better semantics
+type GeoColumnProperties = BaseColumnProperties
+type LatitudeColumnProperties = SimpleColumnProperties
+type LongitudeColumnProperties = SimpleColumnProperties
+type NavigateColumnProperties = SimpleColumnProperties
+type PrimaryColumnProperties = BaseColumnProperties
+
+type LegendShapeItem = {
   column: string
   key: string
   operator: '=' | '≠' | '<' | '>' | '<=' | '>='
@@ -55,13 +65,13 @@ export type LegendShapeItem = {
   value: string
 }
 
-export type LegendGrouping = {
+type LegendGrouping = {
   legendTitle: string
   legendDescription: string
   items: LegendShapeItem[]
 }
 
-export type HexMapSettings = {
+type HexMapSettings = {
   type: 'shapes' | 'standard'
   shapeGroups: LegendGrouping[]
 }
@@ -70,15 +80,24 @@ 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`)
+  [key: string]: string | number | boolean | null | undefined // allowing primitive data types for dynamic columns
+}
+
+export type SmallMultiples = {
+  mode?: 'by-column'
+  tileColumn?: string
+  tilesPerRowDesktop?: number
+  tilesPerRowMobile?: number
+  tileOrderType?: 'asc' | 'desc' | 'custom'
+  tileOrder?: string[]
+  tileTitles?: { [key: string]: string }
+  synchronizedTooltips?: boolean
 }
 
 export type MapConfig = Visualization & {
   annotations: Annotation[]
   // map color palette
   color: string
-  // custom color palette
-  customColors: string[]
   columns: {
     geo: GeoColumnProperties
     primary: PrimaryColumnProperties
@@ -93,6 +112,7 @@ export type MapConfig = Visualization & {
   filters: VizFilter[]
   general: {
     navigationTarget: '_self' | '_blank'
+    noDataMessage: string // single-state no data message
     subtext: string
     introText: string
     allowMapZoom: boolean
@@ -121,6 +141,10 @@ export type MapConfig = Visualization & {
     language: string
     palette: {
       isReversed: boolean
+      name: string
+      version: string
+      customColors?: string[]
+      customColorsOrdered?: string[]
     }
     showDownloadMediaButton: boolean
     showDownloadImgButton: boolean
@@ -131,6 +155,11 @@ export type MapConfig = Visualization & {
       fipsCode: string
       stateName: string
     }[]
+    countriesPicked?: {
+      iso: string
+      name: string
+    }[]
+    hideUnselectedCountries?: boolean // When true, hide unselected countries; when false (default), gray them out
     territoriesAlwaysShow: boolean
     territoriesLabel: string
     title: string
@@ -180,8 +209,6 @@ 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: {
@@ -192,8 +219,9 @@ export type MapConfig = Visualization & {
   filterBehavior: string
   filterIntro: string
   visual: MapVisualSettings
+  smallMultiples?: SmallMultiples
   // visualization type
   type: 'map'
   // version of the map
   version: Version
-}
+} & MarkupConfig

package/src/types/MapContext.ts

@@ -2,12 +2,13 @@ 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'
+import { MapRefInterface } from '../hooks/useProgrammaticMapTooltip'
+import { MutableRefObject } from 'react'
 
 export type MapContext = {
   currentViewport: ViewPort
+  vizViewport?: ViewPort
   content: { geoName: string; keyedData: Record<string, any> }
-  data: DataRow[]
   dimensions: DimensionsType
   displayDataAsText: string | number
   displayGeoName: (key: string, convertFipsCodes: boolean) => string
@@ -22,23 +23,19 @@ export type MapContext = {
   handleCircleClick: Function
   handleDragStateChange: Function
   isDraggingAnnotation: boolean
-  innerContainerRef: RefObject<HTMLDivElement>
   isDashboard: boolean
   isEditor: boolean
   isFilterValueSupported: boolean
+  useDynamicViewbox?: boolean
   loadConfig: (configObj: MapConfig) => void
   logo: string
   mapId: string
   position: 'side' | 'top' | 'bottom'
   resetLegendToggles: Function
   runtimeFilters: Function
-  legendMemo: Function
-  legendSpecialClassLastMemo: Function
   runtimeLegend
   setParentConfig: Function
   setRuntimeData: Function
-  setRuntimeFilters: Function
-  setRuntimeLegend: Function
   setSharedFilterValue: Function
   setConfig: (newState: MapConfig) => MapConfig
   config: MapConfig
@@ -50,4 +47,6 @@ export type MapContext = {
   runtimeData: Object[]
   tooltipId: string
   interactionLabel?: string
+  handleSmallMultipleHover?: (geoId: string | null, yCoordinate?: number) => void
+  mapRefForSync?: MutableRefObject<MapRefInterface | null>
 }

package/src/types/runtimeLegend.ts

@@ -1 +1,17 @@
-export type RuntimeLegend = { disabled; bin; color; special }[]
+type RuntimeLegendItem = {
+  disabled?: boolean
+  bin?: number
+  color?: string
+  special?: boolean
+  value?: string | number
+  label?: string
+  min?: number
+  max?: number
+}
+
+export type RuntimeLegend = {
+  items: RuntimeLegendItem[]
+  disabledAmt?: number
+  fromHash?: number
+  runtimeDataHash?: number
+}

package/vite.config.js

@@ -1,9 +1,4 @@
-import GenerateViteConfig from '../../generateViteConfig.js'
+import GenerateViteConfig from '@cdc/core/generateViteConfig.js'
 import { moduleName } from './package.json'
 
-export default GenerateViteConfig(moduleName, null, {
-  jsxImportSource: '@emotion/react',
-  babel: {
-    plugins: ['@emotion/babel-plugin']
-  }
-})
+export default GenerateViteConfig(moduleName)

package/vitest.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['../../vitest.setup.ts'],
+    exclude: [
+      '**/node_modules/**',
+      '**/dist/**',
+      '**/.storybook/**',
+      '**/*.stories.*',
+      '**/storybook-static/**'
+    ]
+  }
+})

package/src/components/DataTable.tsx

@@ -1,385 +0,0 @@
-import React, { useEffect, useState, memo, useContext } from 'react'
-
-import Papa from 'papaparse'
-import ExternalIcon from '../images/external-link.svg' // TODO: Move to Icon component
-import Icon from '@cdc/core/components/ui/Icon'
-
-import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import LegendShape from '@cdc/core/components/LegendShape'
-import MediaControls from '@cdc/core/components/MediaControls'
-import SkipTo from '@cdc/core/components/elements/SkipTo'
-
-import Loading from '@cdc/core/components/Loading'
-import { navigationHandler } from '../helpers'
-import ConfigContext, { MapDispatchContext } from '../context'
-import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
-
-const DataTable = props => {
-  const {
-    state,
-    tableTitle,
-    indexTitle,
-    mapTitle,
-    rawData,
-    runtimeData,
-    headerColor,
-    expandDataTable,
-    columns,
-    displayDataAsText,
-    applyLegendToRow,
-    displayGeoName,
-    formatLegendLocation,
-    tabbingId,
-    interactionLabel
-  } = props
-
-  const dispatch = useContext(MapDispatchContext)
-  const { currentViewport: viewport } = useContext(ConfigContext)
-  const [expanded, setExpanded] = useState(expandDataTable)
-  const [sortBy, setSortBy] = useState({ column: 'geo', asc: false })
-  const [accessibilityLabel, setAccessibilityLabel] = useState('')
-  const fileName = `${mapTitle || 'data-table'}.csv`
-
-  // Catch all sorting method used on load by default but also on user click
-  // Having a custom method means we can add in any business logic we want going forward
-  const customSort = (a, b) => {
-    const digitRegex = /\d+/
-
-    const hasNumber = value => digitRegex.test(value)
-
-    // force null and undefined to the bottom
-    a = a === null || a === undefined ? '' : a
-    b = b === null || b === undefined ? '' : b
-
-    // convert any strings that are actually numbers to proper data type
-    const aNum = Number(a)
-
-    if (!Number.isNaN(aNum)) {
-      a = aNum
-    }
-
-    const bNum = Number(b)
-
-    if (!Number.isNaN(bNum)) {
-      b = bNum
-    }
-
-    // remove iso code prefixes
-    if (typeof a === 'string') {
-      a = a.replace('us-', '')
-      a = displayGeoName(a)
-    }
-
-    if (typeof b === 'string') {
-      b = b.replace('us-', '')
-      b = displayGeoName(b)
-    }
-
-    // force any string values to lowercase
-    a = typeof a === 'string' ? a.toLowerCase() : a
-    b = typeof b === 'string' ? b.toLowerCase() : b
-
-    // If the string contains a number, remove the text from the value and only sort by the number. Only uses the first number it finds.
-    if (typeof a === 'string' && hasNumber(a) === true) {
-      a = a.match(digitRegex)[0]
-
-      a = Number(a)
-    }
-
-    if (typeof b === 'string' && hasNumber(b) === true) {
-      b = b.match(digitRegex)[0]
-
-      b = Number(b)
-    }
-
-    // When comparing a number to a string, always send string to bottom
-    if (typeof a === 'number' && typeof b === 'string') {
-      return 1
-    }
-
-    if (typeof b === 'number' && typeof a === 'string') {
-      return -1
-    }
-
-    // Return either 1 or -1 to indicate a sort priority
-    if (a > b) {
-      return 1
-    }
-    if (a < b) {
-      return -1
-    }
-    // returning 0, undefined or any falsey value will use subsequent sorts or
-    // the index as a tiebreaker
-    return 0
-  }
-
-  // Optionally wrap cell with anchor if config defines a navigation url
-  const getCellAnchor = (markup, row) => {
-    if (columns.navigate && row[columns.navigate.name]) {
-      markup = (
-        <span
-          onClick={() => navigationHandler(state.general.navigationTarget, row[columns.navigate.name])}
-          className='table-link'
-          title='Click for more information (Opens in a new window)'
-          role='link'
-          tabIndex='0'
-          onKeyDown={e => {
-            if (e.keyCode === 13) {
-              navigationHandler(state.general.navigationTarget, row[columns.navigate.name])
-            }
-          }}
-        >
-          {markup}
-          <ExternalIcon className='inline-icon' />
-        </span>
-      )
-    }
-
-    return markup
-  }
-
-  const rand = Math.random().toString(16).substr(2, 8)
-  const skipId = `btn__${rand}`
-
-  const mapLookup = {
-    'us-county': 'United States County Map',
-    'single-state': 'State Map',
-    us: 'United States Map',
-    world: 'World Map'
-  }
-
-  const DownloadButton = memo(() => {
-    let csvData
-    if (state.general.type === 'bubble' || !state.table.showFullGeoNameInCSV) {
-      // Just Unparse
-      csvData = Papa.unparse(rawData)
-    } else if (state.general.geoType !== 'us-county' || state.general.type === 'us-geocode') {
-      // Unparse + Add column for full Geo name
-      csvData = Papa.unparse(rawData.map(row => ({ FullGeoName: displayGeoName(row[state.columns.geo.name]), ...row })))
-    } else {
-      // Unparse + Add column for full Geo name
-      csvData = Papa.unparse(
-        rawData.map(row => ({ FullGeoName: formatLegendLocation(row[state.columns.geo.name]), ...row }))
-      )
-    }
-
-    const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' })
-
-    const saveBlob = () => {
-      //@ts-ignore
-      if (typeof window.navigator.msSaveBlob === 'function') {
-        //@ts-ignore
-        navigator.msSaveBlob(blob, fileName)
-      }
-    }
-
-    return (
-      <a
-        download={fileName}
-        type='button'
-        onClick={() => {
-          saveBlob
-          publishAnalyticsEvent('data_downloaded', 'click', interactionLabel)
-        }}
-        href={URL.createObjectURL(blob)}
-        aria-label='Download this data in a CSV file format.'
-        className={`${headerColor} no-border`}
-        id={`${skipId}`}
-        data-html2canvas-ignore={true}
-        role='button'
-      >
-        Download Data (CSV)
-      </a>
-    )
-  }, [rawData, state.table])
-
-  const TableMediaControls = ({ belowTable }) => {
-    return (
-      <MediaControls.Section classes={['download-links']}>
-        <MediaControls.Link config={state} interactionLabel={interactionLabel} />
-        {state.table.download && <DownloadButton />}
-      </MediaControls.Section>
-    )
-  }
-
-  // Change accessibility label depending on expanded status
-  useEffect(() => {
-    const expandedLabel = 'Accessible data table.'
-    const collapsedLabel =
-      'Accessible data table. This table is currently collapsed visually but can still be read using a screen reader.'
-
-    if (expanded === true && accessibilityLabel !== expandedLabel) {
-      setAccessibilityLabel(expandedLabel)
-    }
-
-    if (expanded === false && accessibilityLabel !== collapsedLabel) {
-      setAccessibilityLabel(collapsedLabel)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [expanded])
-
-  if (!state.data) return <Loading />
-
-  const rows = Object.keys(runtimeData)
-    .filter(row => applyLegendToRow(runtimeData[row], state))
-    .sort((a, b) => {
-      const sortVal = customSort(
-        runtimeData[a][state.columns[sortBy.column].name],
-        runtimeData[b][state.columns[sortBy.column].name]
-      )
-      if (!sortBy.asc) return sortVal
-      if (sortVal === 0) return 0
-      if (sortVal < 0) return 1
-      return -1
-    })
-
-  return (
-    <ErrorBoundary component='DataTable'>
-      {!state.table.showDownloadLinkBelow && <TableMediaControls />}
-      <section
-        id={tabbingId.replace('#', '')}
-        className={`data-table-container ${viewport}`}
-        aria-label={accessibilityLabel}
-      >
-        <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
-        <div
-          className={expanded ? 'data-table-heading' : 'collapsed data-table-heading'}
-          onClick={() => {
-            setExpanded(!expanded)
-          }}
-          tabIndex='0'
-          onKeyDown={e => {
-            if (e.keyCode === 13) {
-              setExpanded(!expanded)
-            }
-          }}
-        >
-          <Icon display={expanded ? 'minus' : 'plus'} base />
-          {tableTitle}
-        </div>
-        <div
-          className='table-container'
-          style={{ maxHeight: state.dataTable.limitHeight && `${state.dataTable.height}px`, overflowY: 'scroll' }}
-        >
-          <table
-            height={expanded ? null : 0}
-            role='table'
-            aria-live='assertive'
-            className={expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}
-            hidden={!expanded}
-            aria-rowcount={state?.data.length ? state.data.length : '-1'}
-          >
-            <caption className='cdcdataviz-sr-only'>
-              {state.dataTable.caption
-                ? state.dataTable.caption
-                : `Datatable showing data for the ${mapLookup[state.general.geoType]} figure.`}
-            </caption>
-            <thead style={{ position: 'sticky', top: 0, zIndex: 999 }}>
-              <tr>
-                {Object.keys(columns)
-                  .filter(column => columns[column].dataTable === true && columns[column].name)
-                  .map(column => {
-                    let text
-                    if (column !== 'geo') {
-                      text = columns[column].label ? columns[column].label : columns[column].name
-                    } else {
-                      text = indexTitle || 'Location'
-                    }
-
-                    return (
-                      <th
-                        key={`col-header-${column}`}
-                        tabIndex={0}
-                        title={text}
-                        role='columnheader'
-                        scope='col'
-                        onClick={() => {
-                          setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false })
-                        }}
-                        onKeyDown={e => {
-                          if (e.keyCode === 13) {
-                            setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false })
-                          }
-                        }}
-                        className={
-                          sortBy.column === column ? (sortBy.asc ? 'sort sort-asc' : 'sort sort-desc') : 'sort'
-                        }
-                        {...(sortBy.column === column
-                          ? sortBy.asc
-                            ? { 'aria-sort': 'ascending' }
-                            : { 'aria-sort': 'descending' }
-                          : null)}
-                      >
-                        {text}
-                        <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${
-                          sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'
-                        } order`}</span>
-                      </th>
-                    )
-                  })}
-              </tr>
-            </thead>
-            <tbody>
-              {rows.map(row => {
-                return (
-                  <tr role='row'>
-                    {Object.keys(columns)
-                      .filter(column => columns[column].dataTable === true && columns[column].name)
-                      .map(column => {
-                        let cellValue
-
-                        if (column === 'geo') {
-                          const rowObj = runtimeData[row]
-                          const legendColor = applyLegendToRow(rowObj, state)
-
-                          var labelValue
-                          if (state.general.geoType !== 'us-county' || state.general.type === 'us-geocode') {
-                            labelValue = displayGeoName(row)
-                          } else {
-                            labelValue = formatLegendLocation(row)
-                          }
-
-                          labelValue = getCellAnchor(labelValue, rowObj)
-
-                          cellValue = (
-                            <>
-                              <LegendShape fill={legendColor[0]} />
-                              {labelValue}
-                            </>
-                          )
-                        } else {
-                          cellValue = displayDataAsText(runtimeData[row][state.columns[column].name], column, state)
-                        }
-
-                        return (
-                          <td
-                            tabIndex='0'
-                            role='gridcell'
-                            onClick={e =>
-                              state.general.type === 'bubble' &&
-                              state.general.allowMapZoom &&
-                              state.general.geoType === 'world'
-                                ? dispatch({ type: 'SET_FILTERED_COUNTRY_CODE', payload: row })
-                                : true
-                            }
-                          >
-                            {cellValue}
-                          </td>
-                        )
-                      })}
-                  </tr>
-                )
-              })}
-            </tbody>
-          </table>
-        </div>
-      </section>
-      {state.table.showDownloadLinkBelow && <TableMediaControls belowTable={true} />}
-      <div id={skipId} className='cdcdataviz-sr-only'>
-        Skipped data table.
-      </div>
-    </ErrorBoundary>
-  )
-}
-
-export default DataTable

package/src/components/EditorPanel/components/Inputs.tsx

@@ -1,59 +0,0 @@
-import { memo, useState, useEffect } from 'react'
-import { useDebounce } from 'use-debounce'
-
-// todo: look into combining these with core
-const CheckBox = memo(({ label, value, fieldName, section = null, subsection = null, tooltip, updateField, ...attributes }) => (
-  <label className='checkbox column-heading'>
-    <input
-      type='checkbox'
-      name={fieldName}
-      checked={value}
-      onChange={e => {
-        updateField(section, subsection, fieldName, !value)
-      }}
-      {...attributes}
-    />
-    <span className='edit-label'>
-      {label}
-      {tooltip}
-    </span>
-  </label>
-))
-
-const TextField = ({ label, section = null, subsection = null, fieldName, updateField, value: stateValue, type = 'input', tooltip, ...attributes }) => {
-  const [value, setValue] = useState(stateValue)
-
-  const [debouncedValue] = useDebounce(value, 500)
-
-  useEffect(() => {
-    if ('string' === typeof debouncedValue && stateValue !== debouncedValue) {
-      updateField(section, subsection, fieldName, debouncedValue)
-    }
-  }, [debouncedValue]) // eslint-disable-line
-
-  let name = subsection ? `${section}-${subsection}-${fieldName}` : `${section}-${subsection}-${fieldName}`
-
-  const onChange = e => setValue(e.target.value)
-
-  let formElement = <input type='text' name={name} onChange={onChange} {...attributes} value={value} />
-
-  if ('textarea' === type) {
-    formElement = <textarea name={name} onChange={onChange} {...attributes} value={value}></textarea>
-  }
-
-  if ('number' === type) {
-    formElement = <input type='number' name={name} onChange={onChange} {...attributes} value={value} />
-  }
-
-  return (
-    <label>
-      <span className='edit-label column-heading'>
-        {label}
-        {tooltip}
-      </span>
-      {formElement}
-    </label>
-  )
-}
-
-export { CheckBox, TextField }

package/src/coreStyles_map.scss

@@ -1,3 +0,0 @@
-@import '@cdc/core/styles/base';
-@import '@cdc/core/styles/heading-colors';
-@import '@cdc/core/styles/v2/components/ui/tooltip';