@cdc/chart 4.26.5 → 4.26.7

package/src/hooks/useScales.ts

@@ -13,11 +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 { YAxisAutoPaddingMode } from '../helpers/getYAxisAutoPaddingMode'
 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',
@@ -33,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
@@ -40,7 +42,7 @@ type useScaleProps = {
   xAxisDataMapped: Object[] // array of x axis date/category items
   xMax: number // chart svg width
   yMax: number // chart svg height
-  yAxisAutoPaddingMode?: YAxisAutoPaddingMode // why Y-axis auto padding should run
+  hasSpacedInlineLabel?: boolean
   currentViewport?: string // current viewport for tick calculation
 }
 
@@ -52,11 +54,13 @@ const useScales = (properties: useScaleProps) => {
     config,
     data,
     tableData,
+    yAxisDomainData,
+    hasBoundarySuppression = false,
     minValue,
     maxValue,
     existPositiveValue,
     isAllLine,
-    yAxisAutoPaddingMode = 'none',
+    hasSpacedInlineLabel = false,
     currentViewport
   } = properties
 
@@ -66,8 +70,18 @@ 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
+
+  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
 
@@ -76,10 +90,11 @@ const useScales = (properties: useScaleProps) => {
     minValue,
     maxValue,
     existPositiveValue,
-    data,
+    data: yAxisDomainData || data,
     isAllLine,
     tableData,
-    convertLineToBarGraph
+    convertLineToBarGraph,
+    hasBoundarySuppression
   }
   let { min, max, leftMax, rightMax } = getMinMax(minMaxProps)
 
@@ -95,24 +110,25 @@ const useScales = (properties: useScaleProps) => {
   })
   const handleNumTicks = isForestPlot ? config.data.length : yTickCount
 
-  // Apply auto-padding if needed
-  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
-        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
     }
   }
 
@@ -364,7 +380,8 @@ const useScales = (properties: useScaleProps) => {
     min,
     max,
     leftMax,
-    rightMax
+    rightMax,
+    yTickValues
   }
 }
 

package/src/hooks/useTooltip.tsx

@@ -8,7 +8,11 @@ import { isDateScale } from '@cdc/core/helpers/cove/date'
 // Third-party library imports
 import { localPoint } from '@visx/event'
 import { bisector } from 'd3-array'
