@cdc/chart 4.25.8 → 4.25.11

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

@@ -2,10 +2,10 @@ import React, { useContext, useState } from 'react'
 import ConfigContext from '../../../ConfigContext'
 import { BarStack } from '@visx/shape'
 import { Group } from '@visx/group'
-import { Text } from '@visx/text'
+import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 import BarChartContext from './context'
 import Regions from '../../Regions'
-import { isDateScale } from '@cdc/core/helpers/cove/date'
+import { addMinimumBarHeights } from '../helpers'
 
 import createBarElement from '@cdc/core/components/createBarElement'
 
@@ -31,10 +31,78 @@ const BarChartStackedVertical = () => {
   const isDateAxisType = config.runtime.xAxis.type === 'date-time' || config.runtime.xAxis.type === 'date'
   const isDateTimeScaleAxisType = config.runtime.xAxis.type === 'date-time'
 
+  // Pattern helper function
+  const renderPatternDefs = () => {
+    if (!config.legend.patterns || Object.keys(config.legend.patterns).length === 0) {
+      return null
+    }
+
+    return (
+      <defs>
+        {Object.entries(config.legend.patterns).map(([key, pattern]) => {
+          const patternId = `chart-pattern-${key}`
+          const size = pattern.patternSize || 8
+
+          switch (pattern.shape) {
+            case 'circles':
+              return (
+                <PatternCircles
+                  key={patternId}
+                  id={patternId}
+                  height={size}
+                  width={size}
+                  fill={pattern.color}
+                  radius={1.25}
+                />
+              )
+            case 'lines':
+              return (
+                <PatternLines
+                  key={patternId}
+                  id={patternId}
+                  height={size}
+                  width={size}
+                  stroke={pattern.color}
+                  strokeWidth={0.75}
+                  orientation={['horizontal']}
+                />
+              )
+            case 'diagonalLines':
+              return (
+                <PatternLines
+                  key={patternId}
+                  id={patternId}
+                  height={size}
+                  width={size}
+                  stroke={pattern.color}
+                  strokeWidth={0.75}
+                  orientation={['diagonalRightToLeft']}
+                />
+              )
+            case 'waves':
+              return (
+                <PatternWaves
+                  key={patternId}
+                  id={patternId}
+                  height={size}
+                  width={size}
+                  fill={pattern.color}
+                  strokeWidth={0.25}
+                />
+              )
+            default:
+              return null
+          }
+        })}
+      </defs>
+    )
+  }
+
   return (
     config.visualizationSubType === 'stacked' &&
     !isHorizontal && (
       <>
+        {renderPatternDefs()}
         <BarStack
           data={data}
           keys={barStackedSeriesKeys}
@@ -43,87 +111,161 @@ const BarChartStackedVertical = () => {
           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
-                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) -
-                  (isDateTimeScaleAxisType ? barThickness / 2 : 0)
-                const xAxisTooltip = config.runtime.xAxis.label
-                  ? `${config.runtime.xAxis.label}: ${xAxisValue}`
-                  : xAxisValue
-                const additionalColTooltip = getAdditionalColumn(bar.key, hoveredBar)
-                const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
-                const tooltip = `<ul>
+          {barStacks => {
+            return addMinimumBarHeights(barStacks)
+              .reverse()
+              .map(barStack => {
+                return 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
+                  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) -
+                    (isDateTimeScaleAxisType ? barThickness / 2 : 0)
+                  const xAxisTooltip = config.runtime.xAxis.label
+                    ? `${config.runtime.xAxis.label}: ${xAxisValue}`
+                    : xAxisValue
+                  const additionalColTooltip = getAdditionalColumn(bar.key, hoveredBar)
+                  const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
+                  const tooltip = `<ul>
                   <li class="tooltip-heading"">${xAxisTooltip}</li>
                   <li class="tooltip-body ">${tooltipBody}</li>
                   <li class="tooltip-body ">${additionalColTooltip}</li>
                     </li></ul>`
 
-                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'
-                    >
-                      {createBarElement({
-                        config: config,
-                        seriesHighlight,
-                        index: barStack.index,
-                        background: colorScale(config.runtime.seriesLabels[bar.key]),
-                        borderColor: '#333',
-                        borderStyle: 'solid',
-                        borderWidth: `${config.barHasBorder === 'true' ? barBorderWidth : 0}px`,
-                        width: barThickness,
-                        height: bar.height,
-                        x: barX,
-                        y: bar.y,
-                        onMouseOver: e => onMouseOverBar(xAxisValue, bar.key, e, data),
-                        onMouseLeave: onMouseLeaveBar,
-                        tooltipHtml: tooltip,
-                        tooltipId: `cdc-open-viz-tooltip-${config.runtime.uniqueId}`,
-                        onClick: e => {
-                          e.preventDefault()
-                          if (setSharedFilter) {
-                            bar[config.xAxis.dataKey] = xAxisValue
-                            setSharedFilter(config.uid, bar)
+                  setBarWidth(barThickness)
+
+                  // Check if this bar should use a pattern
+                  const getPatternUrl = (): string | null => {
+                    if (!config.legend.patterns || Object.keys(config.legend.patterns).length === 0) {
+                      return null
+                    }
+
+                    // Find a pattern that matches this specific bar
+                    for (const [patternKey, patternObj] of Object.entries(config.legend.patterns)) {
+                      const pattern = patternObj as any
+                      if (pattern?.dataKey && pattern?.dataValue) {
+                        // For stacked bar charts, check if the pattern's dataKey matches the current bar's series key
+                        // and if the pattern's dataValue matches the current bar's value
+                        const barValue = bar.bar.data[bar.key]
+                        if (pattern.dataKey === bar.key && String(barValue) === String(pattern.dataValue)) {
+                          return `url(#chart-pattern-${patternKey})`
+                        }
+                        // Fallback for non-series pattern matching (like the original stacked pattern test)
+                        // Only check this if the pattern dataKey is NOT a series key
+                        else if (!config.runtime.seriesLabels || !config.runtime.seriesLabels[pattern.dataKey]) {
+                          const dataFieldValue = bar.bar.data[pattern.dataKey]
+                          if (String(dataFieldValue) === String(pattern.dataValue)) {
+                            return `url(#chart-pattern-${patternKey})`
                           }
-                        },
-                        styleOverrides: {
-                          animationDelay: `${barStack.index * 0.5}s`,
-                          transformOrigin: `${barThickness / 2}px ${bar.y + bar.height}px`,
-                          opacity: transparentBar ? 0.2 : 1,
-                          display: displayBar ? 'block' : 'none'
                         }
-                      })}
+                      }
+                    }
+
+                    return null
+                  }
+
+                  const patternUrl = getPatternUrl()
+
+                  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'
+                      >
+                        {/* Base colored bar */}
+                        {createBarElement({
+                          config: config,
+                          seriesHighlight,
+                          index: barStack.index,
+                          background: colorScale(config.runtime.seriesLabels[bar.key]),
+                          borderColor: '#333',
+                          borderStyle: 'solid',
+                          borderWidth: `${config.barHasBorder === 'true' ? barBorderWidth : 0}px`,
+                          width: barThickness,
+                          height: bar.height,
+                          x: barX,
+                          y: bar.y,
+                          onMouseOver: e => onMouseOverBar(xAxisValue, bar.key, e, data, bar.bar.data[bar.key]),
+                          onMouseLeave: onMouseLeaveBar,
+                          tooltipHtml: tooltip,
+                          tooltipId: `cdc-open-viz-tooltip-${config.runtime.uniqueId}`,
+                          onClick: e => {
+                            e.preventDefault()
+                            if (setSharedFilter) {
+                              bar[config.xAxis.dataKey] = xAxisValue
+                              setSharedFilter(config.uid, bar)
+                            }
+                          },
+                          styleOverrides: {
+                            animationDelay: `${barStack.index * 0.5}s`,
+                            transformOrigin: `${barThickness / 2}px ${bar.y + bar.height}px`,
+                            opacity: transparentBar ? 0.2 : 1,
+                            display: displayBar ? 'block' : 'none'
+                          }
+                        })}
+
+                        {/* Pattern overlay if pattern exists */}
+                        {patternUrl &&
+                          createBarElement({
+                            config: config,
+                            seriesHighlight,
+                            index: barStack.index,
+                            background: patternUrl, // Use pattern as background
+                            borderColor: 'transparent',
+                            borderStyle: 'none',
+                            borderWidth: '0px',
+                            width: barThickness,
+                            height: bar.height,
+                            x: barX,
+                            y: bar.y,
+                            onMouseOver: () => {}, // No interaction
+                            onMouseLeave: () => {}, // No interaction
+                            tooltipHtml: '',
+                            tooltipId: '',
+                            onClick: () => {}, // No interaction
+                            styleOverrides: {
+                              animationDelay: `${barStack.index * 0.5}s`,
+                              transformOrigin: `${barThickness / 2}px ${bar.y + bar.height}px`,
+                              opacity: transparentBar ? 0.2 : 1,
+                              display: displayBar ? 'block' : 'none',
+                              pointerEvents: 'none' // Let clicks pass through to base bar
+                            }
+                          })}
+                      </Group>
                     </Group>
