@cdc/chart 4.26.1 → 4.26.3

package/src/components/Regions/components/Regions.tsx

@@ -91,7 +91,7 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
         ? new Date(domain[domain.length - 1] as string | number).getTime()
         : new Date(region.to)
 
-    const toFormatted = formatDate(config.xAxis.dateParseFormat, toRefDate)
+    const toFormatted = formatDate(config.xAxis.dateParseFormat, toRefDate, config.locale)
     const toDate = new Date(toFormatted)
     const fromDate = new Date(toDate)
     fromDate.setDate(fromDate.getDate() - previousDays)
@@ -99,7 +99,7 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
     let closestValue: unknown
 
     if (axisType === 'date') {
-      const fromTime = new Date(formatDate(xAxis.dateParseFormat, fromDate)).getTime()
+      const fromTime = new Date(formatDate(xAxis.dateParseFormat, fromDate, config.locale)).getTime()
       closestValue = findClosestDate(fromTime, domain as number[], d => d)
     } else if (axisType === 'categorical') {
       const fromTime = fromDate.getTime()
@@ -151,7 +151,7 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       // For date scale (band), we need to find the value in the domain
       // Parse the region date to match the format in the domain
       const date = new Date(region.from)
-      const parsedDate = parseDate(formatDate(config.xAxis.dateParseFormat, date)).getTime()
+      const parsedDate = parseDate(formatDate(config.xAxis.dateParseFormat, date, config.locale)).getTime()
 
       // For band scales, find the closest date in the domain
       const domain = xScale.domain() as number[]
@@ -193,7 +193,7 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       return from + Number(config.yAxis.size)
     }
     const date = new Date(region.from)
-    const parsedDate = parseDate(formatDate(config.xAxis.dateParseFormat, date)).getTime()
+    const parsedDate = parseDate(formatDate(config.xAxis.dateParseFormat, date, config.locale)).getTime()
     let from = xScale(parsedDate)
     // For date-time, xScale returns correct position (no bandwidth), just add left padding
     return from + Number(config.yAxis.size)
@@ -252,7 +252,7 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
     }
     // For date scale (band), we need to find the value in the domain
     const date = new Date(region.from)
-    const parsedDate = parseDate(formatDate(config.xAxis.dateParseFormat, date)).getTime()
+    const parsedDate = parseDate(formatDate(config.xAxis.dateParseFormat, date, config.locale)).getTime()
 
     // For band scales, find the closest date in the domain
     const domain = xScale.domain() as number[]
@@ -281,7 +281,7 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       from = calculatePreviousDaysFrom(region, 'date-time')
     } else {
       const date = new Date(region.from)
-      const parsedDate = parseDate(formatDate(config.xAxis.dateParseFormat, date)).getTime()
+      const parsedDate = parseDate(formatDate(config.xAxis.dateParseFormat, date, config.locale)).getTime()
       from = xScale(parsedDate)
     }
     return from - getBarOffset()

package/src/components/Sankey/components/Sankey.tsx

@@ -226,7 +226,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
               data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
             >
-              {typeof node.value === 'number' ? node.value.toLocaleString() : node.value}
+              {typeof node.value === 'number' ? node.value.toLocaleString(config.locale) : node.value}
             </Text>
             <Text
               width={linkLength()}
@@ -281,7 +281,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
             >
               <tspan className={classStyle}>
                 {sankeyConfig.nodeValueStyle.textBefore +
-                  (typeof node.value === 'number' ? node.value.toLocaleString() : node.value) +
+                  (typeof node.value === 'number' ? node.value.toLocaleString(config.locale) : node.value) +
                   sankeyConfig.nodeValueStyle.textAfter}
               </tspan>
             </text>
@@ -394,7 +394,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               textAnchor='start'
               style={{ pointerEvents: 'none' }}
             >
-              {typeof node.value === 'number' ? node.value.toLocaleString() : node.value}
+              {typeof node.value === 'number' ? node.value.toLocaleString(config.locale) : node.value}
             </Text>
             <Text
               x={node.x0! + textPositionHorizontal}

package/src/components/Sankey/sankey.scss

@@ -5,7 +5,7 @@
   column-gap: 30px;
 }
 
