@cdc/chart 4.24.5 → 4.24.9

package/src/components/PairedBarChart.jsx

@@ -18,7 +18,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
   const offset = 1.02 // Offset of the left bar from the Axis
 
   const groupOne = {
-    parentKey: config.dataDescription.seriesKey,
+    parentKey: config.dataDescription?.seriesKey,
     dataKey: config.series[0].dataKey,
     dataKeyLabel: config.runtime.seriesLabels[config.series[0].dataKey] || config.series[0].dataKey,
     color: colorScale(config.runtime.seriesLabels[config.series[0].dataKey]),
@@ -30,7 +30,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
   }
 
   const groupTwo = {
-    parentKey: config.dataDescription.seriesKey,
+    parentKey: config.dataDescription?.seriesKey,
     dataKey: config.series[1].dataKey,
     dataKeyLabel: config.runtime.seriesLabels[config.series[1].dataKey] || config.series[1].dataKey,
     color: colorScale(config.runtime.seriesLabels[config.series[1].dataKey]),
@@ -54,7 +54,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
 
   const dataTipOne = d => {
     return `<p>
-				${config.dataDescription.seriesKey}: ${groupOne.dataKeyLabel}<br/>
+				${config.dataDescription?.seriesKey}: ${groupOne.dataKeyLabel}<br/>
 				${config.xAxis.dataKey}: ${d[config.xAxis.dataKey]}<br/>
 				${label}${formatNumber(d[groupOne.dataKey], 'left')}
 			</p>`
@@ -62,7 +62,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
 
   const dataTipTwo = d => {
     return `<p>
-				${config.dataDescription.seriesKey}: ${groupTwo.dataKeyLabel}<br/>
+				${config.dataDescription?.seriesKey}: ${groupTwo.dataKeyLabel}<br/>
 				${config.xAxis.dataKey}: ${d[config.xAxis.dataKey]}<br/>
 				${label}${formatNumber(d[groupTwo.dataKey], 'left')}
 			</p>`
@@ -102,9 +102,9 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                   <>
                     <Group key={`group-${groupOne.dataKey}-${d[config.xAxis.dataKey]}`} className='horizontal'>
                       <Bar
-                        id={`bar-${groupOne.dataKey}-${d[config.dataDescription.xKey]}`}
+                        id={`bar-${groupOne.dataKey}-${d[config.dataDescription?.xKey]}`}
                         className='bar group-1'
-                        key={`bar-${groupOne.dataKey}-${d[config.dataDescription.xKey]}`}
+                        key={`bar-${groupOne.dataKey}-${d[config.dataDescription?.xKey]}`}
                         x={halfWidth - barWidth}
                         y={y}
                         width={xScale(d[config.series[0].dataKey])}
@@ -152,11 +152,11 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                       }
 							      `}
                     </style>
-                    <Group key={`group-${groupTwo.dataKey}-${d[config.dataDescription.xKey]}`} className='horizontal'>
+                    <Group key={`group-${groupTwo.dataKey}-${d[config.dataDescription?.xKey]}`} className='horizontal'>
                       <Bar
-                        id={`bar-${groupTwo.dataKey}-${d[config.dataDescription.xKey]}`}
+                        id={`bar-${groupTwo.dataKey}-${d[config.dataDescription?.xKey]}`}
                         className='bar group-2'
-                        key={`bar-${groupTwo.dataKey}-${d[config.dataDescription.xKey]}`}
+                        key={`bar-${groupTwo.dataKey}-${d[config.dataDescription?.xKey]}`}
                         x={halfWidth}
                         y={y}
                         width={xScale(d[config.series[1].dataKey])}

package/src/components/PieChart/PieChart.tsx

@@ -33,7 +33,17 @@ type TooltipData = {
 }
 
 const PieChart = props => {
-  const { transformedData: data, config, colorScale, currentViewport, dimensions, highlight, highlightReset, seriesHighlight } = useContext(ConfigContext)
+  const {
+    transformedData: data,
+    config,
+    colorScale,
+    currentViewport,
+    dimensions,
+    highlight,
+    highlightReset,
+    seriesHighlight,
+    isDraggingAnnotation
+  } = useContext(ConfigContext)
   const { tooltipData, showTooltip, hideTooltip, tooltipOpen, tooltipLeft, tooltipTop } = useTooltip<TooltipData>()
   const { handleTooltipMouseOver, handleTooltipMouseOff, TooltipListItem } = useCoveTooltip({
     xScale: false,
@@ -135,7 +145,18 @@ const PieChart = props => {
       <>
         {transitions.map(({ item: arc, props, key }, animatedPieIndex) => {
           return (
-            <Group className={arc.data[config.xAxis.dataKey]} key={`${key}-${animatedPieIndex}`} style={{ opacity: config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(arc.data[config.runtime.xAxis.dataKey]) === -1 ? 0.5 : 1 }}>
+            <Group
+              className={arc.data[config.xAxis.dataKey]}
+              key={`${key}-${animatedPieIndex}`}
+              style={{
+                opacity:
+                  config.legend.behavior === 'highlight' &&
+                  seriesHighlight.length > 0 &&
+                  seriesHighlight.indexOf(arc.data[config.runtime.xAxis.dataKey]) === -1
+                    ? 0.5
+                    : 1
+              }}
+            >
               <animated.path
                 d={interpolate([props.startAngle, props.endAngle], (startAngle, endAngle) =>
                   path({
@@ -163,7 +184,14 @@ const PieChart = props => {
           return (
             <animated.g key={`${key}${i}`}>
               {hasSpaceForLabel && (
-                <Text style={{ fill: textColor }} x={centroidX} y={centroidY} dy='.33em' textAnchor='middle' pointerEvents='none'>
+                <Text
+                  style={{ fill: textColor }}
+                  x={centroidX}
+                  y={centroidY}
+                  dy='.33em'
+                  textAnchor='middle'
+                  pointerEvents='none'
+                >
                   {Math.round((((arc.endAngle - arc.startAngle) * 180) / Math.PI / 360) * 100) + '%'}
                 </Text>
               )}
@@ -174,17 +202,18 @@ const PieChart = props => {
     )
   }
 
-  let [width] = dimensions
+  let chartWidth = props.parentWidth
+  let width = props.parentWidth
 
   if (config && config.legend && !config.legend.hide && currentViewport === 'lg') {
-    width = width * 0.73
+    width = Number(chartWidth) * 0.73
   }
 
   const height = config.heights.vertical
 
   const radius = Math.min(width, height) / 2
   const centerY = height / 2
-  const centerX = width / 2
+  const centerX = props.parentWidth / 2
   const donutThickness = config.pieType === 'Donut' ? 75 : radius
 
   useEffect(() => {
@@ -205,11 +234,25 @@ const PieChart = props => {
 
   const createLegendLabels = createFormatLabels(config, [], _data, _colorScale)
 
+  const getSvgClasses = () => {
+    let classes = ['animated-pie', 'group']
+    if (config.animate === false || animatedPie) {
+      classes.push('animated')
+    }
+    return classes.join(' ')
+  }
+
   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}>
+        <svg
+          width={radius * 2}
+          height={height}
+          className={getSvgClasses()}
+          role='img'
+          aria-label={handleChartAriaLabels(config)}
+        >
+          <Group top={centerY} left={radius}>
             {/* prettier-ignore */}
             <Pie
             data={filteredData || _data}
@@ -223,17 +266,31 @@ const PieChart = props => {
           </Group>
         </svg>
         <div ref={triggerRef} />
-        {tooltipData && Object.entries(tooltipData.data).length > 0 && tooltipOpen && showTooltip && tooltipData.dataYPosition && tooltipData.dataXPosition && (
-          <>
-            <style>{`.tooltip {background-color: rgba(255,255,255, ${config.tooltips.opacity / 100}) !important`}</style>
-            <TooltipWithBounds key={Math.random()} className={'tooltip cdc-open-viz-module'} left={tooltipLeft} top={tooltipTop}>
-              <ul>{typeof tooltipData === 'object' && Object.entries(tooltipData.data).map((item, index) => <TooltipListItem item={item} key={index} />)}</ul>
-            </TooltipWithBounds>
-          </>
-        )}
-        {/* <ReactTooltip id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`} variant='light' arrowColor='rgba(0,0,0,0)' className='tooltip' /> */}
+        {!isDraggingAnnotation &&
+          tooltipData &&
+          Object.entries(tooltipData.data).length > 0 &&
+          tooltipOpen &&
+          showTooltip &&
+          tooltipData.dataYPosition &&
+          tooltipData.dataXPosition && (
+            <>
+              <style>{`.tooltip {background-color: rgba(255,255,255, ${
+                config.tooltips.opacity / 100
+              }) !important`}</style>
+              <TooltipWithBounds
+                key={Math.random()}
+                className={'tooltip cdc-open-viz-module'}
+                left={tooltipLeft}
+                top={tooltipTop}
+              >
+                <ul>
+                  {typeof tooltipData === 'object' &&
+                    Object.entries(tooltipData.data).map((item, index) => <TooltipListItem item={item} key={index} />)}
+                </ul>
+              </TooltipWithBounds>
+            </>
+          )}
       </ErrorBoundary>
-      <LegendComponent config={config} colorScale={_colorScale} seriesHighlight={seriesHighlight} highlight={highlight} highlightReset={highlightReset} currentViewport={currentViewport} formatLabels={createLegendLabels} />
     </>
   )
 }

