@cdc/chart 4.25.8 → 4.25.10

package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx

@@ -1,4 +1,6 @@
-import { useContext, FC } from 'react'
+import { useContext, FC, useMemo } from 'react'
+import _ from 'lodash'
+import cloneConfig from '@cdc/core/helpers/cloneConfig'
 
 // external libraries
 import {
@@ -15,7 +17,9 @@ import Icon from '@cdc/core/components/ui/Icon'
 import InputToggle from '@cdc/core/components/inputs/InputToggle'
 
 // contexts
-import { useColorPalette } from '../../../../hooks/useColorPalette'
+import { useColorPalette } from '@cdc/core/hooks/useColorPalette'
+import { getCurrentPaletteName } from '@cdc/core/helpers/palettes/utils'
+import { getColorPaletteVersion } from '@cdc/core/helpers/getColorPaletteVersion'
 import { ChartContext } from './../../../../types/ChartContext.js'
 
 import { useEditorPermissions } from '../../useEditorPermissions.js'
@@ -23,12 +27,15 @@ import { useEditorPanelContext } from '../../EditorPanelContext.js'
 import ConfigContext from '../../../../ConfigContext.js'
 import { PanelProps } from '../PanelProps'
 import { LineChartConfig } from '../../../../types/ChartConfig'
+import { PaletteSelector, DeveloperPaletteRollback } from '@cdc/core/components/PaletteSelector'
 import './panelVisual.styles.css'
 
 const PanelVisual: FC<PanelProps> = props => {
   const { config, updateConfig, colorPalettes, twoColorPalette } = useContext<ChartContext>(ConfigContext)
   const { visual } = config
-  const { setLollipopShape, updateField } = useEditorPanelContext()
+
+  const { setLollipopShape, updateField, handlePaletteSelection, handleTwoColorPaletteSelection } =
+    useEditorPanelContext()
   const {
     visHasBarBorders,
     visCanAnimate,
@@ -45,6 +52,14 @@ const PanelVisual: FC<PanelProps> = props => {
   } = useEditorPermissions()
   const { twoColorPalettes, sequential, nonSequential, accessibleColors } = useColorPalette(config, updateConfig)
 
+  const currentPaletteName = getCurrentPaletteName(config)
+
+  const versionedTwoColorPalette = useMemo(() => {
+    const version = getColorPaletteVersion(config)
+    const versionKey = `v${version}`
+    return twoColorPalette[versionKey] || twoColorPalette.v2
+  }, [config, twoColorPalette])
+
   const updateColor = (property, _value) => {
     console.error('value', _value)
     if (property === 'storyNodeFontColor') {
@@ -255,117 +270,78 @@ const PanelVisual: FC<PanelProps> = props => {
             <label>
               <span className='edit-label'>Chart Color Palette</span>
             </label>
+            <div className='mb-2'>
+              <small className='text-muted'>
+                Review color contrasts{' '}
+                <a href='https://webaim.org/resources/contrastchecker/' target='_blank' rel='noopener noreferrer'>
+                  here
+                </a>
+              </small>
+            </div>
+            <DeveloperPaletteRollback config={config} updateConfig={updateConfig} />
             {visSupportsReverseColorPalette() && (
               <InputToggle
-                fieldName='isPaletteReversed'
+                section='general'
+                subsection='palette'
+                fieldName='isReversed'
                 size='small'
                 label='Use selected palette in reverse order'
                 updateField={updateField}
-                value={config.isPaletteReversed}
+                onClick={() => {
+                  const _state = cloneConfig(config)
+                  const currentPaletteName = getCurrentPaletteName(config)
+                  _state.general.palette.isReversed = !_state.general.palette.isReversed
+                  let paletteName = ''
+                  if (_state.general.palette.isReversed && !currentPaletteName.endsWith('reverse')) {
+                    paletteName = currentPaletteName + 'reverse'
+                  }
+                  if (!_state.general.palette.isReversed && currentPaletteName.endsWith('reverse')) {
+                    paletteName = currentPaletteName.slice(0, -7)
+                  }
+                  if (paletteName) {
+                    _state.general.palette.name = paletteName
+                  }
+                  updateConfig(_state)
+                }}
+                value={config.general?.palette?.isReversed}
               />
             )}
             {visSupportsSequentialPallete() && (
               <>
                 <span>Sequential</span>
-                <ul className='color-palette'>
-                  {sequential.map(palette => {
-                    const colorOne = {
-                      backgroundColor: colorPalettes[palette][2]
-                    }
-
-                    const colorTwo = {
-                      backgroundColor: colorPalettes[palette][3]
-                    }
-
-                    const colorThree = {
-                      backgroundColor: colorPalettes[palette][5]
-                    }
-
-                    return (
-                      <button
-                        title={palette}
-                        key={palette}
-                        onClick={e => {
-                          e.preventDefault()
-                          updateConfig({ ...config, palette })
-                        }}
-                        className={config.palette === palette ? 'selected' : ''}
-                      >
-                        <span style={colorOne}></span>
-                        <span style={colorTwo}></span>
-                        <span style={colorThree}></span>
-                      </button>
-                    )
-                  })}
-                </ul>
+                <PaletteSelector
+                  palettes={sequential}
+                  colorPalettes={colorPalettes}
+                  config={config}
+                  onPaletteSelect={handlePaletteSelection}
+                  selectedPalette={currentPaletteName}
+                  colorIndices={[2, 3, 5]}
+                  className='color-palette'
+                />
               </>
             )}
             {visSupportsNonSequentialPallete() && (
               <>
                 <span>Non-Sequential</span>
-                <ul className='color-palette'>
-                  {nonSequential.map(palette => {
-                    const colorOne = {
-                      backgroundColor: colorPalettes[palette][2]
-                    }
-
-                    const colorTwo = {
-                      backgroundColor: colorPalettes[palette][4]
-                    }
-
-                    const colorThree = {
-                      backgroundColor: colorPalettes[palette][6]
-                    }
-
-                    return (
-                      <button
-                        title={palette}
-                        key={palette}
-                        onClick={e => {
-                          e.preventDefault()
-                          updateConfig({ ...config, palette })
-                        }}
-                        className={config.palette === palette ? 'selected' : ''}
-                      >
-                        <span style={colorOne}></span>
-                        <span style={colorTwo}></span>
-                        <span style={colorThree}></span>
-                      </button>
-                    )
-                  })}
-                </ul>
+                <PaletteSelector
+                  palettes={nonSequential}
+                  colorPalettes={colorPalettes}
+                  config={config}
+                  onPaletteSelect={handlePaletteSelection}
+                  selectedPalette={getCurrentPaletteName(config)}
+                  colorIndices={[2, 4, 6]}
+                  className='color-palette'
+                />
                 <span>Colorblind Safe</span>
-                <ul className='color-palette'>
-                  {accessibleColors.map(palette => {
-                    const colorOne = {
-                      backgroundColor: colorPalettes[palette][2]
-                    }
-
-                    const colorTwo = {
-                      backgroundColor: colorPalettes[palette][3]
-                    }
-
-                    const colorThree = {
-                      backgroundColor: colorPalettes[palette][5]
-                    }
-
-                    return (
-                      <button
-                        title={palette}
-                        key={palette}
-                        onClick={e => {
-                          e.preventDefault()
-                          updateConfig({ ...config, palette })
-                        }}
-                        className={config.palette === palette ? 'selected' : ''}
-                      >
-                        <span style={colorOne}></span>
-                        <span style={colorTwo}></span>
-                        <span style={colorThree}></span>
-                      </button>
-                    )
-                  })}
-                </ul>
+                <PaletteSelector
+                  palettes={accessibleColors}
+                  colorPalettes={colorPalettes}
+                  config={config}
+                  onPaletteSelect={handlePaletteSelection}
+                  selectedPalette={getCurrentPaletteName(config)}
+                  colorIndices={[2, 3, 5]}
+                  className='color-palette'
+                />
               </>
             )}
           </>
@@ -406,6 +382,7 @@ const PanelVisual: FC<PanelProps> = props => {
         )}
         {(config.visualizationType === 'Paired Bar' || config.visualizationType === 'Deviation Bar') && (
           <>
+            <DeveloperPaletteRollback config={config} updateConfig={updateConfig} className='mt-3' />
             <InputToggle
               section='twoColor'
               fieldName='isPaletteReversed'
@@ -415,30 +392,48 @@ const PanelVisual: FC<PanelProps> = props => {
               value={config.twoColor.isPaletteReversed}
             />
             <ul className='color-palette'>
-              {twoColorPalettes.map(palette => {
-                const colorOne = {
-                  backgroundColor: twoColorPalette[palette][0]
-                }
+              {twoColorPalettes
+                .map(palette => {
+                  const paletteColors = versionedTwoColorPalette[palette]
 
-                const colorTwo = {
-                  backgroundColor: twoColorPalette[palette][1]
-                }
+                  if (!paletteColors || paletteColors.length < 2) {
+                    console.warn(
+                      `Two-color palette "${palette}" not found or incomplete in version ${getColorPaletteVersion(
+                        config
+                      )}`
+                    )
+                    return null
+                  }
+
+                  const colorOne = {
+                    backgroundColor: paletteColors[0]
+                  }
 
-                return (
-                  <button
-                    title={palette}
-                    key={palette}
-                    onClick={e => {
-                      e.preventDefault()
-                      updateConfig({ ...config, twoColor: { ...config.twoColor, palette } })
-                    }}
-                    className={config.twoColor.palette === palette ? 'selected' : ''}
-                  >
-                    <span className='two-color' style={colorOne}></span>
-                    <span className='two-color' style={colorTwo}></span>
-                  </button>
-                )
-              })}
+                  const colorTwo = {
+                    backgroundColor: paletteColors[1]
+                  }
+
+                  return (
+                    <button
+                      title={palette}
+                      key={palette}
+                      onClick={e => {
+                        e.preventDefault()
+                        if (handleTwoColorPaletteSelection) {
+                          handleTwoColorPaletteSelection(palette)
+                        } else {
+                          // Fallback to direct update if handler not available
+                          updateConfig({ ...config, twoColor: { ...config.twoColor, palette } })
+                        }
+                      }}
+                      className={config.twoColor.palette === palette ? 'selected' : ''}
+                    >
+                      <span className='two-color' style={colorOne}></span>
+                      <span className='two-color' style={colorTwo}></span>
+                    </button>
+                  )
+                })
+                .filter(Boolean)}
             </ul>
           </>
         )}

package/src/components/EditorPanel/components/Panels/index.tsx

@@ -6,6 +6,7 @@ import BoxPlot from './Panel.BoxPlot'
 import Visual from './Panel.Visual'
 import Sankey from './Panel.Sankey'
 import Annotate from './Panel.Annotate'
+import PatternSettings from './Panel.PatternSettings'
 
 const Panels = {
   ForestPlot: ForestPlotSettings,
@@ -15,7 +16,8 @@ const Panels = {
   BoxPlot,
   Visual,
   Sankey,
-  Annotate
+  Annotate,
+  PatternSettings
 }
 
 export default Panels

package/src/components/EditorPanel/components/Panels/panelVisual.styles.css

@@ -1,8 +0,0 @@
-.type-chart .sidebar .color-palette button:not(.selected) {
-  border:  var(--cool-gray-30) 2px solid !important;
-
-}
-
-.type-chart .sidebar .color-palette button.selected {
-  border:  black 2px solid !important;
-}

package/src/components/EditorPanel/helpers/updateFieldRankByValue.ts

@@ -1,48 +1,49 @@
-import DataTransform from '@cdc/core/helpers/DataTransform'
-import { ChartConfig } from '../../../types/ChartConfig'
-import _ from 'lodash'
-
-const transform = new DataTransform()
-
-const indexOfObj = (data, obj) => {
-  for (let i = 0; i < data.length; i++) {
-    let keys = Object.keys(data[i])
-    let equal = true
-    for (let j = 0; j < keys.length; j++) {
-      if (data[i][keys[j]] !== obj[keys[j]]) {
-        equal = false
-        break
-      }
-    }
-    if (equal) {
-      return i
-    }
-  }
-  return -1
-}
-
-export const updateFieldRankByValue = (
-  config: ChartConfig,
-  newValue: 'asc' | 'desc' | undefined,
-  preTransformedData: Object[]
-): [ChartConfig, Object[]?] => {
-  const newConfig = _.cloneDeep(config)
-  newConfig.rankByValue = newValue
-
-  if (config.rankByValue && !newValue) {
-    const CIkeys: string[] = Object.values(_.get(config, 'confidenceKeys', {})) as string[]
-    const seriesKeys: string[] = _.get(config, 'series', []).map((s: any) => s.dataKey)
-    const keysToClean: string[] = [...(seriesKeys ?? []), ...(CIkeys ?? [])]
-
-    const cleanData = config?.xAxis?.dataKey
-      ? transform.cleanData(config.data, config.xAxis.dataKey, keysToClean)
-      : config.data
-    const newData = preTransformedData.sort((a, b) => {
-      const aIndex = indexOfObj(cleanData, a)
-      const bIndex = indexOfObj(cleanData, b)
-      return aIndex - bIndex
-    })
-    return [newConfig, newData]
-  }
-  return [newConfig]
-}
+import DataTransform from '@cdc/core/helpers/DataTransform'
+import { ChartConfig } from '../../../types/ChartConfig'
+import cloneConfig from '@cdc/core/helpers/cloneConfig'
+import _ from 'lodash'
+
+const transform = new DataTransform()
+
+const indexOfObj = (data, obj) => {
+  for (let i = 0; i < data.length; i++) {
+    let keys = Object.keys(data[i])
+    let equal = true
+    for (let j = 0; j < keys.length; j++) {
+      if (data[i][keys[j]] !== obj[keys[j]]) {
+        equal = false
+        break
+      }
+    }
+    if (equal) {
+      return i
+    }
+  }
+  return -1
+}
+
+export const updateFieldRankByValue = (
+  config: ChartConfig,
+  newValue: 'asc' | 'desc' | undefined,
+  preTransformedData: Object[]
+): [ChartConfig, Object[]?] => {
+  const newConfig = cloneConfig(config)
+  newConfig.rankByValue = newValue
+
+  if (config.rankByValue && !newValue) {
+    const CIkeys: string[] = Object.values(_.get(config, 'confidenceKeys', {})) as string[]
+    const seriesKeys: string[] = _.get(config, 'series', []).map((s: any) => s.dataKey)
+    const keysToClean: string[] = [...(seriesKeys ?? []), ...(CIkeys ?? [])]
+
+    const cleanData = config?.xAxis?.dataKey
+      ? transform.cleanData(config.data, config.xAxis.dataKey, keysToClean)
+      : config.data
+    const newData = preTransformedData.sort((a, b) => {
+      const aIndex = indexOfObj(cleanData, a)
+      const bIndex = indexOfObj(cleanData, b)
+      return aIndex - bIndex
+    })
+    return [newConfig, newData]
+  }
+  return [newConfig]
+}

package/src/components/Forecasting/Forecasting.tsx

@@ -1,10 +1,13 @@
-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'
@@ -16,6 +19,31 @@ const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, ha
   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'>
@@ -36,16 +64,18 @@ const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, ha
                   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

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 */