@cdc/chart 4.26.6 → 4.26.7

package/src/helpers/getPiePercent.ts

@@ -1,13 +1,13 @@
-import _ from 'lodash'
+import toNumber from 'lodash/toNumber'
 
 export const getPiePercent = (data: Record<string, any>[], seriesKey: string): Record<string, any>[] => {
   // getonly the numeric values for each seriesKey
-  const numericValues = data.map(row => _.toNumber(row[seriesKey])).filter(v => !Number.isNaN(v))
+  const numericValues = data.map(row => toNumber(row[seriesKey])).filter(v => !Number.isNaN(v))
 
   const total = numericValues.reduce((sum, v) => sum + v, 0)
 
   return data.map(row => {
-    const raw = _.toNumber(row[seriesKey])
+    const raw = toNumber(row[seriesKey])
     if (Number.isNaN(raw)) {
       // skip non-numeric / undefined
       return row

package/src/helpers/isConvertLineToBarGraph.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash'
+import uniq from 'lodash/uniq'
 
 export const isConvertLineToBarGraph = (configObj, filteredData) => {
   const { allowLineToBarGraph, series, visualizationType, xAxis } = configObj
@@ -6,6 +6,6 @@ export const isConvertLineToBarGraph = (configObj, filteredData) => {
   const lineWithLessThanThreePoints = visualizationType === 'Line' && filteredData?.length < 3
   const isDynamicSeries = series?.some(series => series.dynamicCategory)
   const isDynamicWithLessThanThreePoints =
-    isDynamicSeries && _.uniq(filteredData?.map(data => data[xAxis.dataKey])).length <= 2
+    isDynamicSeries && uniq(filteredData?.map(data => data[xAxis.dataKey])).length <= 2
   return lineWithLessThanThreePoints || isDynamicWithLessThanThreePoints
 }

package/src/helpers/seriesColumnSettings.ts

@@ -12,13 +12,22 @@ type ColumnFormattingParams = {
 
 const hasOwn = (object: object, key: keyof Column) => Object.prototype.hasOwnProperty.call(object, key)
 const isNonEmptyString = (value: unknown) => typeof value === 'string' && value !== ''
+const getNumericRoundToPlace = (value: Column['roundToPlace']): number | undefined => {
+  if (value === undefined || value === null || (typeof value === 'string' && value.trim() === '')) {
+    return undefined
+  }
+
+  const numericValue = Number(value)
+  if (!Number.isFinite(numericValue)) return undefined
+
+  return Math.max(0, Math.min(20, Math.round(numericValue)))
+}
 
 export const createDefaultSeriesColumnConfig = (columnName: string): Column => ({
   name: columnName,
   label: columnName,
   prefix: '',
   suffix: '',
-  roundToPlace: 0,
   commas: false,
   dataTable: true,
   order: undefined,
@@ -70,12 +79,18 @@ export const upsertSeriesColumnConfig = (
 ): ChartColumns => {
   const existingEntry = findColumnConfigByName(columns, seriesKey)
   const columnKey = existingEntry?.columnKey || seriesKey
-  const nextColumnConfig = {
+  const nextColumnConfig: Partial<Column> = {
     ...(existingEntry?.columnConfig || {}),
     ...updates,
     name: seriesKey
   }
 
+  Object.entries(updates).forEach(([key, value]) => {
+    if (value === undefined) {
+      delete nextColumnConfig[key as keyof Column]
+    }
+  })
+
   if (
     nextColumnConfig.label === undefined &&
     !hasOwn(existingEntry?.columnConfig || {}, 'label') &&
@@ -104,7 +119,10 @@ export const getSeriesColumnFormattingParams = (columnConfig?: Partial<Column>):
   }
 
   if (hasOwn(columnConfig, 'roundToPlace')) {
-    formattingParams.addColRoundTo = columnConfig.roundToPlace ?? 0
+    const numericRoundToPlace = getNumericRoundToPlace(columnConfig.roundToPlace)
+    if (numericRoundToPlace !== undefined) {
+      formattingParams.addColRoundTo = numericRoundToPlace
+    }
   }
 
   if (hasOwn(columnConfig, 'commas')) {

package/src/helpers/sizeHelpers.ts

@@ -1,5 +1,3 @@
-import { clamp } from 'lodash'
-
 import { isMobileHeightViewport } from '@cdc/core/helpers/viewports'
 import { ChartConfig, ViewportSize } from '../types/ChartConfig'
 import { EDITOR_WIDTH } from '@cdc/core/helpers/constants'

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

@@ -0,0 +1,57 @@
+import { describe, expect, it } from 'vitest'
+import { getOrderedCategoryValues, isCustomCategoryOrderActive, sortByCategoryOrder } from '../categoryOrder'
+
+describe('categoryOrder helpers', () => {
+  const data = [
+    { category: 'A', value: 1 },
+    { category: 'D', value: 4 },
+    { category: 'C', value: 3 },
+    { category: 'D', value: 5 },
+    { category: 'L', value: 12 }
+  ]
+
+  it('detects custom category order only for categorical axes with configured values', () => {
+    expect(
+      isCustomCategoryOrderActive({
+        xAxis: { type: 'categorical', dataKey: 'category', categoryOrderType: 'custom', categoryOrder: ['C'] } as any
+      })
+    ).toBe(true)
+
+    expect(
+      isCustomCategoryOrderActive({
+        xAxis: { type: 'date', dataKey: 'category', categoryOrderType: 'custom', categoryOrder: ['C'] } as any
+      })
+    ).toBe(false)
+  })
+
+  it('sorts rows by configured category order and keeps duplicate rows stable', () => {
+    const sorted = sortByCategoryOrder(data, {
+      xAxis: {
+        type: 'categorical',
+        dataKey: 'category',
+        categoryOrderType: 'custom',
+        categoryOrder: ['A', 'C', 'D', 'L']
+      } as any
+    })
+
+    expect(sorted.map(row => row.category)).toEqual(['A', 'C', 'D', 'D', 'L'])
+    expect(sorted.map(row => row.value)).toEqual([1, 3, 4, 5, 12])
+  })
+
+  it('appends values missing from custom order in source order', () => {
+    const sorted = sortByCategoryOrder(data, {
+      xAxis: {
+        type: 'categorical',
+        dataKey: 'category',
+        categoryOrderType: 'custom',
+        categoryOrder: ['C']
+      } as any
+    })
+
+    expect(sorted.map(row => row.category)).toEqual(['C', 'A', 'D', 'D', 'L'])
+  })
+
+  it('merges configured category order with newly discovered values', () => {
+    expect(getOrderedCategoryValues(data, 'category', ['C', 'A'])).toEqual(['C', 'A', 'D', 'L'])
+  })
+})

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

@@ -53,6 +53,23 @@ describe('seriesColumnSettings', () => {
     })
   })
 
+  it('removes fields when an update value is undefined', () => {
+    const updatedColumns = upsertSeriesColumnConfig(
+      {
+        cases: { name: 'cases', label: 'Cases', roundToPlace: 2 }
+      },
+      'cases',
+      { roundToPlace: undefined }
+    )
+
+    expect(updatedColumns).toEqual({
+      cases: {
+        name: 'cases',
+        label: 'Cases'
+      }
+    })
+  })
+
   it('does not persist display defaults when creating a new series-owned column config', () => {
     expect(upsertSeriesColumnConfig({}, 'cases', { label: 'Cases' })).toEqual({
       cases: {
@@ -62,6 +79,15 @@ describe('seriesColumnSettings', () => {
     })
   })
 
+  it('does not create a rounding override when updating unrelated display settings', () => {
+    expect(upsertSeriesColumnConfig({}, 'cases', { dataTable: false })).toEqual({
+      cases: {
+        name: 'cases',
+        dataTable: false
+      }
+    })
+  })
+
   it('only returns explicit formatting overrides and preserves falsey values', () => {
     expect(
       getSeriesColumnFormattingParams({
@@ -92,6 +118,40 @@ describe('seriesColumnSettings', () => {
     })
   })
 
+  it('ignores blank rounding overrides so global formatting can apply', () => {
+    expect(
+      getSeriesColumnFormattingParams({
+        roundToPlace: '',
+        commas: false
+      })
+    ).toEqual({
+      addColCommas: false
+    })
+  })
+
+  it('normalizes string rounding overrides to numbers', () => {
+    expect(
+      getSeriesColumnFormattingParams({
+        roundToPlace: '0',
+        commas: false
+      })
+    ).toEqual({
+      addColRoundTo: 0,
+      addColCommas: false
+    })
+  })
+
+  it('ignores invalid rounding overrides so global formatting can apply', () => {
+    expect(
+      getSeriesColumnFormattingParams({
+        roundToPlace: 'abc',
+        commas: false
+      })
+    ).toEqual({
+      addColCommas: false
+    })
+  })
+
   it('returns undefined when no formatting overrides were explicitly configured', () => {
     expect(getSeriesColumnFormattingParams({ label: 'Cases' })).toBeUndefined()
   })

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

@@ -27,6 +27,29 @@ const createComboConfig = () =>
   })
 
 describe('useRightAxis', () => {
+  it('does not render a right axis for vertical Combo charts with only left-axis series', () => {
+    const config = createMockConfig({
+      visualizationType: 'Combo',
+      orientation: 'vertical',
+      series: [leftSeries],
+      yAxis: {
+        ...createMockConfig().yAxis,
+        rightHideAxis: true
+      },
+      runtime: {
+        ...createMockConfig().runtime,
+        series: [leftSeries],
+        seriesKeys: ['Cases'],
+        barSeriesKeys: ['Cases'],
+        lineSeriesKeys: []
+      } as any
+    })
+
+    const result = renderHook(() => useRightAxis({ config, yMax: 100, data: [{ Cases: 5 }] }))
+
+    expect(result.result.current.hasRightAxis).toBe(false)
+  })
+
   it('builds the right-axis scale from the supplied domain rows', () => {
     const config = createComboConfig()
     const renderedRows = [{ Cases: 5, Rate: 12 }]
@@ -57,7 +80,22 @@ describe('useRightAxis', () => {
     expect(result.result.current.rightTickValues).toBeUndefined()
   })
 
-  it('does not finalize right-axis ticks from the inherited mixed Combo min', () => {
+  it('auto-starts positive right-axis data at zero without depending on series-type runtime keys', () => {
+    const config = {
+      ...createComboConfig(),
+      runtime: {
+        ...createComboConfig().runtime,
+        barSeriesKeys: [],
+        lineSeriesKeys: []
+      }
+    }
+
+    const result = renderHook(() => useRightAxis({ config, yMax: 100, data: [{ Cases: 5, Rate: 25 }] }))
+
+    expect(result.result.current.yScaleRight.domain()).toEqual([0, 25])
+  })
+
+  it('does not let left-axis negative data affect the right-axis minimum', () => {
     const config = {
       ...createComboConfig(),
       yAxis: {
@@ -68,10 +106,113 @@ describe('useRightAxis', () => {
 
     const result = renderHook(() => useRightAxis({ config, yMax: 100, data: [{ Cases: -100, Rate: 6 }] }))
 
-    expect(result.result.current.yScaleRight.domain()).toEqual([-100, 6])
+    expect(result.result.current.yScaleRight.domain()).toEqual([0, 6])
     expect(result.result.current.rightTickValues).toBeUndefined()
   })
 
+  it('honors a positive rightMin below the right-axis data minimum', () => {
+    const config = {
+      ...createComboConfig(),
+      yAxis: {
+        ...createComboConfig().yAxis,
+        rightMin: '90',
+        rightMax: '100'
+      }
+    }
+
+    const result = renderHook(() => useRightAxis({ config, yMax: 100, data: [{ Cases: 5, Rate: 95 }] }))
+
+    expect(result.result.current.yScaleRight.domain()).toEqual([90, 100])
+  })
+
+  it('uses formatted numeric strings when calculating the right-axis domain', () => {
+    const config = createComboConfig()
+
+    const result = renderHook(() =>
+      useRightAxis({
+        config,
+        yMax: 100,
+        data: [
+          { Cases: 5, Rate: '$1,000' },
+          { Cases: 6, Rate: '2,500' }
+        ]
+      })
+    )
+
+    expect(result.result.current.yScaleRight.domain()).toEqual([0, 2500])
+  })
+
+  it('ignores a rightMin above the right-axis data minimum and defaults positive domains to zero', () => {
+    const config = {
+      ...createComboConfig(),
+      yAxis: {
+        ...createComboConfig().yAxis,
+        rightMin: '98'
+      }
+    }
+
+    const result = renderHook(() => useRightAxis({ config, yMax: 100, data: [{ Cases: 5, Rate: 95 }] }))
+
+    expect(result.result.current.yScaleRight.domain()).toEqual([0, 95])
+  })
+
+  it('uses a negative minimum when right-axis data is negative', () => {
+    const config = createComboConfig()
+
+    const result = renderHook(() =>
+      useRightAxis({
+        config,
+        yMax: 100,
+        data: [
+          { Cases: 5, Rate: -12 },
+          { Cases: 6, Rate: -3 }
+        ]
+      })
+    )
+
+    expect(result.result.current.yScaleRight.domain()).toEqual([-12, -3])
+  })
+
+  it('ignores values that are empty after right-axis numeric cleanup', () => {
+    const config = createComboConfig()
+
+    const result = renderHook(() =>
+      useRightAxis({
+        config,
+        yMax: 100,
+        data: [
+          { Cases: 5, Rate: '$' },
+          { Cases: 6, Rate: '-12' }
+        ]
+      })
+    )
+
+    expect(result.result.current.yScaleRight.domain()).toEqual([-12, -12])
+  })
+
+  it('honors a negative rightMin below the right-axis data minimum', () => {
+    const config = {
+      ...createComboConfig(),
+      yAxis: {
+        ...createComboConfig().yAxis,
+        rightMin: '-20'
+      }
+    }
+
+    const result = renderHook(() =>
+      useRightAxis({
+        config,
+        yMax: 100,
+        data: [
+          { Cases: 5, Rate: -12 },
+          { Cases: 6, Rate: -3 }
+        ]
+      })
+    )
+
+    expect(result.result.current.yScaleRight.domain()).toEqual([-20, -3])
+  })
+
   it('does not round the right-axis max when rightMax is explicit', () => {
     const config = {
       ...createComboConfig(),

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

@@ -106,12 +106,9 @@ describe('useScales', () => {
       }
     })
 
-    renderHook(
-      () => useScales({ ...baseProps, config: configWithManualPadding, hasSpacedInlineLabel: true }),
-      {
-        wrapper: createWrapper()
-      }
-    )
+    renderHook(() => useScales({ ...baseProps, config: configWithManualPadding, hasSpacedInlineLabel: true }), {
+      wrapper: createWrapper()
+    })
 
     expect(mockGetMinMax.mock.calls[0][0].config.yAxis).toMatchObject({
       enablePadding: false,

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

@@ -0,0 +1,132 @@
+import React from 'react'
+import { act, renderHook } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import ConfigContext from '../../ConfigContext'
+import { createMockChartContext, createMockConfig } from '../../components/LinearChart/tests/mockConfigContext'
+import { useTooltip } from '../useTooltip'
+
+vi.mock('@visx/event', () => ({
+  localPoint: () => ({ x: 5, y: 5 })
+}))
+
+describe('useTooltip', () => {
+  const showTooltip = vi.fn()
+  const hideTooltip = vi.fn()
+  const row = {
+    'Cause of death': 'Hypertensive disorders of pregnancy',
+    Percentage: 22,
+    Count: 146
+  }
+
+  const baseConfig = createMockConfig()
+  const config = createMockConfig({
+    visualizationType: 'Bar',
+    orientation: 'vertical',
+    xAxis: {
+      ...baseConfig.xAxis,
+      type: 'categorical',
+      dataKey: 'Cause of death'
+    },
+    yAxis: {
+      ...baseConfig.yAxis,
+      inlineLabel: ''
+    },
+    general: {
+      showMissingDataLabel: true,
+      hideNullValue: true
+    } as any,
+    series: [{ dataKey: 'Percentage', type: 'Bar', axis: 'Left', tooltip: true }] as any,
+    columns: {
+      Count: {
+        name: 'Count',
+        label: 'Count',
+        prefix: '',
+        suffix: '',
+        roundToPlace: 0,
+        commas: true,
+        dataTable: true,
+        tooltips: true
+      }
+    } as any,
+    dataFormat: {
+      abbreviated: false,
+      bottomAbbreviated: false,
+      bottomPrefix: '',
+      bottomRoundTo: 0,
+      bottomSuffix: '',
+      bottomCommas: false,
+      commas: false,
+      prefix: '',
+      preserveOriginalDecimals: false,
+      rightPrefix: '',
+      rightRoundTo: 0,
+      rightSuffix: '',
+      roundTo: 1,
+      suffix: '%'
+    } as any,
+    runtime: {
+      ...baseConfig.runtime,
+      xAxis: {
+        ...baseConfig.runtime.xAxis,
+        type: 'categorical',
+        dataKey: 'Cause of death'
+      },
+      yAxis: {
+        ...baseConfig.runtime.yAxis,
+        dataKey: 'Percentage'
+      },
+      series: [{ dataKey: 'Percentage', type: 'Bar', axis: 'Left', tooltip: true }],
+      seriesKeys: ['Percentage'],
+      seriesLabelsAll: ['Percentage']
+    } as any
+  })
+
+  const xScale = Object.assign(
+    vi.fn(() => 0),
+    {
+      domain: () => ['Hypertensive disorders of pregnancy'],
+      bandwidth: () => 10
+    }
+  )
+  const yScale = Object.assign(
+    vi.fn(() => 0),
+    {
+      domain: () => ['Hypertensive disorders of pregnancy']
+    }
+  )
+
+  const wrapper = ({ children }: React.PropsWithChildren) => (
+    <ConfigContext.Provider value={createMockChartContext(config, { tableData: [row] })}>
+      {children}
+    </ConfigContext.Provider>
+  )
+
+  beforeEach(() => {
+    showTooltip.mockClear()
+    hideTooltip.mockClear()
+  })
+
+  it('does not apply the left-axis suffix to an additional tooltip column', () => {
+    const { result } = renderHook(
+      () =>
+        useTooltip({
+          xScale,
+          yScale,
+          showTooltip,
+          hideTooltip,
+          yAxisWidth: 0
+        }),
+      { wrapper }
+    )
+
+    act(() => result.current.handleTooltipMouseOver({}))
+
+    expect(showTooltip).toHaveBeenCalledOnce()
+    expect(showTooltip.mock.calls[0][0].tooltipData.data).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ key: 'Percentage', value: '22.0%', kind: 'series' }),
+        expect.objectContaining({ key: 'Count', value: '146', kind: 'extra' })
+      ])
+    )
+  })
+})

package/src/hooks/useRightAxis.ts

@@ -1,25 +1,24 @@
 import { scaleLinear } from '@visx/scale'
-import useReduceData from './useReduceData'
 import { TOP_PADDING } from './useScales'
 import { getCleanTopTickMax } from '../helpers/getCleanTopTickMax'
 import { getAxisMaxOverride } from '../helpers/getAxisMaxOverride'
 
+const cleanRightAxisValue = value => (typeof value === 'string' ? value.replace(/[,$]/g, '').trim() : value)
+
 export default function useRightAxis({ config, yMax = 0, data = [] }) {
-  const hasRightAxis = config.visualizationType === 'Combo' && config.orientation === 'vertical'
   const rightSeriesKeys =
     config.series && config.series.filter(series => series.axis === 'Right').map(key => key.dataKey)
-  let { minValue } = useReduceData(config, data)
-
-  const allRightAxisData = rightSeriesKeys => {
-    if (!rightSeriesKeys) return [0]
-    let rightAxisData = []
-    rightSeriesKeys.map((key, index) => {
-      return (rightAxisData = [...rightAxisData, ...data.map(item => Number(item[key]))])
-    })
-    return rightAxisData
-  }
+  const hasRightAxis =
+    config.visualizationType === 'Combo' && config.orientation === 'vertical' && Boolean(rightSeriesKeys?.length)
 
-  const rightAxisValues = allRightAxisData(rightSeriesKeys).map(Number).filter(Number.isFinite)
+  const rightAxisValues = (rightSeriesKeys ?? [])
+    .flatMap(key => data.map(item => item[key]))
+    .filter(value => value !== null && value !== undefined && String(value).trim() !== '')
+    .map(cleanRightAxisValue)
+    .filter(value => String(value).trim() !== '')
+    .map(Number)
+    .filter(Number.isFinite)
+  const rawRightMin = rightAxisValues.length ? Math.min(...rightAxisValues) : 0
   const rawRightMax = rightAxisValues.length ? Math.max(...rightAxisValues) : 0
   let max = rawRightMax
   const { hasValidMax: hasValidExplicitRightMax, maxNumber: rightMaxNumber } = getAxisMaxOverride({
@@ -28,24 +27,18 @@ export default function useRightAxis({ config, yMax = 0, data = [] }) {
   })
   const rightMinRaw = config.yAxis.rightMin
   const rightMinNumber = Number(rightMinRaw)
-  const hasExplicitRightMin =
-    rightMinRaw !== undefined && rightMinRaw !== null && rightMinRaw !== '' && Number.isFinite(rightMinNumber)
+  const hasValidExplicitRightMin =
+    rightMinRaw !== undefined &&
+    rightMinRaw !== null &&
+    rightMinRaw !== '' &&
+    Number.isFinite(rightMinNumber) &&
+    rightMinNumber <= rawRightMin
 
   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 ((hasBarSeries || hasLineSeries) && minValue > 0) {
-    minValue = 0
-  }
+  const minValue = hasValidExplicitRightMin ? rightMinNumber : rawRightMin > 0 ? 0 : rawRightMin
 
   if (config.yAxis.autoMaxStrategy === 'clean-top-tick' && !hasValidExplicitRightMax) {
     max = getCleanTopTickMax(max)