@cdc/chart 4.23.2 → 4.23.3

package/src/components/Filters.jsx

@@ -3,7 +3,7 @@ import ConfigContext from './../ConfigContext'
 import Button from '@cdc/core/components/elements/Button'
 
 const useFilters = () => {
-  const { config, setConfig, filteredData, setFilteredData, excludedData, filterData, runtimeFilters } = useContext(ConfigContext)
+  const { config, setConfig, setFilteredData, excludedData, filterData } = useContext(ConfigContext)
   const [showApplyButton, setShowApplyButton] = useState(false)
 
   const sortAsc = (a, b) => {
@@ -14,7 +14,7 @@ const useFilters = () => {
     return b.toString().localeCompare(a.toString(), 'en', { numeric: true })
   }
 
-  const announceChange = text => { }
+  const announceChange = text => {}
 
   const changeFilterActive = (index, value) => {
     let newFilters = config.filters
@@ -38,6 +38,7 @@ const useFilters = () => {
     // reset to first item in values array.
     newFilters.map(filter => {
       filter.active = filter.values[0]
+      return null
     })
 
     setFilteredData(filterData(newFilters, excludedData))

package/src/components/Legend.jsx

@@ -7,7 +7,7 @@ import LegendCircle from '@cdc/core/components/LegendCircle'
 import useLegendClasses from './../hooks/useLegendClasses'
 
 const Legend = () => {
-  const { config, legend, colorScale, seriesHighlight, highlight, highlightReset, setSeriesHighlight, dynamicLegendItems, setDynamicLegendItems, transformedData: data, colorPalettes, rawData, setConfig, currentViewport } = useContext(ConfigContext)
+  const { config, legend, colorScale, seriesHighlight, highlight, twoColorPalette, highlightReset, setSeriesHighlight, dynamicLegendItems, setDynamicLegendItems, transformedData: data, colorPalettes, rawData, setConfig, currentViewport } = useContext(ConfigContext)
 
   const { innerClasses, containerClasses } = useLegendClasses(config)
 
@@ -25,12 +25,14 @@ const Legend = () => {
       let tmp = {}
       colsToKeep.map(col => {
         tmp[col] = isNaN(dataItem[col]) ? dataItem[col] : dataItem[col]
+        return null
       })
       return tmp
     })
 
     colsToKeep.map(col => {
       tmpLabels[col] = col
+      return null
     })
 
     if (dynamicLegendItems.length > 0) {
@@ -43,7 +45,7 @@ const Legend = () => {
         }
       })
     }
-  }, [dynamicLegendItems])
+  }, [dynamicLegendItems]) // eslint-disable-line
 
   useEffect(() => {
     if (dynamicLegendItems.length === 0) {
@@ -53,7 +55,9 @@ const Legend = () => {
       config.runtime.seriesLabelsAll.map(item => {
         resetSeriesNames.map(col => {
           tmpLabels[col] = col
+          return null
         })
+        return null
       })
 
       setConfig({
@@ -65,7 +69,7 @@ const Legend = () => {
         }
       })
     }
-  }, [dynamicLegendItems])
+  }, [dynamicLegendItems]) // eslint-disable-line
 
   const removeDynamicLegendItem = label => {
     let newLegendItems = dynamicLegendItems.filter(item => item.text !== label.text)
@@ -77,67 +81,75 @@ const Legend = () => {
     setDynamicLegendItems([...dynamicLegendItems, JSON.parse(e.target.value)])
   }
 
-  const createLegendLabels = (data, defaultLabels) => {
+  const createLegendLabels = defaultLabels => {
     const colorCode = config.legend?.colorCode
-    if (config.visualizationType !== 'Bar' || config.visualizationSubType !== 'regular' || !colorCode || config.series?.length > 1) {
-      return defaultLabels
-    }
-    let palette = colorPalettes[config.palette]
+    if (config.visualizationType === 'Deviation Bar') {
+      const [belowColor, aboveColor] = twoColorPalette[config.twoColor.palette]
+      const labelBelow = {
+        datum: 'X',
+        index: 0,
+        text: `Below ${config.xAxis.targetLabel}`,
+        value: belowColor
+      }
+      const labelAbove = {
+        datum: 'X',
+        index: 1,
+        text: `Above ${config.xAxis.targetLabel}`,
+        value: aboveColor
+      }
 
-    while (data.length > palette.length) {
-      palette = palette.concat(palette)
+      return [labelBelow, labelAbove]
     }
-    palette = palette.slice(0, data.length)
-    //store uniq values to Set by colorCode
-    const set = new Set()
-
-    data.forEach(d => set.add(d[colorCode]))
-
-    // create labels with uniq values
-    const uniqeLabels = Array.from(set).map((val, i) => {
-      const newLabel = {
-        datum: val,
-        index: i,
-        text: val,
-        value: palette[i]
+    if (config.visualizationType === 'Bar' && config.visualizationSubType === 'regular' && colorCode && config.series?.length === 1) {
+      let palette = colorPalettes[config.palette]
+
+      while (data.length > palette.length) {
+        palette = palette.concat(palette)
       }
-      return newLabel
-    })
+      palette = palette.slice(0, data.length)
+      //store uniq values to Set by colorCode
+      const set = new Set()
+
+      data.forEach(d => set.add(d[colorCode]))
+
+      // create labels with uniq values
+      const uniqeLabels = Array.from(set).map((val, i) => {
+        const newLabel = {
+          datum: val,
+          index: i,
+          text: val,
+          value: palette[i]
+        }
+        return newLabel
+      })
 
-    return uniqeLabels
-  }
-  // in small screens update config legend position.
-  useEffect(() => {
-    if (currentViewport === 'sm' || currentViewport === 'xs' || config.legend.position === 'left') {
-      setConfig({ ...config, legend: { ...config.legend, position: 'bottom' } })
+      return uniqeLabels
     }
-    setConfig({ ...config, legend: { ...config.legend, position: 'right' } })
-  }, [currentViewport])
+    return defaultLabels
+  }
+
+  const isBottomOrSmallViewport = config.legend.position === 'bottom' || currentViewport === 'sm' || currentViewport === 'xs'
+  const isHorizontal = config.orientation === 'horizontal'
+  const marginTop = isBottomOrSmallViewport && isHorizontal ? `${config.runtime.xAxis.size}px` : '0px'
+  const marginBottom = isBottomOrSmallViewport ? '15px' : '0px'
 
-  if (!legend) return
+  if (!legend) return null
 
   if (!legend.dynamicLegend)
     return config.visualizationType !== 'Box Plot' ? (
-      <aside
-        style={{ marginTop: config.legend.position === 'bottom' && config.orientation === 'horizontal' ? `${config.runtime.xAxis.size}px` : '0px', marginBottom: config.legend.position === 'bottom' ? '15px' : '0px' }}
-        id='legend'
-        className={containerClasses.join(' ')}
-        role='region'
-        aria-label='legend'
-        tabIndex={0}
-      >
+      <aside style={{ marginTop, marginBottom }} id='legend' className={containerClasses.join(' ')} role='region' aria-label='legend' tabIndex={0}>
         {legend.label && <h2>{parse(legend.label)}</h2>}
         {legend.description && <p>{parse(legend.description)}</p>}
         <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
           {labels => (
             <div className={innerClasses.join(' ')}>
-              {createLegendLabels(data, labels).map((label, i) => {
+              {createLegendLabels(labels).map((label, i) => {
                 let className = 'legend-item'
                 let itemName = label.datum
 
                 // Filter excluded data keys from legend
                 if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
-                  return
+                  return null
                 }
 
                 if (config.runtime.seriesLabels) {
@@ -209,7 +221,7 @@ const Legend = () => {
 
                     // Filter excluded data keys from legend
                     if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
-                      return
+                      return null
                     }
 
                     if (config.runtime.seriesLabels) {
@@ -225,6 +237,7 @@ const Legend = () => {
                       if (listItem.text === label.text) {
                         inDynamicList = true
                       }
+                      return null
                     })
 
                     if (inDynamicList) return true
@@ -254,7 +267,7 @@ const Legend = () => {
 
             // Filter excluded data keys from legend
             if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
-              return
+              return null
             }
 
             if (config.runtime.seriesLabels && !config.legend.dynamicLegend) {

package/src/components/LineChart.jsx

@@ -12,28 +12,15 @@ import ConfigContext from '../ConfigContext'
 import useRightAxis from '../hooks/useRightAxis'
 
 export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData, xMax, yMax, seriesStyle = 'Line' }) {
-  const { colorPalettes, transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, isNumber, cleanData, updateConfig } = useContext(ConfigContext)
+  const { colorPalettes, transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, isNumber, cleanData, updateConfig, handleLineType } = useContext(ConfigContext)
   // 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)
   const { yScaleRight } = useRightAxis({ config, yMax, data, updateConfig })
 
-  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
-    }
-  }
-
   const handleAxisFormating = (axis = 'left', label, value) => {
     // if this is an x axis category/date value return without doing any formatting.
-    if (label === config.runtime.xAxis.label) return value
+    // if (label === config.runtime.xAxis.label) return value
 
     axis = String(axis).toLocaleLowerCase()
     if (label) {
@@ -86,11 +73,6 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
                   d[seriesKey] !== undefined &&
                   d[seriesKey] !== '' &&
                   d[seriesKey] !== null && (
-                    // isNumber(d[seriesKey]) &&
-                    // isNumber(getYAxisData(d, seriesKey)) &&
-                    // isNumber(getXAxisData(d)) &&
-                    // isNumber(yScaleRight(getXAxisData(d))) &&
-                    // isNumber(yScale(getXAxisData(d))) &&
                     <Group key={`series-${seriesKey}-point-${dataIndex}`}>
                       {/* Render legend */}
                       <Text
@@ -100,7 +82,7 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
                         fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
                         textAnchor='middle'
                       >
-                        {formatNumber(d[seriesKey])}
+                        {formatNumber(d[seriesKey], 'left')}
                       </Text>
 
                       <circle

package/src/components/LinearChart.jsx

@@ -4,7 +4,7 @@ import { Tooltip as ReactTooltip } from 'react-tooltip'
 import { Group } from '@visx/group'
 import { Line } from '@visx/shape'
 import { Text } from '@visx/text'
-import { scaleLinear, scalePoint, scaleBand } from '@visx/scale'
+import { scaleLinear, scalePoint, scaleBand, scaleTime } from '@visx/scale'
 import { AxisLeft, AxisBottom, AxisRight, AxisTop } from '@visx/axis'
 
 import CoveScatterPlot from './ScatterPlot'
@@ -14,16 +14,19 @@ import ConfigContext from '../ConfigContext'
 import PairedBarChart from './PairedBarChart'
 import useIntersectionObserver from './useIntersectionObserver'
 import CoveBoxPlot from './BoxPlot'
+import CoveAreaChart from './AreaChart'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import '../scss/LinearChart.scss'
 import useReduceData from '../hooks/useReduceData'
 import useRightAxis from '../hooks/useRightAxis'
 import useTopAxis from '../hooks/useTopAxis'
+import { DeviationBar } from './DeviationBar'
 
 // TODO: Move scaling functions into hooks to manage complexity
 export default function LinearChart() {
-  const { transformedData: data, dimensions, config, parseDate, formatDate, currentViewport, formatNumber, handleChartAriaLabels, updateConfig } = useContext(ConfigContext)
+  const { transformedData: data, dimensions, config, parseDate, formatDate, currentViewport, formatNumber, handleChartAriaLabels, updateConfig, stringFormattingOptions } = useContext(ConfigContext)
+
   let [width] = dimensions
   const { minValue, maxValue, existPositiveValue, isAllLine } = useReduceData(config, data)
   const [animatedChart, setAnimatedChart] = useState(false)
@@ -32,14 +35,16 @@ export default function LinearChart() {
   const dataRef = useIntersectionObserver(triggerRef, {
     freezeOnceVisible: false
   })
+
   // Make sure the chart is visible if in the editor
+  /* eslint-disable react-hooks/exhaustive-deps */
   useEffect(() => {
     const element = document.querySelector('.isEditor')
     if (element) {
       // parent element is visible
       setAnimatedChart(prevState => true)
     }
-  })
+  }) /* eslint-disable-line */
 
   // If the chart is in view, set to animate if it has not already played
   useEffect(() => {
@@ -72,11 +77,37 @@ export default function LinearChart() {
   const isMaxValid = existPositiveValue ? enteredMaxValue >= maxValue : enteredMaxValue >= 0
   const isMinValid = (enteredMinValue <= 0 && minValue >= 0) || (enteredMinValue <= minValue && minValue < 0)
 
+  let max = 0 // need outside the if statement
+  let min = 0
   if (data) {
-    let min = enteredMinValue && isMinValid ? enteredMinValue : minValue
-    let max = enteredMaxValue && isMaxValid ? enteredMaxValue : Number.MIN_VALUE
+    min = enteredMinValue && isMinValid ? enteredMinValue : minValue
+    max = enteredMaxValue && isMaxValid ? enteredMaxValue : Number.MIN_VALUE
+
+    // DEV-3263 - If Confidence Intervals in data, then need to account for increased height in max for YScale
+    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
+      }
+    }
+
+    // DEV-3263 - If Confidence Intervals in data, then need to account for increased height in max for YScale
+    if (config.visualizationType === 'Bar' || config.visualizationType === 'Combo') {
+      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) {
+    if ((config.visualizationType === 'Bar' || config.visualizationType === 'Deviation Bar' || (config.visualizationType === 'Combo' && !isAllLine)) && min > 0) {
       min = 0
     }
     if (config.visualizationType === 'Combo' && isAllLine) {
@@ -119,6 +150,19 @@ export default function LinearChart() {
         case maxDataVal > 4 && maxDataVal <= 7:
           max = max * 1.1
           break
+        default:
+          break
+      }
+    }
+
+    // DEV-3219 - bc some values are going above YScale - adding 10% or 20% factor onto Max
+    // - put the statement up here and it works for both vert and horiz charts of all types
+    if (config.yAxis.enablePadding) {
+      if (min < 0) {
+        // sets with negative data need more padding on the max
+        max *= 1.2
+      } else {
+        max *= 1.1
       }
     }
 
@@ -161,6 +205,13 @@ export default function LinearChart() {
       })
     }
 
+    if (config.visualizationType === 'Area Chart' && config.xAxis.type === 'date') {
+      xScale = scaleTime({
+        domain: [Math.min(...xAxisDataMapped), Math.max(...xAxisDataMapped)],
+        range: [0, xMax]
+      })
+    }
+
     if (config.visualizationType === 'Paired Bar') {
       const offset = 1.02 // Offset of the ticks/values from the Axis
       let groupOneMax = Math.max.apply(
@@ -194,6 +245,55 @@ export default function LinearChart() {
         })
       }
     }
+
+    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
+      })
+    }
+    // Handle Box Plots
+    if (config.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.columnMin))
+      let highestFence = Math.max(...config.boxplot.plots.map(item => item.columnMax))
+
+      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
+      })
+    }
   }
 
   const handleLeftTickFormatting = tick => {
@@ -204,7 +304,8 @@ export default function LinearChart() {
 
   const handleBottomTickFormatting = tick => {
     if (config.runtime.xAxis.type === 'date') return formatDate(tick)
-    if (config.orientation === 'horizontal') return formatNumber(tick, 'bottom')
+    if (config.orientation === 'horizontal') return formatNumber(tick, 'left')
+    if (config.xAxis.type === 'continuous') return formatNumber(tick, 'bottom')
     return tick
   }
 
@@ -216,57 +317,36 @@ export default function LinearChart() {
 
     if (axis === 'yAxis') {
       tickCount = isHorizontal && !numTicks ? data.length : isHorizontal && numTicks ? numTicks : !isHorizontal && !numTicks ? undefined : !isHorizontal && numTicks && numTicks
+      // to fix edge case of small numbers with decimals
+      if (tickCount === undefined && !config.dataFormat.roundTo) {
+        // then it is set to Auto
+        if (Number(max) <= 3) {
+          tickCount = 2
+        } else {
+          tickCount = 4 // same default as standalone components
+        }
+      }
+      if (Number(tickCount) > Number(max)) {
+        // cap it and round it so its an integer
+        tickCount = Number(min) < 0 ? Math.round(max) * 2 : Math.round(max)
+      }
     }
 
     if (axis === 'xAxis') {
       tickCount = isHorizontal && !numTicks ? undefined : isHorizontal && numTicks ? numTicks : !isHorizontal && !numTicks ? undefined : !isHorizontal && numTicks && numTicks
+      if (isHorizontal && tickCount === undefined && !config.dataFormat.roundTo) {
+        // then it is set to Auto
+        // - check for small numbers situation
+        if (max <= 3) {
+          tickCount = 2
+        } else {
+          tickCount = 4 // same default as standalone components
+        }
+      }
     }
     return tickCount
   }
 
-  // Handle Box Plots
-  if (config.visualizationType === 'Box Plot') {
-    let minYValue
-    let maxYValue
-    let allOutliers = []
-    let allLowerBounds = config.boxplot.plots.map(plot => plot.columnMin)
-    let allUpperBounds = config.boxplot.plots.map(plot => plot.columnMax)
-
-    minYValue = Math.min(...allLowerBounds)
-    maxYValue = Math.max(...allUpperBounds)
-
-    const hasOutliers = config.boxplot.plots.map(b => b.columnOutliers.map(outlier => allOutliers.push(outlier))) && !config.boxplot.hideOutliers
-
-    if (hasOutliers) {
-      let outlierMin = Math.min(...allOutliers)
-      let outlierMax = Math.max(...allOutliers)
-
-      // check if outliers exceed standard bounds
-      if (outlierMin < minYValue) minYValue = outlierMin
-      if (outlierMax > maxYValue) maxYValue = outlierMax
-    }
-
-    const seriesNames = data.map(d => d[config.xAxis.dataKey])
-
-    // Set Scales
-    yScale = scaleLinear({
-      range: [yMax, 0],
-      round: true,
-      domain: [minYValue, maxYValue]
-    })
-
-    xScale = scaleBand({
-      range: [0, xMax],
-      round: true,
-      domain: config.boxplot.categories,
-      padding: 0.4
-    })
-  }
-
-  const handleTick = tick => {
-    return config.runtime.xAxis.type === 'date' ? formatDate(tick) : config.orientation === 'horizontal' ? formatNumber(tick) : tick
-  }
-
   return isNaN(width) ? (
     <></>
   ) : (
@@ -277,9 +357,24 @@ export default function LinearChart() {
           ? config.regions.map(region => {
               if (!Object.keys(region).includes('from') || !Object.keys(region).includes('to')) return null
 
-              const from = xScale(parseDate(region.from).getTime())
-              const to = xScale(parseDate(region.to).getTime())
-              const width = to - from
+              let from
+              let to
+              let width
+
+              if (config.xAxis.type === 'date') {
+                from = xScale(parseDate(region.from).getTime())
+                to = xScale(parseDate(region.to).getTime())
+                width = to - from
+              }
+
+              if (config.xAxis.type === 'categorical') {
+                from = xScale(region.from)
+                to = xScale(region.to)
+                width = to - from
+              }
+
+              if (!from) return null
+              if (!to) return null
 
               return (
                 <Group className='regions' left={Number(config.runtime.yAxis.size)} key={region.label}>
@@ -340,6 +435,11 @@ export default function LinearChart() {
                             {tick.formattedValue}
                           </Text>
                         )}
+                        {config.orientation === 'horizontal' && config.visualizationType === 'Deviation Bar' && !config.yAxis.hideLabel && (
+                          <Text transform={`translate(${tick.to.x - 5}, ${config.isLollipopChart ? tick.to.y - minY + 2 : tick.to.y - minY + Number(config.barHeight) / 2}) rotate(-${config.runtime.horizontal ? config.runtime.yAxis.tickRotation : 0})`} textAnchor={'end'} verticalAnchor='middle'>
+                            {tick.formattedValue}
+                          </Text>
+                        )}
 
                         {config.orientation !== 'horizontal' && config.visualizationType !== 'Paired Bar' && !config.yAxis.hideLabel && (
                           <Text
@@ -524,18 +624,20 @@ export default function LinearChart() {
           </>
         )}
 
+        {config.visualizationType === 'Deviation Bar' && <DeviationBar xScale={xScale} yScale={yScale} width={xMax} height={yMax} />}
+
         {/* Paired Bar chart */}
         {config.visualizationType === 'Paired Bar' && <PairedBarChart originalWidth={width} width={xMax} height={yMax} />}
 
         {/* Bar chart */}
-        {config.visualizationType !== 'Line' && config.visualizationType !== 'Paired Bar' && config.visualizationType !== 'Box Plot' && config.visualizationType !== 'Scatter Plot' && (
+        {config.visualizationType !== 'Line' && config.visualizationType !== 'Paired Bar' && config.visualizationType !== 'Box Plot' && config.visualizationType !== 'Area Chart' && config.visualizationType !== 'Scatter Plot' && config.visualizationType !== 'Deviation Bar' && (
           <>
             <BarChart xScale={xScale} yScale={yScale} seriesScale={seriesScale} xMax={xMax} yMax={yMax} getXAxisData={getXAxisData} getYAxisData={getYAxisData} animatedChart={animatedChart} visible={animatedChart} />
           </>
         )}
 
         {/* Line chart */}
-        {config.visualizationType !== 'Bar' && config.visualizationType !== 'Paired Bar' && config.visualizationType !== 'Box Plot' && config.visualizationType !== 'Scatter Plot' && (
+        {config.visualizationType !== 'Bar' && config.visualizationType !== 'Paired Bar' && config.visualizationType !== 'Box Plot' && config.visualizationType !== 'Area Chart' && config.visualizationType !== 'Scatter Plot' && config.visualizationType !== 'Deviation Bar' && (
           <>
             <LineChart xScale={xScale} yScale={yScale} getXAxisData={getXAxisData} getYAxisData={getYAxisData} xMax={xMax} yMax={yMax} seriesStyle={config.series} />
           </>
@@ -546,6 +648,7 @@ export default function LinearChart() {
 
         {/* Box Plot chart */}
         {config.visualizationType === 'Box Plot' && <CoveBoxPlot xScale={xScale} yScale={yScale} />}
+        {config.visualizationType === 'Area Chart' && <CoveAreaChart xScale={xScale} yScale={yScale} yMax={yMax} xMax={xMax} />}
       </svg>
       <ReactTooltip id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`} variant='light' arrowColor='rgba(0,0,0,0)' className='tooltip' />
       <div className='animation-trigger' ref={triggerRef} />

package/src/components/PairedBarChart.jsx

@@ -72,7 +72,6 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
 				${label}${formatNumber(d[groupTwo.dataKey])}
 			</p>`
   }
-  console.log(config)
 
   return (
     width > 0 && (

package/src/components/PieChart.jsx

@@ -2,7 +2,7 @@ import React, { useContext, useState, useEffect, useRef } from 'react'
 import { animated, useTransition, interpolate } from 'react-spring'
 import { Tooltip as ReactTooltip } from 'react-tooltip'
 
-import Pie, { ProvidedProps, PieArcDatum } from '@visx/shape/lib/shapes/Pie'
+import Pie from '@visx/shape/lib/shapes/Pie'
 import chroma from 'chroma-js'
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
@@ -20,7 +20,7 @@ const enterUpdateTransition = ({ startAngle, endAngle }) => ({
 export default function PieChart() {
   const { transformedData: data, config, dimensions, seriesHighlight, colorScale, formatNumber, currentViewport, handleChartAriaLabels, cleanData } = useContext(ConfigContext)
 
-  const cleanedData = cleanData(data, config.xAxis.dataKey);
+  const cleanedData = cleanData(data, config.xAxis.dataKey)
 
   const [filteredData, setFilteredData] = useState(undefined)
   const [animatedPie, setAnimatePie] = useState(false)
@@ -31,11 +31,11 @@ export default function PieChart() {
   })
 
   // Make sure the chart is visible if in the editor
+  /* eslint-disable react-hooks/exhaustive-deps */
   useEffect(() => {
     const element = document.querySelector('.isEditor')
     if (element) {
       // parent element is visible
-      console.log('setAnimation')
       setAnimatePie(prevState => true)
     }
   })
@@ -46,18 +46,15 @@ export default function PieChart() {
         setAnimatePie(true)
       }, 500)
     }
-  }, [dataRef?.isIntersecting, config.animate])
-
+  }, [dataRef?.isIntersecting, config.animate]) // eslint-disable-line
 
   function AnimatedPie({ arcs, path, getKey }) {
-    const transitions = useTransition( arcs, getKey,
-      {
-        from: enterUpdateTransition,
-        enter: enterUpdateTransition,
-        update: enterUpdateTransition,
-        leave: enterUpdateTransition
-      }
-    )
+    const transitions = useTransition(arcs, getKey, {
+      from: enterUpdateTransition,
+      enter: enterUpdateTransition,
+      update: enterUpdateTransition,
+      leave: enterUpdateTransition
+    })
 
     return (
       <>
@@ -137,7 +134,7 @@ export default function PieChart() {
     } else {
       setFilteredData(undefined)
     }
-  }, [seriesHighlight])
+  }, [seriesHighlight]) // eslint-disable-line
 
   return (
     <ErrorBoundary component='PieChart'>