@cdc/chart 4.26.6 → 4.26.7

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))
   }
 
   /**

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

@@ -119,4 +119,98 @@ describe('CdcChart data table dataset wiring', () => {
     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)
+  })
 })