@cdc/chart 4.26.4 → 4.26.6

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

@@ -0,0 +1,383 @@
+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
+}))
+
+vi.mock('../../helpers/getMinMax', () => ({
+  default: (...args: any[]) => mockGetMinMax(...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.mockReset()
+    mockGetMinMax.mockReturnValue({
+      min: 0,
+      max: 100,
+      leftMax: 100,
+      rightMax: 0
+    })
+  })
+
+  it('uses spaced inline labels as an effective clean-top-tick trigger', () => {
+    mockGetMinMax.mockReturnValue({
+      min: 0,
+      max: 11.25,
+      leftMax: 0,
+      rightMax: 0
+    })
+
+    const result = renderHook(
+      () =>
+        useScales({
+          ...baseProps,
+          maxValue: 11.25,
+          config: createMockConfig({
+            yAxis: {
+              ...createMockConfig().yAxis,
+              autoMaxStrategy: 'default',
+              inlineLabel: ' percent'
+            },
+            runtime: {
+              ...createMockConfig().runtime,
+              yAxis: {
+                ...createMockConfig().runtime.yAxis,
+                numTicks: 3
+              }
+            } as any
+          }),
+          hasSpacedInlineLabel: true
+        }),
+      {
+        wrapper: createWrapper()
+      }
+    )
+
+    expect(result.result.current.max).toBe(15)
+    expect(result.result.current.yTickValues).toEqual([0, 5, 10, 15])
+  })
+
+  it('ignores manual y-axis padding while calculating inline-label headroom', () => {
+    const configWithManualPadding = createMockConfig({
+      yAxis: {
+        ...createMockConfig().yAxis,
+        enablePadding: true,
+        scalePadding: 90
+      }
+    })
+
+    renderHook(
+      () => useScales({ ...baseProps, config: configWithManualPadding, hasSpacedInlineLabel: true }),
+      {
+        wrapper: createWrapper()
+      }
+    )
+
+    expect(mockGetMinMax.mock.calls[0][0].config.yAxis).toMatchObject({
+      enablePadding: false,
+      scalePadding: 0
+    })
+    expect(mockGetMinMax).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not finalize default strategy domains for single-word inline labels', () => {
+    mockGetMinMax.mockReturnValue({
+      min: 0,
+      max: 11.25,
+      leftMax: 0,
+      rightMax: 0
+    })
+
+    const result = renderHook(
+      () =>
+        useScales({
+          ...baseProps,
+          config: createMockConfig({
+            yAxis: {
+              ...createMockConfig().yAxis,
+              autoMaxStrategy: 'default',
+              inlineLabel: '%'
+            },
+            runtime: {
+              ...createMockConfig().runtime,
+              yAxis: {
+                ...createMockConfig().runtime.yAxis,
+                numTicks: 3
+              }
+            } as any
+          }),
+          hasSpacedInlineLabel: false
+        }),
+      {
+        wrapper: createWrapper()
+      }
+    )
+
+    expect(result.result.current.max).toBe(11.25)
+    expect(result.result.current.yTickValues).toBeUndefined()
+  })
+
+  it('keeps shared small-multiple Y domains on the finalized top tick instead of percent padding', () => {
+    mockGetMinMax.mockReturnValue({
+      min: 0,
+      max: 11.25,
+      leftMax: 0,
+      rightMax: 0
+    })
+
+    const result = renderHook(
+      () =>
+        useScales({
+          ...baseProps,
+          config: createMockConfig({
+            smallMultiples: {
+              mode: 'by-column',
+              tileColumn: 'group',
+              independentYAxis: false
+            },
+            yAxis: {
+              ...createMockConfig().yAxis,
+              autoMaxStrategy: 'default',
+              inlineLabel: ' percent'
+            },
+            runtime: {
+              ...createMockConfig().runtime,
+              yAxis: {
+                ...createMockConfig().runtime.yAxis,
+                numTicks: 3
+              }
+            } as any
+          }),
+          maxValue: 11.25,
+          hasSpacedInlineLabel: true
+        }),
+      {
+        wrapper: createWrapper()
+      }
+    )
+
+    expect(result.result.current.max).toBe(15)
+    expect(result.result.current.yTickValues).toEqual([0, 5, 10, 15])
+    expect(result.result.current.yScale.ticks(3).at(-1)).toBe(15)
+  })
+
+  it('does not return explicit tick values when the primary Y-axis max is explicit', () => {
+    mockGetMinMax.mockReturnValue({
+      min: 0,
+      max: 20,
+      leftMax: 0,
+      rightMax: 0
+    })
+
+    const result = renderHook(
+      () =>
+        useScales({
+          ...baseProps,
+          maxValue: 11.25,
+          config: createMockConfig({
+            yAxis: {
+              ...createMockConfig().yAxis,
+              autoMaxStrategy: 'clean-top-tick',
+              inlineLabel: ' percent'
+            },
+            runtime: {
+              ...createMockConfig().runtime,
+              yAxis: {
+                ...createMockConfig().runtime.yAxis,
+                max: '20',
+                numTicks: 3
+              }
+            } as any
+          }),
+          hasSpacedInlineLabel: true
+        }),
+      {
+        wrapper: createWrapper()
+      }
+    )
+
+    expect(result.result.current.max).toBe(20)
+    expect(result.result.current.yTickValues).toBeUndefined()
+  })
+
+  it('does not use spaced inline labels as an effective clean-top-tick trigger for Combo charts', () => {
+    mockGetMinMax.mockReturnValue({
+      min: 0,
+      max: 100,
+      leftMax: 11.25,
+      rightMax: 0
+    })
+
+    const result = renderHook(
+      () =>
+        useScales({
+          ...baseProps,
+          config: createMockConfig({
+            visualizationType: 'Combo',
+            yAxis: {
+              ...createMockConfig().yAxis,
+              autoMaxStrategy: 'default',
+              inlineLabel: ' percent'
+            },
+            runtime: {
+              ...createMockConfig().runtime,
+              yAxis: {
+                ...createMockConfig().runtime.yAxis,
+                numTicks: 3
+              }
+            } as any
+          }),
+          maxValue: 101,
+          hasSpacedInlineLabel: true
+        }),
+      {
+        wrapper: createWrapper()
+      }
+    )
+
+    expect(result.result.current.leftMax).toBe(11.25)
+    expect(result.result.current.yTickValues).toBeUndefined()
+  })
+
+  it('finalizes Combo left-axis ticks when clean-top-tick is explicitly enabled', () => {
+    mockGetMinMax.mockReturnValue({
+      min: 0,
+      max: 100,
+      leftMax: 12,
+      rightMax: 0
+    })
+
+    const result = renderHook(
+      () =>
+        useScales({
+          ...baseProps,
+          config: createMockConfig({
+            visualizationType: 'Combo',
+            yAxis: {
+              ...createMockConfig().yAxis,
+              autoMaxStrategy: 'clean-top-tick'
+            },
+            runtime: {
+              ...createMockConfig().runtime,
+              yAxis: {
+                ...createMockConfig().runtime.yAxis,
+                numTicks: 3
+              }
+            } as any
+          }),
+          maxValue: 101,
+          hasSpacedInlineLabel: false
+        }),
+      {
+        wrapper: createWrapper()
+      }
+    )
+
+    expect(result.result.current.leftMax).toBe(15)
+    expect(result.result.current.yTickValues).toEqual([0, 5, 10, 15])
+  })
+
+  it('uses the selected Y-axis domain rows for min/max calculation', () => {
+    const renderedRows = [{ Date: '2024-01-01', value: 3 }]
+    const domainRows = [
+      { Date: '2024-01-01', value: 3 },
+      { Date: '2024-01-02', value: 12 }
+    ]
+
+    renderHook(
+      () =>
+        useScales({
+          ...baseProps,
+          data: renderedRows,
+          tableData: domainRows,
+          yAxisDomainData: domainRows
+        }),
+      {
+        wrapper: createWrapper()
+      }
+    )
+
+    expect(mockGetMinMax.mock.calls[0][0].data).toBe(domainRows)
+    expect(mockGetMinMax.mock.calls[0][0].tableData).toBe(domainRows)
+  })
+
+  it('passes hasBoundarySuppression through to getMinMax', () => {
+    renderHook(
+      () =>
+        useScales({
+          ...baseProps,
+          config: createMockConfig({ visualizationType: 'Line' }),
+          data: [{ Cases: 10 }],
+          tableData: [{ Cases: 10 }],
+          hasBoundarySuppression: true
+        }),
+      {
+        wrapper: createWrapper()
+      }
+    )
+
+    expect(mockGetMinMax.mock.calls[0][0].hasBoundarySuppression).toBe(true)
+  })
+
+  it('passes hasBoundarySuppression=false when not set', () => {
+    const renderedRows = [{ Cases: 50 }]
+    const stableDomainRows = [{ Cases: 50 }, { Cases: 60 }]
+
+    renderHook(
+      () =>
+        useScales({
+          ...baseProps,
+          config: createMockConfig({ visualizationType: 'Line' }),
+          data: renderedRows,
+          tableData: renderedRows,
+          yAxisDomainData: stableDomainRows
+        }),
+      {
+        wrapper: createWrapper()
+      }
+    )
+
+    expect(mockGetMinMax.mock.calls[0][0].data).toBe(stableDomainRows)
+    expect(mockGetMinMax.mock.calls[0][0].hasBoundarySuppression).toBe(false)
+  })
+})

