@cdc/chart 4.25.11 → 4.26.2

package/src/components/Annotations/components/findNearestDatum.ts

@@ -1,103 +1,93 @@
-const findNearestDatum = ({ data, xScale, yScale, config, xMax, annotationSeriesKey }, xPosition) => {
-  const { xAxis, visualizationType, orientation } = config
-
-  const convertXValueToTimestamp = (xValue, minX, maxX, domain, xScale) => {
-    let ticks = []
-    if (config.xAxis.type === 'date-time') {
-      minX = new Date(minX)
-      maxX = new Date(maxX)
-      domain = domain.map(d => new Date(d))
-      ticks = xScale.ticks().map(d => new Date(d))
-    }
-
-    // Calculate the percentage position of xValue between minX and maxX
-    const percentage = (xValue - minX) / (maxX - minX)
-
-    // Calculate the index in the domain array corresponding to the percentage position
-    const index = Math.round(percentage * (domain.length - 1))
+/**
+ * Finds the nearest data point to a given pixel coordinate.
+ * Uses the visible/filtered data only.
+ *
+ * @param data - The filtered/visible data array (transformedData)
+ * @param xScale - The x scale (can be band, time, or linear)
+ * @param xAxisType - Type of x axis ('categorical', 'date', 'date-time', or 'continuous')
+ * @param xAxisDataKey - The key used for x values in data rows
+ * @param seriesKey - The key used for y values in data rows
+ * @param xPixel - The pixel x coordinate to find nearest datum for
+ * @param parseDate - The parseDate function from ConfigContext (for date/date-time axes)
+ * @returns Object with { x: dataX, y: dataY } or null if not found
+ */
+const findNearestDatum = ({ data, xScale, xAxisType, xAxisDataKey, seriesKey, xPixel, parseDate }) => {
+  if (!data || data.length === 0) {
+    return null
+  }
 
-    if (config.xAxis.type === 'date-time') {
-      return ticks[index]
+  // Handle categorical and date (both use band scales)
+  if (xAxisType === 'categorical' || xAxisType === 'date') {
+    const domain = xScale.domain()
+    const bandwidth = xScale.bandwidth?.() || 0
+
+    // Find closest band center
+    const closestValue = domain
+      .map(value => ({
+        value,
+        distance: Math.abs(xPixel - (xScale(value) + bandwidth / 2))
+      }))
+      .sort((a, b) => a.distance - b.distance)[0]?.value
+
+    // For date axes, closestValue is a timestamp; for categorical, it's the raw value
+    const dataRow = data.find(d =>
+      xAxisType === 'date' && parseDate
+        ? parseDate(d[xAxisDataKey], false)?.getTime() === closestValue
+        : d[xAxisDataKey] === closestValue
+    )
+
+    if (!dataRow) return null
+
+    return {
+      x: dataRow[xAxisDataKey],
+      y: dataRow[seriesKey]
     }
-
-    // Return the timestamp from the domain array at the calculated index
-    return domain[index]
   }
 
-  const getXValueFromCoordinate = x => {
-    if (visualizationType === 'Pie') return
-    if (orientation === 'horizontal') return
-
-    if (config.xAxis.type === 'date-time') {
-      // Calculate the percentage position of xValue between minX and maxX
-      const invertedValue = new Date(xScale.invert(x))
-      const ticks = config.data.map(d => new Date(d[config.xAxis.dataKey]).getTime())
-      let minDistance = Infinity
-      let closestDate = null
-
-      ticks.forEach(timestamp => {
-        const distance = Math.abs(invertedValue.getTime() - timestamp)
-        if (distance < minDistance) {
-          minDistance = distance
-          closestDate = timestamp
+  // Handle date-time (time scale with continuous dates)
+  if (xAxisType === 'date-time') {
+    const targetTime = xScale.invert(xPixel).getTime()
+
+    // Find closest data point by timestamp distance
+    const closestRow = data
+      .map(row => {
+        const rawValue = row[xAxisDataKey]
+        const parsedDate = parseDate ? parseDate(rawValue, false) : new Date(rawValue)
+        const timestamp = parsedDate?.getTime()
+        return {
+          row,
+          rawValue,
+          timestamp,
+          distance: Math.abs(timestamp - targetTime)
         }
       })
+      .sort((a, b) => a.distance - b.distance)[0]
 
-      return new Date(closestDate).getTime()
-    }
+    if (!closestRow) return null
 
-    // Check the type of x equal to point or if the type of xAxis is equal to continuous or date
-    if (
-      config.xAxis.type === 'categorical' ||
-      (visualizationType === 'Combo' && orientation !== 'horizontal' && visualizationType !== 'Forest Plot')
-    ) {
-      const range = xScale.range()[1] - xScale.range()[0]
-      const eachBand = range / (xScale.domain().length + 1)
-
-      let numerator = x
-      const index = Math.floor((Number(numerator) - eachBand / 2) / eachBand)
-      return xScale.domain()[index] // fixes off by 1 error
+    return {
+      x: closestRow.rawValue,
+      y: closestRow.row[seriesKey]
     }
-
-    if (config.xAxis.type === 'date') {
-      const xValue = x // Assuming x is the coordinate on the chart
-      const xTimestamp = convertXValueToTimestamp(x, 0, xMax, xScale.domain(), xScale)
-
-      // Calculate the closest date to the x coordinate
-      let closestDate = null
-      let minDistance = Number.MAX_VALUE
-
-      xScale.domain().forEach(timestamp => {
-        const distance = Math.abs(xTimestamp - timestamp)
-        if (distance < minDistance) {
-          minDistance = distance
-          closestDate = timestamp
-        }
-      })
-
-      return closestDate
-    }
-
-    return x
   }
 
-  const xValue = getXValueFromCoordinate(xPosition - Number(config.yAxis.size || 0))
+  // Handle continuous (linear scale)
+  const invertedValue = xScale.invert(xPixel)
 
-  let closestSeries = []
+  // Find closest data point by numeric distance
+  const closestRow = data
+    .map(row => ({
+      row,
+      distance: Math.abs(Number(row[xAxisDataKey]) - invertedValue)
+    }))
+    .sort((a, b) => a.distance - b.distance)[0]?.row
 
-  if (!xValue) return { x: 0, y: 0 }
+  if (!closestRow) return null
 
-  if (xAxis.type === 'categorical') {
-    closestSeries = config.data.filter(d => d[config.xAxis.dataKey] === xValue)
+  return {
+    x: closestRow[xAxisDataKey],
+    y: closestRow[seriesKey]
   }
-
-  if (xAxis.type === 'date' || xAxis.type === 'date-time') {
-    closestSeries = config.data.filter(d => new Date(d[config.xAxis.dataKey]).getTime() === xValue)
-  }
-
-  const y = closestSeries[0][annotationSeriesKey] // Map each key to its corresponding value in data
-  const x = xValue
-  return { x, y }
 }
 
 export { findNearestDatum }

package/src/components/Annotations/helpers/getVisibleAnnotations.ts

@@ -0,0 +1,38 @@
+/**
+ * Filters annotations to only include those that should be visible based on current data.
+ *
+ * - Fixed-mode annotations are always visible
+ * - Data-mode annotations are only visible if their associated data point
+ *   exists in the current filtered/transformed data
+ *
+ * @param annotations - Array of annotation objects
+ * @param transformedData - The currently visible/filtered data
+ * @param xAxisDataKey - The key used to identify data points on the x-axis
+ * @returns Array of annotations that should be visible
+ */
+const getVisibleAnnotations = (
+  annotations: any[] | undefined,
+  transformedData: any[] | undefined,
+  xAxisDataKey: string
+): any[] => {
+  if (!annotations || !Array.isArray(annotations)) {
+    return []
+  }
+
+  return annotations.filter(annotation => {
+    // Fixed-mode annotations are always visible
+    if (annotation.anchorMode !== 'data') {
+      return true
+    }
+
+    // Data-mode: check if the data point exists in current data
+    if (annotation.dataX === undefined) {
+      return true // No dataX specified, show it
+    }
+
+    const dataSource = transformedData || []
+    return dataSource.some(d => d[xAxisDataKey] === annotation.dataX)
+  })
+}
+
+export { getVisibleAnnotations }

package/src/components/AreaChart/components/AreaChart.Stacked.jsx

@@ -13,8 +13,7 @@ import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 
 const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver, handleTooltipMouseOff }) => {
   // import data from context
-  let { transformedData, config, seriesHighlight, colorScale, rawData, parseDate } = useContext(ConfigContext)
-  const data = config.brush?.active && config.brush.data?.length ? config.brush.data : transformedData
+  let { transformedData: data, config, seriesHighlight, colorScale, rawData, parseDate } = useContext(ConfigContext)
   // Draw transparent bars over the chart to get tooltip data
   // Turn DEBUG on for additional context.
   if (!data) return

package/src/components/Axis/BottomAxis.tsx

@@ -0,0 +1,270 @@
+import React, { useContext } from 'react'
+import { AxisBottom as VisxAxisBottom } from '@visx/axis'
+import { Group } from '@visx/group'
+import { Line } from '@visx/shape'
+import { Text } from '@visx/text'
+import ConfigContext from '../../ConfigContext'
+import { isDateScale } from '@cdc/core/helpers/cove/date'
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
+import { filterAndShiftLinearDateTicks } from '../../helpers/filterAndShiftLinearDateTicks'
+import { getTickValues } from '../../hooks/useScales'
+
+// Constants for bottom axis
+const BOTTOM_LABEL_PADDING = 9
+const X_TICK_LABEL_PADDING = 4.5
+const DEFAULT_TICK_LENGTH = 8
+const TICK_ROTATION_VERTICAL_ANCHOR_THRESHOLD = -50
+const TICK_BUFFER_SPACING = 40
+const MAJOR_TICK_LENGTH = 16
+const MAJOR_LOG_TICK_STROKE_WIDTH = 1.3
+const HORIZONTAL_LOG_DY_OFFSET = 8
+const DYNAMIC_MARGIN_TOP_PADDING = 20
+const BASE_TICK_WIDTH_ACCUMULATOR = 100
+const MULTI_LABEL_ACCUMULATOR = 180
+
+interface BottomAxisProps {
+  axisBottomRef: React.RefObject<SVGGElement>
+  xScale: any
+  yMax: number
+  xMax: number
+  yAxisWidth: number
+  xTickCount: number
+  tickLabelFontSize: number
+  axisLabelFontSize: number
+  handleBottomTickFormatting: (tick: any, index: number, ticks: any[]) => string
+  useDateSpanMonths: boolean
+  dateSpanMonths: number
+  xAxisDataMapped: any[]
+  uniqueXAxisDataMapped: any[]
+  isDateTime: boolean
+  bottomLabelStart: number
+  parentWidth: number
+  xAxisLabelRefs: React.MutableRefObject<any[]>
+  xAxisTitleRef: React.RefObject<SVGTextElement>
+  getManualStep: () => number
+}
+
+const BottomAxis: React.FC<BottomAxisProps> = ({
+  axisBottomRef,
+  xScale,
+  yMax,
+  xMax,
+  yAxisWidth,
+  xTickCount,
+  tickLabelFontSize,
+  axisLabelFontSize,
+  handleBottomTickFormatting,
+  useDateSpanMonths,
+  dateSpanMonths,
+  xAxisDataMapped,
+  uniqueXAxisDataMapped,
+  isDateTime,
+  bottomLabelStart,
+  parentWidth,
+  xAxisLabelRefs,
+  xAxisTitleRef,
+  getManualStep
+}) => {
+  const { config, formatDate } = useContext(ConfigContext)
+  const { runtime, orientation, visualizationType, heights } = config
+
+  const isLogarithmicAxis = config.yAxis.type === 'logarithmic'
+  const isForestPlot = visualizationType === 'Forest Plot'
+
+  // Sort uniqueXAxisDataMapped to match the scale domain order for filterAndShiftLinearDateTicks
+  const sortedUniqueXAxisData = config.xAxis.sortByRecentDate
+    ? [...uniqueXAxisDataMapped].sort((a, b) => Number(b) - Number(a))
+    : [...uniqueXAxisDataMapped].sort((a, b) => Number(a) - Number(b))
+  const GET_TEXT_WIDTH_FONT = `normal ${tickLabelFontSize}px Nunito, sans-serif`
+
+  return (
+    <VisxAxisBottom
+      innerRef={axisBottomRef}
+      top={
+        runtime.horizontal && visualizationType !== 'Forest Plot'
+          ? Number(heights.horizontal) + Number(config.xAxis.axisPadding)
+          : visualizationType === 'Forest Plot'
+          ? yMax + Number(config.xAxis.axisPadding)
+          : yMax
+      }
+      left={visualizationType !== 'Forest Plot' ? yAxisWidth : 0}
+      label={runtime.xAxis.label}
+      tickFormat={handleBottomTickFormatting}
+      scale={xScale}
+      stroke='#333'
+      numTicks={useDateSpanMonths ? dateSpanMonths : xTickCount}
+      tickStroke='#333'
+      tickValues={
+        config.runtime.xAxis.manual
+          ? getTickValues(xAxisDataMapped, xScale, isDateTime ? xTickCount : getManualStep(), config)
+          : config.runtime.xAxis.type === 'date'
+          ? xAxisDataMapped
+          : // For date-time with small datasets (e.g., brush-filtered), use explicit tick values
+          // to ensure each data point can have a tick. Otherwise, visx may generate too few.
+          // Use uniqueXAxisDataMapped to handle cases where multiple series share x-axis values
+          isDateTime && uniqueXAxisDataMapped.length > 0 && uniqueXAxisDataMapped.length <= (xTickCount || 15)
+          ? uniqueXAxisDataMapped
+          : undefined
+      }
+    >
+      {props => {
+        const hasDynamicCategory = config.series.some(s => s.dynamicCategory)
+
+        // For these charts, we generated all ticks in tickValues above, and now need to filter/shift them
+        // so the last tick is always labeled
+        // Use sortedUniqueXAxisData to match the scale's sorted domain for correct index calculations
+        if (config.runtime.xAxis.type === 'date' && !config.runtime.xAxis.manual && !hasDynamicCategory) {
+          props.ticks = filterAndShiftLinearDateTicks(config, props, sortedUniqueXAxisData, formatDate)
+        }
+
+        const distanceBetweenTicks =
+          useDateSpanMonths &&
+          xScale
+            .ticks(xTickCount)
+            .map(t =>
+              props.ticks.findIndex(
+                tick => (typeof tick.value === 'number' ? tick.value : tick.value.getTime()) === t.getTime()
+              )
+            )
+            .slice(0, 2)
+            .reduce((acc, curr) => curr - acc)
+
+        // filter out every [distanceBetweenTicks] tick starting from the end, so the last tick is always labeled
+        const filteredTicks = useDateSpanMonths
+          ? [...props.ticks]
+              .reverse()
+              .filter((_, i) => i % distanceBetweenTicks === 0)
+              .reverse()
+              .map((tick, i, arr) => ({
+                ...tick,
+                // reformat in case showYearsOnce, since first month of year may have changed
+                formattedValue: handleBottomTickFormatting(tick.value, i, arr)
+              }))
+          : props.ticks
+
+        const axisMaxHeight = bottomLabelStart + BOTTOM_LABEL_PADDING
+
+        const containsMultipleWords = inputString => /\s/.test(inputString)
+        const isMultiLabel = filteredTicks.some(tick => containsMultipleWords(tick.value))
+
+        // Calculate sumOfTickWidth here, before map function
+        const longestTickLength = Math.max(
+          ...filteredTicks.map(tick => getTextWidth(tick.formattedValue, GET_TEXT_WIDTH_FONT))
+        )
+        const accumulator = isMultiLabel ? MULTI_LABEL_ACCUMULATOR : BASE_TICK_WIDTH_ACCUMULATOR
+
+        const textWidths = filteredTicks.map(tick => getTextWidth(tick.formattedValue, GET_TEXT_WIDTH_FONT))
+        const sumOfTickWidth = textWidths.reduce((a, b) => a + b, accumulator)
+        const spaceBetweenEachTick = (xMax - sumOfTickWidth) / (filteredTicks.length - 1)
+        const bufferBetweenTicks = TICK_BUFFER_SPACING
+        const maxLengthOfTick = parentWidth / filteredTicks.length - X_TICK_LABEL_PADDING * 2 - bufferBetweenTicks
+
+        // Determine the position of each tick
+        let positions = [0] // The first tick is at position 0
+        for (let i = 1; i < textWidths.length; i++) {
+          // The position of each subsequent tick is the position of the previous tick
+          // plus the width of the previous tick and the space
+          positions[i] = positions[i - 1] + textWidths[i - 1] + spaceBetweenEachTick
+        }
+        // calculate the end of x axis box
+        const axisBBox = axisBottomRef?.current?.getBBox().height
+        // TODO: Technical debt - This mutation is read by parent/sibling components.
+        // Should be refactored to use proper React state management or callbacks.
+        config.xAxis.axisBBox = axisBBox
+
+        // force wrap it last tick is close to the end of the axis
+        const lastTickWidth = textWidths[textWidths.length - 1]
+        const lastTickPosition = positions[positions.length - 1] + lastTickWidth
+        const lastTickEnd = lastTickPosition + lastTickWidth / 2
+        const lastTickEndThreshold = xMax - lastTickWidth
+
+        const areTicksTouching =
+          textWidths.some(textWidth => textWidth > maxLengthOfTick) || // Force wrap if any tick is too long
+          config.xAxis.showYearsOnce || // Force wrap when showing years once so it's easier to read
+          lastTickEnd > lastTickEndThreshold // Force wrap it last tick is close to the end of the axis
+
+        const dynamicMarginTop =
+          areTicksTouching && config.isResponsiveTicks
+            ? longestTickLength + DEFAULT_TICK_LENGTH + DYNAMIC_MARGIN_TOP_PADDING
+            : 0
+
+        // TODO: Technical debt - These mutations are read by parent/sibling components.
+        // Should be refactored to use proper React state management or callbacks.
+        config.dynamicMarginTop = dynamicMarginTop
+        config.xAxis.tickWidthMax = longestTickLength
+
+        // Compute effective tick rotations without mutating config
+        const effectiveXAxisTickRotation =
+          config.isResponsiveTicks && config.orientation === 'vertical' ? 0 : config.xAxis.tickRotation
+
+        return (
+          <Group className='bottom-axis' width={parentWidth}>
+            {filteredTicks.map((tick, i, propsTicks) => {
+              // when using LogScale show major ticks values only
+              const showTick = String(tick.value).startsWith('1') || tick.value === 0.1 ? 'block' : 'none'
+              const tickLength = showTick === 'block' ? MAJOR_TICK_LENGTH : DEFAULT_TICK_LENGTH
+              const to = { x: tick.to.x, y: tickLength }
+              const limitedWidth = 100 / propsTicks.length
+
+              // Configure rotation using effective values (computed above without mutations)
+              const tickRotation =
+                config.isResponsiveTicks && areTicksTouching
+                  ? -Number(config.xAxis.maxTickRotation) || -90
+                  : -Number(config.runtime.xAxis.tickRotation)
+
+              return (
+                <Group key={`vx-tick-${tick.value}-${i}`} className={'vx-axis-tick'}>
+                  {!config.xAxis.hideTicks && (
+                    <Line
+                      from={tick.from}
+                      to={orientation === 'horizontal' && isLogarithmicAxis ? to : tick.to}
+                      stroke={config.xAxis.tickColor}
+                      strokeWidth={showTick === 'block' && isLogarithmicAxis ? MAJOR_LOG_TICK_STROKE_WIDTH : 1}
+                    />
+                  )}
+                  {!config.xAxis.hideLabel && (
+                    <Text
+                      innerRef={el => (xAxisLabelRefs.current[i] = el)}
+                      dy={config.orientation === 'horizontal' && isLogarithmicAxis ? HORIZONTAL_LOG_DY_OFFSET : 0}
+                      display={config.orientation === 'horizontal' && isLogarithmicAxis ? showTick : 'block'}
+                      x={tick.to.x}
+                      y={tick.to.y + X_TICK_LABEL_PADDING}
+                      angle={tickRotation}
+                      verticalAnchor={tickRotation < TICK_ROTATION_VERTICAL_ANCHOR_THRESHOLD ? 'middle' : 'start'}
+                      textAnchor={tickRotation ? 'end' : 'middle'}
+                      width={
+                        areTicksTouching && !config.isResponsiveTicks && !Number(effectiveXAxisTickRotation)
+                          ? limitedWidth
+                          : undefined
+                      }
+                      fill={config.xAxis.tickLabelColor}
+                      fontSize={tickLabelFontSize}
+                    >
+                      {tick.formattedValue}
+                    </Text>
+                  )}
+                </Group>
+              )
+            })}
+            {!config.xAxis.hideAxis && <Line from={props.axisFromPoint} to={props.axisToPoint} stroke='#333' />}
+            <Text
+              innerRef={xAxisTitleRef}
+              className='x-axis-title-label'
+              x={xMax / 2}
+              y={isForestPlot ? 0 /* set via ref */ : axisMaxHeight}
+              textAnchor='middle'
+              verticalAnchor='start'
+              fontWeight='bold'
+              fill={config.xAxis.labelColor}
+              fontSize={axisLabelFontSize}
+            >
+              {!config.hideXAxisLabel ? props.label : null}
+            </Text>
+          </Group>
+        )
+      }}
+    </VisxAxisBottom>
+  )
+}
+
+export default BottomAxis

package/src/components/Axis/Categorical.Axis.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react'
 import { BarStack, Line } from '@visx/shape'
-import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale'
+import { scaleBand, scaleOrdinal } from '@visx/scale'
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
 import ConfigContext from '../../ConfigContext'
@@ -9,7 +9,7 @@ import createBarElement from '@cdc/core/components/createBarElement'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
 
-const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
+const CategoricalYAxis = ({ yScale, yMax, leftSize, xMax }) => {
   const { config } = useContext(ConfigContext)
 
   const { orientation } = config
@@ -24,6 +24,9 @@ const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
 
   const categories = config.yAxis?.categories
 
+  // Get max from the yScale domain
+  const max = yScale.domain()[1]
+
   const createDataShape = categories => {
     const categoryObj = [...categories].reduce((acc, item) => {
       acc[item.label] = item.height
@@ -68,11 +71,7 @@ const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
     range: [0, leftSize]
   })
 
-  const yScale = scaleLinear({
-    domain: [0, max],
-    range: [yMax, 0],
-    clamp: true
-  })
+  // Use the yScale passed from useScales instead of creating a new one
 
   const colorScale = scaleOrdinal({
     domain: categories.map(d => d?.label),