@cdc/chart 4.25.7 → 4.25.10

package/src/hooks/useTooltip.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react'
+import { useContext, useRef } from 'react'
 // Local imports
 import parse from 'html-react-parser'
 import ConfigContext from '../ConfigContext'
@@ -8,10 +8,12 @@ import { isDateScale } from '@cdc/core/helpers/cove/date'
 // Third-party library imports
 import { localPoint } from '@visx/event'
 import { bisector } from 'd3-array'
-import _ from 'lodash'
+import _, { get } from 'lodash'
 import { getHorizontalBarHeights } from '../components/BarChart/helpers/getBarHeights'
 
 export const useTooltip = props => {
+  // Track the last X-axis value to prevent duplicate analytics events
+  const lastAnalyticsXValue = useRef<string | number | null>(null)
   const {
     tableData: data,
     config,
@@ -23,7 +25,7 @@ export const useTooltip = props => {
     setSharedFilter,
     isDraggingAnnotation
   } = useContext<ChartContext>(ConfigContext)
-  const { xScale, yScale, seriesScale, showTooltip, hideTooltip } = props
+  const { xScale, yScale, seriesScale, showTooltip, hideTooltip, interactionLabel = '' } = props
   const { xAxis, visualizationType, orientation, yAxis, runtime } = config
 
   const Y_AXIS_SIZE = Number(config.yAxis.size || 0)
@@ -84,6 +86,7 @@ export const useTooltip = props => {
 
     const resolvedScaleValues = getResolvedScaleValues([x, y])
     const singleSeriesValue = getYValueFromCoordinate(y, resolvedScaleValues)
+
     const columnsWithTooltips = []
     const tooltipItems = [] as any[][]
     for (const [colKey, column] of Object.entries(config.columns)) {
@@ -154,6 +157,10 @@ export const useTooltip = props => {
         return position
       }
       if (!config.tooltips.singleSeries || visualizationType === 'Line') {
+        // Collect analytics data for all series
+        const analyticsSeriesData: string[] = []
+        let xAxisValue: string | number | null = null
+
         tooltipItems.push(
           ...getIncludedTooltipSeries()
             ?.filter(seriesKey => {
@@ -168,6 +175,7 @@ export const useTooltip = props => {
               const seriesObjWithName = config.runtime.series.find(
                 series => series.dataKey === seriesKey && series.name !== undefined
               )
+
               if (
                 (value === null || value === undefined || value === '' || formattedValue === 'N/A') &&
                 config.general.hideNullValue
@@ -181,6 +189,29 @@ export const useTooltip = props => {
             })
         )
 
+        // Publish a single analytics event with all tooltip data
+        // Only publish if the X-axis value has changed (different from last hover)
+        if (analyticsSeriesData.length > 0 && xAxisValue !== lastAnalyticsXValue.current) {
+          lastAnalyticsXValue.current = xAxisValue
+
+          // Extract series names for the series field
+          const seriesNames = analyticsSeriesData.map(item => item.split(':')[0].trim()).join(', ')
+
+          const specifics = xAxisValue
+            ? `series: ${seriesNames}, x: ${xAxisValue}, ${analyticsSeriesData.join(', ')}`
+            : `series: ${seriesNames}, ${analyticsSeriesData.join(', ')}`
+
+          publishAnalyticsEvent({
+            vizType: config?.type,
+            vizSubType: getVizSubType(config),
+            eventType: `chart_hover`,
+            eventAction: 'hover',
+            eventLabel: interactionLabel || 'unknown',
+            vizTitle: getVizTitle(config),
+            specifics
+          })
+        }
+
         const runtimeSeries =
           config.tooltips.singleSeries && visualizationType === 'Line'
             ? [_.find(config.runtime.series, d => d.dataKey === singleSeriesValue)]
@@ -239,6 +270,9 @@ export const useTooltip = props => {
    * @returns {void} - The tooltip information is hidden
    */
   const handleTooltipMouseOff = () => {
+    // Reset the analytics tracking when mouse leaves
+    lastAnalyticsXValue.current = null
+
     if (config.visualizationType === 'Area Chart') {
       setTimeout(() => {
         hideTooltip()
@@ -571,18 +605,26 @@ export const useTooltip = props => {
 
     // TOOLTIP BODY
     // handle suppressed tooltip items
-    const { label, displayGray } =
-      (config.visualizationSubType !== 'stacked' &&
-        config.general.showSuppressedSymbol &&
-        config.preliminaryData?.find(
-          pd =>
-            pd.label &&
-            pd.type === 'suppression' &&
-            pd.displayTooltip &&
-            value === pd.value &&
-            (!pd.column || key === pd.column)
-        )) ||
-      {}
+    const shouldCheckSuppression = config.visualizationSubType !== 'stacked'
+    let suppressionEntry
+    if (shouldCheckSuppression && config.preliminaryData) {
+      suppressionEntry = config.preliminaryData.find(
+        pd =>
+          pd.label &&
+          pd.type === 'suppression' &&
+          pd.displayTooltip &&
+          value === pd.value &&
+          (!pd.column || key === pd.column)
+      )
+    }
+
+    // Remove suppressed items entirely if not showing symbols
+    if (suppressionEntry && !config.general.showSuppressedSymbol) {
+      return null
+    }
+
+    const { label, displayGray } = suppressionEntry || {}
+
     let newValue = label || value
     const style = displayGray ? { color: '#8b8b8a' } : {}
 
@@ -594,7 +636,7 @@ export const useTooltip = props => {
 
     return (
       <li style={style} className='tooltip-body mb-1'>
-        {parse(displayText)}
+        {displayText !== undefined ? parse(String(displayText)) : displayText}
       </li>
     )
   }

package/src/index.jsx

@@ -1,9 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 
-import './coreStyles_chart.scss'
 import '@cdc/core/styles/cove-main.scss'
-import 'react-tooltip/dist/react-tooltip.css'
 
 import CdcChart from './CdcChart'
 
@@ -14,6 +12,11 @@ let domContainer = document.getElementsByClassName('react-container')[0]
 
 ReactDOM.createRoot(domContainer).render(
   <React.StrictMode>
-    <CdcChart configUrl={domContainer.attributes['data-config'].value} isEditor={isEditor} isDebug={isDebug} />
+    <CdcChart
+      interactionLabel={domContainer.attributes['data-config']?.value}
+      configUrl={domContainer.attributes['data-config'].value}
+      isEditor={isEditor}
+      isDebug={isDebug}
+    />
   </React.StrictMode>
 )

package/src/scss/main.scss

@@ -741,3 +741,15 @@
 .cdc-open-viz-module .debug {
   border: 2px solid red;
 }
+
+// Pattern Legend Styles - using Bootstrap classes for layout, CSS for gaps only
+.legend-patterns {
+  gap: var(--space-between-legend-item-rows);
+  margin-top: var(--space-between-legend-item-rows);
+
+  // When in row layout (top/bottom), override gap for proper row/column spacing
+  &.flex-row {
+    row-gap: var(--space-between-legend-item-rows);
+    column-gap: var(--space-between-legend-item-columns);
+  }
+}

package/src/store/chart.reducer.ts

@@ -25,7 +25,7 @@ export const getInitialState = (configObj: ChartConfig): ChartState => {
   return {
     isLoading: true,
     config: defaults,
-    stateData: _.cloneDeep(configObj?.data) || [],
+    stateData: configObj?.data || [],
     colorScale: null,
     excludedData: undefined,
     filteredData: undefined,

package/src/test/CdcChart.test.jsx

@@ -1,6 +1,11 @@
-// Placeholder test until we add them in.
+import path from 'path'
+import { testStandaloneBuild } from '@cdc/core/helpers/tests/testStandaloneBuild.ts'
+import { describe, it, expect } from 'vitest'
+
 describe('Chart', () => {
-  it('has a test.', async () => {
-    return true
+  it('Can be built in isolation', async () => {
+    const pkgDir = path.join(__dirname, '..')
+    const result = testStandaloneBuild(pkgDir)
+    expect(result).toBe(true)
   })
 })

package/src/types/ChartConfig.ts

@@ -1,4 +1,5 @@
 import { Axis } from '@cdc/core/types/Axis'
+import { MarkupConfig } from '@cdc/core/types/MarkupVariable'
 import { type ForestPlotConfigSettings } from './ForestPlot'
 import { type Column } from '@cdc/core/types/Column'
 import { type Series } from '@cdc/core/types/Series'
@@ -6,7 +7,17 @@ import { Runtime } from '@cdc/core/types/Runtime'
 import { FilterBehavior } from '@cdc/core/types/FilterBehavior'
 import { Table } from '@cdc/core/types/Table'
 import { BoxPlot } from '@cdc/core/types/BoxPlot'
-import { General } from '@cdc/core/types/General'
+import { General as CoreGeneral } from '@cdc/core/types/General'
+
+// Extend the core General type to include palette information for charts
+export type General = CoreGeneral & {
+  palette?: {
+    name?: string
+    version?: string
+    isReversed?: boolean
+    customColors?: string[]
+  }
+}
 import { type Link } from './../components/Sankey/types'
 import { type DataDescription } from '@cdc/core/types/DataDescription'
 import { type Legend as CoreLegend } from '@cdc/core/types/Legend'
@@ -96,6 +107,17 @@ export type Legend = CoreLegend & {
   }
   groupBy: string
   separators?: string
+  patterns?: {
+    [key: string]: {
+      label?: string
+      color?: string
+      shape?: string
+      dataKey?: string
+      dataValue?: string
+      contrastCheck?: boolean
+      patternSize?: number
+    }
+  }
 }
 
 type Visual = {
@@ -125,7 +147,6 @@ export type AllChartsConfig = {
   colorMatchLineSeriesLabels: boolean
   columns: ChartColumns
   confidenceKeys: ConfidenceInterval
-  customColors: string[]
   data: Object[]
   dataUrl: string
   dataCutoff: number
@@ -225,12 +246,13 @@ export type AllChartsConfig = {
       default: string
     }
   }
-}
+} & MarkupConfig
 
 export type ForestPlotConfig = {
   visualizationType: 'Forest Plot'
   forestPlot: ForestPlotConfigSettings
-} & AllChartsConfig
+} & AllChartsConfig &
+  MarkupConfig
 
 export type LineChartConfig = {
   allowLineToBarGraph: boolean
@@ -238,7 +260,8 @@ export type LineChartConfig = {
   isolatedDotsSameSize: boolean
   lineDatapointStyle: 'hidden' | 'always show' | 'hover'
   visualizationType: 'Line'
-} & AllChartsConfig
+} & AllChartsConfig &
+  MarkupConfig
 
 export type SankeyLink = {
   depth: number
@@ -279,6 +302,7 @@ export type SankeyChartConfig = {
     }
   ]
   visualizationType: 'Sankey'
-} & AllChartsConfig
+} & AllChartsConfig &
+  MarkupConfig
 
 export type ChartConfig = SankeyChartConfig | LineChartConfig | ForestPlotConfig | AllChartsConfig

package/src/types/ChartContext.ts

@@ -23,6 +23,7 @@ type SharedChartContext = {
   handleDragStateChange: (isDragging: any) => void
   highlight?: Function
   handleShowAll?: Function
+  interactionLabel?: string
   // whether or not the chart is viewed within the editor screen
   isEditor?: boolean
   // whether or not the user is dragging an annotation

package/vite.config.js

@@ -1,4 +1,4 @@
-import GenerateViteConfig from '../../generateViteConfig.js'
+import GenerateViteConfig from '@cdc/core/generateViteConfig.js'
 import { moduleName } from './package.json'
 
 export default GenerateViteConfig(moduleName)

package/vitest.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['../../vitest.setup.ts'],
+    exclude: [
+      '**/node_modules/**',
+      '**/dist/**',
+      '**/.storybook/**',
+      '**/*.stories.*',
+      '**/storybook-static/**'
+    ]
+  }
+})

package/src/coreStyles_chart.scss

@@ -1,3 +0,0 @@
-@import '@cdc/core/styles/base';
-@import '@cdc/core/styles/heading-colors';
-@import '@cdc/core/styles/v2/themes/color-definitions';

package/src/helpers/configHelpers.ts

@@ -1,28 +0,0 @@
-import { cloneDeep } from 'lodash'
-import { ChartConfig } from '../types/ChartConfig'
-
-/* editConfigKeys
- * Add edit or update config keys
- * keyUpdates: { path: string[], value: any }[]
- * path is the array of keys needed to reach the value to be updated
- * value is the new value to be set
- * if the key does not exist, it will be created
- */
-export function editConfigKeys(config: ChartConfig, keyUpdates: { path: string[]; value: any }[]): ChartConfig {
-  const configDeepCopy = cloneDeep(config)
-
-  const newConfig = keyUpdates.reduce((acc, { path, value }) => {
-    const pathCopy = [...path]
-    const lastKey = pathCopy.pop()
-    const target = pathCopy.reduce((target, key) => {
-      if (!target[key]) {
-        target[key] = {}
-      }
-      return target[key]
-    }, acc)
-    target[lastKey] = value
-    return acc
-  }, configDeepCopy)
-
-  return newConfig
-}

package/src/helpers/generateColorsArray.ts

@@ -1,8 +0,0 @@
-import chroma from 'chroma-js'
-
-export const generateColorsArray = (color = '#000000', special = false) => {
-  let colorObj = chroma(color)
-  let hoverColor = special ? colorObj.brighten(0.5).hex() : colorObj.saturate(1.3).hex()
-
-  return [color, hoverColor, colorObj.darken(0.3).hex()]
-}

package/src/hooks/useColorPalette.js

@@ -1,76 +0,0 @@
-import { colorPalettesChart, twoColorPalette } from '@cdc/core/data/colorPalettes'
-import { useEffect } from 'react'
-
-export const useColorPalette = (config, updateConfig) => {
-  let twoColorPalettes = []
-  let sequential = []
-  let nonSequential = []
-  const accessibleColors = []
-
-  // Get two color palettes if visualization type is Paired Bar
-  if (config.visualizationType === 'Paired Bar' || config.visualizationType === 'Deviation Bar') {
-    const isReversed = config.twoColor.isPaletteReversed
-    twoColorPalettes = Object.keys(twoColorPalette).filter(name =>
-      isReversed ? name.endsWith('reverse') : !name.endsWith('reverse')
-    )
-  } else {
-    // Get sequential and non-sequential palettes for other visualization types
-    const seqPalettes = []
-    const nonSeqPalettes = []
-
-    for (const paletteName in colorPalettesChart) {
-      const isSequential = paletteName.startsWith('sequential')
-      const isQualitative = paletteName.startsWith('qualitative')
-      const colorblindsafe = paletteName.startsWith('colorblindsafe')
-      const isReversed = paletteName.endsWith('reverse')
-
-      if (isSequential && ((!config.isPaletteReversed && !isReversed) || (config.isPaletteReversed && isReversed))) {
-        seqPalettes.push(paletteName)
-      }
-
-      if (isQualitative && ((!config.isPaletteReversed && !isReversed) || (config.isPaletteReversed && isReversed))) {
-        nonSeqPalettes.push(paletteName)
-      }
-      if (colorblindsafe && ((!config.isPaletteReversed && !isReversed) || (config.isPaletteReversed && isReversed))) {
-        accessibleColors.push(paletteName)
-      }
-    }
-
-    sequential = seqPalettes
-    nonSequential = nonSeqPalettes
-  }
-
-  // Update pairedBar.palette based on isPaletteReversed
-  useEffect(() => {
-    let palette = ''
-
-    if (config.twoColor.isPaletteReversed && !config.twoColor.palette.endsWith('reverse')) {
-      palette = config.twoColor.palette + 'reverse'
-    }
-
-    if (!config.twoColor.isPaletteReversed && config.twoColor.palette.endsWith('reverse')) {
-      palette = config.twoColor.palette.slice(0, -7)
-    }
-
-    updateConfig({ ...config, twoColor: { ...config.twoColor, palette: palette } })
-  }, [config.twoColor.isPaletteReversed])
-
-  // Update palette based on isPaletteReversed
-  useEffect(() => {
-    let palette = ''
-
-    if (config.isPaletteReversed && !config.palette.endsWith('reverse')) {
-      palette = config.palette + 'reverse'
-    }
-
-    if (!config.isPaletteReversed && config.palette.endsWith('reverse')) {
-      palette = config.palette.slice(0, -7)
-    }
-
-    updateConfig({ ...config, palette: palette })
-  }, [config.isPaletteReversed])
-
-  // Return all palettes
-
-  return { twoColorPalettes, sequential, nonSequential, accessibleColors }
-}