@cdc/chart 4.23.4 → 4.23.6

package/src/hooks/useHighlightedBars.js

@@ -0,0 +1,154 @@
+import React, { useContext } from 'react'
+import ConfigContext from '../ConfigContext'
+
+export const useHighlightedBars = (config, updateConfig) => {
+  const { formatDate, parseDate } = useContext(ConfigContext)
+
+  let highlightedSeries = [] // only allow single series for highlights
+  let highlightedSeriesKey = ''
+  let highlightedBarValues = []
+  let highlightedSeriesValues = []
+
+  if (config.series?.length > 0 && config.data) {
+    highlightedSeries = config.series[0] // only allow single series for highlights
+    highlightedSeriesKey = config.series[0].dataKey
+    highlightedBarValues = config.highlightedBarValues
+    highlightedSeriesValues = config.data.map(item => item[config.xAxis.dataKey])
+  } else {
+    highlightedSeries = [] // only allow single series for highlights
+    highlightedSeriesKey = ''
+    highlightedBarValues = []
+    highlightedSeriesValues = []
+  }
+
+  const handleUpdateHighlightedBorderWidth = (e, index) => {
+    const copyOfHighlightedBarValues = [...config.highlightedBarValues]
+    copyOfHighlightedBarValues[index].borderWidth = e.target.value
+
+    updateConfig({
+      ...config,
+      highlightedBarValues: copyOfHighlightedBarValues
+    })
+  }
+
+  const handleUpdateHighlightedBar = (e, index) => {
+    e.preventDefault()
+
+    const copyOfHighlightedBarValues = [...config.highlightedBarValues]
+
+    copyOfHighlightedBarValues[index].value = e.target.value
+    copyOfHighlightedBarValues[index].dataKey = highlightedSeriesKey
+
+    updateConfig({
+      ...config,
+      highlightedBarValues: copyOfHighlightedBarValues
+    })
+  }
+
+  const handleAddNewHighlightedBar = (e, index) => {
+    e.preventDefault()
+    const copyOfHighlightedBarValues = [...config.highlightedBarValues]
+    copyOfHighlightedBarValues.push({ dataKey: highlightedSeriesKey })
+
+    updateConfig({
+      ...config,
+      highlightedBarValues: copyOfHighlightedBarValues
+    })
+  }
+
+  const handleRemoveHighlightedBar = (e, index) => {
+    e.preventDefault()
+    const copyOfHighlightedBarValues = [...config.highlightedBarValues]
+    copyOfHighlightedBarValues.splice(index, 1)
+    updateConfig({
+      ...config,
+      highlightedBarValues: copyOfHighlightedBarValues
+    })
+  }
+
+  const handleUpdateHighlightedBarColor = (e, index) => {
+    const copyOfHighlightedBarValues = [...config.highlightedBarValues]
+    copyOfHighlightedBarValues[index].color = e.target.value
+
+    updateConfig({
+      ...config
+    })
+  }
+
+  const handleHighlightedBarLegendLabel = (e, index) => {
+    const copyOfHighlightedBarValues = [...config.highlightedBarValues]
+    copyOfHighlightedBarValues[index].legendLabel = e.target.value
+
+    updateConfig({
+      ...config,
+      copyOfHighlightedBarValues
+    })
+  }
+
+  const HighLightedBarUtils = () => {}
+
+  /**
+   * @param {string} formattedValue - The value to check for.
+   * @param {Array<string>} highlightedBarValuesIn - An array of highlighted bar values.
+   * @param {string} labelColor - The default label color.
+   * @returns {string} - Returns the font color for the given value.
+   */
+  HighLightedBarUtils.checkFontColor = (formattedValue, highlightedBarValuesIn, labelColor) => {
+    if (config.xAxis.type === 'date') {
+      if (HighLightedBarUtils.formatDates(highlightedBarValuesIn).includes(formattedValue)) {
+        return '#000'
+      }
+    } else {
+      if (highlightedBarValuesIn.includes(formattedValue)) {
+        return '#000'
+      }
+    }
+    return labelColor
+  }
+
+  /**
+   * Formats an array of date values using the formatDate and parseDate functions.
+   *
+   * @param {string[]} highlightedBarValues - An array of date values to format.
+   * @returns {?Date[]} - An array of formatted date objects, or null if invalid input is provided.
+   */
+  HighLightedBarUtils.formatDates = highlightedBarValues => {
+    return highlightedBarValues.map(dateItem => {
+      if (!dateItem) return false
+      return formatDate(parseDate(dateItem))
+    })
+  }
+
+  /**
+   * Finds duplicate objects in an array based on the legendLabel property.
+   *
+   * @param {Array} arr - The array of objects to be checked.
+   * @return {Array} - An array of arrays, each containing objects that have the same legendLabel property.
+   */
+  HighLightedBarUtils.findDuplicates = arr => {
+    const duplicates = {}
+    const result = arr.filter(obj => {
+      const { legendLabel } = obj
+      if (!duplicates[legendLabel]) {
+        duplicates[legendLabel] = true
+        return true
+      }
+      return false
+    })
+    return result
+  }
+
+  return {
+    HighLightedBarUtils,
+    highlightedSeries,
+    highlightedSeriesKey,
+    highlightedBarValues,
+    highlightedSeriesValues,
+    handleUpdateHighlightedBar,
+    handleAddNewHighlightedBar,
+    handleRemoveHighlightedBar,
+    handleUpdateHighlightedBarColor,
+    handleHighlightedBarLegendLabel,
+    handleUpdateHighlightedBorderWidth
+  }
+}

