@cdc/chart 4.24.4 → 4.24.7

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

@@ -1,33 +1,36 @@
 import React, { useContext, useState } from 'react'
+// Local contexts
 import ConfigContext from '../../../ConfigContext'
-import { type ChartContext } from '../../../types/ChartContext'
+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'
 import { BarGroup } from '@visx/shape'
-import { useHighlightedBars } from '../../../hooks/useHighlightedBars'
-import { FaStar } from 'react-icons/fa'
-import Regions from './../../Regions'
+// Local components
+import Regions from '../../Regions'
+// CDC core components and helpers
 import { isDateScale } from '@cdc/core/helpers/cove/date'
-
 import createBarElement from '@cdc/core/components/createBarElement'
-
-// third party
+// Third party libraries
 import chroma from 'chroma-js'
-import BarChartContext, { type BarChartContextValues } from './context'
+// Types
+import { type ChartContext } from '../../../types/ChartContext'
 
 export const BarChartVertical = () => {
   const { xScale, yScale, xMax, yMax, seriesScale } = useContext<BarChartContextValues>(BarChartContext)
 
   const [barWidth, setBarWidth] = useState(0)
   const [totalBarsInGroup, setTotalBarsInGroup] = useState(0)
-
   // prettier-ignore
   const {
-    applyRadius,
+    // prettier-ignore
     assignColorsToValues,
     barBorderWidth,
-    generateIconSize,
     getAdditionalColumn,
     getHighlightedBarByValue,
     getHighlightedBarColorByValue,
@@ -39,37 +42,23 @@ export const BarChartVertical = () => {
   } = useBarChart()
 
   // prettier-ignore
-  const {
-    colorScale,
-    config,
-    dashboardConfig,
-    formatDate,
-    formatNumber,
-    getXAxisData,
-    getYAxisData,
-    isNumber,
-    parseDate,
-    seriesHighlight,
-    setSharedFilter,
-    transformedData,
-  } = 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)
-  const data = config.brush.active && config.brush.data?.length ? config.brush.data : transformedData
-
-  const getIcon = (bar, barWidth) => {
-    let icon = null
-    const iconSize = generateIconSize(barWidth)
-    config.suppressedData?.forEach(d => {
-      if (bar.key === d.column && String(bar.value) === String(d.value) && d.icon) {
-        icon = <FaStar color='#000' size={iconSize} />
-      }
-    })
-    return icon
+  let data = transformedData
+  // check if user add suppression
+  const isSuppressionActive = config.preliminaryData.some(pd => pd.value && pd.type === 'suppression')
+  // if suppression active use table data (filtere | excluded) but non cleaned
+  if (isSuppressionActive) {
+    data = tableData
+  }
+  // if brush active use brush data (filtered|excluded) not cleaned
+  if (brushConfig.data.length) {
+    data = brushConfig.data
   }
+
   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
@@ -92,30 +81,24 @@ export const BarChartVertical = () => {
               <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 scaleVal = config.useLogScale ? 0.1 : 0
-                  const suppresedBarHeight = 20
                   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
-                  let displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(bar.key) !== -1
-                  let barHeightBase = Math.abs(yScale(bar.value) - yScale(scaleVal))
-                  let barYBase = bar.value >= 0 && isNumber(bar.value) ? bar.y : yScale(0)
-                  const supprssedBarY = bar.value >= 0 && isNumber(bar.value) ? yScale(scaleVal) - suppresedBarHeight : yScale(0)
-                  const barY = config.suppressedData.some(d => bar.key === d.column && String(bar.value) === String(d.value)) ? supprssedBarY : barYBase
-
-                  let barGroupWidth = seriesScale.range()[1]
+                  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
 
-                  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)
-
-                  let yAxisValue = formatNumber(bar.value, 'left')
-                  let xAxisValue = config.runtime[section].type === 'date' ? formatDate(parseDate(data[barGroup.index][config.runtime.originalXAxis.dataKey])) : data[barGroup.index][config.runtime.originalXAxis.dataKey]
+                  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]
 
                   // 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}`
@@ -138,10 +121,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 = config.suppressedData.some(d => bar.key === d.column && bar.value === d.value) ? '' : yAxisValue
-                  let barHeight = config.suppressedData.some(d => bar.key === d.column && String(bar.value) === String(d.value)) ? suppresedBarHeight : barHeightBase
-                  const displaylollipopShape = config.suppressedData.some(d => bar.key === d.column && bar.value === d.value) ? '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'
@@ -154,18 +140,20 @@ export const BarChartVertical = () => {
                     if (dashboardConfig && dashboardConfig.dashboard.sharedFilters?.length !== 0) {
                       const { sharedFilters } = dashboardConfig.dashboard
 
-                      _barColor = sharedFilters.map(_sharedFilter => {
-                        if (_sharedFilter.setBy === config.uid) {
-                          // If the current filter is the reset filter item.
-                          if (_sharedFilter.resetLabel === _sharedFilter.active) return colorScale(config.runtime.seriesLabels[bar.key])
-                          // If the current filter is the bars
-                          if (_sharedFilter.active === transformedData[barGroup.index][config.xAxis.dataKey]) return colorScale(config.runtime.seriesLabels[bar.key])
-                          return _filteredOutColor
-                        } else {
-                          // If the setBy isn't the config.uid return the original barColor
-                          return colorScale(config.runtime.seriesLabels[bar.key])
-                        }
-                      })[0]
+                      _barColor = sharedFilters
+                        ? sharedFilters.map(_sharedFilter => {
+                            if (_sharedFilter.setBy === config.uid) {
+                              // If the current filter is the reset filter item.
+                              if (_sharedFilter.resetLabel === _sharedFilter.active) return colorScale(config.runtime.seriesLabels[bar.key])
+                              // If the current filter is the bars
+                              if (_sharedFilter.active === transformedData[barGroup.index][config.xAxis.dataKey]) return colorScale(config.runtime.seriesLabels[bar.key])
+                              return _filteredOutColor
+                            } else {
+                              // If the setBy isn't the config.uid return the original barColor
+                              return colorScale(config.runtime.seriesLabels[bar.key])
+                            }
+                          })[0]
+                        : colorScale(config.runtime.seriesLabels[bar.key])
 
                       if (isRegularLollipopColor) _barColor = barColor
                       if (isTwoToneLollipopColor) _barColor = chroma(barColor).brighten(1)
@@ -214,34 +202,59 @@ export const BarChartVertical = () => {
                             cursor: dashboardConfig ? 'pointer' : 'default'
                           }
                         })}
