@cdc/chart 4.26.7 → 4.26.10

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

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react'
+import React, { useContext } from 'react'
 // Local contexts
 import ConfigContext from '../../../ConfigContext'
 import BarChartContext, { type BarChartContextValues } from './context'
@@ -10,27 +10,29 @@ 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
 import { isDateScale } from '@cdc/core/helpers/cove/date'
 import isNumber from '@cdc/core/helpers/isNumber'
 import createBarElement from '@cdc/core/components/createBarElement'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
+import { getSeriesValueLabel } from '@cdc/core/helpers/getSeriesName'
 // Types
 import { type ChartContext } from '../../../types/ChartContext'
 import { getBarData } from '../helpers/getBarData'
 import { getPatternUrl as getPatternUrlForBar } from '../helpers/getPatternUrl'
+import { getPortionPatternRenderData } from '../helpers/portionPattern'
 import { getChartPatternId } from '../../../helpers/getChartPatternId'
 import { buildSeriesTooltipListHtml } from '../../../helpers/tooltipHelpers'
+import { BarPortionPatternOverlay } from './PortionPatternOverlay'
 
 const BarChartVertical = () => {
-  const { xScale, yScale, xMax, yMax, seriesScale, convertLineToBarGraph, barChart } =
+  const { xScale, yScale, yMax, seriesScale, convertLineToBarGraph, barChart } =
     useContext<BarChartContextValues>(BarChartContext)
   const {
     assignColorsToValues,
     barBorderWidth,
     getAdditionalColumn,
+    formatTooltipValue,
     getHighlightedBarByValue,
     getHighlightedBarColorByValue,
     labelFontSize,
@@ -41,16 +43,12 @@ const BarChartVertical = () => {
     section
   } = barChart
 
-  const [barWidth, setBarWidth] = useState(0)
-  const [totalBarsInGroup, setTotalBarsInGroup] = useState(0)
-
   const {
     colorScale,
     config,
     currentViewport,
     vizViewport,
     dashboardConfig,
-    tableData,
     formatDate,
     formatNumber,
     parseDate,
@@ -63,13 +61,7 @@ const BarChartVertical = () => {
 
   const root = document.documentElement
 
-  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
-  }
+  const data = transformedData
 
   const hasConfidenceInterval =
     config.confidenceKeys.upper &&
@@ -134,8 +126,9 @@ const BarChartVertical = () => {
                   id={patternId}
                   height={size}
                   width={size}
-                  fill={pattern.color}
-                  strokeWidth={0.25}
+                  fill='transparent'
+                  stroke={pattern.color}
+                  strokeWidth={0.75}
                 />
               )
             default:
@@ -215,12 +208,12 @@ const BarChartVertical = () => {
                     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(dataValue)) : dataValue
 
+                  const tooltipValue = formatTooltipValue(bar.key, dataValue, yAxisValue, barGroup.index)
+
                   // create new Index for bars with negative values
                   const newIndex = bar.value < 0 ? -1 : index
                   // tooltips
@@ -228,7 +221,7 @@ const BarChartVertical = () => {
                   let xAxisTooltip = config.runtime.xAxis.label
                     ? `${config.runtime.xAxis.label}: ${xAxisValue}`
                     : xAxisValue
-                  const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
+                  const tooltipBody = `${getSeriesValueLabel(bar.key, config)}: ${tooltipValue}`
                   const tooltip = buildSeriesTooltipListHtml({
                     config,
                     colorScale,
@@ -308,8 +301,7 @@ const BarChartVertical = () => {
                       if (isRegularLollipopColor) _barColor = barColor
 
                       if (isHighlightedBar) _barColor = 'transparent'
-                      if (config.legend.colorCode)
-                        _barColor = assignColorsToValues(barGroups.length, barGroup.index, barColor)
+                      if (config.legend.colorCode) _barColor = assignColorsToValues(barGroup.index, barColor)
                       if (isTwoToneLollipopColor) {
                         _barColor = getLollipopStemColor(barColor)
                       }
@@ -320,8 +312,7 @@ const BarChartVertical = () => {
                     if (isTwoToneLollipopColor) {
                       _barColor = getLollipopStemColor(barColor)
                     }
-                    if (config.legend.colorCode)
-                      _barColor = assignColorsToValues(barGroups.length, barGroup.index, barColor)
+                    if (config.legend.colorCode) _barColor = assignColorsToValues(barGroup.index, barColor)
 
                     // if we're highlighting a bar make it invisible since it gets a border
                     if (isHighlightedBar) _barColor = 'transparent'
@@ -339,6 +330,15 @@ const BarChartVertical = () => {
                     allowNonSeriesFieldMatch: !config.series || config.series.length <= 1
                   })
                   const baseBackground = getBarBackgroundColor(colorScale(config.runtime.seriesLabels[bar.key]))
+                  const portionPatternRenderData = getPortionPatternRenderData({
+                    config,
+                    orientation: 'vertical',
+                    bounds: { x: barX, y: barY, width: barWidth, height: barHeight },
+                    patterns: config.legend?.patterns,
+                    datum,
+                    seriesKey: bar.key,
+                    totalValue: bar.value
+                  })
 
                   // Confidence Interval Variables
                   const tickWidth = 5
@@ -419,6 +419,19 @@ const BarChartVertical = () => {
                             }
                           })}
 
+                        {portionPatternRenderData && (
+                          <BarPortionPatternOverlay
+                            config={config}
+                            index={newIndex}
+                            renderData={portionPatternRenderData}
+                            transformOrigin={`0 ${barY + barHeight}px`}
+                            style={{
+                              opacity: transparentBar ? 0.2 : 1,
+                              display: displayBar ? 'block' : 'none'
+                            }}
+                          />
+                        )}
+
                         {(absentDataLabel || isSuppressed) && (
                           <rect
                             x={barX}
@@ -551,8 +564,6 @@ const BarChartVertical = () => {
             ))
           }}
         </BarGroup>
-
-        <Regions xScale={xScale} yMax={yMax} barWidth={barWidth} totalBarsInGroup={totalBarsInGroup} xMax={xMax} />
       </Group>
     )
   )

package/src/components/BarChart/components/PortionPatternOverlay.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+
+import createBarElement from '@cdc/core/components/createBarElement'
+
+import { type ChartConfig } from '../../../types/ChartConfig'
+import { type PortionPatternRenderData } from '../helpers/portionPattern'
+
+type PortionPatternBoundaryProps = {
+  renderData: PortionPatternRenderData
+  brush?: boolean
+  style?: React.CSSProperties
+}
+
+type BarPortionPatternOverlayProps = PortionPatternBoundaryProps & {
+  config: ChartConfig
+  index: number
+  transformOrigin: string
+}
+
+export const PortionPatternBoundary = ({ renderData, brush = false, style }: PortionPatternBoundaryProps) => {
+  if (!renderData.patternColor || !renderData.boundaryGeometry) return null
+
+  return (
+    <line
+      className={`pattern-overlay__boundary${brush ? ' pattern-overlay__boundary--brush' : ''}`}
+      {...renderData.boundaryGeometry}
+      stroke={renderData.patternColor}
+      strokeWidth={0.75}
+      vectorEffect='non-scaling-stroke'
+      pointerEvents='none'
+      aria-hidden='true'
+      style={style}
+    />
+  )
+}
+
+export const BarPortionPatternOverlay = ({
+  config,
+  index,
+  renderData,
+  transformOrigin,
+  style
+}: BarPortionPatternOverlayProps) => (
+  <>
+    {createBarElement({
+      config,
+      index: renderData.placement === 'end' ? index : undefined,
+      className: 'pattern-overlay pattern-overlay--portion',
+      background: renderData.patternUrl,
+      borderColor: 'transparent',
+      borderWidth: '0px',
+      ...renderData.geometry,
+      styleOverrides: {
+        transformOrigin,
+        ...style,
+        pointerEvents: 'none'
+      }
+    })}
+    <PortionPatternBoundary renderData={renderData} style={style} />
+  </>
+)

package/src/components/BarChart/components/context.tsx

@@ -14,6 +14,12 @@ export type BarChartContextValues = {
     assignColorsToValues: Function
     barBorderWidth: number
     getAdditionalColumn: Function
+    formatTooltipValue: (
+      seriesKey: string,
+      xAxisValue: unknown,
+      displayValue: string | number,
+      rowIndex?: number
+    ) => string | number
     getHighlightedBarByValue: Function
     getHighlightedBarColorByValue: Function
     lollipopBarWidth: number

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

@@ -1,9 +1,5 @@
 import { getChartPatternId } from '../../../helpers/getChartPatternId'
-
-type LegendPattern = {
-  dataKey?: string
-  dataValue?: string | number
-}
+import { type LegendPattern } from '../../../types/ChartConfig'
 
 type SeriesLabels = Record<string, string> | undefined
 
@@ -64,6 +60,7 @@ export const getPatternUrl = ({
   for (const patternKey in patterns) {
     if (!Object.prototype.hasOwnProperty.call(patterns, patternKey)) continue
     const pattern = patterns[patternKey]
+    if (pattern.application === 'portion') continue
     const dataKey = normalizeString(pattern.dataKey)
 
     if (!hasPatternValue(pattern.dataValue)) {

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

@@ -125,6 +125,14 @@ export const addMinimumBarHeights = barStacks => {
     const segmentsNeedingAdjustment = segments.filter(segment => segment.height > 0 && segment.height < MIN_BAR_HEIGHT)
     const segmentsToShrink = segments.filter(segment => segment.height > MIN_BAR_HEIGHT)
 
+    if (segments.length === 1 && segmentsNeedingAdjustment.length === 1) {
+      const segment = segmentsNeedingAdjustment[0]
+      const bottom = segment.y + segment.height
+      segment.height = MIN_BAR_HEIGHT
+      segment.y = bottom - MIN_BAR_HEIGHT
+      return
+    }
+
     if (segmentsNeedingAdjustment.length > 0 && segmentsToShrink.length > 0) {
       segmentsNeedingAdjustment.forEach(smallSegment => {
         const heightToAdd = MIN_BAR_HEIGHT - smallSegment.height

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

@@ -0,0 +1,243 @@
+import { type Column } from '@cdc/core/types/Column'
+
+import { getChartPatternId } from '../../../helpers/getChartPatternId'
+import { type ChartConfig, type LegendPattern } from '../../../types/ChartConfig'
+
+type PortionPatternSupportConfig = Pick<
+  ChartConfig,
+  'visualizationType' | 'visualizationSubType' | 'isLollipopChart' | 'yAxis'
+>
+
+export type PortionPatternOverlay = {
+  patternUrl: string
+  ratio: number
+  placement: 'start' | 'end'
+  patternColor?: string
+}
+
+export type PortionPatternGeometry = {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export type PortionPatternBoundaryGeometry = {
+  x1: number
+  y1: number
+  x2: number
+  y2: number
+}
+
+export type PortionPatternRenderData = PortionPatternOverlay & {
+  geometry: PortionPatternGeometry
+  boundaryGeometry: PortionPatternBoundaryGeometry | null
+}
+
+type GetPortionPatternOverlayArgs = {
+  patterns?: Record<string, LegendPattern>
+  datum: Record<string, any>
+  seriesKey: string
+  totalValue: unknown
+}
+
+type GetPortionPatternGeometryArgs = {
+  orientation: 'vertical' | 'horizontal'
+  bounds: PortionPatternGeometry
+  overlay: Pick<PortionPatternOverlay, 'ratio' | 'placement'>
+}
+
+type GetPortionPatternBoundaryGeometryArgs = {
+  orientation: 'vertical' | 'horizontal'
+  geometry: PortionPatternGeometry
+  overlay: Pick<PortionPatternOverlay, 'ratio' | 'placement'>
+}
+
+type GetPortionPatternRenderDataArgs = GetPortionPatternOverlayArgs & {
+  config: PortionPatternSupportConfig
+  orientation: 'vertical' | 'horizontal'
+  bounds: PortionPatternGeometry
+}
+
+export type ChartColumns = Record<string, Column>
+
+export const findColumnConfigKey = (columns: ChartColumns, columnName: string): string | undefined =>
+  Object.entries(columns).find(
+    ([columnKey, column]) => column?.name === columnName || (!column?.name && columnKey === columnName)
+  )?.[0]
+
+export const createPatternColumnConfig = (columnName: string): Column =>
+  ({
+    name: columnName,
+    label: columnName,
+    prefix: '',
+    suffix: '',
+    roundToPlace: 0,
+    commas: true,
+    dataTable: true,
+    tooltips: true
+  } as Column)
+
+export const ensurePatternColumnConfig = (columns: ChartColumns, columnName?: string): ChartColumns => {
+  if (!columnName || findColumnConfigKey(columns, columnName)) return columns
+
+  return {
+    ...columns,
+    [columnName]: createPatternColumnConfig(columnName)
+  }
+}
+
+export const removeUnusedPatternColumnConfig = ({
+  columns,
+  columnName,
+  patterns,
+  protectedColumnNames = []
+}: {
+  columns: ChartColumns
+  columnName?: string
+  patterns: Record<string, LegendPattern>
+  protectedColumnNames?: Array<string | undefined>
+}): ChartColumns => {
+  if (!columnName) return columns
+
+  const isStillUsedByPattern = Object.values(patterns).some(
+    pattern => pattern.application === 'portion' && pattern.patternValueKey === columnName
+  )
+
+  if (isStillUsedByPattern || protectedColumnNames.includes(columnName)) return columns
+
+  const columnConfigKey = findColumnConfigKey(columns, columnName)
+  if (!columnConfigKey) return columns
+
+  const nextColumns = { ...columns }
+  delete nextColumns[columnConfigKey]
+  return nextColumns
+}
+
+const normalizeString = (value: unknown): string => String(value ?? '').trim()
+
+const toPositiveFiniteNumber = (value: unknown): number | null => {
+  if (typeof value !== 'number' && typeof value !== 'string') return null
+  if (typeof value === 'string' && value.trim() === '') return null
+
+  const numericValue = Number(value)
+  return Number.isFinite(numericValue) && numericValue > 0 ? numericValue : null
+}
+
+export const isPortionPatternSupported = (config: PortionPatternSupportConfig): boolean =>
+  ['Bar', 'Combo'].includes(config.visualizationType) &&
+  config.visualizationSubType !== 'stacked' &&
+  !config.isLollipopChart &&
+  config.yAxis?.type !== 'logarithmic'
+
+/**
+ * Resolves the first configured portion pattern for a bar series. The first
+ * matching entry wins even when its row values are invalid, so manually
+ * authored duplicate targets remain deterministic.
+ */
+export const getPortionPatternOverlay = ({
+  patterns,
+  datum,
+  seriesKey,
+  totalValue
+}: GetPortionPatternOverlayArgs): PortionPatternOverlay | null => {
+  if (!patterns) return null
+
+  for (const patternKey in patterns) {
+    if (!Object.prototype.hasOwnProperty.call(patterns, patternKey)) continue
+
+    const pattern = patterns[patternKey]
+    if (pattern.application !== 'portion' || normalizeString(pattern.dataKey) !== seriesKey) continue
+
+    const total = toPositiveFiniteNumber(totalValue)
+    const portion = toPositiveFiniteNumber(datum?.[normalizeString(pattern.patternValueKey)])
+
+    if (total === null || portion === null || portion > total) return null
+
+    const patternColor = normalizeString(pattern.color)
+
+    return {
+      patternUrl: `url(#${getChartPatternId(patternKey)})`,
+      ratio: portion / total,
+      placement: pattern.placement === 'start' ? 'start' : 'end',
+      ...(patternColor ? { patternColor } : {})
+    }
+  }
+
+  return null
+}
+
+export const getPortionPatternGeometry = ({
+  orientation,
+  bounds,
+  overlay
+}: GetPortionPatternGeometryArgs): PortionPatternGeometry => {
+  const { x, y, width, height } = bounds
+
+  if (orientation === 'horizontal') {
+    const overlayWidth = width * overlay.ratio
+    return {
+      x: overlay.placement === 'end' ? x + width - overlayWidth : x,
+      y,
+      width: overlayWidth,
+      height
+    }
+  }
+
+  const overlayHeight = height * overlay.ratio
+  return {
+    x,
+    y: overlay.placement === 'start' ? y + height - overlayHeight : y,
+    width,
+    height: overlayHeight
+  }
+}
+
+export const getPortionPatternBoundaryGeometry = ({
+  orientation,
+  geometry,
+  overlay
+}: GetPortionPatternBoundaryGeometryArgs): PortionPatternBoundaryGeometry | null => {
+  if (overlay.ratio >= 1) return null
+
+  if (orientation === 'horizontal') {
+    const boundaryX = overlay.placement === 'end' ? geometry.x : geometry.x + geometry.width
+    return {
+      x1: boundaryX,
+      y1: geometry.y,
+      x2: boundaryX,
+      y2: geometry.y + geometry.height
+    }
+  }
+
+  const boundaryY = overlay.placement === 'end' ? geometry.y + geometry.height : geometry.y
+  return {
+    x1: geometry.x,
+    y1: boundaryY,
+    x2: geometry.x + geometry.width,
+    y2: boundaryY
+  }
+}
+
+export const getPortionPatternRenderData = ({
+  config,
+  orientation,
+  bounds,
+  patterns,
+  datum,
+  seriesKey,
+  totalValue
+}: GetPortionPatternRenderDataArgs): PortionPatternRenderData | null => {
+  if (!isPortionPatternSupported(config)) return null
+
+  const overlay = getPortionPatternOverlay({ patterns, datum, seriesKey, totalValue })
+  if (!overlay) return null
+
+  const geometry = getPortionPatternGeometry({ orientation, bounds, overlay })
+
+  return {
+    ...overlay,
+    geometry,
+    boundaryGeometry: getPortionPatternBoundaryGeometry({ orientation, geometry, overlay })
+  }
+}

package/src/components/BarChart/helpers/tests/addMinimumBarHeights.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest'
+import { addMinimumBarHeights } from '..'
+
+const createSegment = ({ key, height, y, value }: { key: string; height: number; y: number; value: unknown }) => ({
+  key,
+  height,
+  y,
+  bar: {
+    data: {
+      [key]: value
+    }
+  }
+})
+
+describe('addMinimumBarHeights', () => {
+  it('gives an isolated tiny positive segment a minimum visible height while preserving its baseline', () => {
+    const barStacks = [
+      {
+        bars: [createSegment({ key: 'Tiny', height: 0.02, y: 99.98, value: 0.005 })]
+      }
+    ]
+
+    addMinimumBarHeights(barStacks)
+
+    expect(barStacks[0].bars[0].height).toBe(3)
+    expect(barStacks[0].bars[0].y).toBeCloseTo(97)
+    expect(barStacks[0].bars[0].y + barStacks[0].bars[0].height).toBeCloseTo(100)
+  })
+
+  it('leaves exact zero segments at zero height', () => {
+    const barStacks = [
+      {
+        bars: [createSegment({ key: 'Zero', height: 0, y: 100, value: 0 })]
+      }
+    ]
+
+    addMinimumBarHeights(barStacks)
+
+    expect(barStacks[0].bars[0].height).toBe(0)
+    expect(barStacks[0].bars[0].y).toBe(100)
+  })
+})

package/src/components/BarChart/helpers/tests/getPatternUrl.test.ts

@@ -131,4 +131,17 @@ describe('getPatternUrl', () => {
     expect(idA.startsWith('chart-pattern-A-B-')).toBe(true)
     expect(idB.startsWith('chart-pattern-A-B-')).toBe(true)
   })
+
+  it('does not treat portion patterns as exact-value patterns', () => {
+    expect(
+      getPatternUrl({
+        patterns: {
+          Pattern1: { application: 'portion', dataKey: 'y1', dataValue: 100, patternValueKey: 'portion' }
+        },
+        datum: { y1: 100, portion: 25 },
+        seriesKey: 'y1',
+        seriesValue: 100
+      })
+    ).toBeNull()
+  })
 })