package/src/hooks/useMinMax.js

@@ -0,0 +1,128 @@
+const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAllLine }) => {
+  let min = 0
+  let max = 0
+
+  if (!data) {
+    return { min, max }
+  }
+
+  const { max: enteredMaxValue, min: enteredMinValue } = config.runtime.yAxis
+
+  // 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)
+
+  min = enteredMinValue && isMinValid ? enteredMinValue : minValue
+  max = enteredMaxValue && isMaxValid ? enteredMaxValue : Number.MIN_VALUE
+
+  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 // bump up the max
+    }
+  }
+
+  if (config.visualizationType === 'Forecasting') {
+    const {
+      runtime: { forecastingSeriesKeys }
+    } = config
+    if (forecastingSeriesKeys.length > 0) {
+      // push all keys into an array
+      let columnNames = []
+
+      forecastingSeriesKeys.forEach(f => {
+        f.confidenceIntervals?.map(ciGroup => {
+          columnNames.push(ciGroup.high)
+          columnNames.push(ciGroup.low)
+        })
+      })
+
+      // Using the columnNames or "keys" get the returned result
+      const result = data.map(obj => columnNames.map(key => obj[key]))
+
+      const highCIGroup = Math.max.apply(
+        null,
+        result.map(item => item[0])
+      ) // Extract ages from result
+      const lowCIGroup = Math.min.apply(
+        null,
+        result.map(item => item[1])
+      ) // Extract ages from result
+
+      if (highCIGroup > max) {
+        max = highCIGroup
+      }
+      if (lowCIGroup < min) {
+        min = lowCIGroup
+      }
+    }
+  }
+
+  if ((config.visualizationType === 'Bar' || (config.visualizationType === 'Combo' && !isAllLine)) && min > 0) {
+    min = 0
+  }
+  if (config.visualizationType === 'Combo' && isAllLine) {
+    if ((enteredMinValue === undefined || enteredMinValue === null || enteredMinValue === '') && min > 0) {
+      min = 0
+    }
+    if (enteredMinValue) {
+      const isMinValid = config.useLogScale ? enteredMinValue >= 0 && enteredMinValue < minValue : enteredMinValue < minValue
+      min = enteredMinValue && isMinValid ? 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
+  }
+
+  if (config.visualizationType === 'Line') {
+    const isMinValid = config.useLogScale ? enteredMinValue >= 0 && enteredMinValue < minValue : enteredMinValue < minValue
+    min = enteredMinValue && isMinValid ? enteredMinValue : minValue
+  }
+  //If data value max wasn't provided, calculate it
+  if (max === Number.MIN_VALUE) {
+    // if all values in data are negative set max = 0
+    max = existPositiveValue ? maxValue : 0
+  }
+
+  //Adds Y Axis data padding if applicable
+  if (config.runtime.yAxis.paddingPercent) {
+    let paddingValue = (max - min) * config.runtime.yAxis.paddingPercent
+    min -= paddingValue
+    max += paddingValue
+  }
+
+  if (config.isLollipopChart && config.yAxis.displayNumbersOnBar) {
+    const dataKey = data.map(item => item[config.series[0].dataKey])
+    const maxDataVal = Math.max(...dataKey).toString().length
+
+    switch (true) {
+      case maxDataVal > 8 && maxDataVal <= 12:
+        max = max * 1.3
+        break
+      case maxDataVal > 4 && maxDataVal <= 7:
+        max = max * 1.1
+        break
+      default:
+        break
+    }
+  }
+
+  if (config.yAxis.enablePadding) {
+    if (min < 0) {
+      // sets with negative data need more padding on the max
+      max *= 1.2
+      min *= 1.2
+    } else {
+      max *= 1.1
+    }
+  }
+
+  return { min, max }
+}
+export default useMinMax