-                  </Group>
-                )
+                  )
+                })
               })
-            )
-          }
+          }}
         </BarStack>
-        <Regions xScale={xScale} yMax={yMax} barWidth={barWidth} totalBarsInGroup={1} />
+        <Regions
+          xScale={xScale}
+          yMax={yMax}
+          barWidth={barWidth}
+          totalBarsInGroup={1}
+          handleTooltipMouseOff={() => {}}
+          handleTooltipMouseOver={() => {}}
+          handleTooltipClick={() => {}}
+          tooltipData={null}
+          showTooltip={() => {}}
+          hideTooltip={() => {}}
+        />
       </>
     )
   )

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

@@ -4,11 +4,12 @@ import ConfigContext from '../../../ConfigContext'
 import BarChartContext, { type BarChartContextValues } from './context'
 // Local hooks
 import { useHighlightedBars } from '../../../hooks/useHighlightedBars'
-import { getBarConfig, testZeroValue } from '../helpers'
+import { getBarConfig, testZeroValue, getLollipopStemColor, getLollipopHeadColor } from '../helpers'
 // VisX library imports
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
 import { BarGroup } from '@visx/shape'
+import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 // Local components
 import Regions from '../../Regions'
 // CDC core components and helpers
@@ -17,14 +18,12 @@ import isNumber from '@cdc/core/helpers/isNumber'
 import createBarElement from '@cdc/core/components/createBarElement'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import { isMobileFontViewport } from '@cdc/core/helpers/viewports'
