@cdc/chart 4.26.4 → 4.26.6

package/src/components/EditorPanel/EditorPanel.tsx

@@ -61,6 +61,11 @@ import { paletteMigrationMap, twoColorPaletteMigrationMap } from '@cdc/core/help
 import { isV1Palette, migratePaletteWithMap } from '@cdc/core/helpers/palettes/utils'
 import { USE_V2_MIGRATION } from '@cdc/core/helpers/constants'
 import { getSeriesOwnedColumnNames } from '../../helpers/seriesColumnSettings'
+import {
+  HEATMAP_CONFIG_DEFAULTS,
+  MAX_HEATMAP_COLOR_BUCKETS,
+  MIN_HEATMAP_COLOR_BUCKETS
+} from '../HeatMap/heatmap.constants'
 
 interface PreliminaryProps {
   config: ChartConfig
@@ -137,7 +142,8 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
       hideBarSymbol: false,
       hideLineStyle: false,
       circleSize: 6,
-      displayGray: true
+      displayGray: true,
+      weight: undefined
     }
     preliminaryData.push(defaultValues)
     updateConfig({ ...config, preliminaryData })
@@ -192,7 +198,8 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
             type,
             value,
             hideBarSymbol,
-            hideLineStyle
+            hideLineStyle,
+            weight
           },
           i
         ) => (
@@ -291,6 +298,16 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
                                 updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
                                 options={getStyleOptions(type)}
                               />
+                              <TextField
+                                type='number'
+                                min={1}
+                                max={9}
+                                value={weight}
+                                fieldName='weight'
+                                label='Line Weight'
+                                placeholder='Default'
+                                updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                              />
                               <CheckBox
                                 value={hideLineStyle}
                                 fieldName='hideLineStyle'
@@ -491,6 +508,18 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
                               updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
                             />
                           )}
