@cdc/chart 4.24.9 → 4.24.11

package/src/helpers/configHelpers.ts

@@ -0,0 +1,28 @@
+import { cloneDeep } from 'lodash'
+import { ChartConfig } from '../types/ChartConfig'
+
+/* editConfigKeys
+ * Add edit or update config keys
+ * keyUpdates: { path: string[], value: any }[]
+ * path is the array of keys needed to reach the value to be updated
+ * value is the new value to be set
+ * if the key does not exist, it will be created
+ */
+export function editConfigKeys(config: ChartConfig, keyUpdates: { path: string[]; value: any }[]): ChartConfig {
+  const configDeepCopy = cloneDeep(config)
+
+  const newConfig = keyUpdates.reduce((acc, { path, value }) => {
+    const pathCopy = [...path]
+    const lastKey = pathCopy.pop()
+    const target = pathCopy.reduce((target, key) => {
+      if (!target[key]) {
+        target[key] = {}
+      }
+      return target[key]
+    }, acc)
+    target[lastKey] = value
+    return acc
+  }, configDeepCopy)
+
+  return newConfig
+}

package/src/helpers/handleRankByValue.ts

@@ -0,0 +1,15 @@
+import { ChartConfig } from '../types/ChartConfig'
+
+const getNumericValue = number => {
+  if (typeof number === 'string') return parseFloat(number.replace(/,/g, ''))
+  return Number(number)
+}
+
+export const handleRankByValue = (data, passedConfig: ChartConfig) => {
+  if (passedConfig.rankByValue) {
+    const series = passedConfig.series[0].dataKey
+    const sorted = data.sort((a, b) => getNumericValue(a[series]) - getNumericValue(b[series]))
+    return passedConfig.rankByValue === 'asc' ? sorted : sorted.reverse()
+  }
+  return data
+}

package/src/helpers/sizeHelpers.ts

@@ -0,0 +1,25 @@
+import { isMobileHeightViewport } from '@cdc/core/helpers/viewports'
+import { ChartConfig, ViewportSize } from '../types/ChartConfig'
+
+export function getOrientation(
+  { orientation, heights, visualizationType }: Pick<ChartConfig, 'orientation' | 'heights' | 'visualizationType'>,
+  currentViewport: ViewportSize
+): 'vertical' | 'horizontal' | 'mobileVertical' {
+  const isForestPlot = visualizationType === 'Forest Plot'
+  const useVertical = orientation === 'vertical' || isForestPlot
+  const useMobileVertical = heights?.mobileVertical && isMobileHeightViewport(currentViewport)
+  const responsiveVertical = useMobileVertical ? 'mobileVertical' : 'vertical'
+
+  return useVertical ? responsiveVertical : 'horizontal'
+}
+export function calcInitialHeight(
+  { heights, orientation, visualizationType }: Pick<ChartConfig, 'heights' | 'orientation' | 'visualizationType'>,
+  currentViewport: ViewportSize
+): number {
+  // if no heights are provided assume config has not been loaded
+  if (!heights) return 0
+
+  const renderedOrientation = getOrientation({ orientation, heights, visualizationType }, currentViewport)
+  const height = Number(heights?.[renderedOrientation])
+  return isNaN(height) ? 0 : height
+}

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

@@ -0,0 +1,37 @@
+import { handleRankByValue } from '../handleRankByValue'
+import { ChartConfig } from '../../types/ChartConfig'
+
+describe('handleRankByValue', () => {
+  it('should sort the data in ascending order when rankByValue is "asc"', () => {
+    const data = [{ value: 3 }, { value: 1 }, { value: 2 }]
+    const config: ChartConfig = {
+      rankByValue: 'asc',
+      series: [{ dataKey: 'value' }]
+    }
+
+    const result = handleRankByValue(data, config)
+    expect(result).toEqual([{ value: 1 }, { value: 2 }, { value: 3 }])
+  })
+
+  it('should sort the data in descending order when rankByValue is "desc"', () => {
+    const data = [{ value: 3 }, { value: 1 }, { value: 2 }]
+    const config: ChartConfig = {
+      rankByValue: 'desc',
+      series: [{ dataKey: 'value' }]
+    }
+
+    const result = handleRankByValue(data, config)
+    expect(result).toEqual([{ value: 3 }, { value: 2 }, { value: 1 }])
+  })
+
+  it('should handle numeric strings correctly', () => {
+    const data = [{ value: '3' }, { value: '1' }, { value: '2' }]
+    const config: ChartConfig = {
+      rankByValue: 'asc',
+      series: [{ dataKey: 'value' }]
+    }
+
+    const result = handleRankByValue(data, config)
+    expect(result).toEqual([{ value: '1' }, { value: '2' }, { value: '3' }])
+  })
+})

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

