@cdc/chart 4.25.1 → 4.25.2-25

package/src/components/BrushChart.tsx

@@ -1,6 +1,6 @@
 import { Group } from '@visx/group'
 import { useContext, useEffect, useRef, useState } from 'react'
-import ConfigContext from '../ConfigContext'
+import ConfigContext, { ChartDispatchContext } from '../ConfigContext'
 import * as d3 from 'd3'
 import { Text } from '@visx/text'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
@@ -12,7 +12,8 @@ interface BrushChartProps {
 }
 
 const BrushChart = ({ xMax, yMax }: BrushChartProps) => {
-  const { tableData, config, setBrushConfig, dashboardConfig, formatDate, parseDate } = useContext(ConfigContext)
+  const { tableData, config, dashboardConfig, formatDate, parseDate } = useContext(ConfigContext)
+  const dispatch = useContext(ChartDispatchContext)
   const [brushState, setBrushState] = useState({ isBrushing: false, selection: [] })
   const [brushKey, setBrushKey] = useState(0)
   const sharedFilters = dashboardConfig?.dashboard?.sharedFilters ?? []
@@ -54,6 +55,9 @@ const BrushChart = ({ xMax, yMax }: BrushChartProps) => {
 
   const brushHandle = (g, selection, firstDate, lastDate) => {
     const textWidth = getTextWidth(firstDate, `normal ${16 / 1.1}px sans-serif`)
+    const textPositionLeft = selection[0] < textWidth ? 0 : -textWidth
+    const textPositionRight = xMax - selection[1] < textWidth ? -textWidth : 0
+
     return g
       .selectAll('.handle--custom')
       .data([{ side: 'left' }, { side: 'right' }])
@@ -61,7 +65,7 @@ const BrushChart = ({ xMax, yMax }: BrushChartProps) => {
         const handleGroup = enter.append('g').attr('class', 'handle--custom')
         handleGroup
           .append('text')
-          .attr('x', d => (d.side === 'left' ? 0 : -textWidth))
+          .attr('x', d => (d.side === 'left' ? textPositionLeft : textPositionRight))
           .attr('y', 30)
           .text(d => (d.side === 'left' ? firstDate : lastDate))
           .attr('font-size', '13px')
@@ -102,22 +106,25 @@ const BrushChart = ({ xMax, yMax }: BrushChartProps) => {
       const sortedData = _.sortBy(newFilteredData, item => new Date(item[config.xAxis.dataKey]))
 
       // If ascending is false, reverse the sorted array
-      const finalData = !sortByRecentDate ? sortedData : sortedData.reverse()
+      const finalData: object[] = !sortByRecentDate ? sortedData : sortedData.reverse()
 
       // Retrieve the start and end dates based on the sorted data array
-      const startDate = _.get(_.first(finalData), config.xAxis.dataKey, '')
-      const endDate = _.get(_.last(finalData), config.xAxis.dataKey, '')
+      const startDate: string = _.get(_.first(finalData), config.xAxis.dataKey, '')
+      const endDate: string = _.get(_.last(finalData), config.xAxis.dataKey, '')
       // add custom blue colored handlers to each corners of brush
       svg.selectAll('.handle--custom').remove()
-      // append handler
-      const [formattedStartDate, formattedEndDate] = [startDate, endDate].map(date => formatDate(parseDate(date)))
+      // Parse and format the dates, setting them to an empty string if undefined
+      const parseAndFormatDate = date => (date ? formatDate(parseDate(date)) : '')
+      const formattedStartDate = parseAndFormatDate(startDate)
+      const formattedEndDate = parseAndFormatDate(endDate)
       svg.call(brushHandle, selection, formattedStartDate, formattedEndDate)
 
-      setBrushConfig({
+      const payload = {
         active: config.brush.active,
         isBrushing: isUserBrushing,
         data: finalData
-      })
+      }
+      dispatch({ type: 'SET_BRUSH_CONFIG', payload: payload })
       setBrushState({
         isBrushing: true,
         selection
@@ -150,22 +157,35 @@ const BrushChart = ({ xMax, yMax }: BrushChartProps) => {
 
     if ((isFiltersActive || isExclusionsActive || isDashboardFilters) && config.brush?.active) {
       setBrushKey(prevKey => prevKey + 1)
-      setBrushConfig(prev => {
-        return {
-          ...prev,
-          data: tableData
-        }
-      })
     }
-    return () =>
-      setBrushConfig(prev => {
-        return {
-          ...prev,
-          data: []
-        }
-      })
+    dispatch({ type: 'SET_BRUSH_CONFIG', payload: { ...config.brush, data: tableData } })
+
+    return () => dispatch({ type: 'SET_BRUSH_CONFIG', payload: { ...config.brush, data: [] } })
   }, [config.filters, config.exclusions, config.brush?.active, isDashboardFilters])
-  // Initialize brush when component is first rendered
+
+  // this effect handles where brush chart is missing on production. it helpes re render
+  useEffect(() => {
+    let timeoutId = null
+
+    const checkAndInitializeBrush = () => {
+      if (xMax > 0) {
+        initializeBrush()
+      } else {
+        // Clear the existing timeout and set a new one
+        clearTimeout(timeoutId)
+        timeoutId = setTimeout(checkAndInitializeBrush, 500)
+      }
+    }
+
+    checkAndInitializeBrush()
+
+    // Cleanup function to clear timeout
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId)
+      }
+    }
+  }, [xMax])
 
   // reset brush on keychange
   useEffect(() => {

package/src/components/DeviationBar.jsx

@@ -64,7 +64,7 @@ export default function DeviationBar({ height, xScale }) {
       const firstBarValue = data[0][seriesKey]
       const barPosition = firstBarValue < target ? 'left' : 'right'
       const label = `${config.xAxis.targetLabel} ${formatNumber(config.xAxis.target || 0, 'left')}`
-      const labelWidth = getTextWidth(label)
+      const labelWidth = getTextWidth(label, `bold ${20}px sans-serif`)
       let labelY = config.isLollipopChart ? lollipopBarHeight / 2 : Number(config.barHeight) / 2
       let paddingX = 0
       let labelX = 0
@@ -164,7 +164,7 @@ export default function DeviationBar({ height, xScale }) {
           config.heights.horizontal = totalheight
 
           // text,labels postiions
-          const textWidth = getTextWidth(formatNumber(barValue, 'left'))
+          const textWidth = getTextWidth(formatNumber(barValue, 'left'), `normal ${16}px sans-serif`)
           const textFits = textWidth < barWidth - 6
           const textX = barBaseX
           const textY = barY + barHeight / 2

package/src/components/EditorPanel/EditorPanel.tsx

@@ -596,7 +596,7 @@ const EditorPanel = () => {
     updateConfig,
     tableData,
     transformedData: data,
-    loading,
+    isLoading,
     colorScale,
     colorPalettes,
     twoColorPalette,
@@ -813,7 +813,7 @@ const EditorPanel = () => {
   const [displayPanel, setDisplayPanel] = useState(true)
   const [displayViewportOverrides, setDisplayViewportOverrides] = useState(false)
 
-  if (loading) {
+  if (isLoading) {
     return null
   }
 

package/src/components/EditorPanel/components/Panels/Panel.Series.tsx

@@ -500,6 +500,8 @@ const SeriesInputName = props => {
 
     updateConfig(newConfig)
   }
+  // if series name is emty show default data value.
+  const value = series.name !== undefined && series.name !== series.dataKey ? series.name : series.dataKey
 
   return (
     <>
@@ -507,7 +509,7 @@ const SeriesInputName = props => {
       <input
         type='text'
         key={`series-name-${i}`}
-        value={series.name ? series.name : ''}
+        value={value}
         onChange={event => {
           changeSeriesName(i, event.target.value)
         }}

package/src/components/EditorPanel/helpers/updateFieldRankByValue.ts

@@ -30,7 +30,12 @@ export const updateFieldRankByValue = (
   newConfig.rankByValue = newValue
 
   if (config.rankByValue && !newValue) {
-    const cleanData = config?.xAxis?.dataKey ? transform.cleanData(config.data, config.xAxis.dataKey) : config.data
+    const CIkeys: string[] = Object.values(config.confidenceKeys) as string[]
+    const seriesKeys: string[] = config.series.map(s => s.dataKey)
+    const keysToClean: string[] = seriesKeys.concat(CIkeys)
+    const cleanData = config?.xAxis?.dataKey
+      ? transform.cleanData(config.data, config.xAxis.dataKey, keysToClean)
+      : config.data
     const newData = preTransformedData.sort((a, b) => {
       const aIndex = indexOfObj(cleanData, a)
       const bIndex = indexOfObj(cleanData, b)

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

@@ -11,14 +11,20 @@ export const getGradientConfig = (config, formatLabels, colorScale) => {
 }
 
 export const getMarginTop = (isLegendBottom, config) => {
+  // margin between charts xAxis legend not to overlap axis labels,ticks.
+  const DEFAULT_MARGIN_TOP = 27
+  if (isLegendBottom && config.legend.hide) {
+    return '0px'
+  }
   if (!isLegendBottom) {
     return '0px'
   }
-  if (isLegendBottom && config.brush?.active) {
-    const BRUSH_HEIGHT_MULTIPLIER = 1.5
-    return `${config.brush.height * BRUSH_HEIGHT_MULTIPLIER}px`
+  if (isLegendBottom && config.brush.active && !config.legend.hide) {
+    const additiolMargin = 25
+    return `${DEFAULT_MARGIN_TOP + config.brush.height + additiolMargin}px`
+  } else {
+    return `${DEFAULT_MARGIN_TOP}px`
   }
-  return '27px'
 }
 export const getMarginBottom = (isLegendBottom, config) => {
   const isLegendTop = config.legend?.position === 'top' && !config.legend.hide

package/src/components/LineChart/components/LineChart.Circle.tsx

@@ -63,7 +63,7 @@ const LineChartCircle = (props: LineChartCircleProps) => {
     seriesIndex
   } = props
   const { lineDatapointStyle, visual } = config
-  const filtered = config?.runtime?.series.filter(s => s.dataKey === seriesKey)?.[0]
+  const filtered = config?.series.filter(s => s.dataKey === seriesKey)?.[0]
   const Shape =
     Glyphs[
       config.visual.lineDatapointSymbol === 'standard' && seriesIndex < visual.maximumShapeAmount ? seriesIndex : 0
@@ -80,8 +80,8 @@ const LineChartCircle = (props: LineChartCircleProps) => {
     seriesKey: string
   ) => {
     const seriesLabels = config.runtime.seriesLabels || []
-    let color = displayArea ? colorScale(seriesLabels[hoveredKey] || seriesKey) : ' transparent'
-
+    const seriesLabelsAll = config.runtime.seriesLabelsAll || []
+    let color = displayArea ? colorScale(seriesLabels[hoveredKey] || seriesLabelsAll[seriesIndex]) : ' transparent'
     if (config.lineDatapointColor === 'Lighter than Line' && color !== 'transparent' && color) {
       color = chroma(color).brighten(1)
     }
@@ -130,15 +130,23 @@ const LineChartCircle = (props: LineChartCircleProps) => {
       if (!hoveredXValue) return
 
       let hoveredSeriesValue
-      let hoveredSeriesIndex
       let hoveredSeriesData = tooltipData.data.filter(d => d[0] === seriesKey)
       let hoveredSeriesKey = hoveredSeriesData?.[0]?.[0]
       let hoveredSeriesAxis = hoveredSeriesData?.[0]?.[2]
+      const dynamicSeriesConfig = config.runtime.series.find(s => s.dynamicCategory)
+      const originalDataKey = dynamicSeriesConfig?.originalDataKey ?? seriesKey
+
       if (!hoveredSeriesKey) return
-      hoveredSeriesIndex = tooltipData?.data.indexOf(hoveredSeriesKey)
       hoveredSeriesValue = tableData?.find(d => {
-        return d[config?.xAxis.dataKey] === hoveredXValue
-      })?.[seriesKey]
+        const dynamicCategory = dynamicSeriesConfig?.dynamicCategory
+        const matchingXValue = d[config.xAxis.dataKey] === hoveredXValue
+        if (!matchingXValue) return false
+        if (dynamicCategory) {
+          const match = d[dynamicCategory] === hoveredSeriesKey
+          return match
+        }
+        return true
+      })?.[originalDataKey]
 
       //    hoveredSeriesValue = extractNumber(hoveredSeriesValue)
       return tooltipData?.data.map((tooltipItem, index) => {
@@ -190,10 +198,10 @@ const LineChartCircle = (props: LineChartCircleProps) => {
       return isFirstPoint || isLastPoint || isMiddlePoint
     }
 
-    if (drawIsolatedPoints(dataIndex, seriesKey) && !config.series.some(s => s.dynamicCategory)) {
+    if (drawIsolatedPoints(dataIndex, seriesKey)) {
       const positionTop = filtered?.axis === 'Right' ? yScaleRight(d[filtered?.dataKey]) : yScale(d[filtered?.dataKey])
       const positionLeft = getXPos(d[config.xAxis?.dataKey])
-      const color = colorScale(config.runtime.seriesLabels[seriesKey])
+      const color = colorScale(config.runtime.seriesLabelsAll[seriesIndex])
 
       return (
         <g transform={transformShape(positionTop, positionLeft)}>

package/src/components/LineChart/index.tsx

@@ -89,14 +89,14 @@ const LineChart = (props: LineChartProps) => {
               opacity={
                 legend.behavior === 'highlight' &&
                 seriesHighlight.length > 0 &&
-                seriesHighlight.indexOf(_seriesKey) === -1
+                seriesHighlight.indexOf(seriesKey) === -1
                   ? 0.5
                   : 1
               }
               display={
                 legend.behavior === 'highlight' ||
                 (seriesHighlight.length === 0 && !legend.dynamicLegend) ||
-                seriesHighlight.indexOf(_seriesKey) !== -1
+                seriesHighlight.indexOf(seriesKey) !== -1
                   ? 'block'
                   : 'none'
               }

package/src/components/LinearChart.tsx

@@ -26,7 +26,6 @@ import Regions from './Regions'
 import CategoricalYAxis from './Axis/Categorical.Axis'
 
 // Helpers
-import { isConvertLineToBarGraph } from '../helpers/isConvertLineToBarGraph'
 import { isLegendWrapViewport, isMobileHeightViewport } from '@cdc/core/helpers/viewports'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 import { calcInitialHeight } from '../helpers/sizeHelpers'
@@ -65,6 +64,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     brushConfig,
     colorScale,
     config,
+    convertLineToBarGraph,
     currentViewport,
     dimensions,
     formatDate,
@@ -257,10 +257,6 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const useDateSpanMonths = isDateTime && dateSpanMonths > xTickCount
 
   // GETTERS & FUNCTIONS
-  const checkLineToBarGraph = () => {
-    return isConvertLineToBarGraph(config.visualizationType, data, config.allowLineToBarGraph)
-  }
-
   const handleLeftTickFormatting = (tick, index, ticks) => {
     if (isLogarithmicAxis && tick === 0.1) {
       //when logarithmic scale applied change value of first tick
@@ -385,7 +381,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     const topLabelOnGridline = topYLabelRef.current && yAxis.labelsAboveGridlines
 
     // Heights to add
-    const brushHeight = brush?.active ? brush?.height : 0
+
+    const brushHeight = brush?.active ? brush?.height + brush?.height : 0
     const forestRowsHeight = isForestPlot ? config.data.length * forestPlot.rowHeight : 0
     const topLabelOnGridlineHeight = topLabelOnGridline ? topYLabelRef.current.getBBox().height : 0
     const additionalHeight = axisBottomHeight + brushHeight + forestRowsHeight + topLabelOnGridlineHeight
@@ -732,7 +729,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               showTooltip={showTooltip}
             />
           )}
-          {(visualizationType === 'Bar' || visualizationType === 'Combo' || checkLineToBarGraph()) && (
+          {(visualizationType === 'Bar' || visualizationType === 'Combo' || convertLineToBarGraph) && (
             <BarChart
               xScale={xScale}
               yScale={yScale}
@@ -751,7 +748,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               chartRef={svgRef}
             />
           )}
-          {((visualizationType === 'Line' && !checkLineToBarGraph()) ||
+          {((visualizationType === 'Line' && !convertLineToBarGraph) ||
             visualizationType === 'Combo' ||
             visualizationType === 'Bump Chart') && (
             <LineChart
@@ -815,7 +812,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           {!['Paired Bar', 'Box Plot', 'Area Chart', 'Scatter Plot', 'Deviation Bar', 'Forecasting', 'Bar'].includes(
             visualizationType
           ) &&
-            !checkLineToBarGraph() && (
+            !convertLineToBarGraph && (
               <>
                 <LineChart
                   xScale={xScale}
@@ -948,7 +945,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               {config.chartMessage.noData}
             </Text>
           )}
-          {(config.visualizationType === 'Bar' || checkLineToBarGraph()) &&
+          {(config.visualizationType === 'Bar' || convertLineToBarGraph) &&
             config.tooltips.singleSeries &&
             config.visual.horizontalHoverLine && (
               <Group
@@ -967,7 +964,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                 />
               </Group>
             )}
-          {(config.visualizationType === 'Bar' || checkLineToBarGraph()) &&
+          {(config.visualizationType === 'Bar' || convertLineToBarGraph) &&
             config.tooltips.singleSeries &&
             config.visual.verticalHoverLine && (
               <Group key='tooltipLine-vertical' className='vertical-tooltip-line'>
@@ -1536,6 +1533,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           Object.entries(tooltipData.data).length > 0 &&
           tooltipOpen &&
           showTooltip &&
+          !tooltipData?.data?.some(subArray => subArray.some(item => item === undefined)) &&
           tooltipData.dataYPosition &&
           tooltipData.dataXPosition && (
             <>
@@ -1551,7 +1549,9 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               >
                 <ul>
                   {typeof tooltipData === 'object' &&
-                    Object.entries(tooltipData.data).map((item, index) => <TooltipListItem item={item} key={index} />)}
+                    Object.entries(tooltipData.data)
+                      .filter(([_, values]) => Array.isArray(values) && !values.includes(undefined))
+                      .map((item, index) => <TooltipListItem item={item} key={index} />)}
                 </ul>
               </TooltipWithBounds>
             </>

package/src/components/ZoomBrush.tsx

@@ -210,7 +210,7 @@ const BrushHandle = props => {
   const transform = isLeft ? 'scale(-1, 1)' : 'translate(0,0)'
   const textAnchor = isLeft ? 'end' : 'start'
   const tooltipText = isLeft ? ` Drag edges to focus on a specific segment ` : ''
-  const textWidth = getTextWidth(tooltipText, `normal ${appFontSize / 1.1}px sans-serif`)
+  const textWidth = getTextWidth(tooltipText, `${appFontSize / 1.1}px`)
 
   return (
     <>

package/src/helpers/getColorScale.ts

@@ -9,7 +9,6 @@ export const getColorScale = (config: ChartConfig): ((value: string) => string)
   const allPalettes: Record<string, string[]> = { ...colorPalettes, ...twoColorPalette }
   let palette = config.customColors || allPalettes[configPalette]
   let numberOfKeys = config.runtime.seriesKeys.length
-  let newColorScale
 
   while (numberOfKeys > palette.length) {
     palette = palette.concat(palette)
@@ -17,12 +16,9 @@ export const getColorScale = (config: ChartConfig): ((value: string) => string)
 
   palette = palette.slice(0, numberOfKeys)
 
-  newColorScale = () =>
-    scaleOrdinal({
-      domain: config.runtime.seriesLabelsAll,
-      range: palette,
-      unknown: null
-    })
-
-  return newColorScale
+  return scaleOrdinal({
+    domain: config.runtime.seriesLabelsAll,
+    range: palette,
+    unknown: null
+  })
 }

package/src/helpers/isConvertLineToBarGraph.ts

@@ -1,4 +1,11 @@
-export const isConvertLineToBarGraph = (visualizationType, filteredData, allowLineToBarGraph) => {
-  const convertLineToBarGraph = visualizationType === 'Line' && filteredData?.length < 3 && allowLineToBarGraph ? true : false
-  return convertLineToBarGraph
+import _ from 'lodash'
+
+export const isConvertLineToBarGraph = (configObj, filteredData) => {
+  const { allowLineToBarGraph, formattedData, series, visualizationType, xAxis } = configObj
+  if (!allowLineToBarGraph) return false
+  const lineWithLessThanThreePoints = visualizationType === 'Line' && filteredData?.length < 3
+  const isDynamicSeries = series?.some(series => series.dynamicCategory)
+  const isDynamicWithLessThanThreePoints =
+    isDynamicSeries && _.uniq(formattedData?.map(data => data[xAxis.dataKey])).length <= 2
+  return lineWithLessThanThreePoints || isDynamicWithLessThanThreePoints
 }

package/src/hooks/useBarChart.ts

@@ -1,10 +1,11 @@
 import React, { useContext, useEffect, useState } from 'react'
-import ConfigContext from '../ConfigContext'
+import ConfigContext, { ChartDispatchContext } from '../ConfigContext'
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
 import { appFontSize } from '@cdc/core/helpers/cove/fontSettings'
 export const useBarChart = () => {
   const { config, colorPalettes, tableData, updateConfig, parseDate, formatDate, setSeriesHighlight, seriesHighlight } =
     useContext(ConfigContext)
+  const dispatch = useContext(ChartDispatchContext)
   const { orientation } = config
   const [hoveredBar, setHoveredBar] = useState(null)
 
@@ -192,9 +193,11 @@ export const useBarChart = () => {
     const columns = config.columns
     const columnsWithTooltips = []
     let additionalTooltipItems = ''
+    const dynamicCategorySeries = config.runtime?.series?.find(series => series?.dynamicCategory)
     const closestVal =
       tableData.find(d => {
-        return d[config.xAxis.dataKey] === xAxisDataValue
+        const dynamicCategoryMatch = dynamicCategorySeries ? d[dynamicCategorySeries.dynamicCategory] === series : true
+        return d[config.xAxis.dataKey] === xAxisDataValue && dynamicCategoryMatch
       }) || {}
     Object.keys(columns).forEach(colKeys => {
       if (series && config.columns[colKeys].series && config.columns[colKeys].series !== series) return
@@ -223,11 +226,16 @@ export const useBarChart = () => {
   }
 
   const onMouseOverBar = (categoryValue, barKey) => {
-    if (config.legend.highlightOnHover && config.legend.behavior === 'highlight' && barKey) setSeriesHighlight([barKey])
+    if (config.legend.highlightOnHover && config.legend.behavior === 'highlight' && barKey) {
+      dispatch({ type: 'SET_SERIES_HIGHLIGHT', payload: [barKey] })
+    }
+
     setHoveredBar(categoryValue)
   }
   const onMouseLeaveBar = () => {
-    if (config.legend.highlightOnHover && config.legend.behavior === 'highlight') setSeriesHighlight([])
+    if (config.legend.highlightOnHover && config.legend.behavior === 'highlight') {
+      dispatch({ type: 'SET_SERIES_HIGHLIGHT', payload: [] })
+    }
   }
 
   return {

package/src/hooks/useMinMax.ts

@@ -1,6 +1,7 @@
 import { ChartConfig } from '../types/ChartConfig'
 import _ from 'lodash'
-import { isConvertLineToBarGraph } from '../helpers/isConvertLineToBarGraph'
+import ConfigContext from '../ConfigContext'
+import { useContext } from 'react'
 
 type UseMinMaxProps = {
   /** config - standard chart config */
@@ -27,14 +28,12 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
   let leftMax = 0
   let rightMax = 0
 
+  const { convertLineToBarGraph } = useContext(ConfigContext)
+
   if (!data) {
     return { min, max }
   }
 
-  const checkLineToBarGraph = () => {
-    return isConvertLineToBarGraph(config.visualizationType, data, config.allowLineToBarGraph)
-  }
-
   const { visualizationType, series } = config
   const { max: enteredMaxValue, min: enteredMinValue } = config.runtime.yAxis
   const paddingAddedToAxis = config.yAxis.enablePadding ? 1 + config.yAxis.scalePadding / 100 : 1
@@ -136,14 +135,14 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
 
   // this should not apply to bar charts if there is negative CI data
   if (
-    (visualizationType === 'Bar' || checkLineToBarGraph() || (visualizationType === 'Combo' && !isAllLine)) &&
+    (visualizationType === 'Bar' || convertLineToBarGraph || (visualizationType === 'Combo' && !isAllLine)) &&
     min > 0
   ) {
     min = 0
   }
   if (
     (config.visualizationType === 'Bar' ||
-      checkLineToBarGraph() ||
+      convertLineToBarGraph ||
       (config.visualizationType === 'Combo' && !isAllLine)) &&
     min < 0
   ) {
@@ -167,7 +166,7 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
     min = Number(enteredMinValue) && isMinValid ? Number(enteredMinValue) : 0
   }
 
-  if (config.visualizationType === 'Line' && !checkLineToBarGraph()) {
+  if (config.visualizationType === 'Line' && !convertLineToBarGraph) {
     const isMinValid = isLogarithmicAxis
       ? Number(enteredMinValue) >= 0 && Number(enteredMinValue) < minValue
       : Number(enteredMinValue) < minValue

package/src/hooks/useScales.ts

@@ -136,6 +136,16 @@ const useScales = (properties: useScaleProps) => {
       })
       xScale.type = scaleTypes.LINEAR
     }
+    if (xAxis.type === 'categorical') {
+      // Map items to rounded numbers if numeric, skip formatting  non-numeric strings.
+      const xAxisDataMappedRoundedItems = xAxisDataMapped.map(item => {
+        const strItem = String(item)
+        const parsed = parseFloat(strItem)
+        return !isNaN(parsed) ? Math.round(parsed).toString() : strItem
+      })
+
+      xScale = composeScaleBand(xAxisDataMappedRoundedItems, [0, xMax], 1 - config.barThickness)
+    }
   }
 
   // handle Box plot

package/src/hooks/useTooltip.tsx

@@ -175,11 +175,16 @@ export const useTooltip = props => {
             ?.flatMap(seriesKey => {
               const value = resolvedScaleValues[0]?.[seriesKey]
               const formattedValue = getFormattedValue(seriesKey, value, config, getAxisPosition)
+              const seriesObjWithName = config.runtime.series.find(
+                series => series.dataKey === seriesKey && series.name !== undefined
+              )
               if (
                 (value === null || value === undefined || value === '' || formattedValue === 'N/A') &&
                 config.general.hideNullValue
               ) {
                 return []
+              } else if (seriesObjWithName && seriesObjWithName.name === '') {
+                return [['', formattedValue, getAxisPosition(seriesKey)]]
               } else {
                 return [[seriesKey, formattedValue, getAxisPosition(seriesKey)]]
               }
@@ -567,8 +572,14 @@ export const useTooltip = props => {
     if (index == 1 && config.dataFormat.onlyShowTopPrefixSuffix) {
       newValue = `${config.dataFormat.prefix}${newValue}${config.dataFormat.suffix}`
     }
+    const activeLabel = getSeriesNameFromLabel(key)
+    const displayText = activeLabel ? `${activeLabel}: ${newValue}` : newValue
 
-    return <li style={style} className='tooltip-body'>{`${getSeriesNameFromLabel(key)}: ${newValue}`}</li>
+    return (
+      <li style={style} className='tooltip-body'>
+        {displayText}
+      </li>
+    )
   }
 
   return {

package/src/scss/main.scss

@@ -133,7 +133,7 @@
   .subtext--responsive-ticks,
   .section-subtext {
     &--brush-active {
-      margin-top: 3em !important;
+      margin-top: 3rem !important;
     }
   }
 

package/src/store/chart.actions.ts

@@ -0,0 +1,40 @@
+import { DimensionsType } from '@cdc/core/types/Dimensions'
+import { ChartConfig } from '../types/ChartConfig'
+
+type Action<T, P = undefined, R = undefined> = {
+  type: T
+  payload?: P
+}
+
+// Action Types
+type SET_CONFIG = Action<'SET_CONFIG', ChartConfig>
+type SET_LOADING = Action<'SET_LOADING', boolean>
+type UPDATE_CONFIG = Action<'UPDATE_CONFIG', ChartConfig>
+type SET_COLOR_SCALE = Action<'SET_COLOR_SCALE', Function>
+type SET_STATE_DATA = Action<'SET_STATE_DATA', object[]>
+type SET_EXCLUDED_DATA = Action<'SET_EXCLUDED_DATA', object[]>
+type SET_FILTERED_DATA = Action<'SET_FILTERED_DATA', object[]>
+type SET_SERIES_HIGHLIGHT = Action<'SET_SERIES_HIGHLIGHT', object>
+type SET_VIEWPORT = Action<'SET_VIEWPORT', string>
+type SET_DIMENSIONS = Action<'SET_DIMENSIONS', DimensionsType>
+type SET_CONTAINER = Action<'SET_CONTAINER', object>
+type SET_LOADED_EVENT = Action<'SET_LOADED_EVENT', boolean>
+type SET_DRAG_ANNOTATIONS = Action<'SET_DRAG_ANNOTATIONS', boolean>
+type SET_BRUSH_CONFIG = Action<'SET_BRUSH_CONFIG', object>
+type ChartActions =
+  | SET_CONFIG
+  | UPDATE_CONFIG
+  | SET_COLOR_SCALE
+  | SET_STATE_DATA
+  | SET_EXCLUDED_DATA
+  | SET_FILTERED_DATA
+  | SET_SERIES_HIGHLIGHT
+  | SET_VIEWPORT
+  | SET_DIMENSIONS
+  | SET_CONTAINER
+  | SET_LOADED_EVENT
+  | SET_DRAG_ANNOTATIONS
+  | SET_BRUSH_CONFIG
+  | SET_LOADING
+
+export default ChartActions