@cdc/chart 4.26.3 → 4.26.5

package/src/helpers/tooltipHelpers.ts

@@ -0,0 +1,176 @@
+import { type ChartConfig } from '../types/ChartConfig'
+import { type ColorScale } from '../types/ChartContext'
+
+export type TooltipRowKind = 'heading' | 'series' | 'extra'
+
+export type TooltipRow = {
+  key: string
+  value: string | number
+  axisPosition?: string
+  kind: TooltipRowKind
+  markerColor?: string | null
+  markerShape?: 'circle' | 'square'
+  seriesKey?: string
+}
+
+export type TooltipDisplayData = {
+  data: TooltipRow[]
+  dataXPosition: number
+  dataYPosition: number
+  useMarkerColumn: boolean
+}
+
+type RawTooltipBodyRow = {
+  text: string
+  markerColor?: string | null
+  markerShape?: 'circle' | 'square'
+}
+
+export type TooltipMarker = {
+  markerColor: string
+  markerShape: 'circle' | 'square'
+}
+
+const TOOLTIP_MARKER_SUPPORTED_TYPES = new Set(['Line', 'Area Chart', 'Combo', 'Bar', 'Scatter Plot'])
+
+export const getTooltipMarkerShape = (config: ChartConfig): 'circle' | 'square' =>
+  config.legend?.style === 'boxes' ? 'square' : 'circle'
+
+export const shouldUseTooltipLegendMarkers = (config: ChartConfig): boolean => {
+  const legendItemCount =
+    config.runtime?.seriesLabelsAll?.length || config.runtime?.seriesKeys?.length || config.series?.length || 0
+  const sourceLegendVisible = config.legend?.tooltipLegendVisible ?? !config.legend?.hide
+
+  return (
+    TOOLTIP_MARKER_SUPPORTED_TYPES.has(config.visualizationType) &&
+    legendItemCount > 1 &&
+    sourceLegendVisible &&
+    config.legend?.style !== 'gradient' &&
+    !config.legend?.groupBy
+  )
+}
+
+export const getTooltipMarkerColor = (
+  config: ChartConfig,
+  colorScale: ColorScale | undefined,
+  seriesKey?: string
+): string | null => {
+  if (!colorScale || !seriesKey) return null
+
+  const colorInput = config.runtime?.seriesLabels?.[seriesKey] || seriesKey
+  const color = colorScale(colorInput)
+  return typeof color === 'string' ? color : null
+}
+
+export const getTooltipSeriesMarker = (
+  config: ChartConfig,
+  colorScale: ColorScale | undefined,
+  seriesKey?: string
+): TooltipMarker | null => {
+  if (!shouldUseTooltipLegendMarkers(config)) {
+    return null
+  }
+
+  const markerColor = getTooltipMarkerColor(config, colorScale, seriesKey)
+  if (!markerColor) {
+    return null
+  }
+
+  return {
+    markerColor,
+    markerShape: getTooltipMarkerShape(config)
+  }
+}
+
+export const buildTooltipRow = (row: TooltipRow): TooltipRow => row
+
+const getMarkerSignature = ({
+  markerColor,
+  markerShape = 'circle'
+}: {
+  markerColor?: string | null
+  markerShape?: 'circle' | 'square'
+}): string | null => {
+  if (!markerColor) return null
+  return `${markerColor}::${markerShape}`
+}
+
+export const tooltipShouldUseMarkerColumn = (
+  rows: Array<{ markerColor?: string | null; markerShape?: 'circle' | 'square' }>
+): boolean => {
+  const signatures = rows.map(getMarkerSignature).filter(Boolean)
+
+  if (signatures.length === 0) {
+    return false
+  }
+
+  return new Set(signatures).size === signatures.length
+}
+
+export const tooltipHasMarkerColumn = (rows: TooltipRow[]): boolean =>
+  tooltipShouldUseMarkerColumn(rows.filter(row => row.kind === 'series'))
+
+export const buildTooltipBodyRowHtml = ({
+  text,
+  markerColor,
+  markerShape = 'circle',
+  useMarkerColumn
+}: RawTooltipBodyRow & {
+  useMarkerColumn: boolean
+}): string => {
+  if (!useMarkerColumn) {
+    return `<li class="tooltip-body">${text}</li>`
+  }
+
+  const marker = markerColor
+    ? `<span class="tooltip-marker-swatch tooltip-marker-swatch--${markerShape}" style="background-color: ${markerColor};" aria-hidden="true"></span>`
+    : ''
+
+  return `<li class="tooltip-body tooltip-body--marker-layout"><span class="tooltip-marker-slot" aria-hidden="true">${marker}</span><span class="tooltip-body-content">${text}</span></li>`
+}
+
+export const buildTooltipListHtml = ({
+  heading,
+  bodyRows
+}: {
+  heading: string
+  bodyRows: RawTooltipBodyRow[]
+}): string => {
+  const hasMarkerColumn = tooltipShouldUseMarkerColumn(bodyRows)
+  const renderedRows = bodyRows
+    .filter(row => row.text !== undefined && row.text !== null && row.text !== '')
+    .map(row => buildTooltipBodyRowHtml({ ...row, useMarkerColumn: hasMarkerColumn }))
+    .join('')
+
+  return `<ul><li class="tooltip-heading">${heading}</li>${renderedRows}</ul>`
+}
+
+export const buildSeriesTooltipListHtml = ({
+  config,
+  colorScale,
+  heading,
+  seriesKey,
+  seriesText,
+  extraRows = []
+}: {
+  config: ChartConfig
+  colorScale?: ColorScale
+  heading: string
+  seriesKey?: string
+  seriesText: string
+  extraRows?: string[]
+}): string => {
+  const marker = getTooltipSeriesMarker(config, colorScale, seriesKey)
+
+  return buildTooltipListHtml({
+    heading,
+    bodyRows: [
+      {
+        text: seriesText,
+        markerColor: marker?.markerColor,
+        markerShape: marker?.markerShape
+      },
+      ...extraRows.filter(Boolean).map(text => ({ text }))
+    ]
+  })
+}