@@ -0,0 +1,80 @@
+import { calcInitialHeight, getOrientation } from '../sizeHelpers'
+import { describe, expect, it } from 'vitest'
+import { ChartOrientation, VisualizationType } from '../../types/ChartConfig'
+
+describe('sizeHelpers', () => {
+  describe('getOrientation', () => {
+    it("should return 'vertical' when orientation is vertical", () => {
+      const config = {
+        orientation: 'vertical' as ChartOrientation,
+        heights: { mobileVertical: 0, vertical: 0, horizontal: 0 },
+        visualizationType: 'Bar' as VisualizationType
+      }
+      expect(getOrientation(config, 'md')).toBe('vertical')
+    })
+
+    it("should return 'horizontal' when orientation is horizontal", () => {
+      const config = {
+        orientation: 'horizontal' as ChartOrientation,
+        heights: { mobileVertical: 0, vertical: 0, horizontal: 0 },
+        visualizationType: 'Bar' as VisualizationType
+      }
+      expect(getOrientation(config, 'md')).toBe('horizontal')
+    })
+    it("should return 'vertical' when orientation is horizontal but visualizationType is 'Forest Plot'", () => {
+      const config = {
+        orientation: 'horizontal' as ChartOrientation,
+        heights: { mobileVertical: 0, vertical: 0, horizontal: 0 },
+        visualizationType: 'Forest Plot' as VisualizationType
+      }
+      expect(getOrientation(config, 'md')).toBe('vertical')
+    })
+
+    it('should return mobileVertical when viewport is mobile height', () => {
+      const config = {
+        orientation: 'vertical' as ChartOrientation,
+        heights: { mobileVertical: 100, vertical: 0, horizontal: 0 },
+        visualizationType: 'Bar' as VisualizationType
+      }
+      expect(getOrientation(config, 'xxs')).toBe('mobileVertical')
+    })
+  })
+})
+
+describe('calcInitialHeight', () => {
+  it('should return 0 when no heights are provided', () => {
+    const config = {
+      heights: undefined,
+      orientation: 'vertical' as ChartOrientation,
+      visualizationType: 'Bar' as VisualizationType
+    }
+    expect(calcInitialHeight(config, 'md')).toBe(0)
+  })
+
+  it('should return vertical height when orientation is vertical', () => {
+    const config = {
+      orientation: 'vertical' as ChartOrientation,
+      heights: { mobileVertical: 0, vertical: 100, horizontal: 0 },
+      visualizationType: 'Bar' as VisualizationType
+    }
+    expect(calcInitialHeight(config, 'md')).toBe(100)
+  })
+
+  it('should return horizontal height when orientation is horizontal', () => {
+    const config = {
+      orientation: 'horizontal' as ChartOrientation,
+      heights: { mobileVertical: 0, vertical: 0, horizontal: 100 },
+      visualizationType: 'Bar' as VisualizationType
+    }
+    expect(calcInitialHeight(config, 'md')).toBe(100)
+  })
+
+  it('should return mobileVertical height when viewport is mobile height', () => {
+    const config = {
+      heights: { mobileVertical: 100, vertical: 0, horizontal: 0 },
+      orientation: 'vertical' as ChartOrientation,
+      visualizationType: 'Bar' as VisualizationType
+    }
+    expect(calcInitialHeight(config, 'xxs')).toBe(100)
+  })
+})

package/src/hooks/useColorPalette.js

