@cdc/chart 4.26.6 → 4.26.10

package/src/components/Regions/components/Regions.test.tsx

@@ -0,0 +1,179 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { scaleBand, scaleTime } from '@visx/scale'
+import { describe, expect, it } from 'vitest'
+import ConfigContext from '../../../ConfigContext'
+import { createMockChartContext } from '../../LinearChart/tests/mockConfigContext'
+import { RegionFills, useRegionLayouts, type RegionBoundaryMode } from './Regions'
+
+const regions = [
+  {
+    from: 'A',
+    to: 'B',
+    label: 'Region',
+    background: '#005ea8',
+    color: '#1b1b1b'
+  }
+]
+
+const RegionHarness = ({ xScale, seriesScale, boundaryMode, xMax = 300 }) => {
+  const regionLayout = useRegionLayouts({ xScale, seriesScale, boundaryMode, xMax })
+  return (
+    <svg>
+      <RegionFills layouts={regionLayout.layouts} yMax={200} />
+    </svg>
+  )
+}
+
+const renderRegion = ({
+  boundaryMode,
+  xScale,
+  seriesScale,
+  xMax = 300,
+  configOverrides = {}
+}: {
+  boundaryMode: RegionBoundaryMode
+  xScale: any
+  seriesScale?: any
+  xMax?: number
+  configOverrides?: any
+}) => {
+  const context = createMockChartContext({
+    regions,
+    orientation: 'vertical',
+    xAxis: {
+      ...createMockChartContext().config.xAxis,
+      type: 'categorical'
+    },
+    ...configOverrides
+  })
+  const result = render(
+    <ConfigContext.Provider value={context}>
+      <RegionHarness xScale={xScale} seriesScale={seriesScale} boundaryMode={boundaryMode} xMax={xMax} />
+    </ConfigContext.Provider>
+  )
+  return result.container.querySelector('.region-fill')
+}
+
+describe('scale-owned region layouts', () => {
+  it('uses the complete outer category allocation for band-boundary regions', () => {
+    const xScale = scaleBand({ domain: ['A', 'B', 'C'], range: [0, 300], padding: 0 })
+    const fill = renderRegion({
+      boundaryMode: 'band',
+      xScale,
+      seriesScale: scaleBand({ domain: ['one', 'two'], range: [0, 100] })
+    })
+
+    expect(Number(fill?.getAttribute('x'))).toBe(0)
+    expect(Number(fill?.getAttribute('width'))).toBe(200)
+  })
+
+  it('uses category centers for point-mark regions', () => {
+    const xScale = scaleBand({ domain: ['A', 'B', 'C'], range: [0, 300], padding: 0 })
+    const fill = renderRegion({ boundaryMode: 'point', xScale })
+
+    expect(Number(fill?.getAttribute('x'))).toBe(50)
+    expect(Number(fill?.getAttribute('width'))).toBe(100)
+  })
+
+  it('uses the centered series-scale range for date-time bar groups', () => {
+    const first = new Date('2024-01-01').getTime()
+    const second = new Date('2024-01-08').getTime()
+    const xScale = scaleTime({ domain: [first, second], range: [50, 250] })
+    const seriesScale = scaleBand({ domain: ['one', 'two'], range: [0, 40], padding: 0 })
+    const pointFill = renderRegion({
+      boundaryMode: 'point',
+      xScale,
+      configOverrides: {
+        regions: [{ ...regions[0], from: '2024-01-01', to: '2024-01-08' }],
+        xAxis: {
+          ...createMockChartContext().config.xAxis,
+          type: 'date-time',
+          dateParseFormat: '%Y-%m-%d'
+        }
+      }
+    })
+    const bandFill = renderRegion({
+      boundaryMode: 'band',
+      xScale,
+      seriesScale,
+      configOverrides: {
+        regions: [{ ...regions[0], from: '2024-01-01', to: '2024-01-08' }],
+        xAxis: {
+          ...createMockChartContext().config.xAxis,
+          type: 'date-time',
+          dateParseFormat: '%Y-%m-%d'
+        }
+      }
+    })
+
+    expect(Number(bandFill?.getAttribute('x'))).toBe(Number(pointFill?.getAttribute('x')) - 20)
+    expect(Number(bandFill?.getAttribute('width'))).toBe(Number(pointFill?.getAttribute('width')) + 40)
+  })
+
+  it('ends date-time Last Date bar regions at the final bar group edge', () => {
+    const first = new Date('2024-01-01').getTime()
+    const second = new Date('2024-01-08').getTime()
+    const xScale = scaleTime({ domain: [first, second], range: [50, 250] })
+    const seriesScale = scaleBand({ domain: ['one', 'two'], range: [0, 40], padding: 0 })
+    const fill = renderRegion({
+      boundaryMode: 'band',
+      xScale,
+      seriesScale,
+      configOverrides: {
+        regions: [
+          {
+            ...regions[0],
+            from: '2024-01-01T00:00:00',
+            to: '',
+            toType: 'Last Date'
+          }
+        ],
+        xAxis: {
+          ...createMockChartContext().config.xAxis,
+          type: 'date-time',
+          dateParseFormat: '%Y-%m-%d'
+        }
+      }
+    })
+
+    const expectedFrom = Number(xScale(first)) - 20
+    const expectedTo = Number(xScale(second)) + 20
+
+    expect(Number(fill?.getAttribute('x'))).toBe(expectedFrom)
+    expect(Number(fill?.getAttribute('width'))).toBe(expectedTo - expectedFrom)
+  })
+
+  it('ends Last Date regions at the final date band edge instead of the plot edge', () => {
+    const first = new Date('2024-01-01').getTime()
+    const second = new Date('2024-01-08').getTime()
+    const third = new Date('2024-01-15').getTime()
+    const xScale = scaleBand({ domain: [first, second, third], range: [0, 300], padding: 0.2 })
+    const fill = renderRegion({
+      boundaryMode: 'band',
+      xScale,
+      configOverrides: {
+        regions: [
+          {
+            ...regions[0],
+            from: '2024-01-01',
+            to: '',
+            toType: 'Last Date'
+          }
+        ],
+        xAxis: {
+          ...createMockChartContext().config.xAxis,
+          type: 'date',
+          dateParseFormat: '%Y-%m-%d'
+        }
+      }
+    })
+
+    const expectedFrom = Number(xScale(first))
+    const expectedTo = Number(xScale(third)) + xScale.bandwidth()
+
+    expect(Number(fill?.getAttribute('x'))).toBe(expectedFrom)
+    expect(Number(fill?.getAttribute('width'))).toBeCloseTo(expectedTo - expectedFrom)
+    expect(expectedTo).toBeLessThan(300)
+  })
+})