+                          {style && !style.includes('Circles') && (
+                            <TextField
+                              type='number'
+                              min={1}
+                              max={9}
+                              value={weight}
+                              fieldName='weight'
+                              label='Line Weight'
+                              placeholder='Default'
+                              updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                            />
+                          )}
                           {style !== 'Filled Circles' && (
                             <TextField
                               value={label}
@@ -862,6 +891,8 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
     visSupportsDateCategoryNumTicks,
     visSupportsDateCategoryTickRotation,
     visSupportsDynamicSeries,
+    visSupportsAutoMaxStrategy,
+    visSupportsFilterDomainBehavior,
     visSupportsFilters,
     visSupportsLeftValueAxis,
     visSupportsPreliminaryData,
@@ -1189,12 +1220,23 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
     return filter ? filteredColumns : allColumns
   }
 
+  const isHeatMap = config.visualizationType === 'HeatMap'
+  const heatMapOwnedColumnNames = useMemo(
+    () => [config.xAxis?.dataKey, ...(config.series || []).map(series => series.dataKey)].filter(Boolean),
+    [config.xAxis?.dataKey, config.series]
+  )
+
   const getLegendStyleOptions = (option: 'style' | 'subStyle' | 'shapes' | 'groupBy'): string[] => {
     const options: string[] = []
 
     switch (option) {
       case 'style':
         options.push('circles', 'boxes')
+        if (config.visualizationType === 'HeatMap') {
+          if (!['right', 'left'].includes(config.legend.position) && config.legend.position) {
+            options.push('gradient')
+          }
+        }
         if (
           config.visualizationType === 'Bar' &&
           (!['right', 'left'].includes(config.legend.position) || !config.legend.position)
@@ -1209,7 +1251,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
         }
         break
       case 'subStyle':
-        if (config.visualizationType === 'Bar') {
+        if (config.visualizationType === 'Bar' || config.visualizationType === 'HeatMap') {
           options.push('linear blocks')
         } else {
           options.push('linear blocks', 'smooth')
@@ -1242,6 +1284,11 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
     return unique ? [...new Set(values)] : values
   }
 
+  const getAvailableExclusionValues = dataKey => {
+    const excludedKeys = (config.exclusions.keys || []).map(String)
+    return getDataValues(dataKey, true).filter(value => !excludedKeys.includes(String(value)))
+  }
+
   // prettier-ignore
   const {
     highlightedBarValues,
@@ -1338,6 +1385,15 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
   if (config.isLollipopChart && config?.series?.length === 0) {
     config.runtime.editorErrorMessage = 'Add a data series'
   }
+  if (config.visualizationType === 'HeatMap') {
+    const missingMappings = [
+      !config.xAxis?.dataKey && 'Date/Category Axis',
+      (!config.series || config.series.length === 0) && 'Data Series'
+    ].filter(Boolean)
+
+    config.runtime.editorErrorMessage =
+      missingMappings.length > 0 ? `${missingMappings.join(', ')} must be set for heatmaps.` : ''
+  }
 
   const section = config.orientation === 'horizontal' ? 'xAxis' : 'yAxis'
   const [warningMsg, setWarningMsg] = useState({ maxMsg: '', minMsg: '', rightMaxMessage: '', minMsgRight: '' })
@@ -1737,6 +1793,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
     'Bump Chart',
     'Area Chart',
     'Combo',
+    'HeatMap',
     'Line',
     'Bar',
     'Forecasting',
@@ -1920,6 +1977,76 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
     return strippedState
   }
 
+  const renderHeatMapSettingsAccordion = () => {
+    if (config.visualizationType !== 'HeatMap') return null
+
+    return (
+      <AccordionItem>
+        <AccordionItemHeading>
+          <AccordionItemButton>HeatMap Settings</AccordionItemButton>
+        </AccordionItemHeading>
+        <AccordionItemPanel>
+          <p className='helper-text'>Selected data series columns provide the heatmap cell values.</p>
+          <CheckBox
+            value={Boolean(config.heatmap?.showCellValues ?? HEATMAP_CONFIG_DEFAULTS.showCellValues)}
+            section='heatmap'
+            fieldName='showCellValues'
+            label='Show Cell Values'
+            updateField={updateFieldDeprecated}
+          />
+          <TextField
+            value={config.heatmap?.cellPadding ?? HEATMAP_CONFIG_DEFAULTS.cellPadding}
+            type='number'
+            min={0}
+            section='heatmap'
+            fieldName='cellPadding'
+            label='Cell Padding'
+            updateField={updateFieldDeprecated}
+          />
+          <TextField
+            value={config.heatmap?.rowLabelGap ?? HEATMAP_CONFIG_DEFAULTS.rowLabelGap}
+            type='number'
+            min={0}
+            section='heatmap'
+            fieldName='rowLabelGap'
+            label='Row Label Gap'
+            updateField={updateFieldDeprecated}
+          />
+          <TextField
+            value={config.heatmap?.columnLabelGap ?? HEATMAP_CONFIG_DEFAULTS.columnLabelGap}
+            type='number'
+            min={0}
+            section='heatmap'
+            fieldName='columnLabelGap'
+            label='Column Label Gap'
+            updateField={updateFieldDeprecated}
+          />
+          <TextField
+            value={config.heatmap?.colorBucketCount ?? HEATMAP_CONFIG_DEFAULTS.colorBucketCount}
+            type='number'
+            min={MIN_HEATMAP_COLOR_BUCKETS}
+            max={MAX_HEATMAP_COLOR_BUCKETS}
+            step={1}
+            section='heatmap'
+            fieldName='colorBucketCount'
+            label='Data Grouping'
+            updateField={updateFieldDeprecated}
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  Choose the number of value groups used to color the heatmap. Values are limited to 1-9.
+                </Tooltip.Content>
+              </Tooltip>
+            }
+          />
+        </AccordionItemPanel>
+      </AccordionItem>
+    )
+  }
+
   return (
     <EditorPanelContext.Provider value={editorContextValues}>
       <BaseEditorPanel
@@ -1950,7 +2077,10 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                           {(!config.series ||
                             config.series.length === 0 ||
                             (config.visualizationType === 'Paired Bar' && config.series.length < 2)) &&
-                            !config.dynamicSeries && <WarningImage width='25' className='warning-icon' />}
+                            !config.dynamicSeries &&
+                            config.visualizationType !== 'HeatMap' && (
+                              <WarningImage width='25' className='warning-icon' />
+                            )}
                         </AccordionItemButton>
                       </AccordionItemHeading>
                       <AccordionItemPanel>
@@ -1987,9 +2117,21 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                           )}
                         {(!visSupportsDynamicSeries() || !config.dynamicSeries) && (
                           <>
+                            {config.visualizationType === 'HeatMap' && (
+                              <p className='helper-text'>
+                                Add one or more data series to create heatmap rows. Each selected series becomes a row
+                                in the heatmap, while the Date/Category Axis provides the columns.
+                              </p>
+                            )}
                             {(!config.series || config.series.length === 0) &&
                               !config.dynamicSeries &&
-                              config.visualizationType !== 'Paired Bar' && (
+                              config.visualizationType !== 'Paired Bar' &&
+                              config.visualizationType !== 'HeatMap' && (
+                                <p className='warning'>At least one series is required</p>
+                              )}
+                            {(!config.series || config.series.length === 0) &&
+                              !config.dynamicSeries &&
+                              config.visualizationType === 'HeatMap' && (
                                 <p className='warning'>At least one series is required</p>
                               )}
                             {(!config.series || config.series.length === 0 || config.series.length < 2) &&
@@ -2010,7 +2152,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                                   }
                                   e.target.value = ''
                                 }}
-                                options={getColumns()}
+                                options={getColumns().filter(column => column !== config.xAxis?.dataKey)}
                               />
                               {config.series && config.series.length !== 0 && (
                                 <Panels.Series.Wrapper
@@ -2022,16 +2164,23 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                                     droppableId='chart-series-order'
                                     label={
                                       <>
-                                        Displaying
+                                        {config.visualizationType === 'HeatMap' ? 'Displaying Rows' : '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>
+                                            {config.visualizationType === 'HeatMap' ? (
+                                              <p>
+                                                Each selected data series becomes a row in the heatmap. Reorder these
+                                                entries to change the row order shown in the visualization.
+                                              </p>
+                                            ) : (
+                                              <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>
                                       </>
@@ -2108,9 +2257,9 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                           : config.orientation === 'vertical'
                           ? 'Left Value Axis'
                           : 'Value Axis'}
-                        {config.visualizationType === 'Pie' && !config.yAxis.dataKey && (
+                        {config.visualizationType === 'Pie' && !config.yAxis.dataKey ? (
                           <WarningImage width='25' className='warning-icon' />
-                        )}
+                        ) : null}
                       </AccordionItemButton>
                     </AccordionItemHeading>
                     <AccordionItemPanel>
@@ -2158,7 +2307,86 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                           />
                         </>
                       )}
-                      {config.visualizationType !== 'Pie' && (
+                      {config.visualizationType === 'HeatMap' && (
+                        <>
+                          <TextField
+                            value={config.yAxis.label}
+                            section='yAxis'
+                            fieldName='label'
+                            label='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>
+                            }
+                          />
+                          <Select
+                            value={config.yAxis.titlePlacement || 'side'}
+                            section='yAxis'
+                            fieldName='titlePlacement'
+                            label='Label Placement'
+                            updateField={updateFieldDeprecated}
+                            options={[
+                              { value: 'side', label: 'Side' },
+                              { value: 'top', label: 'Top' }
+                            ]}
+                          />
+                          <TextField
+                            value={config.yAxis.size}
+                            type='number'
+                            section='yAxis'
+                            fieldName='size'
+                            label='Size (Width)'
+                            className='number-narrow'
+                            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>Increase the size if month labels are crowded or overlap the chart area.</p>
+                                </Tooltip.Content>
+                              </Tooltip>
+                            }
+                          />
+                          <CheckBox
+                            value={config.yAxis.hideAxis}
+                            section='yAxis'
+                            fieldName='hideAxis'
+                            label='Hide Axis'
+                            updateField={updateFieldDeprecated}
+                          />
+                          <CheckBox
+                            value={config.yAxis.hideTicks}
+                            section='yAxis'
+                            fieldName='hideTicks'
+                            label='Hide Ticks'
+                            updateField={updateFieldDeprecated}
+                          />
+                          <TextField
+                            value={config.yAxis.tickRotation || 0}
+                            type='number'
+                            min={0}
+                            section='yAxis'
+                            fieldName='tickRotation'
+                            label='Tick rotation (Degrees)'
+                            className='number-narrow'
+                            updateField={updateFieldDeprecated}
+                          />
+                        </>
+                      )}
+                      {config.visualizationType !== 'Pie' && config.visualizationType !== 'HeatMap' && (
                         <>
                           <Select
                             label='Axis Type'
@@ -2209,18 +2437,30 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                             fieldName='label'
                             label='Label'
                             updateField={updateFieldDeprecated}
-                            maxLength={35}
+                            maxLength={config.yAxis.titlePlacement === 'side' ? 35 : undefined}
                             tooltip={
                               <Tooltip style={{ textTransform: 'none' }}>
                                 <Tooltip.Target>
                                   <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                                 </Tooltip.Target>
                                 <Tooltip.Content>
-                                  <p>35 character limit</p>
+                                  <p>35 character limit when Label Placement is Side</p>
                                 </Tooltip.Content>
                               </Tooltip>
                             }
                           />
+                          <Select
+                            display={!visHasCategoricalAxis()}
+                            value={config.yAxis.titlePlacement}
+                            section='yAxis'
+                            fieldName='titlePlacement'
+                            label='Label Placement'
+                            updateField={updateField}
+                            options={[
+                              { value: 'side', label: 'Side' },
+                              { value: 'top', label: 'Top' }
+                            ]}
+                          />
                           <TextField
                             display={!visHasCategoricalAxis()}
                             value={config.yAxis.inlineLabel}
@@ -2349,26 +2589,6 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                               title={!config.yAxis.gridLines ? 'Show gridlines to enable' : ''}
                             />
                           )}
-                          {visSupportsYPadding() && (
-                            <CheckBox
-                              value={config.yAxis.enablePadding}
-                              section='yAxis'
-                              fieldName='enablePadding'
-                              label='Add Padding to Value Axis Scale'
-                              updateField={updateFieldDeprecated}
-                            />
-                          )}
-                          {config.yAxis.enablePadding && visSupportsYPadding() && (
-                            <TextField
-                              type='number'
-                              section='yAxis'
-                              fieldName='scalePadding'
-                              label='Padding Percentage'
-                              className='number-narrow'
-                              updateField={updateFieldDeprecated}
-                              value={config.yAxis.scalePadding}
-                            />
-                          )}
                         </>
                       )}
                       <span className='divider-heading'>Number Formatting</span>
@@ -2550,32 +2770,41 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                               updateField={updateFieldDeprecated}
                             />
                           )}
-                          {visSupportsValueAxisMax() && (
-                            <TextField
-                              value={config.xAxis.max}
-                              section='xAxis'
-                              fieldName='max'
-                              label='max value'
-                              type='number'
-                              placeholder='Auto'
-                              updateField={updateFieldDeprecated}
-                            />
-                          )}
-                          <span style={{ color: 'red', display: 'block' }}>{warningMsg.maxMsg}</span>
-                          {visSupportsValueAxisMin() && (
-                            <TextField
-                              value={config.xAxis.min}
-                              section='xAxis'
-                              fieldName='min'
-                              type='number'
-                              label='min value'
-                              placeholder='Auto'
-                              updateField={updateFieldDeprecated}
-                            />
-                          )}
-                          <span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
-                          {config.visualizationType === 'Deviation Bar' && (
-                            <>
+                          <div className='axis-domain-group'>
+                            <span className='axis-domain-group__title'>Value Axis Domain</span>
+                            <div className='axis-domain-group__row'>
+                              {visSupportsValueAxisMax() && (
+                                <div className='axis-domain-group__field'>
+                                  <TextField
+                                    value={config.xAxis.max}
+                                    section='xAxis'
+                                    fieldName='max'
+                                    label='axis max value'
+                                    type='number'
+                                    placeholder='Auto'
+                                    className='axis-domain-number'
+                                    updateField={updateFieldDeprecated}
+                                  />
+                                  <span className='axis-domain-warning'>{warningMsg.maxMsg}</span>
+                                </div>
+                              )}
+                              {visSupportsValueAxisMin() && (
+                                <div className='axis-domain-group__field'>
+                                  <TextField
+                                    value={config.xAxis.min}
+                                    section='xAxis'
+                                    fieldName='min'
+                                    type='number'
+                                    label='axis min value'
+                                    placeholder='Auto'
+                                    className='axis-domain-number'
+                                    updateField={updateFieldDeprecated}
+                                  />
+                                  <span className='axis-domain-warning'>{warningMsg.minMsg}</span>
+                                </div>
+                              )}
+                            </div>
+                            {config.visualizationType === 'Deviation Bar' && (
                               <TextField
                                 value={config.xAxis.target}
                                 section='xAxis'
@@ -2583,8 +2812,104 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                                 type='number'
                                 label='Deviation point'
                                 placeholder='Auto'
+                                className='axis-domain-number'
                                 updateField={updateFieldDeprecated}
                               />
+                            )}
+                            <TextField
+                              value={config.yAxis.smallestLeftAxisMax}
+                              section='yAxis'
+                              fieldName='smallestLeftAxisMax'
+                              type='number'
+                              label='Smallest axis maximum'
+                              placeholder='Auto'
+                              className='axis-domain-number'
+                              tooltip={
+                                <Tooltip style={{ textTransform: 'none' }}>
+                                  <Tooltip.Target>
+                                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                                  </Tooltip.Target>
+                                  <Tooltip.Content>
+                                    <p>
+                                      Example: If your data only goes up to 1, the axis might show 0, 0.2, 0.4, 0.6,
+                                      0.8, 1. Setting this to 5 would make the axis show 0, 1, 2, 3, 4, 5 instead.
+                                    </p>
+                                  </Tooltip.Content>
+                                </Tooltip>
+                              }
+                              updateField={updateFieldDeprecated}
+                            />
+                            {visSupportsAutoMaxStrategy() && (
+                              <Select
+                                value={config.yAxis.autoMaxStrategy || 'default'}
+                                section='yAxis'
+                                fieldName='autoMaxStrategy'
+                                label='Automatic max strategy'
+                                updateField={updateFieldDeprecated}
+                                options={[
+                                  { value: 'default', label: 'Default' },
+                                  { value: 'clean-top-tick', label: 'Clean top tick' }
+                                ]}
+                                tooltip={
+                                  <Tooltip style={{ textTransform: 'none' }}>
+                                    <Tooltip.Target>
+                                      <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                                    </Tooltip.Target>
+                                    <Tooltip.Content>
+                                      {config.visualizationType === 'Combo' ? (
+                                        <p>
+                                          Clean top tick rounds automatic left and right axis maximums up to cleaner
+                                          tick steps before axis padding is applied.
+                                        </p>
+                                      ) : (
+                                        <p>
+                                          Clean top tick rounds the automatic value axis maximum up to a cleaner tick
+                                          step before axis padding is applied.
+                                        </p>
+                                      )}
+                                    </Tooltip.Content>
+                                  </Tooltip>
+                                }
+                              />
+                            )}
+                            {visSupportsFilterDomainBehavior() && (
+                              <Select
+                                value={config.yAxis.filterDomainBehavior || 'dynamic'}
+                                section='yAxis'
+                                fieldName='filterDomainBehavior'
+                                label='Filter Domain Behavior'
+                                updateField={updateFieldDeprecated}
+                                options={[
+                                  { value: 'dynamic', label: 'Dynamic' },
+                                  { value: 'stable', label: 'Stable' }
+                                ]}
+                                tooltip={
+                                  <Tooltip style={{ textTransform: 'none' }}>
+                                    <Tooltip.Target>
+                                      <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                                    </Tooltip.Target>
+                                    <Tooltip.Content>
+                                      {config.visualizationType === 'Combo' ? (
+                                        <p>
+                                          Dynamic rescales the value axes to the currently filtered data. Stable keeps
+                                          the left and right axes based on the full eligible dataset while still
+                                          rendering filtered rows.
+                                        </p>
+                                      ) : (
+                                        <p>
+                                          Dynamic rescales the value axis to the currently filtered data. Stable keeps
+                                          the value axis based on the full eligible dataset while still rendering
+                                          filtered rows.
+                                        </p>
+                                      )}
+                                    </Tooltip.Content>
+                                  </Tooltip>
+                                }
+                              />
+                            )}
+                          </div>
+                          {config.visualizationType === 'Deviation Bar' && (
+                            <>
                               <TextField
                                 value={config.xAxis.targetLabel || 'Target'}
                                 section='xAxis'
@@ -2604,7 +2929,8 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                           )}
                         </>
                       ) : (
-                        config.visualizationType !== 'Pie' && (
+                        config.visualizationType !== 'Pie' &&
+                        config.visualizationType !== 'HeatMap' && (
                           <>
                             <CheckBox
                               display={!visHasCategoricalAxis()}
@@ -2631,52 +2957,151 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                               updateField={updateFieldDeprecated}
                             />
 
-                            <TextField
-                              value={config.yAxis.max}
-                              section='yAxis'
-                              fieldName='max'
-                              type='number'
-                              label='left axis max value'
-                              placeholder='Auto'
-                              updateField={updateFieldDeprecated}
-                            />
-                            <span style={{ color: 'red', display: 'block' }}>{warningMsg.maxMsg}</span>
-                            {config.visualizationType !== 'Area Chart' && config.visualizationSubType !== 'stacked' && (
-                              <>
-                                <TextField
-                                  value={config.yAxis.min}
+                            <div className='axis-domain-group'>
+                              <span className='axis-domain-group__title'>Value Axis Domain</span>
+                              <div className='axis-domain-group__row'>
+                                <div className='axis-domain-group__field'>
+                                  <TextField
+                                    value={config.yAxis.max}
+                                    section='yAxis'
+                                    fieldName='max'
+                                    type='number'
+                                    label='axis max value'
+                                    placeholder='Auto'
+                                    className='axis-domain-number'
+                                    updateField={updateFieldDeprecated}
+                                  />
+                                  <span className='axis-domain-warning'>{warningMsg.maxMsg}</span>
+                                </div>
+                                {config.visualizationType !== 'Area Chart' &&
+                                  config.visualizationSubType !== 'stacked' && (
+                                    <div className='axis-domain-group__field'>
+                                      <TextField
+                                        value={config.yAxis.min}
+                                        section='yAxis'
+                                        fieldName='min'
+                                        type='number'
+                                        label='axis min value'
+                                        placeholder='Auto'
+                                        className='axis-domain-number'
+                                        updateField={updateFieldDeprecated}
+                                      />
+                                      <span className='axis-domain-warning'>{warningMsg.minMsg}</span>
+                                    </div>
+                                  )}
+                              </div>
+                              <TextField
+                                value={config.yAxis.smallestLeftAxisMax}
+                                section='yAxis'
+                                fieldName='smallestLeftAxisMax'
+                                type='number'
+                                label='Smallest axis maximum'
+                                placeholder='Auto'
+                                className='axis-domain-number'
+                                tooltip={
+                                  <Tooltip style={{ textTransform: 'none' }}>
+                                    <Tooltip.Target>
+                                      <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                                    </Tooltip.Target>
+                                    <Tooltip.Content>
+                                      <p>
+                                        Example: If your data only goes up to 1, the axis might show 0, 0.2, 0.4, 0.6,
+                                        0.8, 1. Setting this to 5 would make the axis show 0, 1, 2, 3, 4, 5 instead.
+                                      </p>
+                                    </Tooltip.Content>
+                                  </Tooltip>
+                                }
+                                updateField={updateFieldDeprecated}
+                              />
+                              {visSupportsAutoMaxStrategy() && (
+                                <Select
+                                  value={config.yAxis.autoMaxStrategy || 'default'}
+                                  section='yAxis'
+                                  fieldName='autoMaxStrategy'
+                                  label='Automatic max strategy'
+                                  updateField={updateFieldDeprecated}
+                                  options={[
+                                    { value: 'default', label: 'Default' },
+                                    { value: 'clean-top-tick', label: 'Clean top tick' }
+                                  ]}
+                                  tooltip={
+                                    <Tooltip style={{ textTransform: 'none' }}>
+                                      <Tooltip.Target>
+                                        <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                                      </Tooltip.Target>
+                                      <Tooltip.Content>
+                                        {config.visualizationType === 'Combo' ? (
+                                          <p>
+                                            Clean top tick rounds automatic left and right axis maximums up to cleaner
+                                            tick steps before axis padding is applied.
+                                          </p>
+                                        ) : (
+                                          <p>
+                                            Clean top tick rounds the automatic value axis maximum up to a cleaner tick
+                                            step before axis padding is applied.
+                                          </p>
+                                        )}
+                                      </Tooltip.Content>
+                                    </Tooltip>
+                                  }
+                                />
+                              )}
+                              {visSupportsFilterDomainBehavior() && (
+                                <Select
+                                  value={config.yAxis.filterDomainBehavior || 'dynamic'}
+                                  section='yAxis'
+                                  fieldName='filterDomainBehavior'
+                                  label='Filter Domain Behavior'
+                                  updateField={updateFieldDeprecated}
+                                  options={[
+                                    { value: 'dynamic', label: 'Dynamic' },
+                                    { value: 'stable', label: 'Stable' }
+                                  ]}
+                                  tooltip={
+                                    <Tooltip style={{ textTransform: 'none' }}>
+                                      <Tooltip.Target>
+                                        <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                                      </Tooltip.Target>
+                                      <Tooltip.Content>
+                                        {config.visualizationType === 'Combo' ? (
+                                          <p>
+                                            Dynamic rescales the value axes to the currently filtered data. Stable keeps
+                                            the left and right axes based on the full eligible dataset while still
+                                            rendering filtered rows.
+                                          </p>
+                                        ) : (
+                                          <p>
+                                            Dynamic rescales the value axis to the currently filtered data. Stable keeps
+                                            the value axis based on the full eligible dataset while still rendering
+                                            filtered rows.
+                                          </p>
+                                        )}
+                                      </Tooltip.Content>
+                                    </Tooltip>
+                                  }
+                                />
+                              )}
+                              {visSupportsYPadding() && (
+                                <CheckBox
+                                  value={config.yAxis.enablePadding}
                                   section='yAxis'
-                                  fieldName='min'
+                                  fieldName='enablePadding'
+                                  label='Add Padding to Value Axis Scale'
+                                  updateField={updateFieldDeprecated}
+                                />
+                              )}
+                              {config.yAxis.enablePadding && visSupportsYPadding() && (
+                                <TextField
                                   type='number'
-                                  label='left axis min value'
-                                  placeholder='Auto'
+                                  section='yAxis'
+                                  fieldName='scalePadding'
+                                  label='Padding Percentage'
+                                  className='axis-domain-number'
                                   updateField={updateFieldDeprecated}
+                                  value={config.yAxis.scalePadding}
                                 />
-                                <span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
-                              </>
-                            )}
-                            <TextField
-                              value={config.yAxis.smallestLeftAxisMax}
-                              section='yAxis'
-                              fieldName='smallestLeftAxisMax'
-                              type='number'
-                              label='Smallest Left Axis Maximum'
-                              placeholder='Auto'
-                              tooltip={
-                                <Tooltip style={{ textTransform: 'none' }}>
-                                  <Tooltip.Target>
-                                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                                  </Tooltip.Target>
-                                  <Tooltip.Content>
-                                    <p>
-                                      Example: If your data only goes up to 1, the axis might show 0, 0.2, 0.4, 0.6,
-                                      0.8, 1. Setting this to 5 would make the axis show 0, 1, 2, 3, 4, 5 instead.
-                                    </p>
-                                  </Tooltip.Content>
-                                </Tooltip>
-                              }
-                              updateField={updateFieldDeprecated}
-                            />
+                              )}
+                            </div>
                           </>
                         )
                       )}
@@ -2844,48 +3269,60 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                         updateField={updateFieldDeprecated}
                       />
 
-                      <TextField
-                        value={config.yAxis.rightMax}
-                        section='yAxis'
-                        fieldName='rightMax'
-                        type='number'
-                        label='right axis max value'
-                        placeholder='Auto'
-                        updateField={updateFieldDeprecated}
-                      />
-                      <span style={{ color: 'red', display: 'block' }}>{warningMsg.rightMaxMessage}</span>
-                      <TextField
-                        value={config.yAxis.rightMin}
-                        section='yAxis'
-                        fieldName='rightMin'
-                        type='number'
-                        label='right axis min value'
-                        placeholder='Auto'
-                        updateField={updateFieldDeprecated}
-                      />
-                      <span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
-                      <TextField
-                        value={config.yAxis.smallestRightAxisMax}
-                        section='yAxis'
-                        fieldName='smallestRightAxisMax'
-                        type='number'
-                        label='Smallest Right Axis Maximum'
-                        placeholder='Auto'
-                        tooltip={
-                          <Tooltip style={{ textTransform: 'none' }}>
-                            <Tooltip.Target>
-                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                            </Tooltip.Target>
-                            <Tooltip.Content>
-                              <p>
-                                Example: If your data only goes up to 1, the axis might show 0, 0.2, 0.4, 0.6, 0.8, 1.
-                                Setting this to 5 would make the axis show 0, 1, 2, 3, 4, 5 instead.
-                              </p>
-                            </Tooltip.Content>
-                          </Tooltip>
-                        }
-                        updateField={updateFieldDeprecated}
-                      />
+                      <div className='axis-domain-group'>
+                        <span className='axis-domain-group__title'>Right Axis Domain</span>
+                        <div className='axis-domain-group__row'>
+                          <div className='axis-domain-group__field'>
+                            <TextField
+                              value={config.yAxis.rightMax}
+                              section='yAxis'
+                              fieldName='rightMax'
+                              type='number'
+                              label='axis max value'
+                              placeholder='Auto'
+                              className='axis-domain-number'
+                              updateField={updateFieldDeprecated}
+                            />
+                            <span className='axis-domain-warning'>{warningMsg.rightMaxMessage}</span>
+                          </div>
+                          <div className='axis-domain-group__field'>
+                            <TextField
+                              value={config.yAxis.rightMin}
+                              section='yAxis'
+                              fieldName='rightMin'
+                              type='number'
+                              label='axis min value'
+                              placeholder='Auto'
+                              className='axis-domain-number'
+                              updateField={updateFieldDeprecated}
+                            />
+                            <span className='axis-domain-warning'>{warningMsg.minMsg}</span>
+                          </div>
+                        </div>
+                        <TextField
+                          value={config.yAxis.smallestRightAxisMax}
+                          section='yAxis'
+                          fieldName='smallestRightAxisMax'
+                          type='number'
+                          label='Smallest axis maximum'
+                          placeholder='Auto'
+                          className='axis-domain-number'
+                          tooltip={
+                            <Tooltip style={{ textTransform: 'none' }}>
+                              <Tooltip.Target>
+                                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                              </Tooltip.Target>
+                              <Tooltip.Content>
+                                <p>
+                                  Example: If your data only goes up to 1, the axis might show 0, 0.2, 0.4, 0.6, 0.8, 1.
+                                  Setting this to 5 would make the axis show 0, 1, 2, 3, 4, 5 instead.
+                                </p>
+                              </Tooltip.Content>
+                            </Tooltip>
+                          }
+                          updateField={updateFieldDeprecated}
+                        />
+                      </div>
                     </AccordionItemPanel>
                   </AccordionItem>
                 )}