@@ -5,11 +5,14 @@ export const useColorPalette = (config, updateConfig) => {
   let twoColorPalettes = []
   let sequential = []
   let nonSequential = []
+  const accessibleColors = []
 
   // Get two color palettes if visualization type is Paired Bar
   if (config.visualizationType === 'Paired Bar' || config.visualizationType === 'Deviation Bar') {
     const isReversed = config.twoColor.isPaletteReversed
-    twoColorPalettes = Object.keys(twoColorPalette).filter(name => (isReversed ? name.endsWith('reverse') : !name.endsWith('reverse')))
+    twoColorPalettes = Object.keys(twoColorPalette).filter(name =>
+      isReversed ? name.endsWith('reverse') : !name.endsWith('reverse')
+    )
   } else {
     // Get sequential and non-sequential palettes for other visualization types
     const seqPalettes = []
@@ -18,6 +21,7 @@ export const useColorPalette = (config, updateConfig) => {
     for (const paletteName in colorPalettesChart) {
       const isSequential = paletteName.startsWith('sequential')
       const isQualitative = paletteName.startsWith('qualitative')
+      const colorblindsafe = paletteName.startsWith('colorblindsafe')
       const isReversed = paletteName.endsWith('reverse')
 
       if (isSequential && ((!config.isPaletteReversed && !isReversed) || (config.isPaletteReversed && isReversed))) {
@@ -27,6 +31,9 @@ export const useColorPalette = (config, updateConfig) => {
       if (isQualitative && ((!config.isPaletteReversed && !isReversed) || (config.isPaletteReversed && isReversed))) {
         nonSeqPalettes.push(paletteName)
       }
+      if (colorblindsafe && ((!config.isPaletteReversed && !isReversed) || (config.isPaletteReversed && isReversed))) {
+        accessibleColors.push(paletteName)
+      }
     }
 
     sequential = seqPalettes
@@ -64,5 +71,6 @@ export const useColorPalette = (config, updateConfig) => {
   }, [config.isPaletteReversed])
 
   // Return all palettes
-  return { twoColorPalettes, sequential, nonSequential }
+
+  return { twoColorPalettes, sequential, nonSequential, accessibleColors }
 }

package/src/hooks/useLegendClasses.ts

@@ -1,22 +1,12 @@
-type ConfigType = {
-  legend: {
-    position: 'left' | 'bottom' | 'top' | 'right'
-    singleRow?: boolean
-    reverseLabelOrder?: boolean
-    verticalSorted?: boolean
-    hideBorder: {
-      side?: boolean
-      topBottom?: boolean
-    }
-  }
-}
+import { ChartConfig } from '../types/ChartConfig'
 
-const useLegendClasses = (config: ConfigType) => {
+const useLegendClasses = (config: ChartConfig) => {
+  const { position, singleRow, reverseLabelOrder, verticalSorted, hideBorder } = config.legend
   const containerClasses = ['legend-container']
   const innerClasses = ['legend-container__inner']
 
   // Handle legend positioning
-  switch (config.legend.position) {
+  switch (position) {
     case 'left':
       containerClasses.push('left')
       break
@@ -34,32 +24,33 @@ const useLegendClasses = (config: ConfigType) => {
   }
 
   // Handle single row configuration for 'bottom' and 'top' positions
-  if (['bottom', 'top'].includes(config.legend.position) && config.legend.singleRow) {
+  if (['bottom', 'top'].includes(position) && singleRow) {
     innerClasses.push('single-row')
   }
 
   // Reverse label order
-  if (config.legend.reverseLabelOrder) {
+  if (reverseLabelOrder) {
     innerClasses.push('d-flex', 'flex-column-reverse')
   }
 
   // Vertical sorting for 'bottom' and 'top' positions
-  if (['bottom', 'top'].includes(config.legend.position) && config.legend.verticalSorted) {
+  if (['bottom', 'top'].includes(position) && verticalSorted) {
     innerClasses.push('vertical-sorted')
   }
 
   // Configure border classes
-  if (
-    config.legend.hideBorder.side &&
-    (['right', 'left'].includes(config.legend.position) || !config.legend.position)
-  ) {
+  if (hideBorder.side && (['right', 'left'].includes(position) || !position)) {
     containerClasses.push('no-border')
   }
 
-  if (config.legend.hideBorder.topBottom && ['top', 'bottom'].includes(config.legend.position)) {
+  if (hideBorder.topBottom && ['top', 'bottom'].includes(position)) {
     containerClasses.push('no-border')
   }
 
+  if (hideBorder.topBottom && ['top'].includes(position)) {
+    containerClasses.push('p-0')
+  }
+
   return {
     containerClasses,
     innerClasses

package/src/hooks/useMinMax.ts

@@ -40,11 +40,13 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
   const minRequiredCIPadding = 1.15 // regardless of Editor if CI data, there must be 10% padding added
   const isLogarithmicAxis = config.yAxis.type === 'logarithmic'
   // do validation bafore applying t0 charts
-  const isMaxValid = existPositiveValue ? enteredMaxValue >= maxValue : enteredMaxValue >= 0
-  const isMinValid = isLogarithmicAxis ? enteredMinValue >= 0 : (enteredMinValue <= 0 && minValue >= 0) || (enteredMinValue <= minValue && minValue < 0)
+  const isMaxValid = existPositiveValue ? Number(enteredMaxValue) >= maxValue : Number(enteredMaxValue) >= 0
+  const isMinValid = isLogarithmicAxis
+    ? Number(enteredMinValue) >= 0
+    : (Number(enteredMinValue) <= 0 && minValue >= 0) || (Number(enteredMinValue) <= minValue && minValue < 0)
 
-  min = enteredMinValue && isMinValid ? enteredMinValue : minValue
-  max = enteredMaxValue && isMaxValid ? enteredMaxValue : Number.MIN_VALUE
+  min = enteredMinValue && isMinValid ? Number(enteredMinValue) : minValue
+  max = enteredMaxValue && isMaxValid ? Number(enteredMaxValue) : Number.MIN_VALUE
 
   const { lower, upper } = config?.confidenceKeys || {}
 
@@ -122,8 +124,8 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
       leftMax = findMaxFromSeriesKeys(data, leftAxisSeriesItems, leftMax, 'left')
       rightMax = findMaxFromSeriesKeys(data, rightAxisSeriesItems, rightMax, 'right')
 
-      if (leftMax < enteredMaxValue) {
-        leftMax = enteredMaxValue
+      if (leftMax < Number(enteredMaxValue)) {
+        leftMax = Number(enteredMaxValue)
       }
     } catch (e) {
       console.error(e.message)
@@ -131,10 +133,18 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
   }
 
   // this should not apply to bar charts if there is negative CI data
-  if ((visualizationType === 'Bar' || checkLineToBarGraph() || (visualizationType === 'Combo' && !isAllLine)) && min > 0) {
+  if (
+    (visualizationType === 'Bar' || checkLineToBarGraph() || (visualizationType === 'Combo' && !isAllLine)) &&
+    min > 0
+  ) {
     min = 0
   }
-  if ((config.visualizationType === 'Bar' || checkLineToBarGraph() || (config.visualizationType === 'Combo' && !isAllLine)) && min < 0) {
+  if (
+    (config.visualizationType === 'Bar' ||
+      checkLineToBarGraph() ||
+      (config.visualizationType === 'Combo' && !isAllLine)) &&
+    min < 0
+  ) {
     min = min * 1.1
   }
 
@@ -143,18 +153,22 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
       min = 0
     }
     if (enteredMinValue) {
-      const isMinValid = isLogarithmicAxis ? enteredMinValue >= 0 && enteredMinValue < minValue : enteredMinValue < minValue
-      min = enteredMinValue && isMinValid ? enteredMinValue : minValue
+      const isMinValid = isLogarithmicAxis
+        ? Number(enteredMinValue) >= 0 && Number(enteredMinValue) < minValue
+        : Number(enteredMinValue) < minValue
+      min = Number(enteredMinValue) && isMinValid ? Number(enteredMinValue) : minValue
     }
   }
 
   if (config.visualizationType === 'Deviation Bar' && min > 0) {
     const isMinValid = Number(enteredMinValue) < Math.min(minValue, Number(config.xAxis.target))
-    min = enteredMinValue && isMinValid ? enteredMinValue : 0
+    min = Number(enteredMinValue) && isMinValid ? Number(enteredMinValue) : 0
   }
 
   if (config.visualizationType === 'Line' && !checkLineToBarGraph()) {
-    const isMinValid = isLogarithmicAxis ? enteredMinValue >= 0 && enteredMinValue < minValue : enteredMinValue < minValue
+    const isMinValid = isLogarithmicAxis
+      ? Number(enteredMinValue) >= 0 && Number(enteredMinValue) < minValue
+      : Number(enteredMinValue) < minValue
     // update minValue for (0) Suppression points
     const suppressedMinValue = tableData?.some((dataItem, index) => {
       return config.preliminaryData?.some(pd => {
@@ -171,7 +185,7 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
         return valueMatch && (index === 0 || index === tableData.length - 1)
       })
     })
-    min = enteredMinValue && isMinValid ? enteredMinValue : suppressedMinValue ? 0 : minValue
+    min = Number(enteredMinValue) && isMinValid ? Number(enteredMinValue) : suppressedMinValue ? 0 : minValue
   }
   //If data value max wasn't provided, calculate it
   if (max === Number.MIN_VALUE) {

package/src/hooks/useReduceData.ts

@@ -3,12 +3,28 @@ import isNumber from '@cdc/core/helpers/isNumber'
 function useReduceData(config, data) {
   const isBar = config.series.every(({ type }) => type === 'Bar')
   const isAllLine = config.series.every(({ type }) => ['Line', 'dashed-sm', 'dashed-md', 'dashed-lg'].includes(type))
-  const sumYValues = seriesKeys => xValue => seriesKeys.reduce((yTotal, k) => (isNaN(Number(xValue[k])) ? yTotal : yTotal + Number(xValue[k])), 0)
-
+  const sumYValues = seriesKeys => xValue =>
+    seriesKeys.reduce((yTotal, k) => (isNaN(Number(xValue[k])) ? yTotal : yTotal + Number(xValue[k])), 0)
+  const getSeriesKey = seriesKey => {
+    const series = config.runtime.series.find(item => item.dataKey === seriesKey)
+    return series?.dynamicCategory ? series.originalDataKey : seriesKey
+  }
   const getMaxValueFromData = () => {
-    let max = Math.max(...data.map(d => Math.max(...config.runtime.seriesKeys.map(key => (isNumber(d[key]) ? Number(cleanChars(d[key])) : 0)))))
-
-    if ((config.visualizationType === 'Bar' || (config.visualizationType === 'Combo' && isBar)) && config.visualizationSubType === 'stacked') {
+    let max = Math.max(
+      ...data.map(d =>
+        Math.max(
+          ...config.runtime.seriesKeys.map(key => {
+            const seriesKey = getSeriesKey(key)
+            return isNumber(d[seriesKey]) ? Number(cleanChars(d[seriesKey])) : 0
+          })
+        )
+      )
+    )
+
+    if (
+      (config.visualizationType === 'Bar' || (config.visualizationType === 'Combo' && isBar)) &&
+      config.visualizationSubType === 'stacked'
+    ) {
       const yTotals = data.map(sumYValues(config.runtime.seriesKeys)).filter(num => !isNaN(num))
       max = Math.max(...yTotals)
     }
@@ -18,15 +34,23 @@ function useReduceData(config, data) {
       max = Math.max(...yTotals)
     }
 
-    if ((config.visualizationType === 'Bar' || config.visualizationType === 'Deviation Bar') && config.series && config.series.dataKey) {
-      max = Math.max(...data.map(d => (isNumber(d[config.series.dataKey]) ? Number(cleanChars(d[config.series.dataKey])) : 0)))
+    if (
+      (config.visualizationType === 'Bar' || config.visualizationType === 'Deviation Bar') &&
+      config.series &&
+      config.series.dataKey
+    ) {
+      max = Math.max(
+        ...data.map(d => (isNumber(d[config.series.dataKey]) ? Number(cleanChars(d[config.series.dataKey])) : 0))
+      )
     }
 
     if (config.visualizationType === 'Combo' && config.visualizationSubType === 'stacked' && !isBar) {
       if (config.runtime.barSeriesKeys && config.runtime.lineSeriesKeys) {
         const yTotals = data.map(sumYValues(config.runtime.barSeriesKeys))
 
-        const lineMax = Math.max(...data.map(d => Math.max(...config.runtime.lineSeriesKeys.map(key => Number(cleanChars(d[key]))))))
+        const lineMax = Math.max(
+          ...data.map(d => Math.max(...config.runtime.lineSeriesKeys.map(key => Number(cleanChars(d[key])))))
+        )
         const barMax = Math.max(...yTotals)
 
         max = Math.max(barMax, lineMax)
@@ -37,7 +61,16 @@ function useReduceData(config, data) {
   }
 
   const getMinValueFromData = () => {
-    const minNumberFromData = Math.min(...data.map(d => Math.min(...config.runtime.seriesKeys.map(key => (isNumber(d[key]) ? Number(cleanChars(d[key])) : Infinity)))))
+    const minNumberFromData = Math.min(
+      ...data.map(d =>
+        Math.min(
+          ...config.runtime.seriesKeys.map(key => {
+            const seriesKey = getSeriesKey(key)
+            return isNumber(d[seriesKey]) ? Number(cleanChars(d[seriesKey])) : Infinity
+          })
+        )
+      )
+    )
 
     return String(minNumberFromData)
   }
@@ -46,7 +79,7 @@ function useReduceData(config, data) {
     if (!config.runtime.seriesKeys) {
       return false
     }
-    return config.runtime.seriesKeys.some(key => data.some(d => d[key] >= 0))
+    return config.runtime.seriesKeys.some(key => data.some(d => d[getSeriesKey(key)] >= 0))
   }
 
   const cleanChars = value => {