package/src/components/Sankey/index.tsx

@@ -13,29 +13,38 @@ import 'react-tooltip/dist/react-tooltip.css'
 import ConfigContext from '@cdc/chart/src/ConfigContext'
 import { ChartContext } from '../../types/ChartContext'
 import type { SankeyNode, SankeyProps } from './types'
+import { SankeyChartConfig, AllChartsConfig } from '../../types/ChartConfig'
 
 const Sankey = ({ width, height, runtime }: SankeyProps) => {
-  const DEBUG = true
   const { config } = useContext<ChartContext>(ConfigContext)
   const { sankey: sankeyConfig } = config
-  // !info - changed config.sankey.data here to work with our current upload pattern saved on config.data
-  const data = config?.data[0]
+
+  const isSankeyChartConfig = (config: AllChartsConfig | SankeyChartConfig): config is SankeyChartConfig => {
+    return config.visualizationType === 'Sankey'
+  }
+
   const [largestGroupWidth, setLargestGroupWidth] = useState(0)
   const groupRefs = useRef([])
 
   //Tooltip
   const [tooltipID, setTooltipID] = useState<string>('')
+  //Mobile Pop Up
+  const [showPopup, setShowPopup] = useState(false)
 
   const handleNodeClick = (nodeId: string) => {
-    setTooltipID(nodeId)
-  }
+    // Store the previous tooltipID
+    const previousTooltipID = tooltipID
 
-  const clearNodeClick = () => {
-    setTooltipID('')
-  }
+    // If the previous tooltipID exists, clear it
+    if (previousTooltipID) {
+      setTooltipID('')
+    }
 
-  //Mobile Pop Up
-  const [showPopup, setShowPopup] = useState(false)
+    // Update the tooltipID with the new nodeId if it's different from the previous one
+    if (previousTooltipID !== nodeId) {
+      setTooltipID(nodeId)
+    }
+  }
 
   useEffect(() => {
     if (window.innerWidth < 768 && window.innerHeight > window.innerWidth) {
@@ -60,6 +69,9 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
     setLargestGroupWidth(largest)
   }, [groupRefs, sankeyConfig, window.innerWidth])
 
+  if (!isSankeyChartConfig(config)) return
+  const data = config?.data[0]
+
   //Retrieve all the unique values for the Nodes
   const uniqueNodes = Array.from(new Set(data?.links?.flatMap(link => [link.source, link.target])))
 
@@ -109,6 +121,8 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
   }
 
   const activeConnection = (id: String) => {
+    if (!sankeyData?.nodes) return { sourceNodes: [], activeLinks: [] }
+
     const currentNode = sankeyData.nodes.find(node => node.id === id)
 
     const sourceNodes = []
@@ -137,12 +151,12 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
     return { sourceNodes, activeLinks }
   }
 
