@cdc/chart 4.25.11 → 4.26.2

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

@@ -5,175 +5,418 @@ import { Text } from '@visx/text'
 import { Group } from '@visx/group'
 import { formatDate, isDateScale } from '@cdc/core/helpers/cove/date.js'
 
+// Constants for visualization types
+const VIZ_TYPES = {
+  BAR: 'Bar',
+  LINE: 'Line',
+  AREA: 'Area Chart',
+  COMBO: 'Combo'
+} as const
+
+type Region = {
+  from: string
+  to: string
+  fromType?: 'Fixed' | 'Previous Days'
+  toType?: 'Fixed' | 'Last Date'
+  label: string
+  background: string
+  color: string
+}
+
+type XScale = {
+  (value: unknown): number
+  domain: () => unknown[]
+  bandwidth?: () => number
+}
+
 type RegionsProps = {
-  xScale: Function
+  xScale: XScale
   yMax: number
   barWidth?: number
   totalBarsInGroup?: number
+  xMax?: number
+}
+
+type HighlightedAreaProps = {
+  x: number
+  width: number
+  yMax: number
+  background: string
+}
+
+const HighlightedArea: React.FC<HighlightedAreaProps> = ({ x, width, yMax, background }) => (
+  <rect x={x} y={0} width={width} height={yMax} fill={background} opacity={0.3} />
+)
+
+/** Find the closest date in domain to a target date */
+const findClosestDate = <T,>(targetTime: number, domain: T[], getTime: (d: T) => number): T => {
+  let closest = domain[0]
+  let minDiff = Math.abs(targetTime - getTime(closest))
+
+  for (let i = 1; i < domain.length; i++) {
+    const diff = Math.abs(targetTime - getTime(domain[i]))
+    if (diff < minDiff) {
+      minDiff = diff
+      closest = domain[i]
+    }
+  }
+  return closest
 }
 
