@cdc/chart 4.23.2 → 4.23.3

package/src/CdcChart.jsx

@@ -12,7 +12,6 @@ import { timeParse, timeFormat } from 'd3-time-format'
 import { format } from 'd3-format'
 import Papa from 'papaparse'
 import parse from 'html-react-parser'
-import { Base64 } from 'js-base64'
 import 'react-tooltip/dist/react-tooltip.css'
 
 // Primary Components
@@ -20,7 +19,7 @@ import ConfigContext from './ConfigContext'
 import PieChart from './components/PieChart'
 import LinearChart from './components/LinearChart'
 
-import { colorPalettesChart as colorPalettes } from '../../core/data/colorPalettes'
+import { colorPalettesChart as colorPalettes, twoColorPalette } from '@cdc/core/data/colorPalettes'
 
 import { publish, subscribe, unsubscribe } from '@cdc/core/helpers/events'
 
@@ -47,7 +46,6 @@ import './scss/main.scss'
 
 export default function CdcChart({ configUrl, config: configObj, isEditor = false, isDashboard = false, setConfig: setParentConfig, setEditing, hostname, link }) {
   const transform = new DataTransform()
-
   const [loading, setLoading] = useState(true)
   const [colorScale, setColorScale] = useState(null)
   const [config, setConfig] = useState({})
@@ -63,15 +61,28 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   const [dynamicLegendItems, setDynamicLegendItems] = useState([])
   const [imageId] = useState(`cove-${Math.random().toString(16).slice(-4)}`)
 
-  const legendGlyphSize = 15
-  const legendGlyphSizeHalf = legendGlyphSize / 2
-
   // Destructure items from config for more readable JSX
-  const { legend, title, description, visualizationType } = config
-  const { barBorderClass, lineDatapointClass, contentClasses, innerContainerClasses, sparkLineStyles } = useDataVizClasses(config)
+  let { legend, title, description, visualizationType } = config
+
+  // set defaults on titles if blank AND only in editor
+  if (isEditor) {
+    if (!title || title === '') title = 'Chart Title'
+  }
+
+  if (config.table && (!config.table?.label || config.table?.label === '')) config.table.label = 'Data Table'
+
+  const { barBorderClass, lineDatapointClass, contentClasses, sparkLineStyles } = useDataVizClasses(config)
 
   const handleChartTabbing = config.showSidebar ? `#legend` : config?.title ? `#dataTableSection__${config.title.replace(/\s/g, '')}` : `#dataTableSection`
 
+  const sortAsc = (a, b) => {
+    return a.toString().localeCompare(b.toString(), 'en', { numeric: true })
+  }
+
+  const sortDesc = (a, b) => {
+    return b.toString().localeCompare(a.toString(), 'en', { numeric: true })
+  }
+
   const handleChartAriaLabels = (state, testing = false) => {
     if (testing) console.log(`handleChartAriaLabels Testing On:`, state)
     try {
@@ -88,7 +99,20 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
       return ariaLabel
     } catch (e) {
-      console.error(e.message)
+      console.error('COVE: ', e.message) // eslint-disable-line
+    }
+  }
+
+  const handleLineType = lineType => {
+    switch (lineType) {
+      case 'dashed-sm':
+        return '5 5'
+      case 'dashed-md':
+        return '10 5'
+      case 'dashed-lg':
+        return '15 5'
+      default:
+        return 0
     }
   }
 
@@ -120,7 +144,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
           data = await fetch(response.dataUrl + `?v=${cacheBustingString()}`).then(response => response.json())
         }
       } catch {
-        console.error(`Cannot parse URL: ${response.dataUrl}`)
+        console.error(`COVE: Cannot parse URL: ${response.dataUrl}`)
         data = []
       }
 
@@ -136,6 +160,9 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     }
 
     let newConfig = { ...defaults, ...response }
+    if (newConfig.visualizationType === 'Box Plot') {
+      newConfig.legend.hide = true
+    }
     if (undefined === newConfig.table.show) newConfig.table.show = !isDashboard
     updateConfig(newConfig, data)
   }