@@ -3060,6 +3497,16 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                               </Tooltip>
                             }
                           />
+                          {config.visualizationType === 'HeatMap' && (
+                            <Select
+                              value={config.heatmap?.xAxisPosition ?? HEATMAP_CONFIG_DEFAULTS.xAxisPosition}
+                              section='heatmap'
+                              fieldName='xAxisPosition'
+                              label='X-Axis Position'
+                              updateField={updateFieldDeprecated}
+                              options={['top', 'bottom']}
+                            />
+                          )}
 
                           {config.xAxis.type === 'continuous' && (
                             <>
@@ -3319,38 +3766,71 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                                 }
                               />
                               {config.xAxis.brushActive && (
-                                <TextField
-                                  value={config.xAxis.brushDefaultRecentDateCount ?? ''}
-                                  placeholder='Default (35%)'
-                                  type='number'
-                                  min={1}
-                                  section='xAxis'
-                                  fieldName='brushDefaultRecentDateCount'
-                                  label='Show Last X Dates by Default'
-                                  className='number-narrow'
-                                  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 set, the brush slider will initially select this many recent data points
-                                          instead of the default 35%. Leave empty to use the default percentage-based
-                                          selection.
-                                        </p>
-                                      </Tooltip.Content>
-                                    </Tooltip>
-                                  }
-                                />
+                                <>
+                                  <CheckBox
+                                    value={!!config.xAxis.brushDynamicYAxis}
+                                    section='xAxis'
+                                    fieldName='brushDynamicYAxis'
+                                    label='Dynamic Y-Axis'
+                                    className='ms-4'
+                                    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, the Y-axis rescales to fit only the data visible in the
+                                            current brush selection. When disabled, the Y-axis shows the full data
+                                            range.
+                                          </p>
+                                        </Tooltip.Content>
+                                      </Tooltip>
+                                    }
+                                  />
+                                  <div className='ms-4 mt-2'>
+                                    <TextField
+                                      value={config.xAxis.brushDefaultRecentDateCount ?? ''}
+                                      placeholder='Default (35%)'
+                                      type='number'
+                                      min={1}
+                                      section='xAxis'
+                                      fieldName='brushDefaultRecentDateCount'
+                                      label='Show Last X Dates by Default'
+                                      className='number-narrow'
+                                      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 set, the brush slider will initially select this many recent data
+                                              points instead of the default 35%. Leave empty to use the default
+                                              percentage-based selection.
+                                            </p>
+                                          </Tooltip.Content>
+                                        </Tooltip>
+                                      }
+                                    />
+                                  </div>
+                                </>
                               )}
                             </>
                           )}
