@cdc/chart 4.23.6 → 4.23.8

package/index.html

@@ -34,16 +34,19 @@
   -->
 
   <!-- GENERIC CHART TYPES -->
-  <!-- <div class="react-container" data-config="/examples/private/datatable-issue.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/feature/filters/filter-testing.json"></div> -->
+  <div class="react-container" data-config="/examples/private/tooltip-issue.json"></div>
+  <!-- <div class="react-container" data-config="https://cdc.gov/poxvirus/mpox/modules/data-viz/mpx-trends_1.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/private/mpox-bar-test-aug-31.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date-city-temperature.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date-apple.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/forest-plot/broken.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/forest-plot/forest-plot.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/pie/planet-pie-example-config.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/line/line-chart.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/feature/forecasting/index.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/forecasting/forecasting.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/forecasting/combo-forecasting.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/feature/forecasting/non-combo-forecasting.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/forecasting/effective_reproduction.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date.json"></div> -->
+  <div class="react-container" data-config="/examples/feature/area/area-chart-date.json"></div>
   <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-category.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/scatterplot/scatterplot.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/deviation/planet-deviation-config.json"></div> -->
@@ -55,10 +58,9 @@
   <!-- BAR -->
   <!-- <div class="react-container" data-config="/examples/feature/bar/planet-example-config.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/bar/planet-chart-horizontal-example-config.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/feature/bar/new.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/bar/example-bar-chart.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart-max-increase.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart.json"></div> -->
+  <div class="react-container" data-config="/examples/feature/bar/horizontal-chart.json"></div>
   <!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-stacked-bar-chart.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/bar/planet-chart-horizontal-example-config.json"></div> -->
 
@@ -70,14 +72,14 @@
   <!-- <div class="react-container" data-config="/examples/feature/tests-case-rate/case-rate-example-config.json"></div> -->
 
    <!-- TESTS BIG SMALL-->
-  <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-line.json"></div>  -->
-  <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-bar.json"></div>  -->
+  <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-line.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-bar.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-negative.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/line-chart-max-increase.json"></div> -->
 
   <!-- TESTS NONNUMERICS -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/planet-pie-example-config-nonnumeric.json"></div> -->
-  <div class="react-container" data-config="/examples/feature/tests-non-numerics/example-combo-bar-nonnumeric.json"></div>
+  <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/example-combo-bar-nonnumeric.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/example-bar-chart-nonnumeric.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/sparkline-chart-nonnumeric.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/stacked-vertical-bar-example-nonnumerics.json"></div> -->
@@ -110,7 +112,7 @@
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json"></div>  -->
-  <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart.json"></div> -->
+  <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart.json"></div>
 
   <noscript>You need to enable JavaScript to run this app.</noscript>
 </body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/chart",
-  "version": "4.23.6",
+  "version": "4.23.8",
   "description": "React component for visualizing tabular data in various types of charts",
   "moduleName": "CdcChart",
   "main": "dist/cdcchart",
@@ -29,13 +29,14 @@
     "@visx/axis": "^3.0.0",
     "@visx/curve": "^3.0.0",
     "@visx/event": "^3.0.1",
+    "@visx/glyph": "^3.3.0",
     "@visx/gradient": "^3.0.0",
     "@visx/group": "^3.0.0",
     "@visx/legend": "^3.0.0",
     "@visx/marker": "^3.0.0",
     "@visx/mock-data": "^3.0.0",
     "@visx/scale": "^3.0.0",
-    "@visx/shape": "^3.0.0",
+    "@visx/shape": "^3.3.0",
     "@visx/stats": "^3.0.0",
     "@visx/text": "^3.0.0",
     "@visx/tooltip": "^3.0.0",
@@ -57,7 +58,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "aaed0388b487adfeb3e7e278b4ce74df09cbaade",
+  "gitHead": "ba0a072a40c430baf121ad5ece0165f52a414b86",
   "devDependencies": {
     "resize-observer-polyfill": "^1.5.1"
   }

package/src/CdcChart.jsx

@@ -21,10 +21,6 @@ import LinearChart from './components/LinearChart'
 
 import { colorPalettesChart as colorPalettes, twoColorPalette } from '@cdc/core/data/colorPalettes'
 