-                        <g
-                          transform={`translate(${barX},${yMax - suppresedBarHeight})`}
-                          onMouseOver={() => onMouseOverBar(xAxisValue, bar.key)}
-                          onMouseLeave={onMouseLeaveBar}
-                          opacity={transparentBar ? 0.2 : 1}
+                        {config.preliminaryData.map((pd, index) => {
+                          // 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(bar.value) && pd.value !== ''
+                          const isSuppressed = isValueMatch && selectedSuppressionColumn
+
+                          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
+
+                          return (
+                            <Text // prettier-ignore
+                              key={index}
+                              dy={yPadding}
+                              display={displayBar ? 'block' : 'none'}
+                              opacity={transparentBar ? 0.5 : 1}
+                              x={barX + barWidth / 2}
+                              y={barY}
+                              verticalAnchor={verticalAnchor}
+                              fill={labelColor}
+                              textAnchor='middle'
+                              fontSize={`${iconSize}px`}
+                            >
+                              {pd.iconCode}
+                            </Text>
+                          )
+                        })}
+
+                        <Text // prettier-ignore
                           display={displayBar ? 'block' : 'none'}
-                          data-tooltip-html={tooltip}
-                          data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
-                          onClick={e => {
-                            e.preventDefault()
-                            if (setSharedFilter) {
-                              bar[config.xAxis.dataKey] = xAxisValue
-                              setSharedFilter(config.uid, bar)
-                            }
-                          }}
+                          opacity={transparentBar ? 0.5 : 1}
+                          x={barX + barWidth / 2}
+                          y={barY - 5}
+                          fill={labelColor}
+                          textAnchor='middle'
                         >
-                          {getIcon(bar, barWidth)}
-                        </g>
-
+                          {testZeroValue(bar.value) ? '' : barDefaultLabel}
+                        </Text>
                         <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'
+                          fontSize={config.isLollipopChart ? null : barWidth / 2}
                         >
-                          {barValueLabel}
+                          {absentDataLabel}
                         </Text>
 
                         {config.isLollipopChart && config.lollipopShape === 'circle' && (
@@ -288,7 +301,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,102 @@
+// 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: Function
+  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
+  let showZeroValueDataLabel = 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 = labelWidth < barWidth && barWidth > 10
+    showMissingDataLabel = true
+    barHeight = labelFits ? heightMini : 0
+    barWidthHorizontal = heightMini
+  }
+  // handle zero values
+  if (!isSuppressed && String(bar.value) === '0' && config.general.showZeroValueDataLabel) {
+    const labelWidth = getTextWidth(barLabel, `normal ${barWidth / 2}px sans-serif`)
+    const labelFits = labelWidth < barWidth && barWidth > 10
+    barHeight = config.isLollipopChart ? heightMini * 2 : !config.isLollipopChart && labelFits ? heightMini : 0
+    barWidthHorizontal = heightMini
+    showZeroValueDataLabel = true
+  }
+
+  const getBarY = (defaultBarY, yScale) => {
+    // calculate Y position of small bars (suppressed,N/A,Zero valued) bars
+    if (isSuppressed || showMissingDataLabel || showZeroValueDataLabel) {
+      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'
+    // If the config is set to specifically show zero values, set the label to '0'
+    if (showZeroValueDataLabel) label = '0'
+
+    // 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 = labelWidth < barWidth && barWidth > 10
+    if (config.isLollipopChart) {
+      return label
+    } else {
+      return labelFits && isVertical ? label : !isVertical ? label : ''
+    }
+  }
+
+  return { barWidthHorizontal, barHeight, isSuppressed, showMissingDataLabel, showZeroValueDataLabel, getBarY, getAbsentDataLabel }
+}
+
+export const testZeroValue = value => {
+  if (value === undefined || value === null) {
+    return
+  }
+  const regex = /^0(\.0)?$/
+  return regex.test(value.toString())
+}

package/src/components/DeviationBar.jsx

@@ -82,7 +82,8 @@ export default function DeviationBar({ height, xScale }) {
   useEffect(() => {
     const handleResize = () => {
       setWindowWidth(window.innerWidth)
-      barRefs.current.forEach(bar => {
+      barRefs.current?.forEach(bar => {
+        if (!bar || !bar.style) return
         bar.style.transition = 'none'
         bar.style.transform = 'translate(0) scale(1)'
       })
@@ -104,7 +105,8 @@ export default function DeviationBar({ height, xScale }) {
   }, [entry?.isIntersecting, config.animate]) // eslint-disable-line
 
   useEffect(() => {
-    barRefs.current.forEach((bar, i) => {
+    barRefs.current?.forEach((bar, i) => {
+      if (!bar || !bar.style) return
       if (config.animate) {
         const normalizedTarget = (target / maxVal) * 100
         bar.style.opacity = '0'