@cdc/core 4.25.7 → 4.25.10

package/components/EditorPanel/components/PanelMarkup.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import MarkupVariablesEditor from './MarkupVariablesEditor'
+import Accordion from '../../ui/Accordion'
+import { MarkupVariable } from '../../../types/MarkupVariable'
+
+type PanelMarkupProps = {
+  /** Display name for the panel */
+  name: string
+  /** Array of markup variable configurations */
+  markupVariables: MarkupVariable[]
+  /** Dataset to extract column names and values from */
+  data: any[]
+  /** Whether markup variables feature is enabled */
+  enableMarkupVariables: boolean
+  /** Callback when variables are added, updated, or removed */
+  onMarkupVariablesChange: (variables: MarkupVariable[]) => void
+  /** Callback when enable/disable toggle changes */
+  onToggleEnable: (enabled: boolean) => void
+  /** Optional: wrap in accordion. Default true */
+  withAccordion?: boolean
+}
+
+/**
+ * Shared panel for markup variables editor across all visualization packages.
+ * Wraps MarkupVariablesEditor with optional accordion functionality.
+ */
+const PanelMarkup: React.FC<PanelMarkupProps> = ({
+  name,
+  markupVariables,
+  data,
+  enableMarkupVariables,
+  onMarkupVariablesChange,
+  onToggleEnable,
+  withAccordion = true
+}) => {
+  const content = (
+    <MarkupVariablesEditor
+      markupVariables={markupVariables || []}
+      data={data}
+      onChange={onMarkupVariablesChange}
+      enableMarkupVariables={enableMarkupVariables || false}
+      onToggleEnable={onToggleEnable}
+    />
+  )
+
+  if (!withAccordion) {
+    return content
+  }
+
+  return (
+    <Accordion key={name}>
+      <Accordion.Section title={name} key={name}>
+        {content}
+      </Accordion.Section>
+    </Accordion>
+  )
+}
+
+export default PanelMarkup

package/components/ErrorBoundary.jsx

