@cdc/chart 4.26.7 → 4.26.10

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

@@ -0,0 +1,280 @@
+import { getChartPatternId } from '../../../../helpers/getChartPatternId'
+import {
+  createPatternColumnConfig,
+  ensurePatternColumnConfig,
+  findColumnConfigKey,
+  getPortionPatternBoundaryGeometry,
+  getPortionPatternGeometry,
+  getPortionPatternOverlay,
+  getPortionPatternRenderData,
+  isPortionPatternSupported,
+  removeUnusedPatternColumnConfig
+} from '../portionPattern'
+
+describe('portion pattern column configurations', () => {
+  it('creates only the standard tooltip and data-table settings needed by a pattern column', () => {
+    expect(createPatternColumnConfig('new_cases')).toEqual({
+      name: 'new_cases',
+      label: 'new_cases',
+      prefix: '',
+      suffix: '',
+      roundToPlace: 0,
+      commas: true,
+      dataTable: true,
+      tooltips: true
+    })
+  })
+
+  it('creates a configuration only when the selected column is not already configured', () => {
+    const columns = {
+      existing: {
+        name: 'new_cases',
+        label: 'New cases',
+        commas: false,
+        dataTable: false,
+        tooltips: false
+      }
+    } as any
+
+    expect(ensurePatternColumnConfig(columns, 'new_cases')).toBe(columns)
+    expect(ensurePatternColumnConfig(columns, 'previous_cases')).toEqual({
+      ...columns,
+      previous_cases: createPatternColumnConfig('previous_cases')
+    })
+  })
+
+  it('finds configurations stored under either the column name or an alias key', () => {
+    expect(findColumnConfigKey({ new_cases: { label: 'New cases' } } as any, 'new_cases')).toBe('new_cases')
+    expect(
+      findColumnConfigKey({ additionalColumn1: { name: 'new_cases', label: 'New cases' } } as any, 'new_cases')
+    ).toBe('additionalColumn1')
+  })
+
+  it('removes an obsolete pattern column configuration', () => {
+    const columns = {
+      additionalColumn1: { name: 'new_cases', label: 'New cases' },
+      source: { name: 'source', label: 'Source' }
+    } as any
+
+    expect(
+      removeUnusedPatternColumnConfig({
+        columns,
+        columnName: 'new_cases',
+        patterns: {}
+      })
+    ).toEqual({ source: columns.source })
+  })
+
+  it('preserves a column still used by another portion pattern', () => {
+    const columns = { new_cases: { name: 'new_cases', label: 'New cases' } } as any
+
+    expect(
+      removeUnusedPatternColumnConfig({
+        columns,
+        columnName: 'new_cases',
+        patterns: {
+          Pattern2: { application: 'portion', patternValueKey: 'new_cases' }
+        }
+      })
+    ).toBe(columns)
+  })
+
+  it('preserves columns owned by an axis or chart series', () => {
+    const columns = { cases: { name: 'cases', label: 'Cases' } } as any
+
+    expect(
+      removeUnusedPatternColumnConfig({
+        columns,
+        columnName: 'cases',
+        patterns: {},
+        protectedColumnNames: ['date', 'cases']
+      })
+    ).toBe(columns)
+  })
+})
+
+describe('portion pattern support', () => {
+  const supportedConfig = {
+    visualizationType: 'Bar',
+    visualizationSubType: 'regular',
+    isLollipopChart: false,
+    yAxis: { type: 'linear' }
+  } as any
+
+  it('supports regular Bar and Combo charts with linear axes', () => {
+    expect(isPortionPatternSupported(supportedConfig)).toBe(true)
+    expect(isPortionPatternSupported({ ...supportedConfig, visualizationType: 'Combo' })).toBe(true)
+  })
+
+  it.each([
+    ['stacked bars', { visualizationSubType: 'stacked' }],
+    ['lollipops', { isLollipopChart: true }],
+    ['logarithmic axes', { yAxis: { type: 'logarithmic' } }],
+    ['other chart types', { visualizationType: 'Line' }]
+  ])('does not support %s', (_description, overrides) => {
+    expect(isPortionPatternSupported({ ...supportedConfig, ...overrides } as any)).toBe(false)
+  })
+})
+
+describe('getPortionPatternOverlay', () => {
+  const getOverlay = (totalValue: unknown, portion: unknown, placement?: 'start' | 'end') =>
+    getPortionPatternOverlay({
+      patterns: {
+        Pattern1: {
+          application: 'portion',
+          dataKey: 'total',
+          patternValueKey: 'portion',
+          placement,
+          color: '#123456'
+        }
+      },
+      datum: { total: totalValue, portion },
+      seriesKey: 'total',
+      totalValue
+    })
+
+  it('calculates ratios for portions less than and equal to the total', () => {
+    expect(getOverlay(100, 25)).toEqual({
+      patternUrl: `url(#${getChartPatternId('Pattern1')})`,
+      ratio: 0.25,
+      placement: 'end',
+      patternColor: '#123456'
+    })
+    expect(getOverlay('100', '100')?.ratio).toBe(1)
+  })
+
+  it('preserves beginning placement', () => {
+    expect(getOverlay(100, 40, 'start')?.placement).toBe('start')
+  })
+
+  it.each([
+    ['missing total', undefined, 10],
+    ['nonnumeric total', 'not-a-number', 10],
+    ['zero total', 0, 0],
+    ['negative total', -100, 10],
+    ['missing portion', 100, undefined],
+    ['nonnumeric portion', 100, 'not-a-number'],
+    ['zero portion', 100, 0],
+    ['negative portion', 100, -10],
+    ['portion greater than total', 100, 101]
+  ])('returns no overlay for %s', (_description, totalValue, portion) => {
+    expect(getOverlay(totalValue, portion)).toBeNull()
+  })
+
+  it('uses only the first configured portion pattern for a target series', () => {
+    const overlay = getPortionPatternOverlay({
+      patterns: {
+        First: { application: 'portion', dataKey: 'total', patternValueKey: 'invalidPortion' },
+        Second: { application: 'portion', dataKey: 'total', patternValueKey: 'validPortion' }
+      },
+      datum: { total: 100, invalidPortion: 200, validPortion: 25 },
+      seriesKey: 'total',
+      totalValue: 100
+    })
+
+    expect(overlay).toBeNull()
+  })
+})
+
+describe('getPortionPatternGeometry', () => {
+  it.each([
+    ['vertical end', 'vertical', 'end', { x: 10, y: 20, width: 100, height: 40 }],
+    ['vertical start', 'vertical', 'start', { x: 10, y: 60, width: 100, height: 40 }],
+    ['horizontal end', 'horizontal', 'end', { x: 60, y: 20, width: 50, height: 80 }],
+    ['horizontal start', 'horizontal', 'start', { x: 10, y: 20, width: 50, height: 80 }]
+  ] as const)('calculates %s placement', (_description, orientation, placement, expected) => {
+    expect(
+      getPortionPatternGeometry({
+        orientation,
+        bounds: { x: 10, y: 20, width: 100, height: 80 },
+        overlay: { ratio: 0.5, placement }
+      })
+    ).toEqual(expected)
+  })
+})
+
+describe('getPortionPatternBoundaryGeometry', () => {
+  it.each([
+    ['vertical end', 'vertical', 'end', { x1: 10, y1: 60, x2: 110, y2: 60 }],
+    ['vertical start', 'vertical', 'start', { x1: 10, y1: 20, x2: 110, y2: 20 }],
+    ['horizontal end', 'horizontal', 'end', { x1: 10, y1: 20, x2: 10, y2: 100 }],
+    ['horizontal start', 'horizontal', 'start', { x1: 60, y1: 20, x2: 60, y2: 100 }]
+  ] as const)('calculates the %s internal divider', (_description, orientation, placement, expected) => {
+    expect(
+      getPortionPatternBoundaryGeometry({
+        orientation,
+        geometry: {
+          x: 10,
+          y: 20,
+          width: orientation === 'vertical' ? 100 : 50,
+          height: orientation === 'vertical' ? 40 : 80
+        },
+        overlay: { ratio: 0.5, placement }
+      })
+    ).toEqual(expected)
+  })
+
+  it('omits the divider when the portion covers the full bar', () => {
+    expect(
+      getPortionPatternBoundaryGeometry({
+        orientation: 'vertical',
+        geometry: { x: 10, y: 20, width: 100, height: 80 },
+        overlay: { ratio: 1, placement: 'end' }
+      })
+    ).toBeNull()
+  })
+})
+
+describe('getPortionPatternRenderData', () => {
+  it('returns a complete render model for supported valid portions', () => {
+    expect(
+      getPortionPatternRenderData({
+        config: {
+          visualizationType: 'Bar',
+          visualizationSubType: 'regular',
+          isLollipopChart: false,
+          yAxis: { type: 'linear' }
+        } as any,
+        orientation: 'vertical',
+        bounds: { x: 10, y: 20, width: 100, height: 80 },
+        patterns: {
+          Pattern1: {
+            application: 'portion',
+            dataKey: 'total',
+            patternValueKey: 'portion',
+            color: '#123456'
+          }
+        },
+        datum: { total: 100, portion: 25 },
+        seriesKey: 'total',
+        totalValue: 100
+      })
+    ).toEqual({
+      patternUrl: `url(#${getChartPatternId('Pattern1')})`,
+      ratio: 0.25,
+      placement: 'end',
+      patternColor: '#123456',
+      geometry: { x: 10, y: 20, width: 100, height: 20 },
+      boundaryGeometry: { x1: 10, y1: 40, x2: 110, y2: 40 }
+    })
+  })
+
+  it('returns no render model for unsupported configurations', () => {
+    expect(
+      getPortionPatternRenderData({
+        config: {
+          visualizationType: 'Bar',
+          visualizationSubType: 'stacked',
+          isLollipopChart: false,
+          yAxis: { type: 'linear' }
+        } as any,
+        orientation: 'vertical',
+        bounds: { x: 10, y: 20, width: 100, height: 80 },
+        patterns: {},
+        datum: {},
+        seriesKey: 'total',
+        totalValue: 100
+      })
+    ).toBeNull()
+  })
+})