package/src/hooks/useReduceData.js

@@ -1,81 +1,55 @@
 import isNumber from '@cdc/core/helpers/isNumber'
 
 function useReduceData(config, data) {
-  // for combo charts check if all  Data Series selected to Bar;
-  const isBar = config?.series?.every(element => element?.type === 'Bar')
-  // for combo charts check if all Data series selected Line or dashed-md/sm/lg.
-  const isAllLine = config?.series?.every(el => el.type === 'Line' || el.type === 'dashed-sm' || el.type === 'dashed-md' || el.type === 'dashed-lg')
-  const cleanChars = value => {
-    // remove comma and $ signs
-    let tmp
-    if (typeof value === 'string') {
-      tmp = value !== null && value !== '' ? value.replace(/[,$]/g, '') : ''
-    } else {
-      tmp = value !== null && value !== '' ? value : ''
-    }
-    return tmp
-  }
+  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) => yTotal + Number(xValue[k]), 0)
+
   const getMaxValueFromData = () => {
-    let max // will hold max number from data.
-    if ((config.visualizationType === 'Bar' || (config.visualizationType === 'Combo' && isBar)) && config.visualizationSubType === 'stacked') {
-      const yTotals = data.reduce((allTotals, xValue) => {
-        const totalYValues = config.runtime.seriesKeys.reduce((yTotal, k) => {
-          yTotal += Number(xValue[k])
-          return yTotal
-        }, 0)
-
-        allTotals.push(totalYValues)
-        if (totalYValues > max) {
-          max = totalYValues
-        }
-        return allTotals
-      }, [])
+    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') {
+      const yTotals = data.map(sumYValues(config.runtime.seriesKeys))
       max = Math.max(...yTotals)
-    } else if ((config.visualizationType === 'Bar' || config.visualizationType === 'Deviation Bar') && config.series && config.series.dataKey) {
+    }
+
+    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)))
-      //max = Math.max(...data.map(d => Number(d[config.series.dataKey])))
-    } else if (config.visualizationType === 'Combo' && config.visualizationSubType === 'stacked' && !isBar) {
-      let total = []
+    }
 
+    if (config.visualizationType === 'Combo' && config.visualizationSubType === 'stacked' && !isBar) {
       if (config.runtime.barSeriesKeys && config.runtime.lineSeriesKeys) {
-        // get barSeries max Values added to each other
-        data.map(function (d, index) {
-          const totalYValues = config.runtime.barSeriesKeys.reduce((yTotal, k) => {
-            yTotal += Number(d[k])
-            return yTotal
-          }, 0)
-          return total.push(totalYValues)
-        })
-        // get lineSeries largest values
-        const lineMax = Math.max(...data.map(d => Math.max(...config.runtime.lineSeriesKeys.map(key => Number(cleanChars(d[key]))))))
+        const yTotals = data.map(sumYValues(config.runtime.barSeriesKeys))
 
-        const barMax = Math.max(...total)
+        const lineMax = Math.max(...data.map(d => Math.max(...config.runtime.lineSeriesKeys.map(key => Number(cleanChars(d[key]))))))
+        const barMax = Math.max(...yTotals)
 
-        max = Number(barMax) > Number(lineMax) ? barMax : lineMax
+        max = Math.max(barMax, lineMax)
       }
-    } else {
-      max = Math.max(...data.map(d => Math.max(...config.runtime.seriesKeys.map(key => (isNumber(d[key]) ? Number(cleanChars(d[key])) : 0)))))
     }
