@cdc/chart 4.26.6 → 4.26.10

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

@@ -0,0 +1,141 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { scaleBand, scaleLinear } from '@visx/scale'
+import VisualizationRenderer from '../VisualizationRenderer'
+import ConfigContext from '../../../ConfigContext'
+import { createMockChartContext } from './mockConfigContext'
+
+vi.mock('../../AreaChart', () => ({
+  AreaChartStacked: () => <g data-testid='area-chart-stacked' />
+}))
+
+vi.mock('../../BarChart', () => ({
+  default: () => <g data-testid='bar-chart' />
+}))
+
+vi.mock('../../LineChart', () => ({
+  default: () => <g className='line-chart-group' data-testid='line-chart' />
+}))
+
+vi.mock('../../Forecasting', () => ({
+  default: () => <g data-testid='forecasting' />
+}))
+
+vi.mock('../../BoxPlot/BoxPlot.Vertical', () => ({
+  default: () => <g data-testid='box-plot-vertical' />
+}))
+
+vi.mock('../../BoxPlot/BoxPlot.Horizontal', () => ({
+  default: () => <g data-testid='box-plot-horizontal' />
+}))
+
+vi.mock('../../DeviationBar', () => ({
+  default: () => <g data-testid='deviation-bar' />
+}))
+
+vi.mock('../../ForestPlot', () => ({
+  default: () => <g data-testid='forest-plot' />
+}))
+
+vi.mock('../../HorizonChart', () => ({
+  HorizonChart: () => <g data-testid='horizon-chart' />
+}))
+
+vi.mock('../../PairedBarChart', () => ({
+  default: () => <g data-testid='paired-bar-chart' />
+}))
+
+vi.mock('../../ScatterPlot', () => ({
+  default: () => <g data-testid='scatter-plot' />
+}))
+
+vi.mock('../../WarmingStripes', () => ({
+  default: () => <g data-testid='warming-stripes' />
+}))
+
+const renderVisualizationRenderer = (configOverrides = {}) => {
+  const context = createMockChartContext(configOverrides)
+  const xScale = scaleBand({ domain: ['Jan', 'Feb'], range: [0, 400] })
+  const yScale = scaleLinear({ domain: [0, 100], range: [300, 0] })
+
+  return render(
+    <ConfigContext.Provider value={context}>
+      <svg>
+        <VisualizationRenderer
+          xScale={xScale}
+          yScale={yScale}
+          xMax={400}
+          yMax={300}
+          seriesScale={undefined}
+          xScaleNoPadding={xScale}
+          min={0}
+          max={100}
+          parentWidth={500}
+          yAxisWidth={50}
+          forestHeight={300}
+          animatedChart={false}
+          tooltipData={undefined}
+          showTooltip={undefined}
+          handleTooltipMouseOver={() => {}}
+          handleTooltipMouseOff={() => {}}
+          handleTooltipClick={() => {}}
+          getXAxisData={d => d.Date}
+          getYAxisData={(d, seriesKey) => d[seriesKey]}
+          svgRef={{ current: null }}
+          forestPlotRightLabelRef={{ current: null }}
+        />
+      </svg>
+    </ConfigContext.Provider>
+  )
+}
+
+describe('VisualizationRenderer', () => {
+  it('renders only the Combo layers represented by runtime series keys', () => {
+    const { container } = renderVisualizationRenderer({
+      visualizationType: 'Combo',
+      runtime: {
+        ...createMockChartContext().config.runtime,
+        barSeriesKeys: ['cases'],
+        lineSeriesKeys: ['coverage'],
+        areaSeriesKeys: [],
+        forecastingSeriesKeys: []
+      }
+    })
+
+    expect(container.querySelectorAll('[data-testid="bar-chart"]')).toHaveLength(1)
+    expect(container.querySelectorAll('.line-chart-group')).toHaveLength(1)
+    expect(container.querySelectorAll('[data-testid="area-chart-stacked"]')).toHaveLength(0)
+    expect(container.querySelectorAll('[data-testid="forecasting"]')).toHaveLength(0)
+  })
+
+  it('does not render BarChart or LineChart for Combo when those runtime buckets are empty', () => {
+    const { container } = renderVisualizationRenderer({
+      visualizationType: 'Combo',
+      runtime: {
+        ...createMockChartContext().config.runtime,
+        barSeriesKeys: [],
+        lineSeriesKeys: [],
+        areaSeriesKeys: [{ dataKey: 'area' }],
+        forecastingSeriesKeys: [{ dataKey: 'forecast' }]
+      }
+    })
+
+    expect(container.querySelectorAll('[data-testid="bar-chart"]')).toHaveLength(0)
+    expect(container.querySelectorAll('.line-chart-group')).toHaveLength(0)
+    expect(container.querySelectorAll('[data-testid="area-chart-stacked"]')).toHaveLength(1)
+    expect(container.querySelectorAll('[data-testid="forecasting"]')).toHaveLength(1)
+  })
+
+  it('renders the Bump Chart line layer once', () => {
+    const { container } = renderVisualizationRenderer({ visualizationType: 'Bump Chart' })
+
+    expect(container.querySelectorAll('.line-chart-group')).toHaveLength(1)
+  })
+
+  it('keeps non-Combo Bar rendering unchanged', () => {
+    const { container } = renderVisualizationRenderer({ visualizationType: 'Bar' })
+
+    expect(container.querySelectorAll('[data-testid="bar-chart"]')).toHaveLength(1)
+  })
+})

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

