@cdc/chart 4.25.8 → 4.25.11

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

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 
 // Local context and hooks
 import ConfigContext from '../../../ConfigContext'
@@ -8,18 +8,17 @@ import { useHighlightedBars } from '../../../hooks/useHighlightedBars'
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
 import { BarGroup } from '@visx/shape'
+import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 
 // CDC core components and helpers
 import { getColorContrast, getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
+import { isMobileFontViewport } from '@cdc/core/helpers/viewports'
 import createBarElement from '@cdc/core/components/createBarElement'
-import { getBarConfig, testZeroValue } from '../helpers'
+import { getBarConfig, testZeroValue, getLollipopStemColor, getLollipopHeadColor } from '../helpers'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 import isNumber from '@cdc/core/helpers/isNumber'
 
-// Third party libraries
-import chroma from 'chroma-js'
-
 // Local context and types
 import BarChartContext, { BarChartContextValues } from './context'
 import { ChartContext } from '../../../types/ChartContext'
@@ -27,7 +26,7 @@ import _ from 'lodash'
 import { getBarData } from '../helpers/getBarData'
 import { getHorizontalBarHeights } from '../helpers/getBarHeights'
 
-export const BarChartHorizontal = () => {
+const BarChartHorizontal = () => {
   const { xScale, yScale, yMax, seriesScale, barChart } = useContext<BarChartContextValues>(BarChartContext)
   const {
     isHorizontal,
@@ -54,15 +53,85 @@ export const BarChartHorizontal = () => {
     formatNumber,
     formatDate,
     parseDate,
-    setSharedFilter
+    setSharedFilter,
+    vizViewport
   } = useContext<ChartContext>(ConfigContext)
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
+  const LABEL_FONT_SIZE = isMobileFontViewport(vizViewport) ? 13 : 16
+
   const hasConfidenceInterval = [config.confidenceKeys?.upper, config.confidenceKeys?.lower].every(
     v => v != null && String(v).trim() !== ''
   )
 
+  // 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>
+    )
+  }
+
   const _data = getBarData(config, data, hasConfidenceInterval)
 
   return (
@@ -70,6 +139,7 @@ export const BarChartHorizontal = () => {
     config.visualizationType === 'Bar' &&
     config.orientation === 'horizontal' && (
       <Group>
+        {renderPatternDefs()}
         <BarGroup
           data={config.preliminaryData?.some(pd => pd.value && pd.type === 'suppression') ? tableData : _data}
           keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys}
@@ -132,7 +202,15 @@ export const BarChartHorizontal = () => {
                     barWidthHorizontal: barWidth,
                     isSuppressed,
                     absentDataLabel
-                  } = getBarConfig({ bar, defaultBarWidth, config, isVertical: false, yAxisValue, barWidth: 0 })
+                  } = getBarConfig({
+                    bar,
+                    defaultBarWidth,
+                    config,
+                    isVertical: false,
+                    yAxisValue,
+                    barWidth: 0,
+                    labelFontSize: LABEL_FONT_SIZE
+                  })
 
                   const barPosition = !isPositiveBar ? 'below' : 'above'
 
@@ -179,7 +257,7 @@ export const BarChartHorizontal = () => {
                       ? colorScale(config.runtime.seriesLabels[bar.key])
                       : colorScale(bar.key)
                   const hasDynamicCategory = config.series.find(s => s.dynamicCategory)
-                  if (!hasDynamicCategory) {
+                  if (!hasDynamicCategory && config.legend.colorCode) {
                     barColor = assignColorsToValues(barGroups.length, barGroup.index, barColor) // Color code by category
                   }
                   const isRegularLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'regular'
@@ -215,13 +293,23 @@ export const BarChartHorizontal = () => {
                       labelColor = '#fff'
                     }
                   }
-                  const background = () => {
+                  const getBarBackgroundColor = () => {
                     if (isRegularLollipopColor) return barColor
-                    if (isTwoToneLollipopColor) return chroma(barColor).brighten(1)
+                    if (isTwoToneLollipopColor) {
+                      return getLollipopStemColor(barColor)
+                    }
                     if (isHighlightedBar) return 'transparent'
                     return barColor
                   }
 
+                  // Function to get the lollipop head color (should be darker than stem)
+                  const getLocalLollipopHeadColor = (): string => {
+                    if (!isTwoToneLollipopColor) {
+                      return barColor
+                    }
+                    return getLollipopHeadColor(barColor)
+                  }
+
                   // Confidence Interval Variables
                   const tickWidth = 5
                   const yPos = barHeight * bar.index + barHeight / 2
@@ -237,14 +325,45 @@ export const BarChartHorizontal = () => {
                     return xScale(d)
                   })
 
+                  // 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()
+
                   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: background(),
+                          background: baseBackground,
                           borderColor,
                           borderStyle: 'solid',
                           borderWidth: `${borderWidth}px`,
@@ -252,7 +371,7 @@ export const BarChartHorizontal = () => {
                           height: numbericBarHeight,
                           x: barX,
                           y: barHeight * bar.index,
-                          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}`,
@@ -270,6 +389,32 @@ export const BarChartHorizontal = () => {
                           }
                         })}
 
+                        {/* 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: numbericBarHeight,
+                            x: barX,
+                            y: barHeight * bar.index,
+                            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}
@@ -298,17 +443,11 @@ export const BarChartHorizontal = () => {
 
                           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' : APP_FONT_COLOR
                           return (
                             <Text // prettier-ignore
                               key={index}
-                              fontSize={iconSize}
+                              fontSize={LABEL_FONT_SIZE}
                               display={displayBar ? 'block' : 'none'}
                               opacity={transparentBar ? 0.5 : 1}
                               x={barX}
@@ -403,7 +542,7 @@ export const BarChartHorizontal = () => {
                             cx={bar.y}
                             cy={barHeight * bar.index + lollipopBarWidth / 2}
                             r={lollipopShapeSize / 2}
-                            fill={barColor}
+                            fill={getLocalLollipopHeadColor()}
                             key={`circle--${bar.index}`}
                             data-tooltip-html={tooltip}
                             data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
@@ -417,7 +556,7 @@ export const BarChartHorizontal = () => {
                             y={0 - lollipopBarWidth / 2}
                             width={lollipopShapeSize}
                             height={lollipopShapeSize}
-                            fill={barColor}
+                            fill={getLocalLollipopHeadColor()}
                             key={`circle--${bar.index}`}
                             data-tooltip-html={tooltip}
                             data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}

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

@@ -3,6 +3,7 @@ import ConfigContext from '../../../ConfigContext'
 import { BarStackHorizontal } from '@visx/shape'
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
+import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 import { getColorContrast, getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
@@ -43,10 +44,79 @@ const BarChartStackedHorizontal = () => {
   } = barChart
 
   const { orientation, visualizationSubType } = config
+
+  // 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()}
         <BarStackHorizontal
           data={data}
           keys={barStackedSeriesKeys}
@@ -58,7 +128,7 @@ const BarChartStackedHorizontal = () => {
           offset='none'
         >
           {barStacks =>
-            barStacks.map(barStack =>
+            barStacks.map((barStack, stackIndex) =>
               getHorizontalBarHeights(config, barStack.bars).map((bar, index) => {
                 const transparentBar =
                   config.legend.behavior === 'highlight' &&
@@ -73,7 +143,7 @@ const BarChartStackedHorizontal = () => {
                 let labelColor = getContrastColor(APP_FONT_COLOR, barColor)
                 let constrast = getColorContrast(APP_FONT_COLOR, barColor)
                 const contrastLevel = 7
-                if (constrast < contrastLevel) {
+                if (typeof constrast === 'number' && constrast < contrastLevel) {
                   labelColor = '#fff'
                 }
                 // tooltips
@@ -94,9 +164,41 @@ const BarChartStackedHorizontal = () => {
                   <li class="tooltip-body ">${additionalColTooltip}</li>
                     </li></ul>`
 
+                // 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 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 = data[bar.index][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 = data[bar.index][pattern.dataKey]
+                        if (String(dataFieldValue) === String(pattern.dataValue)) {
+                          return `url(#chart-pattern-${patternKey})`
+                        }
+                      }
+                    }
+                  }
+
+                  return null
+                }
+
+                const patternUrl = getPatternUrl()
+
                 return (
-                  <>
+                  <React.Fragment key={`stack-${stackIndex}-bar-${index}-${barStack.index}`}>
                     <Group key={index} id={`barStack${barStack.index}-${bar.index}`} className='stack horizontal'>
+                      {/* Base colored bar */}
                       {createBarElement({
                         config: config,
                         seriesHighlight,
@@ -110,7 +212,7 @@ const BarChartStackedHorizontal = () => {
                         height: bar.height,
                         x: bar.x,
                         y: bar.y,
-                        onMouseOver: e => onMouseOverBar(yAxisValue, bar.key, e, data),
+                        onMouseOver: e => onMouseOverBar(yAxisValue, bar.key, e, data, bar.bar.data[bar.key]),
                         onMouseLeave: onMouseLeaveBar,
                         tooltipHtml: tooltip,
                         tooltipId: `cdc-open-viz-tooltip-${config.runtime.uniqueId}`,
@@ -129,6 +231,37 @@ const BarChartStackedHorizontal = () => {
                         }
                       })}
 
+                      {/* Pattern overlay using createBarElement for consistent animation */}
+                      {patternUrl &&
+                        createBarElement({
+                          config: config,
+                          seriesHighlight,
+                          index: barStack.index,
+                          className: `animated-chart pattern-overlay ${animatedChart ? 'animated' : ''}`,
+                          background: patternUrl, // Use pattern as background
+                          borderColor: 'transparent',
+                          borderStyle: 'none',
+                          borderWidth: '0px',
+                          width: bar.width,
+                          height: bar.height,
+                          x: bar.x,
+                          y: bar.y,
+                          onMouseOver: () => {}, // No interaction
+                          onMouseLeave: () => {}, // No interaction
+                          tooltipHtml: '',
+                          tooltipId: '',
+                          onClick: () => {}, // No interaction
+                          styleOverrides: {
+                            animationDelay: `${barStack.index * 0.5}s`,
+                            transformOrigin: `${bar.x}px 0`,
+                            opacity: animatedChart ? 0 : transparentBar ? 0.2 : 1, // Start hidden if animated
+                            display: displayBar ? 'block' : 'none',
+                            pointerEvents: 'none', // Let clicks pass through to base bar
+                            // Force the initial transform state to match CSS animation
+                            transform: animatedChart ? 'scale(0, 1)' : 'scale(1, 1)'
+                          }
+                        })}
+
                       {orientation === 'horizontal' &&
                         visualizationSubType === 'stacked' &&
                         isLabelBelowBar &&
@@ -158,7 +291,7 @@ const BarChartStackedHorizontal = () => {
                         </Text>
                       )}
                     </Group>
-                  </>
+                  </React.Fragment>
                 )
               })
             )