-import _ from 'lodash'
+import find from 'lodash/find'
+import omit from 'lodash/omit'
+import pick from 'lodash/pick'
+import round from 'lodash/round'
+import uniq from 'lodash/uniq'
 import { getHorizontalBarHeights } from '../components/BarChart/helpers/getBarHeights'
 import {
   findColumnConfigByName,
@@ -148,11 +152,11 @@ export const useTooltip = props => {
       const columnName = column.name || colKey
       if (seriesOwnedColumnNames.includes(columnName)) continue
 
+      // Extra columns own their affixes; explicit blanks prevent fallback to the value-axis units.
       const formattingParams = {
-        addColPrefix: column.prefix,
-        addColSuffix: column.suffix,
-        addColRoundTo: column.roundToPlace || '',
-        addColCommas: column.commas
+        addColPrefix: '',
+        addColSuffix: '',
+        ...getSeriesColumnFormattingParams(column)
       }
 
       const pieColumnData = additionalChartData?.data?.[column.name]
@@ -328,7 +332,7 @@ export const useTooltip = props => {
 
         const runtimeSeries =
           config.tooltips.singleSeries && visualizationType === 'Line'
-            ? [_.find(config.runtime.series, d => d.dataKey === singleSeriesValue)]
+            ? [find(config.runtime.series, d => d.dataKey === singleSeriesValue)]
             : config.runtime.series
 
         runtimeSeries?.forEach(series => {
@@ -569,7 +573,7 @@ export const useTooltip = props => {
     const barsWithHeights = getHorizontalBarHeights<{ group }>(config, barGroups)
 
     const barGroup = findClosest(
-      barsWithHeights.map(d => [d, _.round(d.y)]),
+      barsWithHeights.map(d => [d, round(d.y)]),
       mouseY
     )
 
@@ -580,7 +584,7 @@ export const useTooltip = props => {
       const seriesWithY = config.series.map((c, i) => [c, config.barHeight * i]) as [Object, number][]
       const hoveredSeries = findClosest(seriesWithY, subGroupMouseY)
       const exludeColumns = config.series.filter(s => s.dataKey !== hoveredSeries.dataKey).map(s => s.dataKey)
-      const dataColumn = _.omit(columns[0], exludeColumns)
+      const dataColumn = omit(columns[0], exludeColumns)
       return dataColumn
     } else {
       const columnsWithY = columns.map((c, i) => [c, config.barHeight * i]) as [Object, number][]
@@ -661,7 +665,7 @@ export const useTooltip = props => {
     const includedSeries = runtimeSeries.map(item => item.dataKey)
     includedSeries.push(config.xAxis.dataKey)
     // get dynamic category series
-    const dynamicDataCategories = _.uniq(
+    const dynamicDataCategories = uniq(
       config.runtime.series.flatMap(series => {
         if (series.dynamicCategory) {
           return [series.dynamicCategory, series.originalDataKey]
@@ -701,7 +705,7 @@ export const useTooltip = props => {
       }
     }
 
-    return dataToSearch.map(d => _.pick(d, includedSeries))
+    return dataToSearch.map(d => pick(d, includedSeries))
   }
 
   /**
@@ -847,7 +851,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/store/chart.reducer.ts

@@ -2,7 +2,6 @@ import ChartActions from './chart.actions'
 import defaults from '../data/initial-state.js'
 import { ChartConfig, type ViewportSize } from '../types/ChartConfig'
 import { DimensionsType } from '@cdc/core/types/Dimensions'
-import _ from 'lodash'
 
 type ChartState = {
   isLoading: boolean

package/src/test/CdcChart.dataTable.test.tsx

@@ -0,0 +1,216 @@
+import React from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import CdcChart from '../CdcChartComponent'
+
+const dataTableProps = vi.hoisted(() => {
+  Object.defineProperty((globalThis as any).HTMLCanvasElement.prototype, 'getContext', {
+    configurable: true,
+    value: () => ({
+      measureText: (text = '') => ({ width: String(text).length * 8 })
+    })
+  })
+
+  return [] as any[]
+})
+
+vi.mock('@cdc/core/components/DataTable', async () => {
+  const React = await vi.importActual<typeof import('react')>('react')
+
+  return {
+    default: props => {
+      dataTableProps.push(props)
+      return React.createElement('div', { 'data-testid': 'data-table-probe' })
+    }
+  }
+})
+
+vi.mock('@visx/responsive/lib/components/ParentSize', () => ({
+  default: ({ children }) => children({ width: 640, height: 360 })
+}))
+
+vi.mock('../components/LinearChart', async () => {
+  const React = await vi.importActual<typeof import('react')>('react')
+
+  return {
+    default: React.forwardRef(() => React.createElement('div', { 'data-testid': 'mock-linear-chart' }))
+  }
+})
+
+describe('CdcChart data table dataset wiring', () => {
+  beforeEach(() => {
+    dataTableProps.length = 0
+  })
+
+  it('passes the selected dashboard dataset metadata to DataTable', async () => {
+    const dataset = {
+      data: [{ category: 'A', value: 1 }],
+      dataFileName: 'stale-chart-source.json',
+      dataFileSourceType: 'url',
+      dataUrl: '/wcms/vizdata/chart-source.json',
+      runtimeDataUrl: '/wcms/vizdata/chart-runtime.json'
+    }
+
+    render(
+      <CdcChart
+        config={
+          {
+            type: 'chart',
+            visualizationType: 'Bar',
+            title: 'Dataset-backed Chart',
+            dataKey: 'chartDataset',
+            data: dataset.data,
+            xAxis: { dataKey: 'category' },
+            series: [{ dataKey: 'value' }],
+            table: {
+              show: true,
+              expanded: true,
+              download: true,
+              label: 'Data Table',
+              indexLabel: ''
+            }
+          } as any
+        }
+        datasets={{ chartDataset: dataset } as any}
+        isDashboard={true}
+        interactionLabel='chart-dataset-test'
+      />
+    )
+
+    await waitFor(() => expect(dataTableProps.length).toBeGreaterThan(0))
+
+    expect(dataTableProps.at(-1).dataConfig).toMatchObject({
+      runtimeDataUrl: '/wcms/vizdata/chart-runtime.json'
+    })
+  })
+
+  it('keeps chart footnotes visible when the data table is collapsed by default', async () => {
+    render(
+      <CdcChart
+        config={
+          {
+            type: 'chart',
+            visualizationType: 'Bar',
+            title: 'Footnote-backed Chart',
+            data: [{ category: 'A', value: 1 }],
+            xAxis: { dataKey: 'category' },
+            series: [{ dataKey: 'value' }],
+            legacyFootnotes: 'Legacy chart footnote',
+            footnotes: {
+              staticFootnotes: [{ text: 'Structured chart footnote' }]
+            },
+            table: {
+              show: true,
+              expanded: false,
+              download: true,
+              label: 'Data Table',
+              indexLabel: ''
+            }
+          } as any
+        }
+        interactionLabel='chart-footnote-collapse-test'
+      />
+    )
+
+    await waitFor(() => {
+      expect(dataTableProps.at(-1)?.expandDataTable).toBe(false)
+    })
+
+    expect(await screen.findByText('Legacy chart footnote')).toBeInTheDocument()
+    expect(await screen.findByText('Structured chart footnote')).toBeInTheDocument()
+  })
+
+  it('passes custom category order to the chart-owned data table runtime data', async () => {
+    render(
+      <CdcChart
+        config={
+          {
+            type: 'chart',
+            visualizationType: 'Bar',
+            title: 'Custom Category Order Chart',
+            data: [
+              { category: 'A', value: 1 },
+              { category: 'D', value: 4 },
+              { category: 'C', value: 3 },
+              { category: 'L', value: 12 }
+            ],
+            xAxis: {
+              type: 'categorical',
+              dataKey: 'category',
+              categoryOrderType: 'custom',
+              categoryOrder: ['A', 'C', 'D', 'L']
+            },
+            series: [{ dataKey: 'value' }],
+            table: {
+              show: true,
+              expanded: true,
+              download: true,
+              label: 'Data Table',
+              indexLabel: ''
+            }
+          } as any
+        }
+        interactionLabel='chart-category-order-table-test'
+      />
+    )
+
+    await waitFor(() => expect(dataTableProps.length).toBeGreaterThan(0))
+
+    expect(dataTableProps.at(-1).runtimeData.map(row => row.category)).toEqual(['A', 'C', 'D', 'L'])
+  })
+
+  it('updates metadata-backed chart title and text when dataMetadata changes and data does not', async () => {
+    const data = [{ category: 'A', value: 1 }]
+    const config = {
+      type: 'chart',
+      visualizationType: 'Bar',
+      title: 'Chart {{source}}',
+      introText: 'Intro {{source}}',
+      legend: {
+        label: 'Legend <strong>{{source}}</strong>',
+        description: 'Legend description <strong>{{source}}</strong>'
+      },
+      data,
+      dataMetadata: {},
+      enableMarkupVariables: true,
+      markupVariables: [
+        {
+          sourceType: 'metadata',
+          name: 'Source',
+          tag: '{{source}}',
+          metadataKey: 'source',
+          conditions: [],
+          addCommas: false
+        }
+      ],
+      xAxis: { dataKey: 'category' },
+      series: [{ dataKey: 'value' }],
+      table: {
+        show: false,
+        expanded: false,
+        label: 'Data Table',
+        indexLabel: ''
+      }
+    } as any
+
+    const { container, rerender } = render(<CdcChart config={config} interactionLabel='chart-metadata-test' />)
+
+    expect(await screen.findByText('Chart')).toBeInTheDocument()
+
+    rerender(
+      <CdcChart
+        config={{
+          ...config,
+          dataMetadata: { source: 'June file' }
+        }}
+        interactionLabel='chart-metadata-test'
+      />
+    )
+
+    expect(await screen.findByText('Chart June file')).toBeInTheDocument()
+    expect(screen.getByText('Intro June file')).toBeInTheDocument()
+    expect(container.textContent).toContain('Legend June file')
+    expect(container.textContent).toContain('Legend description June file')
+    expect(screen.getAllByText('June file', { selector: 'strong' }).length).toBeGreaterThanOrEqual(2)
+  })
+})

package/src/types/ChartConfig.ts

@@ -1,4 +1,4 @@
-import { Axis } from '@cdc/core/types/Axis'
+import { type Axis } from '@cdc/core/types/Axis'
 import { MarkupConfig } from '@cdc/core/types/MarkupVariable'
 import { type ForestPlotConfigSettings } from './ForestPlot'
 import { type HorizonConfigSettings } from './Horizon'
@@ -18,6 +18,8 @@ type General = CoreGeneral & {
     isReversed?: boolean
     customColors?: string[]
     customColorsOrdered?: string[]
+    colorAssignmentMode?: 'ordered' | 'by-value'
+    colorAssignments?: { key: string; color: string }[]
   }
   useIntelligentLineChartLabels?: boolean
 }
@@ -83,6 +85,7 @@ export interface PreliminaryDataItem {
   hideLineStyle: boolean
   circleSize: number
   displayGray: boolean
+  weight?: number
 }
 
 type DataFormat = {
@@ -191,6 +194,8 @@ export type AllChartsConfig = {
   footnotes: Footnotes
   forestPlot: ForestPlotConfigSettings
   formattedData: Object[] & { urlFiltered: boolean }
+  originalFormattedData?: Object[]
+  yAxisDomainData?: Object[]
   heatmap?: HeatMapConfig
   heights: {
     vertical: number

package/src/types/ChartContext.ts

@@ -39,6 +39,7 @@ type SharedChartContext = {
   svgRef?: React.RefObject<SVGSVGElement>
   handleSmallMultipleHover?: (xAxisValue: any, yCoordinate: number) => void
   visibleAnnotations?: Annotation[]
+  yAxisTickValues?: number[]
 }
 
 // Line Chart Specific Context
@@ -58,6 +59,7 @@ type LineChartContext = SharedChartContext & {
   transformedData: TransformedData[]
   updateConfig: Function
   visualizationType: 'Line'
+  yAxisDomainData?: Object[]
   colorPalettes: Record<string, string[]>
   twoColorPalette: Record<string, string[]>
 }
@@ -88,4 +90,5 @@ export type ChartContext =
       transformedData?: TransformedData[]
       twoColorPalette: any
       updateConfig?: Function
+      yAxisDomainData?: Object[]
     })

package/src/helpers/getYAxisAutoPadding.ts

@@ -1,55 +0,0 @@
-import { ChartConfig } from '../types/ChartConfig'
-import { YAxisAutoPaddingMode } from './getYAxisAutoPaddingMode'
-
-/**
- * Calculates the Y-axis auto padding to prevent data labels from overlapping with axis tick labels.
- * This is used when inline labels are enabled and there's potential for overlap.
- *
- * @param yScale - The D3 scale object for the Y-axis (must have .ticks() method)
- * @param handleNumTicks - The number of ticks to display on the axis
- * @param maxValue - The maximum data value (from useReduceData)
- * @param minValue - The minimum data value (from useReduceData)
- * @param config - The chart configuration object
- * @returns The calculated auto padding percentage (0-100+), or 0 if no padding needed
- */
-export const getYAxisAutoPadding = (
-  yScale: any,
-  handleNumTicks: number,
-  maxValue: number,
-  minValue: number,
-  config: ChartConfig,
-  mode: Exclude<YAxisAutoPaddingMode, 'none'>
-): number => {
-  // Early returns for cases where auto padding is not needed
-  if (!yScale?.ticks || config.orientation === 'horizontal' || config.yAxis?.max) {
-    return 0
-  }
-
-  const ticks = yScale.ticks(handleNumTicks)
-
-  if (!Array.isArray(ticks) || ticks.length === 0) {
-    return 0
-  }
-
-  // minimum percentage of the max value that the distance should be from the top grid line
-  const MINIMUM_DISTANCE_PERCENTAGE = 0.025
-
-  const topGridLine = Math.max(...ticks)
-  const needsPaddingThreshold = topGridLine - maxValue * MINIMUM_DISTANCE_PERCENTAGE
-  const maxValueIsGreaterThanThreshold = maxValue > needsPaddingThreshold
-
-  if (!maxValueIsGreaterThanThreshold) return 0
-
-  const tickGap = ticks.length === 1 ? ticks[0] : ticks[1] - ticks[0]
-  const nextTick = Math.max(...ticks) + tickGap
-  const divideBy = minValue < 0 ? maxValue / 2 : maxValue
-  let calculatedPadding = (nextTick - maxValue) / divideBy
-
-  if (mode === 'inline-label' && calculatedPadding <= MINIMUM_DISTANCE_PERCENTAGE) {
-    calculatedPadding += tickGap / divideBy
-  }
-
-  /* sometimes even though the padding is getting to the next tick exactly,
-  d3 still doesn't show the tick. we add 0.1 to ensure to tip it over the edge */
-  return calculatedPadding * 100 + 0.1
-}

package/src/helpers/getYAxisAutoPaddingMode.ts

@@ -1,17 +0,0 @@
-import { ChartConfig } from '../types/ChartConfig'
-
-export type YAxisAutoPaddingMode = 'none' | 'inline-label' | 'top-title'
-
-export const getYAxisAutoPaddingMode = (config: ChartConfig): YAxisAutoPaddingMode => {
-  const inlineLabel = config.yAxis?.inlineLabel
-  if (inlineLabel && inlineLabel.includes(' ')) {
-    return 'inline-label'
-  }
-
-  const yAxisTitle = String(config.yAxis?.label || config.runtime?.yAxis?.label || '').trim()
-  if (config.yAxis?.titlePlacement === 'top' && yAxisTitle && !config.hideYAxisLabel) {
-    return 'top-title'
-  }
-
-  return 'none'
-}

package/src/helpers/tests/getYAxisAutoPadding.test.ts

@@ -1,37 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { getYAxisAutoPadding } from '../getYAxisAutoPadding'
-import { createMockConfig } from '../../components/LinearChart/tests/mockConfigContext'
-
-const baseConfig = createMockConfig({
-  orientation: 'vertical'
-})
-
-describe('getYAxisAutoPadding', () => {
-  it('preserves the extra-tick escalation for inline-label mode', () => {
-    const yScale = {
-      ticks: () => [0, 1, 2]
-    }
-
-    const padding = getYAxisAutoPadding(yScale, 3, 2.95, 0, baseConfig, 'inline-label')
-
-    expect(padding).toBeCloseTo(35.69, 2)
-  })
-
-  it('returns the single-pass padding for top-title mode', () => {
-    const yScale = {
-      ticks: () => [0, 1, 2]
-    }
-
-    const padding = getYAxisAutoPadding(yScale, 3, 2.95, 0, baseConfig, 'top-title')
-
-    expect(padding).toBeCloseTo(1.79, 2)
-  })
-
-  it('returns 0 when the data is not close enough to the top tick', () => {
-    const yScale = {
-      ticks: () => [0, 50, 100]
-    }
-
-    expect(getYAxisAutoPadding(yScale, 3, 80, 0, baseConfig, 'top-title')).toBe(0)
-  })
-})