@cdc/chart 4.23.10 → 4.24.1

package/src/helpers/handleLineType.ts

@@ -0,0 +1,18 @@
+export const handleLineType = lineType => {
+  switch (lineType) {
+    case 'dashed-sm':
+      return '5 5'
+    case 'Dashed Small':
+      return '5 5'
+    case 'dashed-md':
+      return '10 5'
+    case 'Dashed Medium':
+      return '10 5'
+    case 'dashed-lg':
+      return '15 5'
+    case 'Dashed Large':
+      return '15 5'
+    default:
+      return 0
+  }
+}

package/src/helpers/lineOptions.ts

@@ -0,0 +1,18 @@
+export const lineOptions = [
+  {
+    value: 'Dashed Small',
+    key: 'dashed-sm'
+  },
+  {
+    value: 'Dashed Medium',
+    key: 'dashed-md'
+  },
+  {
+    value: 'Dashed Large',
+    key: 'dashed-lg'
+  },
+  {
+    value: 'Solid Line',
+    key: 'solid-line'
+  }
+]

package/src/helpers/sort.ts

@@ -0,0 +1,7 @@
+export const sortAsc = (a, b) => {
+  return a.toString().localeCompare(b.toString(), 'en', { numeric: true })
+}
+
+export const sortDesc = (a, b) => {
+  return b.toString().localeCompare(a.toString(), 'en', { numeric: true })
+}

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

@@ -0,0 +1,20 @@
+import { ChartConfig, Legend } from '../../types/ChartConfig'
+import { computeMarginBottom } from '../computeMarginBottom'
+
+describe('computeMarginBottom', () => {
+  it('should return correct value', () => {
+    const config = {
+      orientation: 'horizontal',
+      xAxis: { labelOffset: '10' },
+      yAxis: { label: null },
+      brush: { active: false },
+      isResponsiveTicks: true,
+      dynamicMarginTop: 20
+    }
+    const legend = { position: 'top' }
+    const currentViewport = 'md'
+    expect(computeMarginBottom(config as unknown as ChartConfig, legend as Legend, currentViewport)).toBe('0px')
+    config.yAxis.label = 'label'
+    expect(computeMarginBottom(config as unknown as ChartConfig, legend as Legend, currentViewport)).toBe('40px')
+  })
+})

package/src/hooks/useBarChart.js

