@cdc/chart 4.26.6 → 4.26.10

package/src/components/Annotations/tests/AnnotationDropdown.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import ConfigContext from '../../../ConfigContext'
+import AnnotationDropdown from '../components/AnnotationDropdown'
+
+vi.mock('@cdc/core/components/ui/Icon', () => ({
+  default: ({ display }: { display: string }) => <span data-icon={display} />
+}))
+
+describe('AnnotationDropdown', () => {
+  it('uses the shared toggle treatment and joins the expanded panel to its header', () => {
+    const annotation = { text: 'Important annotation' }
+    const context = {
+      config: {
+        annotations: [annotation],
+        general: {
+          annotationDropdownText: '',
+          mobileAnnotationDisplay: 'symbol',
+          showAnnotationDropdown: true
+        },
+        table: { height: 120, limitHeight: true }
+      },
+      currentViewport: 'lg',
+      visibleAnnotations: [annotation]
+    }
+
+    render(
+      <ConfigContext.Provider value={context as any}>
+        <AnnotationDropdown />
+      </ConfigContext.Provider>
+    )
+
+    const toggle = screen.getByRole('button', { name: 'Annotations' })
+    const section = toggle.closest('section')
+
+    expect(toggle).toHaveClass('data-table-heading', 'data-table-heading--toggle', 'annotation__dropdown-list')
+    expect(toggle).toHaveAttribute('aria-expanded', 'false')
+    expect(section).not.toHaveClass('my-4')
+    expect(section).not.toHaveClass('mt-4')
+    expect(section).not.toHaveClass('mb-4')
+
+    fireEvent.click(toggle)
+
+    const panel = section?.querySelector('.annotation-dropdown__panel') as HTMLElement
+    expect(toggle).toHaveAttribute('aria-expanded', 'true')
+    expect(toggle.nextElementSibling).toBe(panel)
+    expect(panel).toHaveStyle({ maxHeight: '120px', overflowY: 'auto' })
+  })
+})

package/src/components/Annotations/tests/resolveAnnotationLayout.test.ts

