@cdc/chart 4.23.3 → 4.23.5

package/src/components/SparkLine.jsx

@@ -35,43 +35,7 @@ export default function SparkLine({ width: parentWidth, height: parentHeight })
   const isMaxValid = Number(enteredMaxValue) >= Number(maxValue)
   const isMinValid = Number(enteredMinValue) <= Number(minValue)
 
-  // REMOVE bad data points from the data set
-  // Examples: NA, N/A, "1,234", "anystring"
-  // - if you dont call this on data into LineGroup below, for example
-  // then entire data series are removed because of the defined statement
-  // i.e. if a series has any bad data points the entire series wont plot
-  const cleanData = (data, testing = false) => {
-    let cleanedup = []
-    if (testing) console.log('## Data to clean=', data)
-    data.forEach(function (d, i) {
-      let cleanedSeries = {}
-      Object.keys(d).forEach(function (key) {
-        if (key === 'Date') {
-          // pass thru the dates
-          cleanedSeries[key] = d[key]
-        } else {
-          // remove comma and dollar signs
-          let tmp = d[key] !== null && d[key] !== '' ? d[key].replace(/[,$]/g, '') : ''
-          if (testing) console.log('tmp no comma or $', tmp)
-          if ((tmp !== '' && tmp !== null && !isNaN(tmp)) || (tmp !== '' && tmp !== null && /\d+\.?\d*/.test(tmp))) {
-            cleanedSeries[key] = tmp
-          } else {
-            // return nothing to skip bad data point
-            cleanedSeries[key] = '' // returning blank fixes broken chart draw
-          }
-        }
-      })
-      cleanedup.push(cleanedSeries)
-    })
-    if (testing) console.log('## cleanedData =', cleanedup)
-    return cleanedup
-  }
-
-  // Just do this once up front otherwise we end up
-  // calling clean several times on same set of data (TT)
-  const cleanedData = cleanData(data, config.xAxis.dataKey)
-
-  if (cleanedData) {
+  if (data) {
     let min = enteredMinValue && isMinValid ? enteredMinValue : minValue
     let max = enteredMaxValue && isMaxValid ? enteredMaxValue : Number.MIN_VALUE
 
@@ -86,7 +50,7 @@ export default function SparkLine({ width: parentWidth, height: parentHeight })
       max += paddingValue
     }
 
-    let xAxisDataMapped = cleanedData.map(d => getXAxisData(d))
+    let xAxisDataMapped = data.map(d => getXAxisData(d))
 
     if (config.runtime.horizontal) {
       xScale = scaleLinear({
@@ -128,7 +92,7 @@ export default function SparkLine({ width: parentWidth, height: parentHeight })
   return (
     <ErrorBoundary component='SparkLine'>
       <svg role='img' aria-label={handleChartAriaLabels(config)} width={width} height={height} className={'sparkline'} tabIndex={0}>
-        {config.runtime.lineSeriesKeys.length > 0
+        {config.runtime.lineSeriesKeys?.length > 0
           ? config.runtime.lineSeriesKeys
           : config.runtime.seriesKeys.map((seriesKey, index) => (
               <>
@@ -141,7 +105,7 @@ export default function SparkLine({ width: parentWidth, height: parentHeight })
                   opacity={config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(seriesKey) === -1 ? 0.5 : 1}
                   display={config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1 ? 'block' : 'none'}
                 >
-                  {cleanedData.map((d, dataIndex) => {
+                  {data.map((d, dataIndex) => {
                     let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${formatNumber(getYAxisData(d, seriesKey))}` : formatNumber(getYAxisData(d, seriesKey))
                     let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${d[config.runtime.xAxis.dataKey]}` : d[config.runtime.xAxis.dataKey]
 
@@ -175,7 +139,7 @@ export default function SparkLine({ width: parentWidth, height: parentHeight })
                   })}
                   <LinePath
                     curve={allCurves.curveLinear}
-                    data={cleanedData}
+                    data={data}
                     x={d => xScale(getXAxisData(d))}
                     y={d => yScale(getYAxisData(d, seriesKey))}
                     stroke={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
@@ -201,7 +165,7 @@ export default function SparkLine({ width: parentWidth, height: parentHeight })
                   hideTicks
                   scale={xScale}
                   tickValues={handleSparkLineTicks}
-                  tickFormat={formatDate}
+                  tickFormat={tick => (config.xAxis.type === 'date' ? formatDate(tick) : null)}
                   stroke={'black'}
                   tickStroke={'black'}
                   tickLabelProps={() => ({

package/src/data/initial-state.js

@@ -2,6 +2,7 @@ export default {
   type: 'chart',
   title: '',
   showTitle: true,
+  showDownloadMediaButton: false,
   theme: 'theme-blue',
   animate: false,
   fontSize: 'medium',
@@ -14,6 +15,9 @@ export default {
   barStyle: '',
   roundingStyle: 'standard',
   tipRounding: 'top',
+  general: {
+    showDownloadButton: false
+  },
   padding: {
     left: 5,
     right: 5
@@ -40,7 +44,8 @@ export default {
     rightAxisTickColor: '#333',
     numTicks: '',
     axisPadding: 0,
-    tickRotation: 0
+    tickRotation: 0,
+    anchors: []
   },
   boxplot: {
     plots: [],
@@ -67,7 +72,9 @@ export default {
       iqr: 'Interquartile Range',
       total: 'Total',
       outliers: 'Outliers',
-      values: 'Values'
+      values: 'Values',
+      lowerBounds: 'Lower Bounds',
+      upperBounds: 'Upper Bounds'
     }
   },
   topAxis: {
@@ -82,6 +89,7 @@ export default {
     horizontal: 750
   },
   xAxis: {
+    anchors: [],
     type: 'categorical',
     showTargetLabel: true,
     targetLabel: 'Target',
@@ -106,9 +114,16 @@ export default {
     limitHeight: false,
     height: '',
     caption: '',
-    showDownloadUrl: false
+    showDownloadUrl: false,
+    showDataTableLink: true,
+    indexLabel: '',
+    download: false,
+    showVertical: true
   },
   orientation: 'vertical',
+  color: 'pinkpurple',
+  columns: {  // start with a blank list
+  },
   legend: {
     behavior: 'isolate',
     singleRow: false,
@@ -146,5 +161,9 @@ export default {
     border: true,
     accent: true,
     background: true
-  }
+  },
+  useLogScale: false,
+  filterBehavior: 'Filter Change',
+  highlightedBarValues: [],
+  series: []
 }

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,92 @@
+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 === '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())