@cdc/chart 4.24.10 → 4.24.12-2

package/src/components/AreaChart/components/AreaChart.Stacked.jsx

@@ -33,7 +33,13 @@ const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver,
     data && (
       <svg height={Number(yMax)}>
         <ErrorBoundary component='AreaChartStacked'>
-          <Group className='area-chart' key='area-wrapper' left={Number(config.yAxis.size) + strokeWidth / 2} height={Number(yMax)} style={{ overflow: 'hidden' }}>
+          <Group
+            className='area-chart'
+            key='area-wrapper'
+            left={Number(config.yAxis.size) + strokeWidth / 2}
+            height={Number(yMax)}
+            style={{ overflow: 'hidden' }}
+          >
             <AreaStack
               data={data}
               keys={config.runtime.areaSeriesKeys.map(s => s.dataKey) || config.series.map(s => s.dataKey)}
@@ -44,8 +50,14 @@ const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver,
             >
               {({ stacks, path }) => {
                 return stacks.map((stack, stackIndex) => {
-                  let transparentArea = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(stack.key) === -1
-                  let displayArea = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(stack.key) !== -1
+                  let transparentArea =
+                    config.legend.behavior === 'highlight' &&
+                    seriesHighlight.length > 0 &&
+                    seriesHighlight.indexOf(stack.key) === -1
+                  let displayArea =
+                    config.legend.behavior === 'highlight' ||
+                    seriesHighlight.length === 0 ||
+                    seriesHighlight.indexOf(stack.key) !== -1
 
                   return (
                     // prettier-ignore

package/src/components/Axis/Categorical.Axis.tsx

@@ -44,7 +44,7 @@ const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
     if (categoryObj[lastheight] === '') {
       // Calculate the sum of the numeric values of all other heights
       const sumOfValues = heights.slice(0, -1).reduce((sum, label) => {
-        const value = parseInt(categoryObj[label], 10)
+        const value = Number(categoryObj[label])
         return sum + (isNaN(value) ? 0 : value)
       }, 0)
 
@@ -52,7 +52,7 @@ const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
       const newValue = max - sumOfValues
 
       // Update the last height with the new value
-      categoryObj[lastheight] = newValue.toString()
+      categoryObj[lastheight] = newValue
     }
 
     return [categoryObj]

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

@@ -22,6 +22,8 @@ import chroma from 'chroma-js'
 // Local context and types
 import BarChartContext, { BarChartContextValues } from './context'
 import { ChartContext } from '../../../types/ChartContext'
+import _ from 'lodash'
+import { getBarData } from '../helpers/getBarData'
 
 export const BarChartHorizontal = () => {
   const { xScale, yScale, yMax, seriesScale } = useContext<BarChartContextValues>(BarChartContext)
@@ -35,9 +37,7 @@ export const BarChartHorizontal = () => {
     formatDate,
     parseDate,
     setSharedFilter,
-    isNumber,
-    getYAxisData,
-    getXAxisData
+    isNumber
   } = useContext<ChartContext>(ConfigContext)
   const {
     isHorizontal,
@@ -60,13 +60,21 @@ export const BarChartHorizontal = () => {
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
+  const hasConfidenceInterval = Object.keys(config.confidenceKeys).length > 0
+
+  const _data = getBarData(config, data, hasConfidenceInterval)
+
+  const root = document.documentElement
+
+  const coolGray90 = getComputedStyle(root).getPropertyValue('--cool-gray-90')
+
   return (
     config.visualizationSubType !== 'stacked' &&
     config.visualizationType === 'Bar' &&
     config.orientation === 'horizontal' && (
       <Group>
         <BarGroup
-          data={config.preliminaryData?.some(pd => pd.value && pd.type === 'suppression') ? tableData : data}
+          data={config.preliminaryData?.some(pd => pd.value && pd.type === 'suppression') ? tableData : _data}
           keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys}
           height={yMax}
           x0={d => d[config.runtime.originalXAxis.dataKey]}
@@ -86,6 +94,8 @@ export const BarChartHorizontal = () => {
                 top={barGroup.y}
               >
                 {barGroup.bars.map((bar, index) => {
+                  const datum = _data[barGroup.index]
+                  const dataValue = datum[config.runtime.originalXAxis.dataKey]
                   const scaleVal = config.yAxis.type === 'logarithmic' ? 0.1 : 0
                   let highlightedBarValues = config.highlightedBarValues
                     .map(item => item.value)
@@ -119,9 +129,7 @@ export const BarChartHorizontal = () => {
                   const barX = bar.value < 0 ? Math.abs(xScale(bar.value)) : xScale(scaleVal)
                   const yAxisValue = formatNumber(bar.value, 'left')
                   const xAxisValue =
-                    config.runtime[section].type === 'date'
-                      ? formatDate(parseDate(data[barGroup.index][config.runtime.originalXAxis.dataKey]))
-                      : data[barGroup.index][config.runtime.originalXAxis.dataKey]
+                    config.runtime[section].type === 'date' ? formatDate(parseDate(dataValue)) : dataValue
 
                   const barPosition = !isPositiveBar ? 'below' : 'above'
                   const absentDataLabel = getAbsentDataLabel(yAxisValue)
@@ -167,7 +175,10 @@ export const BarChartHorizontal = () => {
                     config.runtime.seriesLabels && config.runtime.seriesLabels[bar.key]
                       ? colorScale(config.runtime.seriesLabels[bar.key])
                       : colorScale(bar.key)
-                  barColor = assignColorsToValues(barGroups.length, barGroup.index, barColor) // Color code by category
+                  const hasDynamicCategory = config.series.find(s => s.dynamicCategory)
+                  if (!hasDynamicCategory) {
+                    barColor = assignColorsToValues(barGroups.length, barGroup.index, barColor) // Color code by category
+                  }
                   const isRegularLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'regular'
                   const isTwoToneLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'two-tone'
                   const isHighlightedBar = highlightedBarValues?.includes(xAxisValue)
@@ -199,6 +210,16 @@ export const BarChartHorizontal = () => {
                     return barColor
                   }
 
+                  // Confidence Interval Variables
+                  const tickWidth = 5
+                  const yPos = barHeight * bar.index + barHeight / 2
+                  const [upperPos, lowerPos] = ['upper', 'lower'].map(position => {
+                    if (!hasConfidenceInterval) return
+                    const d = datum.dynamicData ? datum.CI[bar.key][position] : datum[config.confidenceKeys[position]]
+                    return xScale(d)
+                  })
+                  // End Confidence Interval Variables
+
                   return (
                     <Group key={`${barGroup.index}--${index}`}>
                       <Group key={`bar-sub-group-${barGroup.index}-${barGroup.x0}-${barY}--${index}`}>
@@ -321,10 +342,10 @@ export const BarChartHorizontal = () => {
                             textAnchor={'start'}
                           >
                             {config.runtime.yAxis.type === 'date'
-                              ? formatDate(parseDate(data[barGroup.index][config.runtime.originalXAxis.dataKey]))
+                              ? formatDate(parseDate(dataValue))
                               : isHorizontal
-                              ? data[barGroup.index][config.runtime.originalXAxis.dataKey]
-                              : formatNumber(data[barGroup.index][config.runtime.originalXAxis.dataKey])}
+                              ? dataValue
+                              : formatNumber(dataValue)}
                           </Text>
                         )}
 
@@ -357,6 +378,20 @@ export const BarChartHorizontal = () => {
                             <animate attributeName='height' values={`0, ${lollipopShapeSize}`} dur='2.5s' />
                           </rect>
                         )}
+                        {hasConfidenceInterval && (
+                          <path
+                            key={`confidence-interval-h-${yPos}-${datum[config.runtime.originalXAxis.dataKey]}`}
+                            stroke={coolGray90}
+                            strokeWidth='px'
+                            d={`
+                                M${lowerPos} ${yPos - tickWidth}
+                                L${lowerPos} ${yPos + tickWidth}
+                                M${lowerPos} ${yPos}
+                                L${upperPos} ${yPos}
+                                M${upperPos} ${yPos - tickWidth}
+                                L${upperPos} ${yPos + tickWidth} `}
+                          />
+                        )}
                       </Group>
                     </Group>
                   )
@@ -365,32 +400,6 @@ export const BarChartHorizontal = () => {
             ))
           }}
         </BarGroup>
-
-        {Object.keys(config.confidenceKeys).length > 0
-          ? data.map(d => {
-              let xPos, yPos
-              let upperPos
-              let lowerPos
-              let tickWidth = 5
-              yPos = yScale(getXAxisData(d)) - 0.75 * config.barHeight
-              upperPos = xScale(getYAxisData(d, config.confidenceKeys.upper))
-              lowerPos = xScale(getYAxisData(d, config.confidenceKeys.lower))
-              return (
-                <path
-                  key={`confidence-interval-h-${yPos}-${d[config.runtime.originalXAxis.dataKey]}`}
-                  stroke='#333'
-                  strokeWidth='px'
-                  d={`
-                    M${lowerPos} ${yPos - tickWidth}
-                    L${lowerPos} ${yPos + tickWidth}
-                    M${lowerPos} ${yPos}
-                    L${upperPos} ${yPos}
-                    M${upperPos} ${yPos - tickWidth}
-                    L${upperPos} ${yPos + tickWidth} `}
-                />
-              )
-            })
-          : ''}
       </Group>
     )
   )

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

@@ -13,32 +13,62 @@ import createBarElement from '@cdc/core/components/createBarElement'
 const BarChartStackedVertical = () => {
   const [barWidth, setBarWidth] = useState(0)
   const { xScale, yScale, seriesScale, xMax, yMax } = useContext(BarChartContext)
-  const { transformedData, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter } = useContext(ConfigContext)
-  const { isHorizontal, barBorderWidth, applyRadius, hoveredBar, getAdditionalColumn, onMouseLeaveBar, onMouseOverBar, barStackedSeriesKeys } = useBarChart()
+  const { transformedData, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter } =
+    useContext(ConfigContext)
+  const {
+    isHorizontal,
+    barBorderWidth,
+    applyRadius,
+    hoveredBar,
+    getAdditionalColumn,
+    onMouseLeaveBar,
+    onMouseOverBar,
+    barStackedSeriesKeys
+  } = useBarChart()
   const { orientation } = config
 
   const data = config.brush?.active && config.brush.data?.length ? config.brush.data : transformedData
   const isDateAxisType = config.runtime.xAxis.type === 'date-time' || config.runtime.xAxis.type === 'date'
+  const isDateTimeScaleAxisType = config.runtime.xAxis.type === 'date-time'
 
   return (
     config.visualizationSubType === 'stacked' &&
     !isHorizontal && (
       <>
-        <BarStack data={data} keys={barStackedSeriesKeys} x={d => d[config.runtime.xAxis.dataKey]} xScale={xScale} yScale={yScale} color={colorScale}>
+        <BarStack
+          data={data}
+          keys={barStackedSeriesKeys}
+          x={d => d[config.runtime.xAxis.dataKey]}
+          xScale={xScale}
+          yScale={yScale}
+          color={colorScale}
+        >
           {barStacks =>
             barStacks.reverse().map(barStack =>
               barStack.bars.map(bar => {
-                let transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(bar.key) === -1
-                let displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(bar.key) !== -1
-                let barThickness = isDateAxisType ? seriesScale.range()[1] - seriesScale.range()[0] : xMax / barStack.bars.length
+                let transparentBar =
+                  config.legend.behavior === 'highlight' &&
+                  seriesHighlight.length > 0 &&
+                  seriesHighlight.indexOf(bar.key) === -1
+                let displayBar =
+                  config.legend.behavior === 'highlight' ||
+                  seriesHighlight.length === 0 ||
+                  seriesHighlight.indexOf(bar.key) !== -1
+                let barThickness = isDateAxisType
+                  ? seriesScale.range()[1] - seriesScale.range()[0]
+                  : xMax / barStack.bars.length
                 if (config.runtime.xAxis.type !== 'date') barThickness = config.barThickness * barThickness
                 // tooltips
                 const rawXValue = bar.bar.data[config.runtime.xAxis.dataKey]
                 const xAxisValue = isDateAxisType ? formatDate(parseDate(rawXValue)) : rawXValue
                 const yAxisValue = formatNumber(bar.bar ? bar.bar.data[bar.key] : 0, 'left')
                 if (!yAxisValue) return
-                const barX = xScale(isDateAxisType ? parseDate(rawXValue) : rawXValue) - (isDateAxisType ? barThickness / 2 : 0)
-                const xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
+                const barX =
+                  xScale(isDateAxisType ? parseDate(rawXValue) : rawXValue) -
+                  (isDateTimeScaleAxisType ? barThickness / 2 : 0)
+                const xAxisTooltip = config.runtime.xAxis.label
+                  ? `${config.runtime.xAxis.label}: ${xAxisValue}`
+                  : xAxisValue
                 const additionalColTooltip = getAdditionalColumn(hoveredBar)
                 const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
                 const tooltip = `<ul>
@@ -51,7 +81,11 @@ const BarChartStackedVertical = () => {
 
                 return (
                   <Group key={`${barStack.index}--${bar.index}--${orientation}`}>
-                    <Group key={`bar-stack-${barStack.index}-${bar.index}`} id={`barStack${barStack.index}-${bar.index}`} className='stack vertical'>
+                    <Group
+                      key={`bar-stack-${barStack.index}-${bar.index}`}
+                      id={`barStack${barStack.index}-${bar.index}`}
+                      className='stack vertical'
+                    >
                       {createBarElement({
                         config: config,
                         seriesHighlight,

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

@@ -15,11 +15,14 @@ import { BarGroup } from '@visx/shape'
 import Regions from '../../Regions'
 // CDC core components and helpers
 import { isDateScale } from '@cdc/core/helpers/cove/date'
+import isNumber from '@cdc/core/helpers/isNumber'
 import createBarElement from '@cdc/core/components/createBarElement'
 // Third party libraries
 import chroma from 'chroma-js'
 // Types
 import { type ChartContext } from '../../../types/ChartContext'
+import _ from 'lodash'
+import { getBarData } from '../helpers/getBarData'
 
 export const BarChartVertical = () => {
   const { xScale, yScale, xMax, yMax, seriesScale } = useContext<BarChartContextValues>(BarChartContext)
@@ -42,8 +45,14 @@ export const BarChartVertical = () => {
   } = useBarChart()
 
   // prettier-ignore
-  const { colorScale, config, dashboardConfig, tableData, formatDate, formatNumber, getXAxisData, getYAxisData, isNumber, parseDate, seriesHighlight, setSharedFilter, transformedData, brushConfig } = useContext<ChartContext>(ConfigContext)
+  const { colorScale, config, dashboardConfig, tableData, formatDate, formatNumber, parseDate, seriesHighlight, setSharedFilter, transformedData, brushConfig } = useContext<ChartContext>(ConfigContext)
+
   const { HighLightedBarUtils } = useHighlightedBars(config)
+
+  const root = document.documentElement
+
+  const coolGray90 = getComputedStyle(root).getPropertyValue('--cool-gray-90')
+
   let data = transformedData
   // check if user add suppression
   const isSuppressionActive = config.preliminaryData.some(pd => pd.value && pd.type === 'suppression')
@@ -56,6 +65,9 @@ export const BarChartVertical = () => {
     data = brushConfig.data
   }
 
+  const hasConfidenceInterval = Object.keys(config.confidenceKeys).length > 0
+
+  const _data = getBarData(config, data, hasConfidenceInterval)
   return (
     config.visualizationSubType !== 'stacked' &&
     (config.visualizationType === 'Bar' ||
@@ -64,7 +76,7 @@ export const BarChartVertical = () => {
     config.orientation === 'vertical' && (
       <Group>
         <BarGroup
-          data={data}
+          data={_data}
           keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys}
           height={yMax}
           x0={d => {
@@ -79,14 +91,16 @@ export const BarChartVertical = () => {
           }}
         >
           {barGroups => {
-            return barGroups.map((barGroup, index) => (
+            return barGroups.map((barGroup, _index) => (
               <Group
-                className={`bar-group-${barGroup.index}-${barGroup.x0}--${index} ${config.orientation}`}
-                key={`bar-group-${barGroup.index}-${barGroup.x0}--${index}`}
-                id={`bar-group-${barGroup.index}-${barGroup.x0}--${index}`}
+                className={`bar-group-${barGroup.index}-${barGroup.x0}--${_index} ${config.orientation}`}
+                key={`bar-group-${barGroup.index}-${barGroup.x0}--${_index}`}
+                id={`bar-group-${barGroup.index}-${barGroup.x0}--${_index}`}
                 left={barGroup.x0}
               >
                 {barGroup.bars.map((bar, index) => {
+                  const datum = _data[barGroup.index]
+                  const dataValue = datum[config.runtime.originalXAxis.dataKey]
                   const scaleVal = config.yAxis.type === 'logarithmic' ? 0.1 : 0
                   let highlightedBarValues = config.highlightedBarValues
                     .map(item => item.value)
@@ -116,17 +130,12 @@ export const BarChartVertical = () => {
                   setTotalBarsInGroup(barGroup.bars.length)
                   const yAxisValue = formatNumber(/[a-zA-Z]/.test(String(bar.value)) ? '' : bar.value, 'left')
                   const xAxisValue =
-                    config.runtime[section].type === 'date'
-                      ? formatDate(parseDate(data[barGroup.index][config.runtime.originalXAxis.dataKey]))
-                      : data[barGroup.index][config.runtime.originalXAxis.dataKey]
+                    config.runtime[section].type === 'date' ? formatDate(parseDate(dataValue)) : dataValue
 
                   // create new Index for bars with negative values
                   const newIndex = bar.value < 0 ? -1 : index
                   // tooltips
-                  const additionalColTooltip = getAdditionalColumn(
-                    bar.key,
-                    data[barGroup.index][config.runtime.originalXAxis.dataKey]
-                  )
+                  const additionalColTooltip = getAdditionalColumn(bar.key, dataValue)
                   let xAxisTooltip = config.runtime.xAxis.label
                     ? `${config.runtime.xAxis.label}: ${xAxisValue}`
                     : xAxisValue
@@ -141,10 +150,6 @@ export const BarChartVertical = () => {
                   // configure colors
                   let labelColor = '#000000'
                   labelColor = HighLightedBarUtils.checkFontColor(yAxisValue, highlightedBarValues, labelColor) // Set if background is transparent'
-                  let barColor =
-                    config.runtime.seriesLabels && config.runtime.seriesLabels[bar.key]
-                      ? colorScale(config.runtime.seriesLabels[bar.key])
-                      : colorScale(bar.key)
                   const isRegularLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'regular'
                   const isTwoToneLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'two-tone'
                   const isHighlightedBar = highlightedBarValues?.includes(xAxisValue)
@@ -167,10 +172,8 @@ export const BarChartVertical = () => {
                     bar,
                     defaultBarHeight,
                     config,
-                    isNumber,
                     barWidth,
-                    isVertical: true,
-                    yAxisValue
+                    isVertical: true
                   })
 
                   const absentDataLabel = getAbsentDataLabel(yAxisValue)
@@ -225,6 +228,22 @@ export const BarChartVertical = () => {
                     return _barColor
                   }
 
+                  // Confidence Interval Variables
+                  const tickWidth = 5
+                  const xPos = barX + (config.xAxis.type !== 'date-time' ? barWidth / 2 : 0)
+
+                  const upperPos = yScale(
+                    datum.dynamicData && datum?.CI?.[bar.key]
+                      ? datum.CI[bar.key].upper
+                      : datum[config.confidenceKeys.upper]
+                  )
+                  const lowerPos = yScale(
+                    datum.dynamicData && datum?.CI?.[bar.key]
+                      ? datum.CI[bar.key].lower
+                      : datum[config.confidenceKeys.lower]
+                  )
+                  // End Confidence Interval Variables
+
                   return (
                     <Group key={`${barGroup.index}--${index}`}>
                       <Group key={`bar-sub-group-${barGroup.index}-${barGroup.x0}-${barY}--${index}`}>
@@ -341,7 +360,7 @@ export const BarChartVertical = () => {
                           <rect
                             display={displaylollipopShape}
                             x={barX - lollipopBarWidth / 2}
-                            y={barY}
+                            y={bar.y}
                             width={lollipopShapeSize}
                             height={lollipopShapeSize}
                             fill={getBarBackgroundColor(colorScale(config.runtime.seriesLabels[bar.key]))}
@@ -353,6 +372,19 @@ export const BarChartVertical = () => {
                             <animate attributeName='height' values={`0, ${lollipopShapeSize}`} dur='2.5s' />
                           </rect>
                         )}
+                        {hasConfidenceInterval && bar.value !== undefined && datum && (
+                          <path
+                            key={`confidence-interval-v-${datum[config.runtime.originalXAxis.dataKey]}`}
+                            stroke={coolGray90}
+                            strokeWidth='px'
+                            d={`M${xPos - tickWidth} ${upperPos}
+                                L${xPos + tickWidth} ${upperPos}
+                                M${xPos} ${upperPos}
+                                L${xPos} ${lowerPos}
+                                M${xPos - tickWidth} ${lowerPos}
+                                L${xPos + tickWidth} ${lowerPos}`}
+                          />
+                        )}
                       </Group>
                     </Group>
                   )
@@ -362,32 +394,6 @@ export const BarChartVertical = () => {
           }}
         </BarGroup>
 
-        {Object.keys(config.confidenceKeys).length > 0
-          ? data.map(d => {
-              let xPos, yPos
-              let upperPos
-              let lowerPos
-              let tickWidth = 5
-              xPos = xScale(getXAxisData(d)) + (config.xAxis.type !== 'date-time' ? seriesScale.range()[1] / 2 : 0)
-              upperPos = yScale(getYAxisData(d, config.confidenceKeys.lower))
-              lowerPos = yScale(getYAxisData(d, config.confidenceKeys.upper))
-              return (
-                <path
-                  key={`confidence-interval-v-${yPos}-${d[config.runtime.originalXAxis.dataKey]}`}
-                  stroke='#333'
-                  strokeWidth='px'
-                  d={`
-                    M${xPos - tickWidth} ${upperPos}
-                    L${xPos + tickWidth} ${upperPos}
-                    M${xPos} ${upperPos}
-                    L${xPos} ${lowerPos}
-                    M${xPos - tickWidth} ${lowerPos}
-                    L${xPos + tickWidth} ${lowerPos}`}
-                />
-              )
-            })
-          : ''}
-
         <Regions xScale={xScale} yMax={yMax} barWidth={barWidth} totalBarsInGroup={totalBarsInGroup} />
       </Group>
     )

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

@@ -0,0 +1,28 @@
+import _ from 'lodash'
+import { TransformedData } from '../../../types/ChartContext'
+import { ChartConfig } from '../../../types/ChartConfig'
+
+export const getBarData = (config: ChartConfig, data: TransformedData[], hasConfidenceInterval: boolean) => {
+  const dynamicSeries = config.series.find(s => s.dynamicCategory)
+  if (!dynamicSeries) return data
+  const { dynamicCategory, dataKey } = dynamicSeries
+  const xAxisKey = config.runtime.originalXAxis.dataKey
+  const xAxisGroupDataLookup = _.groupBy(data, xAxisKey)
+  return Object.values(xAxisGroupDataLookup).map(group => {
+    return group.reduce((acc, datum) => {
+      const dataValue = datum[dataKey]
+      const dataCategory = datum[dynamicCategory]
+      if (hasConfidenceInterval) {
+        const { lower, upper } = config.confidenceKeys
+        if (!acc.CI) acc.CI = {}
+        const lowerValue = datum[lower]
+        const upperValue = datum[upper]
+        acc.CI[dataCategory] = { lower: lowerValue, upper: upperValue }
+      }
+      acc[dataCategory] = dataValue
+      acc[xAxisKey] = datum[xAxisKey]
+      acc.dynamicData = true
+      return acc
+    }, {})
+  })
+}

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

@@ -1,11 +1,11 @@
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
+import isNumber from '@cdc/core/helpers/isNumber'
 
 // Define an interface for the function's parameter
 interface BarConfigProps {
   defaultBarWidth?: number
   defaultBarHeight?: number
   bar?: { [key: string]: any }
-  isNumber?: Function
   config: { [key: string]: any }
   barWidth: number
   isVertical: boolean
@@ -17,7 +17,6 @@ export const getBarConfig = ({
   defaultBarHeight,
   defaultBarWidth,
   config,
-  isNumber,
   barWidth,
   isVertical
 }: BarConfigProps) => {

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

@@ -0,0 +1,74 @@
+import { getBarData } from '../getBarData'
+
+import { TransformedData } from '../../../../types/ChartContext'
+import { ChartConfig } from '../../../../types/ChartConfig'
+
+describe('getBarData', () => {
+  it('should return the original data when there is no dynamicSeries', () => {
+    const config = {
+      series: [{ dataKey: 'value' }],
+      runtime: { originalXAxis: { dataKey: 'category' } }
+    } as ChartConfig
+    const data: TransformedData[] = [
+      { category: 'A', value: 10 },
+      { category: 'B', value: 20 }
+    ]
+    const hasConfidenceInterval = false
+
+    const result = getBarData(config, data, hasConfidenceInterval)
+
+    expect(result).toEqual(data)
+  })
+
+  it('should return transformed data when there is a dynamicSeries but no confidence interval', () => {
+    const config = {
+      series: [{ dataKey: 'value', dynamicCategory: 'subCategory' }],
+      runtime: { originalXAxis: { dataKey: 'category' } }
+    } as ChartConfig
+    const data: TransformedData[] = [
+      { category: 'A', subCategory: 'X', value: 10 },
+      { category: 'A', subCategory: 'Y', value: 20 },
+      { category: 'B', subCategory: 'X', value: 30 }
+    ]
+    const hasConfidenceInterval = false
+
+    const result = getBarData(config, data, hasConfidenceInterval)
+
+    expect(result).toEqual([
+      { category: 'A', X: 10, Y: 20, dynamicData: true },
+      { category: 'B', X: 30, dynamicData: true }
+    ])
+  })
+
+  it('should return transformed data with confidence intervals when there is a dynamicSeries and confidence interval', () => {
+    const config = {
+      series: [{ dataKey: 'value', dynamicCategory: 'subCategory' }],
+      runtime: { originalXAxis: { dataKey: 'category' } },
+      confidenceKeys: { lower: 'lowerCI', upper: 'upperCI' }
+    } as ChartConfig
+    const data: TransformedData[] = [
+      { category: 'A', subCategory: 'X', value: 10, lowerCI: 5, upperCI: 15 },
+      { category: 'A', subCategory: 'Y', value: 20, lowerCI: 15, upperCI: 25 },
+      { category: 'B', subCategory: 'X', value: 30, lowerCI: 25, upperCI: 35 }
+    ]
+    const hasConfidenceInterval = true
+
+    const result = getBarData(config, data, hasConfidenceInterval)
+
+    expect(result).toEqual([
+      {
+        category: 'A',
+        X: 10,
+        Y: 20,
+        CI: { X: { lower: 5, upper: 15 }, Y: { lower: 15, upper: 25 } },
+        dynamicData: true
+      },
+      {
+        category: 'B',
+        X: 30,
+        CI: { X: { lower: 25, upper: 35 } },
+        dynamicData: true
+      }
+    ])
+  })
+})