@cdc/chart 4.25.8 → 4.25.11

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,10 @@ 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 { isCoveDeveloperMode } from '@cdc/core/helpers/queryStringUtils'
 import { ChartContext } from './../../../../types/ChartContext.js'
 
 import { useEditorPermissions } from '../../useEditorPermissions.js'
@@ -23,17 +28,23 @@ 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 { HeaderThemeSelector } from '@cdc/core/components/HeaderThemeSelector'
+import { CustomColorsEditor } from '@cdc/core/components/CustomColorsEditor'
+import { getColorScale } from '../../../../helpers/getColorScale'
+import '@cdc/core/styles/v2/components/editor.scss'
 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,
     visSupportsNonSequentialPallete,
-    headerColors,
     visSupportsTooltipOpacity,
     visSupportsTooltipLines,
     visSupportsBarSpace,
@@ -45,6 +56,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') {
@@ -71,7 +90,7 @@ const PanelVisual: FC<PanelProps> = props => {
   }
 
   return (
-    <AccordionItem>
+    <AccordionItem className='panel-visual'>
       <AccordionItemHeading>
         <AccordionItemButton>Visual</AccordionItemButton>
       </AccordionItemHeading>
@@ -232,140 +251,152 @@ const PanelVisual: FC<PanelProps> = props => {
             />
           </>
         )}
-        {/* eslint-disable */}
-        <label className='header'>
-          <span className='edit-label'>Header Theme</span>
-          <ul className='color-palette'>
-            {headerColors.map(palette => (
-              <button
-                title={palette}
-                key={palette}
-                onClick={e => {
-                  e.preventDefault()
-                  updateConfig({ ...config, theme: palette })
-                }}
-                className={config.theme === palette ? 'selected ' + palette : palette}
-              ></button>
-            ))}
-          </ul>
-        </label>
-        {/* eslint-enable */}
+        <HeaderThemeSelector selectedTheme={config.theme} onThemeSelect={theme => updateConfig({ ...config, theme })} />
         {(visSupportsNonSequentialPallete() || visSupportsNonSequentialPallete()) && (
           <>
             <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]
-                    }
+                <PaletteSelector
+                  palettes={accessibleColors}
+                  colorPalettes={colorPalettes}
+                  config={config}
+                  onPaletteSelect={handlePaletteSelection}
+                  selectedPalette={getCurrentPaletteName(config)}
+                  colorIndices={[2, 3, 5]}
+                  className='color-palette'
+                />
+              </>
+            )}
 
-                    const colorThree = {
-                      backgroundColor: colorPalettes[palette][5]
-                    }
+            {isCoveDeveloperMode() && (visSupportsSequentialPallete() || visSupportsNonSequentialPallete()) && (
+              <>
+                <div className='mt-3'>
+                  <label className='checkbox'>
+                    <input
+                      type='checkbox'
+                      checked={
+                        !!(config.general?.palette?.customColorsOrdered || config.general?.palette?.customColors)
+                      }
+                      onChange={e => {
+                        const _state = cloneConfig(config)
+                        // Ensure palette object exists
+                        if (!_state.general.palette) {
+                          _state.general.palette = {}
+                        }
+                        if (e.target.checked) {
+                          // Extract colors from current color scale if runtime data available
+                          if (config.runtime?.seriesLabelsAll && config.runtime.seriesLabelsAll.length > 0) {
+                            const colorScale = getColorScale(config)
+                            const extractedColors = config.runtime.seriesLabelsAll.map((label: string) =>
+                              colorScale(label)
+                            )
+                            _state.general.palette.customColorsOrdered =
+                              extractedColors.length > 0
+                                ? extractedColors
+                                : ['#3366cc', '#5588dd', '#77aaee', '#99ccff']
+                          } else {
+                            // Fallback to default colors if runtime not available
+                            _state.general.palette.customColorsOrdered = ['#3366cc', '#5588dd', '#77aaee', '#99ccff']
+                          }
+                        } else {
+                          // Remove custom colors and revert to default palette
+                          delete _state.general.palette.customColorsOrdered
+                          delete _state.general.palette.customColors
+                          // Set default palette if none exists
+                          if (!_state.general.palette.name) {
+                            _state.general.palette.name = 'qualitative_standard'
+                            _state.general.palette.version = '2.0'
+                          }
+                        }
+                        updateConfig(_state)
+                      }}
+                    />
+                    Use Custom Colors
+                  </label>
+                </div>
 
-                    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>
+                {(config.general?.palette?.customColorsOrdered || config.general?.palette?.customColors) && (
+                  <div className='mt-2'>
+                    <CustomColorsEditor
+                      colors={config.general.palette.customColorsOrdered || config.general.palette.customColors}
+                      onChange={newColors => {
+                        const _state = cloneConfig(config)
+                        if (!_state.general.palette) {
+                          _state.general.palette = {}
+                        }
+                        _state.general.palette.customColorsOrdered = newColors
+                        updateConfig(_state)
+                      }}
+                      label='Custom Color Order'
+                      minColors={1}
+                      maxColors={20}
+                    />
+                  </div>
+                )}
               </>
             )}
           </>
