@cdc/map 4.25.3 → 4.25.6

package/src/helpers/applyColorToLegend.ts

@@ -1,80 +1,55 @@
 import colorPalettes from '@cdc/core/data/colorPalettes'
 import chroma from 'chroma-js'
-import { type ChartConfig } from '@cdc/chart/src/types/ChartConfig'
-import isOlderVersion from '@cdc/core/helpers/isOlderVersion'
+import { type MapConfig } from '@cdc/map/src/types/MapConfig'
+import { colorDistributions } from './colorDistributions'
+
+type LegendItem = {
+  special: boolean
+}
 
 /**
  * applyColorToLegend
  * @param legendIdx legend item index
  * @param config chart config
  * @param result hash of legend items
- * @returns
+ * @returns string - the corresponding color for the legend item
  */
-export const applyColorToLegend = (legendIdx: number, config: ChartConfig, result = []) => {
-  try {
-    if (!config) throw new Error('Config is required')
-
-    const colorDistributions = {
-      1: [1],
-      2: [1, 3],
-      3: [1, 3, 5],
-      4: [0, 2, 4, 6],
-      5: [0, 2, 4, 6, 7],
-      6: [0, 2, 3, 4, 5, 7],
-      7: [0, 2, 3, 4, 5, 6, 7],
-      8: [0, 2, 3, 4, 5, 6, 7, 8],
-      9: [0, 1, 2, 3, 4, 5, 6, 7, 8],
-      10: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
-    }
-
-    const specialClasses = config?.legend?.specialClasses
-    const { general } = config || {}
-    // Default to "bluegreen" color scheme if the passed color isn't valid
-    let mapColorPalette = config.customColors || colorPalettes[config.color] || colorPalettes['bluegreen']
-
-    // Handle Region Maps need for a 10th color
-    if (general.geoType === 'us-region' && mapColorPalette.length < 10 && mapColorPalette.length > 8) {
-      if (!general.palette.isReversed) {
-        mapColorPalette.push(chroma(mapColorPalette[8]).darken(0.75).hex())
-      } else {
-        mapColorPalette.unshift(chroma(mapColorPalette[0]).darken(0.75).hex())
-      }
-    }
-
-    let colorIdx = legendIdx - specialClasses.length
+export const applyColorToLegend = (legendIdx: number, config: MapConfig, result: LegendItem[] = []): string => {
+  if (!config) throw new Error('Config is required')
+
+  const { legend, customColors, general, color } = config
+  const { geoType, palette } = general
+  const specialClasses = legend?.specialClasses ?? []
+  const mapColorPalette = customColors ?? colorPalettes[color] ?? colorPalettes['bluegreen']
+
+  // Handle Region Maps need for a 10th color
+  if (geoType === 'us-region' && mapColorPalette.length < 10 && mapColorPalette.length > 8) {
+    const newColor = chroma(mapColorPalette[palette.isReversed ? 0 : 8])
+      .darken(0.75)
+      .hex()
+    palette.isReversed ? mapColorPalette.unshift(newColor) : mapColorPalette.push(newColor)
+  }
 
-    // Special Classes (No Data)
-    if (result[legendIdx].special) {
-      if (!config?.migrations?.addColorMigration) {
-        const specialClassColors = chroma.scale(['#D4D4D4', '#939393']).colors(specialClasses)
-        return specialClassColors[legendIdx]
-      } else {
-        const specialClassColors = ['#A9AEB1', '#71767A']
-        return specialClassColors[legendIdx]
-      }
-    }
+  const colorIdx = legendIdx - specialClasses.length
 
-    if (config.color.includes('qualitative')) return mapColorPalette[colorIdx]
+  // Handle special classes coloring
+  if (result[legendIdx]?.special) {
+    const specialClassColors = chroma.scale(['#D4D4D4', '#939393']).colors(specialClasses.length)
+    return specialClassColors[legendIdx]
+  }
 
-    // If the current version is newer than 4.24.10, use the color palette
-    if (!config?.migrations?.addColorMigration) {
-      if (config.customColors) return mapColorPalette[legendIdx - specialClasses.length]
-    }
+  // Use qualitative color palettes directly
+  if (color.includes('qualitative')) return mapColorPalette[colorIdx]
 
-    let amt = Math.max(result.length - specialClasses.length, 1)
-    let distributionArray = colorDistributions[amt]
-    let specificColor
+  // Determine color distribution
+  const amt =
+    Math.max(result.length - specialClasses.length, 1) < 10
+      ? Math.max(result.length - specialClasses.length, 1)
+      : Object.keys(colorDistributions).length
+  const distributionArray = colorDistributions[amt] ?? []
 
-    if (distributionArray) {
-      specificColor = distributionArray[legendIdx - specialClasses.length]
-    } else if (mapColorPalette[colorIdx]) {
-      specificColor = colorIdx
-    } else {
-      specificColor = mapColorPalette.length - 1
-    }
+  const specificColor =
+    distributionArray[legendIdx - specialClasses.length] ?? mapColorPalette[colorIdx] ?? mapColorPalette.at(-1)
 
-    return mapColorPalette[specificColor]
-  } catch (error) {
-    console.error('Error in applyColorToLegend', error)
-  }
+  return mapColorPalette[specificColor]
 }

package/src/helpers/applyLegendToRow.ts

@@ -0,0 +1,51 @@
+import { generateColorsArray, hashObj } from '../helpers'
+import colorPalettes from '@cdc/core/data/colorPalettes'
+import { MapConfig } from '../types/MapConfig'
+import { type RuntimeLegend } from '../types/runtimeLegend'
+
+type Memo<T> = { current: Map<string, T> }
+
+export const applyLegendToRow = (
+  rowObj: Record<string, any>,
+  config: MapConfig,
+  runtimeLegend: RuntimeLegend,
+  legendMemo: Memo<number>,
+  legendSpecialClassLastMemo: Memo<number>
+): string[] => {
+  if (!config) return null
+
+  const { general, color, legend } = config
+  const { type } = general
+  const { showSpecialClassesLast } = legend
+
+  try {
+    if (!rowObj) {
+      console.error('COVE: No rowObj in applyLegendToRow')
+      return null
+    }
+
+    if (type === 'navigation') {
+      const mapColorPalette = colorPalettes[color] ?? colorPalettes['bluegreenreverse']
+      return generateColorsArray(mapColorPalette[3])
+    }
+
+    const hash = hashObj(rowObj)
+
+    if (!legendMemo.current.has(hash)) {
+      return generateColorsArray()
+    }
+
+    const idx = legendMemo.current.get(hash)!
+    const disabledIdx = showSpecialClassesLast ? legendSpecialClassLastMemo.current.get(hash) ?? idx : idx
+
+    if (runtimeLegend.items?.[disabledIdx]?.disabled) {
+      return generateColorsArray()
+    }
+
+    const legendBinColor = runtimeLegend.items.find(o => o.bin === idx)?.color
+    return generateColorsArray(legendBinColor, runtimeLegend.items[idx]?.special)
+  } catch (e) {
+    console.error('COVE: ', e)
+    return null
+  }
+}

package/src/helpers/colorDistributions.ts

@@ -0,0 +1,12 @@
+export const colorDistributions = {
+  1: [1],
+  2: [1, 3],
+  3: [1, 3, 5],
+  4: [0, 2, 4, 6],
+  5: [0, 2, 4, 6, 7],
+  6: [0, 2, 3, 4, 5, 7],
+  7: [0, 2, 3, 4, 5, 6, 7],
+  8: [0, 2, 3, 4, 5, 6, 7, 8],
+  9: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+  10: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+}

package/src/helpers/constants.ts

@@ -0,0 +1,44 @@
+export const SVG_WIDTH = 880
+export const SVG_HEIGHT = 500
+export const SVG_PADDING = 50
+export const SVG_VIEWBOX = `0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`
+export const HEADER_COLORS = [
+  'theme-blue',
+  'theme-purple',
+  'theme-brown',
+  'theme-teal',
+  'theme-pink',
+  'theme-orange',
+  'theme-slate',
+  'theme-indigo',
+  'theme-cyan',
+  'theme-green',
+  'theme-amber'
+]
+export const MAX_ZOOM_LEVEL = 4
+
+export const SUPPORTED_DC_NAMES = [
+  'WASHINGTON D.C.',
+  'DISTRICT OF COLUMBIA',
+  'WASHINGTON DC',
+  'DC',
+  'WASHINGTON DC.',
+  'D.C.',
+  'D.C'
+] as const
+
+export const GEO_TYPES = {
+  US: 'us',
+  US_REGION: 'us-region',
+  WORLD: 'world',
+  US_COUNTY: 'us-county',
+  SINGLE_STATE: 'single-state',
+  GOOGLE_MAP: 'google-map'
+} as const
+
+export const GEOCODE_TYPES = {
+  WORLD: 'world-geocode',
+  US: 'us-geocode'
+} as const
+
+export const DEFAULT_MAP_BACKGROUND = '#DFE1E2'

package/src/helpers/displayGeoName.ts

@@ -1,7 +1,14 @@
 import { titleCase } from './titleCase'
 import { supportedStates, supportedTerritories, supportedCountries, supportedCounties } from '../data/supported-geos'
 
-export const displayGeoName = (key, convertFipsCodes = true): string => {
+/**
+ * Converts a geographic key to its display name.
+ *
+ * @param {string} key - The geographic key to convert.
+ * @param {boolean} [convertFipsCodes=true] - Whether to convert FIPS codes.
+ * @returns {string} - The display name for the geographic key.
+ */
+export const displayGeoName = (key: string, convertFipsCodes = true): string => {
   if (!convertFipsCodes) return key
   const stateKeys = Object.keys(supportedStates)
   const territoryKeys = Object.keys(supportedTerritories)
@@ -41,7 +48,7 @@ export const displayGeoName = (key, convertFipsCodes = true): string => {
     value = dict[value]
   }
   // if you get here and it's 2 letters then DONT titleCase state abbreviations like "AL"
-  if (value.length === 2 || value === 'U.S. Virgin Islands') {
+  if (value?.length === 2 || value === 'U.S. Virgin Islands') {
     return value
   } else {
     return titleCase(value)

package/src/helpers/formatLegendLocation.ts

@@ -1,6 +1,8 @@
 import { stateFipsToTwoDigit, supportedCounties } from '../data/supported-geos'
 import { titleCase } from './titleCase'
 
+const countyKeySet = new Set(Object.keys(supportedCounties))
+
 export const formatLegendLocation = (key, runtimeLookup) => {
   let formattedName = ''
 
@@ -9,8 +11,7 @@ export const formatLegendLocation = (key, runtimeLookup) => {
     formattedName += stateName
   }
 
-  const countyKeys = Object.keys(supportedCounties)
-  if (countyKeys.includes(key)) {
+  if (countyKeySet.has(key)) {
     formattedName += ', ' + titleCase(supportedCounties[key])
   }
 

package/src/helpers/generateColorsArray.ts

@@ -1,4 +1,5 @@
 import chroma from 'chroma-js'
+import { DEFAULT_MAP_BACKGROUND } from './constants'
 
 /**
  * Generate an array of colors based on a given color [color, hoverColor, darkColor]
@@ -6,7 +7,7 @@ import chroma from 'chroma-js'
  * @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) => {
+export const generateColorsArray = (color: string = DEFAULT_MAP_BACKGROUND, 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/generateRuntimeData.ts

@@ -0,0 +1,78 @@
+import { addUIDs } from '.'
+import numberFromString from '@cdc/core/helpers/numberFromString'
+import { MapConfig } from '../types/MapConfig'
+import { VizFilter } from '@cdc/core/types/VizFilter'
+import { DataRow } from '../types/MapConfig'
+
+const generateRuntimeData = (
+  configObj: MapConfig,
+  filters: VizFilter[],
+  hash: number,
+  isCategoryLegend: boolean,
+  keepNoUidRows = false
+): {
+  [uid: string]: DataRow
+} => {
+  try {
+    const result: { [uid: string]: DataRow } = {}
+
+    // Adding property this way prevents it from being enumerated
+    Object.defineProperty(result, 'fromHash', {
+      value: hash
+    })
+
+    addUIDs(configObj, configObj.columns.geo.name)
+
+    configObj.data.forEach((row: DataRow) => {
+      if (!row.uid) {
+        if (!keepNoUidRows) return false // No UID for this row, we can't use for mapping
+        row.uid = row[configObj.columns.geo.name]
+      }
+      const configPrimaryName = configObj.columns.primary.name
+      const value = row[configPrimaryName]
+      const categoryLegend = typeof value === 'string' && isCategoryLegend
+      if (value && !categoryLegend) {
+        row[configPrimaryName] = numberFromString(value)
+      }
+
+      // If this is a navigation only map, skip if it doesn't have a URL
+
+      if ('navigation' === configObj.general.type) {
+        let navigateUrl = row[configObj.columns.navigate.name] || ''
+
+        if (undefined !== navigateUrl && typeof navigateUrl === 'string') {
+          // Strip hidden characters before we check length
+          navigateUrl = navigateUrl.replace(/(\r\n|\n|\r)/gm, '')
+        }
+        if (0 === navigateUrl?.length) {
+          return false
+        }
+      }
+
+      // Filters
+      if (filters?.length) {
+        for (let i = 0; i < filters.length; i++) {
+          const { columnName, active, type, filterStyle, subGrouping } = filters[i]
+          const isDataFilter = type !== 'url'
+          const matchingValue = String(active) === String(row[columnName]) // Group
+          if (isDataFilter && !matchingValue) return false // Bail out, data doesn't match the filter selection
+          if (filterStyle == 'nested-dropdown') {
+            const matchingSubValue = String(row[subGrouping?.columnName]) === String(subGrouping?.active)
+            if (subGrouping?.active && !matchingSubValue) {
+              return false // Bail out, data doesn't match the subgroup selection
+            }
+          }
+        }
+      }
+      // Don't add additional rows with same UID
+      if (result[row.uid] === undefined) {
+        result[row.uid] = row
+      }
+    })
+    return result
+  } catch (e) {
+    console.error('COVE: ', e) // eslint-disable-line
+  }
+}
+
+export default generateRuntimeData

package/src/helpers/generateRuntimeFilters.ts

@@ -0,0 +1,63 @@
+import { getUniqueValues } from './index'
+import { handleSorting } from '@cdc/core/components/Filters'
+
+export const generateRuntimeFilters = (state, hash, runtimeFilters) => {
+  if (typeof state === 'undefined' || undefined === state.filters || state.filters.length === 0) return []
+
+  const filters = state?.filters.map(
+    (
+      {
+        columnName,
+        label,
+        labels,
+        queryParameter,
+        orderedValues,
+        active,
+        values,
+        type,
+        showDropdown,
+        setByQueryParameter,
+        order
+      },
+      idx
+    ) => {
+      const newFilter = runtimeFilters[idx] || {}
+
+      const sort = (a, b) => {
+        const asc = order !== 'desc'
+        return String(asc ? a : b).localeCompare(String(asc ? b : a), 'en', { numeric: true })
+      }
+
+      if (type !== 'url') {
+        values = getUniqueValues(state.data, columnName)
+
+        if (state.filters[idx].order === 'cust') {
+          if (state.filters[idx]?.values.length > 0) {
+            values = state.filters[idx].values
+          }
+        } else {
+          values = values.sort(sort)
+        }
+      }
+
+      newFilter.order = state.filters[idx].order ? state.filters[idx].order : 'asc'
+      newFilter.type = type
+      newFilter.label = label ?? ''
+      newFilter.columnName = columnName
+      newFilter.orderedValues = orderedValues
+      newFilter.queryParameter = queryParameter
+      newFilter.labels = labels
+      newFilter.values = values
+      newFilter.setByQueryParameter = setByQueryParameter
+      handleSorting(newFilter)
+      newFilter.active = active ?? values[0] // Default to first found value
+      newFilter.filterStyle = state.filters[idx].filterStyle ? state.filters[idx].filterStyle : 'dropdown'
+      newFilter.showDropdown = showDropdown
+      newFilter.subGrouping = state.filters[idx].subGrouping
+
+      return newFilter
+    }
+  )
+  if (hash) filters.fromHash = hash
+  return filters
+}