@@ -1,9 +1,10 @@
-import React, { useContext, useEffect } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import ConfigContext from '../ConfigContext'
-
+import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
 export const useBarChart = () => {
-  const { config, colorPalettes, tableData, updateConfig, parseDate, formatDate } = useContext(ConfigContext)
+  const { config, colorPalettes, tableData, updateConfig, parseDate, formatDate, setSeriesHighlight } = useContext(ConfigContext)
   const { orientation } = config
+  const [hoveredBar, setHoveredBar] = useState(null)
 
   const isHorizontal = orientation === 'horizontal'
   const barBorderWidth = 1
@@ -80,7 +81,7 @@ export const useBarChart = () => {
     if (!config.legend.colorCode && config.series.length > 1) {
       return currentBarColor
     }
-    const palettesArr = colorPalettes[config.palette]
+    const palettesArr = config.customColors ?? colorPalettes[config.palette]
     const values = tableData.map(d => {
       return d[config.legend.colorCode]
     })
@@ -144,10 +145,10 @@ export const useBarChart = () => {
   }
 
   const getHighlightedBarColorByValue = value => {
-    const match = config?.highlightedBarValues.filter(item => {
+    const match = config?.highlightedBarValues.find(item => {
       if (!item.value) return
       return config.xAxis.type === 'date' ? formatDate(parseDate(item.value)) === value : item.value === value
-    })[0]
+    })
 
     if (!match?.color) return `rgba(255, 102, 1)`
     return match.color
@@ -161,8 +162,67 @@ export const useBarChart = () => {
     if (!match?.color) return false
     return match
   }
+  const generateIconSize = barWidth => {
+    if (barWidth < 4) {
+      return 1
+    }
+    if (barWidth < 5) {
+      return 4
+    }
+    if (barWidth < 10) {
+      return 6
+    }
+    if (barWidth < 15) {
+      return 7
+    }
+    if (barWidth < 20) {
+      return 8
+    }
+    if (barWidth < 90) {
+      return 8
+    }
+    return 0
+  }
+
+  const getAdditionalColumn = (series, xAxisDataValue) => {
+    if (!xAxisDataValue) return ''
+    const columns = config.columns
+    const columnsWithTooltips = []
+    let additionalTooltipItems = ''
+    const closestVal =
+      tableData.find(d => {
+        return d[config.xAxis.dataKey] === xAxisDataValue
+      }) || {}
+    Object.keys(columns).forEach(colKeys => {
+      if(series && config.columns[colKeys].series && config.columns[colKeys].series !== series) 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
+      }
+
+      const formattedValue = formatColNumber(closestVal[config.columns[colKeys].name], 'left', true, config, formattingParams)
+      if (config.columns[colKeys].tooltips) {
+        columnsWithTooltips.push([config.columns[colKeys].label, formattedValue])
+      }
+    })
+    columnsWithTooltips.forEach(columnData => {
+      additionalTooltipItems += `${columnData[0]} : ${columnData[1]} <br/>`
+    })
+    return additionalTooltipItems
+  }
+
+  const onMouseOverBar = (categoryValue, barKey) => {
+    if (config.legend.highlightOnHover && config.legend.behavior === 'highlight' && barKey) setSeriesHighlight([barKey])
+    setHoveredBar(categoryValue)
+  }
+  const onMouseLeaveBar = () => {
+    if (config.legend.highlightOnHover && config.legend.behavior === 'highlight') setSeriesHighlight([])
+  }
 
   return {
+    generateIconSize,
     isHorizontal,
     barBorderWidth,
     lollipopBarWidth,
@@ -181,6 +241,11 @@ export const useBarChart = () => {
     updateBars,
     assignColorsToValues,
     getHighlightedBarColorByValue,
-    getHighlightedBarByValue
+    getHighlightedBarByValue,
+    getAdditionalColumn,
+    hoveredBar,
+    setHoveredBar,
+    onMouseOverBar,
+    onMouseLeaveBar
   }
 }

package/src/hooks/useColorScale.ts

@@ -0,0 +1,50 @@
+import { colorPalettesChart as colorPalettes, twoColorPalette } from '@cdc/core/data/colorPalettes'
+import { scaleOrdinal } from '@visx/scale'
+import { useContext } from 'react'
+import ConfigContext from '../ConfigContext'
+
+const useColorScale = () => {
+  const { config, data } = useContext(ConfigContext)
+  const { visualizationSubType, visualizationType, series, legend } = config
+
+  const generatePalette = colorsCount => {
+    if (!series?.length) return []
+    const isSpecialType = ['Paired Bar', 'Deviation Bar'].includes(visualizationType)
+    const chosenPalette = isSpecialType ? config.twoColor.palette : config.palette
+    const allPalettes = { ...colorPalettes, ...twoColorPalette }
+    let palette = config.customColors || allPalettes[chosenPalette]
+    while (colorsCount > palette.length) palette = palette.concat(palette)
+    return palette.slice(0, colorsCount)
+  }
+
+  let colorScale = scaleOrdinal({
+    domain: config?.runtime?.seriesLabelsAll,
+    range: generatePalette(series.length)
+  })
+
+  if (visualizationType === 'Deviation Bar') {
+    const { targetLabel } = config.xAxis
+    colorScale = scaleOrdinal({
+      domain: [`Below ${targetLabel}`, `Above ${targetLabel}`],
+      range: generatePalette(2)
+    })
+  }
+  if (visualizationType === 'Bar' && visualizationSubType === 'regular' && series?.length === 1 && legend?.colorCode) {
+    const set = new Set(data.map(d => d[legend.colorCode]))
+    colorScale = scaleOrdinal({
+      domain: [...set],
+      range: generatePalette([...set].length)
+    })
+  }
+  if (config.series.some(s => s.name)) {
+    const set = new Set(series.map(d => d.name || d.dataKey))
+    colorScale = colorScale = scaleOrdinal({
+      domain: [...set],
+      range: generatePalette(series.length)
+    })
+  }
+
+  return { colorScale }
+}
+
+export default useColorScale

package/src/hooks/{useMinMax.js → useMinMax.ts}

@@ -1,14 +1,36 @@
-const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAllLine }) => {
+import { ChartConfig } from '../types/ChartConfig'
+
+type UseMinMaxProps = {
+  /** config - standard chart config */
+  config: ChartConfig
+  /** minValue - starting minimum value */
+  minValue: number
+  /** maxValue - starting maximum value before transformations */
+  maxValue: number
+  /** existsPositiveValue - determines if axis should show values above/below 0 */
+  existPositiveValue: boolean
+  /** data - standard data array */
+  data: Object[]
+  /** isAllLine: if all series are line type including dashed lines */
+  isAllLine: boolean
+}
+
+const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAllLine }: UseMinMaxProps) => {
   let min = 0
   let max = 0
 
+  // Implementation for left and right axis
+  let leftMax = 0
+  let rightMax = 0
+
   if (!data) {
     return { min, max }
   }
 
+  const { visualizationType, series } = config
   const { max: enteredMaxValue, min: enteredMinValue } = config.runtime.yAxis
   const minRequiredCIPadding = 1.15 // regardless of Editor if CI data, there must be 10% padding added
-  
+
   // do validation bafore applying t0 charts
   const isMaxValid = existPositiveValue ? enteredMaxValue >= maxValue : enteredMaxValue >= 0
   const isMinValid = config.useLogScale ? enteredMinValue >= 0 : (enteredMinValue <= 0 && minValue >= 0) || (enteredMinValue <= minValue && minValue < 0)
@@ -16,31 +38,19 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
   min = enteredMinValue && isMinValid ? enteredMinValue : minValue
   max = enteredMaxValue && isMaxValid ? enteredMaxValue : Number.MIN_VALUE
 
-  let ciYMin = 0
-  if (config.visualizationType === 'Bar' || config.visualizationType === 'Combo' || config.visualizationType === 'Deviation Bar') {
-    let ciYMax = 0
-    if (config.hasOwnProperty('confidenceKeys')) {
-      let upperCIValues = data.map(function (d) {
-        return d[config.confidenceKeys.upper]
-      })
-      ciYMax = Math.max.apply(Math, upperCIValues)
-      if (ciYMax > max) max = ciYMax * minRequiredCIPadding // bump up the max plus some padding always
+  const { lower, upper } = config?.confidenceKeys || {}
 
-      // check the min if lower confidence 
-      let lowerCIValues = data.map(function (d) {
-        // if no lower CI then we need lowerCIValues to have nothing in it
-        return d[config.confidenceKeys.lower] !== undefined ? d[config.confidenceKeys.lower] : ''
-      })
-      ciYMin = Math.min.apply(Math, lowerCIValues)
-      if (ciYMin < min) min = ciYMin * minRequiredCIPadding // adjust the min + 10% padding for negative numbers to separate from axis
-    }
+  if (lower && upper && config.visualizationType === 'Bar') {
+    const buffer = min < 0 ? 1.1 : 0
+    max = Math.max(maxValue, Math.max(...data.flatMap(d => [d[upper], d[lower]])) * 1.15)
+    min = Math.min(minValue, Math.min(...data.flatMap(d => [d[upper], d[lower]])) * 1.15) * buffer
   }
 
-  if (config.visualizationType === 'Forecasting') {
+  if (config.series.filter(s => s?.type === 'Forecasting')) {
     const {
       runtime: { forecastingSeriesKeys }
     } = config
-    if (forecastingSeriesKeys.length > 0) {
+    if (forecastingSeriesKeys?.length > 0) {
       // push all keys into an array
       let columnNames = []
 
@@ -73,10 +83,52 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
     }
   }
 
+  if (visualizationType === 'Combo') {
+    try {
+      if (!data) throw new Error('COVE: missing data while getting min/max for combo chart.')
+      // seperate the left and right axis items & get each sides series keys
+      let leftAxisSeriesItems = series.filter(s => s.axis === 'Left')
+      let rightAxisSeriesItems = series.filter(s => s.axis === 'Right')
+
+      const findMaxFromSeriesKeys = (data, seriesData, max, axis = 'left') => {
+        let stackedBarMax = 0
+        let axisSeriesKeys = seriesData.map(i => i.dataKey) || []
+
+        axisSeriesKeys.forEach(key => {
+          let _seriesData = seriesData.find(s => s.dataKey === key)
+          let _data = data.map(d => d[key])
+          let seriesMax = Math.max.apply(null, _data)
+          if (config.visualizationSubType === 'stacked' && axis === 'left' && _seriesData.type === 'Bar') {
+            stackedBarMax += seriesMax
+          }
+          if (seriesMax > max) {
+            max = seriesMax
+          }
+
+          if (max < stackedBarMax) {
+            max = stackedBarMax
+          }
+        })
+        return max
+      }
+      leftMax = findMaxFromSeriesKeys(data, leftAxisSeriesItems, leftMax, 'left')
+      rightMax = findMaxFromSeriesKeys(data, rightAxisSeriesItems, rightMax, 'right')
+
+      if (leftMax < enteredMaxValue) {
+        leftMax = enteredMaxValue
+      }
+    } catch (e) {
+      console.error(e.message)
+    }
+  }
+
   // this should not apply to bar charts if there is negative CI data
-  if (((config.visualizationType === 'Bar' && ciYMin >= 0) || (config.visualizationType === 'Combo' && !isAllLine)) && min > 0) {
+  if ((visualizationType === 'Bar' || (visualizationType === 'Combo' && !isAllLine)) && min > 0) {
     min = 0
   }
+  if ((config.visualizationType === 'Bar' || (config.visualizationType === 'Combo' && !isAllLine)) && min < 0) {
+    min = min * 1.1
+  }
 
   if (config.visualizationType === 'Combo' && isAllLine) {
     if ((enteredMinValue === undefined || enteredMinValue === null || enteredMinValue === '') && min > 0) {
@@ -136,6 +188,6 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
     }
   }
 
-  return { min, max }
+  return { min, max, leftMax, rightMax }
 }
 export default useMinMax

package/src/hooks/{useRightAxis.js → useRightAxis.ts}

@@ -1,5 +1,5 @@
 import { scaleLinear } from '@visx/scale'
-import useReduceData from '../hooks/useReduceData'
+import useReduceData from './useReduceData'
 
 export default function useRightAxis({ config, yMax = 0, data = [], updateConfig }) {
   const hasRightAxis = config.visualizationType === 'Combo' && config.orientation === 'vertical'
@@ -15,7 +15,15 @@ export default function useRightAxis({ config, yMax = 0, data = [], updateConfig
     return rightAxisData
   }
 
-  const max = Math.max.apply(null, allRightAxisData(rightSeriesKeys))
+  let max = Math.max.apply(null, allRightAxisData(rightSeriesKeys))
+
+  if (config.yAxis.rightMax > max) {
+    max = config.yAxis.rightMax
+  }
+
+  if (config.yAxis.rightMin < minValue) {
+    minValue = config.yAxis.rightMin
+  }
 
   // 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

package/src/hooks/{useScales.js → useScales.ts}

@@ -1,16 +1,30 @@
-import { scaleBand, scaleLinear, scaleLog, scalePoint, scaleTime } from '@visx/scale'
+import { LogScaleConfig, scaleBand, scaleLinear, scaleLog, scalePoint, scaleTime } from '@visx/scale'
 import { useContext } from 'react'
 import ConfigContext from '../ConfigContext'
-// TODO move props in
+import { ChartConfig } from '../types/ChartConfig'
+import { ChartContext } from '../types/ChartContext'
+
+type useScaleProps = {
+  config: ChartConfig // standard chart config
+  data: Object[] // standard data array
+  max: number // maximum value from useMinMax hook
+  min: number // minimum value from useMinMax hook
+  xAxisDataMapped: Object[] // array of x axis date/category items
+  xMax: number // chart svg width
+  yMax: number // chart svg height
+}
 
-const useScales = properties => {
+const useScales = (properties: useScaleProps) => {
   let { xAxisDataMapped, xMax, yMax, min, max, config, data } = properties
-  const { rawData, dimensions } = useContext(ConfigContext)
+
+  const { rawData, dimensions } = useContext<ChartContext>(ConfigContext)
 
   const [screenWidth, screenHeight] = dimensions
   const seriesDomain = config.runtime.barSeriesKeys || config.runtime.seriesKeys
   const xAxisType = config.runtime.xAxis.type
   const isHorizontal = config.orientation === 'horizontal'
+  const getXAxisDataKeys = d => d[config.runtime.originalXAxis.dataKey]
+  const xAxisDataKeysMapped = data.map(d => getXAxisDataKeys(d))
 
   const { visualizationType } = config
 
@@ -21,6 +35,7 @@ const useScales = properties => {
   let g1xScale = null
   let seriesScale = null
   let xScaleNoPadding = null
+  let xScaleBrush = null
 
   const scaleTypes = {
     TIME: 'time',
@@ -41,6 +56,7 @@ const useScales = properties => {
 
   // handle  Vertical bars
   if (!isHorizontal) {
+    xScaleBrush = composeScalePoint(xAxisDataKeysMapped, [0, xMax], 0.5)
     xScale = composeScalePoint(xAxisDataMapped, [0, xMax], 0.5)
     xScale.type = scaleTypes.POINT
     yScale = composeYScale(properties)
@@ -53,6 +69,7 @@ const useScales = properties => {
       domain: [Math.min(...xAxisDataMapped), Math.max(...xAxisDataMapped)],
       range: [0, xMax]
     })
+    xScaleBrush = xScale
     xScale.type = scaleTypes.LINEAR
   }
 
@@ -170,21 +187,49 @@ const useScales = properties => {
     const leftWidthOffsetMobile = (Number(config.forestPlot.leftWidthOffsetMobile) / 100) * xMax
 
     if (screenWidth > 480) {
-      xScale = scaleLinear({
-        domain: [Math.min(...data.map(d => parseFloat(d.Lower))) - xAxisPadding, Math.max(...data.map(d => parseFloat(d.Upper))) + xAxisPadding],
-        range: [leftWidthOffset, xMax - rightWidthOffset],
-        type: 'linear'
-      })
+      if (config.forestPlot.type === 'Linear') {
+        xScale = scaleLinear({
+          domain: [Math.min(...data.map(d => parseFloat(d[config.forestPlot.lower]))) - xAxisPadding, Math.max(...data.map(d => parseFloat(d[config.forestPlot.upper]))) + xAxisPadding],
+          range: [leftWidthOffset, dimensions[0] - rightWidthOffset]
+        })
+        xScale.type = scaleTypes.LINEAR
+      }
+      if (config.forestPlot.type === 'Logarithmic') {
+        let max = Math.max(...data.map(d => parseFloat(d[config.forestPlot.upper])))
+        let fp_min = Math.min(...data.map(d => parseFloat(d[config.forestPlot.lower])))
+
+        xScale = scaleLog<LogScaleConfig>({
+          domain: [fp_min, max],
+          range: [leftWidthOffset, xMax - rightWidthOffset],
+          nice: true
+        })
+        xScale.type = scaleTypes.LOG
+      }
     } else {
-      xScale = scaleLinear({
-        domain: [Math.min(...data.map(d => parseFloat(d.Lower))) - xAxisPadding, Math.max(...data.map(d => parseFloat(d.Upper))) + xAxisPadding],
-        range: [leftWidthOffsetMobile, xMax - rightWidthOffsetMobile],
-        type: 'linear'
-      })
+      if (config.forestPlot.type === 'Linear') {
+        xScale = scaleLinear({
+          domain: [Math.min(...data.map(d => parseFloat(d[config.forestPlot.lower]))) - xAxisPadding, Math.max(...data.map(d => parseFloat(d[config.forestPlot.upper]))) + xAxisPadding],
+          range: [leftWidthOffsetMobile, xMax - rightWidthOffsetMobile],
+          type: scaleTypes.LINEAR
+        })
+      }
+
+      if (config.forestPlot.type === 'Logarithmic') {
+        let max = Math.max(...data.map(d => parseFloat(d[config.forestPlot.upper])))
+        let fp_min = Math.min(...data.map(d => parseFloat(d[config.forestPlot.lower])))
+
+        xScale = scaleLog<LogScaleConfig>({
+          domain: [fp_min, max],
+          range: [leftWidthOffset, xMax - rightWidthOffset],
+          nice: true,
+          base: max > 1 ? 10 : 2,
+          round: false,
+          type: scaleTypes.LOG
+        })
+      }
     }
   }
-
-  return { xScale, yScale, seriesScale, g1xScale, g2xScale, xScaleNoPadding }
+  return { xScale, yScale, seriesScale, g1xScale, g2xScale, xScaleNoPadding, xScaleBrush }
 }
 
 export default useScales
@@ -205,11 +250,13 @@ const composeXScale = ({ min, max, xMax, config }) => {
   })
 }
 
-const composeYScale = ({ min, max, yMax, config }) => {
+const composeYScale = ({ min, max, yMax, config, leftMax }) => {
   // Adjust min value if using logarithmic scale
   min = config.useLogScale && min >= 0 && min < 1 ? min + 0.1 : min
   // Select the appropriate scale function
   const scaleFunc = config.useLogScale ? scaleLog : scaleLinear
+
+  if (config.visualizationType === 'Combo') max = leftMax
   // Return the configured scale function
   return scaleFunc({
     domain: [min, max],