@cdc/chart 4.25.8 → 4.25.11

package/src/components/EditorPanel/EditorPanel.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, memo, useContext } from 'react'
-import { DragDropContext, Droppable } from '@hello-pangea/dnd'
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
 import chroma from 'chroma-js'
 import { isDateScale } from '@cdc/core/helpers/cove/date'
 import {
@@ -23,9 +23,11 @@ import { Select, TextField, CheckBox } from '@cdc/core/components/EditorPanel/In
 import MultiSelect from '@cdc/core/components/MultiSelect'
 import { viewports } from '@cdc/core/helpers/getViewport'
 import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
+import PanelMarkup from '@cdc/core/components/EditorPanel/components/PanelMarkup'
 
 // chart components
 import Panels from './components/Panels'
+import PaletteConversionModal from '@cdc/core/components/PaletteConversionModal'
 
 // cdc additional
 import { useEditorPermissions } from './useEditorPermissions'
@@ -34,20 +36,25 @@ import ConfigContext from '../../ConfigContext'
 import useReduceData from '../../hooks/useReduceData'
 import useRightAxis from '../../hooks/useRightAxis'
 import WarningImage from '../../images/warning.svg'
-import useMinMax from '../../hooks/useMinMax'
+import getMinMax from '../../helpers/getMinMax'
 
 import { type ChartContext } from '../../types/ChartContext'
 import { type ChartConfig } from '../../types/ChartConfig'
 
+import '@cdc/core/components/EditorPanel/EditorPanel.styles.css'
 import './editor-panel.scss'
 import { Anchor } from '@cdc/core/types/Axis'
 import EditorPanelContext from './EditorPanelContext'
 import _ from 'lodash'
 import { adjustedSymbols as symbolCodes } from '@cdc/core/helpers/footnoteSymbols'
 import { updateFieldRankByValue } from './helpers/updateFieldRankByValue'
+import cloneConfig from '@cdc/core/helpers/cloneConfig'
 import FootnotesEditor from '@cdc/core/components/EditorPanel/FootnotesEditor'
 import { Datasets } from '@cdc/core/types/DataSet'
 import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
+import { paletteMigrationMap, twoColorPaletteMigrationMap } from '@cdc/core/helpers/palettes/migratePaletteName'
+import { isV1Palette, migratePaletteWithMap } from '@cdc/core/helpers/palettes/utils'
+import { USE_V2_MIGRATION } from '@cdc/core/helpers/constants'
 
 interface PreliminaryProps {
   config: ChartConfig
@@ -627,8 +634,16 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
   } = useContext<ChartContext>(ConfigContext)
 
   const { minValue, maxValue, existPositiveValue, isAllLine } = useReduceData(config, unfilteredData)
-  const properties = { data, config }
-  const { leftMax, rightMax } = useMinMax(properties)
+  const properties = {
+    data,
+    tableData: data,
+    config,
+    minValue,
+    maxValue,
+    existPositiveValue,
+    isAllLine
+  }
+  const { leftMax, rightMax } = getMinMax(properties)
 
   const {
     visHasAnchors,
@@ -825,6 +840,14 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
 
   const [displayPanel, setDisplayPanel] = useState(true)
   const [displayViewportOverrides, setDisplayViewportOverrides] = useState(false)
+  const [showConversionModal, setShowConversionModal] = useState(false)
+  const [pendingPaletteSelection, setPendingPaletteSelection] = useState<{
+    palette: string
+    action: () => void
+    seriesIndex?: number
+    stageIndex?: number
+    type?: 'general' | 'twoColor' | 'forecast'
+  } | null>(null)
 
   const setLollipopShape = shape => {
     updateConfig({
@@ -892,8 +915,36 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
 
   const getColumns = (filter = true) => {
     let columns = {}
-    unfilteredData.forEach(row => {
-      Object.keys(row).forEach(columnName => (columns[columnName] = true))
+
+    // Try multiple data sources in order of preference
+    let dataToUse = []
+
+    if (unfilteredData && unfilteredData.length > 0) {
+      // First preference: unfilteredData from context
+      dataToUse = unfilteredData
+    } else if (isDashboard && datasets && config.dataKey && datasets[config.dataKey]?.data?.length > 0) {
+      // Second preference: data from datasets in dashboard mode
+      dataToUse = datasets[config.dataKey].data
+    } else if (rawData && rawData.length > 0) {
+      // Third preference: rawData from context
+      dataToUse = rawData
+    } else if (data && data.length > 0) {
+      // Fourth preference: transformedData from context
+      dataToUse = data
+    } else if (config.data && config.data.length > 0) {
+      // Fifth preference: data directly from config
+      dataToUse = config.data
+    }
+
+    // If we still don't have data, return empty array
+    if (!dataToUse || dataToUse.length === 0) {
+      return []
+    }
+
+    dataToUse.forEach(row => {
+      if (row && typeof row === 'object') {
+        Object.keys(row).forEach(columnName => (columns[columnName] = true))
+      }
     })
 
     if (filter) {
@@ -975,18 +1026,18 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
 
   // prettier-ignore
   const {
-      highlightedBarValues,
-      highlightedSeriesValues,
-      handleUpdateHighlightedBar,
-      handleAddNewHighlightedBar,
-      handleRemoveHighlightedBar,
-      handleUpdateHighlightedBarColor,
-      handleHighlightedBarLegendLabel,
-      handleUpdateHighlightedBorderWidth
-     } = useHighlightedBars(config, updateConfig)
+    highlightedBarValues,
+    highlightedSeriesValues,
+    handleUpdateHighlightedBar,
+    handleAddNewHighlightedBar,
+    handleRemoveHighlightedBar,
+    handleUpdateHighlightedBarColor,
+    handleHighlightedBarLegendLabel,
+    handleUpdateHighlightedBorderWidth
+  } = useHighlightedBars(config, updateConfig)
 
   const convertStateToConfig = () => {
-    let strippedState = _.cloneDeep(config)
+    let strippedState = cloneConfig(config)
     if (false === missingRequiredSections(config)) {
       delete strippedState.newViz
     }
@@ -1093,6 +1144,289 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
   const section = config.orientation === 'horizontal' ? 'xAxis' : 'yAxis'
   const [warningMsg, setWarningMsg] = useState({ maxMsg: '', minMsg: '', rightMaxMessage: '', minMsgRight: '' })
 
+  // Palette migration functions
+  const handlePaletteSelection = (palette: string) => {
+    try {
+      // Check if config exists and has basic structure
+      if (!config) {
+        console.error('COVE: Config is undefined in handlePaletteSelection')
+        return
+      }
+
+      // Check if it's a v1 palette configuration
+      const isV1PaletteConfig = isV1Palette(config)
+
+      const executeSelection = () => {
+        const _newConfig = cloneConfig(config)
+        if (!_newConfig.general.palette) {
+          _newConfig.general.palette = {}
+        }
+
+        // If v2 migration is disabled, use the original palette name and keep v1 version
+        if (!USE_V2_MIGRATION) {
+          _newConfig.general.palette.name = palette
+          _newConfig.general.palette.version = '1.0'
+        } else {
+          // V2 migration logic
+          const migratedName = palette ? migratePaletteWithMap(palette, paletteMigrationMap, false) : undefined
+          _newConfig.general.palette.name = migratedName
+          if (isV1PaletteConfig) {
+            _newConfig.general.palette.version = '2.0'
+          }
+        }
+        updateConfig(_newConfig)
+      }
+
+      if (isV1PaletteConfig) {
+        setPendingPaletteSelection({ palette, action: executeSelection, type: 'general' })
+        setShowConversionModal(true)
+      } else {
+        executeSelection()
+      }
+    } catch (error) {
+      console.error('COVE: Error in handlePaletteSelection:', error)
+    }
+  }
+
+  // Two-color palette migration function
+  const handleTwoColorPaletteSelection = (palette: string) => {
+    try {
+      // Check if config exists and has basic structure
+      if (!config) {
+        console.error('COVE: Config is undefined in handleTwoColorPaletteSelection')
+        return
+      }
+
+      // Check if it's a v1 palette configuration
+      const isV1PaletteConfig = isV1Palette(config)
+
+      const executeSelection = () => {
+        const _newConfig = cloneConfig(config)
+        if (!_newConfig.twoColor) {
+          _newConfig.twoColor = { palette: '', isPaletteReversed: false }
+        }
+
+        // If v2 migration is disabled, use the original palette name and keep v1 version
+        if (!USE_V2_MIGRATION) {
+          _newConfig.twoColor.palette = palette
+          if (!_newConfig.general) {
+            _newConfig.general = {}
+          }
+          if (!_newConfig.general.palette) {
+            _newConfig.general.palette = {}
+          }
+          _newConfig.general.palette.version = '1.0'
+        } else {
+          // V2 migration logic
+          const migratedPaletteName = isV1PaletteConfig
+            ? migratePaletteWithMap(palette, twoColorPaletteMigrationMap, false)
+            : palette
+
+          _newConfig.twoColor.palette = migratedPaletteName
+
+          if (isV1PaletteConfig) {
+            if (!_newConfig.general) {
+              _newConfig.general = {}
+            }
+            if (!_newConfig.general.palette) {
+              _newConfig.general.palette = {}
+            }
+            _newConfig.general.palette.version = '2.0'
+
+            // Create backup for rollback functionality (consistent with standard format)
+            if (!_newConfig.general.palette.backups) {
+              _newConfig.general.palette.backups = []
+            }
+            _newConfig.general.palette.backups.push({
+              name: config.twoColor?.palette || palette,
+              version: '1.0',
+              isReversed: false,
+              type: 'twoColor'
+            })
+          }
+        }
+        updateConfig(_newConfig)
+      }
+
+      if (isV1PaletteConfig) {
+        setPendingPaletteSelection({ palette, action: executeSelection, type: 'twoColor' })
+        setShowConversionModal(true)
+      } else {
+        executeSelection()
+      }
+    } catch (error) {
+      console.error('COVE: Error in handleTwoColorPaletteSelection:', error)
+    }
+  }
+
+  // Forecast palette selection - includes v1/v2 migration modal logic
+  const handleForecastPaletteSelection = (palette: string, seriesIndex: number, stageIndex: number) => {
+    try {
+      if (!config) {
+        console.error('COVE: Config is undefined in handleForecastPaletteSelection')
+        return
+      }
+
+      // Check if it's a v1 palette configuration
+      const isV1PaletteConfig = isV1Palette(config)
+
+      const executeSelection = () => {
+        const copyOfSeries = [...config.series]
+        const copyOfStages = [...(copyOfSeries[seriesIndex].stages || [])]
+        copyOfStages[stageIndex] = { ...copyOfStages[stageIndex], color: palette }
+        copyOfSeries[seriesIndex] = { ...copyOfSeries[seriesIndex], stages: copyOfStages }
+
+        const _newConfig = cloneConfig(config)
+        _newConfig.series = copyOfSeries
+
+        // If this is the first v2 palette selection, upgrade to v2
+        if (isV1PaletteConfig && USE_V2_MIGRATION) {
+          if (!_newConfig.general) {
+            _newConfig.general = {}
+          }
+          if (!_newConfig.general.palette) {
+            _newConfig.general.palette = {}
+          }
+          _newConfig.general.palette.version = '2.0'
+
+          // Forecast-specific migration map for v1 → v2 palette names (all lowercase-hyphen format)
+          const forecastPaletteMigrationMap: Record<string, string> = {
+            // Sequential Blue variants → sequential-blue
+            'sequential-blue': 'sequential-blue',
+            'sequential-blue-two': 'sequential-blue',
+            'sequential-blue-three': 'sequential-blue',
+            'sequential-blue-2-(mpx)': 'sequential-blue',
+            'sequential-blue-2-mpx': 'sequential-blue',
+            // Sequential Orange variants → sequential-orange
+            'sequential-orange': 'sequential-orange',
+            'sequential-orange-two': 'sequential-orange',
+            'sequential-orange-(mpx)': 'sequential-orange',
+            'sequential-orange-mpx': 'sequential-orange',
+            // Other sequential palettes (no variants, just normalize)
+            'sequential-green': 'sequential-green',
+            'sequential-purple': 'sequential-purple',
+            'sequential-teal': 'sequential-teal',
+            // Reverse variants - Sequential Blue
+            'sequential-bluereverse': 'sequential-bluereverse',
+            'sequential-blue-reverse': 'sequential-bluereverse',
+            'sequential-blue-tworeverse': 'sequential-bluereverse',
+            'sequential-blue-two-reverse': 'sequential-bluereverse',
+            'sequential-blue-threereverse': 'sequential-bluereverse',
+            'sequential-blue-three-reverse': 'sequential-bluereverse',
+            'sequential-blue-2-(mpx)reverse': 'sequential-bluereverse',
+            'sequential-blue-2-(mpx)-reverse': 'sequential-bluereverse',
+            'sequential-blue-2-mpxreverse': 'sequential-bluereverse',
+            'sequential-blue-2-mpx-reverse': 'sequential-bluereverse',
+            // Reverse variants - Sequential Orange
+            'sequential-orangereverse': 'sequential-orangereverse',
+            'sequential-orange-reverse': 'sequential-orangereverse',
+            'sequential-orange-tworeverse': 'sequential-orangereverse',
+            'sequential-orange-two-reverse': 'sequential-orangereverse',
+            'sequential-orange-(mpx)reverse': 'sequential-orangereverse',
+            'sequential-orange-(mpx)-reverse': 'sequential-orangereverse',
+            'sequential-orange-mpxreverse': 'sequential-orangereverse',
+            'sequential-orange-mpx-reverse': 'sequential-orangereverse',
+            // Reverse variants - Other sequential palettes
+            'sequential-greenreverse': 'sequential-greenreverse',
+            'sequential-green-reverse': 'sequential-greenreverse',
+            'sequential-purplereverse': 'sequential-purplereverse',
+            'sequential-purple-reverse': 'sequential-purplereverse',
+            'sequential-tealreverse': 'sequential-tealreverse',
+            'sequential-teal-reverse': 'sequential-tealreverse'
+          }
+
+          // Migrate and normalize all forecast stage colors to v2 format
+          _newConfig.series.forEach((series: any) => {
+            if (series.type === 'Forecasting' && series.stages) {
+              series.stages.forEach((stage: any) => {
+                if (stage.color) {
+                  // First, try to migrate using the map
+                  const migrated = forecastPaletteMigrationMap[stage.color] || stage.color
+                  // Then normalize to lowercase with hyphens
+                  stage.color = migrated.toLowerCase().replace(/ /g, '-').replace(/_/g, '-')
+                }
+              })
+            }
+          })
+        }
+
+        updateConfig(_newConfig)
+      }
+
+      if (isV1PaletteConfig) {
+        setPendingPaletteSelection({ palette, action: executeSelection, type: 'forecast', seriesIndex, stageIndex })
+        setShowConversionModal(true)
+      } else {
+        executeSelection()
+      }
+    } catch (error) {
+      console.error('COVE: Error in handleForecastPaletteSelection:', error)
+    }
+  }
+
+  // Modal handlers
+  const handleConversionConfirm = () => {
+    if (pendingPaletteSelection) {
+      pendingPaletteSelection.action()
+    }
+    setShowConversionModal(false)
+    setPendingPaletteSelection(null)
+  }
+
+  const handleConversionCancel = () => {
+    // Don't update config - just close modal and discard pending selection
+    setShowConversionModal(false)
+    setPendingPaletteSelection(null)
+  }
+
+  const handleReturnToV1 = () => {
+    if (pendingPaletteSelection) {
+      const _newConfig = cloneConfig(config)
+      const { palette, type } = pendingPaletteSelection
+
+      // Handle based on palette type
+      if (type === 'forecast') {
+        // Forecast palette selection
+        const { seriesIndex, stageIndex } = pendingPaletteSelection
+        if (seriesIndex !== undefined && stageIndex !== undefined) {
+          const copyOfSeries = [..._newConfig.series]
+          const copyOfStages = [...copyOfSeries[seriesIndex].stages]
+          copyOfStages[stageIndex] = { ...copyOfStages[stageIndex], color: palette }
+          copyOfSeries[seriesIndex] = { ...copyOfSeries[seriesIndex], stages: copyOfStages }
+          _newConfig.series = copyOfSeries
+        }
+      } else if (type === 'twoColor') {
+        // Two-color palette selection
+        if (!_newConfig.twoColor) {
+          _newConfig.twoColor = { palette: '', isPaletteReversed: false }
+        }
+        _newConfig.twoColor.palette = palette
+      } else {
+        // General palette selection (type === 'general' or undefined for backwards compatibility)
+        if (!_newConfig.general) {
+          _newConfig.general = {}
+        }
+        if (!_newConfig.general.palette) {
+          _newConfig.general.palette = {}
+        }
+        _newConfig.general.palette.name = palette
+      }
+
+      // Set version to V1
+      if (!_newConfig.general) {
+        _newConfig.general = {}
+      }
+      if (!_newConfig.general.palette) {
+        _newConfig.general.palette = {}
+      }
+      _newConfig.general.palette.version = '1.0'
+
+      updateConfig(_newConfig)
+    }
+    setShowConversionModal(false)
+    setPendingPaletteSelection(null)
+  }
+
   const validateMaxValue = () => {
     const enteredValue = config[section].max
     const enteredRightMax = config[section].rightMax
@@ -1232,18 +1566,6 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
         )
       }
     })
-
-    let columnsByKey = {}
-    config.data.forEach(datum => {
-      Object.keys(datum).forEach(key => {
-        columnsByKey[key] = columnsByKey[key] || []
-        const value = typeof datum[key] === 'number' ? datum[key].toString() : datum[key]
-
-        if (columnsByKey[key].indexOf(value) === -1) {
-          columnsByKey[key].push(value)
-        }
-      })
-    })
   }
 
   // for pie charts
@@ -1261,18 +1583,6 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
         )
       }
     })
-
-    let columnsByKey = {}
-    data.forEach(datum => {
-      Object.keys(datum).forEach(key => {
-        columnsByKey[key] = columnsByKey[key] || []
-        const value = typeof datum[key] === 'number' ? datum[key].toString() : datum[key]
-
-        if (columnsByKey[key].indexOf(value) === -1) {
-          columnsByKey[key].push(value)
-        }
-      })
-    })
   }
 
   const removeAdditionalColumn = columnName => {
@@ -1379,11 +1689,14 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
     handleHighlightedBarLegendLabel,
     handleUpdateHighlightedBar,
     handleRemoveHighlightedBar,
-    isPaletteReversed: config.isPaletteReversed,
+    isPaletteReversed: config.general?.palette?.isReversed,
     highlightedSeriesValues,
     handleUpdateHighlightedBorderWidth,
     handleUpdateHighlightedBarColor,
-    setLollipopShape
+    setLollipopShape,
+    handlePaletteSelection,
+    handleTwoColorPaletteSelection,
+    handleForecastPaletteSelection
   }
   if (isLoading) {
     return <></>
@@ -1478,20 +1791,25 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                             options={getColumns()}
                           />
                           {config.series && config.series.length !== 0 && (
-                            <Panels.Series.Wrapper getColumns={getColumns}>
+                            <Panels.Series.Wrapper
+                              getColumns={getColumns}
+                              handleForecastPaletteSelection={handleForecastPaletteSelection}
+                            >
                               <fieldset>
-                                <legend className='edit-label float-left'>Displaying</legend>
-                                <Tooltip style={{ textTransform: 'none' }}>
-                                  <Tooltip.Target>
-                                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                                  </Tooltip.Target>
-                                  <Tooltip.Content>
-                                    <p>
-                                      A data series is a set of related data points plotted in a chart and typically
-                                      represented in the chart legend.
-                                    </p>
-                                  </Tooltip.Content>
-                                </Tooltip>
+                                <legend className='edit-label d-flex align-items-center'>
+                                  Displaying
+                                  <Tooltip style={{ textTransform: 'none' }}>
+                                    <Tooltip.Target>
+                                      <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                                    </Tooltip.Target>
+                                    <Tooltip.Content>
+                                      <p>
+                                        A data series is a set of related data points plotted in a chart and typically
+                                        represented in the chart legend.
+                                      </p>
+                                    </Tooltip.Content>
+                                  </Tooltip>
+                                </legend>
                               </fieldset>
 
                               <DragDropContext
@@ -1606,9 +1924,30 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                   )}
                   {config.visualizationType !== 'Pie' && (
                     <>
-                      <label>
-                        <span className='edit-label'>
-                          Axis Type
+                      <Select
+                        label='Axis Type'
+                        value={config.yAxis.type}
+                        options={[
+                          { value: 'linear', label: 'Numeric (Linear Scale)' },
+                          ...(config.visualizationSubType !== 'stacked'
+                            ? [{ value: 'logarithmic', label: 'Numeric (Logarithmic Scale)' }]
+                            : []),
+                          ...(config.orientation !== 'horizontal'
+                            ? [{ value: 'categorical', label: 'Categorical' }]
+                            : [])
+                        ]}
+                        section='yAxis'
+                        fieldName='type'
+                        updateField={(_section, _subsection, _fieldName, value) => {
+                          updateConfig({
+                            ...config,
+                            yAxis: {
+                              ...config.yAxis,
+                              type: value
+                            }
+                          })
+                        }}
+                        tooltip={
                           <Tooltip style={{ textTransform: 'none', display: 'inline-block' }}>
                             <Tooltip.Target>
                               <Icon display='question' style={{ marginLeft: '0.5rem' }} />
@@ -1618,26 +1957,8 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                               exponential data, or 'Categorical' for discrete categories.
                             </Tooltip.Content>
                           </Tooltip>
-                        </span>
-                        <select
-                          value={config.yAxis.type}
-                          onChange={e =>
-                            updateConfig({
-                              ...config,
-                              yAxis: {
-                                ...config.yAxis,
-                                type: e.target.value
-                              }
-                            })
-                          }
-                        >
-                          <option value='linear'>Numeric (Linear Scale)</option>
-                          {config.visualizationSubType !== 'stacked' && (
-                            <option value='logarithmic'>Numeric (Logarithmic Scale)</option>
-                          )}
-                          {config.orientation !== 'horizontal' && <option value='categorical'>Categorical</option>}
-                        </select>
-                      </label>
+                        }
+                      />
                       <CategoricalAxis
                         config={config}
                         updateConfig={updateConfig}
@@ -1683,25 +2004,6 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                           </Tooltip>
                         }
                       />
-                      <TextField
-                        display={!visHasCategoricalAxis()}
-                        value={config.yAxis.inlineLabel}
-                        section='yAxis'
-                        fieldName='inlineLabel'
-                        label='Inline Label'
-                        updateField={updateFieldDeprecated}
-                        maxLength={35}
-                        tooltip={
-                          <Tooltip style={{ textTransform: 'none' }}>
-                            <Tooltip.Target>
-                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                            </Tooltip.Target>
-                            <Tooltip.Content>
-                              <p>35 character limit</p>
-                            </Tooltip.Content>
-                          </Tooltip>
-                        }
-                      />
                       {config.runtime.seriesKeys &&
                         config.runtime.seriesKeys.length === 1 &&
                         !['Box Plot', 'Deviation Bar', 'Forest Plot'].includes(config.visualizationType) && (
@@ -1940,6 +2242,30 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                     updateField={updateFieldDeprecated}
                     min={0}
                   />{' '}
+                  <CheckBox
+                    value={config.dataFormat.preserveOriginalDecimals}
+                    section='dataFormat'
+                    fieldName='preserveOriginalDecimals'
+                    label='Preserve Original Decimal Places'
+                    updateField={updateFieldDeprecated}
+                    tooltip={
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon
+                            display='question'
+                            style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                          />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>
+                            When enabled, numbers will display with their original decimal places from the data source,
+                            bypassing the "Round to decimal point" setting above. This is useful when you have mixed
+                            data (e.g., whole numbers in one column and percentages with decimals in another).
+                          </p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                  />
                   <div className='two-col-inputs'>
                     <TextField
                       value={config.dataFormat.prefix}
@@ -2203,28 +2529,25 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                                 />
                               </label>
 
-                              <label>
-                                Anchor Line Style
-                                <select
-                                  value={config.yAxis.anchors[index].lineStyle || ''}
-                                  onChange={e => {
-                                    const copiedAnchors = [...config.yAxis.anchors]
-                                    copiedAnchors[index].lineStyle = e.target.value
-                                    updateConfig({
-                                      ...config,
-                                      yAxis: {
-                                        ...config.yAxis,
-                                        anchors: copiedAnchors
-                                      }
-                                    })
-                                  }}
-                                >
-                                  <option>Select</option>
-                                  {lineOptions.map(line => (
-                                    <option key={line.key}>{line.value}</option>
-                                  ))}
-                                </select>
-                              </label>
+                              <Select
+                                value={config.yAxis.anchors[index].lineStyle || ''}
+                                label='Anchor Line Style'
+                                onChange={e => {
+                                  const copiedAnchors = [...config.yAxis.anchors]
+                                  copiedAnchors[index].lineStyle = e.target.value
+                                  updateConfig({
+                                    ...config,
+                                    yAxis: {
+                                      ...config.yAxis,
+                                      anchors: copiedAnchors
+                                    }
+                                  })
+                                }}
+                                options={[
+                                  { value: '', label: 'Select' },
+                                  ...lineOptions.map(line => ({ value: line.value, label: line.value }))
+                                ]}
+                              />
                             </AccordionItemPanel>
                           </AccordionItem>
                         ))}
@@ -2328,28 +2651,25 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                                 />
                               </label>
 
-                              <label>
-                                Anchor Line Style
-                                <select
-                                  value={config.xAxis.anchors[index].lineStyle || ''}
-                                  onChange={e => {
-                                    const copiedAnchors = [...config.xAxis.anchors]
-                                    copiedAnchors[index].lineStyle = e.target.value
-                                    updateConfig({
-                                      ...config,
-                                      xAxis: {
-                                        ...config.xAxis,
-                                        anchors: copiedAnchors
-                                      }
-                                    })
-                                  }}
-                                >
-                                  <option>Select</option>
-                                  {lineOptions.map(line => (
-                                    <option key={line.key}>{line.value}</option>
-                                  ))}
-                                </select>
-                              </label>
+                              <Select
+                                value={config.xAxis.anchors[index].lineStyle || ''}
+                                label='Anchor Line Style'
+                                onChange={e => {
+                                  const copiedAnchors = [...config.xAxis.anchors]
+                                  copiedAnchors[index].lineStyle = e.target.value
+                                  updateConfig({
+                                    ...config,
+                                    xAxis: {
+                                      ...config.xAxis,
+                                      anchors: copiedAnchors
+                                    }
+                                  })
+                                }}
+                                options={[
+                                  { value: '', label: 'Select' },
+                                  ...lineOptions.map(line => ({ value: line.value, label: line.value }))
+                                ]}
+                              />
                             </AccordionItemPanel>
                           </AccordionItem>
                         ))}
