@cdc/chart 4.26.5 → 4.26.7

package/src/components/EditorPanel/EditorPanel.tsx

@@ -15,6 +15,7 @@ import { EditorPanel as BaseEditorPanel } from '@cdc/core/components/EditorPanel
 import AdvancedEditor from '@cdc/core/components/AdvancedEditor'
 import Icon from '@cdc/core/components/ui/Icon'
 import ColumnsEditor from '@cdc/core/components/EditorPanel/ColumnsEditor'
+import CustomSortOrder from '@cdc/core/components/EditorPanel/CustomSortOrder'
 import DataTableEditor from '@cdc/core/components/EditorPanel/DataTableEditor'
 import GroupedList from '@cdc/core/components/EditorPanel/GroupedList'
 import VizFilterEditor from '@cdc/core/components/EditorPanel/VizFilterEditor'
@@ -36,7 +37,6 @@ import { useEditorPermissions } from './useEditorPermissions'
 import { useHighlightedBars } from '../../hooks/useHighlightedBars'
 import ConfigContext from '../../ConfigContext'
 import useReduceData from '../../hooks/useReduceData'
-import useRightAxis from '../../hooks/useRightAxis'
 import WarningImage from '../../images/warning.svg'
 import getMinMax from '../../helpers/getMinMax'
 
@@ -61,6 +61,7 @@ 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 { getOrderedCategoryValues } from '../../helpers/categoryOrder'
 import {
   HEATMAP_CONFIG_DEFAULTS,
   MAX_HEATMAP_COLOR_BUCKETS,
@@ -142,7 +143,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 })
@@ -197,7 +199,8 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
             type,
             value,
             hideBarSymbol,
-            hideLineStyle
+            hideLineStyle,
+            weight
           },
           i
         ) => (
@@ -296,6 +299,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'
@@ -496,6 +509,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}
@@ -867,11 +892,14 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
     visSupportsDateCategoryNumTicks,
     visSupportsDateCategoryTickRotation,
     visSupportsDynamicSeries,
+    visSupportsAutoMaxStrategy,
+    visSupportsFilterDomainBehavior,
     visSupportsFilters,
     visSupportsLeftValueAxis,
     visSupportsPreliminaryData,
     visSupportsRankByValue,
     visSupportsResponsiveTicks,
+    visSupportsRightValueAxis,
     visSupportsValueAxisGridLines,
     visSupportsValueAxisLabels,
     visSupportsValueAxisLine,
@@ -923,8 +951,6 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
     }
   }, [config.visualizationType])
 
-  const { hasRightAxis } = useRightAxis({ config: config, yMax: 0, data: config.data, updateConfig })
-
   const getItemStyle = (isDragging, draggableStyle) => ({
     ...draggableStyle
   })
@@ -1033,6 +1059,8 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
         xAxis: {
           ...config.xAxis,
           dataKey: newValue,
+          categoryOrder: [],
+          categoryOrderType: 'data',
           ...(autoDetectedDateParseFormat ? { dateParseFormat: autoDetectedDateParseFormat } : {})
         }
       }
@@ -1225,7 +1253,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')
@@ -1258,6 +1286,63 @@ 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)))
+  }
+
+  const categoryOrderValues = useMemo(
+    () =>
+      getOrderedCategoryValues(
+        excludedData as Record<string, any>[],
+        config.xAxis?.dataKey,
+        config.xAxis?.categoryOrder
+      ),
+    [excludedData, config.xAxis?.dataKey, config.xAxis?.categoryOrder]
+  )
+
+  const updateCategoryOrderType = (categoryOrderType: 'data' | 'custom') => {
+    updateConfig({
+      ...config,
+      xAxis: {
+        ...config.xAxis,
+        categoryOrderType,
+        categoryOrder: categoryOrderType === 'custom' ? categoryOrderValues : []
+      }
+    })
+  }
+
+  const renderCategoryOrderControls = (label = 'Category Order') => {
+    if (config.xAxis?.type !== 'categorical' || !config.xAxis?.dataKey || !categoryOrderValues.length) return null
+
+    return (
+      <>
+        <Select
+          value={config.xAxis.categoryOrderType || 'data'}
+          section='xAxis'
+          fieldName='categoryOrderType'
+          label={label}
+          options={[
+            { label: 'Data order', value: 'data' },
+            { label: 'Custom', value: 'custom' }
+          ]}
+          updateField={(_section, _subsection, _fieldName, value) => updateCategoryOrderType(value)}
+        />
+        {config.xAxis.categoryOrderType === 'custom' && (
+          <CustomSortOrder
+            column={config.xAxis.dataKey}
+            data={excludedData as Record<string, any>[]}
+            customOrder={config.xAxis.categoryOrder}
+            updateField={updateFieldDeprecated}
+            updateTarget={{ section: 'xAxis', subsection: null, fieldName: 'categoryOrder' }}
+            droppableId='category_order'
+            draggableIdPrefix='categoryOrder'
+          />
+        )}
+      </>
+    )
+  }
+
   // prettier-ignore
   const {
     highlightedBarValues,
@@ -2558,26 +2643,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>
@@ -2759,32 +2824,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'
@@ -2792,8 +2866,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'
@@ -2841,52 +3011,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='min'
+                                  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='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>
                           </>
                         )
                       )}
