@cdc/map 4.25.3 → 4.25.5-1

package/src/helpers/generateRuntimeLegend.ts

@@ -0,0 +1,537 @@
+import { useCallback, useContext } from 'react'
+import ConfigContext from '../context'
+import {
+  applyColorToLegend,
+  getGeoFillColor,
+  hashObj,
+  indexOfIgnoreType,
+  setBinNumbers,
+  sortSpecialClassesLast
+} from '.'
+
+import _ from 'lodash'
+import * as d3 from 'd3'
+
+// Cdc
+import colorPalettes from '@cdc/core/data/colorPalettes'
+import { supportedCountries } from '../data/supported-geos'
+
+type LegendItem = {
+  special?: boolean
+  value: string | number
+  label?: string
+  color?: string
+  min?: number
+  max?: number
+  bin?: number
+}
+
+export type GeneratedLegend = {
+  fromHash: number
+  runtimeDataHash: number
+  items: LegendItem[] | []
+}
+
+export const generateRuntimeLegend = (
+  configObj,
+  runtimeData: object[],
+  hash: string,
+  setConfig: Function,
+  runtimeFilters: object[],
+  legendMemo: React.MutableRefObject<Map<string, number>>,
+  legendSpecialClassLastMemo: React.MutableRefObject<Map<string, number>>
+): GeneratedLegend | [] => {
+  try {
+    // Throw errors if args missing
+    if (!runtimeData) Error('No runtime data provided')
+    if (!hash) Error('No hash provided')
+    if (!configObj) Error('No config object provided')
+    if (!legendMemo) Error('No legend memo provided')
+    if (!legendSpecialClassLastMemo) Error('No legend special class last memo provided')
+
+    // Define variables..
+    const newLegendMemo = new Map() // Reset memoization
+    const newLegendSpecialClassLastMemo = new Map() // Reset bin memoization
+    const countryKeys = Object.keys(supportedCountries)
+    const { data, legend, columns, general } = configObj
+    const primaryColName = columns.primary.name
+    const isBubble = general.type === 'bubble'
+    const categoricalCol = columns.categorical ? columns.categorical.name : undefined
+
+    const result = {
+      fromHash: null,
+      runtimeDataHash: null,
+      items: []
+    }
+
+    // Add a hash for what we're working from if passed
+    if (hash) {
+      result.fromHash = hash
+    }
+
+    result.runtimeDataHash = runtimeFilters?.fromHash
+
+    // Unified will base the legend off ALL the data maps received. Otherwise, it will use
+    let dataSet = legend.unified ? data : Object?.values(runtimeData)
+
+    let domainNums = Array.from(new Set(dataSet?.map(item => item[configObj.columns.primary.name])))
+      .filter(d => typeof d === 'number' && !isNaN(d))
+      .sort((a, b) => a - b)
+
+    let specialClasses = 0
+    let specialClassesHash = {}
+
+    if (legend.specialClasses.length) {
+      if (typeof legend.specialClasses[0] === 'object') {
+        legend.specialClasses.forEach(specialClass => {
+          const val = String(specialClass.value)
+          if (undefined === specialClassesHash[val]) {
+            specialClassesHash[val] = true
+            result.items.push({
+              special: true,
+              value: val,
+              label: specialClass.label
+            })
+            result.items[result.items.length - 1].color = applyColorToLegend(
+              result.items.length - 1,
+              configObj,
+              result.items
+            )
+            specialClasses += 1
+          }
+          // Optionally, still map any rows that match this special class
+          dataSet.forEach(row => {
+            const rowVal = String(row[specialClass.key])
+            if (rowVal === val) {
+              let specialColor = result.items.findIndex(p => p.value === val)
+              newLegendMemo.set(hashObj(row), specialColor)
+            }
+          })
+        })
+      } else {
+        dataSet = dataSet.filter(row => {
+          const val = row[primaryColName]
+
+          if (legend.specialClasses.includes(val)) {
+            // apply the special color to the legend
+            if (undefined === specialClassesHash[val]) {
+              specialClassesHash[val] = true
+
+              result.items.push({
+                special: true,
+                value: val
+              })
+
+              result.items[result.items.length - 1].color = applyColorToLegend(
+                result.items.length - 1,
+                configObj,
+                result.items
+              )
+
+              specialClasses += 1
+            }
+
+            let specialColor = 0
+
+            // color the configObj if val is in row
+            if (Object.values(row).includes(val)) {
+              specialColor = result.items.findIndex(p => p.value === val)
+            }
+
+            newLegendMemo.set(hashObj(row), specialColor)
+
+            return false
+          }
+
+          return true
+        })
+      }
+    }
+
+    // Category
+    if (legend.type === 'category') {
+      let uniqueValues = new Map()
+      let count = 0
+
+      for (let i = 0; i < dataSet.length; i++) {
+        let row = dataSet[i]
+        let value = isBubble && categoricalCol && row[categoricalCol] ? row[categoricalCol] : row[primaryColName]
+        if (undefined === value) continue
+
+        if (false === uniqueValues.has(value)) {
+          uniqueValues.set(value, [hashObj(row)])
+          count++
+        } else {
+          uniqueValues.get(value).push(hashObj(row))
+        }
+      }
+
+      let sorted = [...uniqueValues.keys()]
+
+      if (legend.additionalCategories) {
+        legend.additionalCategories.forEach(additionalCategory => {
+          if (additionalCategory && indexOfIgnoreType(sorted, additionalCategory) === -1) {
+            sorted.push(additionalCategory)
+          }
+        })
+      }
+
+      // Apply custom sorting or regular sorting
+      let configuredOrder = legend.categoryValuesOrder ?? []
+
+      if (configuredOrder.length) {
+        sorted.sort((a, b) => {
+          let aVal = configuredOrder.indexOf(a)
+          let bVal = configuredOrder.indexOf(b)
+          if (aVal === bVal) return 0
+          if (aVal === -1) return 1
+          if (bVal === -1) return -1
+          return aVal - bVal
+        })
+      } else {
+        sorted.sort((a, b) => a - b)
+      }
+
+      // Add legend item for each
+      sorted.forEach(val => {
+        // Skip if this value is already a special class
+        if (result?.items?.some(item => item.value === val && item.special)) return
+        result.items.push({
+          value: val
+        })
+
+        let lastIdx = result.items.length - 1
+        let arr = uniqueValues.get(val)
+
+        if (arr) {
+          arr.forEach(hashedRow => newLegendMemo.set(hashedRow, lastIdx))
+        }
+      })
+
+      // Add color to new legend item (normal items only, not special classes)
+      for (let i = 0; i < result.items.length; i++) {
+        if (!result.items[i].special) {
+          result.items[i].color = applyColorToLegend(i, configObj, result.items)
+        }
+      }
+
+      // Now apply special class colors last, to overwrite if needed
+      for (let i = 0; i < result.items.length; i++) {
+        if (result.items[i].special) {
+          result.items[i].color = applyColorToLegend(i, configObj, result.items)
+        }
+      }
+
+      // Overwrite legendMemo for special class rows to ensure correct color lookup
+      result.items.forEach((item, idx) => {
+        if (item.special) {
+          // Find all rows in the data that match this special class value
+          let specialRows = data.filter(row => {
+            // If special class has a key, use it, otherwise use primaryColName
+            const key = legend.specialClasses.find(sc => String(sc.value) === String(item.value))?.key || primaryColName
+            return String(row[key]) === String(item.value)
+          })
+          specialRows.forEach(row => {
+            newLegendMemo.set(hashObj(row), idx)
+          })
+        }
+      })
+
+      legendMemo.current = newLegendMemo
+
+      // before returning the legend result
+      // add property for bin number and set to index location
+      setBinNumbers(result)
+
+      // Move all special legend items from "Special Classes"  to the end of the legend
+      sortSpecialClassesLast(result, legend)
+
+      const assignSpecialClassLastIndex = (value, key) => {
+        const newIndex = result.items.findIndex(d => d.bin === value)
+        newLegendSpecialClassLastMemo.set(key, newIndex)
+      }
+
+      newLegendMemo.forEach(assignSpecialClassLastIndex)
+      legendSpecialClassLastMemo.current = newLegendSpecialClassLastMemo
+
+      return result
+    }
+
+    let uniqueValues = {}
+    dataSet.forEach(datum => {
+      uniqueValues[datum[primaryColName]] = true
+    })
+
+    let legendNumber = Math.min(legend.numberOfItems, Object.keys(uniqueValues).length)
+
+    // Separate zero
+    if (true === legend.separateZero && !general.equalNumberOptIn) {
+      let addLegendItem = false
+
+      for (let i = 0; i < dataSet.length; i++) {
+        if (dataSet[i][primaryColName] === 0) {
+          addLegendItem = true
+
+          let row = dataSet.splice(i, 1)[0]
+
+          newLegendMemo.set(hashObj(row), result.items.length)
+          i--
+        }
+      }
+
+      if (addLegendItem) {
+        legendNumber -= 1 // This zero takes up one legend item
+
+        // Add new legend item
+        result.items.push({
+          min: 0,
+          max: 0
+        })
+
+        let lastIdx = result.items.length - 1
+
+        // Add color to new legend item
+        result.items[lastIdx].color = applyColorToLegend(lastIdx, configObj, result.items)
+      }
+    }
+
+    // Sort data for use in equalnumber or equalinterval
+    if (general.type !== 'us-geocode') {
+      dataSet = dataSet
+        .filter(row => typeof row[primaryColName] === 'number')
+        .sort((a, b) => {
+          let aNum = a[primaryColName]
+          let bNum = b[primaryColName]
+
+          return aNum - bNum
+        })
+    }
+
+    // Equal Number
+    if (legend.type === 'equalnumber') {
+      // start work on changing legend functionality
+      // FALSE === ignore old version for now.
+      if (!general.equalNumberOptIn) {
+        let numberOfRows = dataSet.length
+        let changingNumber = legendNumber
+        let remainder
+        let chunkAmt
+
+        // Loop through the array until it has been split into equal subarrays
+        while (numberOfRows > 0) {
+          remainder = numberOfRows % changingNumber
+          chunkAmt = Math.floor(numberOfRows / changingNumber)
+
+          if (remainder > 0) {
+            chunkAmt += 1
+          }
+
+          let removedRows = dataSet.splice(0, chunkAmt)
+
+          let min = removedRows[0][primaryColName],
+            max = removedRows[removedRows.length - 1][primaryColName]
+
+          // eslint-disable-next-line
+          removedRows.forEach(row => {
+            newLegendMemo.set(hashObj(row), result.items.length)
+          })
+
+          result.items.push({
+            min,
+            max
+          })
+
+          result.items[result.items.length - 1].color = applyColorToLegend(
+            result.items.length - 1,
+            configObj,
+            result.items
+          )
+
+          changingNumber -= 1
+          numberOfRows -= chunkAmt
+        }
+      } else {
+        let colors = colorPalettes[configObj.color]
+        let colorRange = colors.slice(0, legend.numberOfItems)
+
+        const getDomain = () => {
+          // backwards compatibility
+          if (columns?.primary?.roundToPlace !== undefined && general?.equalNumberOptIn) {
+            return _.uniq(
+              dataSet.map(item => Number(item[columns.primary.name]).toFixed(Number(columns?.primary?.roundToPlace)))
+            )
+          }
+          return _.uniq(dataSet.map(item => Math.round(Number(item[columns.primary.name]))))
+        }
+
+        const getBreaks = scale => {
+          // backwards compatibility
+          if (columns?.primary?.roundToPlace !== undefined && general?.equalNumberOptIn) {
+            return scale.quantiles().map(b => Number(b)?.toFixed(Number(columns?.primary?.roundToPlace)))
+          }
+          return scale.quantiles().map(item => Number(Math.round(item)))
+        }
+
+        let scale = d3
+          .scaleQuantile()
+          .domain(getDomain()) // min/max values
+          .range(colorRange) // set range to our colors array
+
+        const breaks = getBreaks(scale)
+        let cachedBreaks = null
+        if (!cachedBreaks) {
+          cachedBreaks = breaks
+        }
+
+        // if separating zero force it into breaks
+        if (cachedBreaks[0] !== 0) {
+          cachedBreaks.unshift(0)
+        }
+
+        // eslint-disable-next-line array-callback-return
+        cachedBreaks.map((item, index) => {
+          const setMin = index => {
+            let min = cachedBreaks[index]
+
+            // if first break is a seperated zero, min is zero
+            if (index === 0 && legend.separateZero) {
+              min = 0
+            }
+
+            // if we're on the second break, and separating out zero, increment min to 1.
+            if (index === 1 && legend.separateZero) {
+              min = 1
+            }
+
+            return min
+          }
+
+          const getDecimalPlace = n => {
+            return Math.pow(10, -n)
+          }
+
+          const setMax = index => {
+            let max = Number(breaks[index + 1]) - getDecimalPlace(Number(configObj?.columns?.primary?.roundToPlace))
+
+            if (index === 0 && legend.separateZero) {
+              max = 0
+            }
+
+            if (index + 1 === breaks.length) {
+              max = domainNums[domainNums.length - 1]
+            }
+
+            return max
+          }
+
+          let min = setMin(index)
+          let max = setMax(index)
+
+          result.items.push({
+            min,
+            max
+          })
+          result.items[result.items.length - 1].color = applyColorToLegend(
+            result.items.length - 1,
+            configObj,
+            result.items
+          )
+
+          dataSet.forEach(row => {
+            let number = row[columns.primary.name]
+            let updated = result.items.length - 1
+
+            if (result.items?.[updated]?.min === undefined || result.items?.[updated]?.max === undefined) return
+
+            if (number >= result?.items?.[updated].min && number <= result?.items?.[updated].max) {
+              newLegendMemo.set(hashObj(row), updated)
+            }
+          })
+        })
+      }
+    }
+
+    // Equal Interval
+    if (legend.type === 'equalinterval' && dataSet?.length !== 0) {
+      if (!dataSet || dataSet.length === 0) {
+        setConfig({
+          ...configObj,
+          runtime: {
+            ...configObj.runtime,
+            editorErrorMessage: 'Error setting equal interval legend type'
+          }
+        })
+        return
+      }
+      dataSet = dataSet.filter(row => row[primaryColName] !== undefined)
+      let dataMin = dataSet[0][primaryColName]
+      let dataMax = dataSet[dataSet.length - 1][primaryColName]
+
+      let pointer = 0 // Start at beginning of dataSet
+
+      for (let i = 0; i < legendNumber; i++) {
+        let interval = Math.abs(dataMax - dataMin) / legendNumber
+
+        let min = dataMin + interval * i
+        let max = min + interval
+
+        // If this is the last loop, assign actual max of data as the end point
+        if (i === legendNumber - 1) max = dataMax
+
+        // Add rows in dataSet that belong to this new legend item since we've got the data sorted
+        while (pointer < dataSet.length && dataSet[pointer][primaryColName] <= max) {
+          newLegendMemo.set(hashObj(dataSet[pointer]), result.items.length)
+          pointer += 1
+        }
+
+        let range = {
+          min: Math.round(min * 100) / 100,
+          max: Math.round(max * 100) / 100
+        }
+
+        result.items.push(range)
+
+        result.items[result.items.length - 1].color = applyColorToLegend(
+          result.items.length - 1,
+          configObj,
+          result.items
+        )
+      }
+    }
+
+    setBinNumbers(result)
+
+    legendMemo.current = newLegendMemo
+
+    if (general.geoType === 'world') {
+      const runtimeDataKeys = Object.keys(runtimeData)
+      const isCountriesWithNoDataState =
+        data === undefined ? false : !countryKeys.every(countryKey => runtimeDataKeys.includes(countryKey))
+
+      if (result.items.length > 0 && isCountriesWithNoDataState) {
+        result.items.push({
+          min: null,
+          max: null,
+          color: getGeoFillColor(configObj)
+        })
+      }
+    }
+
+    setBinNumbers(result)
+    sortSpecialClassesLast(result, legend)
+
+    const assignSpecialClassLastIndex = (value, key) => {
+      const newIndex = result.items.findIndex(d => d.bin === value)
+      newLegendSpecialClassLastMemo.set(key, newIndex)
+    }
+    newLegendMemo.forEach(assignSpecialClassLastIndex)
+    legendSpecialClassLastMemo.current = newLegendSpecialClassLastMemo
+
+    return result
+  } catch (e) {
+    console.error(e)
+    return []
+  }
+}
+
+export default generateRuntimeLegend