-.cdc-open-viz-module .sankey-chart {
+.cove-visualization .sankey-chart {
   --font-size-small: 12px;
   --font-size-medium: 16px;
   --font-size-large: 18px;

package/src/components/SmallMultiples/SmallMultiples.css

@@ -1,13 +1,13 @@
 .small-multiples-container {
-  width: 100%;
   display: flex;
   flex-direction: column;
+  width: 100%;
 }
 
 .small-multiples-grid {
   display: grid;
-  width: 100%;
   flex: 1;
+  width: 100%;
 }
 
 .small-multiple-tile {
@@ -20,13 +20,13 @@
 }
 
 .tile-title {
-  margin: 0;
   font-weight: 700;
-  text-align: left;
   line-height: 1.3;
+  margin: 0;
+  text-align: left;
 }
 
 .tile-chart {
-  width: 100%;
   flex-shrink: 0;
+  width: 100%;
 }

package/src/components/Sparkline/index.scss

@@ -1,3 +1,5 @@
-.cdc-open-viz-module.type-chart.lg.type-sparkline .filters-section {
-  margin: 0;
+.cove-visualization.type-chart.type-sparkline {
+  &.lg .filters-section {
+    margin: 0;
+  }
 }

package/src/components/WarmingStripes/WarmingStripes.tsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react'
+import { useContext, useState, useCallback, useEffect } from 'react'
 import ConfigContext from '../../ConfigContext'
 import { Group } from '@visx/group'
 import { scaleSequential } from 'd3-scale'
@@ -6,7 +6,6 @@ import { interpolateRgbBasis } from 'd3-interpolate'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 import { filterChartColorPalettes } from '@cdc/core/helpers/filterColorPalettes'
-import { getColorPaletteVersion } from '@cdc/core/helpers/getColorPaletteVersion'
 import { getFallbackColorPalette, migratePaletteWithMap } from '@cdc/core/helpers/palettes/utils'
 import { paletteMigrationMap } from '@cdc/core/helpers/palettes/migratePaletteName'
 import { hasTrackedHover, markHoverTracked } from '../../utils/analyticsTracking'
@@ -16,10 +15,26 @@ type WarmingStripesProps = {
   yScale: any
   xMax: number
   yMax: number
+  synchronizedXValue?: any
+  showTooltip: (args: any) => void
+  handleTooltipMouseOff: () => void
 }
 
-const WarmingStripes = ({ xMax, yMax }: WarmingStripesProps) => {
-  const { transformedData: data, config, formatNumber, interactionLabel, currentViewport } = useContext(ConfigContext)
+const WarmingStripes = ({
+  xMax,
+  yMax,
+  synchronizedXValue,
+  showTooltip,
+  handleTooltipMouseOff
+}: WarmingStripesProps) => {
+  const {
+    transformedData: data,
+    config,
+    formatNumber,
+    interactionLabel,
+    currentViewport,
+    handleSmallMultipleHover
+  } = useContext(ConfigContext)
 
   const [currentHover, setCurrentHover] = useState<number | null>(null)
 
@@ -28,18 +43,14 @@ const WarmingStripes = ({ xMax, yMax }: WarmingStripesProps) => {
   const valueKey = config.runtime.seriesKeys?.[0]
   const xAxisDataKey = config.runtime.originalXAxis?.dataKey || config.xAxis?.dataKey
 
-  if (!valueKey || !xAxisDataKey || !data || data.length === 0) {
-    return null
-  }
-
   // Determine max stripes based on viewport
   const isMobile = ['xxs', 'xs', 'sm', 'md'].includes(currentViewport)
   const maxStripes = isMobile ? 60 : 200
 
   // Sample data if we have more than the max allowed stripes
-  let displayData = data
-  if (data.length > maxStripes) {
-    const step = data.length / maxStripes
+  let displayData = data || []
+  if (displayData.length > maxStripes) {
+    const step = displayData.length / maxStripes
     displayData = []
     for (let i = 0; i < maxStripes; i++) {
       const index = Math.floor(i * step)
@@ -48,7 +59,7 @@ const WarmingStripes = ({ xMax, yMax }: WarmingStripesProps) => {
   }
 
   // Calculate the min and max values for the color scale
-  const values = data.map(d => Number(d[valueKey])).filter(v => !isNaN(v))
+  const values = displayData.map(d => Number(d[valueKey])).filter(v => !isNaN(v))
   const minValue = Math.min(...values)
   const maxValue = Math.max(...values)
 
@@ -94,15 +105,54 @@ const WarmingStripes = ({ xMax, yMax }: WarmingStripesProps) => {
   // Calculate stripe width based on available space and display data
   const stripeWidth = xMax / displayData.length
 
-  const handleTooltip = (item: any) => {
-    const xValue = item[xAxisDataKey]
-    const yValue = item[valueKey]
-    const formattedValue = formatNumber(yValue, 'left')
+  // Build tooltip data in COVE format and trigger showTooltip
+  const showStripeTooltip = useCallback(
+    (item: any, index: number, mouseY?: number) => {
+      const value = Number(item[valueKey])
+      if (isNaN(value)) return
+
+      const formattedValue = formatNumber(value, 'left')
+
+      // Pass raw x-axis value — TooltipListItem handles date formatting
+      const tooltipItems = [
+        [xAxisDataKey, item[xAxisDataKey]],
+        [valueKey, formattedValue, 'left']
+      ]
+
+      const dataXPosition = index * stripeWidth + stripeWidth / 2 + Number(config.yAxis.size)
+      const dataYPosition = mouseY ?? yMax / 2
+
+      showTooltip({
+        tooltipLeft: dataXPosition + 10,
+        tooltipTop: dataYPosition,
+        tooltipData: {
+          data: tooltipItems,
+          dataXPosition: dataXPosition + 10,
+          dataYPosition
+        }
+      })
+    },
+    [valueKey, xAxisDataKey, stripeWidth, config.yAxis.size, yMax, formatNumber, showTooltip]
+  )
+
+  // Handle incoming synchronized tooltip from sibling small multiple tiles
+  useEffect(() => {
+    if (synchronizedXValue === null || synchronizedXValue === undefined) {
+      setCurrentHover(null)
+      handleTooltipMouseOff()
+      return
+    }
+
+    const matchIndex = displayData.findIndex(item => String(item[xAxisDataKey]) === String(synchronizedXValue))
+
+    if (matchIndex >= 0) {
+      setCurrentHover(matchIndex)
+      showStripeTooltip(displayData[matchIndex], matchIndex)
+    }
+  }, [synchronizedXValue])
 
-    return `<div>
-      <strong>${config.xAxis.label || xAxisDataKey}:</strong> ${xValue}<br/>
-      <strong>${config.runtime.seriesLabels?.[valueKey] || valueKey}:</strong> ${formattedValue}
-    </div>`
+  if (!valueKey || !xAxisDataKey || !data || data.length === 0) {
+    return null
   }
 
   return (
@@ -126,13 +176,10 @@ const WarmingStripes = ({ xMax, yMax }: WarmingStripesProps) => {
             fill={fillColor}
             fillOpacity={isMuted ? 0.5 : 1}
             stroke='none'
-            data-tooltip-html={handleTooltip(item)}
-            data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
             tabIndex={-1}
             style={{ cursor: 'pointer', transition: 'fill-opacity 0.2s ease' }}
-            onMouseEnter={() => {
+            onMouseEnter={e => {
               if (currentHover !== index) {
-                // Only publish analytics event once per visualization (shared tracking)
                 const vizId = String(config.runtime.uniqueId)
                 if (!hasTrackedHover(vizId)) {
                   publishAnalyticsEvent({
@@ -148,8 +195,31 @@ const WarmingStripes = ({ xMax, yMax }: WarmingStripesProps) => {
                 }
                 setCurrentHover(index)
               }
+
+              // Show COVE tooltip using mouse Y position
+              const svgEl = (e.currentTarget as SVGRectElement).ownerSVGElement
+              const svgRect = svgEl?.getBoundingClientRect()
+              const mouseY = svgRect ? e.clientY - svgRect.top : yMax / 2
+              showStripeTooltip(item, index, mouseY)
+
+              if (handleSmallMultipleHover) {
+                handleSmallMultipleHover(item[xAxisDataKey], yMax / 2)
+              }
+            }}
+            onMouseMove={e => {
+              // Update tooltip Y position as mouse moves within the stripe
+              const svgEl = (e.currentTarget as SVGRectElement).ownerSVGElement
+              const svgRect = svgEl?.getBoundingClientRect()
+              const mouseY = svgRect ? e.clientY - svgRect.top : yMax / 2
+              showStripeTooltip(item, index, mouseY)
+            }}
+            onMouseLeave={() => {
+              setCurrentHover(null)
+              handleTooltipMouseOff()
+              if (handleSmallMultipleHover) {
+                handleSmallMultipleHover(null, null)
+              }
             }}
-            onMouseLeave={() => setCurrentHover(null)}
           />
         )
       })}

package/src/components/WarmingStripes/WarmingStripesGradientLegend.css

@@ -4,16 +4,16 @@
 }
 
 .warming-stripes-gradient-legend__title {
+  font-size: 16px;
   font-weight: 600;
   margin-bottom: 0.5rem;
-  font-size: 16px;
 }
 
 .warming-stripes-gradient-legend__description {
-  margin-top: 0.5rem;
-  margin-bottom: 1rem;
-  font-size: 14px;
   color: #555;
+  font-size: 14px;
+  margin-bottom: 1rem;
+  margin-top: 0.5rem;
 }
 
 .warming-stripes-gradient-legend__container {
@@ -22,14 +22,14 @@
 
 .warming-stripes-gradient-legend__svg {
   display: block;
-  width: 100%;
   overflow: visible;
+  width: 100%;
 }
 
 .warming-stripes-gradient-legend__series-label {
-  text-align: center;
-  margin-top: 0.5rem;
+  color: #333;
   font-size: 14px;
   font-weight: 500;
-  color: #333;
+  margin-top: 0.5rem;
+  text-align: center;
 }

package/src/data/initial-state.js

@@ -45,7 +45,8 @@ const createInitialState = () => {
       showSuppressedSymbol: true,
       showZeroValueData: true,
       hideNullValue: true,
-      palette: paletteDefaults
+      palette: paletteDefaults,
+      useIntelligentLineChartLabels: false
     },
     padding: {
       left: 5,
@@ -53,12 +54,12 @@ const createInitialState = () => {
     },
     preliminaryData: [],
     yAxis: {
-      hideAxis: false,
+      hideAxis: true,
       displayNumbersOnBar: false,
       hideLabel: false,
-      hideTicks: false,
+      hideTicks: true,
       size: 50,
-      gridLines: false,
+      gridLines: true,
       enablePadding: false,
       min: '',
       max: '',
@@ -72,7 +73,7 @@ const createInitialState = () => {
       rightAxisLabelColor: '#1c1d1f',
       rightAxisTickLabelColor: '#1c1d1f',
       rightAxisTickColor: '#1c1d1f',
-      numTicks: '',
+      numTicks: 4,
       axisPadding: 0,
       scalePadding: 10,
       tickRotation: 0,
@@ -132,7 +133,8 @@ const createInitialState = () => {
       labelColor: '#1c1d1f',
       tickLabelColor: '#1c1d1f',
       tickColor: '#1c1d1f',
-      numTicks: '',
+      numTicks: 6,
+      dateDisplayFormat: '%b. %-d %Y',
       labelOffset: 0,
       axisPadding: 200,
       target: 0,
@@ -141,11 +143,15 @@ const createInitialState = () => {
       showYearsOnce: false,
       sortByRecentDate: false,
       brushActive: false,
-      brushDefaultRecentDateCount: undefined
+      brushDefaultRecentDateCount: undefined,
+      viewportNumTicks: {
+        xs: 4,
+        xxs: 4
+      }
     },
     table: {
       label: 'Data Table',
-      expanded: true,
+      expanded: false,
       limitHeight: false,
       height: '',
       caption: '',
@@ -155,7 +161,7 @@ const createInitialState = () => {
       indexLabel: '',
       download: false,
       showVertical: true,
-      dateDisplayFormat: '',
+      dateDisplayFormat: '%B %-d, %Y',
       showMissingDataLabel: true,
       showSuppressedSymbol: true,
       collapsible: true
@@ -195,7 +201,7 @@ const createInitialState = () => {
         side: false,
         topBottom: true
       },
-      position: 'right',
+      position: 'top',
       orderedValues: [],
       patterns: {},
       patternField: ''
@@ -223,7 +229,7 @@ const createInitialState = () => {
     },
     labels: false,
     dataFormat: {
-      commas: false,
+      commas: true,
       prefix: '',
       suffix: '',
       abbreviated: false,
@@ -234,9 +240,13 @@ const createInitialState = () => {
     filters: [],
     confidenceKeys: {},
     visual: {
-      border: true,
-      accent: true,
-      background: true,
+      border: false,
+      borderColorTheme: false,
+      accent: false,
+      background: false,
+      hideBackgroundColor: false,
+      tp5Treatment: false,
+      tp5Background: false,
       verticalHoverLine: false,
       horizontalHoverLine: false,
       lineDatapointSymbol: 'none',
@@ -249,7 +259,7 @@ const createInitialState = () => {
     tooltips: {
       opacity: 90,
       singleSeries: false,
-      dateDisplayFormat: ''
+      dateDisplayFormat: '%B %-d, %Y'
     },
     forestPlot: {
       startAt: 0,
@@ -298,6 +308,18 @@ const createInitialState = () => {
     area: {
       isStacked: false
     },
+    radar: {
+      gridRings: 5,
+      showGridRings: true,
+      gridRingStyle: 'polygons',
+      scaleMin: 0,
+      scaleMax: '',
+      fillOpacity: 0.3,
+      showPoints: true,
+      pointRadius: 4,
+      strokeWidth: 2,
+      axisLabelOffset: 15
+    },
     sankey: {
       title: {
         defaultColor: 'black'

package/src/data/legacy-defaults.ts

@@ -0,0 +1,18 @@
+// Preserves the OLD default values for properties changed in initial-state.js.
+// When the backfill loop fills a missing property, it uses these values instead
+// of the current defaults so that existing configs aren't visually affected.
+//
+// - Changed defaults: record the ORIGINAL value before any changes.
+// - New properties:   set to `undefined` so they are not backfilled at all.
+//
+// See backfillDefaults() in @cdc/core for the shared fill logic.
+export const LEGACY_CHART_DEFAULTS: Record<string, Record<string, unknown>> = {
+  general: { useIntelligentLineChartLabels: undefined },
+  yAxis: { hideAxis: false, hideTicks: false, gridLines: false, numTicks: '' },
+  xAxis: { numTicks: '', dateDisplayFormat: undefined, viewportNumTicks: undefined },
+  table: { expanded: true, dateDisplayFormat: '' },
+  legend: { position: 'right' },
+  dataFormat: { commas: false },
+  tooltips: { dateDisplayFormat: '' },
+  visual: { border: false, accent: false, background: false }
+}

package/src/helpers/abbreviateNumber.ts

@@ -1,17 +1,24 @@
-export const abbreviateNumber = num => {
-  let unit = ''
-  let absNum = Math.abs(num)
-
-  if (absNum >= 1e9) {
-    unit = 'B'
-    num = num / 1e9
-  } else if (absNum >= 1e6) {
-    unit = 'M'
-    num = num / 1e6
-  } else if (absNum >= 1e3) {
-    unit = 'K'
-    num = num / 1e3
-  }
-
-  return num + unit
-}
+const abbreviationUnits: Record<string, { K: string; M: string; B: string }> = {
+  'es-MX': { K: ' mil', M: ' M', B: ' mil M' }
+}
+
+const defaultUnits = { K: 'K', M: 'M', B: 'B' }
+
+export const abbreviateNumber = (num, locale?: string) => {
+  const units = (locale && abbreviationUnits[locale]) || defaultUnits
+  let unit = ''
+  let absNum = Math.abs(num)
+
+  if (absNum >= 1e9) {
+    unit = units.B
+    num = num / 1e9
+  } else if (absNum >= 1e6) {
+    unit = units.M
+    num = num / 1e6
+  } else if (absNum >= 1e3) {
+    unit = units.K
+    num = num / 1e3
+  }
+
+  return num + unit
+}

package/src/helpers/getChartPatternId.ts

@@ -0,0 +1,17 @@
+import { sanitizeToSvgId } from '@cdc/core/helpers/cove/string'
+
+const getStableKeyHash = (input: string): string => {
+  // djb2 variant, deterministic and cheap for short editor keys
+  let hash = 5381
+  for (let i = 0; i < input.length; i++) {
+    hash = (hash * 33) ^ input.charCodeAt(i)
+  }
+  return (hash >>> 0).toString(36)
+}
+
+export const getChartPatternId = (patternKey: string): string => {
+  const rawKey = String(patternKey)
+  const sanitizedKey = sanitizeToSvgId(rawKey)
+  const hashSuffix = getStableKeyHash(rawKey)
+  return `chart-pattern-${sanitizedKey}-${hashSuffix}`
+}

package/src/helpers/getExcludedData.ts

@@ -2,6 +2,10 @@ import { isDateScale } from '@cdc/core/helpers/cove/date'
 import _ from 'lodash'
 import { ChartConfig } from '../types/ChartConfig'
 export const getExcludedData = (newConfig: ChartConfig, data: object[]) => {
+  if (!Array.isArray(data)) {
+    console.warn('COVE: getExcludedData received non-array data:', typeof data)
+    return []
+  }
   let newExcludedData = data
   if (newConfig.exclusions && newConfig.exclusions.active) {
     if (newConfig.xAxis.type === 'categorical' && newConfig.exclusions.keys?.length > 0) {

package/src/helpers/getMinMax.ts

@@ -37,8 +37,8 @@ const getMinMax = ({
   let leftMax = 0
   let rightMax = 0
 
-  if (!data) {
-    return { min, max }
+  if (!data || !config.runtime) {
+    return { min, max, leftMax, rightMax }
   }
 
   const { visualizationType, series } = config
@@ -248,6 +248,20 @@ const getMinMax = ({
     min = min / 1.1
   }
 
+  // Enforce smallest left axis max so small-data charts don't show misleading decimal ticks
+  const smallestLeftAxisMaxRaw = config.yAxis.smallestLeftAxisMax
+  if (smallestLeftAxisMaxRaw !== null && smallestLeftAxisMaxRaw !== '') {
+    const smallestLeftAxisMax = Number(smallestLeftAxisMaxRaw)
+    if (!Number.isNaN(smallestLeftAxisMax)) {
+      if (max < smallestLeftAxisMax) {
+        max = smallestLeftAxisMax
+      }
+      if (leftMax < smallestLeftAxisMax) {
+        leftMax = smallestLeftAxisMax
+      }
+    }
+  }
+
   return { min, max, leftMax, rightMax }
 }
 export default getMinMax

package/src/helpers/handleChartAriaLabels.ts

@@ -1,19 +1,19 @@
-export const handleChartAriaLabels = (state, testing = false) => {
-  if (testing) console.log(`handleChartAriaLabels Testing On:`, state) // eslint-disable-line
-  try {
-    if (!state.visualizationType) throw Error('handleChartAriaLabels: no visualization type found in state')
-    let ariaLabel = ''
-
-    if (state.visualizationType) {
-      ariaLabel += `${state.visualizationType} chart`
-    }
-
-    if (state.title && state.visualizationType) {
-      ariaLabel += ` with the title: ${state.title}`
-    }
-
-    return ariaLabel
-  } catch (e) {
-    console.error('COVE: ', e.message) // eslint-disable-line
-  }
-}
+export const handleChartAriaLabels = state => {
+  try {
+    if (!state.visualizationType) throw Error('handleChartAriaLabels: no visualization type found in state')
+    let ariaLabel = ''
+
+    if (state.visualizationType) {
+      ariaLabel += `${state.visualizationType} chart`
+    }
+
+    if (state.title && state.visualizationType) {
+      ariaLabel += ` with the title: ${state.title}`
+    }
+
+    return ariaLabel
+  } catch (e) {
+    console.error('COVE: ', e.message) // eslint-disable-line
+    return 'Data visualization container'
+  }
+}