@cdc/core 4.25.8 → 4.25.11

package/helpers/filterColorPalettes.ts

@@ -0,0 +1,152 @@
+import { getColorPaletteVersion } from './getColorPaletteVersion'
+import { chartColorPalettes, twoColorPalette } from '../data/colorPalettes'
+
+export interface FilterColorPalettesOptions {
+  config: any
+  isReversed?: boolean
+  colorPalettes?: any
+  visualizationType?: string
+  useV2Migration?: boolean
+}
+
+export interface FilteredPalettes {
+  sequential: string[]
+  nonSequential: string[]
+  accessibleColors: string[]
+  twoColorPalettes?: string[]
+}
+
+/**
+ * Universal color palette filtering function that works across all visualization types
+ * Combines chart and map palette filtering logic with backwards compatibility
+ */
+export const filterColorPalettes = ({
+  config,
+  isReversed,
+  colorPalettes,
+  visualizationType,
+  useV2Migration
+}: FilterColorPalettesOptions): FilteredPalettes => {
+  // Use provided colorPalettes or fall back to chart palettes
+  const palettes = colorPalettes || chartColorPalettes
+  const version = getColorPaletteVersion(config, useV2Migration)
+  const versionKey = `v${version}`
+  const currentPalettes = palettes[versionKey] || palettes.v2
+
+  // Handle two-color palettes for specific chart types
+  if (visualizationType === 'Paired Bar' || visualizationType === 'Deviation Bar') {
+    const twoColorPalettes = filterTwoColorPalettes(version, isReversed)
+    return {
+      sequential: [],
+      nonSequential: [],
+      accessibleColors: [],
+      twoColorPalettes
+    }
+  }
+
+  // Handle regular palette filtering
+  const isReversedFromConfig = isReversed !== undefined
+    ? isReversed
+    : config.general?.palette?.isReversed
+
+  return filterRegularPalettes(currentPalettes, version, isReversedFromConfig)
+}
+
+/**
+ * Filter two-color palettes (for Paired Bar and Deviation Bar charts)
+ */
+function filterTwoColorPalettes(version: number, isReversed?: boolean): string[] {
+  // Use the version to get the correct two-color palettes
+  const versionKey = `v${version}`
+  const versionedTwoColorPalettes = twoColorPalette[versionKey] || twoColorPalette.v2
+  
+  return Object.keys(versionedTwoColorPalettes).filter(name =>
+    isReversed ? name.endsWith('reverse') : !name.endsWith('reverse')
+  )
+}
+
+/**
+ * Filter regular palettes (sequential, non-sequential, accessible)
+ */
+function filterRegularPalettes(palettes: any, version: number, isReversed?: boolean): FilteredPalettes {
+  const sequential: string[] = []
+  const nonSequential: string[] = []
+  const accessibleColors: string[] = []
+
+  for (const paletteName in palettes) {
+    const isPaletteReversed = paletteName.endsWith('reverse')
+    const matchesReversed = (!isReversed && !isPaletteReversed) || (isReversed && isPaletteReversed)
+
+    if (version === 1) {
+      filterV1Palette(paletteName, matchesReversed, sequential, nonSequential, accessibleColors)
+    } else {
+      filterV2Palette(paletteName, matchesReversed, sequential, nonSequential, accessibleColors)
+    }
+  }
+
+  return { sequential, nonSequential, accessibleColors }
+}
+
+/**
+ * Filter V1 palettes using original chart logic
+ */
+function filterV1Palette(
+  paletteName: string,
+  matchesReversed: boolean,
+  sequential: string[],
+  nonSequential: string[],
+  accessibleColors: string[]
+): void {
+  if (!matchesReversed) return
+
+  if (paletteName.startsWith('sequential')) {
+    sequential.push(paletteName)
+  } else if (paletteName.startsWith('qualitative') && !paletteName.startsWith('colorblindsafe')) {
+    nonSequential.push(paletteName)
+  } else if (paletteName.startsWith('colorblindsafe') || paletteName.includes('colorblindsafe')) {
+    accessibleColors.push(paletteName)
+  }
+}
+
+/**
+ * Filter V2 palettes using updated logic for new palette structure
+ */
+function filterV2Palette(
+  paletteName: string,
+  matchesReversed: boolean,
+  sequential: string[],
+  nonSequential: string[],
+  accessibleColors: string[]
+): void {
+  if (!matchesReversed) return
+
+  if (paletteName.startsWith('sequential')) {
+    sequential.push(paletteName)
+  } else if (paletteName.startsWith('divergent')) {
+    nonSequential.push(paletteName)
+  } else if (paletteName.includes('colorblindsafe') || paletteName.startsWith('qualitative-standard')) {
+    accessibleColors.push(paletteName)
+  } else if (paletteName.startsWith('qualitative') && !paletteName.includes('colorblindsafe')) {
+    // V2 qualitative palettes go to accessible colors if they're standard
+    if (paletteName.includes('standard')) {
+      accessibleColors.push(paletteName)
+    }
+  }
+}
+
+/**
+ * Legacy function for backwards compatibility with chart package
+ */
+export const filterChartColorPalettes = (config: any) => {
+  const version = getColorPaletteVersion(config)
+
+  if (version === 1) {
+    return chartColorPalettes.v1
+  }
+
+  if (version === 2) {
+    return chartColorPalettes.v2
+  }
+
+  return chartColorPalettes.v2
+}

