@cdc/chart 4.25.8 → 4.25.10

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,6 +19,7 @@ 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
 
@@ -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,34 @@ 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 +234,86 @@ 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>
+                )}
               </>
             )
           }}

package/src/components/Legend/helpers/createFormatLabels.tsx

@@ -1,171 +1,230 @@
-import { colorPalettesChart as colorPalettes, sequentialPalettes, twoColorPalette } from '@cdc/core/data/colorPalettes'
-import { FaStar } from 'react-icons/fa'
-import { Label } from '../../../types/Label'
-import { ColorScale, TransformedData } from '../../../types/ChartContext'
-import { ChartConfig } from '../../../types/ChartConfig'
-import _ from 'lodash'
-
-export const createFormatLabels =
-  (config: ChartConfig, tableData: Object[], data: TransformedData[], colorScale: ColorScale) =>
-  (defaultLabels: Label[]): Label[] => {
-    const { visualizationType, visualizationSubType, series, runtime, legend } = config
-    const sortVertical = labels =>
-      legend.verticalSorted
-        ? _.sortBy(_.cloneDeep(labels), label => {
-            const match = label.datum?.match(/-?\d+(\.\d+)?/)
-            return match ? parseFloat(match[0]) : Number.MAX_SAFE_INTEGER
-          })
-        : labels
-    const reverseLabels = labels => {
-      if (config.series.some(series => series.dynamicCategory)) {
-        return orderDynamicLabels(labels)
-      }
-
-      return config.legend.reverseLabelOrder ? sortVertical(labels).reverse() : sortVertical(labels)
-    }
-
-    const orderDynamicLabels = labels => {
-      // Handle different ordering configurations
-      switch (config.legend.order) {
-        case 'dataColumn':
-          return labels
-        case 'asc':
-        case 'desc':
-          return labels.sort((a, b) => {
-            const valA = a.datum || a.text
-            const valB = b.datum || b.text
-            const numA = parseFloat(valA)
-            const numB = parseFloat(valB)
-            if (!isNaN(numA) && !isNaN(numB)) {
-              return config.legend.order === 'asc' ? numA - numB : numB - numA
-            } else {
-              return config.legend.order === 'asc' ? valA.localeCompare(valB) : valB.localeCompare(valA)
-            }
-          })
-
-        default:
-          return labels // Default case to handle any unexpected config.legend.order values
-      }
-    }
-    const colorCode = config.legend?.colorCode
-    if (visualizationType === 'Deviation Bar') {
-      const [belowColor, aboveColor] = twoColorPalette[config.twoColor.palette]
-      const labelBelow = {
-        datum: 'X',
-        index: 0,
-        text: `Below ${config.xAxis.targetLabel}`,
-        value: belowColor
-      }
-      const labelAbove = {
-        datum: 'X',
-        index: 1,
-        text: `Above ${config.xAxis.targetLabel}`,
-        value: aboveColor
-      }
-
-      return reverseLabels([labelBelow, labelAbove])
-    }
-    if (visualizationType === 'Bar' && visualizationSubType === 'regular' && colorCode && series?.length === 1) {
-      let palette = colorPalettes[config.palette]
-
-      while (tableData.length > palette.length) {
-        palette = palette.concat(palette)
-      }
-      palette = palette.slice(0, data.length)
-      //store unique values to Set by colorCode
-      const set = new Set()
-
-      tableData.forEach(d => set.add(d[colorCode]))
-
-      // create labels with unique values
-      const uniqueLabels = Array.from(set).map((val, i) => {
-        const newLabel = {
-          datum: val,
-          index: i,
-          text: val,
-          value: palette[i]
-        }
-        return newLabel
-      })
-
-      return reverseLabels(uniqueLabels)
-    }
-
-    // get forecasting items inside of combo
-    if (runtime?.forecastingSeriesKeys?.length > 0) {
-      let seriesLabels = []
-
-      //store unique values to Set by colorCode
-      // loop through each stage/group/area on the chart and create a label
-      config.runtime?.forecastingSeriesKeys?.map((outerGroup, index) => {
-        return outerGroup?.stages?.map((stage, index) => {
-          let colorValue = sequentialPalettes[stage.color]?.[2]
-            ? sequentialPalettes[stage.color]?.[2]
-            : colorPalettes[stage.color]?.[2]
-            ? colorPalettes[stage.color]?.[2]
-            : '#ccc'
-
-          const newLabel = {
-            datum: stage.key,
-            index: index,
-            text: stage.key,
-            value: colorValue
-          }
-
-          seriesLabels.push(newLabel)
-        })
-      })
-
-      // loop through bars for now to meet requirements.
-      config.runtime.barSeriesKeys &&
-        config.runtime.barSeriesKeys.forEach((bar, index) => {
-          let colorValue = colorPalettes[config.palette][index] ? colorPalettes[config.palette][index] : '#ccc'
-
-          const newLabel = {
-            datum: bar,
-            index: index,
-            text: bar,
-            value: colorValue
-          }
-
-          seriesLabels.push(newLabel)
-        })
-
-      return reverseLabels(seriesLabels)
-    }
-
-    if (config.series.some(item => item.name)) {
-      const uniqueLabels = Array.from(new Set(config.series.map(d => d.name || d.dataKey))).map((val, i) => ({
-        datum: val,
-        index: i,
-        text: val,
-        value: colorScale(val)
-      }))
-      return reverseLabels(uniqueLabels)
-    }
-
-    if (
-      (config.visualizationType === 'Bar' || config.visualizationType === 'Combo') &&
-      config.visualizationSubType === 'regular' &&
-      config.suppressedData
-    ) {
-      const lastIndex = defaultLabels.length - 1
-      let newLabels = []
-
-      config.suppressedData?.forEach(({ label, icon }, index) => {
-        if (label && icon) {
-          const newLabel = {
-            datum: label,
-            index: lastIndex + index,
-            text: label,
-            icon: <FaStar color='#000' size={15} />
-          }
-          newLabels.push(newLabel)
-        }
-      })
-
-      return [...defaultLabels, ...newLabels]
-    }
-
-    return reverseLabels(defaultLabels)
-  }
+import {
+  colorPalettesChart as colorPalettes,
+  colorPalettesChartV2,
+  sequentialPalettes,
+  twoColorPalette
+} from '@cdc/core/data/colorPalettes'
+import { getCurrentPaletteName, getFallbackColorPalette, migratePaletteWithMap } from '@cdc/core/helpers/palettes/utils'
+import { chartPaletteMigrationMap } from '@cdc/core/helpers/palettes/migratePaletteName'
+import { getPaletteAccessor } from '@cdc/core/helpers/getPaletteAccessor'
+import { getColorPaletteVersion } from '@cdc/core/helpers/getColorPaletteVersion'
+import { isV1Palette } from '@cdc/core/helpers/palettes/utils'
+import { v2ColorDistribution } from '@cdc/core/helpers/palettes/colorDistributions'
+import { updatePaletteNames } from '@cdc/core/helpers/updatePaletteNames'
+import { buildForecastPaletteMappings } from '../../../helpers/buildForecastPaletteMappings'
+import { FaStar } from 'react-icons/fa'
+import { Label } from '../../../types/Label'
+import { ColorScale, TransformedData } from '../../../types/ChartContext'
+import { ChartConfig } from '../../../types/ChartConfig'
+import _ from 'lodash'
+
+export const createFormatLabels =
+  (config: ChartConfig, tableData: Object[], data: TransformedData[], colorScale: ColorScale) =>
+    (defaultLabels: Label[]): Label[] => {
+      const { visualizationType, visualizationSubType, series, runtime, legend } = config
+      const sortVertical = labels =>
+        legend.verticalSorted
+          ? _.sortBy(_.cloneDeep(labels), label => {
+            const match = label.datum?.match(/-?\d+(\.\d+)?/)
+            return match ? parseFloat(match[0]) : Number.MAX_SAFE_INTEGER
+          })
+          : labels
+      const reverseLabels = labels => {
+        if (config.series.some(series => series.dynamicCategory)) {
+          return orderDynamicLabels(labels)
+        }
+
+        return config.legend.reverseLabelOrder ? sortVertical(labels).reverse() : sortVertical(labels)
+      }
+
+      const orderDynamicLabels = labels => {
+        // Handle different ordering configurations
+        switch (config.legend.order) {
+          case 'dataColumn':
+            return labels
+          case 'asc':
+          case 'desc':
+            return labels.sort((a, b) => {
+              const valA = a.datum || a.text
+              const valB = b.datum || b.text
+              const numA = parseFloat(valA)
+              const numB = parseFloat(valB)
+              if (!isNaN(numA) && !isNaN(numB)) {
+                return config.legend.order === 'asc' ? numA - numB : numB - numA
+              } else {
+                return config.legend.order === 'asc' ? valA.localeCompare(valB) : valB.localeCompare(valA)
+              }
+            })
+
+          default:
+            return labels // Default case to handle any unexpected config.legend.order values
+        }
+      }
+      const colorCode = config.legend?.colorCode
+      if (visualizationType === 'Deviation Bar') {
+        let versionName = isV1Palette(config) ? 'v1' : 'v2'
+        const [belowColor, aboveColor] = twoColorPalette?.[versionName]?.[config.twoColor.palette] || [
+          '#1D6ABF',
+          '#935586'
+        ]
+
+        const labelBelow = {
+          datum: 'X',
+          index: 0,
+          text: `Below ${config.xAxis.targetLabel}`,
+          value: belowColor
+        }
+        const labelAbove = {
+          datum: 'X',
+          index: 1,
+          text: `Above ${config.xAxis.targetLabel}`,
+          value: aboveColor
+        }
+
+        return reverseLabels([labelBelow, labelAbove])
+      }
+      if (visualizationType === 'Bar' && visualizationSubType === 'regular' && colorCode && series?.length === 1) {
+        const currentPaletteName = getCurrentPaletteName(config) || getFallbackColorPalette(config)
+        const paletteName = migratePaletteWithMap(currentPaletteName, chartPaletteMigrationMap, true)
+        let palette = getPaletteAccessor(colorPalettes, config, paletteName)
+
+        const numberOfKeys = data.length
+
+        // Check if we should use v2 distribution logic for better contrast
+        const version = getColorPaletteVersion(config)
+        const isSequentialOrDivergent =
+          paletteName && (paletteName.includes('sequential') || paletteName.includes('divergent'))
+        const isPairedBarOrDeviation = ['Paired Bar', 'Deviation Bar'].includes(config.visualizationType)
+        const useV2Distribution =
+          version === 2 && isSequentialOrDivergent && palette.length === 9 && numberOfKeys <= 9 && !isPairedBarOrDeviation
+
+        if (useV2Distribution && v2ColorDistribution[numberOfKeys]) {
+          // Use strategic color distribution for v2 sequential palettes
+          const distributionIndices = v2ColorDistribution[numberOfKeys]
+          palette = distributionIndices.map(index => palette[index])
+        } else {
+          // Use existing logic for v1 palettes and other cases
+          while (tableData.length > palette?.length) {
+            palette = palette.concat(palette)
+          }
+          palette = palette?.slice(0, data.length)
+        }
+        //store unique values to Set by colorCode
+        const set = new Set()
+
+        tableData.forEach(d => set.add(d[colorCode]))
+
+        // create labels with unique values
+        const uniqueLabels = Array.from(set).map((val, i) => {
+          const newLabel = {
+            datum: val,
+            index: i,
+            text: val,
+            value: palette?.[i]
+          }
+          return newLabel
+        })
+
+        return reverseLabels(uniqueLabels)
+      }
+
+      // get forecasting items inside of combo
+      if (runtime?.forecastingSeriesKeys?.length > 0) {
+        let seriesLabels = []
+
+        // Create palette lookup map - use version-specific palettes
+        // 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)
+        const forecastingPalettes = buildForecastPaletteMappings(processedPalettes, paletteVersion)
+
+        //store unique values to Set by colorCode
+        // loop through each stage/group/area on the chart and create a label
+        config.runtime?.forecastingSeriesKeys?.map((outerGroup, index) => {
+          return outerGroup?.stages?.map((stage, index) => {
+            const palette = forecastingPalettes[stage.color] || false
+            let colorValue = palette?.[2] || '#ccc'
+
+            const newLabel = {
+              datum: stage.key,
+              index: index,
+              text: stage.key,
+              value: colorValue
+            }
+
+            seriesLabels.push(newLabel)
+          })
+        })
+
+        // loop through bars for now to meet requirements.
+        config.runtime.barSeriesKeys &&
+          config.runtime.barSeriesKeys.forEach((bar, index) => {
+            const currentPaletteName = getCurrentPaletteName(config) || getFallbackColorPalette(config)
+            const migratedPaletteName = migratePaletteWithMap(currentPaletteName, chartPaletteMigrationMap, true)
+            const palette = getPaletteAccessor(colorPalettes, config, migratedPaletteName)
+            let colorValue = palette?.[index] || '#ccc'
+
+            const newLabel = {
+              datum: bar,
+              index: index,
+              text: bar,
+              value: colorValue
+            }
+
+            seriesLabels.push(newLabel)
+          })
+
+        return reverseLabels(seriesLabels)
+      }
+
+      if (config.series.some(item => item.name)) {
+        const uniqueLabels = Array.from(new Set(config.series.map(d => d.name || d.dataKey))).map((val, i) => ({
+          datum: val,
+          index: i,
+          text: val,
+          value: colorScale(val)
+        }))
+        return reverseLabels(uniqueLabels)
+      }
+
+      if (
+        (config.visualizationType === 'Bar' || config.visualizationType === 'Combo') &&
+        config.visualizationSubType === 'regular' &&
+        config.suppressedData
+      ) {
+        const lastIndex = defaultLabels.length - 1
+        let newLabels = []
+
+        config.suppressedData?.forEach(({ label, icon }, index) => {
+          if (label && icon) {
+            const newLabel = {
+              datum: label,
+              index: lastIndex + index,
+              text: label,
+              icon: <FaStar color='#000' size={15} />
+            }
+            newLabels.push(newLabel)
+          }
+        })
+
+        return [...defaultLabels, ...newLabels]
+      }
+
+      return reverseLabels(defaultLabels)
+    }

package/src/components/LegendWrapper.tsx

@@ -22,7 +22,7 @@ const LegendWrapper: React.FC<LegendWrapperProps> = props => {
     return classes.join(' ')
   }
 
-  return <div className={getLegendWrappingClasses()}>{...children}</div>
+  return <div className={getLegendWrappingClasses()}>{children}</div>
 }
 
 export default LegendWrapper

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 =>