@@ -188,7 +215,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       newConfig.filters.forEach((filter, index) => {
         let filterValues = []
 
-        filterValues = filter.orderedValues || generateValuesForFilter(filter.columnName, newExcludedData)
+        filterValues = filter.orderedValues || generateValuesForFilter(filter.columnName, newExcludedData).sort(filter.order === 'desc' ? sortDesc : sortAsc)
 
         newConfig.filters[index].values = filterValues
         // Initial filter should be active
@@ -218,9 +245,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     }
 
     if (newConfig.visualizationType === 'Box Plot' && newConfig.series) {
-      // stats
-      let allKeys = data.map(d => d[newConfig.xAxis.dataKey])
-      let allValues = data.map(d => Number(d[newConfig?.series[0]?.dataKey]))
+      let allKeys = newExcludedData ? newExcludedData.map(d => d[newConfig.xAxis.dataKey]) : data.map(d => d[newConfig.xAxis.dataKey])
+      let allValues = newExcludedData ? newExcludedData.map(d => Number(d[newConfig?.series[0]?.dataKey])) : data.map(d => Number(d[newConfig?.series[0]?.dataKey]))
 
       const uniqueArray = function (arrArg) {
         return arrArg.filter(function (elem, pos, arr) {
@@ -234,37 +260,54 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
       // group specific statistics
       // prevent re-renders
+      if (!groups) return
       groups.forEach((g, index) => {
-        if (!g) return
-        // filter data by group
-        let filteredData = data.filter(item => item[newConfig.xAxis.dataKey] === g)
-        let filteredDataValues = filteredData.map(item => Number(item[newConfig?.series[0]?.dataKey]))
-        // let filteredDataValues = filteredData.map(item => Number(item[newConfig.yAxis.dataKey]))
-        const q1 = d3.quantile(filteredDataValues, parseFloat(newConfig.boxplot.firstQuartilePercentage) / 100)
-        const q3 = d3.quantile(filteredDataValues, parseFloat(newConfig.boxplot.thirdQuartilePercentage) / 100)
-        const iqr = q3 - q1
-        const lowerBounds = q1 - (q3 - q1) * 1.5
-        const upperBounds = q3 + (q3 - q1) * 1.5
-        const outliers = filteredDataValues.filter(v => v < lowerBounds || v > upperBounds)
-        let nonOutliers = filteredDataValues
-
-        nonOutliers = nonOutliers.filter(item => !outliers.includes(item))
-
-        plots.push({
-          columnCategory: g,
-          columnMax: Number(q3 + 1.5 * iqr).toFixed(2),
-          columnThirdQuartile: q3.toFixed(2),
-          columnMedian: d3.median(filteredDataValues),
-          columnFirstQuartile: q1.toFixed(2),
-          columnMin: Number(q1 - 1.5 * iqr).toFixed(2),
-          columnCount: filteredDataValues.reduce((partialSum, a) => partialSum + a, 0),
-          columnSd: d3.deviation(filteredDataValues).toFixed(2),
-          columnMean: d3.mean(filteredDataValues).toFixed(2),
-          columnIqr: iqr.toFixed(2),
-          columnOutliers: outliers,
-          values: filteredDataValues,
-          nonOutlierValues: nonOutliers
-        })
+        try {
+          if (!g) throw new Error('No groups resolved in box plots')
+
+          // filter data by group
+          let filteredData = newExcludedData ? newExcludedData.filter(item => item[newConfig.xAxis.dataKey] === g) : data.filter(item => item[newConfig.xAxis.dataKey] === g)
+          let filteredDataValues = filteredData.map(item => Number(item[newConfig?.series[0]?.dataKey]))
+          // let filteredDataValues = filteredData.map(item => Number(item[newConfig.yAxis.dataKey]))
+
+          if (!filteredData) throw new Error('boxplots dont have data yet')
+          if (!plots) throw new Error('boxplots dont have plots yet')
+          if (newConfig.boxplot.firstQuartilePercentage === '') {
+            newConfig.boxplot.firstQuartilePercentage = 0
+          }
+
+          if (newConfig.boxplot.thirdQuartilePercentage === '') {
+            newConfig.boxplot.thirdQuartilePercentage = 0
+          }
+
+          const q1 = d3.quantile(filteredDataValues, parseFloat(newConfig.boxplot.firstQuartilePercentage) / 100)
+          const q3 = d3.quantile(filteredDataValues, parseFloat(newConfig.boxplot.thirdQuartilePercentage) / 100)
+          const iqr = q3 - q1
+          const lowerBounds = q1 - (q3 - q1) * 1.5
+          const upperBounds = q3 + (q3 - q1) * 1.5
+          const outliers = filteredDataValues.filter(v => v < lowerBounds || v > upperBounds)
+          let nonOutliers = filteredDataValues
+
+          nonOutliers = nonOutliers.filter(item => !outliers.includes(item))
+
+          plots.push({
+            columnCategory: g,
+            columnMax: Number(q3 + 1.5 * iqr).toFixed(newConfig.dataFormat.roundTo),
+            columnThirdQuartile: Number(q3).toFixed(newConfig.dataFormat.roundTo),
+            columnMedian: Number(d3.median(filteredDataValues)).toFixed(newConfig.dataFormat.roundTo),
+            columnFirstQuartile: q1.toFixed(newConfig.dataFormat.roundTo),
+            columnMin: Number(q1 - 1.5 * iqr).toFixed(newConfig.dataFormat.roundTo),
+            columnTotal: filteredDataValues.reduce((partialSum, a) => partialSum + a, 0),
+            columnSd: Number(d3.deviation(filteredDataValues)).toFixed(newConfig.dataFormat.roundTo),
+            columnMean: Number(d3.mean(filteredDataValues)).toFixed(newConfig.dataFormat.roundTo),
+            columnIqr: Number(iqr).toFixed(newConfig.dataFormat.roundTo),
+            columnOutliers: outliers,
+            values: filteredDataValues,
+            nonOutlierValues: nonOutliers
+          })
+        } catch (e) {
+          console.error('COVE: ', e.message) // eslint-disable-line
+        }
       })
 
       // make deep copy so we can remove some fields for data
@@ -273,6 +316,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       tableData.map(table => {
         delete table.columnIqr
         delete table.nonOutlierValues
+        return null // resolve eslint
       })
 
       // any other data we can add to boxplots
@@ -295,7 +339,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       })
     }
 
-    if ((newConfig.visualizationType === 'Bar' && newConfig.orientation === 'horizontal') || newConfig.visualizationType === 'Paired Bar') {
+    if (((newConfig.visualizationType === 'Bar' || newConfig.visualizationType === 'Deviation Bar') && newConfig.orientation === 'horizontal') || newConfig.visualizationType === 'Paired Bar') {
       newConfig.runtime.xAxis = newConfig.yAxis
       newConfig.runtime.yAxis = newConfig.xAxis
       newConfig.runtime.horizontal = true
@@ -386,7 +430,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     }
 
     setContainer(node)
-  }, [])
+  }, []) // eslint-disable-line
 
   function isEmpty(obj) {
     return Object.keys(obj).length === 0
@@ -395,7 +439,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   // Load data when component first mounts
   useEffect(() => {
     loadConfig()
-  }, [])
+  }, []) // eslint-disable-line
 
   /**
    * When cove has a config and container ref publish the cove_loaded event.
@@ -405,7 +449,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       publish('cove_loaded', { config: config })
       setCoveLoadedEventRan(true)
     }
-  }, [container, config])
+  }, [container, config]) // eslint-disable-line
 
   /**
    * Handles filter change events outside of COVE
@@ -448,20 +492,22 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       setConfig(newConfigHere)
       setFilteredData(filterData(externalFilters, excludedData))
     }
-  }, [externalFilters])
+  }, [externalFilters]) // eslint-disable-line
 
   // Load data when configObj data changes
   if (configObj) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
       loadConfig()
-    }, [configObj.data])
+    }, [configObj.data]) // eslint-disable-line
   }
 
   // Generates color palette to pass to child chart component
   useEffect(() => {
     if (stateData && config.xAxis && config.runtime.seriesKeys) {
-      let palette = config.customColors || colorPalettes[config.palette]
+      const configPalette = config.visualizationType === 'Paired Bar' || config.visualizationType === 'Deviation Bar' ? config.twoColor.palette : config.palette
+      const allPalettes = { ...colorPalettes, ...twoColorPalette }
+      let palette = config.customColors || allPalettes[configPalette]
       let numberOfKeys = config.runtime.seriesKeys.length
       let newColorScale
 
@@ -484,7 +530,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     if (config && stateData && config.sortData) {
       stateData.sort(sortData)
     }
-  }, [config, stateData])
+  }, [config, stateData]) // eslint-disable-line
 
   // Called on legend click, highlights/unhighlights the data series with the given label
   const highlight = label => {
@@ -543,33 +589,6 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     return timeFormat(config.runtime[section].dateDisplayFormat)(date)
   }
 
-  const DownloadButton = ({ data }, type = 'link') => {
-    const fileName = `${config.title.substring(0, 50)}.csv`
-
-    const csvData = Papa.unparse(data)
-
-    const saveBlob = () => {
-      if (typeof window.navigator.msSaveBlob === 'function') {
-        const dataBlob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' })
-        window.navigator.msSaveBlob(dataBlob, fileName)
-      }
-    }
-
-    if (type === 'download') {
-      return (
-        <a download={fileName} onClick={saveBlob} href={`data:text/csv;base64,${Base64.encode(csvData)}`} aria-label='Download this data in a CSV file format.' className={`btn btn-download no-border`}>
-          Download Data (CSV)
-        </a>
-      )
-    } else {
-      return (
-        <a download={fileName} onClick={saveBlob} href={`data:text/csv;base64,${Base64.encode(csvData)}`} aria-label='Download this data in a CSV file format.' className={`btn no-border`}>
-          Download Data (CSV)
-        </a>
-      )
-    }
-  }
-
   // function calculates the width of given text and its font-size
   function getTextWidth(text, font) {
     const canvas = document.createElement('canvas')
@@ -584,11 +603,19 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   const formatNumber = (num, axis) => {
     // if num is NaN return num
     if (isNaN(num) || !num) return num
+    // Check if the input number is negative
+    const isNegative = num < 0
+
+    // If the input number is negative, take the absolute value
+    if (isNegative) {
+      num = Math.abs(num)
+    }
 
     // destructure dataFormat values
     let {
-      dataFormat: { commas, abbreviated, roundTo, prefix, suffix, rightRoundTo, rightPrefix, rightSuffix }
+      dataFormat: { commas, abbreviated, roundTo, prefix, suffix, rightRoundTo, bottomRoundTo, rightPrefix, rightSuffix, bottomPrefix, bottomSuffix, bottomAbbreviated }
     } = config
+
     let formatSuffix = format('.2s')
 
     // check if value contains comma and remove it. later will add comma below.
@@ -596,14 +623,15 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
     let original = num
     let stringFormattingOptions
-
-    if (axis !== 'right') {
+    if (axis === 'left') {
       stringFormattingOptions = {
         useGrouping: config.dataFormat.commas ? true : false,
         minimumFractionDigits: roundTo ? Number(roundTo) : 0,
         maximumFractionDigits: roundTo ? Number(roundTo) : 0
       }
-    } else {
+    }
+
+    if (axis === 'right') {
       stringFormattingOptions = {
         useGrouping: config.dataFormat.rightCommas ? true : false,
         minimumFractionDigits: rightRoundTo ? Number(rightRoundTo) : 0,
@@ -611,6 +639,14 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       }
     }
 
+    if (axis === 'bottom') {
+      stringFormattingOptions = {
+        useGrouping: config.dataFormat.bottomCommas ? true : false,
+        minimumFractionDigits: bottomRoundTo ? Number(bottomRoundTo) : 0,
+        maximumFractionDigits: bottomRoundTo ? Number(bottomRoundTo) : 0
+      }
+    }
+
     num = numberFromString(num)
 
     if (isNaN(num)) {
@@ -631,8 +667,11 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     // Use commas also updates bars and the data table
     // We can't use commas when we're formatting the dataFormatted number
     // Example: commas -> 12,000; abbreviated -> 12k (correct); abbreviated & commas -> 12 (incorrect)
+    //
+    // Edge case for small numbers with decimals
+    // - if roundTo undefined which means it is blank, then do not round
     if ((axis === 'left' && commas && abbreviated) || (axis === 'bottom' && commas && abbreviated)) {
-      num = num
+      num = num // eslint-disable-line
     } else {
       num = num.toLocaleString('en-US', stringFormattingOptions)
     }
@@ -642,11 +681,11 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       num = formatSuffix(parseFloat(num)).replace('G', 'B')
     }
 
-    if (abbreviated && axis === 'bottom') {
+    if (bottomAbbreviated && axis === 'bottom') {
       num = formatSuffix(parseFloat(num)).replace('G', 'B')
     }
 
-    if (prefix && axis !== 'right') {
+    if (prefix && axis === 'left') {
       result += prefix
     }
 
@@ -654,9 +693,13 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       result += rightPrefix
     }
 
+    if (bottomPrefix && axis === 'bottom') {
+      result += bottomPrefix
+    }
+
     result += num
 
-    if (suffix && axis !== 'right') {
+    if (suffix && axis === 'left') {
       result += suffix
     }
 
@@ -664,6 +707,13 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       result += rightSuffix
     }
 
+    if (bottomSuffix && axis === 'bottom') {
+      result += bottomSuffix
+    }
+    if (isNegative) {
+      result = '-' + result
+    }
+
     return String(result)
   }
 
@@ -675,7 +725,9 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     Combo: <LinearChart />,
     Pie: <PieChart />,
     'Box Plot': <LinearChart />,
-    'Scatter Plot': <LinearChart />
+    'Area Chart': <LinearChart />,
+    'Scatter Plot': <LinearChart />,
+    'Deviation Bar': <LinearChart />
   }
 
   const missingRequiredSections = () => {
@@ -707,7 +759,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
           <div className='cdc-chart-inner-container'>
             {/* Title */}
 