package/helpers/generateColorsArray.ts

@@ -0,0 +1,13 @@
+import chroma from 'chroma-js'
+
+/**
+ * Generate an array of colors based on a given color [color, hoverColor, darkColor]
+ * @param {string} color - The base color to generate the array from (defaults to black)
+ * @param {boolean} special - A flag to determine if the hover color should be brighter or saturated
+ * @returns {string[]} - An array of colors [baseColor, hoverColor, darkerColor]
+ */
+export const generateColorsArray = (color: string = '#000000', special: boolean = false): string[] => {
+  const colorObj = chroma(color)
+  const hoverColor = special ? colorObj.brighten(0.5).hex() : colorObj.saturate(1.3).hex()
+  return [color, hoverColor, colorObj.darken(0.3).hex()]
+}

package/helpers/getColorPaletteVersion.ts

@@ -0,0 +1,33 @@
+import { USE_V2_MIGRATION } from './constants'
+
+/**
+ * Gets the color palette version from a visualization config
+ * @param config - The visualization config object
+ * @param useV2Migration - If provided, overrides the global flag
+ * @returns The major version number
+ */
+export const getColorPaletteVersion = (config: any, useV2Migration?: boolean): number => {
+  // Use passed parameter or fall back to global flag
+  const shouldUseV2 = useV2Migration !== undefined ? useV2Migration : USE_V2_MIGRATION
+
+  // If not using v2 migration, force v1 unless explicitly set to v2
+  if (!shouldUseV2) {
+    if (config.general?.palette?.version) {
+      return parseInt(config.general.palette.version.split('.')[0])
+    }
+    return 1
+  }
+
+  // V2 migration logic - If general.palette exists, it's either migrated or new
+  if (config.general?.palette) {
+    // If version is explicitly set, use it
+    if (config.general.palette.version) {
+      return parseInt(config.general.palette.version.split('.')[0])
+    }
+    // If no version but palette exists, it's likely migrated → use v2
+    return 2
+  }
+
+  // If no general.palette at all, it's legacy → use v1
+  return 1
+}

package/helpers/getPaletteAccessor.ts

