@cdc/chart 4.26.4 → 4.26.6

package/src/components/LinearChart.tsx

@@ -36,6 +36,11 @@ 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 { hasSpacedInlineLabel } from '../helpers/hasSpacedInlineLabel'
+import { getYAxisDomainData, getYAxisFilterDomainBehavior } from '../helpers/getYAxisDomainData'
+import { getHasBoundarySuppression } from '../helpers/getHasBoundarySuppression'
+import { getExcludedData } from '../helpers/getExcludedData'
 
 // Hooks
 import useReduceData from '../hooks/useReduceData'
@@ -69,9 +74,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
@@ -118,10 +120,16 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     legendRef,
     parseDate,
     parentRef,
+    excludedData,
     tableData,
     transformedData: data,
+    yAxisTickValues: sharedYAxisTickValues,
+    yAxisDomainData
   } = 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 +137,28 @@ 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 dataForMinMax = getYAxisDomainData({
+    config,
+    data,
+    tableData,
+    fullEligibleDomainData: yAxisDomainData
+  })
+  const isStableYAxisDomain = getYAxisFilterDomainBehavior(config) === 'stable'
+  const rawEligibleYAxisDomainData = Array.isArray(config.yAxisDomainData) && config.yAxisDomainData.length > 0
+    ? getExcludedData(config, config.yAxisDomainData)
+    : isStableYAxisDomain && Array.isArray(excludedData)
+      ? excludedData
+      : tableData
+  const suppressionDomainData = getYAxisDomainData({
+    config,
+    data: tableData,
+    tableData,
+    fullEligibleDomainData: rawEligibleYAxisDomainData
+  })
+  const hasBoundarySuppression = getHasBoundarySuppression({
+    rows: suppressionDomainData,
+    config
+  })
   const { minValue, maxValue, existPositiveValue, isAllLine } = useReduceData(config, dataForMinMax)
 
   const { visSupportsSmallMultiples } = useEditorPermissions()
@@ -163,6 +190,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 +203,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 usesSpacedInlineLabel = hasSpacedInlineLabel(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 +213,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,
@@ -254,14 +281,29 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     return () => observer.disconnect()
   }, [axisBottomRef.current])
 
-  const { yScaleRight, hasRightAxis } = useRightAxis({ config, yMax, data })
+  const { yScaleRight, hasRightAxis, rightTickValues } = useRightAxis({ config, yMax, data: dataForMinMax })
 
   // State for computed left-axis width - shared across all linear-chart types.
   const [currentYAxisWidth, setCurrentYAxisWidth] = useState<number>(DEFAULT_LEFT_Y_AXIS_WIDTH)
   const yAxisWidth = currentYAxisWidth
 
   // Chart width calculation using the current y-axis width
-  const xMax = parentWidth - yAxisWidth - (hasRightAxis ? config.yAxis.rightAxisSize : 0)
+  const xMax = Math.max(0, 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,
@@ -273,10 +315,13 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     xScaleAnnotation,
     yScaleAnnotation,
     min,
-    max
+    max,
+    yTickValues
   } = useScales({
     data,
-    tableData,
+    tableData: dataForMinMax,
+    yAxisDomainData: dataForMinMax,
+    hasBoundarySuppression,
     config,
     minValue,
     maxValue,
@@ -285,9 +330,10 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     xAxisDataMapped,
     yMax,
     xMax,
-    needsYAxisAutoPadding,
-    currentViewport
+    hasSpacedInlineLabel: usesSpacedInlineLabel,
+    currentViewport: vizViewport
   })
+  const effectiveYTickValues = sharedYAxisTickValues ?? yTickValues
 
   // Consolidated tick formatters
   const { handleLeftTickFormatting, handleBottomTickFormatting } = useTickFormatters({
@@ -324,10 +370,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
 
@@ -341,6 +388,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
       data,
       yScale,
       numTicks: handleNumTicks,
+      tickValues: effectiveYTickValues,
       parentWidth,
       tickLabelFont: GET_TEXT_WIDTH_FONT,
       axisLabelFontSize,
@@ -352,6 +400,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     config,
     data,
     yScale,
+    effectiveYTickValues,
     handleNumTicks,
     parentWidth,
     isHorizontal,
@@ -416,11 +465,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 +557,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
@@ -580,6 +628,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
       <SmallMultiples
         config={config}
         data={data}
+        yAxisDomainData={dataForMinMax}
+        hasBoundarySuppression={hasBoundarySuppression}
         svgRef={svgRef}
         parentWidth={parentWidth}
         parentHeight={parentHeight}
@@ -601,11 +651,10 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           onMouseMove={onMouseMove}
           width={parentWidth}
           height={isNoDataAvailable ? 1 : calculatedSvgHeight ?? parentHeight}
-          className={`linear ${config.animate ? 'animated' : ''} ${animatedChart && config.animate ? 'animate' : ''} ${
-            debugSvg && 'debug'
-          } ${isDraggingAnnotation && 'dragging-annotation'}`}
+          className={`linear ${config.animate ? 'animated' : ''} ${animatedChart && config.animate ? 'animate' : ''} ${debugSvg && 'debug'
+            } ${isDraggingAnnotation && 'dragging-annotation'}`}
           role='img'
-          aria-label={handleChartAriaLabels(config)}
+          aria-label={a11y}
           style={{ overflow: 'visible' }}
           onMouseLeave={() => {
             setShowHoverLine(false)
@@ -626,6 +675,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               xMax={xMax}
               yAxisWidth={yAxisWidth}
               numTicks={handleNumTicks}
+              tickValues={effectiveYTickValues}
               axisLabelFontSize={axisLabelFontSize}
             />
           )}
@@ -754,18 +804,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
@@ -821,6 +872,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                 xMax={xMax}
                 yAxisWidth={yAxisWidth}
                 numTicks={handleNumTicks}
+                tickValues={effectiveYTickValues}
                 tickLabelFontSize={tickLabelFontSize}
                 axisLabelFontSize={axisLabelFontSize}
                 handleLeftTickFormatting={handleLeftTickFormatting}
@@ -846,6 +898,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               yMax={yMax}
               xMax={xMax}
               yAxisWidth={yAxisWidth}
+              tickValues={rightTickValues}
               tickLabelFontSize={tickLabelFontSize}
               axisLabelFontSize={axisLabelFontSize}
             />
@@ -897,9 +950,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           tooltipData.dataXPosition &&
           !config.tooltips.singleSeries && (
             <>
-              <style>{`.tooltip {background-color: rgba(255,255,255, ${
-                config.tooltips.opacity / 100
-              }) !important;`}</style>
+              <style>{`.tooltip {background-color: rgba(255,255,255, ${config.tooltips.opacity / 100
+                }) !important;`}</style>
               <style>{`.tooltip {max-width:300px} !important; word-wrap: break-word; `}</style>
               <TooltipWithBounds
                 ref={tooltipRef}
@@ -926,7 +978,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 +1001,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 +1013,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()