@cdc/chart 4.23.9 → 4.23.10

package/src/{CdcChart.jsx → CdcChart.tsx}

@@ -41,8 +41,8 @@ import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
 
 import './scss/main.scss'
 // load both then config below determines which to use
-import DataTable_horiz from './components/DataTable'
-import DataTable_vert from '@cdc/core/components/DataTable'
+import DataTable from '@cdc/core/components/DataTable'
+import { getFileExtension } from '@cdc/core/helpers/getFileExtension'
 
 const generateColorsArray = (color = '#000000', special = false) => {
   let colorObj = chroma(color)
@@ -78,17 +78,17 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   const transform = new DataTransform()
   const [loading, setLoading] = useState(true)
   const [colorScale, setColorScale] = useState(null)
-  const [config, setConfig] = useState({})
+  const [config, setConfig] = useState<any>({})
   const [stateData, setStateData] = useState(config.data || [])
-  const [excludedData, setExcludedData] = useState()
-  const [filteredData, setFilteredData] = useState()
-  const [seriesHighlight, setSeriesHighlight] = useState([])
+  const [excludedData, setExcludedData] = useState<Record<string, number>[] | undefined>(undefined)
+  const [filteredData, setFilteredData] = useState<Record<string, any>[] | undefined>(undefined)
+  const [seriesHighlight, setSeriesHighlight] = useState<any[]>([])
   const [currentViewport, setCurrentViewport] = useState('lg')
-  const [dimensions, setDimensions] = useState([])
-  const [externalFilters, setExternalFilters] = useState(null)
+  const [dimensions, setDimensions] = useState<[number?, number?]>([])
+  const [externalFilters, setExternalFilters] = useState<any[]>()
   const [container, setContainer] = useState()
   const [coveLoadedEventRan, setCoveLoadedEventRan] = useState(false)
-  const [dynamicLegendItems, setDynamicLegendItems] = useState([])
+  const [dynamicLegendItems, setDynamicLegendItems] = useState<any[]>([])
   const [imageId] = useState(`cove-${Math.random().toString(16).slice(-4)}`)
 
   let legendMemo = useRef(new Map()) // map collection
@@ -96,8 +96,6 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
   if (isDebug) console.log('Chart config, isEditor', config, isEditor)
 
-  const DataTable = config?.table?.showVertical ? DataTable_vert : DataTable_horiz
-
   // Destructure items from config for more readable JSX
   let { legend, title, description, visualizationType } = config
 
@@ -164,12 +162,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         })
         .join('')}`
 
-      let data
+      let data: any[] = []
 
       try {
-        const regex = /(?:\.([^.]+))?$/
-
-        const ext = regex.exec(dataUrl.pathname)[1]
+        const ext = getFileExtension(dataUrl.pathname)
         if ('csv' === ext) {
           data = await fetch(dataUrlFinal)
             .then(response => response.text())
@@ -250,15 +246,13 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     let response = configObj || (await (await fetch(configUrl)).json())
 
     // If data is included through a URL, fetch that and store
-    let data = response.formattedData || response.data || {}
+    let data: any[] = response.data || []
 
     const urlFilters = response.filters ? (response.filters.filter(filter => filter.type === 'url').length > 0 ? true : false) : false
 
     if (response.dataUrl && !urlFilters) {
       try {
-        const regex = /(?:\.([^.]+))?$/
-
-        const ext = regex.exec(response.dataUrl)[1]
+        const ext = getFileExtension(response.dataUrl)
         if ('csv' === ext) {
           data = await fetch(response.dataUrl + `?v=${cacheBustingString()}`)
             .then(response => response.text())
@@ -289,11 +283,11 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         console.error(`COVE: Cannot parse URL: ${response.dataUrl}`) // eslint-disable-line
         data = []
       }
+    }
 
-      if (response.dataDescription) {
-        data = transform.autoStandardize(data)
-        data = transform.developerStandardize(data, response.dataDescription)
-      }
+    if (response.dataDescription) {
+      data = transform.autoStandardize(data)
+      data = transform.developerStandardize(data, response.dataDescription)
     }
 
     if (data) {
@@ -323,7 +317,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     updateConfig(processedConfig, data)
   }
 
-  const updateConfig = (newConfig, dataOverride = undefined) => {
+  const updateConfig = (newConfig, dataOverride?: any[]) => {
     let data = dataOverride || stateData
 
     // Deeper copy
@@ -333,7 +327,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       }
     })
 
-    let newExcludedData
+    let newExcludedData: any[] = []
 
     if (newConfig.exclusions && newConfig.exclusions.active) {
       if (newConfig.xAxis.type === 'categorical' && newConfig.exclusions.keys?.length > 0) {
@@ -365,7 +359,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     setExcludedData(newExcludedData)
 
     // After data is grabbed, loop through and generate filter column values if there are any
-    let currentData
+    let currentData: any[] = []
     if (newConfig.filters) {
       newConfig.filters.forEach((filter, index) => {
         let filterValues = []
@@ -394,8 +388,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     } else {
       newConfig.runtime.seriesKeys = newConfig.series
         ? newConfig.series.map(series => {
-            newConfig.runtime.seriesLabels[series.dataKey] = series.label || series.dataKey
-            newConfig.runtime.seriesLabelsAll.push(series.name || series.label || series.dataKey)
+            newConfig.runtime.seriesLabels[series.dataKey] = series.name || series.label || series.dataKey
+            newConfig.runtime.seriesLabelsAll.push(series.name || series.dataKey)
             return series.dataKey
           })
         : []
@@ -412,8 +406,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       }
 
       const groups = uniqueArray(allKeys)
-      let tableData = []
-      const plots = []
+      let tableData: any[] = []
+      const plots: any[] = []
 
       /**
        * Calculates the first quartile (q1) and third quartile (q3) from an array of integers or decimals.
@@ -449,13 +443,13 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       // group specific statistics
       // prevent re-renders
       if (!groups) return
-      groups.forEach((g, index) => {
+      groups.forEach(g => {
         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: number[] = filteredData.map(item => Number(item[newConfig?.series[0]?.dataKey]))
 
           // Sort the data for upcoming functions.
           let sortedData = filteredDataValues.sort((a, b) => a - b)
@@ -484,19 +478,20 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
           let nonOutliers = filteredDataValues
 
           nonOutliers = nonOutliers.filter(item => !outliers.includes(item))
-
+          const minValue: number = d3.min<number>(filteredDataValues) || 0
+          const _colMin = d3.max<number>([minValue, q1 - 1.5 * iqr])
           plots.push({
             columnCategory: g,
             columnMax: d3.min([d3.max(filteredDataValues), q1 + 1.5 * iqr]),
             columnThirdQuartile: Number(q3).toFixed(newConfig.dataFormat.roundTo),
             columnMedian: Number(d3.median(filteredDataValues)).toFixed(newConfig.dataFormat.roundTo),
             columnFirstQuartile: q1.toFixed(newConfig.dataFormat.roundTo),
-            columnMin: d3.max([d3.min(filteredDataValues), q1 - 1.5 * iqr]),
+            columnMin: _colMin,
             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),
-            columnLowerBounds: d3.max([d3.min(filteredDataValues), q1 - 1.5 * iqr]),
+            columnLowerBounds: _colMin,
             columnUpperBounds: d3.min([d3.max(sortedData), q1 + 1.5 * iqr]),
             columnOutliers: outliers,
             values: filteredDataValues,
@@ -511,10 +506,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       // this appears to be the easiest option instead of running logic against the datatable cell...
       tableData = JSON.parse(JSON.stringify(plots))
       tableData.map(table => {
-        delete table.columnIqr
-        delete table.nonOutlierValues
-        delete table.columnLowerBounds
-        delete table.columnUpperBounds
+        table.columnIqr = undefined
+        table.nonOutlierValues = undefined
+        table.columnLowerBounds = undefined
+        table.columnUpperBounds = undefined
         return null // resolve eslint
       })
 
@@ -570,7 +565,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       newConfig.runtime.yAxis = newConfig.xAxis
       newConfig.runtime.horizontal = true
       newConfig.orientation = 'horizontal'
-    } else if (['Box Plot', 'Scatter Plot', 'Area Chart'].includes(newConfig.visualizationType)) {
+    } else if (['Box Plot', 'Scatter Plot', 'Area Chart', 'Line', 'Forecasting'].includes(newConfig.visualizationType)) {
       newConfig.runtime.xAxis = newConfig.xAxis
       newConfig.runtime.yAxis = newConfig.yAxis
       newConfig.runtime.horizontal = false
@@ -587,7 +582,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   }
 
   const filterData = (filters, data) => {
-    let filteredData = []
+    let filteredData: any[] = []
 
     data.forEach(row => {
       let add = true
@@ -607,7 +602,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
   // Gets filter values from dataset
   const generateValuesForFilter = (columnName, data = this.state.data) => {
-    const values = []
+    const values: any[] = []
 
     data.forEach(row => {
       const value = row[columnName]
@@ -697,7 +692,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
    */
   useEffect(() => {
     const handleFilterData = e => {
-      let tmp = []
+      let tmp: any[] = []
       tmp.push(e.detail)
       setExternalFilters(tmp)
     }
@@ -773,10 +768,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
   // Called on legend click, highlights/unhighlights the data series with the given label
   const highlight = label => {
-    const newSeriesHighlight = []
+    const newSeriesHighlight: any[] = []
 
     // If we're highlighting all the series, reset them
-    if (seriesHighlight.length + 1 === config.runtime.seriesKeys.length && !config.legend.dynamicLegend && config.visualizationType !== 'Forecasting') {
+    if (seriesHighlight.length + 1 === config.runtime.seriesKeys.length && config.visualizationType !== 'Forecasting') {
       highlightReset()
       return
     }
@@ -806,25 +801,28 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
      * - 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)
-      }
-    }
+    // const pushDataKeyBySeriesName = value => {
+    //   let matchingSeries = config.series.filter(series => series.name === value.text)
+    //   if (matchingSeries?.length > 0) {
+    //     newSeriesHighlight.push(matchingSeries[0].dataKey)
+    //   }
+    // }
 
-    pushDataKeyBySeriesName(label)
+    // pushDataKeyBySeriesName(label)
 
     setSeriesHighlight(newSeriesHighlight)
   }
 
   // Called on reset button click, unhighlights all data series
   const highlightReset = () => {
-    if (config.legend.dynamicLegend && dynamicLegendItems) {
-      setSeriesHighlight(dynamicLegendItems.map(item => item.text))
-    } else {
-      setSeriesHighlight([])
+    try {
+      const legend = document.getElementById('legend')
+      if (!legend) throw new Error('No legend available to set previous focus on.')
+      legend.focus()
+    } catch (e) {
+      console.error('COVE:', e.message)
     }
+    setSeriesHighlight([])
   }
 
   const section = config.orientation === 'horizontal' ? 'yAxis' : 'xAxis'
@@ -849,7 +847,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   function getTextWidth(text, font) {
     const canvas = document.createElement('canvas')
     const context = canvas.getContext('2d')
-
+    if (!context) {
+      console.error('2d context not found')
+      return
+    }
     context.font = font || getComputedStyle(document.body).font
 
     return Math.ceil(context.measureText(text).width)
@@ -875,6 +876,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
   // 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
+  // TODO: we should combine various formatNumber functions across this project.
   const formatNumber = (num, axis, shouldAbbreviate = false, addColPrefix, addColSuffix, addColRoundTo) => {
     // if num is NaN return num
     if (isNaN(num) || !num) return num
@@ -897,7 +899,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     if (String(num).indexOf(',') !== -1) num = num.replaceAll(',', '')
 
     let original = num
-    let stringFormattingOptions = {
+    let stringFormattingOptions: any = {
       useGrouping: commas ? true : false // for old chart data table to work right cant just leave this to undefined
     }
     if (axis === 'left' || axis === undefined) {
@@ -1144,8 +1146,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     }
   }
 
+  // TODO: should be part of the DataTransform class.
   const clean = data => {
     // cleaning is deleting data we need in forecasting charts.
+    if (!Array.isArray(data)) return []
     if (config.visualizationType === 'Forecasting') return data
     return config?.xAxis?.dataKey ? transform.cleanData(data, config.xAxis.dataKey) : data
   }
@@ -1180,9 +1184,9 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
               Skip Over Chart Container
             </a>
             {/* Filters */}
-            {config.filters && !externalFilters && <Filters config={config} setConfig={setConfig} setFilteredData={setFilteredData} filteredData={filteredData} excludedData={excludedData} filterData={filterData} isNumber={isNumber} dimensions={dimensions} />}
+            {config.filters && !externalFilters && <Filters config={config} setConfig={setConfig} setFilteredData={setFilteredData} filteredData={filteredData} excludedData={excludedData} filterData={filterData} dimensions={dimensions} />}
             {/* Visualization */}
-            {config?.introText && <section className='introText'>{parse(config.introText)}</section>}
+            {config?.introText && config.visualizationType !== 'Spark Line' && <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  p-relative ${config.legend.position === 'bottom' ? 'bottom' : ''}${config.legend.hide ? ' legend-hidden' : ''}${lineDatapointClass}${barBorderClass} ${contentClasses.join(' ')}`}
@@ -1193,16 +1197,19 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
               {/* Sparkline */}
               {config.visualizationType === 'Spark Line' && (
                 <>
-                  {description && <div className='subtext'>{parse(description)}</div>}
-                  <div style={sparkLineStyles}>
-                    <ParentSize>
-                      {parent => (
-                        <>
-                          <SparkLine width={parent.width} height={parent.height} />
-                        </>
-                      )}
-                    </ParentSize>
+                  {config?.introText && (
+                    <section className='introText' style={{ padding: '0px 0 35px' }}>
+                      {parse(config.introText)}
+                    </section>
+                  )}
+                  <div style={{ height: `100px`, width: `100%`, ...sparkLineStyles }}>
+                    <ParentSize>{parent => <SparkLine width={parent.width} height={parent.height} />}</ParentSize>
                   </div>
+                  {description && (
+                    <div className='subtext' style={{ padding: '35px 0 15px' }}>
+                      {parse(description)}
+                    </div>
+                  )}
                 </>
               )}
               {!config.legend.hide && config.visualizationType !== 'Spark Line' && <Legend />}