@@ -39,7 +39,8 @@ export const createMockConfig = (overrides: Partial<ChartConfig> = {}): ChartCon
       anchors: [],
       axisPadding: 0,
       labelPlacement: 'On Date/Category Axis',
-      rightAxisSize: 0
+      rightAxisSize: 0,
+      rightTitlePlacement: 'top'
     },
     runtime: {
       xAxis: {

package/src/components/LinearChart.tsx

@@ -24,10 +24,11 @@ import { isDateScale } from '@cdc/core/helpers/cove/date'
 import ConfigContext from '../ConfigContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import useIntersectionObserver from '../hooks/useIntersectionObserver'
-import Regions from './Regions'
+import { RegionFills, RegionLabels, useRegionLayouts, type RegionBoundaryMode } from './Regions'
 import { CategoricalYAxis, LeftAxis, LeftAxisGridlines, BottomAxis, PairedBarAxis, RightAxis } from './Axis'
 import BrushSelector from './Brush/BrushSelector'
 import VisualizationRenderer from './LinearChart/VisualizationRenderer'
+import ValueAxisAnchors, { alignStrokeToPixel } from './LinearChart/ValueAxisAnchors'
 import { TYPES_WITHOUT_GRID, TYPES_WITH_TOOLTIP_GUIDES } from './LinearChart/linearChart.constants'
 import { useTickFormatters } from './LinearChart/utils/tickFormatting'
 
@@ -36,6 +37,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 { getDataDrivenYAxisCategories, isDataDrivenYAxis } from '../helpers/dataDrivenYAxisCategories'
+import { calculateRightYAxisWidth } from '../helpers/calculateRightYAxisWidth'
 import { getAxisLabelFontSize } from '../helpers/axisLabelFontSize'
 import { hasSpacedInlineLabel } from '../helpers/hasSpacedInlineLabel'
 import { getYAxisDomainData, getYAxisFilterDomainBehavior } from '../helpers/getYAxisDomainData'
@@ -108,6 +111,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   // prettier-ignore
   const {
     config,
+    convertLineToBarGraph,
     currentViewport,
     vizViewport,
     formatDate,
@@ -135,6 +139,13 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const { visualizationType, orientation, xAxis, yAxis, runtime, legend, forestPlot, debugSvg } = config
 
   const { inlineLabel } = config.yAxis
+  const dataDrivenYAxisCategories = getDataDrivenYAxisCategories(config, data)
+  const renderedYAxisCategories = isDataDrivenYAxis(config)
+    ? dataDrivenYAxisCategories?.categories || []
+    : config.yAxis.categories
+  const axisLayoutConfig = isDataDrivenYAxis(config)
+    ? { ...config, yAxis: { ...config.yAxis, categories: renderedYAxisCategories } }
+    : config
 
   // HOOKS  % STATES
   const dataForMinMax = getYAxisDomainData({
@@ -144,9 +155,10 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     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)
+  const rawEligibleYAxisDomainData =
+    Array.isArray(config.yAxisDomainData) && config.yAxisDomainData.length > 0
+      ? getExcludedData(config, config.yAxisDomainData)
+      : isStableYAxisDomain && Array.isArray(excludedData)
       ? excludedData
       : tableData
   const suppressionDomainData = getYAxisDomainData({
@@ -286,9 +298,19 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   // 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
+  const rightAxisWidth = hasRightAxis
+    ? calculateRightYAxisWidth({
+        axisLabelFontSize,
+        config,
+        formatNumber,
+        tickLabelFont: GET_TEXT_WIDTH_FONT,
+        tickValues: rightTickValues,
+        yScaleRight
+      })
+    : 0
 
   // Chart width calculation using the current y-axis width
-  const xMax = Math.max(0, parentWidth - yAxisWidth - (hasRightAxis ? config.yAxis.rightAxisSize : 0))
+  const xMax = Math.max(0, parentWidth - yAxisWidth - rightAxisWidth)
 
   // Stabilize brush container dimensions when brushDynamicYAxis is enabled.
   // Without this, y-axis rescaling on each brush change creates a feedback loop:
@@ -335,6 +357,16 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   })
   const effectiveYTickValues = sharedYAxisTickValues ?? yTickValues
 
+  const comboHasBarSeries = visualizationType === 'Combo' && Boolean(config.runtime?.barSeriesKeys?.length)
+  const regionBoundaryMode: RegionBoundaryMode =
+    visualizationType === 'Bar' || comboHasBarSeries || convertLineToBarGraph ? 'band' : 'point'
+  const regionLayout = useRegionLayouts({
+    xScale,
+    seriesScale,
+    boundaryMode: regionBoundaryMode,
+    xMax
+  })
+
   // Consolidated tick formatters
   const { handleLeftTickFormatting, handleBottomTickFormatting } = useTickFormatters({
     isLogarithmicAxis,
@@ -384,7 +416,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     }
 
     return calculateLeftYAxisWidth({
-      config,
+      config: axisLayoutConfig,
       data,
       yScale,
       numTicks: handleNumTicks,
@@ -398,6 +430,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     })
   }, [
     config,
+    axisLayoutConfig,
     data,
     yScale,
     effectiveYTickValues,
@@ -651,8 +684,9 @@ 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={a11y}
           style={{ overflow: 'visible' }}
@@ -695,6 +729,9 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               })}
             </Group>
           )}