+
     return max
   }
 
   const getMinValueFromData = () => {
-    let min
-    const minNumberFromData = Math.min(...data.map(d => Math.min(...config.runtime.seriesKeys.map(key => (isNumber(d[key]) ? Number(cleanChars(d[key])) : 1000000000)))))
-    min = String(minNumberFromData)
-    return min
+    const minNumberFromData = Math.min(...data.map(d => Math.min(...config.runtime.seriesKeys.map(key => (isNumber(d[key]) ? Number(cleanChars(d[key])) : Infinity)))))
+
+    return String(minNumberFromData)
   }
 
   const findPositiveNum = () => {
-    // loop throught provided data to find positve number in arr based on series keys.
-    let existPositiveValue = false
-    if (config.runtime.seriesKeys) {
-      for (let i = 0; i < config.runtime.seriesKeys.length; i++) {
-        existPositiveValue = data.some(d => d[config.runtime.seriesKeys[i]] >= 0)
-      }
+    if (!config.runtime.seriesKeys) {
+      return false
     }
-    return existPositiveValue
+    return config.runtime.seriesKeys.some(key => data.some(d => d[key] >= 0))
+  }
+
+  const cleanChars = value => {
+    if (value === null || value === '') {
+      return ''
+    }
+
+    return typeof value === 'string' ? value.replace(/[,$]/g, '') : value
   }
 
   const maxValue = Number(getMaxValueFromData())

package/src/hooks/useRightAxis.js

@@ -4,7 +4,7 @@ import useReduceData from '../hooks/useReduceData'
 export default function useRightAxis({ config, yMax = 0, data = [], updateConfig }) {
   const hasRightAxis = config.visualizationType === 'Combo' && config.orientation === 'vertical'
   const rightSeriesKeys = config.series && config.series.filter(series => series.axis === 'Right').map(key => key.dataKey)
-  const { minValue } = useReduceData(config, data)
+  let { minValue } = useReduceData(config, data)
 
   const allRightAxisData = rightSeriesKeys => {
     if (!rightSeriesKeys) return [0]
@@ -15,9 +15,15 @@ export default function useRightAxis({ config, yMax = 0, data = [], updateConfig
     return rightAxisData
   }
 
-  const min = Math.min.apply(null, allRightAxisData(rightSeriesKeys))
   const max = Math.max.apply(null, allRightAxisData(rightSeriesKeys))
 
+  // 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
+
+  if (hasBarSeries && minValue > 0) {
+    minValue = 0
+  }
+
   const yScaleRight = scaleLinear({
     domain: [minValue, max],
     range: [yMax, 0]

package/src/hooks/useScales.js

@@ -0,0 +1,196 @@
+import { scaleBand, scaleLinear, scaleLog, scalePoint, scaleTime } from '@visx/scale'
+
+const useScales = properties => {
+  let { xAxisDataMapped, xMax, yMax, min, max, config, data } = properties
+  const seriesDomain = config.runtime.barSeriesKeys || config.runtime.seriesKeys
+  const xAxisType = config.runtime.xAxis.type
+  const isHorizontal = config.orientation === 'horizontal'
+
+  const { visualizationType } = config
+
+  //  define scales
+  let xScale = null
+  let yScale = null
+  let g2xScale = null
+  let g1xScale = null
+  let seriesScale = null
+  let xScaleNoPadding = null
+
+  const scaleTypes = {
+    TIME: 'time',
+    LOG: 'log',
+    POINT: 'point',
+    LINEAR: 'linear',
+    BAND: 'band'
+  }
+
+  // handle  Horizontal bars
+  if (isHorizontal) {
+    xScale = composeXScale({ min: min * 1.03, ...properties })
+    xScale.type = config.useLogScale ? scaleTypes.LOG : scaleTypes.LINEAR
+    yScale = getYScaleFunction(xAxisType, xAxisDataMapped)
+    yScale.rangeRound([0, yMax])
+    seriesScale = composeScalePoint(seriesDomain, [0, yMax])
+  }
+
+  // handle  Vertical bars
+  if (!isHorizontal) {
+    xScale = composeScalePoint(xAxisDataMapped, [0, xMax], 0.5)
+    xScale.type = scaleTypes.POINT
+    yScale = composeYScale(properties)
+    seriesScale = composeScalePoint(seriesDomain, [0, xMax])
+  }
+
+  // handle Area chart
+  if (config.visualizationType === 'Area Chart' && config.xAxis.type === 'date') {
+    xScale = scaleTime({
+      domain: [Math.min(...xAxisDataMapped), Math.max(...xAxisDataMapped)],
+      range: [0, xMax]
+    })
+    xScale.type = scaleTypes.TIME
+  }
+
+  // handle Deviation bar
+  if (config.visualizationType === 'Deviation Bar') {
+    const leftOffset = config.isLollipopChart ? 1.05 : 1.03
+    yScale = scaleBand({
+      domain: xAxisDataMapped,
+      range: [0, yMax]
+    })
+    xScale = scaleLinear({
+      domain: [min * leftOffset, Math.max(Number(config.xAxis.target), max)],
+      range: [0, xMax],
+      round: true,
+      nice: true
+    })
+    xScale.type = scaleTypes.LINEAR
+  }
+
+  // handle Scatter plot
+  if (config.visualizationType === 'Scatter Plot') {
+    if (config.xAxis.type === 'continuous') {
+      xScale = scaleLinear({
+        domain: [0, Math.max.apply(null, xScale.domain())],
+        range: [0, xMax]
+      })
+      xScale.type = scaleTypes.LINEAR
+    }
+  }
+
+  // handle Box plot
+  if (visualizationType === 'Box Plot') {
+    const allOutliers = []
+    const hasOutliers = config.boxplot.plots.map(b => b.columnOutliers.map(outlier => allOutliers.push(outlier))) && !config.boxplot.hideOutliers
+
+    // check if outliers are lower
+    if (hasOutliers) {
+      let outlierMin = Math.min(...allOutliers)
+      let outlierMax = Math.max(...allOutliers)
+
+      // check if outliers exceed standard bounds
+      if (outlierMin < min) min = outlierMin
+      if (outlierMax > max) max = outlierMax
+    }
+
+    // check fences for max/min
+    let lowestFence = Math.min(...config.boxplot.plots.map(item => item.columnLowerBounds))
+    let highestFence = Math.max(...config.boxplot.plots.map(item => item.columnUpperBounds))
+
+    if (lowestFence < min) min = lowestFence
+    if (highestFence > max) max = highestFence
+
+    // Set Scales
+    yScale = scaleLinear({
+      range: [yMax, 0],
+      round: true,
+      domain: [min, max]
+    })
+
+    xScale = scaleBand({
+      range: [0, xMax],
+      round: true,
+      domain: config.boxplot.categories,
+      padding: 0.4
+    })
+    xScale.type = scaleTypes.BAND
+  }
+
+  // handle Paired bar
+  if (visualizationType === 'Paired Bar') {
+    const offset = 1.02 // Offset of the ticks/values from the Axis
+    let groupOneMax = Math.max.apply(
+      Math,
+      data.map(d => d[config.series[0].dataKey])
+    )
+    let groupTwoMax = Math.max.apply(
+      Math,
+      data.map(d => d[config.series[1].dataKey])
+    )
+
+    // group one
+    g1xScale = scaleLinear({
+      domain: [0, Math.max(groupOneMax, groupTwoMax) * offset],
+      range: [xMax / 2, 0]
+    })
+
+    // group 2
+    g2xScale = scaleLinear({
+      domain: g1xScale.domain(),
+      range: [xMax / 2, xMax],
+      nice: true
+    })
+  }
+
+  return { xScale, yScale, seriesScale, g1xScale, g2xScale, xScaleNoPadding }
+}
+
+export default useScales
+
+/// helper functions
+const composeXScale = ({ min, max, xMax, config }) => {
+  // 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
+  // Return the configured scale function
+  return scaleFunc({
+    domain: [min, max],
+    range: [0, xMax],
+    nice: config.useLogScale,
+    zero: config.useLogScale,
+    type: config.useLogScale ? 'log' : 'linear'
+  })
+}
+
+const composeYScale = ({ min, max, yMax, config }) => {
+  // 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
+  // Return the configured scale function
+  return scaleFunc({
+    domain: [min, max],
+    range: [yMax, 0],
+    nice: config.useLogScale,
+    zero: config.useLogScale
+  })
+}
+
+const getYScaleFunction = (xAxisType, xAxisDataMapped) => {
+  if (xAxisType === 'date') {
+    return scaleLinear({
+      domain: [Math.min(...xAxisDataMapped), Math.max(...xAxisDataMapped)]
+    })
+  } else {
+    return scalePoint({ domain: xAxisDataMapped, padding: 0.5 })
+  }
+}
+
+const composeScalePoint = (domain, range, padding = 0) => {
+  return scalePoint({
+    domain: domain,
+    range: range,
+    padding: padding,
+    type: 'point'
+  })
+}