@cdc/chart 4.22.11 → 4.23.2

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,13 +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
+  console.log(config)
 
   return (
     width > 0 && (
@@ -96,8 +85,8 @@ 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}>
-          <Group top={0} left={config.xAxis.size}>
+        <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)
               .map((d, index) => {
@@ -105,26 +94,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 +115,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 +133,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 +166,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,6 +1,6 @@
 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 chroma from 'chroma-js'
@@ -8,29 +8,38 @@ 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, {
     freezeOnceVisible: false
   })
 
+  // Make sure the chart is visible if in the editor
+  useEffect(() => {
+    const element = document.querySelector('.isEditor')
+    if (element) {
+      // parent element is visible
+      console.log('setAnimation')
+      setAnimatePie(prevState => true)
+    }
+  })
+
   useEffect(() => {
     if (dataRef?.isIntersecting && config.animate && !animatedPie) {
       setTimeout(() => {
@@ -39,17 +48,9 @@ export default function PieChart() {
     }
   }, [dataRef?.isIntersecting, config.animate])
 
-  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
+  function AnimatedPie({ arcs, path, getKey }) {
+    const transitions = useTransition( arcs, getKey,
       {
         from: enterUpdateTransition,
         enter: enterUpdateTransition,
@@ -60,7 +61,7 @@ export default function PieChart() {
 
     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]
 
@@ -69,11 +70,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,
@@ -82,13 +81,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
 
@@ -117,7 +116,7 @@ export default function PieChart() {
     width = width * 0.73
   }
 
-  const height = config.aspectRatio ? width * config.aspectRatio : config.height
+  const height = config.heights.vertical
 
   const radius = Math.min(width, height) / 2
   const centerY = height / 2
@@ -140,21 +139,17 @@ export default function PieChart() {
     }
   }, [seriesHighlight])
 
-  useEffect(() => {
-    ReactTooltip.rebuild()
-  })
-
   return (
     <ErrorBoundary component='PieChart'>
-      <svg width={width} height={height} className={`group ${animatedPie ? 'animated' : ''}`} role='img' aria-label={handleChartAriaLabels(config)}>
+      <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,48 @@
+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 } = useContext(ConfigContext)
+
+  // copied from line chart
+  // should probably be a constant somewhere.
+  let circleRadii = 4.5
+
+  let pointStyles = {
+    filter: 'unset',
+    opacity: 1,
+    stroke: 'black'
+  }
+
+  const handleTooltip = (item, s) => `<div>
+ ${config.xAxis.label}: ${item[config.xAxis.dataKey]} <br/>
+ ${config.yAxis.label}: ${item[s]}
+</div>`
+
+  return (
+    <Group className='scatter-plot' left={config.yAxis.size}>
+      {data.map((item, dataIndex) => {
+        // prettier-ignore
+        return config.runtime.seriesKeys.map(s => {
+
+          return (
+            <circle
+              key={`${dataIndex}`}
+              r={circleRadii}
+              cx={xScale(item[config.xAxis.dataKey])}
+              cy={yScale(item[s])}
+              fillOpacity={1}
+              opacity={1}
+              style={pointStyles}
+              fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[s] : s) : '#000'}
+              data-tooltip-html={handleTooltip(item, s)}
+              data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+            />
+          )
+        })
+      })}
+    </Group>
+  )
+}
+export default CoveScatterPlot

package/src/components/{SparkLine.js → SparkLine.jsx}

@@ -10,16 +10,14 @@ import { MarkerArrow } from '@visx/marker'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 
-import ReactTooltip from 'react-tooltip'
-
 import useReduceData from '../hooks/useReduceData'
 
-import Context from '../context'
+import ConfigContext from '../ConfigContext'
 
 export default function SparkLine({ width: parentWidth, height: parentHeight }) {
-  const { transformedData: data, dimensions, config, parseDate, formatDate, currentViewport, seriesHighlight, formatNumber, colorScale, handleChartAriaLabels } = useContext(Context)
+  const { transformedData: data, dimensions, config, parseDate, formatDate, currentViewport, seriesHighlight, formatNumber, colorScale, isNumber, handleChartAriaLabels } = useContext(ConfigContext)
   let width = parentWidth
-  const { minValue, maxValue } = useReduceData(config, data)
+  const { minValue, maxValue } = useReduceData(config, data, ConfigContext)
 
   const margin = { top: 5, right: 10, bottom: 10, left: 10 }
   const height = parentHeight
@@ -37,7 +35,44 @@ export default function SparkLine({ width: parentWidth, height: parentHeight })
   const isMaxValid = Number(enteredMaxValue) >= Number(maxValue)
   const isMinValid = Number(enteredMinValue) <= Number(minValue)
 
-  if (data) {
+
+  // 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
 
@@ -52,7 +87,7 @@ export default function SparkLine({ width: parentWidth, height: parentHeight })
       max += paddingValue
     }
 
-    let xAxisDataMapped = data.map(d => getXAxisData(d))
+    let xAxisDataMapped = cleanedData.map(d => getXAxisData(d))
 
     if (config.runtime.horizontal) {
       xScale = scaleLinear({
@@ -90,10 +125,6 @@ export default function SparkLine({ width: parentWidth, height: parentHeight })
 
   const handleSparkLineTicks = [xScale.domain()[0], xScale.domain()[xScale.domain().length - 1]]
 
-  useEffect(() => {
-    ReactTooltip.rebuild()
-  })
-
   return (
     <ErrorBoundary component='SparkLine'>
       <svg role='img' aria-label={handleChartAriaLabels(config)} width={width} height={height} className={'sparkline'} tabIndex={0}>
@@ -108,14 +139,14 @@ export default function SparkLine({ width: parentWidth, height: parentHeight })
               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'}
             >
-              {data.map((d, dataIndex) => {
+              {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}` : ''} 
+									${config.seriesLabel ? `${config.seriesLabel}: ${seriesKey}` : ''}
 									</div>`
 
                 let circleRadii = 4.5
@@ -133,8 +164,8 @@ export default function SparkLine({ width: parentWidth, height: parentHeight })
                         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-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>
@@ -142,20 +173,20 @@ export default function SparkLine({ width: parentWidth, height: parentHeight })
               })}
               <LinePath
                 curve={allCurves.curveLinear}
-                data={data}
+                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'
-                marker-end={`url(#${'arrow'}--${index})`}
+                markerEnd={`url(#${'arrow'}--${index})`}
               />
               <MarkerArrow
                 id={`arrow--${index}`}
                 refX={2}
                 size={6}
-                marker-end={`url(#${'arrow'}--${index})`}
+                markerEnd={`url(#${'arrow'}--${index})`}
                 strokeOpacity={1}
                 fillOpacity={1}
                 // stroke={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}

package/src/components/useIntersectionObserver.jsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react'
+
+export default function useIntersectionObserver(elementRef, { threshold = 0, root = null, rootMargin = '0%', freezeOnceVisible = false }) {
+  const [entry, setEntry] = useState()
+
+  const frozen = entry?.isIntersecting && freezeOnceVisible
+
+  const updateEntry = ([entry]) => {
+    setEntry(entry)
+  }
+
+  useEffect(() => {
+    setTimeout(() => {
+      const node = elementRef?.current
+      const hasIOSupport = !!window.IntersectionObserver
+
+      if (!hasIOSupport || frozen || !node) return
+
+      const observerParams = { threshold, root, rootMargin }
+      const observer = new IntersectionObserver(updateEntry, observerParams)
+
+      observer.observe(node)
+
+      return () => observer.disconnect()
+    }, 500);
+  }, [elementRef, threshold, root, rootMargin, frozen])
+
+  return entry
+}