@@ -0,0 +1,203 @@
+import { describe, expect, it } from 'vitest'
+import {
+  getAnnotationAttachment,
+  getAnnotationLabelRect,
+  getFacingAnnotationSide,
+  getPreferredAnnotationSide,
+  MIN_ANNOTATION_LABEL_WIDTH_EM,
+  MIN_EVENT_LINE_LABEL_WIDTH_EM,
+  resolveAnnotationLayout,
+  resolveAnnotationRectangleDrag
+} from '../helpers/resolveAnnotationLayout'
+
+const base = {
+  endpointX: 200,
+  endpointY: 150,
+  dx: 100,
+  dy: 10,
+  labelWidth: 120,
+  labelHeight: 40,
+  plotWidth: 400,
+  plotHeight: 300,
+  fontSize: 16,
+  labelPosition: 'auto' as const
+}
+
+describe('resolveAnnotationLayout', () => {
+  it.each([
+    [100, 10, 'right'],
+    [-100, 10, 'left'],
+    [10, -100, 'above'],
+    [10, 100, 'below']
+  ] as const)('derives %s/%s as the %s preferred side', (dx, dy, side) => {
+    expect(getPreferredAnnotationSide(dx, dy)).toBe(side)
+    expect(resolveAnnotationLayout({ ...base, dx, dy }).side).toBe(side)
+  })
+
+  it('slides parallel to the preferred side without changing sides', () => {
+    const result = resolveAnnotationLayout({ ...base, endpointY: 5 })
+
+    expect(result.side).toBe('right')
+    expect(result.y).toBe(20)
+    expect(result.x).toBe(200)
+  })
+
+  it('keeps a short label on its preferred side near an edge when its measured width fits', () => {
+    const result = resolveAnnotationLayout({ ...base, endpointX: 320, labelWidth: 70 })
+
+    expect(result.side).toBe('right')
+    expect(result.constrainedWidth).toBeUndefined()
+  })
+
+  it('constrains a long label to the 6em minimum without changing sides', () => {
+    const result = resolveAnnotationLayout({ ...base, endpointX: 100, labelWidth: 180 })
+
+    expect(result.side).toBe('right')
+    expect(result.width).toBe(180)
+
+    const constrained = resolveAnnotationLayout({ ...base, endpointX: 304, labelWidth: 180 })
+    expect(constrained.side).toBe('right')
+    expect(constrained.width).toBe(96)
+    expect(constrained.constrainedWidth).toBe(96)
+  })
+
+  it('accepts the 4em event-line minimum', () => {
+    const result = resolveAnnotationLayout({
+      ...base,
+      endpointX: 336,
+      labelWidth: 180,
+      minWidthEm: MIN_EVENT_LINE_LABEL_WIDTH_EM,
+      labelPosition: 'right'
+    })
+
+    expect(result.width).toBe(64)
+    expect(result.constrainedWidth).toBe(64)
+  })
+
+  it('keeps a persisted automatic side even when the scaled offsets favor another side', () => {
+    const result = resolveAnnotationLayout({
+      ...base,
+      endpointX: 350,
+      endpointY: 30,
+      dx: 10,
+      dy: -200,
+      autoSide: 'right',
+      labelWidth: 140,
+      labelHeight: 60
+    })
+
+    expect(result.side).toBe('right')
+  })
+
+  it('keeps the preferred side for unavoidable overflow', () => {
+    const result = resolveAnnotationLayout({
+      ...base,
+      endpointX: 390,
+      endpointY: 150,
+      labelWidth: 240,
+      labelHeight: 310
+    })
+
+    expect(result.side).toBe('right')
+    expect(result.width).toBe(MIN_ANNOTATION_LABEL_WIDTH_EM * base.fontSize)
+    expect(result.constrainedWidth).toBe(MIN_ANNOTATION_LABEL_WIDTH_EM * base.fontSize)
+  })
+
+  it.each([
+    ['left', -100, 150, 96, 150],
+    ['right', 500, 150, 304, 150],
+    ['above', 200, -100, 200, 40],
+    ['below', 200, 500, 200, 260]
+  ] as const)('clamps %s placement to the same-side boundary', (autoSide, endpointX, endpointY, x, y) => {
+    const result = resolveAnnotationLayout({ ...base, endpointX, endpointY, autoSide })
+
+    expect(result.side).toBe(autoSide)
+    expect(result.x).toBe(x)
+    expect(result.y).toBe(y)
+  })
+
+  it.each(['left', 'right', 'above', 'below'] as const)(
+    'keeps explicit %s placement even when it cannot fit',
+    labelPosition => {
+      const result = resolveAnnotationLayout({
+        ...base,
+        endpointX: 5,
+        endpointY: 5,
+        labelWidth: 300,
+        labelHeight: 200,
+        labelPosition
+      })
+
+      expect(result.side).toBe(labelPosition)
+    }
+  )
+})
+
+describe('rectangle-based annotation dragging', () => {
+  const rect = { left: 100, top: 60, width: 120, height: 40 }
+
+  it.each(['left', 'right', 'above', 'below'] as const)(
+    'reconstructs the same rectangle from its %s attachment',
+    side => {
+      const attachment = getAnnotationAttachment(rect, side)
+
+      expect(getAnnotationLabelRect(attachment.x, attachment.y, rect.width, rect.height, side)).toEqual(rect)
+    }
+  )
+
+  it.each([
+    [20, 80, 'right'],
+    [300, 80, 'left'],
+    [160, 0, 'below'],
+    [160, 150, 'above']
+  ] as const)('chooses the edge facing a subject at %s/%s', (subjectX, subjectY, side) => {
+    expect(getFacingAnnotationSide(subjectX, subjectY, rect)).toBe(side)
+  })
+
+  it('normalizes distance by the rectangle dimensions when choosing the facing edge', () => {
+    const wideRect = { left: 0, top: 80, width: 200, height: 40 }
+
+    expect(getFacingAnnotationSide(160, 140, wideRect)).toBe('above')
+  })
+
+  it('changes only the attachment when the selected side changes', () => {
+    const right = resolveAnnotationRectangleDrag({
+      rect,
+      subjectX: 20,
+      subjectY: 80,
+      plotWidth: 400,
+      plotHeight: 300,
+      side: 'right'
+    })
+    const below = resolveAnnotationRectangleDrag({
+      rect,
+      subjectX: 160,
+      subjectY: 0,
+      plotWidth: 400,
+      plotHeight: 300,
+      side: 'below'
+    })
+
+    expect(right.rect).toEqual(rect)
+    expect(below.rect).toEqual(rect)
+    expect({ x: right.layout.x, y: right.layout.y }).toEqual({ x: 100, y: 80 })
+    expect({ x: below.layout.x, y: below.layout.y }).toEqual({ x: 160, y: 60 })
+  })
+
+  it('clamps the rectangle before deriving the persisted attachment', () => {
+    const result = resolveAnnotationRectangleDrag({
+      rect: { ...rect, left: 350, top: -20 },
+      subjectX: 200,
+      subjectY: 150,
+      plotWidth: 400,
+      plotHeight: 300,
+      side: 'left'
+    })
+
+    expect(result.rect).toEqual({ ...rect, left: 280, top: 0 })
+    expect(result.layout.x).toBe(400)
+    expect(result.layout.y).toBe(20)
+    expect(result.dx).toBe(200)
+    expect(result.dy).toBe(-130)
+  })
+})

