@cdc/chart 4.26.2 → 4.26.4

package/src/components/BarChart/components/BarChart.Vertical.tsx

@@ -21,6 +21,9 @@ import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import { type ChartContext } from '../../../types/ChartContext'
 import _ from 'lodash'
 import { getBarData } from '../helpers/getBarData'
+import { getPatternUrl as getPatternUrlForBar } from '../helpers/getPatternUrl'
+import { getChartPatternId } from '../../../helpers/getChartPatternId'
+import { buildSeriesTooltipListHtml } from '../../../helpers/tooltipHelpers'
 
 const BarChartVertical = () => {
   const { xScale, yScale, xMax, yMax, seriesScale, convertLineToBarGraph, barChart } =
@@ -86,7 +89,7 @@ const BarChartVertical = () => {
     return (
       <defs>
         {Object.entries(config.legend.patterns).map(([key, pattern]) => {
-          const patternId = `chart-pattern-${key}`
+          const patternId = getChartPatternId(key)
           const size = pattern.patternSize || 8
 
           switch (pattern.shape) {
@@ -227,12 +230,14 @@ const BarChartVertical = () => {
                     ? `${config.runtime.xAxis.label}: ${xAxisValue}`
                     : xAxisValue
                   const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
-
-                  const tooltip = `<ul>
-                  <li class="tooltip-heading">${xAxisTooltip}</li>
-                  <li class="tooltip-body ">${tooltipBody}</li>
-                  ${additionalColTooltip ? '<li class="tooltip-body ">' + additionalColTooltip + '</li>' : ''}
-                    </li></ul>`
+                  const tooltip = buildSeriesTooltipListHtml({
+                    config,
+                    colorScale,
+                    heading: xAxisTooltip,
+                    seriesKey: bar.key,
+                    seriesText: tooltipBody,
+                    extraRows: additionalColTooltip ? [additionalColTooltip] : []
+                  })
                   const { barHeight, isSuppressed, getBarY, absentDataLabel } = getBarConfig({
                     bar,
                     defaultBarHeight,
@@ -325,33 +330,15 @@ const BarChartVertical = () => {
                   }
 
                   // Check if this bar should use a pattern
-                  const getPatternUrl = (): string | null => {
-                    if (!config.legend.patterns || Object.keys(config.legend.patterns).length === 0) {
-                      return null
-                    }
-
-                    // Find a pattern that matches this specific bar
-                    for (const [patternKey, pattern] of Object.entries(config.legend.patterns)) {
-                      if (pattern.dataKey && pattern.dataValue) {
-                        // For grouped bar charts, check if the pattern's dataKey matches the current bar's series key
-                        // and if the pattern's dataValue matches the current bar's value
-                        if (pattern.dataKey === bar.key && String(bar.value) === String(pattern.dataValue)) {
-                          return `url(#chart-pattern-${patternKey})`
-                        }
-                        // Fallback for non-grouped charts: check datum field value
-                        else if (!config.series || config.series.length <= 1) {
-                          const dataFieldValue = datum[pattern.dataKey]
-                          if (String(dataFieldValue) === String(pattern.dataValue)) {
-                            return `url(#chart-pattern-${patternKey})`
-                          }
-                        }
-                      }
-                    }
-
-                    return null
-                  }
-
-                  const patternUrl = getPatternUrl()
+                  const patternUrl = getPatternUrlForBar({
+                    patterns: config.legend?.patterns,
+                    datum,
+                    seriesKey: bar.key,
+                    seriesValue: bar.value,
+                    seriesLabels: config.runtime?.seriesLabels,
+                    seriesKeys: config.series?.map(series => series.dataKey),
+                    allowNonSeriesFieldMatch: !config.series || config.series.length <= 1
+                  })
                   const baseBackground = getBarBackgroundColor(colorScale(config.runtime.seriesLabels[bar.key]))
 
                   // Confidence Interval Variables

package/src/components/BarChart/components/BarChart.tsx

@@ -18,7 +18,7 @@ type BarChartProps = {
   seriesScale: PositionScale
   xMax: number
   yMax: number
-  yAxisWidth?: number
+  yAxisWidth: number
   handleTooltipMouseOver: MouseEventHandler<SVGRectElement>
   handleTooltipMouseOff: MouseEventHandler<SVGRectElement>
   handleTooltipClick: MouseEventHandler<SVGRectElement>
@@ -49,14 +49,10 @@ const BarChart: React.FC<BarChartProps> = ({
     barChart
   }
 
-  // Use yAxisWidth prop if provided (for horizontal bar charts with dynamic labels)
-  // otherwise fall back to config value
-  const leftOffset = yAxisWidth ?? parseFloat(config.runtime.yAxis.size)
-
   return (
     <ErrorBoundary component='BarChart'>
       <BarChartContext.Provider value={contextValues}>
-        <Group left={leftOffset}>
+        <Group left={yAxisWidth}>
           <BarChartType.StackedVertical />
           <BarChartType.StackedHorizontal />
           <BarChartType.Vertical />

package/src/components/BarChart/helpers/getPatternUrl.ts

@@ -0,0 +1,94 @@
+import { getChartPatternId } from '../../../helpers/getChartPatternId'
+
+type LegendPattern = {
+  dataKey?: string
+  dataValue?: string | number
+}
+
+type SeriesLabels = Record<string, string> | undefined
+
+type GetPatternUrlArgs = {
+  patterns?: Record<string, LegendPattern>
+  datum: Record<string, any>
+  seriesKey: string
+  seriesValue: string | number
+  seriesLabels?: SeriesLabels
+  seriesKeys?: string[]
+  allowNonSeriesFieldMatch?: boolean
+}
+
+const normalizeString = (value: unknown): string => String(value ?? '').trim()
+
+const hasPatternValue = (value: unknown): boolean => normalizeString(value) !== ''
+
+const isNumericLike = (value: string): boolean => value !== '' && !Number.isNaN(Number(value))
+
+const valuesMatch = (left: unknown, right: unknown): boolean => {
+  const normalizedLeft = normalizeString(left)
+  const normalizedRight = normalizeString(right)
+
+  if (normalizedLeft === '' || normalizedRight === '') {
+    return false
+  }
+
+  if (isNumericLike(normalizedLeft) && isNumericLike(normalizedRight)) {
+    return Number(normalizedLeft) === Number(normalizedRight)
+  }
+
+  return normalizedLeft === normalizedRight
+}
+
+const isSeriesDataKey = (dataKey: string, seriesLabels?: SeriesLabels, seriesKeys?: string[]): boolean => {
+  if (Array.isArray(seriesKeys) && seriesKeys.length > 0) {
+    return seriesKeys.includes(dataKey)
+  }
+  if (!seriesLabels) return false
+  return Object.prototype.hasOwnProperty.call(seriesLabels, dataKey)
+}
+
+export const getPatternUrl = ({
+  patterns,
+  datum,
+  seriesKey,
+  seriesValue,
+  seriesLabels,
+  seriesKeys,
+  allowNonSeriesFieldMatch = true
+}: GetPatternUrlArgs): string | null => {
+  if (!patterns) {
+    return null
+  }
+
+  let broadMatchUrl: string | null = null
+
+  for (const patternKey in patterns) {
+    if (!Object.prototype.hasOwnProperty.call(patterns, patternKey)) continue
+    const pattern = patterns[patternKey]
+    const dataKey = normalizeString(pattern.dataKey)
+
+    if (!hasPatternValue(pattern.dataValue)) {
+      continue
+    }
+
+    if (dataKey === '') {
+      if (!broadMatchUrl && valuesMatch(seriesValue, pattern.dataValue)) {
+        broadMatchUrl = `url(#${getChartPatternId(patternKey)})`
+      }
+      continue
+    }
+
+    if (dataKey === seriesKey && valuesMatch(seriesValue, pattern.dataValue)) {
+      return `url(#${getChartPatternId(patternKey)})`
+    }
+
+    if (
+      allowNonSeriesFieldMatch &&
+      !isSeriesDataKey(dataKey, seriesLabels, seriesKeys) &&
+      valuesMatch(datum?.[dataKey], pattern.dataValue)
+    ) {
+      return `url(#${getChartPatternId(patternKey)})`
+    }
+  }
+
+  return broadMatchUrl
+}

package/src/components/BarChart/helpers/tests/getPatternUrl.test.ts

@@ -0,0 +1,134 @@
+import { getPatternUrl } from '../getPatternUrl'
+import { getChartPatternId } from '../../../../helpers/getChartPatternId'
+
+describe('getPatternUrl', () => {
+  const pattern1Url = `url(#${getChartPatternId('Pattern1')})`
+  const pattern2Url = `url(#${getChartPatternId('Pattern2')})`
+
+  it('matches specific series patterns by series key and value', () => {
+    const patternUrl = getPatternUrl({
+      patterns: {
+        Pattern1: { dataKey: 'y1', dataValue: '19000' }
+      },
+      datum: { category: 'Q1', y1: 19000, y2: 47000 },
+      seriesKey: 'y1',
+      seriesValue: 19000,
+      seriesLabels: { y1: 'Series 1', y2: 'Series 2' }
+    })
+
+    expect(patternUrl).toBe(pattern1Url)
+  })
+
+  it('matches specific non-series field patterns', () => {
+    const patternUrl = getPatternUrl({
+      patterns: {
+        Pattern1: { dataKey: 'category', dataValue: 'Q1' }
+      },
+      datum: { category: 'Q1', y1: 19000, y2: 47000 },
+      seriesKey: 'y2',
+      seriesValue: 47000,
+      seriesLabels: { y1: 'Series 1', y2: 'Series 2' }
+    })
+
+    expect(patternUrl).toBe(pattern1Url)
+  })
+
+  it('does not match non-series field patterns when non-series matching is disabled', () => {
+    const patternUrl = getPatternUrl({
+      patterns: {
+        Pattern1: { dataKey: 'category', dataValue: 'Q1' }
+      },
+      datum: { category: 'Q1', y1: 19000, y2: 47000 },
+      seriesKey: 'y2',
+      seriesValue: 47000,
+      seriesLabels: { y1: 'Series 1', y2: 'Series 2' },
+      allowNonSeriesFieldMatch: false
+    })
+
+    expect(patternUrl).toBeNull()
+  })
+
+  it('matches blank dataKey pattern by value across series', () => {
+    const patternUrl = getPatternUrl({
+      patterns: {
+        Pattern1: { dataKey: '', dataValue: '47000' }
+      },
+      datum: { category: 'Q1', y1: 19000, y2: 47000 },
+      seriesKey: 'y2',
+      seriesValue: 47000,
+      seriesLabels: { y1: 'Series 1', y2: 'Series 2' }
+    })
+
+    expect(patternUrl).toBe(pattern1Url)
+  })
+
+  it('does not match blank dataKey pattern with empty dataValue', () => {
+    const patternUrl = getPatternUrl({
+      patterns: {
+        Pattern1: { dataKey: '', dataValue: '' }
+      },
+      datum: { category: 'Q1', y1: 19000, y2: 47000 },
+      seriesKey: 'y2',
+      seriesValue: 47000,
+      seriesLabels: { y1: 'Series 1', y2: 'Series 2' }
+    })
+
+    expect(patternUrl).toBeNull()
+  })
+
+  it('prioritizes specific match over broad match', () => {
+    const patternUrl = getPatternUrl({
+      patterns: {
+        Pattern1: { dataKey: '', dataValue: '19000' },
+        Pattern2: { dataKey: 'y1', dataValue: '19000' }
+      },
+      datum: { category: 'Q1', y1: 19000, y2: 47000 },
+      seriesKey: 'y1',
+      seriesValue: 19000,
+      seriesLabels: { y1: 'Series 1', y2: 'Series 2' }
+    })
+
+    expect(patternUrl).toBe(pattern2Url)
+  })
+
+  it('uses seriesKeys as fallback to identify series keys when seriesLabels are missing', () => {
+    const patternUrl = getPatternUrl({
+      patterns: {
+        Pattern1: { dataKey: 'y1', dataValue: '19000' }
+      },
+      datum: { category: 'Q1', y1: 19000, y2: 19000 },
+      seriesKey: 'y2',
+      seriesValue: 19000,
+      seriesKeys: ['y1', 'y2']
+    })
+
+    expect(patternUrl).toBeNull()
+  })
+
+  it('sanitizes special-character pattern keys in returned url fragments', () => {
+    const patternKey = 'Pattern 1 / @ value'
+    const patternUrl = getPatternUrl({
+      patterns: {
+        [patternKey]: { dataKey: 'y1', dataValue: '19000' }
+      },
+      datum: { category: 'Q1', y1: 19000, y2: 47000 },
+      seriesKey: 'y1',
+      seriesValue: 19000,
+      seriesLabels: { y1: 'Series 1', y2: 'Series 2' }
+    })
+
+    expect(patternUrl).toBe(`url(#${getChartPatternId(patternKey)})`)
+  })
+
+  it('creates distinct ids for keys that sanitize to the same base id', () => {
+    const keyA = 'A B'
+    const keyB = 'A@B'
+
+    const idA = getChartPatternId(keyA)
+    const idB = getChartPatternId(keyB)
+
+    expect(idA).not.toBe(idB)
+    expect(idA.startsWith('chart-pattern-A-B-')).toBe(true)
+    expect(idB.startsWith('chart-pattern-A-B-')).toBe(true)
+  })
+})

package/src/components/BarChart/helpers/useBarChart.ts

@@ -6,6 +6,7 @@ import { getPaletteColors } from '@cdc/core/helpers/palettes/utils'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizSubType, getVizTitle } from '@cdc/core/helpers/metrics/utils'
 import { isMobileFontViewport } from '@cdc/core/helpers/viewports'
+import { getSeriesOwnedColumnNames } from '../../../helpers/seriesColumnSettings'
 
 export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, configContext) => {
   const {
@@ -51,6 +52,7 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
     isBarAndLegendIsolate && seriesHighlight?.length
       ? seriesHighlight
       : config.runtime.barSeriesKeys || config.runtime.seriesKeys
+  const seriesOwnedColumnNames = getSeriesOwnedColumnNames(config.series)
 
   useEffect(() => {
     if (orientation === 'horizontal' && !config.yAxis.labelPlacement) {
@@ -179,6 +181,7 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
       }) || {}
     Object.keys(columns).forEach(colKeys => {
       const colConfig = config.columns[colKeys]
+      if (seriesOwnedColumnNames.includes(colConfig.name || colKeys)) return
       if (series && colConfig.series && colConfig.series !== series && !colConfig.tooltips) return
       const formattingParams = {
         addColPrefix: config.columns[colKeys].prefix,
@@ -190,7 +193,7 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
       const formattedValue = formatColNumber(
         closestVal[config.columns[colKeys].name],
         'left',
-        true,
+        false,
         config,
         formattingParams
       )

package/src/components/BoxPlot/BoxPlot.Vertical.tsx

@@ -9,7 +9,7 @@ import { handleTooltip, createPlots } from './helpers/index'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import _ from 'lodash'
 
-const BoxPlotVertical = ({ xScale, yScale, seriesScale }) => {
+const BoxPlotVertical = ({ xScale, yScale, seriesScale, yAxisWidth }) => {
   const { config, colorScale, seriesHighlight, transformedData: data } = useContext(ConfigContext)
   const { boxplot } = config
 
@@ -23,7 +23,7 @@ const BoxPlotVertical = ({ xScale, yScale, seriesScale }) => {
   const plots = createPlots(data, config)
   return (
     <ErrorBoundary component='BoxPlot Vertical'>
-      <Group left={Number(config.yAxis.size)} className='boxplot' key={`boxplot-group`}>
+      <Group left={yAxisWidth} className='boxplot' key={`boxplot-group`}>
         {plots.map((d, i) => {
           const offset = boxWidth - constrainedWidth
           const radius = 4
@@ -63,7 +63,7 @@ const BoxPlotVertical = ({ xScale, yScale, seriesScale }) => {
                     {displayPlot && (
                       <BoxPlot
                         display={displayPlot ? 'block' : 'none'}
-                        data-left={xScale(d.columnCategory) + config.yAxis.size + offset / 2 + 0.5}
+                        data-left={xScale(d.columnCategory) + yAxisWidth + offset / 2 + 0.5}
                         key={`box-plot-${i}-${item}`}
                         min={Number(d.min[item.dataKey])}
                         max={Number(d.max[item.dataKey])}

package/src/components/Brush/BrushSelector.tsx

@@ -8,6 +8,7 @@ import { Bounds } from '@visx/brush/lib/types'
 import type { BrushHandleRenderProps } from '@visx/brush/lib/BrushHandle'
 import { isDateScale } from '@cdc/core/helpers/cove/date'
 import ConfigContext, { ChartDispatchContext } from '../../ConfigContext'
+import { getChartPatternId } from '../../helpers/getChartPatternId'
 import MiniChartPreview from './MiniChartPreview'
 
 interface BrushSelectorProps {
@@ -125,7 +126,7 @@ const BrushSelector: FC<BrushSelectorProps> = ({ xMax, yMax }) => {
     return (
       <>
         {Object.entries(config.legend.patterns).map(([key, pattern]) => {
-          const patternId = `chart-pattern-${key}`
+          const patternId = getChartPatternId(key)
           const size = pattern.patternSize || 8
 
           switch (pattern.shape) {

package/src/components/Brush/MiniChartPreview.tsx

@@ -3,6 +3,7 @@ import { LinePath, AreaClosed, AreaStack } from '@visx/shape'
 import * as allCurves from '@visx/curve'
 import { handleLineType } from '../../helpers/handleLineType'
 import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
+import { getPatternUrl as getPatternUrlForBar } from '../BarChart/helpers/getPatternUrl'
 
 interface MiniChartPreviewProps {
   series: any[]
@@ -33,6 +34,8 @@ const MiniChartPreview = memo<MiniChartPreviewProps>(
     const lineSeries = isComboChart
       ? series.filter(s => !barSeriesTypes.has(s.type) && s.type !== 'Area Chart')
       : series
+    const patternSeriesKeys = Array.isArray(series) ? series.map(_series => _series.dataKey) : []
+    const allowGroupedNonSeriesFieldMatch = !config.series || config.series.length <= 1
 
     let barElements: React.ReactElement[] = []
 
@@ -44,30 +47,6 @@ const MiniChartPreview = memo<MiniChartPreviewProps>(
       const barStrokeColor = config?.barHasBorder === 'true' ? '#000' : 'transparent'
       const barStrokeWidth = config?.barHasBorder === 'true' ? 1 : 0
 
-      const getPatternUrl = (datum, seriesKey: string, value: string | number) => {
-        if (!config.legend?.patterns || Object.keys(config.legend.patterns).length === 0) {
-          return null
-        }
-
-        for (const [patternKey, patternObj] of Object.entries(config.legend.patterns)) {
-          const pattern = patternObj as any
-          if (pattern.dataKey && pattern.dataValue) {
-            if (pattern.dataKey === seriesKey && String(value) === String(pattern.dataValue)) {
-              return `url(#chart-pattern-${patternKey})`
-            }
-
-            if (!config.runtime?.seriesLabels || !config.runtime.seriesLabels[pattern.dataKey]) {
-              const dataFieldValue = datum[pattern.dataKey]
-              if (String(dataFieldValue) === String(pattern.dataValue)) {
-                return `url(#chart-pattern-${patternKey})`
-              }
-            }
-          }
-        }
-
-        return null
-      }
-
       tableData.forEach((d, i) => {
         const xVal = xScale(d[dataKey])
         if (xVal === undefined || isNaN(xVal)) {
@@ -90,7 +69,15 @@ const MiniChartPreview = memo<MiniChartPreviewProps>(
             if (isNaN(value) || value === 0) return
 
             const seriesColor = colorScale?.(config.runtime.seriesLabels?.[s.dataKey] || s.dataKey) || '#666'
-            const patternUrl = getPatternUrl(d, s.dataKey, value)
+            const patternUrl = getPatternUrlForBar({
+              patterns: config.legend?.patterns,
+              datum: d,
+              seriesKey: s.dataKey,
+              seriesValue: value,
+              seriesLabels: config.runtime?.seriesLabels,
+              seriesKeys: patternSeriesKeys,
+              allowNonSeriesFieldMatch: true
+            })
 
             // Calculate the bottom and top of this segment
             // For stacked bars, each segment sits on top of the previous one
@@ -145,7 +132,15 @@ const MiniChartPreview = memo<MiniChartPreviewProps>(
             if (isNaN(value)) return
 
             const seriesColor = colorScale?.(config.runtime.seriesLabels?.[s.dataKey] || s.dataKey) || '#666'
-            const patternUrl = getPatternUrl(d, s.dataKey, value)
+            const patternUrl = getPatternUrlForBar({
+              patterns: config.legend?.patterns,
+              datum: d,
+              seriesKey: s.dataKey,
+              seriesValue: value,
+              seriesLabels: config.runtime?.seriesLabels,
+              seriesKeys: patternSeriesKeys,
+              allowNonSeriesFieldMatch: allowGroupedNonSeriesFieldMatch
+            })
 
             // Calculate bar position and height
             const valueY = miniYScale(value)