package/src/components/BarChart/helpers/tests/useBarChart.test.tsx

@@ -60,6 +60,10 @@ const makeConfigContext = (countColumnOverrides: Record<string, unknown> = {}) =
         ...baseConfig.runtime.yAxis,
         dataKey: 'Percentage'
       },
+      originalXAxis: {
+        ...baseConfig.runtime.originalXAxis,
+        dataKey: 'Cause of death'
+      },
       series: [{ dataKey: 'Percentage', type: 'Bar', axis: 'Left', tooltip: true }],
       seriesKeys: ['Percentage'],
       seriesLabels: { Percentage: 'Percentage' },
@@ -80,6 +84,106 @@ const makeConfigContext = (countColumnOverrides: Record<string, unknown> = {}) =
 }
 
 describe('useBarChart', () => {
+  it('adds raw percent decoration without replacing the formatted tooltip value', () => {
+    const configContext = makeConfigContext()
+    configContext.tableData[0].Percentage = '22.500%'
+    const { result } = renderHook(() => useBarChart(vi.fn(), vi.fn(), configContext))
+
+    expect(result.current.formatTooltipValue('Percentage', 'Cardiovascular conditions', '22.5')).toBe('22.5%')
+  })
+
+  it('preserves a raw trailing percent sign for the matching dynamic category', () => {
+    const configContext = makeConfigContext()
+    configContext.config.series = [
+      {
+        dataKey: 'Data_Value',
+        dynamicCategory: 'Age group',
+        type: 'Bar',
+        axis: 'Left',
+        tooltip: true
+      }
+    ] as any
+    configContext.tableData = [
+      {
+        'Cause of death': 'Cardiovascular conditions',
+        'Age group': '65 years or older',
+        Data_Value: '56.4%'
+      }
+    ]
+    const { result } = renderHook(() => useBarChart(vi.fn(), vi.fn(), configContext))
+
+    expect(result.current.formatTooltipValue('65 years or older', 'Cardiovascular conditions', '56.4')).toBe('56.4%')
+  })
+
+  it('matches numeric dynamic-category values to their rendered string series keys', () => {
+    const configContext = makeConfigContext()
+    configContext.config.series = [
+      {
+        dataKey: 'Data_Value',
+        dynamicCategory: 'Age group',
+        type: 'Bar',
+        axis: 'Left',
+        tooltip: true
+      }
+    ] as any
+    configContext.tableData = [
+      {
+        'Cause of death': 'Cardiovascular conditions',
+        'Age group': 65,
+        Data_Value: '56.4%'
+      }
+    ]
+    const { result } = renderHook(() => useBarChart(vi.fn(), vi.fn(), configContext))
+
+    expect(result.current.formatTooltipValue('65', 'Cardiovascular conditions', '56.4')).toBe('56.4%')
+  })
+
+  it('uses the indexed raw row when static categories are duplicated', () => {
+    const configContext = makeConfigContext()
+    configContext.tableData = [
+      { 'Cause of death': 'Repeated category', Percentage: '22.5%', Count: 146 },
+      { 'Cause of death': 'Repeated category', Percentage: '30%', Count: 150 }
+    ]
+    const { result } = renderHook(() => useBarChart(vi.fn(), vi.fn(), configContext))
+
+    expect(result.current.formatTooltipValue('Percentage', 'Repeated category', '30.0', 1)).toBe('30.0%')
+  })
+
+  it('uses the brush-aligned raw row when a duplicate category subset shifts the rendered index', () => {
+    const configContext = makeConfigContext()
+    configContext.tableData = [
+      { 'Cause of death': 'Repeated category', Percentage: 22.5, Count: 146 },
+      { 'Cause of death': 'Repeated category', Percentage: '30%', Count: 150 }
+    ]
+    configContext.brushData = [configContext.tableData[1]]
+    const { result } = renderHook(() => useBarChart(vi.fn(), vi.fn(), configContext))
+
+    expect(result.current.formatTooltipValue('Percentage', 'Repeated category', '30.0', 0)).toBe('30.0%')
+  })
+
+  it('uses the formatted tooltip value when the raw value is numeric', () => {
+    const configContext = makeConfigContext()
+    const { result } = renderHook(() => useBarChart(vi.fn(), vi.fn(), configContext))
+
+    expect(result.current.formatTooltipValue('Percentage', 'Cardiovascular conditions', '22.0')).toBe('22.0')
+  })
+
+  it('uses the formatted tooltip value when no raw row matches', () => {
+    const configContext = makeConfigContext()
+    const { result } = renderHook(() => useBarChart(vi.fn(), vi.fn(), configContext))
+
+    expect(result.current.formatTooltipValue('Percentage', 'Missing category', 'N/A')).toBe('N/A')
+  })
+
+  it('does not mutate config when horizontal bar label placement is missing', () => {
+    const configContext = makeConfigContext()
+    delete configContext.config.yAxis.labelPlacement
+
+    renderHook(() => useBarChart(vi.fn(), vi.fn(), configContext))
+
+    expect(configContext.updateConfig).not.toHaveBeenCalled()
+  })
+
   it('does not apply the left-axis suffix to an additional single-series tooltip column', () => {
     const configContext = makeConfigContext()
     const { result } = renderHook(() => useBarChart(vi.fn(), vi.fn(), configContext))

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

@@ -1,16 +1,17 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useContext, useEffect, useMemo, useState } from 'react'
 import { ChartDispatchContext } from '../../../ConfigContext'
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
 import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
-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 { getSeriesColumnFormattingParams, getSeriesOwnedColumnNames } from '../../../helpers/seriesColumnSettings'
+import { getAdditionalColumnFormattingParams, getSeriesOwnedColumnNames } from '../../../helpers/seriesColumnSettings'
+import { getColorCodeCategoryColorMap } from '../../../helpers/getColorCodeCategoryColorMap'
 
 export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, configContext) => {
   const {
     config,
+    brushData,
     colorPalettes,
     tableData,
     updateConfig,
@@ -53,18 +54,37 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
       ? seriesHighlight
       : config.runtime.barSeriesKeys || config.runtime.seriesKeys
   const seriesOwnedColumnNames = getSeriesOwnedColumnNames(config.series)
+  const dynamicSeries = config.series.find(series => series.dynamicCategory)
+  const originalXAxisDataKey = config.runtime.originalXAxis.dataKey
+  const sourceDataRows = Array.isArray(brushData) && brushData.length > 0 ? brushData : tableData
 
-  useEffect(() => {
-    if (orientation === 'horizontal' && !config.yAxis.labelPlacement) {
-      updateConfig({
-        ...config,
-        yAxis: {
-          ...config.yAxis,
-          labelPlacement: 'Below Bar'
-        }
+  // Index source rows once so rendered bars can recover display-only formatting without rescanning the data.
+  const sourceRowsByXAxisAndSeries = useMemo(() => {
+    const rowsByXAxis = new Map<string, Map<string, Record<string, unknown>>>()
+
+    sourceDataRows?.forEach(row => {
+      const xAxisValue = String(row?.[originalXAxisDataKey])
+      const rowsBySeries = rowsByXAxis.get(xAxisValue) ?? new Map<string, Record<string, unknown>>()
+
+      config.series.forEach(series => {
+        const seriesKey = series.dynamicCategory ? row?.[series.dynamicCategory] : series.dataKey
+        if (seriesKey === undefined || seriesKey === null) return
+        rowsBySeries.set(String(seriesKey), row)
       })
-    }
-  }, [config, updateConfig]) // eslint-disable-line
+
+      rowsByXAxis.set(xAxisValue, rowsBySeries)
+    })
+
+    return rowsByXAxis
+  }, [sourceDataRows, config.series, originalXAxisDataKey])
+
+  const findSourceDataRow = (seriesKey: string, xAxisValue: unknown, rowIndex?: number) => {
+    // Static charts can repeat x-axis values, so prefer the rendered row index when it still matches.
+    const indexedRow = !dynamicSeries && Number.isInteger(rowIndex) ? sourceDataRows?.[rowIndex] : undefined
+    if (indexedRow && String(indexedRow[originalXAxisDataKey]) === String(xAxisValue)) return indexedRow
+
+    return sourceRowsByXAxisAndSeries.get(String(xAxisValue))?.get(String(seriesKey))
+  }
 
   useEffect(() => {
     if (config.isLollipopChart === false && config.barHeight < 25) {
@@ -72,15 +92,6 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
     }
   }, [config.isLollipopChart]) // eslint-disable-line
 
-  useEffect(() => {
-    if (config.visualizationSubType === 'horizontal') {
-      updateConfig({
-        ...config,
-        orientation: 'horizontal'
-      })
-    }
-  }, []) // eslint-disable-line
-
   useEffect(() => {
     if (config.barStyle === 'lollipop' && !config.isLollipopChart) {
       updateConfig({ ...config, isLollipopChart: true })
@@ -111,34 +122,16 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
     return style
   }
 
-  const assignColorsToValues = (barsCount, barIndex, currentBarColor) => {
-    if (!config.legend.colorCode && config.series.length > 1) {
-      return currentBarColor
-    }
-    const palettesArr = getPaletteColors(config, colorPalettes)
-    const values = tableData.map(d => {
-      return d[config.legend.colorCode]
-    })
-    // Map to hold unique values and their  colors
-    let colorMap = new Map()
-    // Resultant array to hold colors  to the values
-    let palette = []
+  const colorCodeCategoryColors = getColorCodeCategoryColorMap(config, tableData, colorPalettes)
 
-    for (let i = 0; i < values.length; i++) {
-      // If value not in map, add it and assign a color
-      if (!colorMap.has(values[i])) {
-        colorMap.set(values[i], palettesArr[colorMap.size % palettesArr.length])
-      }
-      // push the color to the result array
-      palette.push(colorMap.get(values[i]))
-    }
+  const assignColorsToValues = (barIndex, currentBarColor) => {
+    const colorCode = config.legend.colorCode
+    if (!colorCode) return currentBarColor
 
-    // loop throghy existing colors and extend if needed
-    while (palette.length < barsCount) {
-      palette = palette.concat(palette)
-    }
-    const barColor = palette[barIndex]
-    return barColor
+    const rowIndex = tableData.length ? barIndex % tableData.length : -1
+    const category = tableData[rowIndex]?.[colorCode]
+
+    return colorCodeCategoryColors.get(category) ?? currentBarColor
   }
 
   const getHighlightedBarColorByValue = value => {
@@ -173,21 +166,12 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
     const columns = config.columns
     const columnsWithTooltips = []
     let additionalTooltipItems = ''
-    const dynamicCategorySeries = config.runtime?.series?.find(series => series?.dynamicCategory)
-    const closestVal =
-      tableData.find(d => {
-        const dynamicCategoryMatch = dynamicCategorySeries ? d[dynamicCategorySeries.dynamicCategory] === series : true
-        return d[config.xAxis.dataKey] === xAxisDataValue && dynamicCategoryMatch
-      }) || {}
+    const closestVal = findSourceDataRow(series, xAxisDataValue) || {}
     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: '',
-        addColSuffix: '',
-        ...getSeriesColumnFormattingParams(config.columns[colKeys])
-      }
+      const formattingParams = getAdditionalColumnFormattingParams(config.columns[colKeys])
 
       const formattedValue = formatColNumber(
         closestVal[config.columns[colKeys].name],
@@ -206,6 +190,22 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
     return additionalTooltipItems
   }
 
+  const formatTooltipValue = (
+    seriesKey: string,
+    xAxisValue: unknown,
+    displayValue: string | number,
+    rowIndex?: number
+  ): string | number => {
+    const rawRow = findSourceDataRow(seriesKey, xAxisValue, rowIndex)
+    const staticSeries = config.series.find(series => !series.dynamicCategory && series.dataKey === seriesKey)
+    const rawValueKey = staticSeries?.dataKey ?? dynamicSeries?.dataKey ?? seriesKey
+    const rawValue = rawRow?.[rawValueKey]
+    const formattedText = String(displayValue)
+    const sourceUsesPercentage = typeof rawValue === 'string' && rawValue.trim().endsWith('%')
+
+    return sourceUsesPercentage && formattedText && !formattedText.endsWith('%') ? `${formattedText}%` : displayValue
+  }
+
   const onMouseOverBar = (categoryValue, barKey, event, data, barValue) => {
     if (config.legend.highlightOnHover && config.legend.behavior === 'highlight' && barKey) {
       dispatch({ type: 'SET_SERIES_HIGHLIGHT', payload: [barKey] })
@@ -255,6 +255,7 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
     barStackedSeriesKeys,
     hasMultipleSeries,
     labelFontSize,
+    formatTooltipValue,
     applyRadius,
     assignColorsToValues,
     getHighlightedBarColorByValue,