@cdc/chart 4.25.5-1 → 4.25.6

package/src/components/PieChart/PieChart.tsx

@@ -46,28 +46,51 @@ const PieChart = props => {
   const pivotColumns = Object.values(config.columns).filter(column => column.showInViz)
   const dataNeedsPivot = pivotColumns.length > 0
   const pivotKey = dataNeedsPivot ? 'pivotColumn' : undefined
+  const showPercentage = config.dataFormat.showPiePercent
+  const labelForCalcArea = 'Calculated Area'
+
   const _data = useMemo(() => {
+    let baseData = []
+
     if (dataNeedsPivot) {
-      let newData = []
       const primaryColumn = config.yAxis.dataKey
       const additionalColumns = pivotColumns.map(column => column.name)
       const allColumns = [primaryColumn, ...additionalColumns]
       const columnToUpdate = config.xAxis.dataKey
+
       data.forEach(d => {
         allColumns.forEach(col => {
-          const data = d[col]
-          if (data) {
-            newData.push({
-              [pivotKey]: data,
+          const val = d[col]
+          if (val) {
+            baseData.push({
+              [pivotKey]: val,
               [columnToUpdate]: `${d[columnToUpdate]} - ${col}`
             })
           }
         })
       })
-      return newData
+    } else {
+      baseData = [...data]
     }
-    return data
-  }, [data, dataNeedsPivot])
+
+    // === ADD "OTHER" IF PERCENT MODE IS ENABLED ===
+    if (showPercentage) {
+      const total = baseData.reduce((sum, d) => {
+        const val = parseFloat(d[config.runtime.yAxis.dataKey])
+        return sum + (isNaN(val) ? 0 : val)
+      }, 0)
+
+      if (total < 100) {
+        const remaining = 100 - total
+        baseData.push({
+          [config.runtime.xAxis.dataKey]: labelForCalcArea,
+          [config.runtime.yAxis.dataKey]: remaining
+        })
+      }
+    }
+
+    return baseData
+  }, [data, dataNeedsPivot, showPercentage, config])
 
   const _colorScale = useMemo(() => {
     if (dataNeedsPivot) {
@@ -78,15 +101,31 @@ const PieChart = props => {
       const numberOfKeys = Object.entries(keys).length
       let palette = config.customColors || colorPalettes[config.palette]
       palette = palette.slice(0, numberOfKeys)
-
       return scaleOrdinal({
         domain: Object.keys(keys),
         range: palette,
         unknown: null
       })
     }
+
+    if (showPercentage) {
+      const keys = {}
+      _data.forEach(d => {
+        keys[d[config.xAxis.dataKey]] = true
+      })
+      // take out Calculated Area so it falls back to `unknown`
+      const domainKeys = Object.keys(keys).filter(k => k !== labelForCalcArea)
+
+      const basePalette = (config.customColors || colorPalettes[config.palette]).slice(0, domainKeys.length)
+      const COOL_GRAY_90 = getComputedStyle(document.documentElement).getPropertyValue('--cool-gray-10').trim()
+      return scaleOrdinal({
+        domain: domainKeys,
+        range: basePalette,
+        unknown: COOL_GRAY_90
+      })
+    }
     return colorScale
-  }, [colorScale, dataNeedsPivot])
+  }, [_data, dataNeedsPivot, colorScale])
 
   const triggerRef = useRef()
   const dataRef = useIntersectionObserver(triggerRef, {
@@ -130,9 +169,15 @@ const PieChart = props => {
       const roundTo = Number(config.dataFormat.roundTo) || 0
       // Calculate the percentage of the full circle (360 degrees)
       const degrees = ((arc.endAngle - arc.startAngle) * 180) / Math.PI
+      const valueFromData = parseFloat(arc.data[config.runtime.yAxis.dataKey])
+      const percentageToDisplay = showPercentage ? valueFromData : (degrees / 360) * 100
+
+      let roundedPercentage = percentageToDisplay.toFixed(roundTo) + '%'
+      // add missing pie part
+      if (arc.data[config.xAxis.dataKey] === labelForCalcArea && config.dataFormat.showPiePercent) {
+        roundedPercentage = '**'
+      }
 
-      const percentageOfCircle = (degrees / 360) * 100
-      const roundedPercentage = percentageOfCircle.toFixed(roundTo) + '%'
       return (
         <Group key={key} className={`slice-${key}`}>
           {/* ── the slice */}
@@ -238,7 +283,7 @@ const PieChart = props => {
              <AnimatedPie
              {...pie}
               getKey={d => d.data[config.runtime.xAxis.dataKey]}
-                colorScale={_colorScale}
+              colorScale={_colorScale}
               onHover={handleTooltipMouseOver}
                onLeave={handleTooltipMouseOff}
            />

package/src/data/initial-state.js

@@ -89,6 +89,11 @@ export default {
   topAxis: {
     hasLine: false
   },
+  brush: {
+    isActive: false,
+    isBrushing: false,
+    data: []
+  },
   isLegendValue: false,
   barThickness: 0.35,
   barHeight: 25,
@@ -120,7 +125,8 @@ export default {
     maxTickRotation: 0,
     padding: 5,
     showYearsOnce: false,
-    sortByRecentDate: false
+    sortByRecentDate: false,
+    brushActive: false
   },
   table: {
     label: 'Data Table',
@@ -176,10 +182,7 @@ export default {
     position: 'right',
     orderedValues: []
   },
-  brush: {
-    height: 45,
-    active: false
-  },
+
   exclusions: {
     active: false,
     keys: []

package/src/helpers/getNewRuntime.ts

@@ -0,0 +1,35 @@
+import _ from 'lodash'
+
+export const getNewRuntime = (visualizationConfig, newFilteredData) => {
+  const runtime = _.cloneDeep(visualizationConfig.runtime) || {}
+  runtime.series = []
+  runtime.seriesLabels = {}
+  runtime.seriesLabelsAll = []
+  const { filters, columns, dynamicSeriesType, dynamicSeriesLineType, xAxis } = visualizationConfig
+  if (newFilteredData?.length) {
+    const columnNames = Object.keys(newFilteredData[0])
+    columnNames.forEach(colName => {
+      const isNotXAxis = xAxis.dataKey !== colName
+      const isNotFiltered = !filters || !filters?.find(filter => filter.columnName === colName)
+      const noColConfiguration = !columns || Object.keys(columns).indexOf(colName) === -1
+      if (isNotXAxis && isNotFiltered && noColConfiguration) {
+        runtime.series.push({
+          dataKey: colName,
+          type: dynamicSeriesType,
+          lineType: dynamicSeriesLineType,
+          tooltip: true
+        })
+      }
+    })
+  }
+
+  runtime.seriesKeys = runtime.series
+    ? runtime.series.map(series => {
+        runtime.seriesLabels[series.dataKey] = series.name || series.label || series.dataKey
+        runtime.seriesLabelsAll.push(series.name || series.dataKey)
+        return series.dataKey
+      })
+    : []
+
+  return runtime
+}

package/src/helpers/getPiePercent.ts

@@ -0,0 +1,22 @@
+import _ from 'lodash'
+
+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 total = numericValues.reduce((sum, v) => sum + v, 0)
+
+  return data.map(row => {
+    const raw = _.toNumber(row[seriesKey])
+    if (Number.isNaN(raw)) {
+      // skip non-numeric / undefined
+      return row
+    }
+
+    const pct = total === 0 ? 0 : (raw / total) * 100
+    return {
+      ...row,
+      [seriesKey]: pct
+    }
+  })
+}

package/src/helpers/getTransformedData.ts

@@ -0,0 +1,22 @@
+type DataRow = Record<string, any>
+
+export const getTransformedData = ({
+  brushData,
+  filteredData,
+  excludedData,
+  clean
+}: {
+  brushData: DataRow[]
+  filteredData: DataRow[]
+  excludedData: DataRow[]
+  clean: (data: DataRow[]) => DataRow[]
+}): DataRow[] => {
+  const data =
+    Array.isArray(brushData) && brushData.length > 0
+      ? brushData
+      : Array.isArray(filteredData) && filteredData.length > 0
+      ? filteredData
+      : excludedData
+
+  return clean(data)
+}

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

@@ -0,0 +1,82 @@
+import { describe, it, expect } from 'vitest'
+import { getNewRuntime } from '../getNewRuntime'
+
+describe('getNewRuntime', () => {
+  it('should return a runtime object with default values when no data is provided', () => {
+    const visualizationConfig = { runtime: {} }
+    const newFilteredData = null
+
+    const result = getNewRuntime(visualizationConfig, newFilteredData)
+
+    expect(result.series).toEqual([])
+    expect(result.seriesLabels).toEqual({})
+    expect(result.seriesLabelsAll).toEqual([])
+    expect(result.seriesKeys).toEqual([])
+  })
+
+  it('should populate runtime.series with valid series from newFilteredData', () => {
+    const visualizationConfig = {
+      runtime: {},
+      filters: [],
+      columns: {},
+      dynamicSeriesType: 'bar',
+      dynamicSeriesLineType: 'solid',
+      xAxis: { dataKey: 'x' }
+    }
+    const newFilteredData = [
+      { x: 1, y: 10, z: 20 },
+      { x: 2, y: 15, z: 25 }
+    ]
+
+    const result = getNewRuntime(visualizationConfig, newFilteredData)
+
+    expect(result.series).toEqual([
+      { dataKey: 'y', type: 'bar', lineType: 'solid', tooltip: true },
+      { dataKey: 'z', type: 'bar', lineType: 'solid', tooltip: true }
+    ])
+    expect(result.seriesKeys).toEqual(['y', 'z'])
+    expect(result.seriesLabels).toEqual({ y: 'y', z: 'z' })
+    expect(result.seriesLabelsAll).toEqual(['y', 'z'])
+  })
+
+  it('should exclude series keys that match filters or columns', () => {
+    const visualizationConfig = {
+      runtime: {},
+      filters: [{ columnName: 'y' }],
+      columns: { z: {} },
+      dynamicSeriesType: 'bar',
+      dynamicSeriesLineType: 'solid',
+      xAxis: { dataKey: 'x' }
+    }
+    const newFilteredData = [
+      { x: 1, y: 10, z: 20, w: 30 },
+      { x: 2, y: 15, z: 25, w: 35 }
+    ]
+
+    const result = getNewRuntime(visualizationConfig, newFilteredData)
+
+    expect(result.series).toEqual([{ dataKey: 'w', type: 'bar', lineType: 'solid', tooltip: true }])
+    expect(result.seriesKeys).toEqual(['w'])
+    expect(result.seriesLabels).toEqual({ w: 'w' })
+    expect(result.seriesLabelsAll).toEqual(['w'])
+  })
+
+  it('should handle empty newFilteredData gracefully', () => {
+    const visualizationConfig = {
+      runtime: {},
+      filters: [],
+      columns: {},
+      dynamicSeriesType: 'bar',
+      dynamicSeriesLineType: 'solid',
+      xAxis: { dataKey: 'x' }
+    }
+    const newFilteredData = []
+
+    const result = getNewRuntime(visualizationConfig, newFilteredData)
+
+    expect(result.series).toEqual([])
+    expect(result.seriesKeys).toEqual([])
+    expect(result.seriesLabels).toEqual({})
+    expect(result.seriesLabelsAll).toEqual([])
+  })
+})

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

@@ -0,0 +1,38 @@
+// getPiePercent.test.ts
+import { getPiePercent } from '../getPiePercent'
+
+describe('getPiePercent', () => {
+  it('cgets percentages for purely numeric strings', () => {
+    const data = [{ A: '1' }, { A: '3' }, { A: '6' }]
+    const result = getPiePercent(data, 'A')
+
+    // sum = 1 + 3 + 6 = 10
+    expect(result[0].A).toBeCloseTo((1 / 10) * 100) // 10%
+    expect(result[1].A).toBeCloseTo((3 / 10) * 100) // 30%
+    expect(result[2].A).toBeCloseTo((6 / 10) * 100) // 60%
+  })
+
+  it('shandle non numbers like "ABC', () => {
+    const data = [{ A: '1' }, { A: 'ABC' }, { A: '2' }]
+    const result = getPiePercent(data, 'A')
+
+    expect(result[0].A).toBeCloseTo((1 / 3) * 100)
+    expect(result[1].A).toBe('ABC')
+    expect(result[2].A).toBeCloseTo((2 / 3) * 100)
+  })
+
+  it('handles all-zero total by producing 0%', () => {
+    const data = [{ A: '0' }, { A: '0' }]
+    const result = getPiePercent(data, 'A')
+    expect(result[0].A).toBe(0)
+    expect(result[1].A).toBe(0)
+  })
+
+  it('leaves rows missing the key entirely unchanged', () => {
+    const data = [{ A: '2' }, { B: 'foo' }]
+    const result = getPiePercent(data, 'A')
+
+    expect(result[0].A).toBeCloseTo(100)
+    expect(result[1]).toEqual({ B: 'foo' })
+  })
+})

package/src/hooks/useRightAxis.ts

@@ -2,7 +2,7 @@ import { scaleLinear } from '@visx/scale'
 import useReduceData from './useReduceData'
 import { TOP_PADDING } from './useScales'
 
-export default function useRightAxis({ config, yMax = 0, data = [], updateConfig }) {
+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)

package/src/hooks/useScales.ts

@@ -79,13 +79,18 @@ const useScales = (properties: useScaleProps) => {
     xScale = composeScaleBand(xAxisDataMappedSorted, [0, xMax], 1 - config.barThickness)
   }
 
+  // handle Linear scaled viz
+  if (config.xAxis.type === 'date' && !isHorizontal) {
+    const sorted = sortXAxisData(xAxisDataMapped, config.xAxis.sortByRecentDate)
+
+    xScale = composeScaleBand(sorted, [0, xMax], 1 - config.barThickness)
+    xScale.type = scaleTypes.BAND
+  }
+
   if (xAxis.type === 'date-time' || xAxis.type === 'continuous') {
     let xAxisMin = Math.min(...xAxisDataMapped.map(Number))
     let xAxisMax = Math.max(...xAxisDataMapped.map(Number))
     let paddingRatio = config.xAxis.padding ? config.xAxis.padding * 0.01 : 0
-    if (config.brush.active) {
-      paddingRatio = config.barThickness * 0.2
-    }
 
     xAxisMin -= paddingRatio * (xAxisMax - xAxisMin)
     xAxisMax += visualizationType === 'Line' ? 0 : paddingRatio * (xAxisMax - xAxisMin)

package/src/hooks/useTooltip.tsx

@@ -1,5 +1,6 @@
 import { useContext } from 'react'
 // Local imports
+import parse from 'html-react-parser'
 import ConfigContext from '../ConfigContext'
 import { type ChartContext } from '../types/ChartContext'
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
@@ -120,16 +121,25 @@ export const useTooltip = props => {
       const pieData = additionalChartData?.data ?? {}
       const startAngle = additionalChartData?.startAngle ?? 0
       const endAngle = additionalChartData?.endAngle ?? 0
+      const actualPieValue = Number(additionalChartData.data[config?.yAxis?.dataKey])
 
       const degrees = ((endAngle - startAngle) * 180) / Math.PI
       const pctOf360 = (degrees / 360) * 100
-      const pctString = pctOf360.toFixed(roundTo) + '%'
+      const pctString = value => value.toFixed(roundTo) + '%'
+      const showPiePercent = config.dataFormat.showPiePercent || false
 
-      tooltipItems.push(
-        [config.xAxis.dataKey, pieData[config.xAxis.dataKey]],
-        [config.runtime.yAxis.dataKey, formatNumber(pieData[config.runtime.yAxis.dataKey])],
-        ['Percent', pctString]
-      )
+      if (showPiePercent && pieData[config.xAxis.dataKey] === 'Calculated Area') {
+        tooltipItems.push(['', 'Calculated Area'])
+      } else {
+        tooltipItems.push(
+          [config.xAxis.dataKey, pieData[config.xAxis.dataKey]],
+          [
+            config.runtime.yAxis.dataKey,
+            showPiePercent ? pctString(actualPieValue) : formatNumber(pieData[config.runtime.yAxis.dataKey])
+          ],
+          showPiePercent ? [] : ['Percent', pctString(pctOf360)]
+        )
+      }
     }
 
     if (visualizationType === 'Forest Plot') {
@@ -188,6 +198,8 @@ export const useTooltip = props => {
           }
         })
       } else {
+        const dynamicSeries = config.series.find(s => s.dynamicCategory)
+
         // Show Only the Hovered Series in Tooltip
         const dataColumn = resolvedScaleValues[0]
         const [seriesKey, value] = findDataKeyByThreshold(y, dataColumn)
@@ -198,7 +210,7 @@ export const useTooltip = props => {
           tooltipItems.push([config.xAxis.dataKey, closestXScaleValue || xVal])
           const formattedValue = getFormattedValue(seriesKey, value, config, getAxisPosition)
           tooltipItems.push([seriesKey, formattedValue])
-        } else {
+        } else if (dynamicSeries) {
           Object.keys(dataColumn).forEach(key => {
             tooltipItems.push([key, dataColumn[key]])
           })
@@ -546,7 +558,9 @@ export const useTooltip = props => {
           config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ` : ''
         )} ${config.xAxis.type === 'date' ? formattedDate : value}`}</li>
       )
-
+    if (visualizationType === 'Pie' && config.dataFormat.showPiePercent && value === 'Calculated Area') {
+      return <li className='tooltip-heading'>{`${capitalize('Calculated Area')} `}</li>
+    }
     if (key === config.xAxis.dataKey)
       return (
         <li className='tooltip-heading'>{`${capitalize(
@@ -571,14 +585,14 @@ export const useTooltip = props => {
     let newValue = label || value
     const style = displayGray ? { color: '#8b8b8a' } : {}
 
-    if (index == 1 && config.dataFormat.onlyShowTopPrefixSuffix) {
+    if (index == 1 && config.yAxis?.inlineLabel) {
       newValue = `${config.dataFormat.prefix}${newValue}${config.dataFormat.suffix}`
     }
     const activeLabel = getSeriesNameFromLabel(key)
     const displayText = activeLabel ? `${activeLabel}: ${newValue}` : newValue
 
     return (
-      <li style={style} className='tooltip-body'>
+      <li style={style} className='tooltip-body mb-1'>
         {displayText}
       </li>
     )

package/src/store/chart.actions.ts

@@ -1,10 +1,6 @@
 import { DimensionsType } from '@cdc/core/types/Dimensions'
 import { ChartConfig } from '../types/ChartConfig'
-
-type Action<T, P = undefined, R = undefined> = {
-  type: T
-  payload?: P
-}
+import { Action } from '@cdc/core/types/Action'
 
 // Action Types
 type SET_CONFIG = Action<'SET_CONFIG', ChartConfig>
@@ -34,7 +30,7 @@ type ChartActions =
   | SET_CONTAINER
   | SET_LOADED_EVENT
   | SET_DRAG_ANNOTATIONS
-  | SET_BRUSH_CONFIG
   | SET_LOADING
+  | SET_BRUSH_CONFIG
 
 export default ChartActions

package/src/store/chart.reducer.ts

@@ -4,7 +4,28 @@ import { ChartConfig, type ViewportSize } from '../types/ChartConfig'
 import { DimensionsType } from '@cdc/core/types/Dimensions'
 import _ from 'lodash'
 
-export const getInitialState = (configObj: ChartConfig) => {
+type ChartState = {
+  isLoading: boolean
+  config: ChartConfig
+  stateData: object[]
+  colorScale: Function
+  excludedData: object[]
+  filteredData: object[]
+  seriesHighlight: string[]
+  currentViewport: ViewportSize
+  dimensions: DimensionsType
+  container: HTMLElement | null
+  coveLoadedEventRan: boolean
+  isDraggingAnnotation: boolean
+  imageId: string
+  brushConfig: {
+    data: object[]
+    isActive: boolean
+    isBrushing: boolean
+  }
+}
+
+export const getInitialState = (configObj: ChartConfig): ChartState => {
   return {
     isLoading: true,
     config: defaults,
@@ -28,28 +49,7 @@ export const getInitialState = (configObj: ChartConfig) => {
   }
 }
 
-type State = {
-  isLoading: boolean
-  config: ChartConfig
-  stateData: object[]
-  colorScale: Function
-  excludedData: object[]
-  filteredData: object[]
-  seriesHighlight: string[]
-  currentViewport: ViewportSize
-  dimensions: DimensionsType
-  container: HTMLElement | null
-  coveLoadedEventRan: boolean
-  isDraggingAnnotation: boolean
-  imageId: string
-  brushConfig: {
-    data: object[]
-    isActive: boolean
-    isBrushing: boolean
-  }
-}
-
-export const reducer = (state: State, action: ChartActions) => {
+export const reducer = (state: ChartState, action: ChartActions): ChartState => {
   switch (action.type) {
     case 'SET_LOADING':
       return { ...state, isLoading: action.payload }

package/src/types/ChartConfig.ts

@@ -16,6 +16,7 @@ import { Region } from '@cdc/core/types/Region'
 import { VizFilter } from '@cdc/core/types/VizFilter'
 import { type Annotation } from '@cdc/core/types/Annotation'
 import { Version } from '@cdc/core/types/Version'
+import Footnotes from '@cdc/core/types/Footnotes'
 
 export type ViewportSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'
 export type ChartColumns = Record<string, Column>
@@ -69,7 +70,7 @@ type DataFormat = {
   rightSuffix: string
   roundTo: number
   suffix: string
-  onlyShowTopPrefixSuffix?: boolean
+  showPiePercent: boolean
 }
 
 type Exclusions = {
@@ -121,7 +122,8 @@ export type AllChartsConfig = {
   boxplot: BoxPlot
   brush: {
     active: boolean
-    height: number
+    data: object[]
+    isBrushing: boolean
   }
   chartMessage: { noData?: string }
   color: string
@@ -140,7 +142,8 @@ export type AllChartsConfig = {
   exclusions: Exclusions
   filters: VizFilter[]
   filterBehavior: FilterBehavior
-  footnotes: string
+  legacyFootnotes: string // this footnote functionality should be moved to the Footnotes component
+  footnotes: Footnotes
   forestPlot: ForestPlotConfigSettings
   formattedData: Object[] & { urlFiltered: boolean }
   heights: {

package/src/types/ChartContext.ts

@@ -12,7 +12,6 @@ export type TransformedData = {
 
 type SharedChartContext = {
   animatedChart?: boolean
-  brushConfig: { data: []; isBrushing: boolean; isActive: boolean }
   capitalize: (value: string) => string
   clean: Function
   colorScale?: ColorScale
@@ -31,7 +30,6 @@ type SharedChartContext = {
   legendIsolateValues?: string[]
   legendRef?: React.RefObject<HTMLDivElement>
   parentRef?: React.RefObject<HTMLDivElement>
-  setBrushConfig: Function
   setLegendIsolateValues?: Function
   svgRef?: React.RefObject<SVGSVGElement>
 }