@cdc/core 4.25.11 → 4.26.1

package/helpers/tests/queryStringUtils.test.ts

@@ -0,0 +1,381 @@
+import { getQueryStringFilterValue, isFilterHiddenByQuery, getQueryParams, getQueryParam } from '../queryStringUtils'
+import { expect, describe, it, beforeEach, afterEach, vi } from 'vitest'
+
+describe('getQueryStringFilterValue', () => {
+  let originalLocation: Location
+
+  beforeEach(() => {
+    // Save original location
+    originalLocation = window.location
+  })
+
+  afterEach(() => {
+    // Restore original location
+    Object.defineProperty(window, 'location', {
+      value: originalLocation,
+      writable: true,
+      configurable: true
+    })
+  })
+
+  const mockLocation = (search: string) => {
+    delete (window as any).location
+    Object.defineProperty(window, 'location', {
+      value: { search },
+      writable: true,
+      configurable: true
+    })
+  }
+
+  it('should return the matching filter value from query string (case-insensitive)', () => {
+    mockLocation('?location=home')
+    const filter = {
+      setByQueryParameter: 'location',
+      values: ['Home', 'School', 'Work']
+    }
+    const result = getQueryStringFilterValue(filter)
+    expect(result).toBe('Home') // Returns value with original casing
+  })
+
+  it('should return the matching filter value when query param is uppercase', () => {
+    mockLocation('?state=CALIFORNIA')
+    const filter = {
+      setByQueryParameter: 'state',
+      values: ['California', 'Texas', 'New York']
+    }
+    const result = getQueryStringFilterValue(filter)
+    expect(result).toBe('California')
+  })
+
+  it('should return undefined when setByQueryParameter is not defined', () => {
+    mockLocation('?location=home')
+    const filter = {
+      values: ['Home', 'School', 'Work']
+    }
+    const result = getQueryStringFilterValue(filter)
+    expect(result).toBeUndefined()
+  })
+
+  it('should return undefined when query parameter is not in URL', () => {
+    mockLocation('?other=value')
+    const filter = {
+      setByQueryParameter: 'location',
+      values: ['Home', 'School', 'Work']
+    }
+    const result = getQueryStringFilterValue(filter)
+    expect(result).toBeUndefined()
+  })
+
+  it('should return undefined when query value does not match any filter values', () => {
+    mockLocation('?location=park')
+    const filter = {
+      setByQueryParameter: 'location',
+      values: ['Home', 'School', 'Work']
+    }
+    const result = getQueryStringFilterValue(filter)
+    expect(result).toBeUndefined()
+  })
+
+  it('should return undefined when filter has no values', () => {
+    mockLocation('?location=home')
+    const filter = {
+      setByQueryParameter: 'location',
+      values: []
+    }
+    const result = getQueryStringFilterValue(filter)
+    expect(result).toBeUndefined()
+  })
+
+  it('should handle filters with null values in array', () => {
+    mockLocation('?location=school')
+    const filter = {
+      setByQueryParameter: 'location',
+      values: ['Home', null, 'School', 'Work']
+    }
+    const result = getQueryStringFilterValue(filter)
+    expect(result).toBe('School')
+  })
+})
+
+describe('isFilterHiddenByQuery', () => {
+  let originalLocation: Location
+
+  beforeEach(() => {
+    originalLocation = window.location
+  })
+
+  afterEach(() => {
+    Object.defineProperty(window, 'location', {
+      value: originalLocation,
+      writable: true,
+      configurable: true
+    })
+  })
+
+  const mockLocation = (search: string) => {
+    delete (window as any).location
+    Object.defineProperty(window, 'location', {
+      value: { search },
+      writable: true,
+      configurable: true
+    })
+  }
+
+  it('should return true when query parameter is "true"', () => {
+    mockLocation('?hideState=true')
+    const filter = {
+      setByQueryParameter: 'State'
+    }
+    const result = isFilterHiddenByQuery(filter)
+    expect(result).toBe(true)
+  })
+
+  it('should return true when query parameter is "TRUE" (case insensitive)', () => {
+    mockLocation('?hideState=TRUE')
+    const filter = {
+      setByQueryParameter: 'State'
+    }
+    const result = isFilterHiddenByQuery(filter)
+    expect(result).toBe(true)
+  })
+
+  it('should return true when query parameter is "1"', () => {
+    mockLocation('?hideLocation=1')
+    const filter = {
+      setByQueryParameter: 'Location'
+    }
+    const result = isFilterHiddenByQuery(filter)
+    expect(result).toBe(true)
+  })
+
+  it('should return true when query parameter is "yes"', () => {
+    mockLocation('?hideYear=yes')
+    const filter = {
+      setByQueryParameter: 'Year'
+    }
+    const result = isFilterHiddenByQuery(filter)
+    expect(result).toBe(true)
+  })
+
+  it('should return true when query parameter is "YES" (case insensitive)', () => {
+    mockLocation('?hideYear=YES')
+    const filter = {
+      setByQueryParameter: 'Year'
+    }
+    const result = isFilterHiddenByQuery(filter)
+    expect(result).toBe(true)
+  })
+
+  it('should return false when setByQueryParameter is not defined', () => {
+    mockLocation('?hideState=true')
+    const filter = {}
+    const result = isFilterHiddenByQuery(filter)
+    expect(result).toBe(false)
+  })
+
+  it('should return false when filter is null', () => {
+    mockLocation('?hideState=true')
+    const result = isFilterHiddenByQuery(null)
+    expect(result).toBe(false)
+  })
+
+  it('should return false when filter is undefined', () => {
+    mockLocation('?hideState=true')
+    const result = isFilterHiddenByQuery(undefined)
+    expect(result).toBe(false)
+  })
+
+  it('should return false when query parameter is not in URL', () => {
+    mockLocation('?other=value')
+    const filter = {
+      setByQueryParameter: 'State'
+    }
+    const result = isFilterHiddenByQuery(filter)
+    expect(result).toBe(false)
+  })
+
+  it('should return false when query parameter is "false"', () => {
+    mockLocation('?hideState=false')
+    const filter = {
+      setByQueryParameter: 'State'
+    }
+    const result = isFilterHiddenByQuery(filter)
+    expect(result).toBe(false)
+  })
+
+  it('should return false when query parameter is "0"', () => {
+    mockLocation('?hideLocation=0')
+    const filter = {
+      setByQueryParameter: 'Location'
+    }
+    const result = isFilterHiddenByQuery(filter)
+    expect(result).toBe(false)
+  })
+
+  it('should return false when query parameter is "no"', () => {
+    mockLocation('?hideYear=no')
+    const filter = {
+      setByQueryParameter: 'Year'
+    }
+    const result = isFilterHiddenByQuery(filter)
+    expect(result).toBe(false)
+  })
+
+  it('should return false when query parameter is empty string', () => {
+    mockLocation('?hideState=')
+    const filter = {
+      setByQueryParameter: 'State'
+    }
+    const result = isFilterHiddenByQuery(filter)
+    expect(result).toBe(false)
+  })
+
+  it('should return false when query parameter has an arbitrary value', () => {
+    mockLocation('?hideState=maybe')
+    const filter = {
+      setByQueryParameter: 'State'
+    }
+    const result = isFilterHiddenByQuery(filter)
+    expect(result).toBe(false)
+  })
+
+  it('should handle multiple query parameters correctly', () => {
+    mockLocation('?location=home&hideState=true&year=2024')
+    const filter = {
+      setByQueryParameter: 'State'
+    }
+    const result = isFilterHiddenByQuery(filter)
+    expect(result).toBe(true)
+  })
+
+  it('should not hide when different parameter is true', () => {
+    mockLocation('?hideLocation=true&hideState=false')
+    const filter = {
+      setByQueryParameter: 'State'
+    }
+    const result = isFilterHiddenByQuery(filter)
+    expect(result).toBe(false)
+  })
+
+  it('should construct parameter name with exact case from setByQueryParameter', () => {
+    mockLocation('?hidecolor=true')
+    const filter = {
+      setByQueryParameter: 'color'
+    }
+    const result = isFilterHiddenByQuery(filter)
+    expect(result).toBe(true)
+  })
+
+  it('should work with multi-word parameter names', () => {
+    mockLocation('?hideAnimal Category=1')
+    const filter = {
+      setByQueryParameter: 'Animal Category'
+    }
+    const result = isFilterHiddenByQuery(filter)
+    expect(result).toBe(true)
+  })
+
+  it('should only check setByQueryParameter (not key, label, or columnName)', () => {
+    mockLocation('?hidegeography=true')
+    const filter = {
+      setByQueryParameter: 'State',
+      key: 'geography',
+      label: 'geography',
+      columnName: 'geography'
+    }
+    const result = isFilterHiddenByQuery(filter)
+    expect(result).toBe(false) // Should NOT match because setByQueryParameter is 'State', not 'geography'
+  })
+
+  it('should match when setByQueryParameter matches URL param', () => {
+    mockLocation('?hideState=true')
+    const filter = {
+      setByQueryParameter: 'State',
+      key: 'geography',
+      label: 'Select Geography',
+      columnName: 'geography'
+    }
+    const result = isFilterHiddenByQuery(filter)
+    expect(result).toBe(true) // Should match because setByQueryParameter is 'State'
+  })
+})
+
+describe('getQueryParams', () => {
+  let originalLocation: Location
+
+  beforeEach(() => {
+    originalLocation = window.location
+  })
+
+  afterEach(() => {
+    Object.defineProperty(window, 'location', {
+      value: originalLocation,
+      writable: true,
+      configurable: true
+    })
+  })
+
+  const mockLocation = (search: string) => {
+    delete (window as any).location
+    Object.defineProperty(window, 'location', {
+      value: { search },
+      writable: true,
+      configurable: true
+    })
+  }
+
+  it('should return an object of query parameters', () => {
+    mockLocation('?state=CA&year=2024')
+    const result = getQueryParams()
+    expect(result).toEqual({ state: 'CA', year: '2024' })
+  })
+
+  it('should return empty object when no query parameters', () => {
+    mockLocation('')
+    const result = getQueryParams()
+    expect(result).toEqual({})
+  })
+
+  it('should handle multiple values for the same key', () => {
+    mockLocation('?tag=health&tag=safety&tag=education')
+    const result = getQueryParams()
+    expect(result.tag).toEqual(['health', 'safety', 'education'])
+  })
+})
+
+describe('getQueryParam', () => {
+  let originalLocation: Location
+
+  beforeEach(() => {
+    originalLocation = window.location
+  })
+
+  afterEach(() => {
+    Object.defineProperty(window, 'location', {
+      value: originalLocation,
+      writable: true,
+      configurable: true
+    })
+  })
+
+  const mockLocation = (search: string) => {
+    delete (window as any).location
+    Object.defineProperty(window, 'location', {
+      value: { search },
+      writable: true,
+      configurable: true
+    })
+  }
+
+  it('should return the value of a specific query parameter', () => {
+    mockLocation('?state=CA&year=2024')
+    const result = getQueryParam('state')
+    expect(result).toBe('CA')
+  })
+
+  it('should return undefined for non-existent parameter', () => {
+    mockLocation('?state=CA')
+    const result = getQueryParam('year')
+    expect(result).toBeUndefined()
+  })
+})