@@ -3378,7 +3858,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                                       }
                                       e.target.value = ''
                                     }}
-                                    options={getDataValues(config.xAxis.dataKey, true)}
+                                    options={getAvailableExclusionValues(config.xAxis.dataKey)}
                                   />
                                 </>
                               )}
@@ -3814,7 +4294,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                                   }
                                   e.target.value = ''
                                 }}
-                                options={getDataValues(config.xAxis.dataKey, true)}
+                                options={getAvailableExclusionValues(config.xAxis.dataKey)}
                               />
                             </>
                           )}
@@ -3866,6 +4346,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                     </AccordionItemPanel>
                   </AccordionItem>
                 )}
+                {renderHeatMapSettingsAccordion()}
                 <Panels.Regions name='Regions' />
 
                 {/* Columns */}
@@ -3879,7 +4360,9 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                         config={config}
                         updateField={updateFieldDeprecated}
                         deleteColumn={removeAdditionalColumn}
-                        hiddenColumnNames={seriesOwnedColumnNames}
+                        hiddenColumnNames={
+                          isHeatMap ? [...seriesOwnedColumnNames, ...heatMapOwnedColumnNames] : seriesOwnedColumnNames
+                        }
                       />{' '}
                     </AccordionItemPanel>
                   </AccordionItem>