-  const tooltipVal = `${(data?.tooltips.find(item => item.node === tooltipID) || {}).value}`
-  const tooltipSummary = `${(data?.tooltips.find(item => item.node === tooltipID) || {}).summary}`
-  const tooltipColumn1Label = (data?.tooltips.find(item => item.node === tooltipID) || {}).column1Label
-  const tooltipColumn2Label = (data?.tooltips.find(item => item.node === tooltipID) || {}).column2Label
-  const tooltipColumn1 = (data?.tooltips.find(item => item.node === tooltipID) || {}).column1
-  const tooltipColumn2 = (data?.tooltips.find(item => item.node === tooltipID) || {}).column2
+  const tooltipVal = `${(data?.tooltips?.find(item => item.node === tooltipID) || {}).value}`
+  const tooltipSummary = `${(data?.tooltips?.find(item => item.node === tooltipID) || {}).summary}`
+  const tooltipColumn1Label = (data?.tooltips?.find(item => item.node === tooltipID) || {}).column1Label
+  const tooltipColumn2Label = (data?.tooltips?.find(item => item.node === tooltipID) || {}).column2Label
+  const tooltipColumn1 = (data?.tooltips?.find(item => item.node === tooltipID) || {}).column1
+  const tooltipColumn2 = (data?.tooltips?.find(item => item.node === tooltipID) || {}).column2
 
   const ColumnList = ({ columnData }) => {
     return (
@@ -201,7 +215,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
           fillOpacity={opacityValue}
           rx={sankeyConfig.rxValue}
           // todo: move enable tooltips to sankey
-          data-tooltip-html={data.tooltips && config.enableTooltips ? sankeyToolTip : null}
+          data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
           data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
           onClick={() => handleNodeClick(node.id)}
           style={{ pointerEvents: 'visible', cursor: 'pointer' }}
@@ -229,12 +243,27 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               */
               fill={sankeyConfig.nodeFontColor}
               fontWeight='bold' // font weight
-              style={{ pointerEvents: 'none' }}
               className='node-text'
+              style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
+              onClick={() => handleNodeClick(node.id)}
+              data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
+              data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
             >
               {(data?.storyNodeText?.find(storyNode => storyNode.StoryNode === node.id) || {}).segmentTextBefore}
             </Text>
-            <Text verticalAnchor='end' className={classStyle} x={node.x0! + textPositionHorizontal} y={(node.y1! + node.y0! + 25) / 2} fill={sankeyConfig.storyNodeFontColor || sankeyConfig.nodeFontColor} fontWeight='bold' textAnchor='start' style={{ pointerEvents: 'none' }}>
+            <Text
+              verticalAnchor='end'
+              className={classStyle}
+              x={node.x0! + textPositionHorizontal}
+              y={(node.y1! + node.y0! + 25) / 2}
+              fill={sankeyConfig.storyNodeFontColor || sankeyConfig.nodeFontColor}
+              fontWeight='bold'
+              textAnchor='start'
+              style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
+              onClick={() => handleNodeClick(node.id)}
+              data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
+              data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
+            >
               {typeof node.value === 'number' ? node.value.toLocaleString() : node.value}
             </Text>
             <Text
@@ -244,20 +273,32 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               fill={sankeyConfig.nodeFontColor}
               fontWeight='bold'
               textAnchor={sankeyData.nodes.length === i ? 'end' : 'start'}
-              style={{ pointerEvents: 'none' }}
               className='node-text'
               verticalAnchor='end'
+              style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
+              onClick={() => handleNodeClick(node.id)}
+              data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
+              data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
             >
               {(data?.storyNodeText?.find(storyNode => storyNode.StoryNode === node.id) || {}).segmentTextAfter}
             </Text>
           </>
         ) : (
           <>
-            <text x={node.x0! + textPositionHorizontal} y={(node.y1! + node.y0!) / 2 + textPositionVertical} dominantBaseline='text-before-edge' fill={sankeyConfig.nodeFontColor} fontWeight='bold' textAnchor='start' style={{ pointerEvents: 'none' }}>
-              <tspan id={node.id} className='node-id'>
-                {node.id}
-              </tspan>
-            </text>
+            <Text
+              style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
+              onClick={() => handleNodeClick(node.id)}
+              data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
+              data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
+              x={node.x0! + textPositionHorizontal}
+              y={(node.y1! + node.y0!) / 2 + textPositionVertical}
+              dominantBaseline='text-before-edge'
+              fill={sankeyConfig.nodeFontColor}
+              fontWeight='bold'
+              textAnchor='start'
+            >
+              {node.id}
+            </Text>
             <text
               x={node.x0! + textPositionHorizontal}
               /* adding 30 allows the node value to be on the next line underneath the node id */
@@ -267,7 +308,10 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               //fontSize={16}
               fontWeight='bold'
               textAnchor='start'
-              style={{ pointerEvents: 'none' }}
+              style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
+              onClick={() => handleNodeClick(node.id)}
+              data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
+              data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
             >
               <tspan className={classStyle}>{sankeyConfig.nodeValueStyle.textBefore + (typeof node.value === 'number' ? node.value.toLocaleString() : node.value) + sankeyConfig.nodeValueStyle.textAfter}</tspan>
             </text>
@@ -291,7 +335,20 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
       opacityValue = sankeyConfig.opacity.LinkOpacityInactive
     }
 
-    return <path key={i} d={path!} stroke={strokeColor} fill='none' strokeOpacity={opacityValue} strokeWidth={link.width! + 2} />
+    return (
+      <path
+        key={i}
+        d={path!}
+        stroke={strokeColor}
+        fill='none'
+        strokeOpacity={opacityValue}
+        strokeWidth={link.width! + 2}
+        style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
+        onClick={() => handleNodeClick(link.target.id || null)}
+        data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
+        data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
+      />
+    )
   })
 
   // max depth - calculates how many nodes deep the chart goes.
