@cdc/chart 4.25.8 → 4.25.11

package/src/components/Forecasting/Forecasting.tsx

@@ -1,21 +1,145 @@
-import React, { useContext } from 'react'
+import React, { useContext, useMemo } from 'react'
 import { replace } from 'lodash'
 // cdc
 import ConfigContext from '../../ConfigContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import { colorPalettesChart, sequentialPalettes } from '@cdc/core/data/colorPalettes'
+import { colorPalettesChartV2, sequentialPalettes } from '@cdc/core/data/colorPalettes'
+import { updatePaletteNames } from '@cdc/core/helpers/updatePaletteNames'
+import { getColorPaletteVersion } from '@cdc/core/helpers/getColorPaletteVersion'
 import { getBridgedData } from '../../helpers/getBridgedData'
+import { buildForecastPaletteMappings } from '../../helpers/buildForecastPaletteMappings'
 
 // visx & d3
 import { curveMonotoneX } from '@visx/curve'
 import { Bar, Area, LinePath } from '@visx/shape'
 import { Group } from '@visx/group'
 
+// Helper function to check if a value is numeric/calculable
+const isCalculable = (value: any): boolean => {
+  if (value === null || value === undefined || value === '' || value === 'NA') return false
+  const num = typeof value === 'string' ? parseFloat(value.replace(/,/g, '')) : Number(value)
+  return !isNaN(num) && isFinite(num)
+}
+
+// Helper function to filter and sort forecast data, splitting into segments at gaps
+const prepareForecastData = (
+  data: Record<string, any>[],
+  xAxisKey: string,
+  highKey: string,
+  lowKey: string
+): Record<string, any>[][] => {
+  if (!data || data.length === 0) return []
+
+  // Filter out invalid data points (where confidence intervals are not calculable)
+  const validData = data.filter(d => {
+    const high = d[highKey]
+    const low = d[lowKey]
+    return isCalculable(high) && isCalculable(low) && d[xAxisKey]
+  })
+
+  if (validData.length === 0) return []
+
+  // Sort by date
+  const sortedData = [...validData].sort((a, b) => {
+    const dateA = Date.parse(a[xAxisKey])
+    const dateB = Date.parse(b[xAxisKey])
+    if (isNaN(dateA) || isNaN(dateB)) return 0
+    return dateA - dateB
+  })
+
+  // Split into segments when there are gaps
+  // Calculate intervals between consecutive points to detect gaps
+  const intervals: number[] = []
+  for (let i = 1; i < sortedData.length; i++) {
+    const currentDate = Date.parse(sortedData[i][xAxisKey])
+    const prevDate = Date.parse(sortedData[i - 1][xAxisKey])
+    if (!isNaN(currentDate) && !isNaN(prevDate)) {
+      intervals.push(currentDate - prevDate)
+    }
+  }
+
+  // Calculate median interval (more robust than average for detecting gaps)
+  const medianInterval =
+    intervals.length > 0
+      ? [...intervals].sort((a, b) => a - b)[Math.floor(intervals.length / 2)]
+      : 7 * 24 * 60 * 60 * 1000 // Default to 7 days if no intervals
+
+  // Threshold: gap is more than 2x the median interval, or more than 30 days
+  const gapThreshold = Math.max(medianInterval * 2, 30 * 24 * 60 * 60 * 1000)
+
+  const segments: Record<string, any>[][] = []
+  let currentSegment: Record<string, any>[] = []
+
+  for (let i = 0; i < sortedData.length; i++) {
+    const current = sortedData[i]
+    const prev = sortedData[i - 1]
+
+    if (i === 0) {
+      // First data point starts a new segment
+      currentSegment = [current]
+    } else {
+      const currentDate = Date.parse(current[xAxisKey])
+      const prevDate = Date.parse(prev[xAxisKey])
+
+      if (isNaN(currentDate) || isNaN(prevDate)) {
+        // If dates are invalid, continue current segment
+        currentSegment.push(current)
+      } else {
+        const interval = currentDate - prevDate
+        const hasGap = interval > gapThreshold
+
+        if (hasGap) {
+          // Save current segment and start a new one
+          if (currentSegment.length > 0) {
+            segments.push(currentSegment)
+          }
+          currentSegment = [current]
+        } else {
+          // Continue current segment
+          currentSegment.push(current)
+        }
+      }
+    }
+  }
+
+  // Add the last segment
+  if (currentSegment.length > 0) {
+    segments.push(currentSegment)
+  }
+
+  return segments.length > 0 ? segments : [sortedData]
+}
+
 const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, handleTooltipMouseOff }) => {
   const { transformedData: data, rawData, config, seriesHighlight, parseDate } = useContext(ConfigContext)
   const { xAxis, yAxis, legend, runtime } = config
   const DEBUG = false
 
+  // Memoize processed palettes - use version-specific palettes
+  const forecastingPalettes = useMemo(() => {
+    // Determine palette version from config
+    // Forecasting charts use sequentialPalettes for v1, sequential-only palettes for v2
+    const paletteVersion = getColorPaletteVersion(config)
+
+    let forecastPalettes
+    if (paletteVersion === 1) {
+      // V1: Use original sequential palettes
+      forecastPalettes = sequentialPalettes
+    } else {
+      // V2: Only use sequential palettes (filter out divergent and qualitative)
+      const allV2Palettes = colorPalettesChartV2
+      forecastPalettes = {}
+      Object.keys(allV2Palettes).forEach(key => {
+        if (key.startsWith('sequential')) {
+          forecastPalettes[key] = allV2Palettes[key]
+        }
+      })
+    }
+
+    const processedPalettes = updatePaletteNames(forecastPalettes)
+    return buildForecastPaletteMappings(processedPalettes, paletteVersion)
+  }, [config])
+
   return (
     data && (
       <ErrorBoundary component='ForecastingChart'>
@@ -33,50 +157,74 @@ const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, ha
               return (
                 <Group
                   className={`forecasting-areas-combo-${index}`}
-                  key={`forecasting-areas--stage-${replace(stage.key, / /g, '—')}-${index}`}
+                  key={`forecasting-areas--stage-${replace(stage.key, / /g, '—')}-${index}`}
                 >
                   {group.confidenceIntervals?.map((ciGroup, ciGroupIndex) => {
-                    const palette = sequentialPalettes[stage.color] || colorPalettesChart[stage.color] || false
+                    const palette = forecastingPalettes[stage.color] || false
+                    const isReversed = stage.color?.toLowerCase().includes('reverse')
 
                     const getFill = () => {
-                      if (displayArea) return palette[2] ? palette[2] : 'transparent'
+                      if (displayArea) return palette?.[2] || 'transparent'
                       return 'transparent'
                     }
 
                     const getStroke = () => {
-                      if (displayArea) return palette[1] ? palette[1] : 'transparent'
-                      return 'transparent'
+                      if (!displayArea) return 'transparent'
+                      // Use darker colors: index 1 for reversed (dark at start), index 4 for non-reversed (dark at end)
+                      return isReversed ? palette?.[1] || 'transparent' : palette?.[4] || 'transparent'
                     }
 
-                    if (ciGroup.high === '' || ciGroup.low === '') return
+                    if (ciGroup.high === '' || ciGroup.low === '') return null
+
+                    // Prepare data: filter invalid values, sort by date, and split into segments at gaps
+                    const dataSegments = prepareForecastData(bridgedData, xAxis.dataKey, ciGroup.high, ciGroup.low)
+
                     return (
                       <Group
                         key={`forecasting-areas--stage-${replace(
                           stage.key,
-                          / /g,
+                          / /g,
                           '—'
                         )}--group-${stageIndex}-${ciGroupIndex}`}
                       >
-                        {/* prettier-ignore */}
-                        <Area
-                          curve={curveMonotoneX}
-                          data={bridgedData}
-                          fill={getFill()}
-                          opacity={transparentArea? 0.1 : 0.5 }
-                          x={d => xScale(Date.parse(d[xAxis.dataKey]))}
-                          y0={d => yScale(d[ciGroup.low])}
-                          y1={d => yScale(d[ciGroup.high])}
-                        />
-
-                        {ciGroupIndex === 0 && (
-                          <>
+                        {dataSegments.map((segment, segmentIndex) => (
+                          <Group key={`segment-${segmentIndex}`}>
                             {/* prettier-ignore */}
-                            <LinePath data={bridgedData} x={d => Number(xScale(Date.parse(d[xAxis.dataKey])))} y={d => Number(yScale(d[ciGroup.high]))} curve={curveMonotoneX} stroke={getStroke()} strokeWidth={1} strokeOpacity={1} />
+                            <Area
+                              curve={curveMonotoneX}
+                              data={segment}
+                              fill={getFill()}
+                              opacity={transparentArea ? 0.1 : 0.5}
+                              x={d => xScale(Date.parse(d[xAxis.dataKey]))}
+                              y0={d => yScale(d[ciGroup.low])}
+                              y1={d => yScale(d[ciGroup.high])}
+                            />
 
-                            {/* prettier-ignore */}
-                            <LinePath data={bridgedData} x={d => Number(xScale(Date.parse(d[xAxis.dataKey])))} y={d => Number(yScale(d[ciGroup.low]))} curve={curveMonotoneX} stroke={getStroke()} strokeWidth={1} strokeOpacity={1} />
-                          </>
-                        )}
+                            {ciGroupIndex === 0 && (
+                              <>
+                                <LinePath
+                                  data={segment}
+                                  x={d => Number(xScale(Date.parse(d[xAxis.dataKey])))}
+                                  y={d => Number(yScale(d[ciGroup.high]))}
+                                  curve={curveMonotoneX}
+                                  stroke={getStroke()}
+                                  strokeWidth={1}
+                                  strokeOpacity={1}
+                                />
+
+                                <LinePath
+                                  data={segment}
+                                  x={d => Number(xScale(Date.parse(d[xAxis.dataKey])))}
+                                  y={d => Number(yScale(d[ciGroup.low]))}
+                                  curve={curveMonotoneX}
+                                  stroke={getStroke()}
+                                  strokeWidth={1}
+                                  strokeOpacity={1}
+                                />
+                              </>
+                            )}
+                          </Group>
+                        ))}
                       </Group>
                     )
                   })}

package/src/components/ForestPlot/ForestPlot.tsx

@@ -8,9 +8,9 @@ import { scaleLinear } from '@visx/scale'
 import { curveLinearClosed } from '@visx/curve'
 
 // types
-import { type ForestPlotProps } from '@cdc/chart/src/components/ForestPlot/ForestPlotProps'
-import { type ChartConfig } from '@cdc/chart/src/types/ChartConfig'
-import { type ChartContext } from '@cdc/chart/src/types/ChartContext'
+import { type ForestPlotProps } from './ForestPlotProps'
+import { type ChartConfig } from '../../types/ChartConfig'
+import { type ChartContext } from '../../types/ChartContext'
 
 // cdc
 import ConfigContext from '../../ConfigContext'
@@ -73,7 +73,7 @@ const ForestPlot = ({
 
       updateConfig(newConfig)
     } catch (e) {
-      console.log(e.message)
+      console.error(e.message)
     }
   }, [])
 
@@ -184,7 +184,7 @@ const ForestPlot = ({
           const isTotalColumn = d[config.xAxis.dataKey] === forestPlot.pooledResult.column
 
           return !isTotalColumn ? (
-            <Group>
+            <Group key={`forest-plot-row-${i}-${d[config.xAxis.dataKey]}`}>
               {/* Confidence Interval Paths */}
               <path
                 stroke={lineColor}
@@ -252,6 +252,7 @@ const ForestPlot = ({
             </Group>
           ) : (
             <LinePath
+              key={`forest-plot-regression-${i}-${d[config.xAxis.dataKey]}`}
               data={regressionPoints}
               x={d => d.x}
               y={d => d.y - APP_FONT_SIZE / 2}
@@ -314,10 +315,11 @@ const ForestPlot = ({
       />
 
       {/* column data */}
-      {columnsOnChart.map(column => {
+      {columnsOnChart.map((column, colIndex) => {
         return data.map((d, i) => {
           return (
             <Text
+              key={`forest-plot-column-${colIndex}-${i}-${d[config.xAxis.dataKey]}`}
               className={`${d[column.name]}`}
               x={column.forestPlotAlignRight ? width : column.forestPlotStartingPoint}
               y={yScale(i)}
@@ -336,6 +338,7 @@ const ForestPlot = ({
         data.map((d, i) => {
           return (
             <Text
+              key={`forest-plot-xaxis-${i}-${d[config.xAxis.dataKey]}`}
               className={`${d[config.xAxis.dataKey]}`}
               x={0}
               y={yScale(i)}
@@ -356,9 +359,10 @@ const ForestPlot = ({
       )}
 
       {/* column headers */}
-      {columnsOnChart.map(column => {
+      {columnsOnChart.map((column, colIndex) => {
         return (
           <Text
+            key={`forest-plot-header-${colIndex}-${column.label}`}
             className={`${column.label}`}
             x={column.forestPlotAlignRight ? width : column.forestPlotStartingPoint}
             y={0}

package/src/components/ForestPlot/ForestPlotProps.ts

@@ -1,4 +1,4 @@
-import { type ChartConfig } from '@cdc/chart/src/types/ChartConfig'
+import { type ChartConfig } from '../../types/ChartConfig'
 
 export type ForestPlotProps = {
   /** xScale - scaling function for bottom axis */

package/src/components/Legend/Legend.Component.tsx

@@ -1,6 +1,7 @@
 import parse from 'html-react-parser'
 import React from 'react'
 import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'
+import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 import LegendShape from '@cdc/core/components/LegendShape'
 import Button from '@cdc/core/components/elements/Button'
 import { getLegendClasses } from './helpers/getLegendClasses'
@@ -18,10 +19,11 @@ import LegendLineShape from './LegendLine.Shape'
 import LegendGroup from './LegendGroup'
 import { getSeriesWithData } from '../../helpers/dataHelpers'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 const LEGEND_PADDING = 36
 
-export interface LegendProps {
+interface LegendProps {
   colorScale: ColorScale
   config: ChartConfig
   currentViewport: ViewportSize
@@ -36,7 +38,6 @@ export interface LegendProps {
   interactionLabel: string
 }
 
-/* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
 const Legend: React.FC<LegendProps> = forwardRef(
   (
     {
@@ -72,6 +73,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
 
     const { HighLightedBarUtils } = useHighlightedBars(config)
     let highLightedLegendItems = HighLightedBarUtils.findDuplicates(config.highlightedBarValues)
+
     if (!legend) return null
     return (
       <aside
@@ -140,23 +142,40 @@ const Legend: React.FC<LegendProps> = forwardRef(
                           onKeyDown={e => {
                             if (e.key === 'Enter') {
                               e.preventDefault()
-                              publishAnalyticsEvent(
-                                `chart_legend_item_toggled--${legend.behavior}-mode`,
-                                'keydown',
-                                `${interactionLabel}|${label.text}`,
-                                'chart'
-                              )
+                              publishAnalyticsEvent({
+                                vizType: config?.type,
+                                vizSubType: getVizSubType(config),
+                                vizTitle: getVizTitle(config),
+                                eventType: `chart_legend_item_toggled` as any,
+                                eventAction: 'keydown',
+                                eventLabel: interactionLabel,
+                                specifics:
+                                  config.visualizationType === 'Bar'
+                                    ? `label: ${label.text}, orientation: ${
+                                        config.orientation === 'horizontal' ? 'horizontal' : 'vertical'
+                                      }, mode: ${legend.behavior}`
+                                    : `label: ${label.text}, mode: ${legend.behavior}`
+                              })
                               highlight(label)
                             }
                           }}
                           onClick={e => {
                             e.preventDefault()
-                            publishAnalyticsEvent(
-                              `chart_legend_item_toggled--${legend.behavior}-mode`,
-                              'click',
-                              `${interactionLabel}|${label.text}`,
-                              'chart'
-                            )
+                            publishAnalyticsEvent({
+                              vizType: config?.type,
+                              vizSubType: getVizSubType(config),
+                              eventType: `chart_legend_item_toggled` as any,
+                              eventAction: 'click',
+                              eventLabel: interactionLabel,
+                              specifics:
+                                config.visualizationType === 'Bar'
+                                  ? `label: ${label.text}, orientation: ${
+                                      config.orientation === 'horizontal' ? 'horizontal' : 'vertical'
+                                    }, mode: ${legend.behavior}`
+                                  : `label: ${label.text}, mode: ${legend.behavior}`,
+
+                              vizTitle: getVizTitle(config)
+                            })
                             highlight(label)
                           }}
                           role='button'
@@ -221,6 +240,87 @@ const Legend: React.FC<LegendProps> = forwardRef(
                 </div>
 
                 <LegendSuppression config={config} isLegendBottom={isLegendBottom} />
+
+                {/* Pattern Legend Items */}
+                {config.legend.patterns && Object.keys(config.legend.patterns).length > 0 && (
+                  <div
+                    className={`legend-patterns d-flex ${
+                      ['top', 'bottom'].includes(config.legend.position) ? 'flex-row flex-wrap' : 'flex-column'
+                    }`}
+                  >
+                    {Object.entries(config.legend.patterns).map(([key, pattern]) => {
+                      const patternId = `legend-pattern-${key}`
+                      const size = config.legend.patternSize || 8
+                      const legendSize = 16
+                      const pColor = (pattern as any)?.color || '#666666'
+
+                      return (
+                        <LegendItem
+                          key={patternId}
+                          className='legend-item legend-item--pattern d-flex align-items-center'
+                          tabIndex={0}
+                          role='button'
+                        >
+                          <span className='me-2'>
+                            <svg width={legendSize} height={legendSize}>
+                              <defs>
+                                {pattern.shape === 'circles' && (
+                                  <PatternCircles
+                                    id={patternId}
+                                    height={size}
+                                    width={size}
+                                    fill={pColor}
+                                    radius={1.25}
+                                  />
+                                )}
+                                {pattern.shape === 'lines' && (
+                                  <PatternLines
+                                    id={patternId}
+                                    height={size}
+                                    width={size}
+                                    stroke={pColor}
+                                    strokeWidth={0.75}
+                                    orientation={['horizontal']}
+                                  />
+                                )}
+                                {pattern.shape === 'diagonalLines' && (
+                                  <PatternLines
+                                    id={patternId}
+                                    height={size}
+                                    width={size}
+                                    stroke={pColor}
+                                    strokeWidth={0.75}
+                                    orientation={['diagonalRightToLeft']}
+                                  />
+                                )}
+                                {pattern.shape === 'waves' && (
+                                  <PatternWaves
+                                    id={patternId}
+                                    height={size}
+                                    width={size}
+                                    fill={pColor}
+                                    strokeWidth={0.25}
+                                  />
+                                )}
+                              </defs>
+                              <circle
+                                fill={`url(#${patternId})`}
+                                r={legendSize / 2}
+                                cx={legendSize / 2}
+                                cy={legendSize / 2}
+                                stroke='#0000004d'
+                                strokeWidth={1}
+                              />
+                            </svg>
+                          </span>
+                          <LegendLabel align='left' className='m-0'>
+                            {parse(String((pattern as any)?.label || key))}
+                          </LegendLabel>
+                        </LegendItem>
+                      )
+                    })}
+                  </div>
+                )}
               </>
             )
           }}