package/helpers/tests/testStandaloneBuild.ts

@@ -21,24 +21,42 @@ function copyDirSync(src, dest) {
   }
 }
 
+// Tests if a package can be built in isolation
+// See DOCS/PACKAGE_DEPENDENCIES.md for more details
 export function testStandaloneBuild(pkgDir) {
-  // This test can't be turned on until we've published the new version of @cdc/core
-  return true
-
   pkgDir = pkgDir.replace('/src', '')
   const pkgName = pkgDir.split('/')[pkgDir.split('/').length - 1]
   const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), `cdc-open-viz-${pkgName}-`))
   copyDirSync(pkgDir, tmpDir)
 
+  let coreTarballPath = null
+
   try {
-    execSync('npm install', { cwd: tmpDir })
-    execSync('npm link @cdc/core', { cwd: tmpDir })
+    execSync('npm install --include=dev', { cwd: tmpDir })
+
+    // Pack core into tmp directory with unique name then install from package tarball
+    const coreDir = path.join(pkgDir, '..', 'core')
+    const uniqueId = `${Date.now()}-${Math.random().toString(36).substring(7)}`
+    const uniqueTarballDir = fs.mkdtempSync(path.join(os.tmpdir(), `cdc-pack-${uniqueId}-`))
+    const packOutput = execSync(`npm pack --pack-destination="${uniqueTarballDir}"`, {
+      cwd: coreDir,
+      encoding: 'utf-8'
+    })
+    const tarballName = packOutput.trim().split('\n').pop()
+    coreTarballPath = path.join(uniqueTarballDir, tarballName)
+    execSync(`npm install "${coreTarballPath}"`, { cwd: tmpDir, stdio: 'inherit' })
+
     execSync('npm run build', { cwd: tmpDir })
     return true
   } catch (err) {
     console.error(`❌ Isolated build for ${pkgName} package failed`)
+    console.error(err.message)
     return false
   } finally {
+    if (coreTarballPath && fs.existsSync(coreTarballPath)) {
+      const uniqueTarballDir = path.dirname(coreTarballPath)
+      fs.rmSync(uniqueTarballDir, { recursive: true, force: true })
+    }
     fs.rmSync(tmpDir, { recursive: true, force: true })
   }
 }