package/src/hooks/useRightAxis.ts

@@ -1,6 +1,8 @@
 import { scaleLinear } from '@visx/scale'
 import useReduceData from './useReduceData'
 import { TOP_PADDING } from './useScales'
+import { getCleanTopTickMax } from '../helpers/getCleanTopTickMax'
+import { getAxisMaxOverride } from '../helpers/getAxisMaxOverride'
 
 export default function useRightAxis({ config, yMax = 0, data = [] }) {
   const hasRightAxis = config.visualizationType === 'Combo' && config.orientation === 'vertical'
@@ -17,14 +19,36 @@ export default function useRightAxis({ config, yMax = 0, data = [] }) {
     return rightAxisData
   }
 
-  let max = Math.max.apply(null, allRightAxisData(rightSeriesKeys))
+  const rightAxisValues = allRightAxisData(rightSeriesKeys).map(Number).filter(Number.isFinite)
+  const rawRightMax = rightAxisValues.length ? Math.max(...rightAxisValues) : 0
+  let max = rawRightMax
+  const { hasValidMax: hasValidExplicitRightMax, maxNumber: rightMaxNumber } = getAxisMaxOverride({
+    value: config.yAxis.rightMax,
+    minimumValidMax: max
+  })
+  const rightMinRaw = config.yAxis.rightMin
+  const rightMinNumber = Number(rightMinRaw)
+  const hasExplicitRightMin =
+    rightMinRaw !== undefined && rightMinRaw !== null && rightMinRaw !== '' && Number.isFinite(rightMinNumber)
+
+  if (hasValidExplicitRightMax && rightMaxNumber > max) {
+    max = rightMaxNumber
+  }
+
+  if (hasExplicitRightMin && rightMinNumber < minValue) {
+    minValue = rightMinNumber
+  }
+
+  // if there is a bar series & the right axis doesn't include a negative number, default to zero
+  const hasBarSeries = config.runtime?.barSeriesKeys?.length > 0
+  const hasLineSeries = config.runtime?.lineSeriesKeys?.length > 0
 
-  if (config.yAxis.rightMax > max) {
-    max = config.yAxis.rightMax
+  if ((hasBarSeries || hasLineSeries) && minValue > 0) {
+    minValue = 0
   }
 
-  if (config.yAxis.rightMin < minValue) {
-    minValue = config.yAxis.rightMin
+  if (config.yAxis.autoMaxStrategy === 'clean-top-tick' && !hasValidExplicitRightMax) {
+    max = getCleanTopTickMax(max)
   }
 
   // Enforce smallest right axis max so small-data charts don't show misleading decimal ticks
@@ -41,18 +65,11 @@ export default function useRightAxis({ config, yMax = 0, data = [] }) {
   if (smallestRightAxisMax !== null && max < smallestRightAxisMax) {
     max = smallestRightAxisMax
   }
-  // if there is a bar series & the right axis doesn't include a negative number, default to zero
-  const hasBarSeries = config.runtime?.barSeriesKeys?.length > 0
-  const hasLineSeries = config.runtime?.lineSeriesKeys?.length > 0
-
-  if ((hasBarSeries || hasLineSeries) && minValue > 0) {
-    minValue = 0
-  }
 
   const yScaleRight = scaleLinear({
     domain: [minValue, max],
     range: [yMax, TOP_PADDING]
   })
 
-  return { yScaleRight, hasRightAxis }
+  return { yScaleRight, hasRightAxis, rightTickValues: undefined }
 }

package/src/hooks/useScales.ts

@@ -13,10 +13,11 @@ import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 import ConfigContext from '../ConfigContext'
 import { ChartConfig } from '../types/ChartConfig'
 import { ChartContext } from '../types/ChartContext'
-import _ from 'lodash'
-import { getYAxisAutoPadding } from '../helpers/getYAxisAutoPadding'
 import getMinMax from '../helpers/getMinMax'
 import { countNumOfTicks } from '../helpers/countNumOfTicks'
+import { getFinalTopTickMax } from '../helpers/getCleanTopTickMax'
+import { getYAxisFinalizationEligibility } from '../helpers/getYAxisFinalizationEligibility'
+import { getAxisMaxOverride } from '../helpers/getAxisMaxOverride'
 
 const scaleTypes = {
   TIME: 'time',
@@ -32,6 +33,8 @@ type useScaleProps = {
   config: ChartConfig // standard chart config
   data: Object[] // standard data array
   tableData: Object[] // table data for getMinMax
+  yAxisDomainData?: Object[] // data used to calculate Y-axis min/max
+  hasBoundarySuppression?: boolean // whether selected-domain boundaries include suppression markers
   minValue: number // raw minimum value from data
   maxValue: number // raw maximum value from data
   existPositiveValue: boolean // whether data contains positive values
@@ -39,7 +42,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
+  hasSpacedInlineLabel?: boolean
   currentViewport?: string // current viewport for tick calculation
 }
 
@@ -51,11 +54,13 @@ const useScales = (properties: useScaleProps) => {
     config,
     data,
     tableData,
+    yAxisDomainData,
+    hasBoundarySuppression = false,
     minValue,
     maxValue,
     existPositiveValue,
     isAllLine,
-    needsYAxisAutoPadding,
+    hasSpacedInlineLabel = false,
     currentViewport
   } = properties
 
@@ -66,15 +71,30 @@ const useScales = (properties: useScaleProps) => {
   const { visualizationType, xAxis, forestPlot, runtime } = config
   const isForestPlot = visualizationType === 'Forest Plot'
 
-  const minMaxProps = {
+  const { hasValidMax: hasValidExplicitLeftMax } = getAxisMaxOverride({
+    value: config.runtime?.yAxis?.max,
+    minimumValidMax: existPositiveValue ? maxValue : 0
+  })
+  const yAxisFinalizationEligibility = getYAxisFinalizationEligibility({
     config,
+    hasSpacedInlineLabel,
+    hasValidExplicitLeftMax,
+    isHorizontal
+  })
+  const minMaxConfig = yAxisFinalizationEligibility.shouldUseInlineLabelHeadroom
+    ? { ...config, yAxis: { ...config.yAxis, enablePadding: false, scalePadding: 0 } }
+    : config
+
+  const minMaxProps = {
+    config: minMaxConfig,
     minValue,
     maxValue,
     existPositiveValue,
-    data,
+    data: yAxisDomainData || data,
     isAllLine,
     tableData,
-    convertLineToBarGraph
+    convertLineToBarGraph,
+    hasBoundarySuppression
   }
   let { min, max, leftMax, rightMax } = getMinMax(minMaxProps)
 
@@ -90,19 +110,25 @@ 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 } }
-        const result = getMinMax({ ...minMaxProps, config: adjustedConfig })
-        min = result.min
-        max = result.max
-        leftMax = result.leftMax
-        rightMax = result.rightMax
-      }
+  let yTickValues: number[] | undefined
+
+  if (yAxisFinalizationEligibility.shouldFinalizePrimaryYAxis) {
+    const yScaleForTicks = composeYScale({ min, max, yMax, config: minMaxConfig, leftMax })
+    const ticks = yScaleForTicks?.ticks ? yScaleForTicks.ticks(handleNumTicks) : []
+    const currentMax = minMaxConfig.visualizationType === 'Combo' ? leftMax : max
+    const { max: finalizedMax, tickValues } = getFinalTopTickMax({
+      currentMax,
+      rawMax: minMaxConfig.visualizationType === 'Combo' ? currentMax : maxValue,
+      ticks,
+      shouldUseCleanTopTick: yAxisFinalizationEligibility.shouldUseCleanTopTick,
+      headroomMode: yAxisFinalizationEligibility.shouldUseInlineLabelHeadroom ? 'inline-label' : 'none'
+    })
+    yTickValues = tickValues
+
+    if (minMaxConfig.visualizationType === 'Combo') {
+      leftMax = finalizedMax
+    } else {
+      max = finalizedMax
     }
   }
 
@@ -354,7 +380,8 @@ const useScales = (properties: useScaleProps) => {
     min,
     max,
     leftMax,
-    rightMax
+    rightMax,
+    yTickValues
   }
 }
 

package/src/hooks/useTooltip.tsx

@@ -847,7 +847,9 @@ export const useTooltip = props => {
     return (
       <li
         style={style}
-        className={`tooltip-body mb-1 cove-prose ${shouldRenderMarkerSlot ? 'tooltip-body--marker-layout' : ''}`}
+        className={['tooltip-body', 'mb-1', shouldRenderMarkerSlot ? 'tooltip-body--marker-layout' : '']
+          .filter(Boolean)
+          .join(' ')}
       >
         {markerSlot}
         {shouldRenderMarkerSlot ? <span className='tooltip-body-content'>{content}</span> : content}

package/src/index.jsx

@@ -9,12 +9,15 @@ let isEditor = window.location.href.includes('editor=true')
 let isDebug = window.location.href.includes('debug=true')
 
 let domContainer = document.getElementsByClassName('react-container')[0]
+let configUrl = domContainer.dataset.configUrl
+let injectedConfig = domContainer.coveConfig
 
 ReactDOM.createRoot(domContainer).render(
   <React.StrictMode>
     <CdcChart
-      interactionLabel={domContainer.attributes['data-config']?.value}
-      configUrl={domContainer.attributes['data-config'].value}
+      interactionLabel={configUrl}
+      config={injectedConfig}
+      configUrl={injectedConfig ? undefined : configUrl}
       isEditor={isEditor}
       isDebug={isDebug}
     />