@@ -13,7 +13,9 @@ class ErrorBoundary extends React.Component {
 
   componentDidCatch(error, errorInfo) {
     // You can also log the error to an error reporting service
-    console.warn(error, errorInfo)
+    console.error('ErrorBoundary caught an error:', error)
+    console.error('Error info:', errorInfo)
+    console.error('Error stack:', error.stack)
   }
 
   render() {

package/components/Filters/Filters.tsx

@@ -14,10 +14,13 @@ import { getNestedOptions } from './helpers/getNestedOptions'
 import { getWrappingStatuses } from './helpers/filterWrapping'
 import { handleSorting } from './helpers/handleSorting'
 import { getChangedFilters } from './helpers/getChangedFilters'
+import { getUniqueValues } from '@cdc/map/src/helpers'
 import { getQueryParams, updateQueryString } from '../../helpers/queryStringUtils'
 import { applyQueuedActive } from './helpers/applyQueuedActive'
 import Tabs from './components/Tabs'
 import Dropdown from './components/Dropdown'
+import { publishAnalyticsEvent } from '../../helpers/metrics/helpers'
+import { getVizSubType, getVizTitle } from '@cdc/core/helpers/metrics/utils'
 
 export const VIZ_FILTER_STYLE = {
   dropdown: 'dropdown',
@@ -33,18 +36,13 @@ export type VizFilterStyle = (typeof VIZ_FILTER_STYLE)[keyof typeof VIZ_FILTER_S
 
 export const filterStyleOptions = Object.values(VIZ_FILTER_STYLE)
 
-const BUTTON_TEXT = {
-  apply: 'Apply',
-  resetText: 'Clear Filters'
-}
-
 type FilterProps = {
   dimensions?: DimensionsType
   config: Visualization
   setFilters: Function
   standaloneMap?: boolean
   excludedData?: Object[]
-  getUniqueValues?: Function
+  interactionLabel?: string
 }
 
 const Filters: React.FC<FilterProps> = ({
@@ -53,7 +51,7 @@ const Filters: React.FC<FilterProps> = ({
   standaloneMap,
   setFilters,
   excludedData,
-  getUniqueValues
+  interactionLabel = ''
 }) => {
   const { filters, general, theme, filterBehavior } = visualizationConfig
   const [showApplyButton, setShowApplyButton] = useState(false)
@@ -89,6 +87,16 @@ const Filters: React.FC<FilterProps> = ({
 
     const newFilters = getChangedFilters([...filters], index, value, filterBehavior)
     setFilters(newFilters)
+
+    publishAnalyticsEvent({
+      vizType: visualizationConfig.type as any,
+      vizSubType: getVizSubType(visualizationConfig),
+      eventType: `${visualizationConfig.type}_filter_changed` as any,
+      eventAction: 'change',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(visualizationConfig),
+      specifics: `key: ${String(newFilters?.[index]?.columnName).toLowerCase()}, value: ${String(newFilters?.[index]?.active).toLowerCase()}`
+    })
   }
 
   const handleApplyButton = newFilters => {
@@ -109,10 +117,19 @@ const Filters: React.FC<FilterProps> = ({
 
     setFilters(newFilters)
 
+    publishAnalyticsEvent({
+      vizType: visualizationConfig.type as any,
+      eventType: `${visualizationConfig.type}_filter_applied` as any,
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(visualizationConfig),
+      specifics: newFilters.map(f => f.active).join(',')
+    })
+
     setShowApplyButton(false)
   }
 
-  const handleReset = e => {
+  const handleFiltersReset = e => {
     let newFilters = [...filters]
     e.preventDefault()
 
@@ -137,6 +154,13 @@ const Filters: React.FC<FilterProps> = ({
     }
 
     setFilters(newFilters)
+    publishAnalyticsEvent({
+      vizType: visualizationConfig.type as any,
+      eventType: `${visualizationConfig.type}_filter_reset` as any,
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: visualizationConfig?.title
+    })
   }
 
   const mobileFilterStyle = useMemo(() => {
@@ -269,10 +293,10 @@ const Filters: React.FC<FilterProps> = ({
                 disabled={!showApplyButton}
                 className={[general?.headerColor ? general.headerColor : theme, 'apply', 'me-2'].join(' ')}
               >
-                {BUTTON_TEXT.apply}
+                Apply
               </Button>
-              <Button secondary disabled={initialFiltersActive} onClick={handleReset}>
-                {BUTTON_TEXT.resetText}
+              <Button secondary disabled={initialFiltersActive} onClick={handleFiltersReset}>
+                Clear Filters
               </Button>
             </div>
           ) : (

package/components/Filters/components/Tabs.tsx

@@ -41,6 +41,7 @@ const Tabs: React.FC<TabsProps> = ({ filter, index: outerIndex, changeFilterActi
   const Tabs = filter.values.map((value, index) => {
     return (
       <button
+        key={`${value}-${outerIndex}-${index}-${id}`}
         id={`${value}-${outerIndex}-${index}-${id}`}
         className={getClassList(value)}
         onClick={e => {

package/components/Footnotes/FootnotesStandAlone.tsx

@@ -14,7 +14,8 @@ const FootnotesStandAlone: React.FC<StandAloneProps> = ({ config, filters }) =>
   if (!config) return null
   // get the api footnotes from the config
   const apiFootnotes = useMemo(() => {
-    const configData = filterVizData(filters, config.data)
+    // If filters exist and should filter footnotes, apply them, otherwise use data as-is
+    const configData = filters && filters.length > 0 ? filterVizData(filters, config.data) : config.data
     if (configData && config.dataKey && config.dynamicFootnotes) {
       const { symbolColumn, textColumn, orderColumn } = config.dynamicFootnotes
       const _data = configData.map(row => _.pick(row, [symbolColumn, textColumn, orderColumn]))

package/components/Legend/Legend.Gradient.tsx

@@ -70,7 +70,7 @@ const LegendGradient = ({
     const lastTick = index === labels.length - 1
 
     return (
-      <Group top={MARGIN}>
+      <Group key={`tick-${index}`} top={MARGIN}>
         {!lastTick && !isLinearBlocks && <line x1={xPositionX} x2={xPositionX} y1={30} y2={boxHeight} stroke='black' />}
         <Text
           angle={-tickRotation}
@@ -123,9 +123,8 @@ const LegendGradient = ({
               const segmentWidth = (legendWidth - legendSeparatorsToSubtract) / numTicks
               const xPosition = index * segmentWidth + MARGIN + getTickSeparatorsAdjustment(index)
               return (
-                <Group>
+                <Group key={`color-block-${index}`}>
                   <rect
-                    key={index}
                     x={xPosition}
                     y={MARGIN}
                     width={segmentWidth}
@@ -142,10 +141,9 @@ const LegendGradient = ({
               const segmentWidth = (legendWidth - legendSeparatorsToSubtract) / numTicks
               const xPosition = separatorAfter * segmentWidth + MARGIN + getTickSeparatorsAdjustment(separatorAfter - 1)
               return (
-                <Group>
+                <Group key={`separator-${index}`}>
                   {/* Separators block */}
                   <rect
-                    key={index}
                     x={xPosition}
                     y={MARGIN / 2}
                     width={separatorSize}
@@ -157,7 +155,6 @@ const LegendGradient = ({
 
                   {/* Dotted dividing line */}
                   <line
-                    key={index}
                     x1={xPosition + separatorSize / 2}
                     x2={xPosition + separatorSize / 2}
                     y1={-3}

package/components/LegendShape.tsx

@@ -1,24 +1,142 @@
 import React from 'react'
 
+interface PatternInfo {
+  pattern: string
+  patternId: string
+  size?: string
+  color?: string
+}
+
 interface LegendShapeProps {
   fill: string
   borderColor?: string
   display?: 'inline-block' | 'block' | 'inline'
   shape?: 'circle' | 'square'
+  patternInfo?: PatternInfo
 }
 
 const LegendShape: React.FC<LegendShapeProps> = props => {
-  const { fill, borderColor, display = 'inline-block', shape = 'circle' } = props
+  const { fill, borderColor, display = 'inline-block', shape = 'circle', patternInfo } = props
   const dimensions = { width: '1em', height: '1em' }
   const isCircleOrSquare = ['circle', 'square'].includes(shape)
+
+  // If pattern is provided, use SVG with pattern fill
+  if (patternInfo) {
+    const sizes = {
+      small: '8',
+      medium: '10',
+      large: '12'
+    }
+
+    const patternSize = sizes[patternInfo.size as keyof typeof sizes] || '10'
+    // Use the exact pattern color from config, with a reliable fallback
+    const patternColor = patternInfo.color || '#212529'
+
+    return (
+      <span className={`legend-item ${isCircleOrSquare ? 'me-2' : ''}`} style={{ display, verticalAlign: 'middle', width: dimensions.width, height: dimensions.height }}>
+        <svg width="100%" height="100%" viewBox="0 0 16 16" className="legend-shape-svg">
+          {/* Pattern definitions */}
+          <defs>
+            {patternInfo.pattern === 'waves' && (
+              <pattern
+                id={patternInfo.patternId}
+                patternUnits="userSpaceOnUse"
+                width={patternSize}
+                height={patternSize}
+              >
+                <path
+                  d={`M0,${parseInt(patternSize) / 2} Q${parseInt(patternSize) / 4},0 ${parseInt(patternSize) / 2},${parseInt(patternSize) / 2} T${patternSize},${parseInt(patternSize) / 2}`}
+                  stroke={patternColor}
+                  strokeWidth="0.25"
+                  fill="none"
+                />
+              </pattern>
+            )}
+            {patternInfo.pattern === 'circles' && (
+              <pattern
+                id={patternInfo.patternId}
+                patternUnits="userSpaceOnUse"
+                width={patternSize}
+                height={patternSize}
+              >
+                <circle
+                  cx={parseInt(patternSize) / 2}
+                  cy={parseInt(patternSize) / 2}
+                  r="1.25"
+                  fill={patternColor}
+                />
+              </pattern>
+            )}
+            {patternInfo.pattern === 'lines' && (
+              <pattern
+                id={patternInfo.patternId}
+                patternUnits="userSpaceOnUse"
+                width={patternSize}
+                height={patternSize}
+              >
+                <line
+                  x1="0"
+                  y1="0"
+                  x2={patternSize}
+                  y2={patternSize}
+                  stroke={patternColor}
+                  strokeWidth="0.75"
+                />
+              </pattern>
+            )}
+          </defs>
+
+          {shape === 'circle' ? (
+            <circle
+              fill={fill}
+              r={7.5}
+              cx={8}
+              cy={8}
+              stroke={borderColor || 'rgba(0,0,0,.3)'}
+              strokeWidth={1}
+            />
+          ) : (
+            <rect
+              fill={fill}
+              width={15}
+              height={15}
+              x={0.5}
+              y={0.5}
+              stroke={borderColor || 'rgba(0,0,0,.3)'}
+              strokeWidth={1}
+            />
+          )}
+          {shape === 'circle' ? (
+            <circle
+              fill={`url(#${patternInfo.patternId})`}
+              r={7.5}
+              cx={8}
+              cy={8}
+              stroke='none'
+            />
+          ) : (
+            <rect
+              fill={`url(#${patternInfo.patternId})`}
+              width={15}
+              height={15}
+              x={0.5}
+              y={0.5}
+              stroke='none'
+            />
+          )}
+        </svg>
+      </span>
+    )
+  }
+
+  // Default solid color shape
   const styles = {
     borderRadius: shape === 'circle' ? '50%' : '0px',
-    verticalAlign: 'middle',
     display: display,
     height: dimensions.height,
     width: dimensions.width,
     border: borderColor ? `${borderColor} 1px solid` : 'rgba(0,0,0,.3) 1px solid',
-    backgroundColor: fill
+    backgroundColor: fill,
   }
 
   return <span className={`legend-item ${isCircleOrSquare ? 'me-2' : ''}`} style={styles} />

package/components/{MediaControls.jsx → MediaControls.tsx}

@@ -1,5 +1,7 @@
 import React from 'react'
 // import html2pdf from 'html2pdf.js'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 const buttonText = {
   pdf: 'Download PDF',
@@ -33,10 +35,18 @@ const saveImageAs = (uri, filename) => {
   }
 }
 
-const generateMedia = (state, type, elementToCapture) => {
+const generateMedia = (state, type, elementToCapture, interactionLabel) => {
   // Identify Selector
   const baseSvg = document.querySelector(`[data-download-id=${elementToCapture}]`)
 
+  // Extract title from different state structures
+  const getTitle = state => {
+    if (state?.dashboard?.title) return state.dashboard.title
+    if (state?.general?.title) return state.general.title
+    if (state?.title) return state.title
+    return undefined
+  }
+
   // Handles different state title locations between components
   // Apparently some packages use state.title where others use state.general.title
   const handleFileName = state => {
@@ -75,20 +85,55 @@ const generateMedia = (state, type, elementToCapture) => {
 
   switch (type) {
     case 'image':
+      const container = document.createElement('div')
+      // On screenshots without a title (like some charts), add padding around the chart svg
+      if (!state.showTitle) {
+        container.style.padding = '35px'
+      }
+      container.appendChild(baseSvg.cloneNode(true)) // Clone baseSvg to avoid modifying the original
+
       const downloadImage = async () => {
+        document.body.appendChild(container) // Append container to the DOM
+
+        // Fix select elements to show their current selected values before screenshot
+        const selectElements = container.querySelectorAll('select')
+        const originalSelects = baseSvg.querySelectorAll('select')
+
+        selectElements.forEach((select, index) => {
+          const originalSelect = originalSelects[index]
+          if (originalSelect && originalSelect.value) {
+            select.value = originalSelect.value
+            // Also update the visual display for browsers that don't update immediately
+            const selectedOption = select.querySelector(`option[value="${originalSelect.value}"]`) as HTMLOptionElement
+            if (selectedOption) {
+              selectedOption.selected = true
+            }
+          }
+        })
+
         import(/* webpackChunkName: "html2canvas" */ 'html2canvas').then(mod => {
           mod
-            .default(baseSvg, {
+            .default(container, {
               ignoreElements: el =>
                 el.className?.indexOf &&
                 el.className.search(/download-buttons|download-links|data-table-container/) !== -1
             })
             .then(canvas => {
+              document.body.removeChild(container) // Clean up container
               saveImageAs(canvas.toDataURL(), filename + '.png')
+              publishAnalyticsEvent({
+                vizType: state.type,
+                vizSubType: getVizSubType(state),
+                eventType: `image_download`,
+                eventAction: 'click',
+                eventLabel: interactionLabel,
+                vizTitle: getTitle(state)
+              })
             })
         })
       }
       downloadImage()
+
       return
     case 'pdf':
       // let opt = {
@@ -115,22 +160,13 @@ const generateMedia = (state, type, elementToCapture) => {
   }
 }
 
-// Handles different state theme locations between components
-// Apparently some packages use state.headerColor where others use state.theme
-const handleTheme = state => {
-  if (state?.headerColor) return state.headerColor // ie. maps
-  if (state?.theme) return state.theme // ie. charts
-  return 'theme-notFound'
-}
-
-// Download CSV
-const Button = ({ state, text, type, title, elementToCapture }) => {
+const Button = ({ state, text, type, title, elementToCapture, interactionLabel = '' }) => {
   const buttonClasses = ['btn', 'btn-primary']
   return (
     <button
       className={buttonClasses.join(' ')}
       title={title}
-      onClick={() => generateMedia(state, type, elementToCapture)}
+      onClick={() => generateMedia(state, type, elementToCapture, interactionLabel)}
       style={{ lineHeight: '1.4em' }}
     >
       {buttonText[type]}
@@ -139,12 +175,26 @@ const Button = ({ state, text, type, title, elementToCapture }) => {
 }
 
 // Link to CSV/JSON data
-const Link = ({ config, dashboardDataConfig }) => {
+const Link = ({ config, dashboardDataConfig, interactionLabel }) => {
   let dataConfig = dashboardDataConfig || config
   // Handles Maps & Charts
   if (dataConfig.dataFileSourceType === 'url' && dataConfig.dataFileName && config.table.showDownloadUrl) {
     return (
-      <a href={dataConfig.dataFileName} title={buttonText.link} target='_blank'>
+      <a
+        href={dataConfig.dataFileName}
+        title={buttonText.link}
+        target='_blank'
+        onClick={() => {
+          publishAnalyticsEvent({
+            vizType: config.type,
+            vizSubType: getVizSubType(config),
+            eventType: 'clicked_data_link_to_view',
+            eventAction: 'click',
+            eventLabel: interactionLabel,
+            vizTitle: getVizTitle(config)
+          })
+        }}
+      >
         {buttonText.link}
       </a>
     )
@@ -152,7 +202,21 @@ const Link = ({ config, dashboardDataConfig }) => {
 
   // Handles Dashboards
   return config?.table?.showDownloadUrl && dataConfig.dataUrl ? (
-    <a href={dataConfig.dataUrl} title='Link to view full data set' target='_blank'>
+    <a
+      href={dataConfig.dataUrl}
+      title='Link to view full data set'
+      target='_blank'
+      onClick={() => {
+        publishAnalyticsEvent({
+          vizType: config.type,
+          vizSubType: getVizSubType(config),
+          eventType: 'data_viewed',
+          eventAction: 'click',
+          eventLabel: interactionLabel,
+          vizTitle: getVizTitle(config)
+        })
+      }}
+    >
       {buttonText.link}
     </a>
   ) : null

package/components/PaletteConversionModal.tsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import Button from '@cdc/core/components/elements/Button'
+
+interface PaletteConversionModalProps {
+  onConfirm: () => void
+  onCancel: () => void
+  onReturnToV1: () => void
+  paletteName?: string
+}
+
+const PaletteConversionModal: React.FC<PaletteConversionModalProps> = ({
+  onConfirm,
+  onCancel,
+  onReturnToV1,
+  paletteName
+}) => {
+  return (
+    <div
+      className='modal-overlay'
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 9999
+      }}
+    >
+      <div
+        className='modal-content'
+        style={{
+          backgroundColor: 'white',
+          borderRadius: '8px',
+          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+          maxWidth: '500px',
+          margin: '20px'
+        }}
+      >
+        <div
+          className='modal-header'
+          style={{
+            padding: '20px 20px 0 20px',
+            borderBottom: '1px solid #e0e0e0'
+          }}
+        >
+          <h3 style={{ margin: '0 0 20px 0' }}>Color Palette Conversion</h3>
+        </div>
+
+        <div className='modal-body' style={{ padding: '20px' }}>
+          <p>
+            <strong>
+              Your visualization uses an outdated color palette and will be updated to a new, improved palette.
+            </strong>
+          </p>
+          <br />
+          <p>
+            These new palettes provide improved accessibility and consistency across visualizations. If your previous
+            colors are important for approvals, do not save your visualizations with the new palette.
+          </p>
+          <br />
+        </div>
+
+        <div
+          className='modal-footer'
+          style={{
+            padding: '20px',
+            borderTop: '1px solid #e0e0e0',
+            display: 'flex',
+            gap: '10px',
+            justifyContent: 'flex-end'
+          }}
+        >
+          <Button secondary onClick={onReturnToV1} style={{ marginRight: 'auto' }}>
+            Cancel
+          </Button>
+          <Button onClick={onConfirm}>Convert to New Palette</Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PaletteConversionModal