package/src/components/Regions/components/Regions.tsx

@@ -7,15 +7,6 @@ import { formatDate } from '@cdc/core/helpers/cove/date.js'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import { isMobileFontViewport } from '@cdc/core/helpers/viewports'
 
-// Constants for visualization types
-const VIZ_TYPES = {
-  BAR: 'Bar',
-  LINE: 'Line',
-  AREA: 'Area Chart',
-  COMBO: 'Combo',
-  HORIZON: 'Horizon Chart'
-} as const
-
 const DEFAULT_REGION_BACKGROUND = 'var(--cool-gray-50, #71767a)'
 const TICK_LABEL_FONT_SIZE = 16
 const TICK_LABEL_FONT_SIZE_SMALL = 13
@@ -25,6 +16,7 @@ const REGION_LABEL_MAX_PLOT_WIDTH_RATIO = 1 / 3
 const REGION_LABEL_COMFORTABLE_MIN_WIDTH = 120
 const REGION_LABEL_COMFORTABLE_MIN_WIDTH_SMALL = 96
 const REGION_LABEL_FONT_FAMILY = 'Nunito, sans-serif'
+const SUPPORTED_REGION_VISUALIZATION_TYPES: readonly string[] = ['Line', 'Area Chart', 'Horizon Chart', 'Bar', 'Combo']
 
 type Region = {
   from: string
@@ -42,14 +34,30 @@ type XScale = {
   bandwidth?: () => number
 }
 
-type RegionsProps = {
+type RegionScale = {
+  range: () => number[]
+}
+
+export type RegionBoundaryMode = 'point' | 'band'
+
+type RegionLayoutProps = {
   xScale: XScale
-  yMax: number
-  barWidth?: number
-  totalBarsInGroup?: number
+  seriesScale?: RegionScale
+  boundaryMode: RegionBoundaryMode
   xMax?: number
 }
 
+type RegionFillProps = {
+  layouts: RegionLayout[]
+  yMax: number
+}
+
+type RegionLabelsProps = {
+  layouts: RegionLayout[]
+  regionLabelFontSize: number
+  isMobileViewport: boolean
+}
+
 type HighlightedAreaProps = {
   x: number
   width: number
@@ -62,6 +70,13 @@ type RegionLabelLayout = {
   width: number
 }
 
+export type RegionLayout = {
+  region: Region
+  clippedFrom: number
+  width: number
+  chartEnd: number
+}
+
 type RegionLabelProps = {
   label: string
   color: string
@@ -73,7 +88,15 @@ type RegionLabelProps = {
 }
 
 const HighlightedArea: React.FC<HighlightedAreaProps> = ({ x, width, yMax, background }) => (
-  <rect x={x} y={0} width={width} height={yMax} fill={background || DEFAULT_REGION_BACKGROUND} opacity={0.3} />
+  <rect
+    className='region-fill'
+    x={x}
+    y={0}
+    width={width}
+    height={yMax}
+    fill={background || DEFAULT_REGION_BACKGROUND}
+    opacity={0.3}
+  />
 )
 
 const clamp = (value: number, min: number, max: number): number => Math.min(Math.max(value, min), max)
@@ -147,6 +170,7 @@ const RegionLabel: React.FC<RegionLabelProps> = ({
 
   return (
     <Text
+      className='region-label'
       x={labelLayout.x}
       y={getRegionLabelY(fontSize)}
       width={labelLayout.width}
@@ -177,22 +201,20 @@ const findClosestDate = <T,>(targetTime: number, domain: T[], getTime: (d: T) =>
   return closest
 }
 
-/** Check if visualization type is line-like (Line, Area Chart, or Horizon Chart) */
-const isLineLike = (type: string): boolean =>
-  type === VIZ_TYPES.LINE || type === VIZ_TYPES.AREA || type === VIZ_TYPES.HORIZON
-
-/** Check if visualization type is bar-like (Bar or Combo) */
-const isBarLike = (type: string): boolean => type === VIZ_TYPES.BAR || type === VIZ_TYPES.COMBO
-
 // TODO: should regions be removed on categorical axis?
-const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGroup = 1, yMax, xMax }) => {
+export const useRegionLayouts = ({ xScale, seriesScale, boundaryMode, xMax }: RegionLayoutProps) => {
   const { parseDate, config, tableData, vizViewport } = useContext<ChartContext>(ConfigContext)
 
-  const { regions, visualizationType, orientation, xAxis } = config
+  const { regions, orientation, xAxis } = config
   const isMobileViewport = isMobileFontViewport(vizViewport || 'lg')
   const regionLabelFontSize = isMobileViewport ? TICK_LABEL_FONT_SIZE_SMALL : TICK_LABEL_FONT_SIZE
 
-  const getBarOffset = (): number => (barWidth * totalBarsInGroup) / 2
+  const getBandWidth = (): number => xScale.bandwidth?.() || 0
+  const getDateTimeBandOffset = (): number => {
+    const range = seriesScale?.range?.() || []
+    if (range.length < 2) return 0
+    return Math.abs(Number(range[range.length - 1]) - Number(range[0])) / 2
+  }
 
   // ============================================
   // HELPER FUNCTIONS FOR PREVIOUS DAYS
@@ -374,7 +396,7 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       return calculateBarLastDatePosition_Categorical()
     }
     let to = xScale(region.to)
-    return to + barWidth * totalBarsInGroup
+    return to + getBandWidth()
   }
 
   const getBarFromValue_Date = (region: Region): number => {
@@ -403,7 +425,7 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
     const closestDate = findClosestDate(parsedDate, domain, d => d)
     let to = xScale(closestDate)
 
-    return to + barWidth * totalBarsInGroup
+    return to + getBandWidth()
   }
 
   const getBarFromValue_DateTime = (region: Region): number => {
@@ -415,7 +437,7 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       const parsedDate = parseDate(formatDate(config.xAxis.dateParseFormat, date, config.locale)).getTime()
       from = xScale(parsedDate)
     }
-    return from - getBarOffset()
+    return from - getDateTimeBandOffset()
   }
 
   const getBarToValue_DateTime = (region: Region): number => {
@@ -423,14 +445,10 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       return calculateBarLastDatePosition_DateTime()
     }
     let to = xScale(parseDate(region.to).getTime())
-    return to - getBarOffset()
+    return to + getDateTimeBandOffset()
   }
 
   const calculateBarLastDatePosition_Categorical = (): number => {
-    const domain = xScale.domain()
-    const lastDate = domain[domain.length - 1]
-    const lastDatePosition = xScale(lastDate)
-    const bandwidth = xScale.bandwidth ? xScale.bandwidth() : 0
     // For categorical bars, extend to the end of the last bar
     // Don't add chartStart - xScale already returns positions in the chart coordinate space
     return xMax
@@ -440,18 +458,14 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
     const domain = xScale.domain()
     const lastDate = domain[domain.length - 1]
     const lastDatePosition = xScale(lastDate)
-    const offset = barWidth * totalBarsInGroup
-    // Don't add chartStart - xScale already returns positions in chart coordinate space
-    return Number(lastDatePosition + offset)
+    return Number(lastDatePosition) + getBandWidth()
   }
 
   const calculateBarLastDatePosition_DateTime = (): number => {
     const domain = xScale.domain()
     const lastDate = domain[domain.length - 1]
     const lastDatePosition = xScale(lastDate)
-    // For date-time bars, don't add chartStart - xScale returns positions in chart coordinate space
-    // Also don't subtract barOffset since we want to extend to the edge
-    return Number(lastDatePosition)
+    return Number(lastDatePosition) + getDateTimeBandOffset()
   }
 
   const isRegionInVisibleDomain = (region: Region): boolean => {
@@ -484,11 +498,7 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
   // ============================================
 
   const getFromValue = (region: Region): number => {
-    const isLine = isLineLike(visualizationType)
-    const isBar = isBarLike(visualizationType)
-
-    // LINE/AREA CHARTS
-    if (isLine) {
+    if (boundaryMode === 'point') {
       if (xAxis.type === 'categorical') {
         return getLineFromValue_Categorical(region)
       } else if (xAxis.type === 'date') {
@@ -498,8 +508,7 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       }
     }
 
-    // BAR CHARTS
-    if (isBar) {
+    if (boundaryMode === 'band') {
       if (xAxis.type === 'categorical') {
         return getBarFromValue_Categorical(region)
       } else if (xAxis.type === 'date') {
@@ -513,11 +522,7 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
   }
 
   const getToValue = (region: Region): number => {
-    const isLine = isLineLike(visualizationType)
-    const isBar = isBarLike(visualizationType)
-
-    // LINE/AREA CHARTS
-    if (isLine) {
+    if (boundaryMode === 'point') {
       if (xAxis.type === 'categorical') {
         return getLineToValue_Categorical(region)
       } else if (xAxis.type === 'date') {
@@ -527,8 +532,7 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       }
     }
 
-    // BAR CHARTS
-    if (isBar) {
+    if (boundaryMode === 'band') {
       if (xAxis.type === 'categorical') {
         return getBarToValue_Categorical(region)
       } else if (xAxis.type === 'date') {
@@ -543,12 +547,18 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
 
   const getWidth = (to: number, from: number): number => Math.max(0, to - from)
 
-  if (!regions || orientation !== 'vertical') return null
+  if (
+    !SUPPORTED_REGION_VISUALIZATION_TYPES.includes(config.visualizationType) ||
+    !regions ||
+    orientation !== 'vertical'
+  ) {
+    return { layouts: [], regionLabelFontSize, isMobileViewport }
+  }
 
   const chartStart = 0
   const chartEnd = xMax !== undefined ? xMax : 1000
 
-  return regions.map((region: Region) => {
+  const layouts = regions.map((region: Region): RegionLayout | null => {
     if (!isRegionInVisibleDomain(region)) return null
 
     const from = getFromValue(region)
@@ -566,21 +576,46 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
 
     if (width <= 0) return null
 
-    return (
-      <Group height={100} className='regions regions-group--line' key={region.label} pointerEvents='none'>
-        <HighlightedArea x={clippedFrom} width={width} yMax={yMax} background={region.background} />
-        <RegionLabel
-          label={region.label}
-          color={region.color}
-          clippedFrom={clippedFrom}
-          regionWidth={width}
-          plotWidth={chartEnd}
-          fontSize={regionLabelFontSize}
-          isMobileViewport={isMobileViewport}
-        />
-      </Group>
-    )
+    return { region, clippedFrom, width, chartEnd }
   })
+
+  return {
+    layouts: layouts.filter((layout): layout is RegionLayout => layout !== null),
+    regionLabelFontSize,
+    isMobileViewport
+  }
+}
+
+export const RegionFills: React.FC<RegionFillProps> = ({ layouts, yMax }) => {
+  return layouts.map(({ region, clippedFrom, width }, index) => (
+    <Group
+      height={100}
+      className='regions regions-group--line regions-layer--fill'
+      key={`${region.label}-${index}`}
+      pointerEvents='none'
+    >
+      <HighlightedArea x={clippedFrom} width={width} yMax={yMax} background={region.background} />
+    </Group>
+  ))
 }
 
-export default Regions
+export const RegionLabels: React.FC<RegionLabelsProps> = ({ layouts, regionLabelFontSize, isMobileViewport }) => {
+  return layouts.map(({ region, clippedFrom, width, chartEnd }, index) => (
+    <Group
+      height={100}
+      className='regions regions-group--line regions-layer--label'
+      key={`${region.label}-${index}`}
+      pointerEvents='none'
+    >
+      <RegionLabel
+        label={region.label}
+        color={region.color}
+        clippedFrom={clippedFrom}
+        regionWidth={width}
+        plotWidth={chartEnd}
+        fontSize={regionLabelFontSize}
+        isMobileViewport={isMobileViewport}
+      />
+    </Group>
+  ))
+}

package/src/components/Regions/index.tsx

@@ -1,3 +1,2 @@
-import Regions from './components/Regions'
-
-export default Regions
+export { RegionFills, RegionLabels, useRegionLayouts } from './components/Regions'
+export type { RegionBoundaryMode, RegionLayout } from './components/Regions'