@cdc/chart 4.25.8 → 4.25.10

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

@@ -10,6 +10,7 @@ interface BarConfigProps {
   barWidth: number
   isVertical: boolean
   yAxisValue: number
+  labelFontSize: number
 }
 
 // Function to create bar width based on suppression status and missing data label
@@ -20,7 +21,8 @@ export const getBarConfig = ({
   config,
   barWidth,
   isVertical,
-  yAxisValue
+  yAxisValue,
+  labelFontSize
 }: BarConfigProps) => {
   const heightMini = 3 /// height of small bars aka suppressed/NA/Zero valued
   let barHeight = defaultBarHeight
@@ -50,7 +52,7 @@ export const getBarConfig = ({
 
   // 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 labelWidth = getTextWidth(barLabel, `normal ${labelFontSize}px sans-serif`)
     const labelFits = Number(labelWidth) < barWidth && barWidth > 10
     showMissingDataLabel = true
     barHeight = labelFits ? heightMini : 0
@@ -59,7 +61,7 @@ export const getBarConfig = ({
   // Handle undefined, null, or non-calculable bar.value
 
   if (!isSuppressed && bar.value === '0' && config.general.showZeroValueData) {
-    const labelWidth = getTextWidth('0', `normal ${barWidth / 2}px sans-serif`)
+    const labelWidth = getTextWidth('0', `normal ${labelFontSize}px sans-serif`)
     const labelFits = Number(labelWidth) < barWidth && barWidth > 10
     showZeroValueData = true
     barHeight = labelFits ? heightMini : 0
@@ -91,7 +93,7 @@ export const getBarConfig = ({
     if (showZeroValueData) 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 labelWidth = getTextWidth(barLabel, `normal ${labelFontSize}px sans-serif`)
     const labelFits = Number(labelWidth) < barWidth && barWidth > 10
     if (config.isLollipopChart) {
       return label
@@ -110,3 +112,40 @@ export const testZeroValue = value => {
   const regex = /^0(\.0)?$/
   return regex.test(value.toString())
 }
+
+export const addMinimumBarHeights = barStacks => {
+  const MIN_BAR_HEIGHT = 3
+
+  barStacks[0].bars.forEach((_, i) => {
+    let segments = barStacks
+      .map(bs => bs.bars[i])
+      .filter(s => s.bar.data[s.key])
+      .reverse()
+
+    const segmentsNeedingAdjustment = segments.filter(segment => segment.height > 0 && segment.height < MIN_BAR_HEIGHT)
+    const segmentsToShrink = segments.filter(segment => segment.height > MIN_BAR_HEIGHT)
+
+    if (segmentsNeedingAdjustment.length > 0 && segmentsToShrink.length > 0) {
+      segmentsNeedingAdjustment.forEach(smallSegment => {
+        const heightToAdd = MIN_BAR_HEIGHT - smallSegment.height
+        const heightToTakePerSegment = heightToAdd / segmentsToShrink.length
+
+        segmentsToShrink.forEach(largeSegment => {
+          largeSegment.height -= heightToTakePerSegment
+        })
+
+        smallSegment.height = MIN_BAR_HEIGHT
+      })
+
+      let cumulativeY = segments[0].y
+      segments.forEach(segment => {
+        segment.y = cumulativeY
+        cumulativeY += segment.height
+      })
+    }
+  })
+
+  return barStacks
+}
+
+export { getLollipopStemColor, getLollipopHeadColor } from './lollipopColors'

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

@@ -0,0 +1,27 @@
+import chroma from 'chroma-js'
+
+/**
+ * Adjusts color for lollipop stem (lighter than original for contrast)
+ */
+export const getLollipopStemColor = (baseColor: string): string => {
+  const lightness = chroma(baseColor).get('hsl.l')
+
+  if (lightness > 0.7) {
+    // Very light colors: darken slightly to ensure visibility
+    return chroma(baseColor).darken(0.1).hex()
+  } else if (lightness > 0.4) {
+    // Medium colors: lighten moderately
+    return chroma(baseColor).brighten(0.5).hex()
+  } else {
+    // Dark colors: lighten significantly but keep visible
+    return chroma(baseColor).brighten(1.0).hex()
+  }
+}
+
+/**
+ * Adjusts color for lollipop head (darker than original for contrast)
+ */
+export const getLollipopHeadColor = (baseColor: string): string => {
+  const lightness = chroma(baseColor).get('hsl.l')
+  return lightness > 0.6 ? chroma(baseColor).darken(1.5).hex() : baseColor
+}

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

@@ -2,9 +2,13 @@ import React, { useContext, useEffect, useState } from 'react'
 import { ChartDispatchContext } from '../../../ConfigContext'
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
 import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
+import { getPaletteColors } from '@cdc/core/helpers/palettes/utils'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizSubType, getVizTitle } from '@cdc/core/helpers/metrics/utils'
 
 export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, configContext) => {
-  const { config, colorPalettes, tableData, updateConfig, parseDate, formatDate, seriesHighlight } = configContext
+  const { config, colorPalettes, tableData, updateConfig, parseDate, formatDate, seriesHighlight, interactionLabel } =
+    configContext
   const { orientation } = config
   const dispatch = useContext(ChartDispatchContext)
   const [hoveredBar, setHoveredBar] = useState(null)
@@ -98,7 +102,7 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
     if (!config.legend.colorCode && config.series.length > 1) {
       return currentBarColor
     }
-    const palettesArr = config.customColors ?? colorPalettes[config.palette]
+    const palettesArr = getPaletteColors(config, colorPalettes)
     const values = tableData.map(d => {
       return d[config.legend.colorCode]
     })
@@ -189,12 +193,30 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
     return additionalTooltipItems
   }
 
-  const onMouseOverBar = (categoryValue, barKey, event, data) => {
+  const onMouseOverBar = (categoryValue, barKey, event, data, barValue) => {
     if (config.legend.highlightOnHover && config.legend.behavior === 'highlight' && barKey) {
       dispatch({ type: 'SET_SERIES_HIGHLIGHT', payload: [barKey] })
     }
     handleTooltipMouseOver(event, data)
     setHoveredBar(categoryValue)
+
+    if (config.tooltips.singleSeries) {
+      const numericValue = barValue || 'none'
+      publishAnalyticsEvent({
+        vizType: config.type,
+        vizSubType: getVizSubType(config),
+        eventType: `chart_hover`,
+        eventAction: 'hover',
+        eventLabel: interactionLabel,
+        vizTitle: getVizTitle(config),
+        series: barKey || 'none',
+        specifics: `series: ${barKey || 'none'}, yValue: ${
+          orientation === 'horizontal' ? categoryValue : numericValue
+        }, xValue: ${orientation === 'horizontal' ? numericValue : categoryValue}, orientation: ${
+          orientation || 'none'
+        }`
+      })
+    }
   }
   const onMouseLeaveBar = () => {
     if (config.legend.highlightOnHover && config.legend.behavior === 'highlight') {

package/src/components/BoxPlot/BoxPlot.Vertical.tsx

@@ -4,6 +4,7 @@ import { Group } from '@visx/group'
 import ConfigContext from '../../ConfigContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
+import { getCurrentPaletteName } from '@cdc/core/helpers/palettes/utils'
 import { handleTooltip, createPlots } from './helpers/index'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import _ from 'lodash'
@@ -18,7 +19,7 @@ const BoxPlotVertical = ({ xScale, yScale, seriesScale }) => {
   const bodyStyles = getComputedStyle(document.body)
   const defaultColor = APP_FONT_COLOR
   const constrainedWidth = Math.min(40, boxWidth)
-  const color_0 = _.get(colorPalettesChart, [config.palette, 0], '#000')
+  const color_0 = _.get(colorPalettesChart, [getCurrentPaletteName(config), 0], '#000')
   const plots = createPlots(data, config)
   return (
     <ErrorBoundary component='BoxPlot Vertical'>

package/src/components/DeviationBar.jsx

@@ -1,6 +1,6 @@
 import { Line } from '@visx/shape'
 import { Group } from '@visx/group'
-import { useContext, useEffect, useRef, useState } from 'react'
+import React, { useContext, useEffect, useRef, useState } from 'react'
 import ConfigContext from '../ConfigContext'
 import { Text } from '@visx/text'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
@@ -8,6 +8,7 @@ import useIntersectionObserver from '../hooks/useIntersectionObserver'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
+import { isV1Palette } from '@cdc/core/helpers/palettes/utils'
 
 export default function DeviationBar({ height, xScale }) {
   const {
@@ -26,10 +27,10 @@ export default function DeviationBar({ height, xScale }) {
     roundingStyle === 'standard'
       ? '8px'
       : roundingStyle === 'shallow'
-      ? '5px'
-      : roundingStyle === 'finger'
-      ? '15px'
-      : '0px'
+        ? '5px'
+        : roundingStyle === 'finger'
+          ? '15px'
+          : '0px'
   const isRounded = config.barStyle === 'rounded'
   const target = Number(config.xAxis.target)
   const seriesKey = config.series[0].dataKey
@@ -176,7 +177,8 @@ export default function DeviationBar({ height, xScale }) {
           const squareY = barY - barHeight / 2
           const borderRadius = applyRadius(barPosition)
           // colors
-          const [leftColor, rightColor] = twoColorPalette[twoColor.palette]
+          let versionName = isV1Palette(config) ? 'v1' : 'v2'
+          const [leftColor, rightColor] = twoColorPalette?.[versionName]?.[twoColor.palette] || ['#1D6ABF', '#935586']
           const barColor = { left: leftColor, right: rightColor }
           const fill = getContrastColor(APP_FONT_COLOR, barColor[barPosition])
 
@@ -205,6 +207,7 @@ export default function DeviationBar({ height, xScale }) {
                 y={barY}
                 width={barWidth}
                 height={barHeight}
+                onMouseEnter={() => {}}
                 data-tooltip-html={tooltip}
                 data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
                 tabIndex={-1}