@@ -2555,9 +2875,9 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                     <>
                       {config.visualizationType !== 'Forest Plot' && (
                         <>
-                          <label>
-                            <span className='edit-label'>
-                              Data Scaling Type
+                          <Select
+                            label='Data Scaling Type'
+                            tooltip={
                               <Tooltip style={{ textTransform: 'none', display: 'inline-block' }}>
                                 <Tooltip.Target>
                                   <Icon display='question' style={{ marginLeft: '0.5rem' }} />
@@ -2567,31 +2887,32 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                                   time-series data.
                                 </Tooltip.Content>
                               </Tooltip>
-                            </span>
-                            <select
-                              value={config.xAxis.type}
-                              onChange={e =>
-                                updateConfig({
-                                  ...config,
-                                  xAxis: {
-                                    ...config.xAxis,
-                                    type: e.target.value
-                                  }
-                                })
-                              }
-                            >
-                              {config.visualizationType !== 'Bump Chart' && (
-                                <option value='categorical'>Categorical (Linear Scale)</option>
-                              )}
-                              {config.visualizationType !== 'Bump Chart' && (
-                                <option value='date'>Date (Linear Scale)</option>
-                              )}
-                              <option value='date-time'>Date (Date Time Scale)</option>
-                              {config.visualizationType === 'Scatter Plot' && (
-                                <option value={'continuous'}>Continuous</option>
-                              )}
-                            </select>
-                          </label>
+                            }
+                            value={config.xAxis.type}
+                            options={[
+                              ...(!['Bump Chart', 'Forecasting'].includes(config.visualizationType)
+                                ? [{ label: 'Categorical (Linear Scale)', value: 'categorical' }]
+                                : []),
+                              ...(!['Bump Chart'].includes(config.visualizationType)
+                                ? [{ label: 'Date (Linear Scale)', value: 'date' }]
+                                : []),
+                              { label: 'Date (Date Time Scale)', value: 'date-time' },
+                              ...(config.visualizationType === 'Scatter Plot'
+                                ? [{ label: 'Continuous', value: 'continuous' }]
+                                : [])
+                            ]}
+                            section='xAxis'
+                            fieldName='type'
+                            updateField={(_section, _subsection, _fieldName, value) => {
+                              updateConfig({
+                                ...config,
+                                xAxis: {
+                                  ...config.xAxis,
+                                  type: value
+                                }
+                              })
+                            }}
+                          />
                           <CheckBox
                             value={config.xAxis.manual}
                             section='xAxis'
@@ -2772,7 +3093,9 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                         </>
                       )}
 