@@ -0,0 +1,18 @@
+import { getColorPaletteVersion } from './getColorPaletteVersion'
+
+/**
+ * Gets the appropriate palette accessor based on config version
+ * @param colorPalettes - The color palettes object (e.g., mapColorPalettes, chartColorPalettes)
+ * @param config - The visualization config object
+ * @param paletteName - Optional palette name to get specific palette
+ * @returns The versioned palette accessor or fallback to main palettes, optionally filtered to specific palette
+ */
+export const getPaletteAccessor = (colorPalettes: any, config: any, paletteName?: string) => {
+  const paletteAccessor = colorPalettes?.[`v${getColorPaletteVersion(config)}`] || colorPalettes
+
+  if (paletteName && paletteAccessor) {
+    return paletteAccessor[paletteName]
+  }
+
+  return paletteAccessor
+}

package/helpers/markupProcessor.ts

@@ -0,0 +1,220 @@
+import _ from 'lodash'
+import { MarkupVariable, MarkupCondition } from '../types/MarkupVariable'
+import { VizFilter } from '../types/VizFilter'
+import { Datasets } from '../types/DataSet'
+import { filterVizData } from './filterVizData'
+
+/**
+ * Replaces {{variable}} tags in content with actual data values.
+ *
+ * @param content - Content string with markup variables
+ * @param data - Dataset to extract values from (for backward compatibility)
+ * @param markupVariables - Variable configurations
+ * @param options - isEditor, showNoDataMessage, allowHideSection, filters, datasets
+ * @returns Processed content and state flags
+ *
+ * @security Returns plain text - must be parsed with html-react-parser before rendering
+ */
+export const processMarkupVariables = (
+  content: string,
+  data: any[] = [],
+  markupVariables: MarkupVariable[] = [],
+  options: {
+    isEditor?: boolean
+    showNoDataMessage?: boolean
+    allowHideSection?: boolean
+    filters?: VizFilter[]
+    datasets?: Datasets
+    configDataKey?: string // Add support for widget's assigned dataset
+  } = {}
+): {
+  processedContent: string
+  shouldHideSection: boolean
+  shouldShowNoDataMessage: boolean
+} => {
+  const { isEditor = false, showNoDataMessage = false, allowHideSection = false, filters = [], datasets, configDataKey } = options
+
+  // Helper function to get data for a specific variable
+  const getDataForVariable = (variable: MarkupVariable): any[] => {
+    // If data prop is empty, try to use the widget's assigned dataset
+    if ((!data || data.length === 0) && configDataKey && datasets && datasets[configDataKey]) {
+      return datasets[configDataKey].data || []
+    }
+
+    return data || []
+  }
+
+  // Early return for invalid inputs
+  if (_.isEmpty(markupVariables) || !content) {
+    return {
+      processedContent: content || '',
+      shouldHideSection: false,
+      shouldShowNoDataMessage: false
+    }
+  }
+
+  try {
+    const emptyVariableChecker: boolean[] = []
+    const noDataMessageChecker: boolean[] = []
+
+    const variableRegexPattern = /{{(.*?)}}/g
+    const processedContent = content.replace(variableRegexPattern, variableTag => {
+      try {
+        if (emptyVariableChecker.length > 0) return variableTag
+
+        const workingVariable = markupVariables.find(variable => variable.tag === variableTag)
+        if (!workingVariable) return variableTag
+
+        // Validate that columnName exists
+        if (!workingVariable.columnName) {
+          console.warn(`Markup variable ${variableTag} has no columnName specified`)
+          return variableTag
+        }
+
+        // Get the appropriate dataset for this variable
+        let variableData = getDataForVariable(workingVariable)
+
+        // Apply global filters if present
+        if (filters && filters.length > 0) {
+          variableData = filterVizData(filters, variableData)
+        }
+
+        // Filter data with error handling (apply conditions on top of already filtered data)
+        const conditionFilteredData =
+          workingVariable.conditions.length === 0
+            ? variableData
+            : filterDataByConditions(variableData, [...workingVariable.conditions])
+
+        // Extract values with error handling
+        const variableValues: string[] = _.uniq(
+          (conditionFilteredData || []).map(dataObject => {
+            try {
+              const dataObjectValue = dataObject[workingVariable.columnName]
+
+              // Handle undefined column
+              if (dataObjectValue === undefined && isEditor) {
+                console.warn(
+                  `Column "${workingVariable.columnName}" not found in data for variable ${variableTag}`
+                )
+              }
+
+              return workingVariable.addCommas && !isNaN(parseFloat(dataObjectValue))
+                ? parseFloat(dataObjectValue).toLocaleString('en-US', { useGrouping: true })
+                : String(dataObjectValue || '')
+            } catch (error) {
+              console.error(`Error processing data value for ${variableTag}:`, error)
+              return ''
+            }
+          })
+        ).filter(value => value !== '') // Filter out empty values
+
+        const listConjunction = !isEditor ? 'and' : 'or'
+        const formattedValues = formatValuesList(variableValues, listConjunction)
+
+        const finalDisplay = formattedValues.join(', ')
+
+        if (showNoDataMessage && finalDisplay === '') {
+          noDataMessageChecker.push(true)
+        }
+
+        if (finalDisplay === '' && allowHideSection) {
+          emptyVariableChecker.push(true)
+        }
+
+        return finalDisplay
+      } catch (error) {
+        console.error(`Error processing markup variable ${variableTag}:`, error)
+        return variableTag // Return original tag on error
+      }
+    })
+
+    return {
+      processedContent,
+      shouldHideSection: allowHideSection && emptyVariableChecker.length > 0 && !isEditor,
+      shouldShowNoDataMessage: showNoDataMessage && noDataMessageChecker.length > 0 && !isEditor
+    }
+  } catch (error) {
+    console.error('Error in processMarkupVariables:', error)
+    // Return original content on error
+    return {
+      processedContent: content,
+      shouldHideSection: false,
+      shouldShowNoDataMessage: false
+    }
+  }
+}
+
+/**
+ * Filters data based on multiple conditions
+ */
+const filterDataByConditions = (data: any[], conditions: MarkupCondition[]): any[] => {
+  if (!conditions.length) return data
+
+  const [currentCondition, ...remainingConditions] = conditions
+  const { columnName, isOrIsNotEqualTo, value } = currentCondition
+
+  const filteredData = isOrIsNotEqualTo === 'is'
+    ? data.filter(dataObject => String(dataObject[columnName]) === value)
+    : data.filter(dataObject => String(dataObject[columnName]) !== value)
+
+  return remainingConditions.length === 0
+    ? filteredData
+    : filterDataByConditions(filteredData, remainingConditions)
+}
+
+/**
+ * Formats a list of values with proper conjunction
+ */
+const formatValuesList = (values: string[], conjunction: string): string[] => {
+  if (values.length === 0) return values
+  if (values.length === 1) return values
+  if (values.length === 2) {
+    return [`${values[0]} ${conjunction} ${values[1]}`]
+  }
+
+  const formatted = [...values]
+  formatted[formatted.length - 1] = `${conjunction} ${formatted[formatted.length - 1]}`
+  return [formatted.join(', ')]
+}
+
+/**
+ * Validates markup variables configuration
+ */
+export const validateMarkupVariables = (
+  markupVariables: MarkupVariable[],
+  data: any[]
+): string[] => {
+  const errors: string[] = []
+
+  if (!markupVariables || !Array.isArray(markupVariables)) {
+    return errors
+  }
+
+  const availableColumns = data.length > 0 ? Object.keys(data[0]) : []
+
+  markupVariables.forEach((variable, index) => {
+    if (!variable.tag || !variable.tag.match(/^{{.+}}$/)) {
+      errors.push(`Variable ${index + 1}: Tag must be in format {{tagName}}`)
+    }
+
+    if (!variable.columnName) {
+      errors.push(`Variable ${index + 1}: Column name is required`)
+    } else if (availableColumns.length > 0 && !availableColumns.includes(variable.columnName)) {
+      errors.push(`Variable ${index + 1}: Column "${variable.columnName}" not found in data`)
+    }
+
+    variable.conditions.forEach((condition, condIndex) => {
+      if (!condition.columnName) {
+        errors.push(`Variable ${index + 1}, Condition ${condIndex + 1}: Column name is required`)
+      } else if (availableColumns.length > 0 && !availableColumns.includes(condition.columnName)) {
+        errors.push(`Variable ${index + 1}, Condition ${condIndex + 1}: Column "${condition.columnName}" not found in data`)
+      }
+
+      if (!condition.value) {
+        errors.push(`Variable ${index + 1}, Condition ${condIndex + 1}: Value is required`)
+      }
+    })
+  })
+
+  return errors
+}