package/src/helpers/generateRuntimeLegendHash.ts

@@ -1,22 +1,23 @@
 import { hashObj } from './hashObj'
+import { MapConfig } from '../types/MapConfig'
 
-export const generateRuntimeLegendHash = (state, runtimeFilters) => {
+export const generateRuntimeLegendHash = (config: MapConfig, 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,
+    unified: config.legend.unified ?? false,
+    equalNumberOptIn: config.general.equalNumberOptIn ?? false,
+    specialClassesLast: config.legend.showSpecialClassesLast ?? false,
+    color: config.color,
+    customColors: config.customColors,
+    numberOfItems: config.legend.numberOfItems,
+    type: config.legend.type,
+    separateZero: config.legend.separateZero ?? false,
+    primary: config.columns.primary.name,
+    categoryValuesOrder: config.legend.categoryValuesOrder,
+    specialClasses: config.legend.specialClasses,
+    geoType: config.general.geoType,
+    data: config.data,
     filters: {
-      ...state.filters
+      ...config.filters
     },
     ...runtimeFilters
   })

package/src/helpers/getColumnNames.ts

@@ -0,0 +1,19 @@
+import { type MapConfig } from '../types/MapConfig'
+
+type ColumnNames = {
+  geoColumnName: string | null
+  primaryColumnName: string | null
+  latitudeColumnName: string | null
+  longitudeColumnName: string | null
+  categoricalColumnName: string | null
+} | null
+
+export const getColumnNames = (columns?: Pick<MapConfig, 'columns'>): ColumnNames => {
+  if (!columns) return null
+  const geoColumnName = columns.geo?.name || null
+  const primaryColumnName = columns.primary?.name || null
+  const latitudeColumnName = columns.latitude?.name || null
+  const longitudeColumnName = columns.longitude?.name || null
+  const categoricalColumnName = columns.categorical?.name || null
+  return { geoColumnName, primaryColumnName, latitudeColumnName, longitudeColumnName, categoricalColumnName }
+}

