@cdc/chart 4.24.5 → 4.24.9

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

@@ -13,6 +13,7 @@ import { BarGroup } from '@visx/shape'
 // CDC core components and helpers
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 import createBarElement from '@cdc/core/components/createBarElement'
+import { getBarConfig, testZeroValue } from '../helpers'
 
 // Third party libraries
 import chroma from 'chroma-js'
@@ -24,25 +25,8 @@ import { ChartContext } from '../../../types/ChartContext'
 export const BarChartHorizontal = () => {
   const { xScale, yScale, yMax, seriesScale } = useContext<BarChartContextValues>(BarChartContext)
   const { transformedData: data, tableData, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter, isNumber, getTextWidth, getYAxisData, getXAxisData } = useContext<ChartContext>(ConfigContext)
-  const {
-    isHorizontal,
-    barBorderWidth,
-    updateBars,
-    assignColorsToValues,
-    section,
-    fontSize,
-    isLabelBelowBar,
-    displayNumbersOnBar,
-    lollipopBarWidth,
-    lollipopShapeSize,
-    getHighlightedBarColorByValue,
-    getHighlightedBarByValue,
-    getAdditionalColumn,
-    hoveredBar,
-    onMouseLeaveBar,
-    onMouseOverBar,
-    composeSuppressionBars
-  } = useBarChart()
+  const { isHorizontal, barBorderWidth, updateBars, assignColorsToValues, section, fontSize, isLabelBelowBar, displayNumbersOnBar, lollipopBarWidth, lollipopShapeSize, getHighlightedBarColorByValue, getHighlightedBarByValue, getAdditionalColumn, hoveredBar, onMouseLeaveBar, onMouseOverBar } =
+    useBarChart()
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
@@ -67,9 +51,7 @@ export const BarChartHorizontal = () => {
             return updateBars(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}`} top={barGroup.y}>
                 {barGroup.bars.map((bar, index) => {
-                  const scaleVal = config.useLogScale ? 0.1 : 0
-                  const { suppresedBarHeight: suppresedBarWidth, getIconSize, getIconPadding, getVerticalAnchor, isSuppressed } = composeSuppressionBars({ bar })
-
+                  const scaleVal = config.yAxis.type === 'logarithmic' ? 0.1 : 0
                   let highlightedBarValues = config.highlightedBarValues.map(item => item.value).filter(item => item !== ('' || undefined))
                   highlightedBarValues = config.xAxis.type === 'date' ? HighLightedBarUtils.formatDates(highlightedBarValues) : highlightedBarValues
                   let transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(bar.key) === -1
@@ -80,27 +62,28 @@ export const BarChartHorizontal = () => {
                     numbericBarHeight = 25
                   }
                   let barY = bar.value >= 0 && isNumber(bar.value) ? bar.y : yScale(scaleVal)
-                  const barWidthHorizontal = Math.abs(xScale(bar.value) - xScale(scaleVal))
-                  // const suppresedBarWidth = config.xAxis.showSuppressedLine ? 4 : 0
+                  const defaultBarWidth = Math.abs(xScale(bar.value) - xScale(scaleVal))
                   const isPositiveBar = bar.value >= 0 && isNumber(bar.value)
-                  let barWidth = isSuppressed ? suppresedBarWidth : barWidthHorizontal
+
+                  const { barWidthHorizontal: barWidth, isSuppressed, getAbsentDataLabel } = getBarConfig({ bar, defaultBarWidth, config, isNumber, getTextWidth, isVertical: false })
                   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]
 
                   const barPosition = !isPositiveBar ? 'below' : 'above'
-                  const barValueLabel = isSuppressed ? '' : yAxisValue
+                  const absentDataLabel = getAbsentDataLabel(yAxisValue)
+                  const barDefaultLabel = !config.yAxis.displayNumbersOnBar ? '' : yAxisValue
 
                   // check if bar text/value string fits into  each bars.
-                  let textWidth = getTextWidth(xAxisValue, `normal ${fontSize[config.fontSize]}px sans-serif`)
-                  let textFits = Number(textWidth) < barWidthHorizontal - 5 // minus padding 5
+                  const textWidth = getTextWidth(barDefaultLabel, `normal ${fontSize[config.fontSize]}px sans-serif`)
+                  const textFits = Number(textWidth) < defaultBarWidth - 5
 
                   // control text position
                   let textAnchor = textFits ? 'end' : 'start'
                   let textAnchorLollipop = 'start'
                   let textPadding = textFits ? -5 : 5
                   let textPaddingLollipop = 10
-                  // if bars are negative we change positions of text
+                  //if bars are negative we change positions of text
                   if (barPosition === 'below') {
                     textAnchor = textFits ? 'start' : 'end'
                     textPadding = textFits ? 5 : -5
@@ -134,7 +117,8 @@ export const BarChartHorizontal = () => {
                   const highlightedBar = getHighlightedBarByValue(xAxisValue)
                   const borderColor = isHighlightedBar ? highlightedBarColor : config.barHasBorder === 'true' ? '#000' : 'transparent'
                   const borderWidth = isHighlightedBar ? highlightedBar.borderWidth : config.isLollipopChart ? 0 : config.barHasBorder === 'true' ? barBorderWidth : 0
-                  const displaylollipopShape = isSuppressed ? 'none' : 'block'
+                  const displaylollipopShape = testZeroValue(bar.value) ? 'none' : 'block'
+
                   // update label color
                   if (barColor && labelColor && textFits) {
                     labelColor = getContrastColor('#000', barColor)
@@ -147,8 +131,6 @@ export const BarChartHorizontal = () => {
                     return barColor
                   }
 
-                  const iconPadding = symbol => (symbol === 'Asterisk' ? '3px' : symbol === 'Double Asterisks' ? '4px' : '12px')
-
                   return (
                     <Group key={`${barGroup.index}--${index}`}>
                       <Group key={`bar-sub-group-${barGroup.index}-${barGroup.x0}-${barY}--${index}`}>
@@ -185,44 +167,65 @@ export const BarChartHorizontal = () => {
                           // check if user selected column
                           const selectedSuppressionColumn = !pd.column || pd.column === bar.key
                           // compare entered suppressed value with data value
-                          const isValueMatch = String(pd.value) === String(tableData[barGroup.index][bar.key]) && pd.value !== ''
+                          const isValueMatch = String(pd.value) === String(bar.value) && pd.value !== ''
                           const isSuppressed = isValueMatch && selectedSuppressionColumn
-                          if (!isSuppressed || barHeight < 10 || !config.xAxis.showSuppressedSymbol) {
+
+                          if (!isSuppressed || pd.hideBarSymbol || !config.general.showSuppressedSymbol) {
                             return
                           }
+
+                          const hasAsterisk = String(pd.symbol).includes('Asterisk')
+                          const verticalAnchor = hasAsterisk ? 'middle' : 'end'
+                          const iconSize = pd.symbol === 'Asterisk' ? barHeight * 1.2 : pd.symbol === 'Double Asterisk' ? barHeight : barHeight / 1.5
+                          const fillColor = pd.displayGray ? '#8b8b8a' : '#000'
                           return (
                             <Text // prettier-ignore
                               key={index}
-                              fontSize={getIconSize(pd.symbol, barHeight)}
-                              angle={90}
+                              fontSize={iconSize}
                               display={displayBar ? 'block' : 'none'}
                               opacity={transparentBar ? 0.5 : 1}
                               x={barX}
                               y={config.barHeight / 2 + config.barHeight * bar.index}
-                              fill={'#000'}
-                              dx={iconPadding(pd.symbol)}
-                              verticalAnchor={getVerticalAnchor(pd.symbol)}
-                              textAnchor={'middle'}
+                              fill={fillColor}
+                              dy={config.barHeight / 5}
+                              dx={10}
+                              textAnchor='start'
+                              verticalAnchor={verticalAnchor}
                             >
                               {pd.iconCode}
                             </Text>
                           )
                         })}
 
-                        {!config.isLollipopChart && displayNumbersOnBar && (
+                        {!config.isLollipopChart && (
                           <Text // prettier-ignore
                             display={displayBar ? 'block' : 'none'}
                             x={bar.y}
+                            opacity={transparentBar ? 0.5 : 1}
                             y={config.barHeight / 2 + config.barHeight * bar.index}
                             fill={labelColor}
                             dx={textPadding}
                             verticalAnchor='middle'
                             textAnchor={textAnchor}
                           >
-                            {barValueLabel}
+                            {testZeroValue(bar.value) ? '' : barDefaultLabel}
                           </Text>
                         )}
-                        {config.isLollipopChart && displayNumbersOnBar && (
+                        <Text // prettier-ignore
+                          display={displayBar ? 'block' : 'none'}
+                          x={bar.y}
+                          opacity={transparentBar ? 0.5 : 1}
+                          y={config.barHeight / 2 + config.barHeight * bar.index}
+                          fill={labelColor}
+                          dx={absentDataLabel === 'N/A' ? 20 : textPadding}
+                          dy={config.isLollipopChart ? -10 : 0}
+                          verticalAnchor='middle'
+                          textAnchor={absentDataLabel === 'N/A' ? 'middle' : textAnchor}
+                        >
+                          {absentDataLabel}
+                        </Text>
+
+                        {config.isLollipopChart && (
                           <Text // prettier-ignore
                             display={displayBar ? 'block' : 'none'}
                             x={bar.y}
@@ -233,7 +236,7 @@ export const BarChartHorizontal = () => {
                             verticalAnchor='middle'
                             fontWeight={'normal'}
                           >
-                            {barValueLabel}
+                            {testZeroValue(bar.value) ? '' : barDefaultLabel}
                           </Text>
                         )}
                         {isLabelBelowBar && !config.yAxis.hideLabel && (

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

@@ -50,7 +50,6 @@ const BarChartStackedHorizontal = () => {
                 const yAxisValue = config.runtime.yAxis.type === 'date' ? formatDate(parseDate(data[bar.index][config.runtime.originalXAxis.dataKey])) : data[bar.index][config.runtime.originalXAxis.dataKey]
                 const yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
                 const textWidth = getTextWidth(xAxisValue, `normal ${fontSize[config.fontSize]}px sans-serif`)
-
                 const additionalColTooltip = getAdditionalColumn(hoveredBar)
                 const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${xAxisValue}`
                 const tooltip = `<ul>

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

@@ -12,11 +12,13 @@ import createBarElement from '@cdc/core/components/createBarElement'
 
 const BarChartStackedVertical = () => {
   const [barWidth, setBarWidth] = useState(0)
-  const { xScale, yScale, xMax, yMax } = useContext(BarChartContext)
+  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 { orientation } = config
-  const data = config.brush.active && config.brush.data?.length ? config.brush.data : transformedData
+
+  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'
 
   return (
     config.visualizationSubType === 'stacked' &&
@@ -28,16 +30,14 @@ const BarChartStackedVertical = () => {
               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 = config.xAxis.type === 'date-time' ? config.barThickness * (xScale.range()[1] - xScale.range()[0]) : xMax / barStack.bars.length
-                let barThicknessAdjusted = barThickness * (config.xAxis.type === 'date-time' ? 1 : config.barThickness || 0.8)
-                let offset = (barThickness * (1 - (config.barThickness || 0.8))) / 2
+                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 = config.runtime.xAxis.type === 'date' ? formatDate(parseDate(rawXValue)) : rawXValue
+                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(config.runtime.xAxis.type === 'date' ? parseDate(rawXValue) : rawXValue) - (config.xAxis.type === 'date' && config.xAxis.sortDates ? barThicknessAdjusted / 2 : 0)
-                const style = applyRadius(barStack.index)
+                const barX = xScale(isDateAxisType ? parseDate(rawXValue) : rawXValue) - (isDateAxisType ? 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}`
@@ -47,14 +47,11 @@ const BarChartStackedVertical = () => {
                   <li class="tooltip-body ">${additionalColTooltip}</li>
                     </li></ul>`
 
-                setBarWidth(barThicknessAdjusted)
+                setBarWidth(barThickness)
 
                 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'>
-                      <Text display={config.labels && displayBar ? 'block' : 'none'} opacity={transparentBar ? 0.5 : 1} x={barX + barWidth / 2} y={bar.y - 5} fill={'#000'} textAnchor='middle'>
-                        {yAxisValue}
-                      </Text>
                       {createBarElement({
                         config: config,
                         seriesHighlight,
@@ -63,7 +60,7 @@ const BarChartStackedVertical = () => {
                         borderColor: '#333',
                         borderStyle: 'solid',
                         borderWidth: `${config.barHasBorder === 'true' ? barBorderWidth : 0}px`,
-                        width: barThicknessAdjusted,
+                        width: barThickness,
                         height: bar.height,
                         x: barX,
                         y: bar.y,
@@ -80,7 +77,7 @@ const BarChartStackedVertical = () => {
                         },
                         styleOverrides: {
                           animationDelay: `${barStack.index * 0.5}s`,
-                          transformOrigin: `${barThicknessAdjusted / 2}px ${bar.y + bar.height}px`,
+                          transformOrigin: `${barThickness / 2}px ${bar.y + bar.height}px`,
                           opacity: transparentBar ? 0.2 : 1,
                           display: displayBar ? 'block' : 'none'
                         }

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

@@ -5,6 +5,8 @@ import BarChartContext, { type BarChartContextValues } from './context'
 // Local hooks
 import { useBarChart } from '../../../hooks/useBarChart'
 import { useHighlightedBars } from '../../../hooks/useHighlightedBars'
+import { getBarConfig, testZeroValue } from '../helpers'
+import { isConvertLineToBarGraph } from '../../../helpers/isConvertLineToBarGraph'
 // VisX library imports
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
@@ -25,10 +27,22 @@ export const BarChartVertical = () => {
   const [barWidth, setBarWidth] = useState(0)
   const [totalBarsInGroup, setTotalBarsInGroup] = useState(0)
   // prettier-ignore
-  const { assignColorsToValues, barBorderWidth, getAdditionalColumn, getHighlightedBarByValue, getHighlightedBarColorByValue, lollipopBarWidth, lollipopShapeSize, onMouseLeaveBar, onMouseOverBar, section, composeSuppressionBars, shouldSuppress } = useBarChart()
+  const {
+    // prettier-ignore
+    assignColorsToValues,
+    barBorderWidth,
+    getAdditionalColumn,
+    getHighlightedBarByValue,
+    getHighlightedBarColorByValue,
+    lollipopBarWidth,
+    lollipopShapeSize,
+    onMouseLeaveBar,
+    onMouseOverBar,
+    section
+  } = 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, getXAxisData, getYAxisData, isNumber, parseDate, seriesHighlight, setSharedFilter, transformedData, brushConfig, getTextWidth } = useContext<ChartContext>(ConfigContext)
   const { HighLightedBarUtils } = useHighlightedBars(config)
   let data = transformedData
   // check if user add suppression
@@ -44,7 +58,7 @@ export const BarChartVertical = () => {
 
   return (
     config.visualizationSubType !== 'stacked' &&
-    (config.visualizationType === 'Bar' || config.visualizationType === 'Combo') &&
+    (config.visualizationType === 'Bar' || config.visualizationType === 'Combo' || isConvertLineToBarGraph(config.visualizationType, data, config.allowLineToBarGraph)) &&
     config.orientation === 'vertical' && (
       <Group>
         <BarGroup
@@ -64,31 +78,33 @@ export const BarChartVertical = () => {
         >
           {barGroups => {
             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}`} left={barGroup.x0}>
+              <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}`}
+                left={barGroup.x0}
+              >
                 {barGroup.bars.map((bar, index) => {
-                  const { suppresedBarHeight, getIconSize, getIconPadding, getVerticalAnchor, isSuppressed } = composeSuppressionBars({ bar })
-                  const scaleVal = config.useLogScale ? 0.1 : 0
+                  const scaleVal = config.yAxis.type === 'logarithmic' ? 0.1 : 0
                   let highlightedBarValues = config.highlightedBarValues.map(item => item.value).filter(item => item !== ('' || undefined))
                   highlightedBarValues = config.xAxis.type === 'date' ? HighLightedBarUtils.formatDates(highlightedBarValues) : highlightedBarValues
                   const transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(bar.key) === -1
                   const displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(bar.key) !== -1
-                  const barHeightBase = Math.abs(yScale(bar.value) - yScale(scaleVal))
-                  const barYBase = bar.value >= 0 && isNumber(bar.value) ? bar.y : yScale(0)
-                  const barY = isSuppressed ? yScale(scaleVal) - suppresedBarHeight : barYBase
 
-                  let barGroupWidth = seriesScale.range()[1]
-
-                  let barWidth = config.isLollipopChart ? lollipopBarWidth : barGroupWidth / barGroup.bars.length
+                  let barGroupWidth = seriesScale.range()[1] - seriesScale.range()[0]
+                  const defaultBarHeight = Math.abs(yScale(bar.value) - yScale(scaleVal))
+                  const defaultBarY = bar.value >= 0 && isNumber(bar.value) ? bar.y : yScale(0)
+                  let barWidth = config.isLollipopChart ? lollipopBarWidth : seriesScale.bandwidth()
                   let barX = bar.x + (config.isLollipopChart ? (barGroupWidth / barGroup.bars.length - lollipopBarWidth) / 2 : 0) - (config.xAxis.type === 'date-time' ? barGroupWidth / 2 : 0)
                   setBarWidth(barWidth)
                   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]
+                  const xAxisValue =
+                    config.runtime[section].type === 'date' ? formatDate(parseDate(data[barGroup.index][config.runtime.originalXAxis.dataKey])) : data[barGroup.index][config.runtime.originalXAxis.dataKey]
 
                   // 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])
                   let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
                   const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
@@ -103,7 +119,6 @@ export const BarChartVertical = () => {
                   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)
-                  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)
@@ -111,10 +126,13 @@ export const BarChartVertical = () => {
                   const highlightedBar = getHighlightedBarByValue(xAxisValue)
                   const borderColor = isHighlightedBar ? highlightedBarColor : config.barHasBorder === 'true' ? '#000' : 'transparent'
                   const borderWidth = isHighlightedBar ? highlightedBar.borderWidth : config.isLollipopChart ? 0 : config.barHasBorder === 'true' ? barBorderWidth : 0
-                  const barValueLabel = isSuppressed ? '' : yAxisValue
-                  const barHeight = isSuppressed ? suppresedBarHeight : barHeightBase
 
-                  const displaylollipopShape = isSuppressed ? 'none' : 'block'
+                  const { barHeight, isSuppressed, getBarY, getAbsentDataLabel } = getBarConfig({ bar, defaultBarHeight, config, isNumber, getTextWidth, barWidth, isVertical: true, yAxisValue })
+
+                  const absentDataLabel = getAbsentDataLabel(yAxisValue)
+                  const barDefaultLabel = isSuppressed || !config.labels ? '' : yAxisValue
+                  const barY = getBarY(defaultBarY, yScale(scaleVal))
+                  const displaylollipopShape = testZeroValue(bar.value) ? 'none' : 'block'
                   const getBarBackgroundColor = (barColor: string, filteredOutColor?: string): string => {
                     let _barColor = barColor
                     let _filteredOutColor = filteredOutColor || '#f2f2f2'
@@ -143,13 +161,16 @@ export const BarChartVertical = () => {
                         : colorScale(config.runtime.seriesLabels[bar.key])
 
                       if (isRegularLollipopColor) _barColor = barColor
-                      if (isTwoToneLollipopColor) _barColor = chroma(barColor).brighten(1)
+
                       if (isHighlightedBar) _barColor = 'transparent'
+                      if (config.legend.colorCode) _barColor = assignColorsToValues(barGroups.length, barGroup.index, barColor)
+                      if (isTwoToneLollipopColor) _barColor = chroma(barColor).brighten(1)
                       return _barColor
                     }
 
                     // if this is a two tone lollipop slightly lighten the bar.
                     if (isTwoToneLollipopColor) _barColor = chroma(barColor).brighten(1)
+                    if (config.legend.colorCode) _barColor = assignColorsToValues(barGroups.length, barGroup.index, barColor)
 
                     // if we're highlighting a bar make it invisible since it gets a border
                     if (isHighlightedBar) _barColor = 'transparent'
@@ -194,24 +215,29 @@ export const BarChartVertical = () => {
                           const selectedSuppressionColumn = !pd.column || pd.column === bar.key
                           // compare entered suppressed value with data value
                           const isValueMatch = String(pd.value) === String(bar.value) && pd.value !== ''
-                          let isSuppressed = isValueMatch && selectedSuppressionColumn
+                          const isSuppressed = isValueMatch && selectedSuppressionColumn
 
-                          if (!isSuppressed || barWidth < 10 || !config.xAxis.showSuppressedSymbol) {
+                          if (!isSuppressed || barWidth < 10 || !config.general.showSuppressedSymbol || pd.hideBarSymbol) {
                             return
                           }
+                          const hasAsterisk = String(pd.symbol).includes('Asterisk')
+                          const yPadding = hasAsterisk ? -5 : -8
+                          const verticalAnchor = hasAsterisk ? 'middle' : 'end'
+                          const iconSize = pd.symbol === 'Asterisk' ? barWidth * 1.2 : pd.symbol === 'Double Asterisk' ? barWidth : barWidth / 1.5
+                          const fillColor = pd.displayGray ? '#8b8b8a' : '#000'
 
                           return (
                             <Text // prettier-ignore
                               key={index}
-                              dy={getIconPadding(pd.symbol)}
+                              dy={yPadding}
                               display={displayBar ? 'block' : 'none'}
                               opacity={transparentBar ? 0.5 : 1}
                               x={barX + barWidth / 2}
                               y={barY}
-                              verticalAnchor={getVerticalAnchor(pd.symbol)}
-                              fill={labelColor}
+                              verticalAnchor={verticalAnchor}
+                              fill={fillColor}
                               textAnchor='middle'
-                              fontSize={`${getIconSize(pd.symbol, barWidth)}px`}
+                              fontSize={`${iconSize}px`}
                             >
                               {pd.iconCode}
                             </Text>
@@ -219,14 +245,25 @@ export const BarChartVertical = () => {
                         })}
 
                         <Text // prettier-ignore
-                          display={config.labels && displayBar ? 'block' : 'none'}
+                          display={displayBar ? 'block' : 'none'}
+                          opacity={transparentBar ? 0.5 : 1}
+                          x={barX + barWidth / 2}
+                          y={barY - 5}
+                          fill={labelColor}
+                          textAnchor='middle'
+                        >
+                          {testZeroValue(bar.value) ? '' : barDefaultLabel}
+                        </Text>
+                        <Text // prettier-ignore
+                          display={displayBar ? 'block' : 'none'}
                           opacity={transparentBar ? 0.5 : 1}
                           x={barX + barWidth / 2}
                           y={barY - 5}
                           fill={labelColor}
                           textAnchor='middle'
+                          fontSize={config.isLollipopChart ? null : barWidth / 2}
                         >
-                          {barValueLabel}
+                          {absentDataLabel}
                         </Text>
 
                         {config.isLollipopChart && config.lollipopShape === 'circle' && (
@@ -235,7 +272,7 @@ export const BarChartVertical = () => {
                             cx={barX + lollipopShapeSize / 3.5}
                             cy={bar.y}
                             r={lollipopShapeSize / 2}
-                            fill={barColor}
+                            fill={getBarBackgroundColor(colorScale(config.runtime.seriesLabels[bar.key]))}
                             key={`circle--${bar.index}`}
                             data-tooltip-html={tooltip}
                             data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
@@ -249,7 +286,7 @@ export const BarChartVertical = () => {
                             y={barY}
                             width={lollipopShapeSize}
                             height={lollipopShapeSize}
-                            fill={barColor}
+                            fill={getBarBackgroundColor(colorScale(config.runtime.seriesLabels[bar.key]))}
                             key={`circle--${bar.index}`}
                             data-tooltip-html={tooltip}
                             data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
@@ -273,7 +310,7 @@ export const BarChartVertical = () => {
               let upperPos
               let lowerPos
               let tickWidth = 5
-              xPos = xScale(getXAxisData(d)) + (config.xAxis.type !== 'date' || config.xAxis.type !== 'date-time' ? seriesScale.range()[1] / 2 : 0)
+              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 (

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

@@ -0,0 +1,91 @@
+// Define an interface for the function's parameter
+interface BarConfigProps {
+  defaultBarWidth?: number
+  defaultBarHeight?: number
+  bar?: { [key: string]: any }
+  isNumber?: Function
+  config: { [key: string]: any }
+  getTextWidth: (a: string, b: string) => string
+  barWidth: number
+  isVertical: boolean
+}
+
+// Function to create bar width based on suppression status and missing data label
+export const getBarConfig = ({ bar, defaultBarHeight, defaultBarWidth, config, isNumber, getTextWidth, barWidth, isVertical }: BarConfigProps) => {
+  const heightMini = 3 /// height of small bars aka suppressed/NA/Zero valued
+  let barHeight = defaultBarHeight
+
+  let barWidthHorizontal = defaultBarWidth
+
+  let barLabel = ''
+  let isSuppressed = false
+  let showMissingDataLabel = false
+  const showSuppressedSymbol = config.general.showSuppressedSymbol
+
+  config.preliminaryData.forEach(pd => {
+    const hasColumn = !pd.column || pd.column === bar.key
+    if (hasColumn && pd.type === 'suppression' && pd.value && String(pd.value) === String(bar.value)) {
+      if (!pd.hideBarSymbol && showSuppressedSymbol) {
+        barHeight = barWidth > 10 ? heightMini : 0
+        barWidthHorizontal = heightMini
+        isSuppressed = true
+      } else {
+        barHeight = 0
+        barWidthHorizontal = 0
+        isSuppressed = true
+      }
+    }
+  })
+
+  // Handle undefined, null, or non-calculable bar.value
+  if (!isSuppressed && !isNumber(bar.value) && config.general.showMissingDataLabel) {
+    const labelWidth = getTextWidth(barLabel, `normal ${barWidth / 2}px sans-serif`)
+    const labelFits = Number(labelWidth) < barWidth && barWidth > 10
+    showMissingDataLabel = true
+    barHeight = labelFits ? heightMini : 0
+    barWidthHorizontal = heightMini
+  }
+
+  const getBarY = (defaultBarY, yScale) => {
+    // calculate Y position of small bars (suppressed,N/A,Zero valued) bars
+    if (isSuppressed || showMissingDataLabel) {
+      if (config.isLollipopChart) {
+        return yScale - heightMini * 2
+      } else {
+        return yScale - heightMini
+      }
+    }
+    return defaultBarY
+  }
+
+  // Function to determine the label for a bar in a bar chart vertical/Horizontal
+  const getAbsentDataLabel = yAxisValue => {
+    // Initialize label with the yAxisValue
+    let label = ''
+    // Check if the label is exactly '0' and if so, hide it
+    if (String(yAxisValue) === '0') label = ''
+    // Check if the bar is marked as suppressed. If so, do not show any label.
+    if (isSuppressed) label = ''
+    // If the config is set to show a label for missing data, display 'N/A'
+    if (showMissingDataLabel) label = 'N/A'
+
+    // determine label width in pixels & check if it fits to the bar width
+    const labelWidth = getTextWidth(barLabel, `normal ${barWidth / 2}px sans-serif`)
+    const labelFits = Number(labelWidth) < barWidth && barWidth > 10
+    if (config.isLollipopChart) {
+      return label
+    } else {
+      return labelFits && isVertical ? label : !isVertical ? label : ''
+    }
+  }
+
+  return { barWidthHorizontal, barHeight, isSuppressed, showMissingDataLabel, getBarY, getAbsentDataLabel }
+}
+
+export const testZeroValue = value => {
+  if (value === undefined || value === null) {
+    return
+  }
+  const regex = /^0(\.0)?$/
+  return regex.test(value.toString())
+}