@cdc/chart 4.26.4 → 4.26.5

package/src/components/LinearChart/tests/LinearChart.test.tsx

@@ -72,6 +72,21 @@ const getLeftAxisLabelTransforms = container =>
     .map(label => label.getAttribute('transform'))
     .filter(Boolean)
 
+const sidePlacementYAxis = {
+  hideAxis: false,
+  hideLabel: false,
+  hideTicks: false,
+  size: '50',
+  gridLines: true,
+  label: 'Y-Axis',
+  titlePlacement: 'side',
+  tickRotation: 0,
+  anchors: [],
+  axisPadding: 0,
+  labelPlacement: 'On Date/Category Axis',
+  rightAxisSize: 0
+}
+
 describe('LinearChart', () => {
   describe('rendering', () => {
     it('renders without crashing', () => {
@@ -238,26 +253,103 @@ describe('LinearChart', () => {
       expect(leftAxis).toBeTruthy()
     })
 
+    it('does not render the side y-axis title inside the svg when titlePlacement is top', () => {
+      const { container } = renderLinearChart()
+
+      expect(container.querySelector('.left-axis text.y-label')).toBeFalsy()
+    })
+
+    it('does not render the top y-axis title inside LinearChart when titlePlacement is top', () => {
+      const { container } = renderLinearChart()
+
+      expect(container.querySelector('.y-axis-top-title')).toBeFalsy()
+    })
+
+    it('renders the side y-axis title inside the svg when titlePlacement is side', () => {
+      const { container } = renderLinearChart({
+        yAxis: sidePlacementYAxis
+      })
+
+      expect(container.querySelector('.y-axis-top-title')).toBeFalsy()
+      expect(container.querySelector('.left-axis text.y-label')).toBeTruthy()
+    })
+
     it('renders bottom axis group', () => {
       const { container } = renderLinearChart()
       const bottomAxis = container.querySelector('.bottom-axis')
       expect(bottomAxis).toBeTruthy()
     })
 
+    it('uses vizViewport for x-axis viewport tick overrides', () => {
+      const data = [
+        { Date: '2024-01-01', Value: 1 },
+        { Date: '2024-02-01', Value: 2 },
+        { Date: '2024-03-01', Value: 3 },
+        { Date: '2024-04-01', Value: 4 },
+        { Date: '2024-05-01', Value: 5 },
+        { Date: '2024-06-01', Value: 6 }
+      ]
+
+      const { container } = renderLinearChart(
+        {
+          data,
+          preliminaryData: [],
+          series: [{ dataKey: 'Value', axis: 'Left' }],
+          xAxis: {
+            type: 'date',
+            dataKey: 'Date',
+            label: 'X-Axis',
+            hideAxis: false,
+            hideLabel: false,
+            hideTicks: false,
+            size: '50',
+            tickRotation: 0,
+            maxTickRotation: 90,
+            anchors: [],
+            axisPadding: 0,
+            dateParseFormat: '%Y-%m-%d',
+            dateDisplayFormat: '%b %Y'
+          },
+          runtime: {
+            xAxis: {
+              type: 'date',
+              dataKey: 'Date',
+              label: 'X-Axis',
+              numTicks: 6,
+              viewportNumTicks: { xxs: 2 }
+            },
+            yAxis: {
+              size: 50,
+              label: 'Y-Axis',
+              gridLines: true
+            },
+            originalXAxis: {
+              dataKey: 'Date'
+            },
+            series: [{ dataKey: 'Value', axis: 'Left' }],
+            seriesKeys: ['Value'],
+            seriesLabels: { Value: 'Value' },
+            seriesLabelsAll: ['Value'],
+            uniqueId: 'test-chart'
+          }
+        },
+        {
+          currentViewport: 'lg',
+          vizViewport: 'xxs',
+          colorScale: () => '#000',
+          transformedData: data,
+          tableData: data
+        }
+      )
+
+      expect(container.querySelectorAll('.bottom-axis .vx-axis-tick')).toHaveLength(2)
+    })
+
     it('hides Y axis when hideAxis is true', () => {
       const { container } = renderLinearChart({
         yAxis: {
-          hideAxis: true,
-          hideLabel: false,
-          hideTicks: false,
-          size: '50',
-          gridLines: true,
-          label: 'Y-Axis',
-          tickRotation: 0,
-          anchors: [],
-          axisPadding: 0,
-          labelPlacement: 'On Date/Category Axis',
-          rightAxisSize: 0
+          ...sidePlacementYAxis,
+          hideAxis: true
         }
       })
       // The axis line should be hidden, but grid lines may still render
@@ -288,34 +380,14 @@ describe('LinearChart', () => {
 
       const baseRender = renderLinearChart({
         yAxis: {
-          hideAxis: false,
-          hideLabel: false,
-          hideTicks: false,
-          size: '50',
-          gridLines: true,
-          label: 'Y-Axis',
-          tickRotation: 0,
-          anchors: [],
-          axisPadding: 0,
-          labelPlacement: 'On Date/Category Axis',
-          rightAxisSize: 0,
+          ...sidePlacementYAxis,
           labelOffset: 0
         },
         runtime: baseRuntime
       })
       const offsetRender = renderLinearChart({
         yAxis: {
-          hideAxis: false,
-          hideLabel: false,
-          hideTicks: false,
-          size: '50',
-          gridLines: true,
-          label: 'Y-Axis',
-          tickRotation: 0,
-          anchors: [],
-          axisPadding: 0,
-          labelPlacement: 'On Date/Category Axis',
-          rightAxisSize: 0,
+          ...sidePlacementYAxis,
           labelOffset: 240
         },
         runtime: {
@@ -372,6 +444,7 @@ describe('LinearChart', () => {
           axisPadding: 0,
           labelOffset: 0
         },
+        yAxis: sidePlacementYAxis,
         runtime: baseRuntime
       })
       const offsetRender = renderLinearChart({
@@ -390,6 +463,7 @@ describe('LinearChart', () => {
           axisPadding: 0,
           labelOffset: 240
         },
+        yAxis: sidePlacementYAxis,
         runtime: {
           ...baseRuntime,
           yAxis: {

package/src/components/LinearChart/tests/mockConfigContext.ts

@@ -34,6 +34,7 @@ export const createMockConfig = (overrides: Partial<ChartConfig> = {}): ChartCon
       size: '50',
       gridLines: true,
       label: 'Y-Axis',
+      titlePlacement: 'top',
       tickRotation: 0,
       anchors: [],
       axisPadding: 0,

package/src/components/LinearChart.tsx

@@ -36,6 +36,8 @@ import { isLegendWrapViewport, isMobileFontViewport } from '@cdc/core/helpers/vi
 import { calcInitialHeight } from '../helpers/sizeHelpers'
 import { calculateHorizontalBarCategoryLabelWidth } from '../helpers/calculateHorizontalBarCategoryLabelWidth'
 import { calculateLeftYAxisWidth } from '../helpers/calculateLeftYAxisWidth'
+import { getAxisLabelFontSize } from '../helpers/axisLabelFontSize'
+import { getYAxisAutoPaddingMode } from '../helpers/getYAxisAutoPaddingMode'
 
 // Hooks
 import useReduceData from '../hooks/useReduceData'
@@ -69,9 +71,6 @@ const DEFAULT_LEFT_Y_AXIS_WIDTH = 50
 // Font sizes
 const TICK_LABEL_FONT_SIZE = 16
 const TICK_LABEL_FONT_SIZE_SMALL = 13
-const AXIS_LABEL_FONT_SIZE = 18
-const AXIS_LABEL_FONT_SIZE_SMALL = 14
-
 // Label positioning constants
 const BELOW_BAR_TEXT_OFFSET = -6.5
 const LABEL_PADDING_OFFSET = 8
@@ -122,6 +121,9 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     transformedData: data,
   } = useContext(ConfigContext)
 
+  // SVG accessibility: title/desc pattern
+  const a11y = handleChartAriaLabels(config)
+
   // CONFIG
   // todo: start destructuring this file for conciseness
   const { visualizationType, orientation, xAxis, yAxis, runtime, legend, forestPlot, debugSvg } = config
@@ -129,9 +131,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const { inlineLabel } = config.yAxis
 
   // HOOKS  % STATES
-  // When brush is active, use tableData (full dataset) for min/max calculation
-  // so the y-axis shows the full range, but still use filtered data for rendering
-  const dataForMinMax = config.xAxis.brushActive && tableData && tableData.length > 0 ? tableData : data
+  const useBrushFullRange = config.xAxis.brushActive && !config.xAxis.brushDynamicYAxis
+  const dataForMinMax = useBrushFullRange && tableData && tableData.length > 0 ? tableData : data
   const { minValue, maxValue, existPositiveValue, isAllLine } = useReduceData(config, dataForMinMax)
 
   const { visSupportsSmallMultiples } = useEditorPermissions()
@@ -163,6 +164,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const xAxisLabelRefs = useRef([])
   const xAxisTitleRef = useRef(null)
   const tooltipRef = useRef(null)
+  const brushLayoutRef = useRef<{ yAxisWidth: number; xMax: number } | null>(null)
+  const brushLayoutDepsRef = useRef<{ parentWidth: number; tableData: any } | null>(null)
 
   const dataRef = useIntersectionObserver(triggerRef, {
     freezeOnceVisible: false
@@ -174,10 +177,9 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const isLogarithmicAxis = config.yAxis.type === 'logarithmic'
   const isForestPlot = visualizationType === 'Forest Plot'
   const isDateTime = config.xAxis.type === 'date-time'
-  const inlineLabelHasNoSpace = !inlineLabel?.includes(' ')
-  const needsYAxisAutoPadding = inlineLabel && !inlineLabelHasNoSpace
+  const yAxisAutoPaddingMode = getYAxisAutoPaddingMode(config)
   const tickLabelFontSize = isMobileFontViewport(vizViewport) ? TICK_LABEL_FONT_SIZE_SMALL : TICK_LABEL_FONT_SIZE
-  const axisLabelFontSize = isMobileFontViewport(vizViewport) ? AXIS_LABEL_FONT_SIZE_SMALL : AXIS_LABEL_FONT_SIZE
+  const axisLabelFontSize = getAxisLabelFontSize(vizViewport)
   const GET_TEXT_WIDTH_FONT = `normal ${tickLabelFontSize}px Nunito, sans-serif`
 
   // zero if not forest plot
@@ -185,11 +187,10 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
 
   // height before bottom axis
   const initialHeight = useMemo(
-    () =>
-      visualizationType === 'Warming Stripes' ? WARMING_STRIPES_HEIGHT : calcInitialHeight(config, currentViewport),
+    () => (visualizationType === 'Warming Stripes' ? WARMING_STRIPES_HEIGHT : calcInitialHeight(config, vizViewport)),
     [
       visualizationType,
-      currentViewport,
+      vizViewport,
       config.heights?.vertical,
       config.heights?.horizontal,
       config.heights?.mobileVertical,
@@ -263,6 +264,21 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   // Chart width calculation using the current y-axis width
   const xMax = parentWidth - yAxisWidth - (hasRightAxis ? config.yAxis.rightAxisSize : 0)
 
+  // Stabilize brush container dimensions when brushDynamicYAxis is enabled.
+  // Without this, y-axis rescaling on each brush change creates a feedback loop:
+  // brush drag → y-domain change → tick label width change → xMax shift → brush jumps.
+  // We freeze the brush coordinate system and only update on real layout changes.
+  const isDynamicBrushYAxis = config.xAxis.brushDynamicYAxis
+  const isFirstBrushLayout = !brushLayoutDepsRef.current
+  const viewportResized = brushLayoutDepsRef.current?.parentWidth !== parentWidth
+  const dataReloaded = brushLayoutDepsRef.current?.tableData !== tableData
+  if (!isDynamicBrushYAxis || isFirstBrushLayout || viewportResized || dataReloaded) {
+    brushLayoutRef.current = { yAxisWidth, xMax }
+    brushLayoutDepsRef.current = { parentWidth, tableData }
+  }
+  const stableBrushYAxisWidth = isDynamicBrushYAxis ? brushLayoutRef.current!.yAxisWidth : yAxisWidth
+  const stableBrushXMax = isDynamicBrushYAxis ? brushLayoutRef.current!.xMax : xMax
+
   const {
     xScale,
     yScale,
@@ -285,8 +301,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     xAxisDataMapped,
     yMax,
     xMax,
-    needsYAxisAutoPadding,
-    currentViewport
+    yAxisAutoPaddingMode,
+    currentViewport: vizViewport
   })
 
   // Consolidated tick formatters
@@ -324,10 +340,11 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     runtime.xAxis?.type
   ])
 
-  const horizontalYAxisLabelSpace = runtime.yAxis.label && !config.hideYAxisLabel ? 30 : 0
+  const horizontalYAxisLabelSpace =
+    runtime.yAxis.label && !config.hideYAxisLabel && config.yAxis.titlePlacement !== 'top' ? 30 : 0
 
   const [yTickCount, xTickCount] = ['yAxis', 'xAxis'].map(axis =>
-    countNumOfTicks({ axis, max, runtime, currentViewport, isHorizontal, data, config, min })
+    countNumOfTicks({ axis, max, runtime, currentViewport: vizViewport, isHorizontal, data, config, min })
   )
   const handleNumTicks = isForestPlot ? config.data.length : yTickCount
 
@@ -416,11 +433,11 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
 
   const getManualStep = useCallback(() => {
     let manualStep = config.xAxis.manualStep
-    if (config.xAxis.viewportStepCount && config.xAxis.viewportStepCount[currentViewport]) {
-      manualStep = config.xAxis.viewportStepCount[currentViewport]
+    if (config.xAxis.viewportStepCount && config.xAxis.viewportStepCount[vizViewport]) {
+      manualStep = config.xAxis.viewportStepCount[vizViewport]
     }
     return manualStep
-  }, [config.xAxis.manualStep, config.xAxis.viewportStepCount, currentViewport])
+  }, [config.xAxis.manualStep, config.xAxis.viewportStepCount, vizViewport])
 
   const smallMultiplesSync = useSmallMultipleSynchronization(xMax, yMax, yAxisWidth, getXValueFromCoordinate)
 
@@ -508,7 +525,6 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
 
     const isForestPlot = visualizationType === 'Forest Plot'
     const topLabelOnGridline = topYLabelRef.current && yAxis.labelsAboveGridlines
-
     // Heights to add
     const forestRowsHeight = isForestPlot ? config.data.length * forestPlot.rowHeight : 0
     const topLabelOnGridlineHeight = topLabelOnGridline ? topYLabelRef.current.getBBox().height : 0
@@ -605,7 +621,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
             debugSvg && 'debug'
           } ${isDraggingAnnotation && 'dragging-annotation'}`}
           role='img'
-          aria-label={handleChartAriaLabels(config)}
+          aria-label={a11y}
           style={{ overflow: 'visible' }}
           onMouseLeave={() => {
             setShowHoverLine(false)
@@ -754,18 +770,19 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           {/* we are handling regions in bar charts differently, so that we can calculate the bar group into the region space. */}
           {/* prettier-ignore */}
           {config.visualizationType !== 'Bar' && config.visualizationType !== 'Combo' && (
-            <Regions
-              xScale={xScale}
-              handleTooltipClick={handleTooltipClick}
-              handleTooltipMouseOff={handleTooltipMouseOff}
-              handleTooltipMouseOver={handleTooltipMouseOver}
-              showTooltip={showTooltip}
-              hideTooltip={hideTooltip}
-              tooltipData={tooltipData}
-              yMax={yMax}
-              xMax={xMax}
-              yAxisWidth={yAxisWidth}
-            />
+            <Group left={yAxisWidth}>
+              <Regions
+                xScale={xScale}
+                handleTooltipClick={handleTooltipClick}
+                handleTooltipMouseOff={handleTooltipMouseOff}
+                handleTooltipMouseOver={handleTooltipMouseOver}
+                showTooltip={showTooltip}
+                hideTooltip={hideTooltip}
+                tooltipData={tooltipData}
+                yMax={yMax}
+                xMax={xMax}
+              />
+            </Group>
           )}
           {isNoDataAvailable && (
             <Text
@@ -926,7 +943,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           )}
         {config.visualizationType === 'Bump Chart' && (
           <ReactTooltip
-            id={`bump-chart`}
+            id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}-bump`}
             variant='light'
             arrowColor='rgba(0,0,0,0)'
             className='tooltip'
@@ -949,8 +966,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
             style={{
               position: 'relative',
               marginTop: `${BRUSH_MARGIN}px`,
-              left: `${yAxisWidth}px`,
-              width: `${Math.max(xMax, BRUSH_MIN_WIDTH)}px`,
+              left: `${stableBrushYAxisWidth}px`,
+              width: `${Math.max(stableBrushXMax, BRUSH_MIN_WIDTH)}px`,
               height: `${BRUSH_HEIGHT}px`,
               pointerEvents: 'auto',
               zIndex: 15,
@@ -961,7 +978,11 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
             }}
             className='brush-overlay'
           >
-            <BrushSelector key={brushKeyRef.current} xMax={Math.max(xMax, BRUSH_MIN_WIDTH)} yMax={BRUSH_HEIGHT} />
+            <BrushSelector
+              key={brushKeyRef.current}
+              xMax={Math.max(stableBrushXMax, BRUSH_MIN_WIDTH)}
+              yMax={BRUSH_HEIGHT}
+            />
           </div>
         )}
       </div>

package/src/components/PieChart/PieChart.tsx

@@ -44,6 +44,9 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
     seriesHighlight,
     isDraggingAnnotation
   } = useContext(ConfigContext)
+
+  const a11y = handleChartAriaLabels(config)
+
   const dispatch = useContext(ChartDispatchContext)
   const { tooltipData, showTooltip, hideTooltip, tooltipOpen, tooltipLeft, tooltipTop } = useTooltip<TooltipData>()
   const { handleTooltipMouseOver, handleTooltipMouseOff, TooltipListItem } = useCoveTooltip({
@@ -390,7 +393,7 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
           height={height}
           className={getSvgClasses()}
           role='img'
-          aria-label={handleChartAriaLabels(config)}
+          aria-label={a11y}
           onMouseEnter={handleChartMouseEnter}
           onMouseLeave={() => {
             handleTooltipMouseOff()

package/src/components/RadarChart/RadarChart.tsx

@@ -41,6 +41,8 @@ const RadarChart = React.forwardRef<SVGSVGElement, RadarChartProps>((props, ref)
     formatNumber
   } = useContext(ConfigContext)
 
+  const a11y = handleChartAriaLabels(config)
+
   const dispatch = useContext(ChartDispatchContext)
 
   const { tooltipData, showTooltip, hideTooltip, tooltipOpen, tooltipLeft, tooltipTop } = useTooltip<TooltipData>()
@@ -232,7 +234,7 @@ const RadarChart = React.forwardRef<SVGSVGElement, RadarChartProps>((props, ref)
         height={height}
         className='radar-chart'
         role='img'
-        aria-label={handleChartAriaLabels(config)}
+        aria-label={a11y}
         onMouseEnter={handleChartMouseEnter}
         onMouseLeave={() => {
           handleTooltipMouseOff()