package/helpers/useDataVizClasses.ts

@@ -1,4 +1,3 @@
-import useResizeObserver from '@cdc/map/src/hooks/useResizeObserver'
 import { isBelowBreakpoint } from './viewports'
 
 export default function useDataVizClasses(config, viewport = null) {

package/helpers/ver/4.26.1.ts

@@ -0,0 +1,80 @@
+import cloneConfig from '../cloneConfig'
+import { DashboardConfig } from '@cdc/dashboard/src/types/DashboardConfig'
+
+const normalizeFilterParents = config => {
+  if (config.type === 'dashboard') {
+    if (config.dashboard?.sharedFilters) {
+      config.dashboard.sharedFilters.forEach(filter => {
+        if (filter.type === 'datafilter' && filter.parents && typeof filter.parents === 'string') {
+          filter.parents = [filter.parents]
+        }
+      })
+    }
+  }
+}
+
+const removeOldBrushKeys = config => {
+  if (config.type === 'chart') {
+    // Remove old brush object entirely - brush feature is new in 4.26.1
+    // and any existing brush config is from development/testing
+    delete config.brush
+  }
+
+  if (config.type === 'dashboard') {
+    Object.values((config as DashboardConfig).visualizations).forEach(visualization => {
+      removeOldBrushKeys(visualization)
+    })
+  }
+}
+
+const migrateTitleStyle = config => {
+  // Migrate ALL visualizations to use titleStyle
+  // Since titleStyle is new in 4.26.1, any config running this migration won't have it yet
+  // so we can unconditionally set it based on whether a title exists
+  // - If title exists and is not empty: use 'legacy' (preserve existing appearance)
+  // - If title is empty/missing: use 'small' (new default)
+
+  if (config.type === 'dashboard') {
+    // Migrate dashboard title
+    if (!config.dashboard) config.dashboard = {}
+    const hasTitle = config.dashboard.title && config.dashboard.title.trim() !== ''
+    config.dashboard.titleStyle = hasTitle ? 'legacy' : 'small'
+
+    // Migrate all visualizations in dashboard
+    if (config.visualizations) {
+      Object.values((config as DashboardConfig).visualizations).forEach(visualization => {
+        migrateTitleStyle(visualization)
+      })
+    }
+  } else if (config.type === 'map') {
+    // Map stores titleStyle under general
+    if (!config.general) config.general = {}
+    const hasTitle = config.general.title && config.general.title.trim() !== ''
+    config.general.titleStyle = hasTitle ? 'legacy' : 'small'
+  } else if (config.type === 'markup-include') {
+    // Markup-include stores titleStyle under contentEditor (same location as title)
+    if (!config.contentEditor) config.contentEditor = {}
+    const hasTitle = config.contentEditor.title && config.contentEditor.title.trim() !== ''
+    config.contentEditor.titleStyle = hasTitle ? 'legacy' : 'small'
+  } else if (config.type === 'data-bite' || config.type === 'waffle-chart') {
+    // Data bites and waffle charts always use legacy title style - no migration needed
+    // The components hardcode 'legacy' for the Title component
+  } else if (config.type) {
+    // For all other visualization types (chart, filtered-text, etc.)
+    // titleStyle is at root level
+    const hasTitle = config.title && config.title.trim() !== ''
+    config.titleStyle = hasTitle ? 'legacy' : 'small'
+  }
+}
+
+const update_4_26_1 = config => {
+  const ver = '4.26.1'
+  const newConfig = cloneConfig(config)
+  normalizeFilterParents(newConfig)
+  removeOldBrushKeys(newConfig)
+  migrateTitleStyle(newConfig)
+  newConfig.version = ver
+  return newConfig
+}
+
+export default update_4_26_1

package/hooks/useDataColumns.ts

@@ -0,0 +1,63 @@
+import { useMemo } from 'react'
+
+export interface UseDataColumnsOptions {
+  /** Columns to exclude from the result */
+  excludeColumns?: string[]
+  /** Include only columns with specific data types */
+  dataTypes?: ('string' | 'number' | 'boolean' | 'date')[]
+}
+
+/**
+ * Extracts unique column names from data with memoization
+ *
+ * Performance optimization: Replaces the common getColumns() pattern
+ * that was duplicated across multiple packages and called multiple times per render.
+ *
+ * @param data - Array of data objects
+ * @param options - Optional configuration for filtering columns
+ * @returns Sorted array of unique column names
+ *
+ * @example
+ * // Basic usage
+ * const columns = useDataColumns(data)
+ *
+ * @example
+ * // With exclusions
+ * const columns = useDataColumns(data, { excludeColumns: [config.groupBy] })
+ *
+ * @example
+ * // Filter by data type
+ * const numericColumns = useDataColumns(data, { dataTypes: ['number'] })
+ */
+export const useDataColumns = (data: any[], options?: UseDataColumnsOptions): string[] => {
+  const { excludeColumns = [], dataTypes } = options || {}
+
+  return useMemo(() => {
+    if (!data?.length) return []
+
+    const columnsSet = new Set<string>()
+
+    // Single iteration through all rows (optimized from previous pattern)
+    data.forEach(row => {
+      Object.keys(row).forEach(columnName => {
+        if (excludeColumns.includes(columnName)) return
+
+        // Optional: filter by data type
+        if (dataTypes && dataTypes.length > 0) {
+          const value = row[columnName]
+          const valueType = typeof value
+          if (!dataTypes.includes(valueType as any)) return
+        }
+
+        columnsSet.add(columnName)
+      })
+    })
+
+    return Array.from(columnsSet).sort()
+  }, [
+    data,
+    // Stringify arrays for stable dependency tracking
+    excludeColumns.join(','),
+    dataTypes?.join(',')
+  ])
+}

package/hooks/useFilterManagement.ts

@@ -0,0 +1,94 @@
+/**
+ * Custom hook for managing filter operations in visualizations
+ *
+ * Provides common filter management functionality including:
+ * - Adding new filters
+ * - Removing filters
+ * - Updating filter properties
+ * - Getting unique column values for filter options
+ *
+ * @example
+ * ```tsx
+ * const { addNewFilter, removeFilter, updateFilterProp, getFilterColumnValues } =
+ *   useFilterManagement(config, updateConfig, data)
+ *
+ * // Add a new filter
+ * <Button onClick={addNewFilter}>Add Filter</Button>
+ *
+ * // Remove a filter
+ * <button onClick={() => removeFilter(index)}>Remove</button>
+ *
+ * // Update filter property
+ * <Select onChange={e => updateFilterProp('columnName', index, e.target.value)} />
+ *
+ * // Get column values for filter dropdown
+ * <Select options={getFilterColumnValues(index)} />
+ * ```
+ */
+export const useFilterManagement = <TConfig extends { filters?: any[] }>(
+  config: TConfig,
+  updateConfig: (config: TConfig) => void,
+  data: any[]
+) => {
+  /**
+   * Adds a new empty filter to the config
+   */
+  const addNewFilter = () => {
+    const filters = config.filters ? [...config.filters] : []
+    filters.push({ values: [] })
+    updateConfig({ ...config, filters })
+  }
+
+  /**
+   * Removes a filter at the specified index
+   * @param index - The index of the filter to remove
+   */
+  const removeFilter = (index: number) => {
+    const filters = [...(config.filters || [])]
+    filters.splice(index, 1)
+    updateConfig({ ...config, filters })
+  }
+
+  /**
+   * Updates a specific property of a filter
+   * @param name - The property name to update
+   * @param index - The index of the filter
+   * @param value - The new value for the property
+   */
+  const updateFilterProp = (name: string, index: number, value: any) => {
+    const filters = [...(config.filters || [])]
+    filters[index][name] = value
+    updateConfig({ ...config, filters })
+  }
+
+  /**
+   * Gets unique values from a data column for filter options
+   * @param index - The index of the filter (to get its columnName)
+   * @returns Array of unique, sorted values from the specified column
+   */
+  const getFilterColumnValues = (index: number): any[] => {
+    const filterDataOptions: any[] = []
+    const filterColumnName = config.filters?.[index]?.columnName
+
+    // Return empty array if no column name or no data
+    if (!filterColumnName || !data || !Array.isArray(data) || data.length === 0) {
+      return filterDataOptions
+    }
+
+    data.forEach(function (row: any) {
+      if (undefined !== row[filterColumnName] && -1 === filterDataOptions.indexOf(row[filterColumnName])) {
+        filterDataOptions.push(row[filterColumnName])
+      }
+    })
+    filterDataOptions.sort()
+
+    return filterDataOptions
+  }
+
+  return {
+    addNewFilter,
+    removeFilter,
+    updateFilterProp,
+    getFilterColumnValues
+  }
+}

package/hooks/useLegendSeparators.ts

@@ -0,0 +1,26 @@
+import { clamp } from 'lodash'
+
+// TODO: generalize this to be used in legends other than linear block gradient
+
+const LEGEND_SEPARATOR_SIZE = 0.02
+const LEGEND_SEPARATOR_SIZE_MAX = 20
+const LEGEND_SEPARATOR_SIZE_MIN = 8
+
+const useLegendSeparators = (separators, legendWidth, allowsLegendSeparators) => {
+  const legendSeparators = allowsLegendSeparators
+    ? separators?.replace(' ', '').split(',').map(Number).filter(Boolean) || []
+    : []
+  const separatorSize = clamp(legendWidth * LEGEND_SEPARATOR_SIZE, LEGEND_SEPARATOR_SIZE_MIN, LEGEND_SEPARATOR_SIZE_MAX)
+  const legendSeparatorsToSubtract = legendSeparators.length * separatorSize
+  const getTickSeparatorsAdjustment = (index: number) =>
+    legendSeparators.reduce((acc, separators) => (index >= separators ? acc + separatorSize : acc), 0)
+
+  return {
+    legendSeparators,
+    separatorSize,
+    legendSeparatorsToSubtract,
+    getTickSeparatorsAdjustment
+  }
+}
+
+export default useLegendSeparators