-                      {(isDateScale(config.xAxis) || config?.visualizationType === 'Bump Chart') && (
+                      {(isDateScale(config.xAxis) ||
+                        config?.visualizationType === 'Bump Chart' ||
+                        config?.visualizationType === 'Forecasting') && (
                         <>
                           <p style={{ padding: '1.5em 0 0.5em', fontSize: '.9rem', lineHeight: '1rem' }}>
                             Format how charts should parse and display your dates using{' '}
@@ -3306,21 +3629,19 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                                     Remove
                                   </button>
                                   <p>Highlighted Bar {i + 1}</p>
-                                  <label>
-                                    <span className='edit-label column-heading'>Value</span>
-                                    <select
-                                      value={config.highlightedBarValues[i].value}
-                                      onChange={e => handleUpdateHighlightedBar(e, i)}
-                                    >
-                                      <option value=''>- Select Value -</option>
-                                      {highlightedSeriesValues &&
-                                        [...new Set(highlightedSeriesValues)]
-                                          .sort()
-                                          .map(option => (
-                                            <option key={`special-class-value-option-${i}-${option}`}>{option}</option>
-                                          ))}
-                                    </select>
-                                  </label>
+                                  <Select
+                                    value={config.highlightedBarValues[i].value}
+                                    label='Value'
+                                    onChange={e => handleUpdateHighlightedBar(e, i)}
+                                    options={[
+                                      { value: '', label: '- Select Value -' },
+                                      ...(highlightedSeriesValues
+                                        ? [...new Set(highlightedSeriesValues)]
+                                            .sort()
+                                            .map(option => ({ value: option, label: option }))
+                                        : [])
+                                    ]}
+                                  />
                                   <label>
                                     <span className='edit-label column-heading'>Color</span>
                                     <input
@@ -3524,28 +3845,25 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                                 />
                               </label>
 
-                              <label>
-                                Anchor Line Style
-                                <select
-                                  value={config.xAxis.anchors[index].lineStyle || ''}
-                                  onChange={e => {
-                                    const copiedAnchors = [...config.xAxis.anchors]
-                                    copiedAnchors[index].lineStyle = e.target.value
-                                    updateConfig({
-                                      ...config,
-                                      xAxis: {
-                                        ...config.xAxis,
-                                        anchors: copiedAnchors
-                                      }
-                                    })
-                                  }}
-                                >
-                                  <option>Select</option>
-                                  {lineOptions.map(line => (
-                                    <option key={line.key}>{line.value}</option>
-                                  ))}
-                                </select>
-                              </label>
+                              <Select
+                                value={config.xAxis.anchors[index].lineStyle || ''}
+                                label='Anchor Line Style'
+                                onChange={e => {
+                                  const copiedAnchors = [...config.xAxis.anchors]
+                                  copiedAnchors[index].lineStyle = e.target.value
+                                  updateConfig({
+                                    ...config,
+                                    xAxis: {
+                                      ...config.xAxis,
+                                      anchors: copiedAnchors
+                                    }
+                                  })
+                                }}
+                                options={[
+                                  { value: '', label: 'Select' },
+                                  ...lineOptions.map(line => ({ value: line.value, label: line.value }))
+                                ]}
+                              />
                             </AccordionItemPanel>
                           </AccordionItem>
                         ))}
@@ -3653,28 +3971,25 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                                 />
                               </label>
 
-                              <label>
-                                Anchor Line Style
-                                <select
-                                  value={config.yAxis.anchors[index].lineStyle || ''}
-                                  onChange={e => {
-                                    const copiedAnchors = [...config.yAxis.anchors]
-                                    copiedAnchors[index].lineStyle = e.target.value
-                                    updateConfig({
-                                      ...config,
-                                      yAxis: {
-                                        ...config.yAxis,
-                                        anchors: copiedAnchors
-                                      }
-                                    })
-                                  }}
-                                >
-                                  <option>Select</option>
-                                  {lineOptions.map(line => (
-                                    <option key={line.key}>{line.value}</option>
-                                  ))}
-                                </select>
-                              </label>
+                              <Select
+                                value={config.yAxis.anchors[index].lineStyle || ''}
+                                label='Anchor Line Style'
+                                onChange={e => {
+                                  const copiedAnchors = [...config.yAxis.anchors]
+                                  copiedAnchors[index].lineStyle = e.target.value
+                                  updateConfig({
+                                    ...config,
+                                    yAxis: {
+                                      ...config.yAxis,
+                                      anchors: copiedAnchors
+                                    }
+                                  })
+                                }}
+                                options={[
+                                  { value: '', label: 'Select' },
+                                  ...lineOptions.map(line => ({ value: line.value, label: line.value }))
+                                ]}
+                              />
                             </AccordionItemPanel>
                           </AccordionItem>
                         ))}