-// 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 BarChartVertical = () => {
   const { xScale, yScale, xMax, yMax, seriesScale, convertLineToBarGraph, barChart } =
     useContext<BarChartContextValues>(BarChartContext)
   const {
@@ -47,6 +46,7 @@ export const BarChartVertical = () => {
     colorScale,
     config,
     currentViewport,
+    vizViewport,
     dashboardConfig,
     tableData,
     formatDate,
@@ -59,6 +59,8 @@ export const BarChartVertical = () => {
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
+  const LABEL_FONT_SIZE = isMobileFontViewport(vizViewport) ? 13 : 16
+
   const root = document.documentElement
 
   let data = transformedData
@@ -76,11 +78,80 @@ export const BarChartVertical = () => {
     config.confidenceKeys.lower !== ''
 
   const _data = getBarData(config, data, hasConfidenceInterval)
+
+  // Pattern helper function
+  const renderPatternDefs = () => {
+    if (!config.legend.patterns || Object.keys(config.legend.patterns).length === 0) {
+      return null
+    }
+
+    return (
+      <defs>
+        {Object.entries(config.legend.patterns).map(([key, pattern]) => {
+          const patternId = `chart-pattern-${key}`
+          const size = pattern.patternSize || 8
+
+          switch (pattern.shape) {
+            case 'circles':
+              return (
+                <PatternCircles
+                  key={patternId}
+                  id={patternId}
+                  height={size}
+                  width={size}
+                  fill={pattern.color}
+                  radius={1.25}
+                />
+              )
+            case 'lines':
+              return (
+                <PatternLines
+                  key={patternId}
+                  id={patternId}
+                  height={size}
+                  width={size}
+                  stroke={pattern.color}
+                  strokeWidth={0.75}
+                  orientation={['horizontal']}
+                />
+              )
+            case 'diagonalLines':
+              return (
+                <PatternLines
+                  key={patternId}
+                  id={patternId}
+                  height={size}
+                  width={size}
+                  stroke={pattern.color}
+                  strokeWidth={0.75}
+                  orientation={['diagonalRightToLeft']}
+                />
+              )
+            case 'waves':
+              return (
+                <PatternWaves
+                  key={patternId}
+                  id={patternId}
+                  height={size}
+                  width={size}
+                  fill={pattern.color}
+                  strokeWidth={0.25}
+                />
+              )
+            default:
+              return null
+          }
+        })}
+      </defs>
+    )
+  }
+
   return (
     config.visualizationSubType !== 'stacked' &&
     (config.visualizationType === 'Bar' || config.visualizationType === 'Combo' || convertLineToBarGraph) &&
     config.orientation === 'vertical' && (
       <Group>
+        {renderPatternDefs()}
         <BarGroup
           data={_data}
           keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys}
@@ -170,7 +241,8 @@ export const BarChartVertical = () => {
                     config,
                     barWidth,
                     isVertical: true,
-                    yAxisValue
+                    yAxisValue,
+                    labelFontSize: LABEL_FONT_SIZE
                   })
                   // configure colors
                   let labelColor = APP_FONT_COLOR
@@ -236,12 +308,16 @@ export const BarChartVertical = () => {
                       if (isHighlightedBar) _barColor = 'transparent'
                       if (config.legend.colorCode)
                         _barColor = assignColorsToValues(barGroups.length, barGroup.index, barColor)
-                      if (isTwoToneLollipopColor) _barColor = chroma(barColor).brighten(1)
+                      if (isTwoToneLollipopColor) {
+                        _barColor = getLollipopStemColor(barColor)
+                      }
                       return _barColor
                     }
 
-                    // if this is a two tone lollipop slightly lighten the bar.
-                    if (isTwoToneLollipopColor) _barColor = chroma(barColor).brighten(1)
+                    // if this is a two tone lollipop, ensure stem has good contrast against white but is lighter than head
+                    if (isTwoToneLollipopColor) {
+                      _barColor = getLollipopStemColor(barColor)
+                    }
                     if (config.legend.colorCode)
                       _barColor = assignColorsToValues(barGroups.length, barGroup.index, barColor)
 
@@ -250,6 +326,36 @@ export const BarChartVertical = () => {
                     return _barColor
                   }
 
+                  // Check if this bar should use a pattern
+                  const getPatternUrl = (): string | null => {
+                    if (!config.legend.patterns || Object.keys(config.legend.patterns).length === 0) {
+                      return null
+                    }
+
+                    // Find a pattern that matches this specific bar
+                    for (const [patternKey, pattern] of Object.entries(config.legend.patterns)) {
+                      if (pattern.dataKey && pattern.dataValue) {
+                        // For grouped bar charts, check if the pattern's dataKey matches the current bar's series key
+                        // and if the pattern's dataValue matches the current bar's value
+                        if (pattern.dataKey === bar.key && String(bar.value) === String(pattern.dataValue)) {
+                          return `url(#chart-pattern-${patternKey})`
+                        }
+                        // Fallback for non-grouped charts: check datum field value
+                        else if (!config.series || config.series.length <= 1) {
+                          const dataFieldValue = datum[pattern.dataKey]
+                          if (String(dataFieldValue) === String(pattern.dataValue)) {
+                            return `url(#chart-pattern-${patternKey})`
+                          }
+                        }
+                      }
+                    }
+
+                    return null
+                  }
+
+                  const patternUrl = getPatternUrl()
+                  const baseBackground = getBarBackgroundColor(colorScale(config.runtime.seriesLabels[bar.key]))
+
                   // Confidence Interval Variables
                   const tickWidth = 5
                   const xPos = barX + (config.xAxis.type !== 'date-time' ? barWidth / 2 : 0)
@@ -268,16 +374,15 @@ export const BarChartVertical = () => {
 
                   const BAR_LABEL_PADDING = 10
 
-                  const LABEL_FONT_SIZE = isMobileFontViewport(currentViewport) ? 13 : 16
-
                   return (
                     <Group display={hideGroup} key={`${barGroup.index}--${index}`}>
                       <Group key={`bar-sub-group-${barGroup.index}-${barGroup.x0}-${barY}--${index}`}>
+                        {/* Base colored bar */}
                         {createBarElement({
                           config: config,
                           index: newIndex,
                           id: `barGroup${barGroup.index}`,
-                          background: getBarBackgroundColor(colorScale(config.runtime.seriesLabels[bar.key])),
+                          background: baseBackground,
                           borderColor,
                           borderStyle: 'solid',
                           borderWidth: `${borderWidth}px`,
@@ -285,7 +390,7 @@ export const BarChartVertical = () => {
                           height: barHeight,
                           x: barX,
                           y: barY,
-                          onMouseOver: e => onMouseOverBar(xAxisValue, bar.key, e, data),
+                          onMouseOver: e => onMouseOverBar(xAxisValue, bar.key, e, data, bar.value),
                           onMouseLeave: onMouseLeaveBar,
                           tooltipHtml: tooltip,
                           tooltipId: `cdc-open-viz-tooltip-${config.runtime.uniqueId}`,
@@ -304,6 +409,32 @@ export const BarChartVertical = () => {
                           }
                         })}
 
+                        {/* Pattern overlay if pattern exists */}
+                        {patternUrl &&
+                          createBarElement({
+                            config: config,
+                            index: newIndex,
+                            background: patternUrl, // Use pattern as background
+                            borderColor: 'transparent',
+                            borderStyle: 'none',
+                            borderWidth: '0px',
+                            width: barWidth,
+                            height: barHeight,
+                            x: barX,
+                            y: barY,
+                            onMouseOver: () => {}, // No interaction
+                            onMouseLeave: () => {}, // No interaction
+                            tooltipHtml: '',
+                            tooltipId: '',
+                            onClick: () => {}, // No interaction
+                            styleOverrides: {
+                              transformOrigin: `0 ${barY + barHeight}px`,
+                              opacity: transparentBar ? 0.2 : 1,
+                              display: displayBar ? 'block' : 'none',
+                              pointerEvents: 'none' // Let clicks pass through to base bar
+                            }
+                          })}
+
                         {(absentDataLabel || isSuppressed) && (
                           <rect
                             x={barX}
@@ -337,13 +468,7 @@ export const BarChartVertical = () => {
                           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'
+                          const fillColor = pd.displayGray ? '#8b8b8a' : APP_FONT_COLOR
 
                           return (
                             <Text // prettier-ignore
@@ -356,7 +481,7 @@ export const BarChartVertical = () => {
                               verticalAnchor={verticalAnchor}
                               fill={fillColor}
                               textAnchor='middle'
-                              fontSize={`${iconSize}px`}
+                              fontSize={LABEL_FONT_SIZE}
                             >
                               {pd.iconCode}
                             </Text>
@@ -390,7 +515,11 @@ export const BarChartVertical = () => {
                             cx={barX + lollipopShapeSize / 3.5}
                             cy={bar.y}
                             r={lollipopShapeSize / 2}
-                            fill={getBarBackgroundColor(colorScale(config.runtime.seriesLabels[bar.key]))}
+                            fill={
+                              isTwoToneLollipopColor
+                                ? getLollipopHeadColor(colorScale(config.runtime.seriesLabels[bar.key]))
+                                : colorScale(config.runtime.seriesLabels[bar.key])
+                            }
                             key={`circle--${bar.index}`}
                             data-tooltip-html={tooltip}
                             data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
@@ -404,7 +533,11 @@ export const BarChartVertical = () => {
                             y={bar.y}
                             width={lollipopShapeSize}
                             height={lollipopShapeSize}
-                            fill={getBarBackgroundColor(colorScale(config.runtime.seriesLabels[bar.key]))}
+                            fill={
+                              isTwoToneLollipopColor
+                                ? getLollipopHeadColor(colorScale(config.runtime.seriesLabels[bar.key]))
+                                : colorScale(config.runtime.seriesLabels[bar.key])
+                            }
                             key={`circle--${bar.index}`}
                             data-tooltip-html={tooltip}
                             data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}