@@ -1225,9 +1232,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
                 config={config}
                 rawData={config.data}
                 runtimeData={filteredData || excludedData}
-                //navigationHandler={navigationHandler} // do we need this? What does it do?
                 expandDataTable={config.table.expanded}
-                //headerColor={general.headerColor} // have this in map but not chart
                 columns={config.columns}
                 showDownloadButton={config.general.showDownloadButton}
                 runtimeLegend={dynamicLegendItems}
@@ -1247,6 +1252,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
                 innerContainerRef={innerContainerRef}
                 outerContainerRef={outerContainerRef}
                 imageRef={imageId}
+                colorScale={colorScale}
                 isDebug={isDebug}
                 isEditor={isEditor}
               />

package/src/components/AreaChart.Stacked.jsx

@@ -0,0 +1,73 @@
+import React, { useContext, memo } from 'react'
+
+// cdc
+import ConfigContext from '../ConfigContext'
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+
+// visx & d3
+import * as allCurves from '@visx/curve'
+import { Bar, AreaStack } from '@visx/shape'
+import { Group } from '@visx/group'
+import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
+
+const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver, handleTooltipMouseOff, isDebug, isBrush }) => {
+  // import data from context
+  let { transformedData: data, config, seriesHighlight, colorScale, rawData } = useContext(ConfigContext)
+
+  // Draw transparent bars over the chart to get tooltip data
+  // Turn DEBUG on for additional context.
+  if (!data) return
+
+  const handleDateCategory = value => {
+    if (config.xAxis.type === 'categorical') return xScale(value)
+    if (config.xAxis.type === 'date') {
+      let date = new Date(value)
+      return xScale(date)
+    }
+  }
+
+  const strokeWidth = 2
+
+  return (
+    data && (
+      <svg height={Number(yMax)}>
+        <ErrorBoundary component='AreaChartStacked'>
+          <Group className='area-chart' key='area-wrapper' left={Number(config.yAxis.size) + strokeWidth / 2} height={Number(yMax)} style={{ overflow: 'hidden' }}>
+            <AreaStack
+              data={data}
+              keys={config.runtime.areaSeriesKeys.map(s => s.dataKey) || config.series.map(s => s.dataKey)}
+              x0={d => handleDateCategory(d.data[config.xAxis.dataKey])}
+              y0={d => Number(yScale(d[0]))}
+              y1={d => Number(yScale(d[1]))}
+              curve={allCurves[approvedCurveTypes[config.stackedAreaChartLineType]]}
+            >
+              {({ stacks, path }) => {
+                return stacks.map((stack, stackIndex) => {
+                  let transparentArea = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(stack.key) === -1
+                  let displayArea = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(stack.key) !== -1
+
+                  return (
+                    // prettier-ignore
+                    <path
+                      key={stack.key}
+                      d={path(stack) || ''}
+                      strokeWidth={2}
+                      stroke={displayArea ?  colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[stack.key] : stack.key) : '#000' : 'transparent'}
+                      fillOpacity={transparentArea ? 0.25 : 0.5}
+                      fill={displayArea ? colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[stack.key] : stack.key) : '#000' : 'transparent'}
+                    />
+                  )
+                })
+              }}
+            </AreaStack>
+
+            {/* prettier-ignore */}
+            {!isBrush && <Bar width={Number(xMax)} height={Number(yMax)} fill={isDebug ? 'red' : 'transparent'} fillOpacity={0.05} style={isDebug ? { stroke: 'black', strokeWidth: 2 } : {}} onMouseMove={e => handleTooltipMouseOver(e, rawData)} onMouseLeave={handleTooltipMouseOff} />}
+          </Group>
+        </ErrorBoundary>
+      </svg>
+    )
+  )
+}
+
+export default memo(AreaChartStacked)