@@ -4126,6 +4441,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
               </>
             )}
             <Panels.Visual name='Visual' />
+            <Panels.PatternSettings name='PatternSettings' />
             {/* Spark Line has no data table */}
             {config.visualizationType !== 'Spark Line' && (
               <AccordionItem>
@@ -4145,11 +4461,29 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
             )}
             <Panels.Annotate name='Text Annotations' />
             {/* {(config.visualizationType === 'Bar' || config.visualizationType === 'Line') && <Panels.DateHighlighting name='Date Highlighting' />} */}
+            <PanelMarkup
+              name='Markup Variables'
+              markupVariables={config.markupVariables || []}
+              data={rawData}
+              enableMarkupVariables={config.enableMarkupVariables || false}
+              onMarkupVariablesChange={variables => updateField(null, null, 'markupVariables', variables)}
+              onToggleEnable={enabled => updateField(null, null, 'enableMarkupVariables', enabled)}
+            />
+            <Panels.SmallMultiples name='Small Multiples' />
           </Accordion>
           {config.type !== 'Spark Line' && (
             <AdvancedEditor loadConfig={updateConfig} config={config} convertStateToConfig={convertStateToConfig} />
           )}
         </Layout.Sidebar>
+
+        {showConversionModal && (
+          <PaletteConversionModal
+            onConfirm={handleConversionConfirm}
+            onCancel={handleConversionCancel}
+            onReturnToV1={handleReturnToV1}
+            paletteName={pendingPaletteSelection?.palette}
+          />
+        )}
       </ErrorBoundary>
     </EditorPanelContext.Provider>
   )