package/helpers/mergeCustomOrderValues.ts

@@ -0,0 +1,37 @@
+/**
+ * Merges new filter values with existing custom ordered values
+ *
+ * When order === 'cust', this function ensures that:
+ * 1. New values from the data are appended to the end of orderedValues
+ * 2. If orderedValues is missing/empty, it initializes with current values
+ *
+ * @param currentValues - Array of all unique values extracted from current data
+ * @param existingOrderedValues - Existing custom ordered values array (may be undefined/empty)
+ * @param order - The filter's order setting
+ * @returns Updated orderedValues array with new values appended, or undefined if not custom order
+ */
+export const mergeCustomOrderValues = (
+  currentValues: (string | number)[],
+  existingOrderedValues: string[] | undefined,
+  order: string | undefined
+): string[] | undefined => {
+  // Only process for custom order
+  if (order !== 'cust') {
+    return existingOrderedValues
+  }
+
+  // Normalize current values to strings (filter values are always displayed as strings)
+  const normalizedCurrentValues = currentValues.map(v => String(v))
+
+  // If orderedValues doesn't exist or is empty, initialize with current values
+  if (!existingOrderedValues || existingOrderedValues.length === 0) {
+    return [...normalizedCurrentValues]
+  }
+
+  // Find new values that aren't in orderedValues yet
+  const orderedValuesSet = new Set(existingOrderedValues)
+  const newValues = normalizedCurrentValues.filter(value => !orderedValuesSet.has(value))
+
+  // Return merged array: existing order + new values appended
+  return [...existingOrderedValues, ...newValues]
+}