package/src/components/AreaChart.jsx

@@ -10,10 +10,8 @@ import { AreaClosed, LinePath, Bar } from '@visx/shape'
 import { Group } from '@visx/group'
 import { bisector } from 'd3-array'
 
-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 = isDebug
-
+const AreaChart = props => {
+  const { xScale, yScale, yMax, xMax, handleTooltipMouseOver, handleTooltipMouseOff, isDebug, isBrush, brushData, children } = props
   // import data from context
   let { transformedData: data, config, handleLineType, parseDate, formatDate, formatNumber, seriesHighlight, colorScale, rawData } = useContext(ConfigContext)
 
@@ -23,7 +21,7 @@ const AreaChart = ({ xScale, yScale, yMax, xMax, getXAxisData, getYAxisData, cha
   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.
+  // Turn isDebug on for additional context.
   if (!data) return
 
   // Tooltip helper for getting data to the closest date/category hovered.
@@ -98,29 +96,29 @@ const AreaChart = ({ xScale, yScale, yMax, xMax, getXAxisData, getYAxisData, cha
                 <React.Fragment key={index}>
                   {/* prettier-ignore */}
                   <LinePath
-                  data={seriesData}
-                  x={d => handleX(d)}
-                  y={d => handleY(d, index, s)}
-                  stroke={displayArea ?  colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[s.dataKey] : s.dataKey) : '#000' : 'transparent'}
-                  strokeWidth={2}
-                  strokeOpacity={1}
-                  shapeRendering='geometricPrecision'
-                  curve={curveType}
-                  strokeDasharray={s.type ? handleLineType(s.type) : 0}
-                />
+                    data={seriesData}
+                    x={d => handleX(d)}
+                    y={d => handleY(d, index, s)}
+                    stroke={displayArea ?  colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[s.dataKey] : s.dataKey) : '#000' : 'transparent'}
+                    strokeWidth={2}
+                    strokeOpacity={1}
+                    shapeRendering='geometricPrecision'
+                    curve={curveType}
+                    strokeDasharray={s.type ? handleLineType(s.type) : 0}
+                  />
 
                   {/* prettier-ignore */}
                   <AreaClosed
-                  key={'area-chart'}
-                  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)}
-                  y={d => handleY(d, index, s)}
-                  yScale={yScale}
-                  curve={curveType}
-                  strokeDasharray={s.type ? handleLineType(s.type) : 0}
-                />
+                    key={'area-chart'}
+                    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)}
+                    y={d => handleY(d, index, s)}
+                    yScale={yScale}
+                    curve={curveType}
+                    strokeDasharray={s.type ? handleLineType(s.type) : 0}
+                  />
                   {getFirstBrushHandleOnly(children, index)}
                 </React.Fragment>
               )
