@cdc/chart 4.25.8 → 4.25.11

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/Legend/helpers/getLegendClasses.ts

@@ -38,4 +38,3 @@ export const getLegendClasses = (config: ChartConfig) => {
     innerClasses
   }
 }
-export default getLegendClasses

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/LineChartProps.ts

@@ -21,9 +21,6 @@ export interface DataItem {
   [key: string]: any
 }
 
-export interface Config {
-  preliminaryData: PreliminaryDataItem[] | []
-}
 export interface StyleProps {
   data: DataItem[]
   handleLineType: Function

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/helpers.ts

@@ -210,7 +210,7 @@ const handleLastIndex = ({
   return result
 }
 
-export const handleMiddleIndices = ({
+const handleMiddleIndices = ({
   data,
   seriesKey,
   preliminaryData,

package/src/components/LineChart/index.tsx

@@ -79,6 +79,21 @@ const LineChart = (props: LineChartProps) => {
             ? data.filter(d => d[seriesData.dynamicCategory] === seriesKey)
             : data
           const circleData = filterCircles(config?.preliminaryData, tableData, _seriesKey)
+
+          // Prepare sorted data for line and area rendering
+          const sortedData =
+            config.visualizationType == 'Bump Chart'
+              ? _data
+              : config.xAxis.type === 'date-time' || config.xAxis.type === 'date'
+              ? _data.sort((d1, d2) => {
+                  let x1 = getXAxisData(d1)
+                  let x2 = getXAxisData(d2)
+                  if (x1 < x2) return -1
+                  if (x2 < x1) return 1
+                  return 0
+                })
+              : _data
+
           return (
             <Group
               key={`series-${seriesKey}-${index}`}
@@ -228,10 +243,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 =>
@@ -310,19 +325,7 @@ const LineChart = (props: LineChartProps) => {
                   {/* STANDARD LINE */}
                   <LinePath
                     curve={allCurves[seriesData.lineType]}
-                    data={
-                      config.visualizationType == 'Bump Chart'
-                        ? _data
-                        : config.xAxis.type === 'date-time' || config.xAxis.type === 'date'
-                        ? _data.sort((d1, d2) => {
-                            let x1 = getXAxisData(d1)
-                            let x2 = getXAxisData(d2)
-                            if (x1 < x2) return -1
-                            if (x2 < x1) return 1
-                            return 0
-                          })
-                        : _data
-                    }
+                    data={sortedData}
                     x={d => xPos(d)}
                     y={d =>
                       seriesAxis === 'Right'
@@ -338,6 +341,26 @@ const LineChart = (props: LineChartProps) => {
                       return item[_seriesKey] !== '' && item[_seriesKey] !== null && item[_seriesKey] !== undefined
                     }}
                   />
+
+                  {/* SHADED AREA UNDER LINE */}
+                  {config.showAreaUnderLine && (
+                    <AreaClosed
+                      curve={allCurves[seriesData.lineType]}
+                      data={sortedData}
+                      x={d => xPos(d)}
+                      y={d =>
+                        seriesAxis === 'Right'
+                          ? yScaleRight(getYAxisData(d, _seriesKey))
+                          : yScale(Number(getYAxisData(d, _seriesKey)))
+                      }
+                      yScale={seriesAxis === 'Right' ? yScaleRight : yScale}
+                      fill={colorScale(config.runtime.seriesLabels[seriesKey])}
+                      fillOpacity={0.3}
+                      defined={(item, i) => {
+                        return item[_seriesKey] !== '' && item[_seriesKey] !== null && item[_seriesKey] !== undefined
+                      }}
+                    />
+                  )}
                 </>
               )}