package/src/hooks/tests/useScales.test.tsx

@@ -0,0 +1,105 @@
+import React from 'react'
+import { renderHook } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import ConfigContext from '../../ConfigContext'
+import useScales from '../useScales'
+import { createMockChartContext, createMockConfig } from '../../components/LinearChart/tests/mockConfigContext'
+
+const mockGetMinMax = vi.fn(() => ({
+  min: 0,
+  max: 100,
+  leftMax: 100,
+  rightMax: 0
+}))
+
+const mockGetYAxisAutoPadding = vi.fn(() => 10)
+
+vi.mock('../../helpers/getMinMax', () => ({
+  default: (...args: any[]) => mockGetMinMax(...args)
+}))
+
+vi.mock('../../helpers/getYAxisAutoPadding', () => ({
+  getYAxisAutoPadding: (...args: any[]) => mockGetYAxisAutoPadding(...args)
+}))
+
+const config = createMockConfig({
+  runtime: {
+    ...createMockConfig().runtime,
+    yAxis: {
+      ...createMockConfig().runtime.yAxis,
+      numTicks: 5
+    }
+  } as any
+})
+
+const createWrapper = () => {
+  const context = createMockChartContext(config)
+
+  return ({ children }: React.PropsWithChildren) => (
+    <ConfigContext.Provider value={context}>{children}</ConfigContext.Provider>
+  )
+}
+
+const baseProps = {
+  config,
+  data: [],
+  tableData: [],
+  minValue: 0,
+  maxValue: 100,
+  existPositiveValue: true,
+  isAllLine: true,
+  xAxisDataMapped: [1, 2, 3],
+  xMax: 300,
+  yMax: 200,
+  currentViewport: 'lg' as const
+}
+
+describe('useScales', () => {
+  beforeEach(() => {
+    mockGetMinMax.mockClear()
+    mockGetYAxisAutoPadding.mockClear()
+  })
+
+  it('allows repeated padding passes for inline-label mode', () => {
+    renderHook(() => useScales({ ...baseProps, yAxisAutoPaddingMode: 'inline-label' }), {
+      wrapper: createWrapper()
+    })
+
+    expect(mockGetYAxisAutoPadding).toHaveBeenCalledTimes(3)
+  })
+
+  it('runs a single padding pass for top-title mode', () => {
+    renderHook(() => useScales({ ...baseProps, yAxisAutoPaddingMode: 'top-title' }), {
+      wrapper: createWrapper()
+    })
+
+    expect(mockGetYAxisAutoPadding).toHaveBeenCalledTimes(1)
+  })
+
+  it('ignores manual y-axis padding while calculating auto-padding', () => {
+    const configWithManualPadding = createMockConfig({
+      yAxis: {
+        ...createMockConfig().yAxis,
+        enablePadding: true,
+        scalePadding: 90
+      }
+    })
+
+    renderHook(() => useScales({ ...baseProps, config: configWithManualPadding, yAxisAutoPaddingMode: 'top-title' }), {
+      wrapper: createWrapper()
+    })
+
+    expect(mockGetMinMax.mock.calls[0][0].config.yAxis).toMatchObject({
+      enablePadding: false,
+      scalePadding: 0
+    })
+    expect(mockGetYAxisAutoPadding.mock.calls[0][4].yAxis).toMatchObject({
+      enablePadding: false,
+      scalePadding: 0
+    })
+    expect(mockGetMinMax.mock.calls[1][0].config.yAxis).toMatchObject({
+      enablePadding: true,
+      scalePadding: 10
+    })
+  })
+})