@@ -128,7 +126,7 @@ const AreaChart = ({ xScale, yScale, yMax, xMax, getXAxisData, getYAxisData, cha
 
             {/* 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} />}
+            {!isBrush && <Bar width={Number(xMax)} height={Number(yMax)} fill={isDebug ? 'red' : 'transparent'} fillOpacity={0.05} style={isDebug ? { stroke: 'black', strokeWidth: 2 } : {}} onMouseMove={e => handleTooltipMouseOver(e, rawData)} onMouseLeave={handleTooltipMouseOff} />}
           </Group>
         </ErrorBoundary>
       </svg>

package/src/components/DeviationBar.jsx

@@ -1,18 +1,17 @@
 import { Line } from '@visx/shape'
 import { Group } from '@visx/group'
-import { useContext, useEffect } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
 import ConfigContext from '../ConfigContext'
 import { Text } from '@visx/text'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import chroma from 'chroma-js'
+import useIntersectionObserver from '../hooks/useIntersectionObserver'
 
 export default function DeviationBar({ height, xScale }) {
-  const { transformedData: data, config, formatNumber, twoColorPalette, getTextWidth, updateConfig, parseDate, formatDate } = useContext(ConfigContext)
-
-  if (!config || config?.series?.length !== 1 || config.orientation !== 'horizontal') return
-
+  const { transformedData: data, config, formatNumber, twoColorPalette, getTextWidth, updateConfig, parseDate, formatDate, currentViewport } = useContext(ConfigContext)
   const { barStyle, tipRounding, roundingStyle, twoColor } = config
-
+  const barRefs = useRef([])
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth)
   const radius = roundingStyle === 'standard' ? '8px' : roundingStyle === 'shallow' ? '5px' : roundingStyle === 'finger' ? '15px' : '0px'
   const fontSize = { small: 16, medium: 18, large: 20 }
   const isRounded = config.barStyle === 'rounded'
@@ -76,14 +75,57 @@ export default function DeviationBar({ height, xScale }) {
   }
   targetLabel.calculate()
 
+  const targetRef = useRef(null)
+
+  const entry = useIntersectionObserver(targetRef, {})
+
   useEffect(() => {
-    if (config.barStyle === 'lollipop' && !config.isLollipopChart) {
-      updateConfig({ ...config, isLollipopChart: true })
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth)
+      barRefs.current.forEach(bar => {
+        bar.style.transition = 'none'
+        bar.style.transform = 'translate(0) scale(1)'
+      })
     }
-    if (isRounded || config.barStyle === 'flat') {
-      updateConfig({ ...config, isLollipopChart: false })
+    window.addEventListener('resize', handleResize)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
     }
-  }, [config.barStyle])
+  }, [])
+  const [animatedChart, setAnimatedChart] = useState(false)
+
+  useEffect(() => {
+    if (entry?.isIntersecting) {
+      setTimeout(() => {
+        setAnimatedChart(true)
+      }, 100)
+    }
+  }, [entry?.isIntersecting, config.animate]) // eslint-disable-line
+
+  useEffect(() => {
+    barRefs.current.forEach((bar, i) => {
+      if (config.animate) {
+        const normalizedTarget = (target / maxVal) * 100
+        bar.style.opacity = '0'
+        bar.style.transform = `translate(${normalizedTarget / 1.07}%) scale(0, 1)`
+        setTimeout(() => {
+          bar.style.opacity = '1'
+          bar.style.transform = 'translate(0) scale(1)'
+          bar.style.transition = 'transform 0.5s ease'
+        }, 100)
+      } else {
+        bar.style.transition = 'none'
+        bar.style.opacity = '0'
+      }
+      if (!config.animate) {
+        bar.style.transition = 'none'
+        bar.style.opacity = '1'
+      }
+    })
+  }, [config.animate, config, animatedChart])
+
+  if (!config || config?.series?.length !== 1) return <></>
 
   return (
     <ErrorBoundary component='Deviation Bar'>
@@ -122,7 +164,6 @@ export default function DeviationBar({ height, xScale }) {
           const fill = isBarColorDark ? '#FFFFFF' : '#000000'
 
           let textProps = getTextProps(config.isLollipopChart, textFits, lollipopShapeSize, fill)
-
           // tooltips
           const xAxisValue = formatNumber(barValue, 'left')
           const yAxisValue = config.runtime.yAxis.type === 'date' ? formatDate(parseDate(data[index][config.runtime.originalXAxis.dataKey])) : data[index][config.runtime.originalXAxis.dataKey]
@@ -135,7 +176,19 @@ export default function DeviationBar({ height, xScale }) {
 
           return (
             <Group key={`deviation-bar-${config.orientation}-${seriesKey}-${index}`}>
-              <foreignObject x={barX} y={barY} width={barWidth} height={barHeight} style={{ border: `${borderWidth}px solid #333`, backgroundColor: barColor[barPosition], ...borderRadius }} data-tooltip-html={tooltip} data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`} />
+              <foreignObject
+                ref={el => {
+                  // targetRef.current = el
+                  barRefs.current[index] = el
+                }}
+                x={barX}
+                y={barY}
+                width={barWidth}
+                height={barHeight}
+                style={{ border: `${borderWidth}px solid #333`, backgroundColor: barColor[barPosition], ...borderRadius }}
+                data-tooltip-html={tooltip}
+                data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+              />
               {config.yAxis.displayNumbersOnBar && (
                 <Text verticalAnchor='middle' x={textX} y={textY} {...textProps[barPosition]}>
                   {formatNumber(d[seriesKey], 'left')}
@@ -155,6 +208,7 @@ export default function DeviationBar({ height, xScale }) {
 
         {shouldShowTargetLine && <Line from={{ x: targetX, y: 0 }} to={{ x: targetX, y: height }} stroke='#333' strokeWidth={2} />}
       </Group>
+      <foreignObject y={height / 2} ref={targetRef}></foreignObject>
     </ErrorBoundary>
   )
 }