-import { publish, subscribe, unsubscribe } from '@cdc/core/helpers/events'
-
-import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
-
 import SparkLine from './components/SparkLine'
 import Legend from './components/Legend'
 import defaults from './data/initial-state'
@@ -34,6 +30,8 @@ import Filters from '@cdc/core/components/Filters'
 import MediaControls from '@cdc/core/components/MediaControls'
 
 // Helpers
+import { publish, subscribe, unsubscribe } from '@cdc/core/helpers/events'
+import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
 import numberFromString from '@cdc/core/helpers/numberFromString'
 import getViewport from '@cdc/core/helpers/getViewport'
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
@@ -96,7 +94,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   let legendMemo = useRef(new Map()) // map collection
   let innerContainerRef = useRef()
 
-  if (isDebug) console.log('Chart config', config)
+  if (isDebug) console.log('Chart config, isEditor', config, isEditor)
 
   const DataTable = config?.table?.showVertical ? DataTable_vert : DataTable_horiz
 
@@ -316,6 +314,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     }
     if (undefined === newConfig.table.show) newConfig.table.show = !isDashboard
 
+    newConfig.series.map(series => {
+      if (!series.tooltip) series.tooltip = true
+    })
+
     const processedConfig = { ...(await coveUpdateWorker(newConfig)) }
 
     updateConfig(processedConfig, data)
@@ -393,7 +395,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       newConfig.runtime.seriesKeys = newConfig.series
         ? newConfig.series.map(series => {
             newConfig.runtime.seriesLabels[series.dataKey] = series.label || series.dataKey
-            newConfig.runtime.seriesLabelsAll.push(series.label || series.dataKey)
+            newConfig.runtime.seriesLabelsAll.push(series.name || series.label || series.dataKey)
             return series.dataKey
           })
         : []
@@ -559,16 +561,20 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       newConfig.runtime.areaSeriesKeys = []
 
       newConfig.series.forEach(series => {
-        if (series.type === 'Area Chart') {
-          newConfig.runtime.areaSeriesKeys.push(series)
-        }
+        newConfig.runtime.areaSeriesKeys.push({ ...series, type: 'Area Chart' })
       })
     }
 
-    if (((newConfig.visualizationType === 'Bar' || newConfig.visualizationType === 'Deviation Bar') && newConfig.orientation === 'horizontal') || newConfig.visualizationType === 'Paired Bar') {
+    if ((newConfig.visualizationType === 'Bar' && newConfig.orientation === 'horizontal') || ['Deviation Bar', 'Paired Bar', 'Forest Plot'].includes(newConfig.visualizationType)) {
       newConfig.runtime.xAxis = newConfig.yAxis
       newConfig.runtime.yAxis = newConfig.xAxis
       newConfig.runtime.horizontal = true
+      newConfig.orientation = 'horizontal'
+    } else if (['Box Plot', 'Scatter Plot', 'Area Chart'].includes(newConfig.visualizationType)) {
+      newConfig.runtime.xAxis = newConfig.xAxis
+      newConfig.runtime.yAxis = newConfig.yAxis
+      newConfig.runtime.horizontal = false
+      newConfig.orientation = 'vertical'
     } else {
       newConfig.runtime.xAxis = newConfig.xAxis
       newConfig.runtime.yAxis = newConfig.yAxis
@@ -794,6 +800,21 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     } else {
       newSeriesHighlight.push(newHighlight)
     }
+
+    /**
+     * pushDataKeyBySeriesName
+     * - pushes series.dataKey into the series highlight based on the found series.name
+     * @param {String} value
+     */
+    const pushDataKeyBySeriesName = value => {
+      let matchingSeries = config.series.filter(series => series.name === value.text)
+      if (matchingSeries?.length > 0) {
+        newSeriesHighlight.push(matchingSeries[0].dataKey)
+      }
+    }
+
+    pushDataKeyBySeriesName(label)
+
     setSeriesHighlight(newSeriesHighlight)
   }
 
@@ -852,13 +873,16 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     return num + unit
   }
 
