@cdc/chart 4.25.8 → 4.25.11

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/Regions/components/Regions.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEventHandler, useContext } from 'react'
+import React, { useContext } from 'react'
 import ConfigContext from '../../../ConfigContext'
 import { ChartContext } from '../../../types/ChartContext'
 import { Text } from '@visx/text'
@@ -10,27 +10,10 @@ type RegionsProps = {
   yMax: number
   barWidth?: number
   totalBarsInGroup?: number
-  handleTooltipMouseOff: MouseEventHandler<SVGElement>
-  handleTooltipMouseOver: MouseEventHandler<SVGElement>
-  handleTooltipClick: MouseEventHandler<SVGElement>
-  tooltipData: unknown
-  showTooltip: Function
-  hideTooltip: Function
 }
 
 // TODO: should regions be removed on categorical axis?
-const Regions: React.FC<RegionsProps> = ({
-  xScale,
-  barWidth = 0,
-  totalBarsInGroup = 1,
-  yMax,
-  handleTooltipMouseOff,
-  handleTooltipMouseOver,
-  handleTooltipClick,
-  tooltipData,
-  showTooltip,
-  hideTooltip
-}) => {
+const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGroup = 1, yMax }) => {
   const { parseDate, config } = useContext<ChartContext>(ConfigContext)
 
   const { runtime, regions, visualizationType, orientation, xAxis } = config
@@ -181,11 +164,7 @@ const Regions: React.FC<RegionsProps> = ({
           fill='red'
           className='regions regions-group--line zzz'
           key={region.label}
-          onMouseMove={handleTooltipMouseOver}
-          onMouseLeave={handleTooltipMouseOff}
-          handleTooltipClick={handleTooltipClick}
-          tooltipData={JSON.stringify(tooltipData)}
-          showTooltip={showTooltip}
+          pointerEvents='none'
         >
           <HighlightedArea />
           <Text x={from + width / 2} y={5} fill={region.color} verticalAnchor='start' textAnchor='middle'>

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`}
             >

package/src/components/Sankey/types/index.ts

@@ -1,6 +1,6 @@
 export type Link = { source: string; target: string; value: number; id: string }
 
-export type Data = {
+type Data = {
   links: Link[]
 }
 

package/src/components/ScatterPlot/ScatterPlot.jsx

@@ -1,7 +1,9 @@
-import React, { useContext } from 'react'
+import React, { useContext, useState } from 'react'
 import ConfigContext from '../../ConfigContext'
 import { Group } from '@visx/group'
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 const ScatterPlot = ({ xScale, yScale }) => {
   const {
@@ -10,12 +12,17 @@ const ScatterPlot = ({ xScale, yScale }) => {
     tableData,
     formatNumber,
     seriesHighlight,
-    colorPalettes
+    colorPalettes,
+    colorScale,
+    interactionLabel
   } = useContext(ConfigContext)
 
   // TODO: copied from line chart should probably be a constant somewhere.
   const circleRadii = 4.5
   const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
+
+  // Track current hover for analytics
+  const [currentHover, setCurrentHover] = useState({ dataIndex: null, seriesKey: null })
   // tooltips for additional columns
   const additionalColumns = Object.entries(config.columns)
     .filter(([_, value]) => value.tooltips)
@@ -52,14 +59,14 @@ const ScatterPlot = ({ xScale, yScale }) => {
         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?.customColors ? config.customColors[index] : config.palette ? colorPalettes[config.palette][index] : '#000'
+          const seriesColor = config?.general?.palette?.customColors ? config.general.palette.customColors[index] : colorScale(config.runtime.seriesLabels?.[s] || s)
 
           let pointStyles = {
             filter: 'unset',
             opacity: 1,
             stroke: displayArea ? 'black' : ''
           }
-          if (item[s]==='') {
+          if (item[s] === '') {
             return <> </>
           }
 
@@ -77,6 +84,27 @@ const ScatterPlot = ({ xScale, yScale }) => {
               data-tooltip-html={handleTooltip(item, s, dataIndex)}
               data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
               tabIndex={-1}
+              onMouseEnter={() => {
+                // Track hover analytics event if this is a new hover
+                if ((currentHover.dataIndex !== dataIndex || currentHover.seriesKey !== s)) {
+                  const seriesName = config.runtime.seriesLabels?.[s] || s
+                  const safeSeriesName = String(seriesName).replace(/[^a-zA-Z0-9]/g, '_')
+                  const xAxisValue = item[config.xAxis.dataKey]
+                  const yAxisValue = item[s]
+
+                  publishAnalyticsEvent({
+                    vizType: config?.type,
+                    vizSubType: getVizSubType(config),
+                    eventType: `chart_hover`,
+                    eventAction: 'hover',
+                    eventLabel: interactionLabel || 'unknown',
+                    vizTitle: getVizTitle(config),
+                    series: seriesName,
+                    specifics: `series: ${String(safeSeriesName).toLowerCase()}, ${config.xAxis.dataKey}: ${xAxisValue}, ${s}: ${yAxisValue}`
+                  })
+                  setCurrentHover({ dataIndex, seriesKey: s })
+                }
+              }}
             />
           )
         })