@cdc/core 4.25.10 → 4.26.1

package/helpers/embedCodeGenerator.ts

@@ -0,0 +1,109 @@
+/**
+ * Generates iframe embed code for COVE visualizations
+ * Used by editor's "Share with Partners" feature
+ */
+
+interface EmbedCodeOptions {
+  configUrl: string
+  width?: string
+  height?: string
+  embedBaseUrl?: string
+  helperScriptUrl?: string
+  /** Additional URL parameters (e.g., filter values, hide flags) */
+  urlParams?: Record<string, string>
+}
+
+/**
+ * Detect if we're in development mode
+ */
+export function isDevMode(): boolean {
+  if (typeof window === 'undefined') return false
+  return window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
+}
+
+/**
+ * Get default embed base URL based on environment
+ * Returns full absolute URL including protocol and host
+ */
+export function getDefaultEmbedBaseUrl(): string {
+  if (isDevMode()) {
+    return 'http://localhost:8080'
+  }
+  return 'https://www.cdc.gov/TemplatePackage/contrib/widgets/openVizWrapper/dist/embed/embed.html'
+}
+
+/**
+ * Get embed path (without protocol/host) for same-origin usage
+ * Use this for preview iframes on the same domain
+ */
+export function getEmbedPath(): string {
+  if (isDevMode()) {
+    return '/'
+  }
+  return '/TemplatePackage/contrib/widgets/openVizWrapper/dist/embed/embed.html'
+}
+
+/**
+ * Get default embed helper script URL based on environment
+ */
+export function getDefaultHelperScriptUrl(): string {
+  if (isDevMode()) {
+    return 'http://localhost:8080/src/embed-helper/index.js'
+  }
+  return 'https://www.cdc.gov/TemplatePackage/contrib/widgets/openVizWrapper/dist/embed/embed-helper.js'
+}
+
+/**
+ * Get default generator base URL based on environment
+ */
+export function getDefaultGeneratorBaseUrl(): string {
+  if (isDevMode()) {
+    return 'http://localhost:8080/generator.html'
+  }
+  return 'https://www.cdc.gov/TemplatePackage/contrib/widgets/openVizWrapper/dist/embed/generator.html'
+}
+
+/**
+ * Generate basic iframe embed code for partners
+ *
+ * @param options.configUrl - URL to the published config JSON
+ * @param options.width - iframe width (default: "100%")
+ * @param options.height - iframe height (default: "300")
+ * @param options.embedBaseUrl - Base URL for embed page (auto-detected by environment)
+ * @param options.helperScriptUrl - URL for embed-helper.js (auto-detected by environment)
+ * @param options.urlParams - Additional URL parameters (e.g., filter values, hide flags)
+ * @returns HTML string with iframe and script tag
+ */
+export function generateEmbedCode(options: EmbedCodeOptions): string {
+  const {
+    configUrl,
+    width = '100%',
+    height = '300',
+    embedBaseUrl = getDefaultEmbedBaseUrl(),
+    helperScriptUrl = getDefaultHelperScriptUrl(),
+    urlParams = {}
+  } = options
+
+  // Construct embed page URL with config parameter and any additional params
+  const params = new URLSearchParams()
+  params.set('configUrl', configUrl)
+
+  // Add any additional URL parameters (filters, hide flags, etc.)
+  Object.entries(urlParams).forEach(([key, value]) => {
+    if (value) params.set(key, value)
+  })
+
+  const embedUrl = `${embedBaseUrl}?${params.toString()}`
+
+  // Generate iframe code
+  const iframeCode = `<iframe src="${embedUrl}"
+data-cove-embed
+width="${width}"
+height="${height}"
+frameborder="0"
+title="CDC Data Visualization"
+></iframe>
+<script src="${helperScriptUrl}"></script>`
+
+  return iframeCode
+}

package/helpers/fetchRemoteData.ts

@@ -1,5 +1,5 @@
-import Papa from 'papaparse'
 import { isSolrCsv } from '@cdc/core/helpers/isSolr'
