@cdc/chart 4.23.1 → 4.23.3

package/src/components/{PairedBarChart.tsx → PairedBarChart.jsx}

@@ -1,26 +1,21 @@
 import React, { useContext } from 'react'
 import { Group } from '@visx/group'
 import { Bar } from '@visx/shape'
-import { scaleLinear, scaleBand } from '@visx/scale'
+import { scaleLinear } from '@visx/scale'
 import { Text } from '@visx/text'
 
-import Context from '../context'
+import ConfigContext from '../ConfigContext'
 import chroma from 'chroma-js'
 
-interface PairedBarChartProps {
-  width: number
-  height: number
-}
-
-const PairedBarChart: React.FC<PairedBarChartProps> = ({ width, height }) => {
-  const { config, colorScale, transformedData, formatNumber, seriesHighlight } = useContext<any>(Context)
+const PairedBarChart = ({ width, height, originalWidth }) => {
+  const { config, colorScale, transformedData: data, formatNumber, seriesHighlight, getTextWidth } = useContext(ConfigContext)
 
   if (!config || config?.series?.length < 2) return
 
-  const data = transformedData
-  const adjustedWidth = width
-  const adjustedHeight = height
-  const halfWidth = adjustedWidth / 2
+  const borderWidth = config.barHasBorder === 'true' ? 1 : 0
+  const halfWidth = width / 2
+  const fontSize = { small: 16, medium: 18, large: 20 }
+  const offset = 1.02 // Offset of the left bar from the Axis
 
   const groupOne = {
     parentKey: config.dataDescription.seriesKey,
@@ -45,15 +40,10 @@ const PairedBarChart: React.FC<PairedBarChartProps> = ({ width, height }) => {
   }
 
   const xScale = scaleLinear({
-    domain: [0, Math.max(groupOne.max, groupTwo.max)],
+    domain: [0, Math.max(groupOne.max * offset, groupTwo.max * 1.1)],
     range: [0, halfWidth]
   })
 
-  const yScale = scaleBand({
-    range: [0, adjustedHeight],
-    domain: data.map(d => d[config.dataDescription.xKey])
-  })
-
   // Set label color
   let labelColor = '#000000'
 
@@ -65,11 +55,13 @@ const PairedBarChart: React.FC<PairedBarChartProps> = ({ width, height }) => {
     groupTwo.labelColor = '#FFFFFF'
   }
 
+  const label = config.yAxis.label ? `${config.yAxis.label}: ` : ''
+
   const dataTipOne = d => {
     return `<p>
 				${config.dataDescription.seriesKey}: ${groupOne.dataKey}<br/>
 				${config.xAxis.dataKey}: ${d[config.xAxis.dataKey]}<br/>
-				${config.dataDescription.valueKey}: ${formatNumber(d[groupOne.dataKey])} 
+				${label}${formatNumber(d[groupOne.dataKey])}
 			</p>`
   }
 
@@ -77,14 +69,10 @@ const PairedBarChart: React.FC<PairedBarChartProps> = ({ width, height }) => {
     return `<p>
 				${config.dataDescription.seriesKey}: ${groupTwo.dataKey}<br/>
 				${config.xAxis.dataKey}: ${d[config.xAxis.dataKey]}<br/>
-				${config.dataDescription.valueKey}: ${formatNumber(d[groupTwo.dataKey])}
+				${label}${formatNumber(d[groupTwo.dataKey])}
 			</p>`
   }
 
-  const isLabelBelowBar = config.yAxis.labelPlacement === 'Below Bar'
-  const isLabelOnYAxis = config.yAxis.labelPlacement === 'On Date/Category Axis'
-  const isLabelMissing = !config.yAxis.labelPlacement
-
   return (
     width > 0 && (
       <>
@@ -96,7 +84,7 @@ const PairedBarChart: React.FC<PairedBarChartProps> = ({ width, height }) => {
 				}
 				`}
         </style>
-        <svg id='cdc-visualization__paired-bar-chart' width={width} height={height} viewBox={`0 0 ${width} ${height}`} role='img' tabIndex={0}>
+        <svg id='cdc-visualization__paired-bar-chart' width={originalWidth} height={height} viewBox={`0 0 ${width + Number(config.runtime.yAxis.size)} ${height}`} role='img' tabIndex={0}>
           <Group top={0} left={Number(config.xAxis.size)}>
             {data
               .filter(item => config.series[0].dataKey === groupOne.dataKey)
@@ -105,26 +93,14 @@ const PairedBarChart: React.FC<PairedBarChartProps> = ({ width, height }) => {
                 let displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(config.series[0].dataKey) !== -1
                 let barWidth = xScale(d[config.series[0].dataKey])
                 let barHeight = Number(config.barHeight) ? Number(config.barHeight) : 25
-                let barPadding = barHeight
-                config.barHeight = Number(config.barHeight) ? Number(config.barHeight) : 25
-                config.barPadding = config.barHeight
-
-                if (config.orientation === 'horizontal') {
-                  if (isLabelBelowBar || isLabelMissing || isLabelOnYAxis) {
-                    if (barHeight < 40) {
-                      config.barPadding = 40
-                    } else {
-                      config.barPadding = barPadding
-                    }
-                  } else {
-                    config.barPadding = barPadding / 2
-                  }
-                }
-
-                config.height = Number(barHeight) * data.length + config.barPadding * data.length
-
-                let y = yScale([d[config.dataDescription.xKey]]) + config.barHeight / 1.5
-                y = Number(config.barPadding) > 20 ? (y += Number(config.barPadding / 3.5) - config.barHeight / 2) : (y += 0)
+                // update bar Y to give dynamic Y when user applyes BarSpace
+                let y = 0
+                y = index !== 0 ? (Number(config.barSpace) + barHeight + borderWidth) * index : y
+                const totalheight = (Number(config.barSpace) + barHeight + borderWidth) * data.length
+                config.heights.horizontal = totalheight
+                // check if text fits inside of the  bar including suffix/prefix,comma,fontSize ..etc
+                const textWidth = getTextWidth(formatNumber(d[groupOne.dataKey]), `normal ${fontSize[config.fontSize]}px sans-serif`)
+                const textFits = textWidth < barWidth - 5 // minus padding dx(5)
 
                 return (
                   <>
@@ -138,15 +114,15 @@ const PairedBarChart: React.FC<PairedBarChartProps> = ({ width, height }) => {
                         width={xScale(d[config.series[0].dataKey])}
                         height={barHeight}
                         fill={groupOne.color}
-                        data-tip={dataTipOne(d)}
-                        data-for={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                        data-tooltip-html={dataTipOne(d)}
+                        data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
                         stroke='#333'
-                        strokeWidth={config.barBorderThickness || 1}
+                        strokeWidth={borderWidth}
                         opacity={transparentBar ? 0.5 : 1}
                         display={displayBar ? 'block' : 'none'}
                       />
                       {config.yAxis.displayNumbersOnBar && displayBar && (
-                        <Text textAnchor={barWidth < 100 ? 'end' : 'start'} verticalAnchor='middle' x={halfWidth - (barWidth < 100 ? barWidth + 10 : barWidth - 5)} y={y + config.barHeight / 2} fill={barWidth > 100 ? groupOne.labelColor : '#000'}>
+                        <Text textAnchor={textFits ? 'start' : 'end'} dx={textFits ? 5 : -5} verticalAnchor='middle' x={halfWidth - barWidth} y={y + config.barHeight / 2} fill={textFits ? groupOne.labelColor : '#000'}>
                           {formatNumber(d[groupOne.dataKey])}
                         </Text>
                       )}
@@ -156,38 +132,28 @@ const PairedBarChart: React.FC<PairedBarChartProps> = ({ width, height }) => {
               })}
             {data
               .filter(item => config.series[1].dataKey === groupTwo.dataKey)
-              .map(d => {
+              .map((d, index) => {
                 let barWidth = xScale(d[config.series[1].dataKey])
                 let transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(config.series[1].dataKey) === -1
                 let displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(config.series[1].dataKey) !== -1
-
-                let barHeight = config.barHeight ? config.barHeight : 25
-                let barPadding = barHeight
-                config.barHeight = Number(config.barHeight)
-
-                let y = yScale([d[config.dataDescription.xKey]]) + config.barHeight / 1.5
-                y = Number(config.barPadding) > 20 ? (y += Number(config.barPadding / 3.5) - config.barHeight / 2) : (y += 0)
-
-                if (config.orientation === 'horizontal') {
-                  if (isLabelBelowBar || isLabelMissing || isLabelOnYAxis) {
-                    if (barHeight < 40) {
-                      config.barPadding = 40
-                    } else {
-                      config.barPadding = barPadding
-                    }
-                  } else {
-                    config.barPadding = barPadding / 2
-                  }
-                }
+                let barHeight = config.barHeight ? Number(config.barHeight) : 25
+                // update bar Y to give dynamic Y when user applyes BarSpace
+                let y = 0
+                y = index !== 0 ? (Number(config.barSpace) + barHeight + borderWidth) * index : y
+                const totalheight = (Number(config.barSpace) + barHeight + borderWidth) * data.length
+                config.heights.horizontal = totalheight
+                // check if text fits inside of the  bar including suffix/prefix,comma,fontSize ..etc
+                const textWidth = getTextWidth(formatNumber(d[groupTwo.dataKey]), `normal ${fontSize[config.fontSize]}px sans-serif`)
+                const isTextFits = textWidth < barWidth - 5 // minus padding dx(5)
 
                 return (
                   <>
                     <style>
                       {`
-								.bar-${groupTwo.dataKey}-${d[config.xAxis.dataKey]} {
-						  			transform-origin: ${halfWidth}px ${y}px
-								}
-							`}
+                      .bar-${groupTwo.dataKey}-${d[config.xAxis.dataKey]} {
+                          transform-origin: ${halfWidth}px ${y}px
+                      }
+							      `}
                     </style>
                     <Group key={`group-${groupTwo.dataKey}-${d[config.dataDescription.xKey]}`} className='horizontal'>
                       <Bar
@@ -199,15 +165,15 @@ const PairedBarChart: React.FC<PairedBarChartProps> = ({ width, height }) => {
                         width={xScale(d[config.series[1].dataKey])}
                         height={barHeight}
                         fill={groupTwo.color}
-                        data-tip={dataTipTwo(d)}
-                        data-for={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
-                        strokeWidth={config.barBorderThickness || 1}
+                        data-tooltip-html={dataTipTwo(d)}
+                        data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                        strokeWidth={borderWidth}
                         stroke='#333'
                         opacity={transparentBar ? 0.5 : 1}
                         display={displayBar ? 'block' : 'none'}
                       />
                       {config.yAxis.displayNumbersOnBar && displayBar && (
-                        <Text textAnchor={barWidth < 100 ? 'start' : 'end'} verticalAnchor='middle' x={halfWidth + (barWidth < 100 ? barWidth + 10 : barWidth - 10)} y={y + config.barHeight / 2} fill={barWidth > 100 ? groupTwo.labelColor : '#000'}>
+                        <Text textAnchor={isTextFits ? 'end' : 'start'} dx={isTextFits ? -5 : 5} verticalAnchor='middle' x={halfWidth + barWidth} y={y + config.barHeight / 2} fill={isTextFits ? groupTwo.labelColor : '#000'}>
                           {formatNumber(d[groupTwo.dataKey])}
                         </Text>
                       )}

package/src/components/{PieChart.tsx → PieChart.jsx}

@@ -1,30 +1,29 @@
 import React, { useContext, useState, useEffect, useRef } from 'react'
 import { animated, useTransition, interpolate } from 'react-spring'
-import ReactTooltip from 'react-tooltip'
+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'
 import useIntersectionObserver from './useIntersectionObserver'
 
-import Context from '../context'
+import ConfigContext from '../ConfigContext'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 
-// react-spring transition definitions
-type PieStyles = { startAngle: number; endAngle: number }
-
-const enterUpdateTransition = ({ startAngle, endAngle }: PieArcDatum<any>) => ({
+const enterUpdateTransition = ({ startAngle, endAngle }) => ({
   startAngle,
   endAngle
 })
 
 export default function PieChart() {
-  const { transformedData: data, config, dimensions, seriesHighlight, colorScale, formatNumber, currentViewport, handleChartAriaLabels } = useContext<any>(Context)
+  const { transformedData: data, config, dimensions, seriesHighlight, colorScale, formatNumber, currentViewport, handleChartAriaLabels, cleanData } = useContext(ConfigContext)
+
+  const cleanedData = cleanData(data, config.xAxis.dataKey)
 
-  const [filteredData, setFilteredData] = useState<any>(undefined)
-  const [animatedPie, setAnimatePie] = useState<boolean>(false)
+  const [filteredData, setFilteredData] = useState(undefined)
+  const [animatedPie, setAnimatePie] = useState(false)
 
   const triggerRef = useRef()
   const dataRef = useIntersectionObserver(triggerRef, {
@@ -32,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)
     }
   })
@@ -47,30 +46,19 @@ export default function PieChart() {
         setAnimatePie(true)
       }, 500)
     }
-  }, [dataRef?.isIntersecting, config.animate])
+  }, [dataRef?.isIntersecting, config.animate]) // eslint-disable-line
 
-  type AnimatedPieProps<Datum> = ProvidedProps<Datum> & {
-    animate?: boolean
-    getKey: (d: PieArcDatum<Datum>) => string
-    delay?: number
-  }
-
-  function AnimatedPie<Datum>({ arcs, path, getKey }: AnimatedPieProps<Datum>) {
-    const transitions = useTransition<PieArcDatum<Datum>, PieStyles>(
-      arcs,
-      getKey,
-      // @ts-ignore react-spring doesn't like this overload
-      {
-        from: enterUpdateTransition,
-        enter: enterUpdateTransition,
-        update: enterUpdateTransition,
-        leave: enterUpdateTransition
-      }
-    )
+  function AnimatedPie({ arcs, path, getKey }) {
+    const transitions = useTransition(arcs, getKey, {
+      from: enterUpdateTransition,
+      enter: enterUpdateTransition,
+      update: enterUpdateTransition,
+      leave: enterUpdateTransition
+    })
 
     return (
       <>
-        {transitions.map(({ item: arc, props, key }: { item: PieArcDatum<Datum>; props: PieStyles; key: string }) => {
+        {transitions.map(({ item: arc, props, key }) => {
           let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${formatNumber(arc.data[config.runtime.yAxis.dataKey])}` : formatNumber(arc.data[config.runtime.yAxis.dataKey])
           let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${arc.data[config.runtime.xAxis.dataKey]}` : arc.data[config.runtime.xAxis.dataKey]
 
@@ -79,11 +67,9 @@ export default function PieChart() {
             ${xAxisTooltip}<br />
             Percent: ${Math.round((((arc.endAngle - arc.startAngle) * 180) / Math.PI / 360) * 100) + '%'}
             `
-
           return (
             <Group key={key} style={{ opacity: config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(arc.data[config.runtime.xAxis.dataKey]) === -1 ? 0.5 : 1 }}>
               <animated.path
-                // compute interpolated path d attribute from intermediate angle values
                 d={interpolate([props.startAngle, props.endAngle], (startAngle, endAngle) =>
                   path({
                     ...arc,
@@ -92,13 +78,13 @@ export default function PieChart() {
                   })
                 )}
                 fill={colorScale(arc.data[config.runtime.xAxis.dataKey])}
-                data-tip={tooltip}
-                data-for={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                data-tooltip-html={tooltip}
+                data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
               />
             </Group>
           )
         })}
-        {transitions.map(({ item: arc, key }: { item: PieArcDatum<Datum>; props: PieStyles; key: string }) => {
+        {transitions.map(({ item: arc, key }) => {
           const [centroidX, centroidY] = path.centroid(arc)
           const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.1
 
@@ -148,23 +134,19 @@ export default function PieChart() {
     } else {
       setFilteredData(undefined)
     }
-  }, [seriesHighlight])
-
-  useEffect(() => {
-    ReactTooltip.rebuild()
-  })
+  }, [seriesHighlight]) // eslint-disable-line
 
   return (
     <ErrorBoundary component='PieChart'>
       <svg width={width} height={height} className={`animated-pie group ${config.animate === false || animatedPie ? 'animated' : ''}`} role='img' aria-label={handleChartAriaLabels(config)}>
         <Group top={centerY} left={centerX}>
-          <Pie data={filteredData || data} pieValue={d => d[config.runtime.yAxis.dataKey]} pieSortValues={() => -1} innerRadius={radius - donutThickness} outerRadius={radius}>
-            {pie => <AnimatedPie<any> {...pie} getKey={d => d.data[config.runtime.xAxis.dataKey]} />}
+          <Pie data={filteredData || cleanedData} pieValue={d => d[config.runtime.yAxis.dataKey]} pieSortValues={() => -1} innerRadius={radius - donutThickness} outerRadius={radius}>
+            {pie => <AnimatedPie {...pie} getKey={d => d.data[config.runtime.xAxis.dataKey]} />}
           </Pie>
         </Group>
       </svg>
       <div ref={triggerRef} />
-      <ReactTooltip id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`} html={true} type='light' arrowColor='rgba(0,0,0,0)' className='tooltip' />
+      <ReactTooltip id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`} variant='light' arrowColor='rgba(0,0,0,0)' className='tooltip' />
     </ErrorBoundary>
   )
 }

package/src/components/ScatterPlot.jsx

@@ -0,0 +1,51 @@
+import React, { useContext } from 'react'
+import ConfigContext from '../ConfigContext'
+import { Group } from '@visx/group'
+
+const CoveScatterPlot = ({ xScale, yScale, getXAxisData, getYAxisData }) => {
+  const { colorScale, transformedData: data, config, formatNumber, seriesHighlight, colorPalettes } = useContext(ConfigContext)
+
+  // TODO: copied from line chart should probably be a constant somewhere.
+  let circleRadii = 4.5
+  const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
+
+  const handleTooltip = (item, s) => `<div>
+    ${config.legend.showLegendValuesTooltip && config.runtime.seriesLabels && hasMultipleSeries ? `${config.runtime.seriesLabels[s] || ''}<br/>` : ''}
+    ${config.xAxis.label}: ${formatNumber(item[config.xAxis.dataKey], 'bottom')} <br/>
+    ${config.yAxis.label}: ${formatNumber(item[s], 'left')}
+</div>`
+
+  return (
+    <Group className='scatter-plot' left={config.yAxis.size}>
+      {data.map((item, dataIndex) => {
+        // prettier-ignore
+        return config.runtime.seriesKeys.map((s, index) => {
+          const transparentArea = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(s) === -1
+          const displayArea = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(s) !== -1
+          const seriesColor = config.palette ? colorPalettes[config.palette][index] : '#000'
+
+          let pointStyles = {
+            filter: 'unset',
+            opacity: 1,
+            stroke: displayArea ? 'black' : ''
+          }
+
+          return (
+            <circle
+              key={`${dataIndex}-${index}`}
+              r={circleRadii}
+              cx={xScale(item[config.xAxis.dataKey])}
+              cy={yScale(item[s])}
+              fill={displayArea ? seriesColor : 'transparent'}
+              fillOpacity={transparentArea ? .25 : 1}
+              style={pointStyles}
+              data-tooltip-html={handleTooltip(item, s)}
+              data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+            />
+          )
+        })
+      })}
+    </Group>
+  )
+}
+export default CoveScatterPlot

package/src/components/SparkLine.jsx

@@ -0,0 +1,218 @@
+import React, { useContext } from 'react'
+
+import * as allCurves from '@visx/curve'
+import { Group } from '@visx/group'
+import { LinePath } from '@visx/shape'
+import { Text } from '@visx/text'
+import { scaleLinear, scalePoint } from '@visx/scale'
+import { AxisBottom } from '@visx/axis'
+import { MarkerArrow } from '@visx/marker'
+
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+
+import useReduceData from '../hooks/useReduceData'
+
+import ConfigContext from '../ConfigContext'
+
+export default function SparkLine({ width: parentWidth, height: parentHeight }) {
+  const { transformedData: data, config, parseDate, formatDate, seriesHighlight, formatNumber, colorScale, handleChartAriaLabels } = useContext(ConfigContext)
+  let width = parentWidth
+  const { minValue, maxValue } = useReduceData(config, data, ConfigContext)
+
+  const margin = { top: 5, right: 10, bottom: 10, left: 10 }
+  const height = parentHeight
+
+  const xMax = width - config.runtime.yAxis.size
+  const yMax = height - margin.top - 20
+
+  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]
+
+  let xScale
+  let yScale
+  let seriesScale
+  const { max: enteredMaxValue, min: enteredMinValue } = config.runtime.yAxis
+  const isMaxValid = Number(enteredMaxValue) >= Number(maxValue)
+  const isMinValid = Number(enteredMinValue) <= Number(minValue)
+
+  // REMOVE bad data points from the data set
+  // Examples: NA, N/A, "1,234", "anystring"
+  // - if you dont call this on data into LineGroup below, for example
+  // then entire data series are removed because of the defined statement
+  // i.e. if a series has any bad data points the entire series wont plot
+  const cleanData = (data, testing = false) => {
+    let cleanedup = []
+    if (testing) console.log('## Data to clean=', data)
+    data.forEach(function (d, i) {
+      let cleanedSeries = {}
+      Object.keys(d).forEach(function (key) {
+        if (key === 'Date') {
+          // pass thru the dates
+          cleanedSeries[key] = d[key]
+        } else {
+          // remove comma and dollar signs
+          let tmp = d[key] !== null && d[key] !== '' ? d[key].replace(/[,$]/g, '') : ''
+          if (testing) console.log('tmp no comma or $', tmp)
+          if ((tmp !== '' && tmp !== null && !isNaN(tmp)) || (tmp !== '' && tmp !== null && /\d+\.?\d*/.test(tmp))) {
+            cleanedSeries[key] = tmp
+          } else {
+            // return nothing to skip bad data point
+            cleanedSeries[key] = '' // returning blank fixes broken chart draw
+          }
+        }
+      })
+      cleanedup.push(cleanedSeries)
+    })
+    if (testing) console.log('## cleanedData =', cleanedup)
+    return cleanedup
+  }
+
+  // Just do this once up front otherwise we end up
+  // calling clean several times on same set of data (TT)
+  const cleanedData = cleanData(data, config.xAxis.dataKey)
+
+  if (cleanedData) {
+    let min = enteredMinValue && isMinValid ? enteredMinValue : minValue
+    let max = enteredMaxValue && isMaxValid ? enteredMaxValue : Number.MIN_VALUE
+
+    if (max === Number.MIN_VALUE) {
+      max = maxValue
+    }
+
+    //Adds Y Axis data padding if applicable
+    if (config.runtime.yAxis.paddingPercent) {
+      let paddingValue = (max - min) * config.runtime.yAxis.paddingPercent
+      min -= paddingValue
+      max += paddingValue
+    }
+
+    let xAxisDataMapped = cleanedData.map(d => getXAxisData(d))
+
+    if (config.runtime.horizontal) {
+      xScale = scaleLinear({
+        domain: [min, max],
+        range: [0, xMax]
+      })
+
+      yScale = config.runtime.xAxis.type === 'date' ? scaleLinear({ domain: [Math.min(...xAxisDataMapped), Math.max(...xAxisDataMapped)] }) : scalePoint({ domain: xAxisDataMapped, padding: 0.5 })
+
+      seriesScale = scalePoint({
+        domain: config.runtime.barSeriesKeys || config.runtime.seriesKeys,
+        range: [0, yMax]
+      })
+
+      yScale.rangeRound([0, yMax])
+    } else {
+      min = min < 0 ? min * 1.11 : min
+
+      yScale = scaleLinear({
+        domain: [min, max],
+        range: [yMax - margin.bottom, margin.top]
+      })
+
+      xScale = scalePoint({
+        domain: xAxisDataMapped,
+        range: [margin.left, width - margin.right]
+      })
+
+      // eslint-disable-next-line
+      seriesScale = scalePoint({
+        domain: config.runtime.barSeriesKeys || config.runtime.seriesKeys,
+        range: [0, xMax]
+      })
+    }
+  }
+
+  const handleSparkLineTicks = [xScale.domain()[0], xScale.domain()[xScale.domain().length - 1]]
+
+  return (
+    <ErrorBoundary component='SparkLine'>
+      <svg role='img' aria-label={handleChartAriaLabels(config)} width={width} height={height} className={'sparkline'} tabIndex={0}>
+        {config.runtime.lineSeriesKeys.length > 0
+          ? config.runtime.lineSeriesKeys
+          : config.runtime.seriesKeys.map((seriesKey, index) => (
+              <>
+                <Group
+                  className='sparkline-group'
+                  height={parentHeight}
+                  style={{ height: parentHeight }}
+                  top={margin.top}
+                  key={`series-${seriesKey}`}
+                  opacity={config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(seriesKey) === -1 ? 0.5 : 1}
+                  display={config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1 ? 'block' : 'none'}
+                >
+                  {cleanedData.map((d, dataIndex) => {
+                    let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${formatNumber(getYAxisData(d, seriesKey))}` : formatNumber(getYAxisData(d, seriesKey))
+                    let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${d[config.runtime.xAxis.dataKey]}` : d[config.runtime.xAxis.dataKey]
+
+                    const tooltip = `<div>
+									${yAxisTooltip}<br />
+									${xAxisTooltip}<br />
+									${config.seriesLabel ? `${config.seriesLabel}: ${seriesKey}` : ''}
+									</div>`
+
+                    let circleRadii = 4.5
+                    return (
+                      <Group key={`series-${seriesKey}-point-${dataIndex}`}>
+                        <Text display={config.labels ? 'block' : 'none'} x={xScale(getXAxisData(d))} y={yScale(getYAxisData(d, seriesKey))} fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'} textAnchor='middle'>
+                          {formatNumber(d[seriesKey])}
+                        </Text>
+
+                        {dataIndex + 1 !== data.length && (config.lineDatapointStyle === 'always show' || config.lineDatapointStyle === 'hover') && (
+                          <circle
+                            key={`${seriesKey}-${dataIndex}`}
+                            r={circleRadii}
+                            cx={xScale(getXAxisData(d))}
+                            cy={yScale(getYAxisData(d, seriesKey))}
+                            fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
+                            style={{ fill: colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000' }}
+                            data-tooltip-html={tooltip}
+                            data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                          />
+                        )}
+                      </Group>
+                    )
+                  })}
+                  <LinePath
+                    curve={allCurves.curveLinear}
+                    data={cleanedData}
+                    x={d => xScale(getXAxisData(d))}
+                    y={d => yScale(getYAxisData(d, seriesKey))}
+                    stroke={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
+                    strokeWidth={2}
+                    strokeOpacity={1}
+                    shapeRendering='geometricPrecision'
+                    markerEnd={`url(#${'arrow'}--${index})`}
+                  />
+                  <MarkerArrow
+                    id={`arrow--${index}`}
+                    refX={2}
+                    size={6}
+                    markerEnd={`url(#${'arrow'}--${index})`}
+                    strokeOpacity={1}
+                    fillOpacity={1}
+                    // stroke={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
+                    fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
+                  />
+                </Group>
+                <AxisBottom
+                  top={yMax + margin.top}
+                  hideAxisLine
+                  hideTicks
+                  scale={xScale}
+                  tickValues={handleSparkLineTicks}
+                  tickFormat={formatDate}
+                  stroke={'black'}
+                  tickStroke={'black'}
+                  tickLabelProps={() => ({
+                    fill: 'black',
+                    fontSize: 11,
+                    textAnchor: 'middle'
+                  })}
+                />
+              </>
+            ))}
+      </svg>
+    </ErrorBoundary>
+  )
+}

package/src/components/{useIntersectionObserver.tsx → useIntersectionObserver.jsx}

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 
 export default function useIntersectionObserver(elementRef, { threshold = 0, root = null, rootMargin = '0%', freezeOnceVisible = false }) {
-  const [entry, setEntry] = useState<any>()
+  const [entry, setEntry] = useState()
 
   const frozen = entry?.isIntersecting && freezeOnceVisible
 
@@ -22,7 +22,7 @@ export default function useIntersectionObserver(elementRef, { threshold = 0, roo
       observer.observe(node)
 
       return () => observer.disconnect()
-    }, 500);
+    }, 500)
   }, [elementRef, threshold, root, rootMargin, frozen])
 
   return entry