@@ -3898,7 +4381,11 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                         label='Position'
                         updateField={updateFieldDeprecated}
                         options={
-                          config.visualizationType === 'Warming Stripes'
+                          config.visualizationType === 'HeatMap'
+                            ? config.legend.style === 'gradient'
+                              ? ['bottom', 'top']
+                              : ['right', 'left', 'bottom', 'top']
+                            : config.visualizationType === 'Warming Stripes'
                             ? ['bottom']
                             : ['right', 'left', 'bottom', 'top']
                         }
@@ -3938,7 +4425,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                         options={getLegendStyleOptions('style')}
                       />
 
-                      {config.visualizationType !== 'Warming Stripes' && (
+                      {config.visualizationType !== 'Warming Stripes' && config.visualizationType !== 'HeatMap' && (
                         <Select
                           value={config.legend.groupBy}
                           section='legend'
@@ -3982,7 +4469,11 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                         options={getLegendStyleOptions('subStyle')}
                       />
                       <TextField
-                        display={config.legend.style === 'gradient' && !config.legend.hide}
+                        display={
+                          config.visualizationType !== 'HeatMap' &&
+                          config.legend.style === 'gradient' &&
+                          !config.legend.hide
+                        }
                         className='number-narrow'
                         type='number'
                         value={config.legend.tickRotation}
@@ -4347,6 +4838,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                   loadConfig={updateConfig}
                   config={config}
                   convertStateToConfig={chartConvertStateToConfig}
+                  defaultExpanded={config.visualizationType === 'HeatMap'}
                 />
               )}
             </>