+import { parseCsvWithQuotes } from '@cdc/core/helpers/parseCsvWithQuotes'
 
 export default function fetchRemoteData(_url) {
   let url = new URL(_url, window.location.origin)
@@ -11,22 +11,10 @@ export default function fetchRemoteData(_url) {
     return fetch(url.href)
       .then(response => response.text())
       .then(responseText => {
-        // for every comma NOT inside quotes, replace with a pipe delimiter
-        // - this will let commas inside the quotes not be parsed as a new column
-        // - Limitation: if a delimiter other than comma is used in the csv this will break
-        // Examples of other delimiters that would break: tab
-        responseText = responseText.replace(/(".*?")|,/g, (...m) => m[1] || '|')
-        // now strip the double quotes
-        responseText = responseText.replace(/["]+/g, '')
-        const parsedCsv = Papa.parse(responseText, {
-          //quotes: "true",  // dont need these
-          //quoteChar: "'",  // has no effect that I can tell
-          header: true,
-          skipEmptyLines: true,
-          delimiter: '|', // we are using pipe symbol as delimiter so setting this explicitly for Papa.parse
+        return parseCsvWithQuotes(responseText, {
+          delimiter: '|',
           dynamicTyping: false
         })
-        return parsedCsv.data
       })
   } else {
     return fetch(isSolrCsv(_url) ? _url : url.href).then(response => {

package/helpers/getUniqueValues.ts

@@ -0,0 +1,19 @@
+/**
+ * Get unique values from a column in a dataset
+ * @returns {Array} - The unique values
+ */
+export const getUniqueValues = (data: Array<Record<string, any>>, columnName: string) => {
+  let result = {}
+
+  for (let i = 0; i < data.length; i++) {
+    let val = data[i][columnName]
+
+    if (undefined === val) continue
+
+    if (undefined === result[val]) {
+      result[val] = true
+    }
+  }
+
+  return Object.keys(result)
+}

package/helpers/hashObj.ts

@@ -0,0 +1,25 @@
+/**
+ * Hashes an object
+ * @param {Object} row - The object to hash
+ * @returns {number} - The hash of the object
+ */
+export const hashObj = row => {
+  try {
+    if (!row || row === undefined) return null
+
+    let str = JSON.stringify(row)
+    let hash = 0
+
+    if (str.length === 0) return hash
+
+    for (let i = 0; i < str.length; i++) {
+      let char = str.charCodeAt(i)
+      hash = (hash << 5) - hash + char
+      hash = hash & hash
+    }
+
+    return hash
+  } catch (e) {
+    console.error({ state: 'COVE: ' + e.message }) // eslint-disable-line
+  }
+}

package/helpers/isRightAlignedTableValue.js

@@ -12,6 +12,11 @@ export default function isRightAlignedTableValue(value = '') {
     if (/^\d{4}-\d{1,2}-\d{1,2}$/.test(value)) {
       return false
     }
+    // Years like 1995 and 2014 are not considered numbers
+    if (/^(19|20)\d{2}$/.test(value)) {
+      return false
+    }
+
     return numericStrings.includes(value) || /^[\$\d\.\%\,\-\s\(\)CI<>]*$/.test(value)
   }
   return false

package/helpers/markupProcessor.ts

@@ -1,15 +1,16 @@
 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
+ * @param data - Dataset to extract values from (for backward compatibility)
  * @param markupVariables - Variable configurations
- * @param options - isEditor, showNoDataMessage, allowHideSection, filters
+ * @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
@@ -23,13 +24,25 @@ export const processMarkupVariables = (
     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 = [] } = options
+  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) {
@@ -40,12 +53,6 @@ export const processMarkupVariables = (
     }
   }
 
-  // Apply filters to data if filters are present
-  let workingData = data
-  if (filters && filters.length > 0) {
-    workingData = filterVizData(filters, data)
-  }
-
   try {
     const emptyVariableChecker: boolean[] = []
     const noDataMessageChecker: boolean[] = []
@@ -64,11 +71,19 @@ export const processMarkupVariables = (
           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
-            ? workingData
-            : filterDataByConditions(workingData, [...workingVariable.conditions])
+            ? variableData
+            : filterDataByConditions(variableData, [...workingVariable.conditions])
 
         // Extract values with error handling
         const variableValues: string[] = _.uniq(
@@ -202,4 +217,4 @@ export const validateMarkupVariables = (
   })
 
   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

@@ -68,6 +68,7 @@ export const publishAnalyticsEvent = <T extends ANALYTICS_EVENT_TYPES>({
   // 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', {
     formattedEvent,
     eventLabel

package/helpers/parseCsvWithQuotes.ts

@@ -0,0 +1,65 @@
+import Papa from 'papaparse'
+
+/**
+ * Parses CSV text while preserving newlines and commas within quoted fields.
+ * 
+ * @param responseText - The raw CSV text to parse
+ * @param options - Parsing options
+ * @param options.delimiter - The delimiter to use after processing (default: '|')
+ * @param options.dynamicTyping - Whether to automatically convert types (default: false)
+ * @returns Parsed CSV data as an array of objects
+ */
+export function parseCsvWithQuotes(
+  responseText: string,
+  options: {
+    delimiter?: string
+    dynamicTyping?: boolean
+  } = {}
+): any[] {
+  const { delimiter = '|', dynamicTyping = false } = options
+  
+  const NEWLINE_PLACEHOLDER = '__COVE_NEWLINE__'
+  
+  // Preserve newlines in quoted fields by replacing with placeholder
+  const quotedFields: string[] = []
+  let placeholderIndex = 0
+  let sanitizedText = responseText.replace(/("(?:[^"\\]|\\.|[\s\S])*?")/g, (match) => {
+    const preserved = match.replace(/\n/g, NEWLINE_PLACEHOLDER)
+    quotedFields.push(preserved)
+    return `__QUOTED_FIELD_${placeholderIndex++}__`
+  })
+  
+  // Replace commas outside quoted fields with pipe delimiter
+  sanitizedText = sanitizedText.replace(/(__QUOTED_FIELD_\d+__)|,/g, (...m) => m[1] || delimiter)
+  
+  // Restore quoted fields without outer quotes
+  quotedFields.forEach((field, index) => {
+    const unquoted = field.slice(1, -1).replace(new RegExp(NEWLINE_PLACEHOLDER, 'g'), '\n')
+    sanitizedText = sanitizedText.replace(`__QUOTED_FIELD_${index}__`, unquoted)
+  })
+  
+  // Parse with Papa.parse
+  const parsedCsv = Papa.parse(sanitizedText, {
+    header: true,
+    skipEmptyLines: true,
+    delimiter,
+    dynamicTyping
+  })
+  
+  // Restore newlines in parsed data
+  const restoredData = parsedCsv.data.map((row: any) => {
+    const restoredRow: any = {}
+    Object.keys(row).forEach(key => {
+      const value = row[key]
+      if (typeof value === 'string') {
+        restoredRow[key] = value.replace(new RegExp(NEWLINE_PLACEHOLDER, 'g'), '\n')
+      } else {
+        restoredRow[key] = value
+      }
+    })
+    return restoredRow
+  })
+  
+  return restoredData
+}
+

package/helpers/pivotData.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash'
 
-const getColumns = (data: Record<string, any>[], columnName: string, pivot: string[], excludeColumns: string[]) => {
+const getNonPivotColumns = (data: Record<string, any>[], columnName: string, pivot: string[], excludeColumns: string[]) => {
   const excludedColumns = [columnName, ...pivot, ...excludeColumns]
   return _.uniq(data.flatMap(row => Object.keys(row))).filter(col => !excludedColumns.includes(col))
 }
@@ -13,7 +13,7 @@ export const pivotData = (
   pivot: string[],
   excludeColumns: string[]
 ): Record<string, any>[] => {
-  const columns = getColumns(data, columnName, pivot, excludeColumns)
+  const columns = getNonPivotColumns(data, columnName, pivot, excludeColumns)
   const newColumns = data.reduce((acc, row) => {
     acc[row[columnName]] = ''
     return acc

package/helpers/prepareScreenshot.ts

@@ -0,0 +1,268 @@
+/**
+ * Helpers for preparing screenshot containers for image downloads
+ */
+
+export interface ClonedElements {
+  clonedTree: HTMLElement
+  clonedViz: HTMLElement
+}
+
+interface VisualizationWrapper {
+  parentChildren: Element[]
+  wrapperIndex: number
+}
+
+/**
+ * Walk up from viz to find a parent container that has:
+ * - Multiple children
+ * - At least one child (before viz) that contains H2/H3 but NOT the viz
+ *
+ * Stops climbing at section boundaries (never goes above <section> or .dfe-section)
+ */
+function findParentWithContext(viz: HTMLElement): HTMLElement | null {
+  let current = viz.parentElement
+
+  while (current) {
+    const isSection = current.tagName === 'SECTION' || current.classList.contains('dfe-section')
+
+    const children = Array.from(current.children)
+
+    // Need at least 2 children (heading + viz wrapper)
+    if (children.length < 2) {
+      if (isSection) {
+        return null
+      }
+      current = current.parentElement
+      continue
+    }
+
+    // Find which child contains the viz (guaranteed to exist since we're walking up from viz)
+    const vizChildIndex = children.findIndex(child => child.contains(viz))
+
+    // Check children before the viz for heading
+    for (let i = 0; i < vizChildIndex; i++) {
+      const child = children[i] as HTMLElement
+      const isHeading = child.tagName === 'H2' || child.tagName === 'H3'
+      const containsHeading = child.querySelector('h2, h3') !== null
+
+      if (isHeading || containsHeading) {
+        return current
+      }
+    }
+
+    // Don't climb above section boundaries
+    if (isSection) {
+      return null
+    }
+
+    // No suitable heading found in this parent's children, go up
+    current = current.parentElement
+  }
+
+  return null
+}
+
+/**
+ * Find which direct child of the parent container contains the visualization
+ */
+function findVisualizationWrapper(viz: HTMLElement, parent: Element): VisualizationWrapper {
+  const parentChildren = Array.from(parent.children)
+  const wrapperIndex = parentChildren.findIndex(child => child.contains(viz))
+  return { parentChildren, wrapperIndex }
+}
+
+/**
+ * Walk backwards from viz to find nearest H2 or H3
+ * Stops early if another visualization is encountered
+ */
+function findNearestHeadingIndex(parentChildren: Element[], vizWrapperIndex: number): number {
+  for (let i = vizWrapperIndex - 1; i >= 0; i--) {
+    const child = parentChildren[i] as HTMLElement
+
+    // STOP: Another visualization found - don't include its content
+    if (child.classList.contains('cdc-open-viz-module') || child.querySelector('.cdc-open-viz-module')) {
+      return -1
+    }
+
+    // Found direct H2/H3
+    if (child.tagName === 'H2' || child.tagName === 'H3') {
+      return i
+    }
+
+    // Found nested H2/H3
+    if (child.querySelector('h2, h3')) {
+      return i
+    }
+  }
+
+  return -1 // No heading found
+}
+
+/**
+ * Build cloned parent container with only selected children (heading through viz)
+ */
+function buildContextClone(
+  parent: Element,
+  headingIndex: number,
+  vizWrapperIndex: number,
+  elementToCapture: string
+): ClonedElements {
+  const parentChildren = Array.from(parent.children)
+
+  // Shallow clone parent (preserves classes/styling)
+  const clonedTree = parent.cloneNode(false) as HTMLElement
+
+  // Append only selected children (heading → viz wrapper)
+  for (let i = headingIndex; i <= vizWrapperIndex; i++) {
+    clonedTree.appendChild(parentChildren[i].cloneNode(true))
+  }
+
+  // Find viz in cloned tree
+  const clonedViz = clonedTree.querySelector(`[data-download-id="${elementToCapture}"]`) as HTMLElement
+
+  // Container styling adjustments
+  clonedTree.style.marginBottom = '0'
+
+  // Remove top margin from context headings (not inside viz)
+  const allHeadings = clonedTree.querySelectorAll('h2, h3')
+  allHeadings.forEach(heading => {
+    if (!clonedViz.contains(heading)) {
+      ;(heading as HTMLElement).style.marginTop = '0'
+    }
+  })
+
+  return { clonedTree, clonedViz }
+}
+
+function isInEditorMode(element: HTMLElement): boolean {
+  return element.closest('.cdc-open-viz-module.isEditor') !== null
+}
+
+/**
+ * Prepare cloned elements (with or without context)
+ * Returns viz-only clone as fallback for any failure
+ * Exported for testing
+ */
+export function prepareClonedElements(
+  baseSvg: HTMLElement,
+  includeContextInDownload: boolean,
+  elementToCapture: string
+): ClonedElements {
+  const defaultClone = (): ClonedElements => {
+    const tree = baseSvg.cloneNode(true) as HTMLElement
+    return { clonedTree: tree, clonedViz: tree }
+  }
+
+  // Early return: context not requested or in editor mode (editor downloads should not include context)
+  if (!includeContextInDownload || isInEditorMode(baseSvg)) {
+    return defaultClone()
+  }
+
+  // Early return: no parent with context found
+  const parent = findParentWithContext(baseSvg)
+  if (!parent) {
+    return defaultClone()
+  }
+
+  // Get viz wrapper (guaranteed to exist since findParentWithContext found it)
+  const { parentChildren, wrapperIndex } = findVisualizationWrapper(baseSvg, parent as Element)
+
+  // Early return: no heading found (or another viz in the way)
+  const headingIndex = findNearestHeadingIndex(parentChildren, wrapperIndex)
+  if (headingIndex < 0) {
+    return defaultClone()
+  }
+
+  // Build with context
+  return buildContextClone(parent, headingIndex, wrapperIndex, elementToCapture)
+}
+
+/**
+ * Strip all <a> tags from cloned tree (links aren't clickable in PNG)
+ */
+function stripLinks(clonedTree: HTMLElement): void {
+  const allLinks = clonedTree.querySelectorAll('a')
+  allLinks.forEach(link => {
+    const textNode = document.createTextNode(link.textContent || '')
+    link.parentNode?.replaceChild(textNode, link)
+  })
+}
+
+/**
+ * Convert canvas elements to images (canvas pixel data doesn't clone)
+ */
+function convertCanvasToImages(baseSvg: HTMLElement, clonedViz: HTMLElement): void {
+  const originalCanvases = baseSvg.querySelectorAll('canvas')
+  const clonedCanvases = clonedViz.querySelectorAll('canvas')
+
+  clonedCanvases.forEach((clonedCanvas, index) => {
+    const originalCanvas = originalCanvases[index] as HTMLCanvasElement
+    if (originalCanvas && originalCanvas.width > 0 && originalCanvas.height > 0) {
+      const img = document.createElement('img')
+      img.src = originalCanvas.toDataURL('image/png')
+      img.width = originalCanvas.width
+      img.height = originalCanvas.height
+      img.className = originalCanvas.className
+      clonedCanvas.parentNode?.replaceChild(img, clonedCanvas)
+    }
+  })
+}
+
+/**
+ * Expand SVG widths and remove animation classes
+ */
+function expandSvgWidths(clonedViz: HTMLElement): void {
+  const svgWidthBuffer = 25
+  const svgElements = clonedViz.querySelectorAll('svg')
+
+  svgElements.forEach(svg => {
+    const currentWidth = parseInt(svg.getAttribute('width') || '0')
+    if (currentWidth > 0) {
+      svg.setAttribute('width', (currentWidth + svgWidthBuffer).toString())
+    }
+
+    // Remove animation classes to show final state immediately
+    svg.classList.remove('animated', 'animate')
+  })
+}
+
+/**
+ * Main function: Prepare a complete container ready for html2canvas screenshot
+ */
+export function prepareScreenshotContainer(
+  baseSvg: HTMLElement,
+  includeContextInDownload: boolean,
+  elementToCapture: string
+): HTMLDivElement {
+  // 1. Clone elements (with or without context)
+  const { clonedTree, clonedViz } = prepareClonedElements(baseSvg, includeContextInDownload, elementToCapture)
+
+  // 2. Strip all links (not clickable in static image)
+  stripLinks(clonedTree)
+
+  // 3. Convert canvas elements to images
+  convertCanvasToImages(baseSvg, clonedViz)
+
+  // 4. Expand SVG widths to prevent clipping
+  expandSvgWidths(clonedViz)
+
+  // 5. Calculate viz dimensions
+  const computedStyle = getComputedStyle(baseSvg)
+  const vizWidth =
+    parseFloat(computedStyle.width) -
+    (parseFloat(computedStyle.paddingLeft) || 0) -
+    (parseFloat(computedStyle.paddingRight) || 0)
+
+  // 6. Create and style container
+  const container = document.createElement('div')
+  container.style.width = `${vizWidth + 36}px`
+  container.style.padding = '18px'
+
+  // 7. Reset viz padding
+  clonedViz.style.padding = '0'
+
+  // 8. Append cloned tree to container
+  container.appendChild(clonedTree)
+
+  return container
+}