@cdc/core 4.25.11 → 4.26.2

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/vegaConfig.ts

@@ -1,6 +1,6 @@
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import { formatDate } from '@cdc/core/helpers/cove/date.js'
-import { _ } from 'lodash'
+import _ from 'lodash'
 import { compile as vegaLiteCompile } from 'vega-lite'
 import { parse as vegaParse, View as vegaView } from 'vega'
 

package/helpers/vegaConfigImport.ts

@@ -0,0 +1,160 @@
+/**
+ * Shared Vega-to-COVE conversion helper for stories.
+ */
+import {
+  convertVegaConfig,
+  getVegaConfigType,
+  getVegaErrors,
+  getVegaWarnings,
+  isVegaConfig,
+  parseVegaConfig
+} from './vegaConfig'
+
+/** Chart-type "button" definitions used to seed new COVE configs. */
+const buttons = [
+  {
+    id: 1,
+    category: 'Charts',
+    label: 'Bar',
+    type: 'chart',
+    subType: 'Bar',
+    orientation: 'vertical',
+    barThickness: '0.37',
+    visualizationSubType: 'regular',
+    xAxis: { type: 'categorical', size: 75, maxTickRotation: 45, labelOffset: 0 },
+    content: 'Use bars to show comparisons between data categories.'
+  },
+  {
+    id: 3,
+    category: 'Charts',
+    label: 'Combo Chart',
+    type: 'chart',
+    subType: 'Combo',
+    orientation: 'vertical',
+    content: 'Use bars to show comparisons between data categories.'
+  },
+  {
+    id: 4,
+    category: 'Charts',
+    label: 'Line',
+    type: 'chart',
+    subType: 'Line',
+    orientation: 'vertical',
+    content: 'Present one or more data trends over time.'
+  },
+  {
+    id: 6,
+    category: 'Charts',
+    label: 'Area Chart',
+    type: 'chart',
+    subType: 'Area Chart',
+    orientation: 'vertical',
+    content: 'Display an area chart to visualize quantities over time.'
+  },
+  {
+    id: 8,
+    category: 'Charts',
+    label: 'Scatter Plot',
+    type: 'chart',
+    subType: 'Scatter Plot',
+    orientation: 'vertical',
+    content: 'Display a scatter plot to explore relationships between numeric variables.'
+  },
+  {
+    id: 12,
+    category: 'Charts',
+    label: 'Horizontal Bar (Stacked)',
+    type: 'chart',
+    subType: 'Bar',
+    visualizationSubType: 'stacked',
+    orientation: 'horizontal',
+    content: 'Use bars to show comparisons between data categories.'
+  },
+  {
+    id: 19,
+    category: 'Maps',
+    label: 'United States (State- or County-Level)',
+    type: 'map',
+    subType: 'us',
+    content: 'Present a U.S. choropleth map at state or county level.',
+    position: 'right'
+  }
+]
+
+/** Build a seed COVE config from a button definition. */
+const generateNewConfig = (props: any) => {
+  let newConfig: any = {}
+  switch (props.category) {
+    case 'Charts': {
+      const visualizationType = props.subType
+      const visualizationSubType = !props.visualizationSubType ? 'regular' : props.visualizationSubType
+      newConfig = {
+        ...props,
+        visualizationType,
+        visualizationSubType,
+        newViz: true,
+        datasets: {}
+      }
+      break
+    }
+    case 'Maps': {
+      newConfig = { ...props, newViz: true, datasets: {}, type: 'map' }
+      newConfig['general'] = { geoType: props.subType, type: props?.generalType }
+      break
+    }
+  }
+  return newConfig
+}
+
+/**
+ * Convert a raw Vega/Vega-Lite config into a COVE config.
+ * Returns `null` if the config has errors.
+ */
+export const importVegaConfig = async (rawConfig: any): Promise<any | null> => {
+  const vegaConfig = await parseVegaConfig(rawConfig)
+  const vegaErrors = getVegaErrors(rawConfig, vegaConfig)
+  if (vegaErrors.length > 0) {
+    console.warn('Vega import errors:', vegaErrors)
+    return null
+  }
+
+  const configType = getVegaConfigType(vegaConfig)
+  const configSubType = configType === 'Map' ? 'United States (State- or County-Level)' : configType
+  const button = buttons.find(b => b.label === configSubType)
+  if (!button) {
+    console.warn(`No button found for config type "${configSubType}"`)
+    return null
+  }
+
+  const coveConfig = generateNewConfig(JSON.parse(JSON.stringify(button)))
+  try {
+    const warnings = getVegaWarnings(rawConfig, vegaConfig)
+    if (warnings.length) {
+      console.warn('Vega import warnings:', warnings)
+    }
+    const result = convertVegaConfig(configType, vegaConfig, coveConfig)
+
+    // Ensure imported Vega configs use the v1 qualitative palette so CdcChart
+    // doesn't apply v2 sequential-blue defaults (which would change the colors).
+    if (result && result.type !== 'map') {
+      result.general = result.general || {}
+      result.general.palette = {
+        name: 'qualitative-bold',
+        version: '1.0'
+      }
+    }
+
+    return result
+  } catch (err) {
+    console.error('Vega conversion error:', err)
+    return null
+  }
+}
+
+/** Check if a config is a Vega config and convert it; otherwise pass through. */
+export const maybeConvertVega = async (config: any): Promise<any | null> => {
+  if (isVegaConfig(config)) {
+    return importVegaConfig(config)
+  }
+  return config
+}

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' && config.visualizations) {
+    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