@@ -406,6 +437,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 +447,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]
+                  }
+
+                  const colorTwo = {
+                    backgroundColor: paletteColors[1]
+                  }
 
-                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>
-                )
-              })}
+                  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>
           </>
         )}
@@ -448,7 +498,6 @@ const PanelVisual: FC<PanelProps> = props => {
               value={config.dataCutoff}
               type='number'
               fieldName='dataCutoff'
-              className='number-narrow'
               label='Data Cutoff'
               updateField={updateField}
               tooltip={

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

@@ -6,6 +6,8 @@ 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'
+import SmallMultiples from './Panel.SmallMultiples'
 
 const Panels = {
   ForestPlot: ForestPlotSettings,
@@ -15,7 +17,9 @@ const Panels = {
   BoxPlot,
   Visual,
   Sankey,
-  Annotate
+  Annotate,
+  PatternSettings,
+  SmallMultiples
 }
 
 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/editor-panel.scss

@@ -7,26 +7,6 @@
       text-align: left;
 
       span {
-        display: inline-block;
-        float: right;
-      }
-    }
-
-    .edit-block {
-      margin-top: 0;
-      padding: 1em;
-    }
-  }
-
-  .viewport-overrides {
-    button {
-      width: 100%;
-      padding: 1em;
-      margin-top: 1em;
-      text-align: left;
-
-      span {
-        display: inline-block;
         float: right;
       }
     }

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/EditorPanel/useEditorPermissions.ts

@@ -22,20 +22,6 @@ export const useEditorPermissions = () => {
     'Scatter Plot',
     'Spark Line',
     'Sankey'
-]
-
-  const headerColors = [
-    'theme-blue',
-    'theme-purple',
-    'theme-brown',
-    'theme-teal',
-    'theme-pink',
-    'theme-orange',
-    'theme-slate',
-    'theme-indigo',
-    'theme-cyan',
-    'theme-green',
-    'theme-amber'
   ]
 
   const visSupportsDateCategoryAxis = () => {
@@ -383,6 +369,12 @@ export const useEditorPermissions = () => {
     )
   }
 
+  const visSupportsSmallMultiples = () => {
+    const enabledCharts = ['Line', 'Bar', 'Area Chart', 'Combo', 'Box Plot', 'Scatter Plot']
+    if (enabledCharts.includes(visualizationType)) return true
+    return false
+  }
+
   const visSupportsYPadding = () => {
     return !config.yAxis.inlineLabel || !config.yAxis.inlineLabel?.includes(' ')
   }
@@ -411,7 +403,6 @@ export const useEditorPermissions = () => {
 
   return {
     enabledChartTypes,
-    headerColors,
     visCanAnimate,
     visHasAnchors,
     visHasBarBorders,
@@ -460,6 +451,7 @@ export const useEditorPermissions = () => {
     visSupportsValueAxisMax,
     visSupportsValueAxisMin,
     visSupportsDynamicSeries,
+    visSupportsSmallMultiples,
     visSupportsYPadding,
     visHasSingleSeriesTooltip,
     visHasCategoricalAxis