package/src/hooks/useHighlightedBars.ts

@@ -5,21 +5,14 @@ import { ChartConfig } from '../types/ChartConfig'
 export const useHighlightedBars = (config: ChartConfig, updateConfig: (config) => void) => {
   const { formatDate, parseDate } = useContext(ConfigContext)
 
-  let highlightedSeries = [] // only allow single series for highlights
-  let highlightedSeriesKey = ''
-  let highlightedBarValues = []
-  let highlightedSeriesValues = []
-
-  if (config.series?.length > 0 && config.data) {
-    highlightedSeries = config.series[0] // only allow single series for highlights
-    highlightedSeriesKey = config.series[0].dataKey
-    highlightedBarValues = config.highlightedBarValues
-    highlightedSeriesValues = config.data.map(item => item[config.xAxis.dataKey])
-  } else {
-    highlightedSeries = [] // only allow single series for highlights
-    highlightedSeriesKey = ''
-    highlightedBarValues = []
-    highlightedSeriesValues = []
+  const highlightedSeries = config.series?.length > 0 && config.data ? config.series[0] : [] // only allow single series for highlights
+  const highlightedSeriesKey = config.series?.length > 0 && config.data ? config.series[0].dataKey : ''
+  const highlightedBarValues = config.series?.length > 0 && config.data ? config.highlightedBarValues : []
+
+  const getHighlightedSeriesValues = () => {
+    if (!(config.series?.length > 0 && config.data)) return []
+
+    return config.data.map(item => item[config.xAxis.dataKey])
   }
 
   const handleUpdateHighlightedBorderWidth = (e, index) => {
@@ -144,7 +137,7 @@ export const useHighlightedBars = (config: ChartConfig, updateConfig: (config) =
     highlightedSeries,
     highlightedSeriesKey,
     highlightedBarValues,
-    highlightedSeriesValues,
+    getHighlightedSeriesValues,
     handleUpdateHighlightedBar,
     handleAddNewHighlightedBar,
     handleRemoveHighlightedBar,

package/src/hooks/useProgrammaticTooltip.ts

@@ -3,7 +3,9 @@ import { useRef, useImperativeHandle, ForwardedRef } from 'react'
 interface UseProgrammaticTooltipProps {
   svgRef: ForwardedRef<SVGAElement>
   getCoordinateFromXValue: (xAxisValue: any) => number
+  getXValueFromCoordinate: (xCoordinate: number) => any
   config: any
+  yAxisWidth: number
   setPoint: (point: { x: number; y: number }) => void
   setShowHoverLine: (show: boolean) => void
   handleTooltipMouseOver: (event: MouseEvent, additionalChartData?: any) => void
@@ -18,7 +20,9 @@ interface UseProgrammaticTooltipProps {
 export const useProgrammaticTooltip = ({
   svgRef,
   getCoordinateFromXValue,
+  getXValueFromCoordinate,
   config,
+  yAxisWidth,
   setPoint,
   setShowHoverLine,
   handleTooltipMouseOver,
@@ -62,7 +66,16 @@ export const useProgrammaticTooltip = ({
           }
 
           const pixelX = getCoordinateFromXValue(xAxisValue)
-          const adjustedX = pixelX + Number(config.yAxis.size || 0)
+          const resolvedXValue = Number.isFinite(pixelX) ? getXValueFromCoordinate(pixelX) : null
+
+          if (!Number.isFinite(pixelX) || resolvedXValue !== xAxisValue) {
+            hideTooltip()
+            setShowHoverLine(false)
+            setSynchronizedXValue?.(null)
+            return
+          }
+
+          const adjustedX = pixelX + yAxisWidth
 
           const svgRect = internalSvgRef.current!.getBoundingClientRect()
 
@@ -103,7 +116,8 @@ export const useProgrammaticTooltip = ({
     },
     [
       getCoordinateFromXValue,
-      config.yAxis.size,
+      getXValueFromCoordinate,
+      yAxisWidth,
       config.visualizationType,
       setPoint,
       setShowHoverLine,

package/src/hooks/useScales.ts

@@ -15,6 +15,7 @@ import { ChartConfig } from '../types/ChartConfig'
 import { ChartContext } from '../types/ChartContext'
 import _ from 'lodash'
 import { getYAxisAutoPadding } from '../helpers/getYAxisAutoPadding'
+import { YAxisAutoPaddingMode } from '../helpers/getYAxisAutoPaddingMode'
 import getMinMax from '../helpers/getMinMax'
 import { countNumOfTicks } from '../helpers/countNumOfTicks'
 
@@ -39,7 +40,7 @@ type useScaleProps = {
   xAxisDataMapped: Object[] // array of x axis date/category items
   xMax: number // chart svg width
   yMax: number // chart svg height
-  needsYAxisAutoPadding?: boolean // whether Y-axis needs auto padding for label overflow
+  yAxisAutoPaddingMode?: YAxisAutoPaddingMode // why Y-axis auto padding should run
   currentViewport?: string // current viewport for tick calculation
 }
 
@@ -55,7 +56,7 @@ const useScales = (properties: useScaleProps) => {
     maxValue,
     existPositiveValue,
     isAllLine,
-    needsYAxisAutoPadding,
+    yAxisAutoPaddingMode = 'none',
     currentViewport
   } = properties
 
@@ -65,9 +66,13 @@ const useScales = (properties: useScaleProps) => {
   const isHorizontal = config.orientation === 'horizontal'
   const { visualizationType, xAxis, forestPlot, runtime } = config
   const isForestPlot = visualizationType === 'Forest Plot'
+  const shouldApplyYAxisAutoPadding = yAxisAutoPaddingMode !== 'none' && !isHorizontal
+  const minMaxConfig = shouldApplyYAxisAutoPadding
+    ? { ...config, yAxis: { ...config.yAxis, enablePadding: false, scalePadding: 0 } }
+    : config
 
   const minMaxProps = {
-    config,
+    config: minMaxConfig,
     minValue,
     maxValue,
     existPositiveValue,
@@ -91,12 +96,17 @@ const useScales = (properties: useScaleProps) => {
   const handleNumTicks = isForestPlot ? config.data.length : yTickCount
 
   // Apply auto-padding if needed
-  if (needsYAxisAutoPadding && !isHorizontal) {
-    for (let i = 0; i < 3; i++) {
-      const scale = composeYScale({ min, max, yMax, config, leftMax })
-      const padding = getYAxisAutoPadding(scale, handleNumTicks, maxValue, minValue, config)
-      if (i === 0 || padding > 0) {
-        const adjustedConfig = { ...config, yAxis: { ...config.yAxis, scalePadding: padding, enablePadding: true } }
+  if (shouldApplyYAxisAutoPadding) {
+    const maxPasses = yAxisAutoPaddingMode === 'inline-label' ? 3 : 1
+
+    for (let i = 0; i < maxPasses; i++) {
+      const scale = composeYScale({ min, max, yMax, config: minMaxConfig, leftMax })
+      const padding = getYAxisAutoPadding(scale, handleNumTicks, maxValue, minValue, minMaxConfig, yAxisAutoPaddingMode)
+      if (padding > 0 || (maxPasses > 1 && i === 0)) {
+        const adjustedConfig = {
+          ...minMaxConfig,
+          yAxis: { ...minMaxConfig.yAxis, scalePadding: padding, enablePadding: true }
+        }
         const result = getMinMax({ ...minMaxProps, config: adjustedConfig })
         min = result.min
         max = result.max

package/src/hooks/useSmallMultipleSynchronization.ts

@@ -13,6 +13,7 @@ import ConfigContext from '../ConfigContext'
 export const useSmallMultipleSynchronization = (
   xMax: number,
   yMax: number,
+  yAxisWidth: number,
   getXValueFromCoordinate: (x: number) => any
 ) => {
   const { config, handleSmallMultipleHover } = useContext(ConfigContext)
@@ -25,8 +26,6 @@ export const useSmallMultipleSynchronization = (
     }
   }
 
-  const yAxisSize = Number(config.yAxis.size || 0)
-
   const onMouseMove = (event: any) => {
     const svgRect = event.currentTarget.getBoundingClientRect()
     const x = event.clientX - svgRect.left
@@ -34,10 +33,10 @@ export const useSmallMultipleSynchronization = (
 
     // Only trigger synchronized tooltips when mouse is over the valid chart area
     // (to the right of the Y-axis and within chart bounds)
-    const isOverChartArea = x >= yAxisSize && x <= yAxisSize + xMax && y >= 0 && y <= yMax
+    const isOverChartArea = x >= yAxisWidth && x <= yAxisWidth + xMax && y >= 0 && y <= yMax
 
     if (isOverChartArea) {
-      const xAxisValue = getXValueFromCoordinate(x - yAxisSize)
+      const xAxisValue = getXValueFromCoordinate(x - yAxisWidth)
       if (xAxisValue !== null && xAxisValue !== undefined) {
         handleSmallMultipleHover(xAxisValue, y)
         return