@cdc/chart 4.26.5 → 4.26.7

package/src/components/Axis/LeftAxis.tsx

@@ -28,6 +28,7 @@ interface LeftAxisProps {
   xMax: number
   yAxisWidth: number
   numTicks: number
+  tickValues?: number[]
   tickLabelFontSize: number
   axisLabelFontSize: number
   handleLeftTickFormatting: (tick: any, index: number, ticks: any[]) => string
@@ -45,6 +46,7 @@ const LeftAxis: React.FC<LeftAxisProps> = ({
   xMax,
   yAxisWidth,
   numTicks,
+  tickValues,
   tickLabelFontSize,
   axisLabelFontSize,
   handleLeftTickFormatting,
@@ -71,6 +73,7 @@ const LeftAxis: React.FC<LeftAxisProps> = ({
       stroke='#333'
       tickFormat={handleLeftTickFormatting}
       numTicks={numTicks}
+      {...(tickValues ? { tickValues } : {})}
     >
       {props => {
         const axisCenter =

package/src/components/Axis/LeftAxisGridlines.tsx

@@ -10,6 +10,7 @@ interface LeftAxisGridlinesProps {
   xMax: number
   yAxisWidth: number
   numTicks: number
+  tickValues?: number[]
   axisLabelFontSize: number
 }
 
@@ -18,6 +19,7 @@ const LeftAxisGridlines: React.FC<LeftAxisGridlinesProps> = ({
   xMax,
   yAxisWidth,
   numTicks,
+  tickValues,
   axisLabelFontSize
 }) => {
   const { config } = useContext(ConfigContext)
@@ -27,7 +29,12 @@ const LeftAxisGridlines: React.FC<LeftAxisGridlinesProps> = ({
   const showSideTitle = config.yAxis.titlePlacement !== 'top'
 
   return (
-    <AxisLeft scale={yScale} left={yAxisWidth - config.yAxis.axisPadding} numTicks={numTicks}>
+    <AxisLeft
+      scale={yScale}
+      left={yAxisWidth - config.yAxis.axisPadding}
+      numTicks={numTicks}
+      {...(tickValues ? { tickValues } : {})}
+    >
       {props => {
         const axisCenter =
           config.orientation === 'horizontal'

package/src/components/Axis/RightAxis.tsx

@@ -15,6 +15,7 @@ type RightAxisProps = {
   yMax: number
   xMax: number
   yAxisWidth: number
+  tickValues?: number[]
   tickLabelFontSize: number
   axisLabelFontSize: number
 }
@@ -29,6 +30,7 @@ export const RightAxis: React.FC<RightAxisProps> = ({
   yMax,
   xMax,
   yAxisWidth,
+  tickValues,
   tickLabelFontSize,
   axisLabelFontSize
 }) => {
@@ -45,6 +47,7 @@ export const RightAxis: React.FC<RightAxisProps> = ({
       label={config.yAxis.rightLabel}
       tickFormat={tick => formatNumber(tick, 'right')}
       numTicks={runtime.yAxis.rightNumTicks || undefined}
+      {...(tickValues ? { tickValues } : {})}
       labelOffset={45}
     >
       {props => {

package/src/components/Axis/tests/AxisTickValues.test.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import ConfigContext from '../../../ConfigContext'
+import { createMockChartContext, createMockConfig } from '../../LinearChart/tests/mockConfigContext'
+
+vi.mock('@visx/axis', () => ({
+  AxisLeft: ({ tickValues }: { tickValues?: number[] }) => (
+    <div data-testid='axis-left' data-tick-values={JSON.stringify(tickValues ?? null)} />
+  ),
+  AxisRight: ({ tickValues }: { tickValues?: number[] }) => (
+    <div data-testid='axis-right' data-tick-values={JSON.stringify(tickValues ?? null)} />
+  )
+}))
+
+import LeftAxis from '../LeftAxis'
+import LeftAxisGridlines from '../LeftAxisGridlines'
+import RightAxis from '../RightAxis'
+
+const tickValues = [0, 5, 10, 15]
+
+const renderWithContext = (children: React.ReactNode) => {
+  const config = createMockConfig({
+    runtime: {
+      ...createMockConfig().runtime,
+      yAxis: {
+        ...createMockConfig().runtime.yAxis,
+        rightNumTicks: 4
+      }
+    } as any
+  })
+
+  return render(<ConfigContext.Provider value={createMockChartContext(config)}>{children}</ConfigContext.Provider>)
+}
+
+describe('axis tick values', () => {
+  it('passes supplied tick values to the left axis', () => {
+    renderWithContext(
+      <LeftAxis
+        yScale={{}}
+        xScale={{}}
+        yMax={100}
+        xMax={300}
+        yAxisWidth={50}
+        numTicks={4}
+        tickValues={tickValues}
+        tickLabelFontSize={16}
+        axisLabelFontSize={16}
+        handleLeftTickFormatting={tick => String(tick)}
+      />
+    )
+
+    expect(JSON.parse(screen.getByTestId('axis-left').dataset.tickValues || 'null')).toEqual(tickValues)
+  })
+
+  it('passes supplied tick values to left-axis gridlines', () => {
+    renderWithContext(
+      <LeftAxisGridlines
+        yScale={{}}
+        xMax={300}
+        yAxisWidth={50}
+        numTicks={4}
+        tickValues={tickValues}
+        axisLabelFontSize={16}
+      />
+    )
+
+    expect(JSON.parse(screen.getByTestId('axis-left').dataset.tickValues || 'null')).toEqual(tickValues)
+  })
+
+  it('passes supplied tick values to the right axis', () => {
+    renderWithContext(
+      <RightAxis
+        yScaleRight={{} as any}
+        yMax={100}
+        xMax={300}
+        yAxisWidth={50}
+        tickValues={tickValues}
+        tickLabelFontSize={16}
+        axisLabelFontSize={16}
+      />
+    )
+
+    expect(JSON.parse(screen.getByTestId('axis-right').dataset.tickValues || 'null')).toEqual(tickValues)
+  })
+})

package/src/components/BarChart/components/BarChart.Horizontal.tsx

@@ -21,7 +21,6 @@ import isNumber from '@cdc/core/helpers/isNumber'
 // Local context and types
 import BarChartContext, { BarChartContextValues } from './context'
 import { ChartContext } from '../../../types/ChartContext'
-import _ from 'lodash'
 import { getBarData } from '../helpers/getBarData'
 import { getHorizontalBarHeights } from '../helpers/getBarHeights'
 import { getPatternUrl as getPatternUrlForBar } from '../helpers/getPatternUrl'
@@ -76,7 +75,7 @@ const BarChartHorizontal = () => {
       <defs>
         {Object.entries(config.legend.patterns).map(([key, pattern]) => {
           const patternId = getChartPatternId(key)
-          const size = pattern.patternSize || 8
+          const size = pattern.patternSize || 10
 
           switch (pattern.shape) {
             case 'circles':

package/src/components/BarChart/components/BarChart.StackedHorizontal.tsx

@@ -59,7 +59,7 @@ const BarChartStackedHorizontal = () => {
       <defs>
         {Object.entries(config.legend.patterns).map(([key, pattern]) => {
           const patternId = getChartPatternId(key)
-          const size = pattern.patternSize || 8
+          const size = pattern.patternSize || 10
 
           switch (pattern.shape) {
             case 'circles':

package/src/components/BarChart/components/BarChart.StackedVertical.tsx

@@ -44,7 +44,7 @@ const BarChartStackedVertical = () => {
       <defs>
         {Object.entries(config.legend.patterns).map(([key, pattern]) => {
           const patternId = getChartPatternId(key)
-          const size = pattern.patternSize || 8
+          const size = pattern.patternSize || 10
 
           switch (pattern.shape) {
             case 'circles':

package/src/components/BarChart/components/BarChart.Vertical.tsx

@@ -19,7 +19,6 @@ import createBarElement from '@cdc/core/components/createBarElement'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 // Types
 import { type ChartContext } from '../../../types/ChartContext'
-import _ from 'lodash'
 import { getBarData } from '../helpers/getBarData'
 import { getPatternUrl as getPatternUrlForBar } from '../helpers/getPatternUrl'
 import { getChartPatternId } from '../../../helpers/getChartPatternId'
@@ -90,7 +89,7 @@ const BarChartVertical = () => {
       <defs>
         {Object.entries(config.legend.patterns).map(([key, pattern]) => {
           const patternId = getChartPatternId(key)
-          const size = pattern.patternSize || 8
+          const size = pattern.patternSize || 10
 
           switch (pattern.shape) {
             case 'circles':

package/src/components/BarChart/helpers/getBarData.ts

@@ -1,28 +1,28 @@
-import _ from 'lodash'
-import { TransformedData } from '../../../types/ChartContext'
-import { ChartConfig } from '../../../types/ChartConfig'
-
-export const getBarData = (config: ChartConfig, data: TransformedData[], hasConfidenceInterval: boolean) => {
-  const dynamicSeries = config.series.find(s => s.dynamicCategory)
-  if (!dynamicSeries) return data
-  const { dynamicCategory, dataKey } = dynamicSeries
-  const xAxisKey = config.runtime.originalXAxis.dataKey
-  const xAxisGroupDataLookup = _.groupBy(data, xAxisKey)
-  return Object.values(xAxisGroupDataLookup).map(group => {
-    return group.reduce((acc, datum) => {
-      const dataValue = datum[dataKey]
-      const dataCategory = datum[dynamicCategory]
-      if (hasConfidenceInterval) {
-        const { lower, upper } = config.confidenceKeys
-        if (!acc.CI) acc.CI = {}
-        const lowerValue = datum[lower]
-        const upperValue = datum[upper]
-        acc.CI[dataCategory] = { lower: lowerValue, upper: upperValue }
-      }
-      acc[dataCategory] = dataValue
-      acc[xAxisKey] = datum[xAxisKey]
-      acc.dynamicData = true
-      return acc
-    }, {})
-  })
-}
+import groupBy from 'lodash/groupBy'
+import { TransformedData } from '../../../types/ChartContext'
+import { ChartConfig } from '../../../types/ChartConfig'
+
+export const getBarData = (config: ChartConfig, data: TransformedData[], hasConfidenceInterval: boolean) => {
+  const dynamicSeries = config.series.find(s => s.dynamicCategory)
+  if (!dynamicSeries) return data
+  const { dynamicCategory, dataKey } = dynamicSeries
+  const xAxisKey = config.runtime.originalXAxis.dataKey
+  const xAxisGroupDataLookup = groupBy(data, xAxisKey)
+  return Object.values(xAxisGroupDataLookup).map(group => {
+    return group.reduce((acc, datum) => {
+      const dataValue = datum[dataKey]
+      const dataCategory = datum[dynamicCategory]
+      if (hasConfidenceInterval) {
+        const { lower, upper } = config.confidenceKeys
+        if (!acc.CI) acc.CI = {}
+        const lowerValue = datum[lower]
+        const upperValue = datum[upper]
+        acc.CI[dataCategory] = { lower: lowerValue, upper: upperValue }
+      }
+      acc[dataCategory] = dataValue
+      acc[xAxisKey] = datum[xAxisKey]
+      acc.dynamicData = true
+      return acc
+    }, {})
+  })
+}

package/src/components/BarChart/helpers/getBarHeights.ts

@@ -1,5 +1,5 @@
 import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
-import _ from 'lodash'
+import round from 'lodash/round'
 import { ChartConfig } from '../../../types/ChartConfig'
 
 export const getHorizontalBarHeights = <T>(config: Partial<ChartConfig>, bars: (T & { index })[]) => {
@@ -41,7 +41,7 @@ export const getHorizontalBarHeights = <T>(config: Partial<ChartConfig>, bars: (
   // return new updated bars/groupes
   return bars.map((bar, i) => {
     // set bars Y dynamically to handle space between bars
-    const y = bar.index === 0 ? 0 : _.round(totalBarHeight * i)
+    const y = bar.index === 0 ? 0 : round(totalBarHeight * i)
     return { ...bar, y, height: barHeight }
   })
 }

package/src/components/BarChart/helpers/tests/useBarChart.test.tsx

@@ -0,0 +1,98 @@
+import { renderHook } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { createMockChartContext, createMockConfig } from '../../../LinearChart/tests/mockConfigContext'
+import { useBarChart } from '../useBarChart'
+
+const baseConfig = createMockConfig()
+
+const makeConfigContext = (countColumnOverrides: Record<string, unknown> = {}) => {
+  const config = createMockConfig({
+    visualizationType: 'Bar',
+    orientation: 'horizontal',
+    barHeight: 25,
+    xAxis: {
+      ...baseConfig.xAxis,
+      type: 'categorical',
+      dataKey: 'Cause of death'
+    },
+    yAxis: {
+      ...baseConfig.yAxis,
+      labelPlacement: 'Below Bar'
+    },
+    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,
+        ...countColumnOverrides
+      }
+    } 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'],
+      seriesLabels: { Percentage: 'Percentage' },
+      seriesLabelsAll: ['Percentage']
+    } as any
+  })
+
+  return createMockChartContext(config, {
+    tableData: [
+      {
+        'Cause of death': 'Cardiovascular conditions',
+        Percentage: 22,
+        Count: 146
+      }
+    ],
+    updateConfig: vi.fn()
+  })
+}
+
+describe('useBarChart', () => {
+  it('does not apply the left-axis suffix to an additional single-series tooltip column', () => {
+    const configContext = makeConfigContext()
+    const { result } = renderHook(() => useBarChart(vi.fn(), vi.fn(), configContext))
+
+    expect(result.current.getAdditionalColumn('Percentage', 'Cardiovascular conditions')).toBe('Count : 146 <br/>')
+  })
+
+  it('applies an additional column suffix when one is configured', () => {
+    const configContext = makeConfigContext({ suffix: ' deaths' })
+    const { result } = renderHook(() => useBarChart(vi.fn(), vi.fn(), configContext))
+
+    expect(result.current.getAdditionalColumn('Percentage', 'Cardiovascular conditions')).toBe(
+      'Count : 146 deaths <br/>'
+    )
+  })
+})

package/src/components/BarChart/helpers/useBarChart.ts

@@ -6,7 +6,7 @@ import { getPaletteColors } from '@cdc/core/helpers/palettes/utils'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizSubType, getVizTitle } from '@cdc/core/helpers/metrics/utils'
 import { isMobileFontViewport } from '@cdc/core/helpers/viewports'
-import { getSeriesOwnedColumnNames } from '../../../helpers/seriesColumnSettings'
+import { getSeriesColumnFormattingParams, getSeriesOwnedColumnNames } from '../../../helpers/seriesColumnSettings'
 
 export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, configContext) => {
   const {
@@ -184,10 +184,9 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
       if (seriesOwnedColumnNames.includes(colConfig.name || colKeys)) return
       if (series && colConfig.series && colConfig.series !== series && !colConfig.tooltips) return
       const formattingParams = {
-        addColPrefix: config.columns[colKeys].prefix,
-        addColSuffix: config.columns[colKeys].suffix,
-        addColRoundTo: config.columns[colKeys].roundToPlace ? config.columns[colKeys].roundToPlace : '',
-        addColCommas: config.columns[colKeys].commas
+        addColPrefix: '',
+        addColSuffix: '',
+        ...getSeriesColumnFormattingParams(config.columns[colKeys])
       }
 
       const formattedValue = formatColNumber(

package/src/components/BoxPlot/BoxPlot.Horizontal.tsx

@@ -5,7 +5,8 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import ConfigContext from '../../ConfigContext'
 import { handleTooltip, createPlots } from './helpers/index'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
-import _ from 'lodash'
+import map from 'lodash/map'
+import round from 'lodash/round'
 
 const BoxPlotHorizontal = ({ xScale, yScale, seriesScale }) => {
   const { config, transformedData: data, colorScale, seriesHighlight } = useContext(ConfigContext)
@@ -63,7 +64,7 @@ const BoxPlotHorizontal = ({ xScale, yScale, seriesScale }) => {
                     maxProps={{ stroke: defaultColor, strokeWidth: 1, opacity: fillOpacity }}
                     medianProps={{ stroke: defaultColor, strokeWidth: 1, opacity: fillOpacity }}
                     outliers={
-                      config.boxplot.plotOutlierValues ? _.map(plot.columnOutliers[item.dataKey], item => item) : []
+                      config.boxplot.plotOutlierValues ? map(plot.columnOutliers[item.dataKey], item => item) : []
                     }
                     outlierProps={{
                       style: {
@@ -78,10 +79,10 @@ const BoxPlotHorizontal = ({ xScale, yScale, seriesScale }) => {
                         config.boxplot,
                         plot.columnCategory,
                         item.dataKey,
-                        _.round(plot.q1[item.dataKey], config.dataFormat.roundTo),
-                        _.round(plot.q3[item.dataKey], config.dataFormat.roundTo),
-                        _.round(plot.median[item.dataKey], config.dataFormat.roundTo),
-                        _.round(plot.iqr[item.dataKey], config.dataFormat.roundTo),
+                        round(plot.q1[item.dataKey], config.dataFormat.roundTo),
+                        round(plot.q3[item.dataKey], config.dataFormat.roundTo),
+                        round(plot.median[item.dataKey], config.dataFormat.roundTo),
+                        round(plot.iqr[item.dataKey], config.dataFormat.roundTo),
                         config.xAxis.label,
                         defaultColor
                       ),

package/src/components/BoxPlot/BoxPlot.Vertical.tsx

@@ -7,7 +7,9 @@ import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
 import { getCurrentPaletteName } from '@cdc/core/helpers/palettes/utils'
 import { handleTooltip, createPlots } from './helpers/index'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
-import _ from 'lodash'
+import get from 'lodash/get'
+import map from 'lodash/map'
+import round from 'lodash/round'
 
 const BoxPlotVertical = ({ xScale, yScale, seriesScale, yAxisWidth }) => {
   const { config, colorScale, seriesHighlight, transformedData: data } = useContext(ConfigContext)
@@ -19,7 +21,7 @@ const BoxPlotVertical = ({ xScale, yScale, seriesScale, yAxisWidth }) => {
   const bodyStyles = getComputedStyle(document.body)
   const defaultColor = APP_FONT_COLOR
   const constrainedWidth = Math.min(40, boxWidth)
-  const color_0 = _.get(colorPalettesChart, [getCurrentPaletteName(config), 0], '#000')
+  const color_0 = get(colorPalettesChart, [getCurrentPaletteName(config), 0], '#000')
   const plots = createPlots(data, config)
   return (
     <ErrorBoundary component='BoxPlot Vertical'>
@@ -76,7 +78,7 @@ const BoxPlotVertical = ({ xScale, yScale, seriesScale, yAxisWidth }) => {
                         fillOpacity={1}
                         stroke={defaultColor}
                         valueScale={yScale}
-                        outliers={boxplot.plotOutlierValues ? _.map(d.columnOutliers[item.dataKey], item => item) : []}
+                        outliers={boxplot.plotOutlierValues ? map(d.columnOutliers[item.dataKey], item => item) : []}
                         outlierProps={{
                           style: {
                             fill: defaultColor,
@@ -109,10 +111,10 @@ const BoxPlotVertical = ({ xScale, yScale, seriesScale, yAxisWidth }) => {
                             boxplot,
                             d.columnCategory,
                             item.dataKey,
-                            _.round(d.q1[item.dataKey], config.dataFormat.roundTo),
-                            _.round(d.q3[item.dataKey], config.dataFormat.roundTo),
-                            _.round(d.median[item.dataKey], config.dataFormat.roundTo),
-                            _.round(d.iqr[item.dataKey], config.dataFormat.roundTo),
+                            round(d.q1[item.dataKey], config.dataFormat.roundTo),
+                            round(d.q3[item.dataKey], config.dataFormat.roundTo),
+                            round(d.median[item.dataKey], config.dataFormat.roundTo),
+                            round(d.iqr[item.dataKey], config.dataFormat.roundTo),
                             config.xAxis.label,
                             defaultColor
                           ),

package/src/components/BoxPlot/helpers/index.ts

@@ -1,4 +1,5 @@
-import _ from 'lodash'
+import sortBy from 'lodash/sortBy'
+import uniq from 'lodash/uniq'
 import * as d3 from 'd3-array'
 
 interface Plot {
@@ -33,7 +34,7 @@ const calculateBoxPlotStats = (values: number[]) => {
   if (!values || values.length === 0) return {}
 
   // Sort the values
-  const sortedValues = _.sortBy(values.map(v => Number(v)))
+  const sortedValues = sortBy(values.map(v => Number(v)))
 
   // Quartiles
   const firstQuartile = d3.quantile(sortedValues, 0.25) ?? 0
@@ -103,7 +104,7 @@ const calculateNonOutliers = (values: number[], firstQuartile: number, thirdQuar
 export const createPlots = (data, config) => {
   const dataKeys = data.map(d => d[config.xAxis.dataKey])
   const plots: Plot[] = []
-  const groups: string[] = _.uniq(dataKeys)
+  const groups: string[] = uniq(dataKeys)
 
   if (groups && groups.length > 0) {
     groups.forEach(group => {

package/src/components/Brush/BrushSelector.tsx

@@ -128,7 +128,7 @@ const BrushSelector: FC<BrushSelectorProps> = ({ xMax, yMax }) => {
       <>
         {Object.entries(config.legend.patterns).map(([key, pattern]) => {
           const patternId = getChartPatternId(key)
-          const size = pattern.patternSize || 8
+          const size = pattern.patternSize || 10
 
           switch (pattern.shape) {
             case 'circles':