package/src/helpers/getMapContainerClasses.ts

@@ -0,0 +1,23 @@
+import { type MapConfig } from './../types/MapConfig'
+
+export const getMapContainerClasses = (state: MapConfig, modal) => {
+  const { general } = state
+
+  let mapContainerClasses = [
+    'map-container',
+    state.legend?.position,
+    state.general.type,
+    state.general.geoType,
+    'outline-none',
+    'position-relative'
+  ]
+
+  if (modal) {
+    mapContainerClasses.push('modal-background')
+  }
+
+  if (general.type === 'navigation' && true === general.fullBorder) {
+    mapContainerClasses.push('full-border')
+  }
+  return mapContainerClasses
+}

package/src/helpers/handleMapTabbing.ts

@@ -0,0 +1,31 @@
+import { type MapConfig } from '../types/MapConfig'
+
+export const handleMapTabbing = (state: MapConfig, loading: boolean, legendId: string) => {
+  const { general, runtime, table } = state
+
+  const hasDataTable =
+    runtime?.editorErrorMessage.length === 0 &&
+    true === table.forceDisplay &&
+    general.type !== 'navigation' &&
+    false === loading
+
+  let tabbingID: string
+
+  // 1) skip to legend
+  if (general.showSidebar) {
+    tabbingID = legendId
+  }
+
+  // 2) skip to data table if it exists and not a navigation map
+  if (hasDataTable && !general.showSidebar) {
+    tabbingID = `dataTableSection__${Date.now()}`
+  }
+
+  // 3) if it's a navigation map skip to the dropdown.
+  if (state.general.type === 'navigation') {
+    tabbingID = `dropdown-${Date.now()}`
+  }
+
+  // 4) handle other options
+  return tabbingID || '!'
+}

