@cdc/chart 4.25.10 → 4.26.1

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

@@ -0,0 +1,427 @@
+import { useContext, FC, useMemo } from 'react'
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
+import {
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  AccordionItemButton
+} from 'react-accessible-accordion'
+
+// core
+import { TextField, Select, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Icon from '@cdc/core/components/ui/Icon'
+import { useDataColumns } from '@cdc/core/hooks/useDataColumns'
+
+// contexts
+import { ChartContext } from './../../../../types/ChartContext.js'
+import { useEditorPermissions } from '../../useEditorPermissions.js'
+import { useEditorPanelContext } from '../../EditorPanelContext.js'
+import ConfigContext from '../../../../ConfigContext.js'
+import { PanelProps } from '../PanelProps'
+import { getTileKeys } from '../../../../helpers/smallMultiplesHelpers'
+
+const PanelSmallMultiples: FC<PanelProps> = props => {
+  const { config, rawData, updateConfig } = useContext<ChartContext>(ConfigContext)
+  const { updateField } = useEditorPanelContext()
+  const { visSupportsSmallMultiples } = useEditorPermissions()
+
+  // Extract column names from data with memoization (replaces getColumns)
+  const allColumns = useDataColumns(rawData)
+
+  // Filter out series columns and confidence key columns (except lower and upper)
+  const filteredColumns = useMemo(() => {
+    const { lower, upper } = config.confidenceKeys || {}
+    return allColumns.filter(key => {
+      // Filter out series columns
+      if (config.series && config.series.some(series => series.dataKey === key)) {
+        return false
+      }
+      // Filter out confidence key columns (except lower and upper)
+      if (
+        config.confidenceKeys &&
+        Object.keys(config.confidenceKeys).includes(key) &&
+        ((lower && upper) || lower || upper) &&
+        key !== lower &&
+        key !== upper
+      ) {
+        return false
+      }
+      return true
+    })
+  }, [allColumns, config.series, config.confidenceKeys])
+
+  return (
+    <>
+      {visSupportsSmallMultiples() && (
+        <AccordionItem>
+          <AccordionItemHeading>
+            <AccordionItemButton>Small Multiples</AccordionItemButton>
+          </AccordionItemHeading>
+          <AccordionItemPanel>
+            <Select
+              value={config.smallMultiples?.mode || ''}
+              fieldName='mode'
+              section='smallMultiples'
+              label='Tile Mode'
+              initial='Select Mode'
+              updateField={updateField}
+              options={[
+                { label: 'By data series', value: 'by-series' },
+                { label: 'By column values', value: 'by-column' }
+              ]}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>
+                      Choose how to create multiple charts. "By Data Series" creates a tile for each configured data
+                      series. "By Column Values" creates a tile for each unique value in the selected column.
+                    </p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+            {config.smallMultiples?.mode === 'by-column' && (
+              <Select
+                value={config.smallMultiples?.tileColumn || ''}
+                fieldName='tileColumn'
+                section='smallMultiples'
+                label='Tile By Column'
+                initial='Select Column'
+                updateField={updateField}
+                options={filteredColumns}
+              />
+            )}
+
+            {config.smallMultiples?.mode && (
+              <>
+                <TextField
+                  type='number'
+                  value={config.smallMultiples?.tilesPerRowDesktop}
+                  section='smallMultiples'
+                  fieldName='tilesPerRowDesktop'
+                  label='Tiles Per Row (Desktop)'
+                  updateField={updateField}
+                  min={1}
+                  max={3}
+                  tooltip={
+                    <Tooltip style={{ textTransform: 'none' }}>
+                      <Tooltip.Target>
+                        <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                      </Tooltip.Target>
+                      <Tooltip.Content>
+                        <p>
+                          Number of chart tiles to display per row on desktop screens. Mobile will always show 1 tile
+                          per row.
+                        </p>
+                      </Tooltip.Content>
+                    </Tooltip>
+                  }
+                />
+
+                {/* Tile Ordering */}
+                {(() => {
+                  const availableTiles = getTileKeys(config, rawData)
+                  if (availableTiles.length === 0) return null
+
+                  const tileOrderOptions = [
+                    {
+                      label: 'Ascending By Title',
+                      value: 'asc'
+                    },
+                    {
+                      label: 'Descending By Title',
+                      value: 'desc'
+                    },
+                    {
+                      label: 'Custom',
+                      value: 'custom'
+                    }
+                  ]
+
+                  const currentOrderType = config.smallMultiples?.tileOrderType || 'asc'
+
+                  const handleOrderTypeChange = orderType => {
+                    const newConfig = {
+                      ...config,
+                      smallMultiples: {
+                        ...config.smallMultiples,
+                        tileOrderType: orderType
+                      }
+                    }
+
+                    // If switching to custom, initialize with current tile order
+                    if (orderType === 'custom' && !config.smallMultiples?.tileOrder?.length) {
+                      newConfig.smallMultiples.tileOrder = [...availableTiles]
+                    }
+
+                    updateConfig(newConfig)
+                  }
+
+                  const handleCustomTileOrderChange = (sourceIndex, destinationIndex) => {
+                    if (destinationIndex === null) return
+
+                    const currentOrder = config.smallMultiples?.tileOrder || [...availableTiles]
+                    const newOrder = [...currentOrder]
+                    const [removed] = newOrder.splice(sourceIndex, 1)
+                    newOrder.splice(destinationIndex, 0, removed)
+
+                    updateConfig({
+                      ...config,
+                      smallMultiples: {
+                        ...config.smallMultiples,
+                        tileOrder: newOrder,
+                        tileOrderType: 'custom'
+                      }
+                    })
+                  }
+
+                  return (
+                    <>
+                      <Select
+                        value={currentOrderType}
+                        options={tileOrderOptions}
+                        label='Tile Order'
+                        fieldName='tileOrderType'
+                        section='smallMultiples'
+                        updateField={(_section, _subsection, _fieldName, value) => {
+                          handleOrderTypeChange(value)
+                        }}
+                      />
+
+                      {currentOrderType === 'custom' && (
+                        <DragDropContext
+                          onDragEnd={({ source, destination }) =>
+                            handleCustomTileOrderChange(source.index, destination?.index)
+                          }
+                        >
+                          <Droppable droppableId='tile_order'>
+                            {provided => (
+                              <ul
+                                {...provided.droppableProps}
+                                className='sort-list'
+                                ref={provided.innerRef}
+                                style={{ marginTop: '1em' }}
+                              >
+                                {(config.smallMultiples?.tileOrder || availableTiles).map((tileKey, index) => (
+                                  <Draggable key={tileKey} draggableId={`tile-${tileKey}`} index={index}>
+                                    {(provided, snapshot) => (
+                                      <li>
+                                        <div
+                                          className={snapshot.isDragging ? 'currently-dragging' : ''}
+                                          style={provided.draggableProps.style}
+                                          ref={provided.innerRef}
+                                          {...provided.draggableProps}
+                                          {...provided.dragHandleProps}
+                                        >
+                                          {tileKey}
+                                        </div>
+                                      </li>
+                                    )}
+                                  </Draggable>
+                                ))}
+                                {provided.placeholder}
+                              </ul>
+                            )}
+                          </Droppable>
+                        </DragDropContext>
+                      )}
+                    </>
+                  )
+                })()}
+
+                {/* Color Mode */}
+                <Select
+                  value={config.smallMultiples?.colorMode || 'different'}
+                  options={[
+                    {
+                      label: 'Same Color',
+                      value: 'same'
+                    },
+                    {
+                      label: 'Different Colors',
+                      value: 'different'
+                    }
+                  ]}
+                  label='Color Mode'
+                  fieldName='colorMode'
+                  section='smallMultiples'
+                  updateField={(_section, _subsection, _fieldName, value) => {
+                    updateConfig({
+                      ...config,
+                      smallMultiples: {
+                        ...config.smallMultiples,
+                        colorMode: value
+                      }
+                    })
+                  }}
+                  tooltip={
+                    <Tooltip style={{ textTransform: 'none' }}>
+                      <Tooltip.Target>
+                        <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                      </Tooltip.Target>
+                      <Tooltip.Content>
+                        <p>
+                          When "Different Colors" is selected, each tile will use the next color in the configured color
+                          palette.
+                        </p>
+                      </Tooltip.Content>
+                    </Tooltip>
+                  }
+                />
+
+                {/* Custom Tile Titles - only show for by-column mode */}
+                {config.smallMultiples?.mode === 'by-column' && (
+                  <div>
+                    <label style={{ marginTop: '1.5rem', marginBottom: '0.5rem' }}>Custom Tile Titles</label>
+
+                    {(() => {
+                      const availableTiles = getTileKeys(config, rawData)
+                      if (availableTiles.length === 0) return null
+
+                      const handleTitleChange = (tileKey, customTitle) => {
+                        const newTitles = { ...config.smallMultiples?.tileTitles }
+                        if (customTitle.trim() === '' || customTitle === tileKey) {
+                          delete newTitles[tileKey] // Remove entry if empty or same as key
+                        } else {
+                          newTitles[tileKey] = customTitle
+                        }
+
+                        updateConfig({
+                          ...config,
+                          smallMultiples: {
+                            ...config.smallMultiples,
+                            tileTitles: newTitles
+                          }
+                        })
+                      }
+
+                      return (
+                        <div className='tile-titles-editor' style={{ maxWidth: '100%', overflow: 'hidden' }}>
+                          {availableTiles.map(tileKey => {
+                            const customTitle = config.smallMultiples?.tileTitles?.[tileKey] || ''
+                            return (
+                              <div
+                                key={tileKey}
+                                className='tile-title-row'
+                                style={{
+                                  display: 'flex',
+                                  alignItems: 'center',
+                                  marginBottom: '0.75rem',
+                                  maxWidth: '100%'
+                                }}
+                              >
+                                <label
+                                  style={{
+                                    minWidth: '80px',
+                                    maxWidth: '120px',
+                                    marginRight: '0.75rem',
+                                    fontWeight: 'normal',
+                                    fontSize: '13px',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                    flexShrink: 0
+                                  }}
+                                >
+                                  {tileKey}:
+                                </label>
+                                <input
+                                  type='text'
+                                  value={customTitle}
+                                  placeholder={tileKey}
+                                  onChange={event => handleTitleChange(tileKey, event.target.value)}
+                                  style={{
+                                    flex: 1,
+                                    minWidth: 0,
+                                    maxWidth: '200px',
+                                    fontSize: '13px',
+                                    padding: '4px 8px',
+                                    height: '30px',
+                                    border: '1px solid #ccc',
+                                    borderRadius: '3px'
+                                  }}
+                                />
+                              </div>
+                            )
+                          })}
+                        </div>
+                      )
+                    })()}
+                  </div>
+                )}
+
+                <CheckBox
+                  value={config.smallMultiples?.independentYAxis}
+                  section='smallMultiples'
+                  fieldName='independentYAxis'
+                  label='Independent Y-Axis Scales'
+                  updateField={updateField}
+                  tooltip={
+                    <Tooltip style={{ textTransform: 'none' }}>
+                      <Tooltip.Target>
+                        <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                      </Tooltip.Target>
+                      <Tooltip.Content>
+                        <p>
+                          When checked, the y-axis scale for each tile will be calculated separately. The chart's y-axis
+                          min/max will override this setting if they are configured.
+                        </p>
+                      </Tooltip.Content>
+                    </Tooltip>
+                  }
+                />
+
+                <CheckBox
+                  value={config.smallMultiples?.synchronizedTooltips}
+                  fieldName='synchronizedTooltips'
+                  section='smallMultiples'
+                  label='Synchronized Tooltips'
+                  updateField={updateField}
+                  tooltip={
+                    <Tooltip style={{ textTransform: 'none' }}>
+                      <Tooltip.Target>
+                        <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                      </Tooltip.Target>
+                      <Tooltip.Content>
+                        <p>
+                          When checked, hovering over one chart will show synchronized tooltips on all other charts at
+                          the same data point.
+                        </p>
+                      </Tooltip.Content>
+                    </Tooltip>
+                  }
+                />
+
+                {config.visualizationType === 'Line' && (
+                  <CheckBox
+                    value={config.smallMultiples?.showAreaUnderLine}
+                    fieldName='showAreaUnderLine'
+                    section='smallMultiples'
+                    label='Shade Area Under Lines'
+                    updateField={updateField}
+                    tooltip={
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>When checked, each tile chart will display a shaded area underneath the line.</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                  />
+                )}
+              </>
+            )}
+          </AccordionItemPanel>
+        </AccordionItem>
+      )}
+    </>
+  )
+}
+
+export default PanelSmallMultiples

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

@@ -20,6 +20,7 @@ import InputToggle from '@cdc/core/components/inputs/InputToggle'
 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'
@@ -28,6 +29,10 @@ 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 => {
@@ -40,7 +45,6 @@ const PanelVisual: FC<PanelProps> = props => {
     visHasBarBorders,
     visCanAnimate,
     visSupportsNonSequentialPallete,
-    headerColors,
     visSupportsTooltipOpacity,
     visSupportsTooltipLines,
     visSupportsBarSpace,
@@ -86,7 +90,7 @@ const PanelVisual: FC<PanelProps> = props => {
   }
 
   return (
-    <AccordionItem>
+    <AccordionItem className='panel-visual'>
       <AccordionItemHeading>
         <AccordionItemButton>Visual</AccordionItemButton>
       </AccordionItemHeading>
@@ -247,24 +251,7 @@ 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>
@@ -332,16 +319,89 @@ const PanelVisual: FC<PanelProps> = props => {
                   colorIndices={[2, 4, 6]}
                   className='color-palette'
                 />
-                <span>Colorblind Safe</span>
-                <PaletteSelector
-                  palettes={accessibleColors}
-                  colorPalettes={colorPalettes}
-                  config={config}
-                  onPaletteSelect={handlePaletteSelection}
-                  selectedPalette={getCurrentPaletteName(config)}
-                  colorIndices={[2, 3, 5]}
-                  className='color-palette'
-                />
+
+                {config.visualizationType !== 'Warming Stripes' && (
+                  <>
+                    <span>Colorblind Safe</span>
+                    <PaletteSelector
+                      palettes={accessibleColors}
+                      colorPalettes={colorPalettes}
+                      config={config}
+                      onPaletteSelect={handlePaletteSelection}
+                      selectedPalette={getCurrentPaletteName(config)}
+                      colorIndices={[2, 3, 5]}
+                      className='color-palette'
+                    />
+                  </>
+                )}
+              </>
+            )}
+
+            {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>
+
+                {(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>
+                )}
               </>
             )}
           </>
@@ -443,7 +503,6 @@ const PanelVisual: FC<PanelProps> = props => {
               value={config.dataCutoff}
               type='number'
               fieldName='dataCutoff'
-              className='number-narrow'
               label='Data Cutoff'
               updateField={updateField}
               tooltip={
@@ -462,28 +521,17 @@ const PanelVisual: FC<PanelProps> = props => {
             />
           </>
         )}
-        {visSupportsBarThickness() &&
-          config.orientation === 'horizontal' &&
-          !config.isLollipopChart &&
-          config.yAxis.labelPlacement !== 'On Bar' && (
+
+        {(config.orientation !== 'horizontal' || config.visualizationType === 'Combo') &&
+          config.visualizationType !== 'Warming Stripes' && (
             <TextField
+              value={config.barThickness}
               type='number'
-              value={config.barHeight || '25'}
-              fieldName='barHeight'
-              label=' Bar Thickness'
+              fieldName='barThickness'
+              label='Bar Thickness'
               updateField={updateField}
-              min={15}
             />
           )}
-        {(config.orientation !== 'horizontal' || config.visualizationType === 'Combo') && (
-          <TextField
-            value={config.barThickness}
-            type='number'
-            fieldName='barThickness'
-            label='Bar Thickness'
-            updateField={updateField}
-          />
-        )}
         {visSupportsBarSpace() && (
           <TextField
             type='number'

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

@@ -7,6 +7,7 @@ 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,
@@ -17,7 +18,8 @@ const Panels = {
   Visual,
   Sankey,
   Annotate,
-  PatternSettings
+  PatternSettings,
+  SmallMultiples
 }
 
 export default Panels

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;
       }
     }