@cdc/chart 4.25.7 → 4.25.10

package/src/components/LineChart/components/LineChart.BumpCircle.tsx

@@ -3,13 +3,14 @@ import { Group } from '@visx/group'
 import { type Column } from '@cdc/core/types/Column'
 import React from 'react'
 import { type ChartConfig } from '../../../types/ChartConfig'
+import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 
 type LineChartBumpCircleProp = {
-    config: ChartConfig, 
-    xScale: any, 
-    yScale: any, 
-    parseDate: any 
-  }
+  config: ChartConfig
+  xScale: any
+  yScale: any
+  parseDate: any
+}
 
 const LineChartBumpCircle = (props: LineChartBumpCircleProp) => {
   const { config, xScale, yScale, parseDate } = props
@@ -33,47 +34,47 @@ const LineChartBumpCircle = (props: LineChartBumpCircleProp) => {
     return xScale.bandwidth ? xScale.bandwidth() / 2 + Number(xValue) : Number(xValue)
   }
 
- 
   const getListItems = dataRow => {
     return Object.values(config.columns)
-    ?.filter(column => column.tooltips).map(column => {
-      const label = column.label || column.name;
-      return `
+      ?.filter(column => column.tooltips)
+      .map(column => {
+        const label = column.label || column.name
+        return `
         <li className='tooltip-body'>
           <strong>${label}</strong>: ${dataRow[column.name]}
-        </li>`; 
-    })
-    .join(' ');
-  }  
+        </li>`
+      })
+      .join(' ')
+  }
 
   const getTooltip = dataRow => `<ul> ${getListItems(dataRow)} </ul>`
 
-  const circles = config.runtime?.series.map((series) => {
+  const circles = config.runtime?.series.map(series => {
     return config.data.map((d, dataIndex) => {
       let series_dataKey = d[series.dataKey]
       let axis_dataKey = d[config.xAxis.dataKey]
       return (
         <React.Fragment key={`bump-circle-${series_dataKey}-${dataIndex}`}>
-          <Group left={Number(config.runtime.yAxis.size)}> 
+          <Group left={Number(config.runtime.yAxis.size)}>
             {series_dataKey && (
               <>
-                <circle 
+                <circle
                   key={`bump-circle-${series_dataKey}-${dataIndex}`}
-                  data-tooltip-html={getTooltip(d)} 
-                  data-tooltip-id={`bump-chart`} 
-                  r={10} 
-                  cx={Number(checkBandScale(xScale(handleX(axis_dataKey))))} 
-                  cy={Number(yScale(series_dataKey))} 
-                  stroke='#CACACA' 
-                  strokeWidth={1} 
-                  fill='#E5E4E2' 
+                  data-tooltip-html={getTooltip(d)}
+                  data-tooltip-id={`bump-chart`}
+                  r={10}
+                  cx={Number(checkBandScale(xScale(handleX(axis_dataKey))))}
+                  cy={Number(yScale(series_dataKey))}
+                  stroke='#CACACA'
+                  strokeWidth={1}
+                  fill='#E5E4E2'
                 />
                 {series_dataKey.toString().length === 2 ? (
                   // prettier-ignore
                   <text
                   x={Number(checkBandScale(xScale(handleX(axis_dataKey)))) - 7}
                   y={Number(yScale(series_dataKey)) + 4}
-                  fill='#000000'
+                  fill={APP_FONT_COLOR}
                   fontSize={11.5}
                   >
                   {series_dataKey}
@@ -83,7 +84,7 @@ const LineChartBumpCircle = (props: LineChartBumpCircleProp) => {
                   <text
                   x={Number(checkBandScale(xScale(handleX(axis_dataKey)))) - 4}
                   y={Number(yScale(series_dataKey)) + 4}
-                  fill='#000000'
+                  fill={APP_FONT_COLOR}
                   fontSize={11.5}
                   >
                   {series_dataKey}

package/src/components/LineChart/components/LineChart.Circle.tsx

@@ -105,7 +105,7 @@ const LineChartCircle = (props: LineChartCircleProps) => {
       <g
         transform={transformShape(pointData[config.xAxis.dataKey], pointData[filtered?.dataKey])}
         className={`visx-glyph-group${displayArea ? '' : '-hidden'}`}
-        data-seriesIndex={seriesIndex}
+        data-seriesindex={seriesIndex}
       >
         <Shape
           fillOpacity={mode === 'ALWAYS_SHOW_POINTS' ? 1 : 0}
@@ -142,7 +142,7 @@ const LineChartCircle = (props: LineChartCircleProps) => {
         <g
           transform={transformShape(pointData[config.xAxis?.dataKey], pointData[filtered?.dataKey])}
           className={`visx-glyph-group${displayArea ? '' : '-hidden'}`}
-          data-seriesIndex={seriesIndex}
+          data-seriesindex={seriesIndex}
         >
           <Shape size={dotSize} stroke={color} fill={color} />
         </g>

package/src/components/LineChart/index.tsx

@@ -228,10 +228,10 @@ const LineChart = (props: LineChartProps) => {
                   />
 
                   {suppressedSegments.map((segment, index) => {
-                    return Object.entries(segment.data).map(([key, value]) => {
+                    return Object.entries(segment.data).map(([key, value], entryIndex) => {
                       return (
                         <LinePath
-                          key={index}
+                          key={`${index}-${key}-${entryIndex}`}
                           data={value}
                           x={d => xPos(d)}
                           y={d =>

package/src/components/LinearChart.tsx

@@ -5,6 +5,7 @@ import { AxisLeft, AxisBottom, AxisRight, AxisTop } from '@visx/axis'
 import { Group } from '@visx/group'
 import { Line, Bar } from '@visx/shape'
 import { Tooltip as ReactTooltip } from 'react-tooltip'
+import 'react-tooltip/dist/react-tooltip.css'
 import { Text } from '@visx/text'
 import { useTooltip, TooltipWithBounds } from '@visx/tooltip'
 import _ from 'lodash'
@@ -29,7 +30,7 @@ import CategoricalYAxis from './Axis/Categorical.Axis'
 import BrushChart from './Brush/BrushController'
 
 // Helpers
-import { isLegendWrapViewport, isMobileHeightViewport } from '@cdc/core/helpers/viewports'
+import { isLegendWrapViewport, isMobileFontViewport } from '@cdc/core/helpers/viewports'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 import { calcInitialHeight, handleAutoPaddingRight } from '../helpers/sizeHelpers'
 import { filterAndShiftLinearDateTicks } from '../helpers/filterAndShiftLinearDateTicks'
@@ -42,6 +43,7 @@ import useScales, { getTickValues } from '../hooks/useScales'
 
 import getTopAxis from '../helpers/getTopAxis'
 import { useTooltip as useCoveTooltip } from '../hooks/useTooltip'
+import { useChartHoverAnalytics } from '../hooks/useChartHoverAnalytics'
 import { useEditorPermissions } from './EditorPanel/useEditorPermissions'
 import Annotation from './Annotations'
 import { BlurStrokeText } from '@cdc/core/components/BlurStrokeText'
@@ -90,6 +92,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     handleChartAriaLabels,
     handleLineType,
     handleDragStateChange,
+    interactionLabel,
     isDraggingAnnotation,
     legendRef,
     parseDate,
@@ -97,7 +100,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     tableData,
     transformedData: data,
     seriesHighlight,
-    
+
   } = useContext(ConfigContext)
 
   // CONFIG
@@ -154,8 +157,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const labelsOverflow = inlineLabel && !inlineLabelHasNoSpace
   const padding = orientation === 'horizontal' ? Number(config.xAxis.size) : Number(config.yAxis.size)
   const yLabelOffset = isNaN(parseInt(`${runtime.yAxis.labelOffset}`)) ? 0 : parseInt(`${runtime.yAxis.labelOffset}`)
-  const tickLabelFontSize = isMobileHeightViewport(currentViewport) ? TICK_LABEL_FONT_SIZE_SMALL : TICK_LABEL_FONT_SIZE
-  const axisLabelFontSize = isMobileHeightViewport(currentViewport) ? AXIS_LABEL_FONT_SIZE_SMALL : AXIS_LABEL_FONT_SIZE
+  const tickLabelFontSize = isMobileFontViewport(currentViewport) ? TICK_LABEL_FONT_SIZE_SMALL : TICK_LABEL_FONT_SIZE
+  const axisLabelFontSize = isMobileFontViewport(currentViewport) ? AXIS_LABEL_FONT_SIZE_SMALL : AXIS_LABEL_FONT_SIZE
   const GET_TEXT_WIDTH_FONT = `normal ${tickLabelFontSize}px Nunito, sans-serif`
 
   // zero if not forest plot
@@ -204,7 +207,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const xMax = width - runtime.yAxis.size - (visualizationType === 'Combo' ? config.yAxis.rightAxisSize : 0)
   const yMax = initialHeight + forestRowsHeight
 
-  const isNoDataAvailable = config.filters && config.filters.values.length === 0 && data.length === 0
+  const isNoDataAvailable = config.filters?.length > 0 && data.length === 0
 
   const getXAxisData = d =>
     isDateScale(config.runtime.xAxis)
@@ -268,8 +271,16 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     yScale,
     seriesScale,
     showTooltip,
-    hideTooltip
+    hideTooltip,
+    interactionLabel
+  })
+
+  // Analytics tracking for chart hover
+  const { handleChartMouseEnter, handleChartMouseLeave } = useChartHoverAnalytics({
+    config,
+    interactionLabel
   })
+
   // get the number of months between the first and last date
   const { dataKey } = runtime.xAxis
   const dateSpanMonths =
@@ -678,8 +689,14 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           role='img'
           aria-label={handleChartAriaLabels(config)}
           style={{ overflow: 'visible' }}
-          onMouseLeave={() => setShowHoverLine(false)}
-          onMouseEnter={() => setShowHoverLine(true)}
+          onMouseLeave={() => {
+            setShowHoverLine(false)
+            handleChartMouseLeave()
+          }}
+          onMouseEnter={() => {
+            setShowHoverLine(true)
+            handleChartMouseEnter()
+          }}
         >
           {!isDraggingAnnotation && <Bar width={parentWidth} height={initialHeight} fill={'transparent'}></Bar>}{' '}
           {/* GRID LINES */}
@@ -1403,7 +1420,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                   : yMax
               }
               left={config.visualizationType !== 'Forest Plot' ? Number(runtime.yAxis.size) : 0}
-              label={config[section].label}
+              label={runtime[section].label}
               tickFormat={handleBottomTickFormatting}
               scale={xScale}
               stroke='#333'

package/src/components/PairedBarChart.jsx

@@ -113,7 +113,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                 const textFits = textWidth < barWidth - 5 // minus padding dx(5)
 
                 return (
-                  <>
+                  <React.Fragment key={`fragment-group1-${groupOne.dataKey}-${index}`}>
                     <Group key={`group-${groupOne.dataKey}-${d[config.xAxis.dataKey]}`} className='horizontal'>
                       <Bar
                         id={`bar-${groupOne.dataKey}-${d[config.dataDescription?.xKey]}`}
@@ -124,6 +124,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                         width={xScale(d[config.series[0].dataKey])}
                         height={barHeight}
                         fill={groupOne.color}
+                        onMouseEnter={() => {}}
                         data-tooltip-html={dataTipOne(d)}
                         data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
                         stroke='#333'
@@ -145,7 +146,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                         </Text>
                       )}
                     </Group>
-                  </>
+                  </React.Fragment>
                 )
               })}
             {data
@@ -171,7 +172,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                 const isTextFits = textWidth < barWidth - 5 // minus padding dx(5)
 
                 return (
-                  <>
+                  <React.Fragment key={`fragment-group2-${groupTwo.dataKey}-${index}`}>
                     <style>
                       {`
                       .bar-${groupTwo.dataKey}-${d[config.xAxis.dataKey]} {
@@ -189,6 +190,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                         width={xScale(d[config.series[1].dataKey])}
                         height={barHeight}
                         fill={groupTwo.color}
+                        onMouseEnter={() => {}}
                         data-tooltip-html={dataTipTwo(d)}
                         data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
                         strokeWidth={borderWidth}
@@ -210,7 +212,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                         </Text>
                       )}
                     </Group>
-                  </>
+                  </React.Fragment>
                 )
               })}
           </Group>

package/src/components/PieChart/PieChart.tsx

@@ -7,10 +7,18 @@ import { Group } from '@visx/group'
 import { Text } from '@visx/text'
 import { useTooltip, TooltipWithBounds } from '@visx/tooltip'
 import { colorPalettesChart as colorPalettes } from '@cdc/core/data/colorPalettes'
+import { getPaletteColors } from '@cdc/core/helpers/palettes/utils'
+import { getColorPaletteVersion } from '@cdc/core/helpers/getColorPaletteVersion'
+import {
+  v2ColorDistribution,
+  divergentColorDistribution,
+  colorblindColorDistribution
+} from '@cdc/core/helpers/palettes/colorDistributions'
 
 // cove
-import ConfigContext from '../../ConfigContext'
+import ConfigContext, { ChartDispatchContext } from '../../ConfigContext'
 import { useTooltip as useCoveTooltip } from '../../hooks/useTooltip'
+import { useChartHoverAnalytics } from '../../hooks/useChartHoverAnalytics'
 import useIntersectionObserver from '../../hooks/useIntersectionObserver'
 import { handleChartAriaLabels } from '../../helpers/handleChartAriaLabels'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
@@ -25,7 +33,14 @@ type TooltipData = {
   dataYPosition: number
 }
 
-const PieChart = props => {
+type PieChartProps = {
+  parentWidth?: number
+  parentHeight?: number
+  interactionLabel?: string
+}
+
+const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) => {
+  const { interactionLabel = '' } = props
   const {
     transformedData: data,
     config,
@@ -34,13 +49,22 @@ const PieChart = props => {
     seriesHighlight,
     isDraggingAnnotation
   } = useContext(ConfigContext)
+  const dispatch = useContext(ChartDispatchContext)
   const { tooltipData, showTooltip, hideTooltip, tooltipOpen, tooltipLeft, tooltipTop } = useTooltip<TooltipData>()
   const { handleTooltipMouseOver, handleTooltipMouseOff, TooltipListItem } = useCoveTooltip({
     xScale: false,
     yScale: false,
     showTooltip,
-    hideTooltip
+    hideTooltip,
+    interactionLabel
+  })
+
+  // Analytics tracking for chart hover
+  const { handleChartMouseEnter, handleChartMouseLeave } = useChartHoverAnalytics({
+    config,
+    interactionLabel
   })
+
   const [filteredData, setFilteredData] = useState(undefined)
   const [animatedPie, setAnimatePie] = useState(false)
   const pivotColumns = Object.values(config.columns).filter(column => column.showInViz)
@@ -90,42 +114,100 @@ const PieChart = props => {
     }
 
     return baseData
-  }, [data, dataNeedsPivot, showPercentage, config])
+  }, [
+    data,
+    dataNeedsPivot,
+    showPercentage,
+    config.yAxis.dataKey,
+    config.xAxis.dataKey,
+    config.runtime.yAxis.dataKey,
+    config.runtime.xAxis.dataKey
+  ])
+
+  // Helper function to determine enhanced distribution type and apply it
+  const applyEnhancedColorDistribution = (config, palette, numberOfKeys) => {
+    const version = getColorPaletteVersion(config)
+    const configPalette = config.general?.palette?.name || config.palette
+
+    // Skip enhanced distribution if not v2, too many keys, or wrong palette length
+    if (version !== 2 || numberOfKeys > 9 || palette.length !== 9) {
+      return palette.slice(0, numberOfKeys)
+    }
+
+    const isSequential = configPalette && configPalette.includes('sequential')
+    const isDivergent = configPalette && configPalette.includes('divergent')
+    const isColorblindSafe =
+      configPalette && (configPalette.includes('colorblindsafe') || configPalette.includes('qualitative_standard'))
+
+    // Determine which distribution to use based on palette type
+    let distributionMap = null
+    if (isDivergent) {
+      distributionMap = divergentColorDistribution
+    } else if (isColorblindSafe) {
+      distributionMap = colorblindColorDistribution
+    } else if (isSequential) {
+      distributionMap = v2ColorDistribution
+    }
+
+    if (distributionMap && distributionMap[numberOfKeys]) {
+      const distributionIndices = distributionMap[numberOfKeys]
+      return distributionIndices.map((index: number) => palette[index])
+    }
+
+    return palette.slice(0, numberOfKeys)
+  }
+
+  // Helper function to extract keys from data
+  const extractDataKeys = (data, dataKey) => {
+    const keys = {}
+    data.forEach(d => {
+      if (!keys[d[dataKey]]) keys[d[dataKey]] = true
+    })
+    return Object.keys(keys)
+  }
+
+  // Helper function to create color scale for pie charts
+  const createPieColorScale = (data, config, isPercentageMode = false, labelForCalcArea = null) => {
+    const dataKeys = extractDataKeys(data, config.xAxis.dataKey)
+    const domainKeys = isPercentageMode ? dataKeys.filter(k => k !== labelForCalcArea) : dataKeys
+    const numberOfKeys = domainKeys.length
+
+    let palette = getPaletteColors(config, colorPalettes)
+    palette = applyEnhancedColorDistribution(config, palette, numberOfKeys)
+
+    const unknownColor = isPercentageMode
+      ? getComputedStyle(document.documentElement).getPropertyValue('--cool-gray-10').trim()
+      : null
+
+    return scaleOrdinal({
+      domain: domainKeys,
+      range: palette,
+      unknown: unknownColor
+    })
+  }
 
   const _colorScale = useMemo(() => {
+    // Always use the full _data for color scale to ensure legend shows all items
     if (dataNeedsPivot) {
-      const keys = {}
-      _data.forEach(d => {
-        if (!keys[d[config.xAxis.dataKey]]) keys[d[config.xAxis.dataKey]] = true
-      })
-      const numberOfKeys = Object.entries(keys).length
-      let palette = config.customColors || colorPalettes[config.palette]
-      palette = palette.slice(0, numberOfKeys)
-      return scaleOrdinal({
-        domain: Object.keys(keys),
-        range: palette,
-        unknown: null
-      })
+      return createPieColorScale(_data, config)
     }
 
     if (showPercentage) {
-      const keys = {}
-      _data.forEach(d => {
-        keys[d[config.xAxis.dataKey]] = true
-      })
-      // take out Calculated Area so it falls back to `unknown`
-      const domainKeys = Object.keys(keys).filter(k => k !== labelForCalcArea)
-
-      const basePalette = (config.customColors || colorPalettes[config.palette]).slice(0, domainKeys.length)
-      const COOL_GRAY_90 = getComputedStyle(document.documentElement).getPropertyValue('--cool-gray-10').trim()
-      return scaleOrdinal({
-        domain: domainKeys,
-        range: basePalette,
-        unknown: COOL_GRAY_90
-      })
+      return createPieColorScale(_data, config, true, labelForCalcArea)
     }
-    return colorScale
-  }, [_data, dataNeedsPivot, colorScale])
+
+    // Handle normal pie chart case
+    return createPieColorScale(_data, config)
+  }, [
+    _data,
+    dataNeedsPivot,
+    showPercentage,
+    config.xAxis.dataKey,
+    config.general?.palette?.name,
+    config.general?.palette?.isReversed,
+    config.general?.palette?.customColors,
+    config.palette
+  ])
 
   const triggerRef = useRef()
   const dataRef = useIntersectionObserver(triggerRef, {
@@ -137,9 +219,9 @@ const PieChart = props => {
     const element = document.querySelector('.isEditor')
     if (element) {
       // parent element is visible
-      setAnimatePie(prevState => true)
+      setAnimatePie(true)
     }
-  })
+  }, [])
 
   useEffect(() => {
     if (dataRef?.isIntersecting && config.animate && !animatedPie) {
@@ -178,14 +260,22 @@ const PieChart = props => {
         roundedPercentage = '**'
       }
 
+      // Determine if this slice should be muted based on legend behavior
+      const isHighlighted =
+        seriesHighlight.length === 0 || seriesHighlight.indexOf(arc.data[config.runtime.xAxis.dataKey]) !== -1
+      const shouldMute = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && !isHighlighted
+      const sliceOpacity = shouldMute ? 0.3 : 1
+      const textOpacity = shouldMute ? 0.3 : 1
+
       return (
         <Group key={key} className={`slice-${key}`}>
           {/* ── the slice */}
           <animated.path
-            d={to([styles.startAngle, styles.endAngle], (start, end) =>
+            d={to([styles.startAngle, styles.endAngle], (start: number, end: number) =>
               path({ ...arc, startAngle: start, endAngle: end })
             )}
             fill={colorScale(key)}
+            opacity={sliceOpacity}
             onMouseEnter={e =>
               onHover(e, {
                 data: arc.data,
@@ -201,7 +291,7 @@ const PieChart = props => {
           {/* ── the percentage label */}
           {arc.endAngle - arc.startAngle > 0.1 && (
             <animated.text
-              transform={to([styles.startAngle, styles.endAngle], (start, end) => {
+              transform={to([styles.startAngle, styles.endAngle], (start: number, end: number) => {
                 const [x, y] = path.centroid({
                   ...arc,
                   startAngle: start,
@@ -212,6 +302,7 @@ const PieChart = props => {
               textAnchor='middle'
               pointerEvents='none'
               fill={textColor}
+              opacity={textOpacity}
             >
               {/** compute text inside the spring callback */}
               {roundedPercentage}
@@ -252,6 +343,27 @@ const PieChart = props => {
     }
   }, [seriesHighlight]) // eslint-disable-line
 
+  // Update the context colorScale when the pie chart's colorScale changes
+  // This ensures the Legend component uses the same colors as the pie chart
+  const prevColorScaleRef = useRef<{ domain: string; range: string } | null>(null)
+
+  useEffect(() => {
+    if (_colorScale && config.visualizationType === 'Pie') {
+      // Only dispatch if the domain or range has actually changed
+      const currentDomain = JSON.stringify(_colorScale.domain())
+      const currentRange = JSON.stringify(_colorScale.range())
+      const colorScaleKey = `${currentDomain}|${currentRange}`
+      const prevKey = prevColorScaleRef.current
+        ? `${prevColorScaleRef.current.domain}|${prevColorScaleRef.current.range}`
+        : null
+
+      if (colorScaleKey !== prevKey) {
+        prevColorScaleRef.current = { domain: currentDomain, range: currentRange }
+        dispatch({ type: 'SET_COLOR_SCALE', payload: _colorScale })
+      }
+    }
+  }, [_colorScale, config.visualizationType, dispatch])
+
   const getSvgClasses = () => {
     let classes = ['animated-pie', 'group']
     if (config.animate === false || animatedPie) {
@@ -269,26 +381,31 @@ const PieChart = props => {
           className={getSvgClasses()}
           role='img'
           aria-label={handleChartAriaLabels(config)}
+          onMouseEnter={handleChartMouseEnter}
+          onMouseLeave={() => {
+            handleTooltipMouseOff()
+            handleChartMouseLeave()
+          }}
         >
           <Group top={centerY} left={radius}>
             {/* prettier-ignore */}
             <Pie
-            data={filteredData || _data}
-            pieValue={d => parseFloat(d[pivotKey || config.runtime.yAxis.dataKey])}
-            pieSortValues={() => -1}
-            innerRadius={radius - donutThickness}
-            outerRadius={radius}
-          >
-           {pie => (
-             <AnimatedPie
-             {...pie}
-              getKey={d => d.data[config.runtime.xAxis.dataKey]}
-              colorScale={_colorScale}
-              onHover={handleTooltipMouseOver}
-               onLeave={handleTooltipMouseOff}
-           />
-            )}
-          </Pie>
+              data={filteredData || _data}
+              pieValue={d => parseFloat(d[pivotKey || config.runtime.yAxis.dataKey])}
+              pieSortValues={() => -1}
+              innerRadius={radius - donutThickness}
+              outerRadius={radius}
+            >
+              {pie => (
+                <AnimatedPie
+                  {...pie}
+                  getKey={d => d.data[config.runtime.xAxis.dataKey]}
+                  colorScale={_colorScale}
+                  onHover={handleTooltipMouseOver}
+                  onLeave={handleTooltipMouseOff}
+                />
+              )}
+            </Pie>
           </Group>
         </svg>
         <div ref={triggerRef} />
@@ -304,7 +421,6 @@ const PieChart = props => {
                 config.tooltips.opacity / 100
               }) !important`}</style>
               <TooltipWithBounds
-                key={Math.random()}
                 className={'tooltip cdc-open-viz-module'}
                 left={tooltipLeft + centerX - radius}
                 top={tooltipTop}
@@ -319,6 +435,6 @@ const PieChart = props => {
       </ErrorBoundary>
     </>
   )
-}
+})
 
 export default PieChart

package/src/components/Sankey/components/Sankey.tsx

@@ -9,7 +9,7 @@ import { Text } from '@visx/text'
 // Cdc
 import './../sankey.scss'
 import 'react-tooltip/dist/react-tooltip.css'
-import ConfigContext from '@cdc/chart/src/ConfigContext'
+import ConfigContext from '../../../ConfigContext'
 import type { ChartContext } from '../../../types/ChartContext'
 import type { SankeyNode, SankeyProps } from '../types'
 import useSankeyAlert from '../useSankeyAlert'
@@ -171,6 +171,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
           fill={nodeColor}
           fillOpacity={opacityValue}
           rx={sankeyConfig.rxValue}
+          onMouseEnter={() => {}}
           // todo: move enable tooltips to sankey
           data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
           data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
@@ -204,6 +205,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               className='node-text'
               style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
               onClick={() => handleNodeClick(node.id)}
+              onMouseEnter={() => {}}
               data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
               data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
             >
@@ -220,6 +222,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               textAnchor='start'
               style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
               onClick={() => handleNodeClick(node.id)}
+              onMouseEnter={() => {}}
               data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
               data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
             >
@@ -237,6 +240,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               verticalAnchor='start'
               style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
               onClick={() => handleNodeClick(node.id)}
+              onMouseEnter={() => {}}
               data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
               data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
             >
@@ -248,6 +252,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
             <Text
               style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
               onClick={() => handleNodeClick(node.id)}
+              onMouseEnter={() => {}}
               data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
               data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
               x={node.x0! + textPositionHorizontal}
@@ -270,6 +275,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               textAnchor='start'
               style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
               onClick={() => handleNodeClick(node.id)}
+              onMouseEnter={() => {}}
               data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
               data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
             >