@@ -2912,7 +3181,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                   </AccordionItem>
                 )}
                 {/* Right Value Axis Settings */}
-                {hasRightAxis && (
+                {visSupportsRightValueAxis() && (
                   <AccordionItem>
                     <AccordionItemHeading>
                       <AccordionItemButton>Right Value Axis</AccordionItemButton>
@@ -3054,48 +3323,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>
                 )}
@@ -3151,6 +3432,9 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                                     xAxis: {
                                       ...config.xAxis,
                                       type: value,
+                                      ...(value !== 'categorical'
+                                        ? { categoryOrder: [], categoryOrderType: 'data' }
+                                        : {}),
                                       ...(autoDetectedDateParseFormat
                                         ? { dateParseFormat: autoDetectedDateParseFormat }
                                         : {})
@@ -3221,33 +3505,37 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                               </Tooltip>
                             }
                           />
+                          {renderCategoryOrderControls()}
                         </>
                       )}
 
                       {config.visualizationType === 'Pie' && (
-                        <Select
-                          value={config.xAxis.dataKey || ''}
-                          section='xAxis'
-                          fieldName='dataKey'
-                          label='Segment Labels'
-                          initial='Select'
-                          required={true}
-                          updateField={updateFieldDeprecated}
-                          options={getColumns(false)}
-                          tooltip={
-                            <Tooltip style={{ textTransform: 'none' }}>
-                              <Tooltip.Target>
-                                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                              </Tooltip.Target>
-                              <Tooltip.Content>
-                                <p>
-                                  Select the source row or column that contains the segment labels. Depending on the
-                                  data structure, it may be listed as "Key."
-                                </p>
-                              </Tooltip.Content>
-                            </Tooltip>
-                          }
-                        />
+                        <>
+                          <Select
+                            value={config.xAxis.dataKey || ''}
+                            section='xAxis'
+                            fieldName='dataKey'
+                            label='Segment Labels'
+                            initial='Select'
+                            required={true}
+                            updateField={updateFieldDeprecated}
+                            options={getColumns(false)}
+                            tooltip={
+                              <Tooltip style={{ textTransform: 'none' }}>
+                                <Tooltip.Target>
+                                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                                </Tooltip.Target>
+                                <Tooltip.Content>
+                                  <p>
+                                    Select the source row or column that contains the segment labels. Depending on the
+                                    data structure, it may be listed as "Key."
+                                  </p>
+                                </Tooltip.Content>
+                              </Tooltip>
+                            }
+                          />
+                          {renderCategoryOrderControls('Segment Order')}
+                        </>
                       )}
 
                       {config.visualizationType !== 'Pie' && (
@@ -3631,7 +3919,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                                       }
                                       e.target.value = ''
                                     }}
-                                    options={getDataValues(config.xAxis.dataKey, true)}
+                                    options={getAvailableExclusionValues(config.xAxis.dataKey)}
                                   />
                                 </>
                               )}
@@ -3954,8 +4242,8 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                               <label htmlFor='barHighlight'>Bar Highlighting</label>
                               {config.series.length === 1 &&
                                 highlightedBarValues.map((highlightedBarValue, i) => (
-                                  <fieldset>
-                                    <div className='edit-block' key={`highlighted-bar-${i}`}>
+                                  <fieldset key={`highlighted-bar-${i}`}>
+                                    <div className='edit-block'>
                                       <Button
                                         className='btn btn-danger'
                                         onClick={e => handleRemoveHighlightedBar(e, i)}
@@ -4067,7 +4355,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                                   }
                                   e.target.value = ''
                                 }}
-                                options={getDataValues(config.xAxis.dataKey, true)}
+                                options={getAvailableExclusionValues(config.xAxis.dataKey)}
                               />
                             </>
                           )}
@@ -4242,7 +4530,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}