-  // Format numeric data based on settings in config
-  const formatNumber = (num, axis, shouldAbbreviate = false) => {
+  // Format numeric data based on settings in config OR from passed in settings for Additional Columns
+  // - use only for old horizontal data - newer formatNumber is in helper/formatNumber
+  const formatNumber = (num, axis, shouldAbbreviate = false, addColPrefix, addColSuffix, addColRoundTo) => {
     // if num is NaN return num
     if (isNaN(num) || !num) return num
     // Check if the input number is negative
     const isNegative = num < 0
 
+    if (axis === undefined || !axis) axis = 'left'
+
     // If the input number is negative, take the absolute value
     if (isNegative) {
       num = Math.abs(num)
@@ -873,12 +897,21 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     if (String(num).indexOf(',') !== -1) num = num.replaceAll(',', '')
 
     let original = num
-    let stringFormattingOptions
-    if (axis === 'left') {
+    let stringFormattingOptions = {
+      useGrouping: commas ? true : false // for old chart data table to work right cant just leave this to undefined
+    }
+    if (axis === 'left' || axis === undefined) {
+      let roundToPlace
+      if (addColRoundTo !== undefined) {
+        // if its an Additional Column
+        roundToPlace = addColRoundTo ? Number(addColRoundTo) : 0
+      } else {
+        roundToPlace = roundTo ? Number(roundTo) : 0
+      }
       stringFormattingOptions = {
-        useGrouping: config.dataFormat.commas ? true : false,
-        minimumFractionDigits: roundTo ? Number(roundTo) : 0,
-        maximumFractionDigits: roundTo ? Number(roundTo) : 0
+        useGrouping: addColRoundTo ? true : config.dataFormat.commas ? true : false,
+        minimumFractionDigits: roundToPlace,
+        maximumFractionDigits: roundToPlace
       }
     }
 
@@ -937,8 +970,12 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       num = abbreviateNumber(parseFloat(num))
     }
 
-    if (prefix && axis === 'left') {
-      result += prefix
+    if (addColPrefix && axis === 'left') {
+      result = addColPrefix + result
+    } else {
+      if (prefix && axis === 'left') {
+        result += prefix
+      }
     }
 
     if (rightPrefix && axis === 'right') {
@@ -949,10 +986,15 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       result += bottomPrefix
     }
 
+    // combine prefix and num
     result += num
 
-    if (suffix && axis === 'left') {
-      result += suffix
+    if (addColSuffix && axis === 'left') {
+      result += addColSuffix
+    } else {
+      if (suffix && axis === 'left') {
+        result += suffix
+      }
     }
 
     if (rightSuffix && axis === 'right') {
@@ -980,11 +1022,13 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     'Box Plot': <LinearChart />,
     'Area Chart': <LinearChart />,
     'Scatter Plot': <LinearChart />,
-    'Deviation Bar': <LinearChart />
+    'Deviation Bar': <LinearChart />,
+    'Forest Plot': <LinearChart />
   }
 
   const missingRequiredSections = () => {
     if (config.visualizationType === 'Forecasting') return false // skip required checks for now.
+    if (config.visualizationType === 'Forest Plot') return false // skip required checks for now.
     if (config.visualizationType === 'Pie') {
       if (undefined === config?.yAxis.dataKey) {
         return true
@@ -1141,10 +1185,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
             {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' }}
-              className={`chart-container  ${config.legend.position === 'bottom' ? 'bottom' : ''}${config.legend.hide ? ' legend-hidden' : ''}${lineDatapointClass}${barBorderClass} ${contentClasses.join(' ')}`}
+              className={`chart-container  p-relative ${config.legend.position === 'bottom' ? 'bottom' : ''}${config.legend.hide ? ' legend-hidden' : ''}${lineDatapointClass}${barBorderClass} ${contentClasses.join(' ')}`}
             >
               {/* All charts except sparkline */}
-              {config.visualizationType !== 'Spark Line' && chartComponents[visualizationType]}
+              {config.visualizationType !== 'Spark Line' && chartComponents[config.visualizationType]}
 
               {/* Sparkline */}
               {config.visualizationType === 'Spark Line' && (
@@ -1167,7 +1211,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
             {isDashboard && config.table && config.table.show && config.table.showDataTableLink ? tableLink : link && link}
 
             {/* Description */}
-            {description && config.visualizationType !== 'Spark Line' && <div className='subtext'>{parse(description)}</div>}
+            {description && config.visualizationType !== 'Spark Line' && <div className={'column ' + config.isResponsiveTicks ? 'subtext--responsive-ticks' : 'subtext'}>{parse(description)}</div>}
 
             {/* buttons */}
             <MediaControls.Section classes={['download-buttons']}>
@@ -1181,9 +1225,9 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
                 config={config}
                 rawData={config.data}
                 runtimeData={filteredData || excludedData}
-                //navigationHandler={navigationHandler}
+                //navigationHandler={navigationHandler} // do we need this? What does it do?
                 expandDataTable={config.table.expanded}
-                //headerColor={general.headerColor}
+                //headerColor={general.headerColor} // have this in map but not chart
                 columns={config.columns}
                 showDownloadButton={config.general.showDownloadButton}
                 runtimeLegend={dynamicLegendItems}
@@ -1204,6 +1248,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
                 outerContainerRef={outerContainerRef}
                 imageRef={imageId}
                 isDebug={isDebug}
+                isEditor={isEditor}
               />
             )}
             {config?.footnotes && <section className='footnotes'>{parse(config.footnotes)}</section>}
@@ -1217,7 +1262,12 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   const getXAxisData = d => (config.runtime.xAxis.type === 'date' ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime() : d[config.runtime.originalXAxis.dataKey])
   const getYAxisData = (d, seriesKey) => d[seriesKey]
 
+  const capitalize = str => {
+    return str.charAt(0).toUpperCase() + str.slice(1)
+  }
+
   const contextValues = {
+    capitalize,
     getXAxisData,
     getYAxisData,
     config,
@@ -1256,6 +1306,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     isNumber,
     getTextWidth,
     twoColorPalette,
+    isEditor,
     isDebug,
     setSharedFilter,
     setSharedFilterValue,

package/src/components/AreaChart.jsx

@@ -1,46 +1,30 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useContext, memo } from 'react'
 
 // cdc
 import ConfigContext from '../ConfigContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
 
 // visx & d3
 import * as allCurves from '@visx/curve'
 import { AreaClosed, LinePath, Bar } from '@visx/shape'
 import { Group } from '@visx/group'
-import { useTooltip, useTooltipInPortal, defaultStyles, Tooltip } from '@visx/tooltip'
-import { localPoint } from '@visx/event'
 import { bisector } from 'd3-array'
 
-const CoveAreaChart = ({ xScale, yScale, yMax, xMax, chartRef }) => {
+const AreaChart = ({ xScale, yScale, yMax, xMax, getXAxisData, getYAxisData, chartRef, handleTooltipMouseOver, handleTooltipMouseOff, tooltipData, isDebug, isBrush, brushData, children }) => {
   // enable various console logs in the file
-  const DEBUG = false
-  const [chartPosition, setChartPosition] = useState(null)
-
-  useEffect(() => {
-    setChartPosition(chartRef.current.getBoundingClientRect())
-  }, [chartRef])
+  const DEBUG = isDebug
 
   // import data from context
-  const { transformedData: data, config, handleLineType, parseDate, formatDate, formatNumber, seriesHighlight, colorScale } = useContext(ConfigContext)
-  const tooltip_id = `cdc-open-viz-tooltip-${config.runtime.uniqueId}`
+  let { transformedData: data, config, handleLineType, parseDate, formatDate, formatNumber, seriesHighlight, colorScale, rawData } = useContext(ConfigContext)
 
-  // import tooltip helpers
-  const { tooltipData, showTooltip, hideTooltip } = useTooltip()
+  // use brush data if it is passed in AND if this is NOT a brush chart
+  data = !isBrush && undefined !== brushData && brushData.length ? brushData : data
 
-  // 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
-  })
+  if (isBrush && isDebug) console.log('###AREAchart BRUSH data, xScale, yScale, yMax, xMax', data, xScale, yScale, yMax, xMax)
 
   // Draw transparent bars over the chart to get tooltip data
   // Turn DEBUG on for additional context.
   if (!data) return
-  let barThickness = xMax / data.length
 
   // Tooltip helper for getting data to the closest date/category hovered.
   const getXValueFromCoordinate = x => {
@@ -60,98 +44,60 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax, chartRef }) => {
     }
   }
 
-  const handleMouseOver = (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 => formatDate(parseDate(d[config.xAxis.dataKey])) === formattedDate)
-    }
-
-    let seriesToInclude = []
-    let yScaleMaxValues = []
-    let itemsToLoop = [config.runtime.xAxis.dataKey, ...config.runtime.seriesKeys]
-
-    itemsToLoop.map(seriesKey => {
-      if (!seriesKey) return
-      if (!yScaleValues[0]) return
-      for (const item of Object.entries(yScaleValues[0])) {
-        if (item[0] === seriesKey) {
-          // let userUpdatedSeriesName = config.series.filter(series => series.dataKey === item[0])?.[0]?.name
-          // if (userUpdatedSeriesName) item[0] = userUpdatedSeriesName
-
-          seriesToInclude.push(item)
-        }
-      }
+  const getXAxisDates = brushDataSet => {
+    if (undefined === brushDataSet || !brushDataSet) return
+    let XAxisBrushDates = []
+    brushDataSet.forEach(function convertDateTimeNumber(key, value, brushDataSet) {
+      let tmp = getXValueFromCoordinate(xScale(value))
+      let date = formatDate(tmp)
+      XAxisBrushDates.push(date)
     })
-
-    // filter out the series that aren't added to the map.
-    seriesToInclude.map(series => yScaleMaxValues.push(Number(yScaleValues[0][series])))
-    if (!seriesToInclude) return
-
-    let tooltipDataFromSeries = Object.fromEntries(seriesToInclude) ? Object.fromEntries(seriesToInclude) : {}
-
-    let tooltipData = {}
-    tooltipData.data = tooltipDataFromSeries
-    tooltipData.dataXPosition = x + 20
-    tooltipData.dataYPosition = y - 100
-
-    let tooltipInformation = {
-      tooltipData: tooltipData,
-      tooltipTop: 0,
-      tooltipValues: yScaleValues,
-      tooltipLeft: x
-    }
-
-    showTooltip(tooltipInformation)
-  }
-
-  const TooltipListItem = ({ item }) => {
-    const [label, value] = item
-    return label === config.xAxis.dataKey ? `${label}: ${value}` : `${label}: ${formatNumber(value, 'left')}`
+    return XAxisBrushDates
   }
 
   const handleX = d => {
-    return config.xAxis.type === 'date' ? xScale(parseDate(d[config.xAxis.dataKey])) : xScale(d[config.xAxis.dataKey])
+    return config.xAxis.type === 'date' ? xScale(parseDate(d[config.xAxis.dataKey], false)) : xScale(d[config.xAxis.dataKey])
   }
 
   const handleY = (d, index, s = undefined) => {
-    return yScale(d[s.dataKey])
+    return isBrush ? yScale(d[s.dataKey]) / 4 : yScale(d[s.dataKey])
+  }
+
+  // prevents duplicate brush handles being rendered
+  const getFirstBrushHandleOnly = (children, index) => {
+    if (index === 0) {
+      return children
+    }
+    // else dont return the other brush handles
   }
 
   return (
     data && (
-      <ErrorBoundary component='AreaChart'>
-        <Group className='area-chart' key='area-wrapper' left={Number(config.yAxis.size)}>
-          {(config.runtime.areaSeriesKeys || config.runtime.seriesKeys).map((s, index) => {
-            let seriesData = data.map(d => {
-              return {
-                [config.xAxis.dataKey]: d[config.xAxis.dataKey],
-                [s.dataKey]: d[s.dataKey]
+      <svg>
+        <ErrorBoundary component='AreaChart'>
+          <Group className='area-chart' key='area-wrapper' left={Number(config.yAxis.size)} top={isBrush ? yMax * 1.3 : 0}>
+            {(config.runtime.areaSeriesKeys || config.series).map((s, index) => {
+              let seriesData = data.map(d => {
+                return {
+                  [config.xAxis.dataKey]: d[config.xAxis.dataKey],
+                  [s.dataKey]: d[s.dataKey]
+                }
+              })
+
+              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
+
+              if (config.xAxis.type === 'date') {
+                data.map(d => xScale(parseDate(d[config.xAxis.dataKey])))
+              } else {
+                data.map(d => xScale(d[config.xAxis.dataKey]))
               }
-            })
-
-            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
-
-            if (config.xAxis.type === 'date') {
-              data.map(d => xScale(parseDate(d[config.xAxis.dataKey])))
-            } else {
-              data.map(d => xScale(d[config.xAxis.dataKey]))
-            }
-            return (
-              <React.Fragment key={index}>
-                {/* prettier-ignore */}
-                <LinePath
+
+              return (
+                <React.Fragment key={index}>
+                  {/* prettier-ignore */}
+                  <LinePath
                   data={seriesData}
                   x={d => handleX(d)}
                   y={d => handleY(d, index, s)}
@@ -163,10 +109,10 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax, chartRef }) => {
                   strokeDasharray={s.type ? handleLineType(s.type) : 0}
                 />
 
-                {/* prettier-ignore */}
-                <AreaClosed
+                  {/* prettier-ignore */}
+                  <AreaClosed
                   key={'area-chart'}
-                  fill={ displayArea ? colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[s.dataKey] : s.dataKey) : '#000' : 'transparent'}
+                  fill={displayArea ? colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[s.dataKey] : s.dataKey) : '#000' : 'transparent'}
                   fillOpacity={transparentArea ? 0.25 : 0.5}
                   data={seriesData}
                   x={d => handleX(d)}
@@ -174,52 +120,20 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax, chartRef }) => {
                   yScale={yScale}
                   curve={curveType}
                   strokeDasharray={s.type ? handleLineType(s.type) : 0}
-                  />
-
-                {/* Transparent bar for tooltips */}
-                {/* prettier-ignore */}
-                <Bar
-                  width={ Number(xMax)}
-                  height={ Number(yMax)}
-                  fill={DEBUG ? 'red' : 'transparent'}
-                  fillOpacity={0.05}
-                  style={DEBUG ? { stroke: 'black', strokeWidth: 2 } : {}}
-                  onMouseMove={e => handleMouseOver(e, data)}
-                  onMouseOut={hideTooltip}
-                  />
-
-                {/* circles that appear on hover */}
-                {tooltipData && Object.entries(tooltipData.data).length > 0 && (
-                  <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={displayArea ? (colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[s.dataKey] : s.dataKey) : '#000') : 'transparent'}
-                    style={{ filter: 'unset', opacity: 1 }}
-                  />
-                )}
-
-                {tooltipData && Object.entries(tooltipData.data).length > 0 && (
-                  <TooltipInPortal key={Math.random()} top={tooltipData.dataYPosition + chartPosition?.top} left={tooltipData.dataXPosition + chartPosition?.left} style={defaultStyles}>
-                    <ul style={{ listStyle: 'none', paddingLeft: 'unset', fontFamily: 'sans-serif', margin: 'auto', lineHeight: '1rem' }} data-tooltip-id={tooltip_id}>
-                      {typeof tooltipData === 'object' &&
-                        Object.entries(tooltipData.data).map(item => (
-                          <li style={{ padding: '2.5px 0' }}>
-                            <TooltipListItem item={item} />
-                          </li>
-                        ))}
-                    </ul>
-                  </TooltipInPortal>
-                )}
-              </React.Fragment>
-            )
-          })}
-        </Group>
-      </ErrorBoundary>
+                />
+                  {getFirstBrushHandleOnly(children, index)}
+                </React.Fragment>
+              )
+            })}
+
+            {/* Transparent bar for tooltips - disable if AreaChart is a brush */}
+            {/* prettier-ignore */}
+            {!isBrush && <Bar width={Number(xMax)} height={Number(yMax)} fill={DEBUG ? 'red' : 'transparent'} fillOpacity={0.05} style={DEBUG ? { stroke: 'black', strokeWidth: 2 } : {}} onMouseMove={e => handleTooltipMouseOver(e, rawData)} onMouseLeave={handleTooltipMouseOff} />}
+          </Group>
+        </ErrorBoundary>
+      </svg>
     )
   )
 }
 
-export default CoveAreaChart
+export default memo(AreaChart)