+          <Group left={yAxisWidth} className='region-fill-layer'>
+            <RegionFills layouts={regionLayout.layouts} yMax={yMax} />
+          </Group>
           {visualizationType === 'Paired Bar' && (
             <PairedBarAxis
               g1xScale={g1xScale}
@@ -737,33 +774,33 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           />
           {/* Brush moved to separate overlay - no longer in main SVG */}
           {/* y anchors */}
-          {config.yAxis.anchors &&
-            config.yAxis.anchors.map((anchor, index) => {
-              let position = yScale(anchor.value)
-              let middleOffset = 0
-
-              if (!anchor.value) return
+          <ValueAxisAnchors
+            anchors={config.yAxis.anchors}
+            className='anchor-y'
+            getOffset={() => {
+              if (orientation !== 'horizontal' || visualizationType !== 'Bar') return 0
               if (config.yAxis.labelPlacement === 'Below Bar') {
-                middleOffset =
-                  BELOW_BAR_TEXT_OFFSET + Number(config.series.length * config.barHeight) / config.series.length
-              } else {
-                middleOffset = LABEL_PADDING_OFFSET
+                return BELOW_BAR_TEXT_OFFSET + Number(config.series.length * config.barHeight) / config.series.length
               }
-
-              if (!position) return
-
-              return (
-                // prettier-ignore
-                <Line
-                  key={`yAxis-${anchor.value}--${index}`}
-                  strokeDasharray={handleLineType(anchor.lineStyle)}
-                  stroke={anchor.color ? anchor.color : 'rgba(0,0,0,1)'}
-                  className='anchor-y'
-                  from={{ x: Number(yAxisWidth), y: position - middleOffset }}
-                  to={{ x: Number(yAxisWidth) + Number(xMax), y: position - middleOffset }}
-                />
-              )
-            })}
+              return LABEL_PADDING_OFFSET
+            }}
+            handleLineType={handleLineType}
+            keyPrefix='yAxis'
+            xStart={Number(yAxisWidth)}
+            xEnd={Number(yAxisWidth) + Number(xMax)}
+            yScale={yScale}
+          />
+          {hasRightAxis && (
+            <ValueAxisAnchors
+              anchors={config.yAxis.rightAnchors}
+              className='anchor-y-right'
+              handleLineType={handleLineType}
+              keyPrefix='yAxisRight'
+              xStart={Number(yAxisWidth)}
+              xEnd={Number(yAxisWidth) + Number(xMax)}
+              yScale={yScaleRight}
+            />
+          )}
           {/* x anchors */}
           {config.xAxis.anchors &&
             config.xAxis.anchors.map((anchor, index) => {
@@ -787,6 +824,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               let anchorPosition = getAnchorPosition()
 
               if (!anchorPosition) return
+              const anchorXPosition = alignStrokeToPixel(Number(anchorPosition) + Number(yAxisWidth))
 
               return (
                 // prettier-ignore
@@ -796,28 +834,18 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                   stroke={anchor.color ? anchor.color : 'rgba(0,0,0,1)'}
                   fill={anchor.color ? anchor.color : 'rgba(0,0,0,1)'}
                   className='anchor-x'
-                  from={{ x: Number(anchorPosition) + Number(yAxisWidth), y: 0 }}
-                  to={{ x: Number(anchorPosition) + Number(yAxisWidth), y: yMax }}
+                  from={{ x: anchorXPosition, y: 0 }}
+                  to={{ x: anchorXPosition, y: yMax }}
                 />
               )
             })}
-          {/* 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' && (
-            <Group left={yAxisWidth}>
-              <Regions
-                xScale={xScale}
-                handleTooltipClick={handleTooltipClick}
-                handleTooltipMouseOff={handleTooltipMouseOff}
-                handleTooltipMouseOver={handleTooltipMouseOver}
-                showTooltip={showTooltip}
-                hideTooltip={hideTooltip}
-                tooltipData={tooltipData}
-                yMax={yMax}
-                xMax={xMax}
-              />
-            </Group>
-          )}
+          <Group left={yAxisWidth} className='region-label-layer'>
+            <RegionLabels
+              layouts={regionLayout.layouts}
+              regionLabelFontSize={regionLayout.regionLabelFontSize}
+              isMobileViewport={regionLayout.isMobileViewport}
+            />
+          </Group>
           {isNoDataAvailable && (
             <Text
               x={yAxisWidth + Number(xMax / 2)}
@@ -889,6 +917,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               xMax={xMax}
               yMax={yMax}
               leftSize={yAxisWidth - config.yAxis.axisPadding}
+              categories={renderedYAxisCategories}
             />
           )}
           {/* Right Axis */}
@@ -898,6 +927,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               yMax={yMax}
               xMax={xMax}
               yAxisWidth={yAxisWidth}
+              rightAxisWidth={rightAxisWidth}
               tickValues={rightTickValues}
               tickLabelFontSize={tickLabelFontSize}
               axisLabelFontSize={axisLabelFontSize}
@@ -950,8 +980,9 @@ 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}