@@ -325,7 +382,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
           fillOpacity={opacityValue}
           rx={sankeyConfig.rxValue}
           // todo: move enable tooltips to sankey
-          data-tooltip-html={data.tooltips && config.enableTooltips ? sankeyToolTip : null}
+          data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
           data-tooltip-id={`tooltip`}
           onClick={() => handleNodeClick(node.id)}
           style={{ pointerEvents: 'visible', cursor: 'pointer' }}
@@ -393,7 +450,9 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               textAnchor='start'
               style={{ pointerEvents: 'none' }}
             >
-              <tspan className={classStyle}>{sankeyConfig.nodeValueStyle.textBefore + (typeof node.value === 'number' ? node.value.toLocaleString() : node.value) + sankeyConfig.nodeValueStyle.textAfter}</tspan>
+              <tspan onClick={() => handleNodeClick(node.id)} className={classStyle}>
+                {sankeyConfig.nodeValueStyle.textBefore + (typeof node.value === 'number' ? node.value.toLocaleString() : node.value) + sankeyConfig.nodeValueStyle.textAfter}
+              </tspan>
             </text>
           </>
         )}
@@ -414,7 +473,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
 
         {/* ReactTooltip needs to remain even if tooltips are disabled -- it handles when a user clicks off of the node and resets
         the sankey diagram. When tooltips are disabled this will nothing */}