package/helpers/metrics/helpers.ts

@@ -3,7 +3,8 @@ import packageJson from '../../package.json'
 import {
   COVE_VISUALIZATION_TYPES,
   ANALYTICS_EVENT_ACTIONS,
-  ANALYTICS_EVENT_TYPES
+  ANALYTICS_EVENT_TYPES,
+  EventSpecifics
 } from './types'
 import { GetLabelForEvent } from './getLabelForEvent'
 
@@ -22,31 +23,53 @@ export const getPackageVersion = () => {
 
 /**
  * Publishes an analytics event with the specified parameters.
- * @param {ANALYTICS_EVENT_TYPES} eventType - The type of the event
- * @param {ANALYTICS_EVENT_ACTIONS} [eventAction='unknown'] - The action associated with the event
- * @param {ANALYTICS_EVENT_LABEL} [eventLabel='unknown'] - The label for the event
- * @param {COVE_VISUALIZATION_TYPES} [visualizationType] - The type of visualization associated with the event
- * @param {Object} [additionalDetails] - Additional details to include in the event
+ * Format: APP|VIZTYPE_VIZSUBTYPE|VIZ_TITLE|INTERACTION_EVENT_NAME|INTERACTION_TYPE|SPECIFICS
+ *
+ * @param {Object} params - The parameters for the analytics event
+ * @param {string} params.app - The application name (e.g., 'COVE')
+ * @param {COVE_VISUALIZATION_TYPES} params.vizType - The visualization type (e.g., 'map', 'chart')
+ * @param {string} [params.vizSubType] - The visualization subtype (e.g., 'county', 'state', 'bar', 'line')
+ * @param {string} [params.vizTitle] - The title of the visualization
+ * @param {ANALYTICS_EVENT_TYPES} params.eventType - The interaction event name
+ * @param {ANALYTICS_EVENT_ACTIONS} [params.eventAction='unknown'] - The interaction type (e.g., 'click', 'hover')
+ * @param {string} [params.eventLabel] - The event label (typically config URL or interaction label)
+ * @param {string} [params.specifics] - Additional specifics about the event (structured as "key: value, key2: value2")
+ * @param {string} [params.version] - The version of the package (defaults to package.json version)
  * @returns {void}
  * @description This function is used to publish analytics events for various user interactions and system states.
  */
-export const publishAnalyticsEvent = <T extends ANALYTICS_EVENT_TYPES>(
-  eventType: T,
-  eventAction: ANALYTICS_EVENT_ACTIONS = 'unknown',
-  eventLabel: GetLabelForEvent<T>,
-  visualizationType?: COVE_VISUALIZATION_TYPES,
-  additionalDetails?: Object
-) => {
+export const publishAnalyticsEvent = <T extends ANALYTICS_EVENT_TYPES>({
+  app = 'cove',
+  vizType,
+  vizSubType,
+  vizTitle,
+  eventType,
+  eventAction = 'unknown',
+  eventLabel,
+  specifics,
+  version,
+  ...additionalDetails
+}: {
+  app?: string
+  vizType: COVE_VISUALIZATION_TYPES
+  vizSubType?: string
+  vizTitle?: string
+  eventType: T
+  eventAction?: ANALYTICS_EVENT_ACTIONS
+  eventLabel?: GetLabelForEvent<T>
+  specifics?: T extends keyof EventSpecifics ? EventSpecifics[T] : string
+  version?: string
+  [key: string]: any
+}) => {
   // Added check if we ever need to disable analytics
   const ANALYTICS_POWERED_ON = true
   if (!ANALYTICS_POWERED_ON) return
 
+  // Format: APP|VIZTYPE_VIZSUBTYPE|VIZ_TITLE|INTERACTION_EVENT_NAME|INTERACTION_TYPE|SPECIFICS
+  const vizTypeSubType = vizSubType ? `${vizType}_${vizSubType}` : vizType
+  const formattedEvent = `${app}|${vizTypeSubType}|${vizTitle || 'unknown'}|${eventType}|${eventAction}|${specifics || 'no details'}`
   return publish('cove:analytics', {
-    eventType,
-    eventAction,
-    eventLabel,
-    component: visualizationType || 'unknown',
-    version: getPackageVersion() || 'unknown',
-    ...(additionalDetails || {})
+    formattedEvent,
+    eventLabel
   })
 }

package/helpers/metrics/types.ts

@@ -2,12 +2,14 @@ export type COVE_VISUALIZATION_TYPES =
   | 'map'
   | 'chart'
   | 'data-table'
+  | 'table'
   | 'markup-include'
   | 'waffle-chart'
   | 'dashboard'
   | 'filtered-text'
   | 'table-filter'
   | 'data-bite'
+  | 'navigation'
   | 'unknown'
 
 export type ANALYTICS_EVENT_ACTIONS =
@@ -16,28 +18,65 @@ export type ANALYTICS_EVENT_ACTIONS =
   | 'toggle'
   | 'none'
   | 'keydown'
+  | 'keyboard'
   | 'load'
   | 'submit'
   | 'change'
+  | 'hover'
   | 'unknown'
 
 export type LEGEND_TOGGLE_MODES = 'highlight' | 'isolate'
 
+/**
+ * Type-safe specifics for different event types
+ * The specifics field should contain structured key-value pairs formatted as strings
+ * Format: "key1: value1, key2: value2"
+ */
+export type EventSpecifics = {
+  // Map events
+  map_hover: `location: ${string}`
+  zoom_in: `zoom_level: ${number}` | `location: ${string}` | `zoom_level: ${number}, location: ${string}`
+  zoom_out: `zoom_level: ${number}` | `location: ${string}` | `zoom_level: ${number}, location: ${string}`
+
+  // Legend events
+  map_legend_item_toggled: `mode: ${LEGEND_TOGGLE_MODES}` | `mode: ${LEGEND_TOGGLE_MODES}, item: ${string}`
+  chart_legend_item_toggled: `mode: ${LEGEND_TOGGLE_MODES}` | `mode: ${LEGEND_TOGGLE_MODES}, item: ${string}`
+
+  // Table events
+  data_table_sort: `column: ${string}, order: ${'asc' | 'desc' | 'none'}`
+
+  // Filter events
+  dashboard_filter_changed: `key: ${string}, value: ${string}`
+
+  // Generic fallback for any event
+  [key: string]: string
+}
+
 export type ANALYTICS_EVENT_TYPES =
+  // Data actions
   | 'data_downloaded'
-  | 'data_table_toggled' // expand/collapse
+  | 'expand_collapse_toggled' // alternative name for data_table_toggled
+  | 'data_table_sort'
   | 'data_viewed'
+  | 'clicked_data_link_to_view'
+  | 'link_to_data_table_click'
+
+  // Filter events
   | `${COVE_VISUALIZATION_TYPES}_filter_reset`
   | `${COVE_VISUALIZATION_TYPES}_filter_applied`
   | `${COVE_VISUALIZATION_TYPES}_filter_changed`
-  | `${COVE_VISUALIZATION_TYPES}_image_downloaded`
-  | `${COVE_VISUALIZATION_TYPES}_legend_item_toggled--${LEGEND_TOGGLE_MODES}-mode`
+
+  // Legend events
+  | `${COVE_VISUALIZATION_TYPES}_legend_item_toggled` // simplified with specifics for mode
   | `${COVE_VISUALIZATION_TYPES}_legend_reset`
-  | `${COVE_VISUALIZATION_TYPES}_loaded`
-  | `${COVE_VISUALIZATION_TYPES}_navigation_menu`
+
+  // Map-specific events
+  | `${COVE_VISUALIZATION_TYPES}_hover` // simplified with specifics for location
   | `${COVE_VISUALIZATION_TYPES}_panned`
   | `${COVE_VISUALIZATION_TYPES}_reset_zoom_level`
-  | `${COVE_VISUALIZATION_TYPES}_zoomed_in`
-  | `${COVE_VISUALIZATION_TYPES}_zoomed_out`
-  | `data_table_sort_by|${string}|${'asc' | 'desc' | 'undefined'}`
-  | 'link_to_data_table_click'
+  | `zoom_in` // simplified with specifics for zoom level and location
+  | `zoom_out` // simplified with specifics for zoom level and location
+  | `${COVE_VISUALIZATION_TYPES}_navigation_menu`
+
+  // Image/export events
+  | 'image_download' // generic image download event

package/helpers/metrics/utils.ts

@@ -0,0 +1,34 @@
+const getVizTitle = (config) => {
+  if (config?.type === 'dashboard') {
+    return String(config?.dashboard?.title).toLowerCase()
+  }
+  if (config?.title) {
+    return String(config.title).toLowerCase()
+  } else if (config?.general?.title) {
+    return String(config.general.title).toLowerCase()
+  } else {
+    return 'no title'
+  }
+}
+
+const getVizSubType = config => {
+  if (config?.type === 'markup-include') {
+    return `${config?.contentEditor?.title}`
+  }
+  if (config?.general?.geoType) {
+    return `${config.general.geoType}`
+  }
+
+  if (config?.type === 'chart' && config?.visualizationType) {
+    // Convert chart visualization type to format: chart_subtype
+    // e.g., "Bar" -> "chart_bar", "Line" -> "chart_line"
+    const subtype = String(config.visualizationType).toLowerCase().replace(/\s+/g, '_')
+    return `${subtype}`
+  }
+
+  if (config?.type === 'chart') {
+    return 'chart'
+  }
+}
+
+export { getVizTitle, getVizSubType }