package/src/helpers/hashObj.ts

@@ -5,7 +5,7 @@
  */
 export const hashObj = row => {
   try {
-    if (!row || row === undefined) throw new Error('No row supplied to hashObj')
+    if (!row || row === undefined) return null
 
     let str = JSON.stringify(row)
     let hash = 0

package/src/helpers/index.ts

@@ -0,0 +1,22 @@
+export { addUIDs } from './addUIDs'
+export { applyColorToLegend } from './applyColorToLegend'
+export { colorDistributions } from './colorDistributions'
+export { displayGeoName } from './displayGeoName'
+export { formatLegendLocation } from './formatLegendLocation'
+export { generateColorsArray } from './generateColorsArray'
+export { generateRuntimeLegendHash } from './generateRuntimeLegendHash'
+export { getGeoStrokeColor, getGeoFillColor } from './colors'
+export { getUniqueValues } from './getUniqueValues'
+export { handleMapAriaLabels } from './handleMapAriaLabels'
+export { handleMapTabbing } from './handleMapTabbing'
+export { hashObj } from './hashObj'
+export { indexOfIgnoreType } from './indexOfIgnoreType'
+export { navigationHandler } from './navigationHandler'
+export { resetLegendToggles } from './resetLegendToggles'
+export { setBinNumbers } from './setBinNumbers'
+export { sortSpecialClassesLast } from './sortSpecialClassesLast'
+export { titleCase as toTitleCase } from './toTitleCase'
+export { titleCase } from './titleCase'
+export { validateFipsCodeLength } from './validateFipsCodeLength'
+export { getMapContainerClasses } from './getMapContainerClasses'
+export { SVG_HEIGHT, SVG_WIDTH, SVG_PADDING, SVG_VIEWBOX, HEADER_COLORS, MAX_ZOOM_LEVEL } from './constants'

package/src/helpers/navigationHandler.ts

@@ -9,9 +9,9 @@ export const navigationHandler = (
     return
   }
 
-  // Abort if value is blank
-  if (0 === urlString.length) {
-    throw Error('Blank string passed as URL. Navigation aborted.')
+  // Abort if urlString is not a valid string
+  if (typeof urlString !== 'string' || urlString.trim().length === 0) {
+    throw Error('Invalid or blank URL. Navigation aborted.')
   }
 
   const urlObj = new URL(urlString, window.location.origin)