-            {title && (
+            {title && config.showTitle && (
               <div role='heading' className={`chart-title ${config.theme} cove-component__header`} aria-level={2}>
                 {config && <sup className='superTitle'>{parse(config.superTitle || '')}</sup>}
                 <div>{parse(title)}</div>
@@ -721,7 +773,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
             {/* Visualization */}
             {config?.introText && <section className='introText'>{parse(config.introText)}</section>}
             <div
-              style={{ marginBottom: config.legend.position !== 'bottom' && config.orientation === 'horizontal' ? `${config.runtime.xAxis.size}px` : '0px' }}
+              style={{ marginBottom: config.legend.position !== 'bottom' && currentViewport !== 'sm' && currentViewport !== 'xs' && config.orientation === 'horizontal' ? `${config.runtime.xAxis.size}px` : '0px' }}
               className={`chart-container  ${config.legend.position === 'bottom' ? 'bottom' : ''}${config.legend.hide ? ' legend-hidden' : ''}${lineDatapointClass}${barBorderClass} ${contentClasses.join(' ')}`}
             >
               {/* All charts except sparkline */}
@@ -800,10 +852,12 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     dynamicLegendItems,
     setDynamicLegendItems,
     filterData,
+    imageId,
+    handleLineType,
     isNumber,
     cleanData,
-    imageId,
-    getTextWidth
+    getTextWidth,
+    twoColorPalette
   }
 
   const classes = ['cdc-open-viz-module', 'type-chart', `${currentViewport}`, `font-${config.fontSize}`, `${config.theme}`]

package/src/components/AreaChart.jsx

@@ -0,0 +1,198 @@
+import React, { useContext, useCallback } from 'react'
+
+// cdc
+import ConfigContext from '../ConfigContext'
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
+
+// visx & d3
+import { AreaClosed, LinePath, Bar } from '@visx/shape'
+import { Group } from '@visx/group'
+import * as allCurves from '@visx/curve'
+import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip'
+import { localPoint } from '@visx/event'
+import { bisector } from 'd3-array'
+
+const CoveAreaChart = ({ xScale, yScale, yMax, xMax }) => {
+  // enable various console logs in the file
+  const DEBUG = false
+
+  // import data from context
+  const { transformedData: data, config, handleLineType, parseDate, formatDate, formatNumber, seriesHighlight } = useContext(ConfigContext)
+
+  // import tooltip helpers
+  const { tooltipData, showTooltip } = useTooltip()
+
+  // used for offset on tooltip hover
+  let isEditor = window.location.href.includes('editor=true')
+
+  // here we're inside of the svg,
+  // it appears we need to use TooltipInPortal.
+  const { TooltipInPortal } = useTooltipInPortal({
+    detectBounds: true,
+    // when tooltip containers are scrolled, this will correctly update the Tooltip position
+    scroll: true
+  })
+
+  // Draw transparent bars over the chart to get tooltip data
+  // Turn DEBUG on for additional context.
+  let barThickness = xMax / config.data.length
+  let barThicknessAdjusted = barThickness * (config.barThickness || 0.8)
+  let offset = (barThickness * (1 - (config.barThickness || 0.8))) / 2
+
+  // Tooltip helper for getting data to the closest date/category hovered.
+  const getXValueFromCoordinate = x => {
+    if (config.xAxis.type === 'categorical') {
+      let eachBand = xScale.step()
+      let numerator = x
+      const index = Math.floor(Number(numerator) / eachBand)
+      return xScale.domain()[index - 1] // fixes off by 1 error
+    }
+
+    if (config.xAxis.type === 'date') {
+      const bisectDate = bisector(d => parseDate(d[config.xAxis.dataKey])).left
+      const x0 = xScale.invert(x)
+      const index = bisectDate(config.data, x0, 1)
+      const val = parseDate(config.data[index - 1][config.xAxis.dataKey])
+      return val
+    }
+  }
+
+  const handleMouseOver = useCallback(
+    (e, data) => {
+      // get the svg coordinates of the mouse
+      // and get the closest values
+      const eventSvgCoords = localPoint(e)
+      const { x, y } = eventSvgCoords
+
+      let closestXScaleValue = getXValueFromCoordinate(x)
+      let formattedDate = formatDate(closestXScaleValue)
+
+      let yScaleValues
+      if (config.xAxis.type === 'categorical') {
+        yScaleValues = data.filter(d => d[config.xAxis.dataKey] === closestXScaleValue)
+      } else {
+        yScaleValues = data.filter(d => d[config.xAxis.dataKey] === formattedDate)
+      }
+
+      let seriesToInclude = []
+      let yScaleMaxValues = []
+      let itemsToLoop = [config.runtime.xAxis.dataKey, ...config.runtime.seriesKeys]
+
+      itemsToLoop.map(seriesKey => {
+        return Object.entries(yScaleValues[0]).forEach(item => item[0] === seriesKey && seriesToInclude.push(item))
+      })
+
+      // filter out the series that aren't added to the map.
+      seriesToInclude.map(series => yScaleMaxValues.push(Number(yScaleValues[0][series])))
+      seriesToInclude = Object.fromEntries(seriesToInclude)
+
+      let tooltipData = {}
+      tooltipData.data = seriesToInclude
+      tooltipData.dataXPosition = isEditor ? 300 + x + 20 : x + 20
+      tooltipData.dataYPosition = y - 20
+
+      let tooltipInformation = {
+        tooltipData: tooltipData,
+        tooltipTop: 0,
+        tooltipValues: yScaleValues,
+        tooltipLeft: x
+      }
+
+      showTooltip(tooltipInformation)
+    },
+    [showTooltip] // eslint-disable-line
+  )
+
+  const TooltipListItem = ({ item }) => {
+    const [label, value] = item
+    return label === config.xAxis.dataKey ? `${label}: ${value}` : `${label}: ${formatNumber(value, 'left')}`
+  }
+
+  const handleX = d => {
+    return config.xAxis.type === 'date' ? xScale(parseDate(d[config.xAxis.dataKey])) : xScale(d[config.xAxis.dataKey])
+  }
+
+  const handleY = (d, index) => {
+    return yScale(d[config.series[index].dataKey])
+  }
+
+  return (
+    data && (
+      <ErrorBoundary component='AreaChart'>
+        <Group className='area-chart' key='area-wrapper' left={config.yAxis.size}>
+          {config.series.map((s, index) => {
+            let seriesColor = colorPalettesChart[config.palette][index]
+            let curveType = allCurves[s.lineType]
+            let transparentArea = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(s.dataKey) === -1
+            let displayArea = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(s.dataKey) !== -1
+
+            data.map(d => xScale(parseDate(d[config.xAxis.dataKey])))
+
+            return (
+              <>
+                {/* prettier-ignore */}
+                {/* this is the line that appears on top of the area chart */}
+                <LinePath data={data} x={d => handleX(d)} y={d => yScale(d[config.series[index].dataKey])} stroke={seriesColor} strokeWidth={2} strokeOpacity={1} shapeRendering='geometricPrecision' curve={curveType} strokeDasharray={s.type ? handleLineType(s.type) : 0} />
+
+                {/* prettier-ignore */}
+                {/* filled in sections */}
+                <AreaClosed key={'area-chart'} fill={displayArea ? seriesColor : 'transparent'} fillOpacity={transparentArea ? 0.25 : 0.5} data={data} x={d => handleX(d)} y={d => handleY(d, index)} yScale={yScale} curve={curveType} strokeDasharray={s.type ? handleLineType(s.typ) : 0} />
+
+                <Bar x={d => handleX(d)} y={d => yScale(d[config.series[index].dataKey])} yScale={yScale} width={xMax} height={yMax} fill={DEBUG ? 'red' : 'transparent'} fillOpacity={0.05} style={DEBUG ? { stroke: 'black', strokeWidth: 2 } : {}} onMouseMove={e => handleMouseOver(e, data)} />
+
+                {/* circles that appear on hover */}
+                {tooltipData && (
+                  <circle
+                    cx={config.xAxis.type === 'categorical' ? xScale(tooltipData.data[config.xAxis.dataKey]) : xScale(parseDate(tooltipData.data[config.xAxis.dataKey]))}
+                    cy={yScale(tooltipData.data[s.dataKey])}
+                    r={4.5}
+                    opacity={1}
+                    fillOpacity={1}
+                    fill={seriesColor}
+                    style={{ filter: 'unset', opacity: 1 }}
+                  />
+                )}
+
+                {/* bars to handle tooltips */}
+                {DEBUG &&
+                  config.data.map((item, index) => {
+                    return (
+                      <Bar
+                        className='bar-here'
+                        x={barThickness * index + offset}
+                        y={d => yScale(d[config.series[index].dataKey])}
+                        yScale={yScale}
+                        width={barThicknessAdjusted}
+                        height={yMax}
+                        fill={'transparent'}
+                        fillOpacity={1}
+                        style={{ stroke: 'black', strokeWidth: 2 }}
+                        onMouseMove={e => handleMouseOver(e, data)}
+                      />
+                    )
+                  })}
+
+                {tooltipData && (
+                  <TooltipInPortal key={Math.random()} top={tooltipData.dataYPosition} left={tooltipData.dataXPosition} style={defaultStyles}>
+                    <Group x={config.yAxis.size + 10} y={0}>
+                      <ul style={{ listStyle: 'none', paddingLeft: 'unset' }}>
+                        {Object.entries(tooltipData.data).map(item => (
+                          <li>
+                            <TooltipListItem item={item} />
+                          </li>
+                        ))}
+                      </ul>
+                    </Group>
+                  </TooltipInPortal>
+                )}
+              </>
+            )
+          })}
+        </Group>
+      </ErrorBoundary>
+    )
+  )
+}
+
+export default CoveAreaChart