package/src/components/Axis/BottomAxis.tsx

@@ -98,7 +98,7 @@ const BottomAxis: React.FC<BottomAxisProps> = ({
         config.runtime.xAxis.manual
           ? getTickValues(xAxisDataMapped, xScale, isDateTime ? xTickCount : getManualStep(), config)
           : config.runtime.xAxis.type === 'date'
-          ? xAxisDataMapped
+          ? sortedUniqueXAxisData
           : // For date-time with small datasets (e.g., brush-filtered), use explicit tick values
           // to ensure each data point can have a tick. Otherwise, visx may generate too few.
           // Use uniqueXAxisDataMapped to handle cases where multiple series share x-axis values

package/src/components/Axis/Categorical.Axis.tsx

@@ -9,7 +9,7 @@ import createBarElement from '@cdc/core/components/createBarElement'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
 
-const CategoricalYAxis = ({ yScale, yMax, leftSize, xMax }) => {
+const CategoricalYAxis = ({ yScale, yMax, leftSize, xMax, categories }) => {
   const { config } = useContext(ConfigContext)
 
   const { orientation } = config
@@ -22,7 +22,7 @@ const CategoricalYAxis = ({ yScale, yMax, leftSize, xMax }) => {
     }
   }
 
-  const categories = config.yAxis?.categories
+  if (!categories?.length) return null
 
   // Get max from the yScale domain
   const max = yScale.domain()[1]
@@ -146,7 +146,7 @@ const CategoricalYAxis = ({ yScale, yMax, leftSize, xMax }) => {
                     {/* White background spacing between stackes */}
                     {!isLastIndex && <rect x={bar.x} y={bar.y} width={bar.width} height={1} fill={'#fff'}></rect>}
                     {/* Right side Axis line */}
-                    <rect x={bar.x + bar.width} y={0} width={1} height={yMax} fill={'#000'}></rect>
+                    {!config.yAxis.hideAxis && <rect x={bar.x + bar.width} y={0} width={1} height={yMax} fill='#000' />}
                   </Group>
                 </Group>
               )

package/src/components/Axis/RightAxis.tsx

@@ -6,6 +6,7 @@ import { Text } from '@visx/text'
 import { ScaleLinear } from 'd3-scale'
 
 import ConfigContext from '../../ConfigContext'
+import { DEFAULT_TICK_LENGTH, TICK_LABEL_MARGIN_RIGHT } from './axis.constants'
 
 // Constants
 const HORIZONTAL_TICK_OFFSET_ADJUSTMENT = 5
@@ -15,6 +16,7 @@ type RightAxisProps = {
   yMax: number
   xMax: number
   yAxisWidth: number
+  rightAxisWidth: number
   tickValues?: number[]
   tickLabelFontSize: number
   axisLabelFontSize: number
@@ -30,12 +32,14 @@ export const RightAxis: React.FC<RightAxisProps> = ({
   yMax,
   xMax,
   yAxisWidth,
+  rightAxisWidth,
   tickValues,
   tickLabelFontSize,
   axisLabelFontSize
 }) => {
   const { config, formatNumber } = useContext(ConfigContext)
   const { runtime } = config
+  const showSideTitle = config.yAxis.rightTitlePlacement !== 'top'
 
   const horizontalTickOffset = (ticks: any[]) =>
     yMax / ticks.length / 2 - (yMax / ticks.length) * (1 - config.barThickness) + HORIZONTAL_TICK_OFFSET_ADJUSTMENT
@@ -44,8 +48,9 @@ export const RightAxis: React.FC<RightAxisProps> = ({
     <VisxAxisRight
       scale={yScaleRight}
       left={yAxisWidth + xMax}
-      label={config.yAxis.rightLabel}
+      label={runtime.yAxis.rightLabel ?? config.yAxis.rightLabel}
       tickFormat={tick => formatNumber(tick, 'right')}
+      tickLength={DEFAULT_TICK_LENGTH}
       numTicks={runtime.yAxis.rightNumTicks || undefined}
       {...(tickValues ? { tickValues } : {})}
       labelOffset={45}
@@ -55,6 +60,7 @@ export const RightAxis: React.FC<RightAxisProps> = ({
           config.orientation === 'horizontal'
             ? (props.axisToPoint.y - props.axisFromPoint.y) / 2
             : (props.axisFromPoint.y - props.axisToPoint.y) / 2
+        const sideTitleX = Math.max(0, rightAxisWidth - axisLabelFontSize)
 
         return (
           <Group className='right-axis'>
@@ -75,7 +81,7 @@ export const RightAxis: React.FC<RightAxisProps> = ({
 
                 {!config.yAxis.rightHideLabel && (
                   <Text
-                    x={tick.to.x}
+                    x={tick.to.x + TICK_LABEL_MARGIN_RIGHT}
                     y={tick.to.y + (runtime.horizontal ? horizontalTickOffset(props.ticks) : 0)}
                     verticalAnchor={runtime.horizontal ? 'start' : 'middle'}
                     textAnchor='start'
@@ -90,17 +96,19 @@ export const RightAxis: React.FC<RightAxisProps> = ({
 
             {!config.yAxis.rightHideAxis && <Line from={props.axisFromPoint} to={props.axisToPoint} stroke='#333' />}
 
-            <Text
-              className='y-label'
-              textAnchor='middle'
-              verticalAnchor='start'
-              transform={`translate(${config.yAxis.rightLabelOffsetSize || 0}, ${axisCenter}) rotate(-90)`}
-              fontWeight='bold'
-              fill={config.yAxis.rightAxisLabelColor}
-              fontSize={axisLabelFontSize}
-            >
-              {props.label}
-            </Text>
+            {showSideTitle && (
+              <Text
+                className='y-label'
+                textAnchor='middle'
+                verticalAnchor='start'
+                transform={`translate(${sideTitleX}, ${axisCenter}) rotate(-90)`}
+                fontWeight='bold'
+                fill={config.yAxis.rightAxisLabelColor}
+                fontSize={axisLabelFontSize}
+              >
+                {props.label}
+              </Text>
+            )}
           </Group>
         )
       }}

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

@@ -17,16 +17,18 @@ import createBarElement from '@cdc/core/components/createBarElement'
 import { getBarConfig, testZeroValue, getLollipopStemColor, getLollipopHeadColor } from '../helpers'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 import isNumber from '@cdc/core/helpers/isNumber'
+import { getSeriesValueLabel } from '@cdc/core/helpers/getSeriesName'
 
 // Local context and types
 import BarChartContext, { BarChartContextValues } from './context'
 import { ChartContext } from '../../../types/ChartContext'
-import _ from 'lodash'
 import { getBarData } from '../helpers/getBarData'
 import { getHorizontalBarHeights } from '../helpers/getBarHeights'
 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 BarChartHorizontal = () => {
   const { xScale, yScale, yMax, seriesScale, barChart } = useContext<BarChartContextValues>(BarChartContext)
@@ -42,6 +44,7 @@ const BarChartHorizontal = () => {
     getHighlightedBarColorByValue,
     getHighlightedBarByValue,
     getAdditionalColumn,
+    formatTooltipValue,
     hoveredBar,
     onMouseLeaveBar,
     onMouseOverBar
@@ -49,7 +52,6 @@ const BarChartHorizontal = () => {
 
   const {
     transformedData: data,
-    tableData,
     colorScale,
     seriesHighlight,
     config,
@@ -76,7 +78,7 @@ const BarChartHorizontal = () => {
       <defs>
         {Object.entries(config.legend.patterns).map(([key, pattern]) => {
           const patternId = getChartPatternId(key)
-          const size = pattern.patternSize || 8
+          const size = pattern.patternSize || 10
 
           switch (pattern.shape) {
             case 'circles':
@@ -121,8 +123,9 @@ const BarChartHorizontal = () => {
                   id={patternId}
                   height={size}
                   width={size}
-                  fill={pattern.color}
-                  strokeWidth={0.25}
+                  fill='transparent'
+                  stroke={pattern.color}
+                  strokeWidth={0.75}
                 />
               )
             default:
@@ -142,7 +145,7 @@ const BarChartHorizontal = () => {
       <Group>
         {renderPatternDefs()}
         <BarGroup
-          data={config.preliminaryData?.some(pd => pd.value && pd.type === 'suppression') ? tableData : _data}
+          data={_data}
           keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys}
           height={yMax}
           x0={d => d[config.runtime.originalXAxis.dataKey]}
@@ -243,7 +246,8 @@ const BarChartHorizontal = () => {
                     ? `${config.runtime.yAxis.label}: ${xAxisValue}`
                     : xAxisValue
                   const additionalColTooltip = getAdditionalColumn(bar.key, hoveredBar)
-                  const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
+                  const tooltipValue = formatTooltipValue(bar.key, dataValue, yAxisValue, barGroup.index)
+                  const tooltipBody = `${getSeriesValueLabel(bar.key, config)}: ${tooltipValue}`
                   const tooltip = buildSeriesTooltipListHtml({
                     config,
                     colorScale,
@@ -262,7 +266,7 @@ const BarChartHorizontal = () => {
                       : colorScale(bar.key)
                   const hasDynamicCategory = config.series.find(s => s.dynamicCategory)
                   if (!hasDynamicCategory && config.legend.colorCode) {
-                    barColor = assignColorsToValues(barGroups.length, barGroup.index, barColor) // Color code by category
+                    barColor = assignColorsToValues(barGroup.index, barColor) // Color code by category
                   }
                   const isRegularLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'regular'
                   const isTwoToneLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'two-tone'
@@ -340,6 +344,20 @@ const BarChartHorizontal = () => {
                     allowNonSeriesFieldMatch: !config.series || config.series.length <= 1
                   })
                   const baseBackground = getBarBackgroundColor()
+                  const portionPatternRenderData = getPortionPatternRenderData({
+                    config,
+                    orientation: 'horizontal',
+                    bounds: {
+                      x: barX,
+                      y: barHeight * bar.index,
+                      width: barWidth,
+                      height: numbericBarHeight
+                    },
+                    patterns: config.legend?.patterns,
+                    datum,
+                    seriesKey: bar.key,
+                    totalValue: bar.value
+                  })
 
                   return (
                     <Group display={hideGroup} key={`${barGroup.index}--${index}`}>
@@ -401,6 +419,19 @@ const BarChartHorizontal = () => {
                             }
                           })}
 
+                        {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}

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

@@ -13,6 +13,7 @@ import BarChartContext, { type BarChartContextValues } from './context'
 import { type ChartContext } from '../../../types/ChartContext'
 
 import createBarElement from '@cdc/core/components/createBarElement'
+import { getSeriesValueLabel } from '@cdc/core/helpers/getSeriesName'
 import { getHorizontalBarHeights } from '../helpers/getBarHeights'
 import { getPatternUrl as getPatternUrlForBar } from '../helpers/getPatternUrl'
 import { getChartPatternId } from '../../../helpers/getChartPatternId'
@@ -38,6 +39,7 @@ const BarChartStackedHorizontal = () => {
     barBorderWidth,
     displayNumbersOnBar,
     getAdditionalColumn,
+    formatTooltipValue,
     hoveredBar,
     isHorizontal,
     isLabelBelowBar,
@@ -59,7 +61,7 @@ const BarChartStackedHorizontal = () => {
       <defs>
         {Object.entries(config.legend.patterns).map(([key, pattern]) => {
           const patternId = getChartPatternId(key)
-          const size = pattern.patternSize || 8
+          const size = pattern.patternSize || 10
 
           switch (pattern.shape) {
             case 'circles':
@@ -104,8 +106,9 @@ const BarChartStackedHorizontal = () => {
                   id={patternId}
                   height={size}
                   width={size}
-                  fill={pattern.color}
-                  strokeWidth={0.25}
+                  fill='transparent'
+                  stroke={pattern.color}
+                  strokeWidth={0.75}
                 />
               )
             default:
@@ -161,7 +164,13 @@ const BarChartStackedHorizontal = () => {
                   : yAxisValue
                 const textWidth = getTextWidth(xAxisValue, `normal ${labelFontSize}px sans-serif`)
                 const additionalColTooltip = getAdditionalColumn(bar.key, hoveredBar)
-                const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${xAxisValue}`
+                const tooltipValue = formatTooltipValue(
+                  bar.key,
+                  data[bar.index][config.runtime.originalXAxis.dataKey],
+                  xAxisValue,
+                  bar.index
+                )
+                const tooltipBody = `${getSeriesValueLabel(bar.key, config)}: ${tooltipValue}`
                 const tooltip = buildSeriesTooltipListHtml({
                   config,
                   colorScale,

package/src/components/BarChart/components/BarChart.StackedVertical.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest'
+import { getStackedVerticalBarThickness } from './BarChart.StackedVertical'
+
+describe('getStackedVerticalBarThickness', () => {
+  it.each(['date', 'date-time'])('does not apply bar thickness twice for a %s axis', () => {
+    expect(
+      getStackedVerticalBarThickness({
+        isDateAxisType: true,
+        dateScaleWidth: 40,
+        xMax: 400,
+        barCount: 4,
+        barThickness: 0.8
+      })
+    ).toBe(40)
+  })
+
+  it('applies bar thickness to categorical bars', () => {
+    expect(
+      getStackedVerticalBarThickness({
+        isDateAxisType: false,
+        dateScaleWidth: 40,
+        xMax: 400,
+        barCount: 4,
+        barThickness: 0.8
+      })
+    ).toBe(80)
+  })
+})