-        <ReactTooltip id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`} afterHide={() => clearNodeClick()} events={['click']} place={'bottom'} style={{ backgroundColor: `rgba(238, 238, 238, 1)`, color: 'black', boxShadow: `0 3px 10px rgb(0 0 0 / 0.2)` }} />
+        <ReactTooltip id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`} afterHide={() => setTooltipID('')} events={['click']} place={'bottom'} style={{ backgroundColor: `rgba(238, 238, 238, 1)`, color: 'black', boxShadow: `0 3px 10px rgb(0 0 0 / 0.2)` }} />
         {showPopup && (
           <div className='popup'>
             <div className='popup-content'>

package/src/components/ScatterPlot/ScatterPlot.jsx

@@ -1,18 +1,32 @@
 import React, { useContext } from 'react'
 import ConfigContext from '../../ConfigContext'
 import { Group } from '@visx/group'
+import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
 
-const ScatterPlot = ({ xScale, yScale, getXAxisData, getYAxisData }) => {
-  const { colorScale, transformedData: data, config, formatNumber, seriesHighlight, colorPalettes } = useContext(ConfigContext)
+const ScatterPlot = ({ xScale, yScale }) => {
+  const { transformedData: data, config, tableData, formatNumber, seriesHighlight, colorPalettes } = useContext(ConfigContext)
 
   // TODO: copied from line chart should probably be a constant somewhere.
-  let circleRadii = 4.5
+  const circleRadii = 4.5
   const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
-
-  const handleTooltip = (item, s) => `<div>
+  // tooltips for additional columns
+  const additionalColumns = Object.entries(config.columns)
+    .filter(([_, value]) => value.tooltips)
+    .map(([_, value]) => [
+      value.label || value.name,
+      value.name,
+      {
+        addColPrefix: value.prefix,
+        addColSuffix: value.suffix,
+        addColRoundTo: value.roundToPlace,
+        addColCommas: value.commas
+      }
+    ])
+  const handleTooltip = (item, s, dataIndex) => `<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')}
+    ${config.yAxis.label}: ${formatNumber(item[s], 'left')}<br/>
+   ${additionalColumns.map(([label, name, options]) => `${label} : ${formatColNumber(tableData[dataIndex][name], 'left', false, config, options)}<br/>`).join('')}
 </div>`
 
   return (
@@ -37,9 +51,9 @@ const ScatterPlot = ({ xScale, yScale, getXAxisData, getYAxisData }) => {
               cx={xScale(item[config.xAxis.dataKey])}
               cy={yScale(item[s])}
               fill={displayArea ? seriesColor : 'transparent'}
-              fillOpacity={transparentArea ? .25 : 1}
+              fillOpacity={transparentArea ? 0.25 : 1}
               style={pointStyles}
-              data-tooltip-html={handleTooltip(item, s)}
+              data-tooltip-html={handleTooltip(item, s, dataIndex)}
               data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
               tabIndex={-1}
             />

package/src/components/Sparkline/components/SparkLine.tsx

@@ -107,10 +107,10 @@ const SparkLine: React.FC<SparkLineProps> = props => {
                   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) => {
+                  {config.labels && data.map((d, dataIndex) => {
                     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'>
+                        <Text 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>
                       </Group>