+/** Check if visualization type is line-like (Line or Area Chart) */
+const isLineLike = (type: string): boolean => type === VIZ_TYPES.LINE || type === VIZ_TYPES.AREA
+
+/** 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 }) => {
+const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGroup = 1, yMax, xMax }) => {
   const { parseDate, config } = useContext<ChartContext>(ConfigContext)
 
-  const { runtime, regions, visualizationType, orientation, xAxis } = config
-  const domain = xScale.domain()
+  const { regions, visualizationType, orientation, xAxis } = config
+
+  const getBarOffset = (): number => (barWidth * totalBarsInGroup) / 2
+
+  // ============================================
+  // HELPER FUNCTIONS FOR PREVIOUS DAYS
+  // ============================================
+
+  const calculatePreviousDaysFrom = (region: Region, axisType: string): number => {
+    const previousDays = Number(region.from) || 0
+    const domain = xScale.domain()
+
+    // Determine the "to" reference date
+    const toRefDate =
+      region.toType === 'Last Date'
+        ? new Date(domain[domain.length - 1] as string | number).getTime()
+        : new Date(region.to)
+
+    const toFormatted = formatDate(config.xAxis.dateParseFormat, toRefDate)
+    const toDate = new Date(toFormatted)
+    const fromDate = new Date(toDate)
+    fromDate.setDate(fromDate.getDate() - previousDays)
 
-  const getFromValue = region => {
-    let from
+    let closestValue: unknown
 
-    // Fixed Date
-    if (!region?.fromType || region.fromType === 'Fixed') {
+    if (axisType === 'date') {
+      const fromTime = new Date(formatDate(xAxis.dateParseFormat, fromDate)).getTime()
+      closestValue = findClosestDate(fromTime, domain as number[], d => d)
+    } else if (axisType === 'categorical') {
+      const fromTime = fromDate.getTime()
+      closestValue = findClosestDate(fromTime, domain as string[], d => new Date(d).getTime())
+    } else if (axisType === 'date-time') {
+      closestValue = fromDate.getTime()
+    }
+
+    return xScale(closestValue)
+  }
+
+  // ============================================
+  // LINE/AREA CHART LOGIC
+  // ============================================
+
+  const getLineFromValue_Categorical = (region: Region): number => {
+    let from: number
+    if (region.fromType === 'Previous Days') {
+      from = calculatePreviousDaysFrom(region, 'categorical')
+    } else {
+      from = xScale(region.from)
+    }
+    // Add left padding (yAxis.size) + half bandwidth to center on the category
+    let scalePadding = Number(config.yAxis.size)
+    if (xScale.bandwidth) {
+      scalePadding += xScale.bandwidth() / 2
+    }
+    return from + scalePadding
+  }
+
+  const getLineToValue_Categorical = (region: Region): number => {
+    if (region.toType === 'Last Date') {
+      return calculateLineLastDatePosition_Categorical()
+    }
+    let to = xScale(region.to)
+    // Add left padding (yAxis.size) + half bandwidth
+    let scalePadding = Number(config.yAxis.size)
+    if (xScale.bandwidth) {
+      scalePadding += xScale.bandwidth() / 2
+    }
+    return to + scalePadding
+  }
+
+  const getLineFromValue_Date = (region: Region): number => {
+    let from: number
+    if (region.fromType === 'Previous Days') {
+      from = calculatePreviousDaysFrom(region, 'date')
+    } else {
+      // For date scale (band), we need to find the value in the domain
+      // Parse the region date to match the format in the domain
       const date = new Date(region.from)
       const parsedDate = parseDate(formatDate(config.xAxis.dateParseFormat, date)).getTime()
-      from = xScale(parsedDate)
 
-      if (visualizationType === 'Bar' && xAxis.type === 'date-time') {
-        from = from - (barWidth * totalBarsInGroup) / 2
-      }
+      // For band scales, find the closest date in the domain
+      const domain = xScale.domain() as number[]
+      const closestDate = findClosestDate(parsedDate, domain, d => d)
+      from = xScale(closestDate)
+    }
+    // Add left padding (yAxis.size) + half bandwidth
+    let scalePadding = Number(config.yAxis.size)
+    if (xScale.bandwidth) {
+      scalePadding += xScale.bandwidth() / 2
     }
+    return from + scalePadding
+  }
 
-    // Previous Date
+  const getLineToValue_Date = (region: Region): number => {
+    if (region.toType === 'Last Date') {
+      return calculateLineLastDatePosition_Date()
+    }
+    // For date scale (band), we need to find the value in the domain
+    // Parse the region date to match the format in the domain
+    const parsedDate = parseDate(region.to).getTime()
+
+    // For band scales, find the closest date in the domain
+    const domain = xScale.domain() as number[]
+    const closestDate = findClosestDate(parsedDate, domain, d => d)
+    let to = xScale(closestDate)
+
+    // Add left padding (yAxis.size) + half bandwidth
+    let scalePadding = Number(config.yAxis.size)
+    if (xScale.bandwidth) {
+      scalePadding += xScale.bandwidth() / 2
+    }
+    return to + scalePadding
+  }
+
+  const getLineFromValue_DateTime = (region: Region): number => {
     if (region.fromType === 'Previous Days') {
-      const previousDays = Number(region.from) || 0
-      const categoricalDomain = domain.map(d => formatDate(config.xAxis.dateParseFormat, new Date(d)))
-      const d = region.toType === 'Last Date' ? new Date(domain[domain.length - 1]).getTime() : new Date(region.to) // on categorical charts force leading zero 03/15/2016 vs 3/15/2016 for valid date format
-      const to =
-        config.xAxis.type === 'categorical'
-          ? formatDate(config.xAxis.dateParseFormat, d)
-          : formatDate(config.xAxis.dateParseFormat, d)
-      const toDate = new Date(to)
-      from = new Date(toDate.setDate(toDate.getDate() - Number(previousDays)))
-
-      if (xAxis.type === 'date') {
-        from = new Date(formatDate(xAxis.dateParseFormat, from)).getTime()
-
-        let closestDate = domain[0]
-        let minDiff = Math.abs(from - closestDate)
-
-        for (let i = 1; i < domain.length; i++) {
-          const diff = Math.abs(from - domain[i])
-          if (diff < minDiff) {
-            minDiff = diff
-            closestDate = domain[i]
-          }
-        }
-        from = closestDate
-      }
+      const from = calculatePreviousDaysFrom(region, 'date-time')
+      return from + Number(config.yAxis.size)
+    }
+    const date = new Date(region.from)
+    const parsedDate = parseDate(formatDate(config.xAxis.dateParseFormat, date)).getTime()
+    let from = xScale(parsedDate)
+    // For date-time, xScale returns correct position (no bandwidth), just add left padding
+    return from + Number(config.yAxis.size)
+  }
 
-      // Here the domain is in the xScale.dateParseFormat
-      if (xAxis.type === 'categorical') {
-        let closestDate = domain[0]
-        let minDiff = Math.abs(new Date(from).getTime() - new Date(closestDate).getTime())
-
-        for (let i = 1; i < domain.length; i++) {
-          const diff = Math.abs(new Date(from).getTime() - new Date(domain[i]).getTime())
-          if (diff < minDiff) {
-            minDiff = diff
-            closestDate = domain[i]
-          }
-        }
-        from = closestDate
-      }
+  const getLineToValue_DateTime = (region: Region): number => {
+    if (region.toType === 'Last Date') {
+      return calculateLineLastDatePosition_DateTime()
+    }
+    let to = xScale(parseDate(region.to).getTime())
+    return to + Number(config.yAxis.size)
+  }
+
+  const calculateLineLastDatePosition_Categorical = (): number => {
+    const chartStart = Number(config.yAxis.size || 0)
+    // Extend to the right edge of the chart
+    return chartStart + (xMax || 0)
+  }
+
+  const calculateLineLastDatePosition_Date = (): number => {
+    const chartStart = Number(config.yAxis.size || 0)
+    // For date scale line charts with Last Date, extend to the right edge of the chart
+    return chartStart + (xMax || 0)
+  }
+
+  const calculateLineLastDatePosition_DateTime = (): number => {
+    const domain = xScale.domain()
+    const lastDate = domain[domain.length - 1]
+    const lastDatePosition = xScale(lastDate)
+    // Match the non-Last Date logic: just add yAxis.size
+    return Number(lastDatePosition + Number(config.yAxis.size))
+  }
+
+  // ============================================
+  // BAR CHART LOGIC
+  // ============================================
 
-      from = xScale(from)
+  const getBarFromValue_Categorical = (region: Region): number => {
+    if (region.fromType === 'Previous Days') {
+      return calculatePreviousDaysFrom(region, 'categorical')
     }
+    return xScale(region.from)
+  }
 
-    if (xAxis.type === 'categorical' && region.fromType !== 'Previous Days') {
-      from = xScale(region.from)
+  const getBarToValue_Categorical = (region: Region): number => {
+    if (region.toType === 'Last Date') {
+      return calculateBarLastDatePosition_Categorical()
     }
+    let to = xScale(region.to)
+    return to + barWidth * totalBarsInGroup
+  }
 
-    if (visualizationType === 'Line' || visualizationType === 'Area Chart') {
-      let scalePadding = Number(config.yAxis.size)
-      if (xScale.bandwidth) {
-        scalePadding += xScale.bandwidth() / 2
-      }
-      from = from + scalePadding
+  const getBarFromValue_Date = (region: Region): number => {
+    if (region.fromType === 'Previous Days') {
+      return calculatePreviousDaysFrom(region, 'date')
     }
+    // For date scale (band), we need to find the value in the domain
+    const date = new Date(region.from)
+    const parsedDate = parseDate(formatDate(config.xAxis.dateParseFormat, date)).getTime()
+
+    // For band scales, find the closest date in the domain
+    const domain = xScale.domain() as number[]
+    const closestDate = findClosestDate(parsedDate, domain, d => d)
+    return xScale(closestDate)
+  }
 
-    if (visualizationType === 'Bar' && config.xAxis.type === 'date-time' && region.fromType === 'Previous Days') {
-      from = from - (barWidth * totalBarsInGroup) / 2
+  const getBarToValue_Date = (region: Region): number => {
+    if (region.toType === 'Last Date') {
+      return calculateBarLastDatePosition_Date()
     }
+    // For date scale (band), we need to find the value in the domain
+    const parsedDate = parseDate(region.to).getTime()
+
+    // For band scales, find the closest date in the domain
+    const domain = xScale.domain() as number[]
+    const closestDate = findClosestDate(parsedDate, domain, d => d)
+    let to = xScale(closestDate)
 
-    return from
+    return to + barWidth * totalBarsInGroup
   }
 
-  const getToValue = region => {
-    let to
+  const getBarFromValue_DateTime = (region: Region): number => {
+    let from: number
+    if (region.fromType === 'Previous Days') {
+      from = calculatePreviousDaysFrom(region, 'date-time')
+    } else {
+      const date = new Date(region.from)
+      const parsedDate = parseDate(formatDate(config.xAxis.dateParseFormat, date)).getTime()
+      from = xScale(parsedDate)
+    }
+    return from - getBarOffset()
+  }
 
-    // when xScale is categorical leading zeros are removed, ie. 03/15/2016 is 3/15/2016
-    if (xAxis.type === 'categorical') {
-      to = xScale(region.to)
+  const getBarToValue_DateTime = (region: Region): number => {
+    if (region.toType === 'Last Date') {
+      return calculateBarLastDatePosition_DateTime()
     }
+    let to = xScale(parseDate(region.to).getTime())
+    return to - getBarOffset()
+  }
 
-    if (isDateScale(xAxis)) {
-      if (!region?.toType || region.toType === 'Fixed') {
-        to = xScale(parseDate(region.to).getTime())
-      }
+  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
+  }
+
+  const calculateBarLastDatePosition_Date = (): number => {
+    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)
+  }
+
+  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)
+  }
 
-      if (visualizationType === 'Bar' || config.visualizationType === 'Combo') {
-        to = region.toType !== 'Last Date' ? xScale(parseDate(region.to).getTime()) + barWidth * totalBarsInGroup : to
+  // ============================================
+  // MAIN ROUTING FUNCTIONS
+  // ============================================
+
+  const getFromValue = (region: Region): number => {
+    const isLine = isLineLike(visualizationType)
+    const isBar = isBarLike(visualizationType)
+
+    // LINE/AREA CHARTS
+    if (isLine) {
+      if (xAxis.type === 'categorical') {
+        return getLineFromValue_Categorical(region)
+      } else if (xAxis.type === 'date') {
+        return getLineFromValue_Date(region)
+      } else if (xAxis.type === 'date-time') {
+        return getLineFromValue_DateTime(region)
       }
     }
-    if (region.toType === 'Last Date') {
-      const lastDate = domain[domain.length - 1]
-      to = Number(
-        xScale(lastDate) +
-          ((visualizationType === 'Bar' || visualizationType === 'Combo') && config.xAxis.type === 'date'
-            ? barWidth * totalBarsInGroup
-            : 0)
-      )
-    }
-
-    if (visualizationType === 'Line' || visualizationType === 'Area Chart') {
-      let scalePadding = Number(config.yAxis.size)
-      if (xScale.bandwidth) {
-        scalePadding += xScale.bandwidth() / 2
+
+    // BAR CHARTS
+    if (isBar) {
+      if (xAxis.type === 'categorical') {
+        return getBarFromValue_Categorical(region)
+      } else if (xAxis.type === 'date') {
+        return getBarFromValue_Date(region)
+      } else if (xAxis.type === 'date-time') {
+        return getBarFromValue_DateTime(region)
       }
-      to = to + scalePadding
     }
 
-    if (visualizationType === 'Bar' && config.xAxis.type === 'date-time' && region.toType !== 'Last Date') {
-      to = to - (barWidth * totalBarsInGroup) / 2
+    return 0
+  }
+
+  const getToValue = (region: Region): number => {
+    const isLine = isLineLike(visualizationType)
+    const isBar = isBarLike(visualizationType)
+
+    // LINE/AREA CHARTS
+    if (isLine) {
+      if (xAxis.type === 'categorical') {
+        return getLineToValue_Categorical(region)
+      } else if (xAxis.type === 'date') {
+        return getLineToValue_Date(region)
+      } else if (xAxis.type === 'date-time') {
+        return getLineToValue_DateTime(region)
+      }
     }
 
-    if ((visualizationType === 'Bar' || visualizationType === 'Combo') && xAxis.type === 'categorical') {
-      to = to + (visualizationType === 'Bar' || visualizationType === 'Combo' ? barWidth * totalBarsInGroup : 0)
+    // BAR CHARTS
+    if (isBar) {
+      if (xAxis.type === 'categorical') {
+        return getBarToValue_Categorical(region)
+      } else if (xAxis.type === 'date') {
+        return getBarToValue_Date(region)
+      } else if (xAxis.type === 'date-time') {
+        return getBarToValue_DateTime(region)
+      }
     }
-    return to
+
+    return 0
   }
 
-  const getWidth = (to, from) => to - from
+  const getWidth = (to: number, from: number): number => Math.max(0, to - from)
 
-  if (regions && orientation === 'vertical') {
-    return regions.map(region => {
-      const from = getFromValue(region)
-      const to = getToValue(region)
-      const width = getWidth(to, from)
+  if (!regions || orientation !== 'vertical') return null
 
-      if (!from) return null
-      if (!to) return null
+  const chartStart = Number(config.yAxis.size || 0)
+  const chartEnd = xMax !== undefined ? chartStart + xMax : chartStart + 1000
 
-      const HighlightedArea = () => {
-        return <rect x={from} y={0} width={width} height={yMax} fill={region.background} opacity={0.3} />
-      }
+  return regions.map((region: Region) => {
+    const from = getFromValue(region)
+    const to = getToValue(region)
 
-      return (
-        <Group
-          height={100}
-          fill='red'
-          className='regions regions-group--line zzz'
-          key={region.label}
-          pointerEvents='none'
-        >
-          <HighlightedArea />
-          <Text x={from + width / 2} y={5} fill={region.color} verticalAnchor='start' textAnchor='middle'>
-            {region.label}
-          </Text>
-        </Group>
-      )
-    })
-  }
+    // Validate computed positions
+    if (from === undefined || isNaN(from) || to === undefined || isNaN(to)) {
+      return null
+    }
+
+    // Clip region to visible chart area
+    const clippedFrom = Math.max(chartStart, from)
+    const clippedTo = Math.min(chartEnd, to)
+    const width = getWidth(clippedTo, clippedFrom)
+
+    if (width <= 0) return null
+
+    return (
+      <Group height={100} fill='red' className='regions regions-group--line' key={region.label} pointerEvents='none'>
+        <HighlightedArea x={clippedFrom} width={width} yMax={yMax} background={region.background} />
+        <Text x={clippedFrom + width / 2} y={5} fill={region.color} verticalAnchor='start' textAnchor='middle'>
+          {region.label}
+        </Text>
+      </Group>
+    )
+  })
 }
 
 export default Regions

package/src/components/ScatterPlot/ScatterPlot.jsx

@@ -42,8 +42,8 @@ const ScatterPlot = ({ xScale, yScale }) => {
         ? `${config.runtime.seriesLabels[s] || ''}<br/>`
         : ''
     }
-    ${config.xAxis.label}: ${formatNumber(item[config.xAxis.dataKey], 'bottom')} <br/>
-    ${config.yAxis.label}: ${formatNumber(item[s], 'left')}<br/>
+    ${config.runtime?.xAxis?.label || config.xAxis.label}: ${formatNumber(item[config.xAxis.dataKey], 'bottom')} <br/>
+    ${config.runtime?.yAxis?.label || config.yAxis.label}: ${formatNumber(item[s], 'left')}<br/>
    ${additionalColumns
      .map(
        ([label, name, options]) =>

package/src/components/SmallMultiples/SmallMultipleTile.tsx

@@ -114,7 +114,11 @@ const SmallMultipleTile: React.FC<SmallMultipleTileProps> = ({
     hideYAxisLabel: !isFirstInRow,
     legend: {
       ...tileConfig.legend,
-      hide: true
+      hide: true // Hide legends for all small multiple tiles
+    },
+    xAxis: {
+      ...tileConfig.xAxis,
+      brushActive: false // Hide brush slider for all small multiple tiles
     },
     showAreaUnderLine: config.smallMultiples?.showAreaUnderLine || false
   }