@cdc/chart 4.23.10-alpha → 4.23.11

package/src/data/initial-state.js

@@ -7,11 +7,11 @@ export default {
   title: '',
   showTitle: true,
   showDownloadMediaButton: false,
-  showChartBrush: false,
   theme: 'theme-blue',
   animate: false,
   fontSize: 'medium',
   lineDatapointStyle: 'hover',
+  lineDatapointColor: 'Same as Line',
   barHasBorder: 'false',
   isLollipopChart: false,
   lollipopShape: 'circle',
@@ -28,6 +28,8 @@ export default {
     left: 5,
     right: 5
   },
+  suppressedData: [],
+
   yAxis: {
     hideAxis: false,
     displayNumbersOnBar: false,
@@ -134,6 +136,7 @@ export default {
     // start with a blank list
   },
   legend: {
+    hide: false,
     behavior: 'isolate',
     singleRow: false,
     colorCode: '',
@@ -145,7 +148,13 @@ export default {
     dynamicLegendItemLimitMessage: 'Dynamic Legend Item Limit Hit.',
     dynamicLegendChartMessage: 'Select Options from the Legend',
     lineMode: false,
-    verticalSorted: false
+    verticalSorted: false,
+    highlightOnHover: false
+  },
+  brush: {
+    height: 25,
+    data: [],
+    active: false
   },
   exclusions: {
     active: false,
@@ -180,22 +189,27 @@ export default {
   highlightedBarValues: [],
   series: [],
   tooltips: {
-    opacity: 90
+    opacity: 90,
+    singleSeries: false
   },
   forestPlot: {
     startAt: 0,
-    width: 'auto',
     colors: {
       line: '',
       shape: ''
     },
+    lineOfNoEffect: {
+      show: true
+    },
+    type: '',
+    pooledResult: {
+      diamondHeight: 5,
+      column: ''
+    },
     estimateField: '',
     estimateRadius: '',
-    lowerCiField: '',
-    upperCiField: '',
     shape: '',
     rowHeight: 20,
-    showZeroLine: false,
     description: {
       show: true,
       text: 'description',
@@ -217,12 +231,13 @@ export default {
       estimateField: 0
     },
     leftWidthOffset: 0,
-    rightWidthOffset: 0
-  },
-  brush: {
-    pattern_id: 'brush_pattern',
-    accent_color: '#ddd'
+    rightWidthOffset: 0,
+    showZeroLine: false,
+    hideDateCategoryCol: false,
+    leftLabel: '',
+    rightLabel: ''
   },
+
   area: {
     isStacked: false
   }

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
@@ -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,66 @@ 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 = xAxisDataValue => {
+    if (!xAxisDataValue) return ''
+    const columns = config.columns
+    const columnsWithTooltips = []
+    let additionalTooltipItems = ''
+    const closestVal =
+      tableData.find(d => {
+        return d[config.xAxis.dataKey] === xAxisDataValue
+      }) || {}
+    for (const [colKeys, colVals] of Object.entries(columns)) {
+      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[colVals?.name], 'left', true, config, formattingParams)
+      if (colVals.tooltips) {
+        columnsWithTooltips.push([colVals.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 +240,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/useEditorPermissions.js

@@ -3,7 +3,7 @@ import ConfigContext from '../ConfigContext'
 
 export const useEditorPermissions = () => {
   const { config } = useContext(ConfigContext)
-  const { visualizationType, series, orientation } = config
+  const { visualizationType, series, orientation, visualizationSubType } = config
 
   // Overall support for the chart types
   // prettier-ignore
@@ -84,6 +84,15 @@ export const useEditorPermissions = () => {
     }
   }
 
+  const visHasDataSuppression = () => {
+    if ((visualizationType === 'Bar' || 'Combo') && visualizationSubType === 'regular') {
+      return true
+    }
+  }
+  const visHasBrushChart = () => {
+    return ['Line', 'Bar', 'Area Chart', 'Combo'].includes(visualizationType) && orientation === 'vertical'
+  }
+
   const visHasBarBorders = () => {
     const disabledCharts = ['Box Plot', 'Scatter Plot', 'Pie']
     if (disabledCharts.includes(visualizationType)) return false
@@ -154,13 +163,13 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsDateCategoryTickRotation = () => {
-    const disabledCharts = ['Forest Plot', 'Spark Line']
+    const disabledCharts = ['Spark Line']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsDateCategoryNumTicks = () => {
-    const disabledCharts = ['Forest Plot', 'Spark Line']
+    const disabledCharts = ['Spark Line']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -242,6 +251,12 @@ export const useEditorPermissions = () => {
     return true
   }
 
+  const visSupportsReactTooltip = () => {
+    if (['Deviation Bar', 'Box Plot', 'Scatter Plot', 'Paired Bar'].includes(visualizationType) || (visualizationType === 'Bar' && config.tooltips.singleSeries)) {
+      return true
+    }
+  }
+
   return {
     enabledChartTypes,
     headerColors,
@@ -250,7 +265,9 @@ export const useEditorPermissions = () => {
     visHasBarBorders,
     visHasDataCutoff,
     visHasLabelOnData,
+    visHasDataSuppression,
     visHasLegend,
+    visHasBrushChart,
     visHasNumbersOnBars,
     visSupportsBarSpace,
     visSupportsBarThickness,
@@ -276,6 +293,7 @@ export const useEditorPermissions = () => {
     visSupportsValueAxisGridLines,
     visSupportsValueAxisLabels,
     visSupportsValueAxisLine,
-    visSupportsValueAxisTicks
+    visSupportsValueAxisTicks,
+    visSupportsReactTooltip
   }
 }

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[config.forestPlot.lower]))) - xAxisPadding, Math.max(...data.map(d => parseFloat(d[config.forestPlot.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, xMax - 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[config.forestPlot.lower]))) - xAxisPadding, Math.max(...data.map(d => parseFloat(d[config.forestPlot.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],