@adaptabletools/adaptable 23.0.0-canary.4 → 23.0.0-canary.5

package/src/View/Charting/ChartingWizard/AgChargingWizard/SettingsSection.js

@@ -1,53 +1,44 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
 import { CheckBox } from '../../../../components/CheckBox';
 import { SingleSelect } from '../../../../components/NewSelect';
-import FormLayout, { FormRow } from '../../../../components/FormLayout';
 import { validateChartName } from '../../../../Utilities/Helpers/chartingHelper';
-import AdaptableInput from '../../../Components/AdaptableInput';
+import { Box, Flex } from '../../../../components/Flex';
+import { Card } from '../../../../components/Card';
+import Input from '../../../../components/Input';
+import { PreviewChartSection } from './PreviewChartSection';
 export const isSettingsValid = (chartDefinition, api) => {
     return validateChartName(api, chartDefinition.Name, chartDefinition.Uuid);
 };
+const AGG_FUNCS = ['sum', 'min', 'max', 'count', 'avg', 'first', 'last'];
 export const SettingsSection = (props) => {
-    const handleNameChange = React.useCallback((event) => {
-        props.onChange({
-            ...props.chartDefinition,
-            Name: event.target.value,
-            Model: props.chartDefinition.Model,
-        });
-    }, [props.chartDefinition]);
-    const handleUnLinkChange = React.useCallback(() => {
-        props.onChange({
-            ...props.chartDefinition,
-            Model: {
-                ...props.chartDefinition.Model,
-                unlinkChart: !props.chartDefinition.Model.unlinkChart,
-            },
-        });
-    }, [props.chartDefinition]);
-    const handleSuppressChartRanges = React.useCallback(() => {
-        props.onChange({
-            ...props.chartDefinition,
-            Model: {
-                ...props.chartDefinition.Model,
-                suppressChartRanges: !props.chartDefinition.Model.suppressChartRanges,
-            },
-        });
-    }, [props.chartDefinition]);
-    const aggFuncs = ['sum', 'min', 'max', 'count', 'avg', 'first', 'last'];
-    const aggFunc = props.chartDefinition.Model.aggFunc;
-    const handleAggFuncChange = React.useCallback((value) => {
-        props.onChange({
-            ...props.chartDefinition,
-            Model: {
-                ...props.chartDefinition.Model,
-                aggFunc: value,
-            },
-        });
-    }, [props.chartDefinition]);
-    const aggFuncsOptions = aggFuncs.map((option) => ({
+    const { chartDefinition, onChange } = props;
+    const aggFunc = chartDefinition.Model.aggFunc;
+    const showAggFunc = chartDefinition.Model.modelType === 'range' && typeof aggFunc !== 'function';
+    const aggFuncsOptions = AGG_FUNCS.map((option) => ({
         label: option,
         value: option,
     }));
-    return (_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Name", children: _jsx(AdaptableInput, { onChange: handleNameChange, value: props.chartDefinition.Name }) }), _jsx(FormRow, { label: "Unlink Chart", children: _jsx(CheckBox, { onClick: handleUnLinkChange, checked: props.chartDefinition.Model.unlinkChart }) }), _jsx(FormRow, { label: "Suppress Chart Ranges", children: _jsx(CheckBox, { onClick: handleSuppressChartRanges, checked: props.chartDefinition.Model.suppressChartRanges }) }), props.chartDefinition.Model.modelType === 'range' && typeof aggFunc !== 'function' && (_jsx(FormRow, { label: "Agg Func", children: _jsx(SingleSelect, { placeholder: "Select", items: aggFuncsOptions, value: aggFunc || undefined, onValueChange: handleAggFuncChange }) }))] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3 twa:h-full twa:min-h-0", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the chart" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "chart-name", className: "twa:max-w-[300px] twa:w-full", onChange: (event) => onChange({
+                                ...chartDefinition,
+                                Name: event.target.value,
+                                Model: chartDefinition.Model,
+                            }), value: chartDefinition.Name ?? '', placeholder: "Enter chart name" }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Unlink Chart" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "When enabled, the chart is not linked to the grid data range" })] }), _jsx(Card.Body, { children: _jsx(CheckBox, { "data-name": "unlink-chart", checked: chartDefinition.Model.unlinkChart, onChange: (checked) => onChange({
+                                ...chartDefinition,
+                                Model: {
+                                    ...chartDefinition.Model,
+                                    unlinkChart: checked,
+                                },
+                            }), children: "Unlink from data" }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Suppress Chart Ranges" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Hide chart range highlights on the grid while the chart is open" })] }), _jsx(Card.Body, { children: _jsx(CheckBox, { "data-name": "suppress-chart-ranges", checked: chartDefinition.Model.suppressChartRanges, onChange: (checked) => onChange({
+                                ...chartDefinition,
+                                Model: {
+                                    ...chartDefinition.Model,
+                                    suppressChartRanges: checked,
+                                },
+                            }), children: "Suppress chart ranges" }) })] }), showAggFunc ? (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Aggregation" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Aggregation function used for range charts" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(SingleSelect, { "data-name": "chart-agg-func", placeholder: "Select", className: "twa:max-w-[300px]", items: aggFuncsOptions, value: aggFunc || undefined, onValueChange: (value) => onChange({
+                                ...chartDefinition,
+                                Model: {
+                                    ...chartDefinition.Model,
+                                    aggFunc: value,
+                                },
+                            }) }) })] })) : null, _jsxs(Card, { shadow: false, className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Preview" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Live preview of the chart \u2014 changes here are reflected in the chart model" })] }), _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-[280px]", children: _jsx(PreviewChartSection, { chartDefinition: chartDefinition, onChange: onChange }) })] })] }));
 };

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/ExternalChartingWizard.js

@@ -3,25 +3,6 @@ import * as React from 'react';
 import { useAdaptable } from '../../../AdaptableContext';
 import { OnePageAdaptableWizard } from '../../../Wizard/OnePageAdaptableWizard';
 import { isSettingsValid, SettingsSection } from './SettingsSection';
-import { Box } from '../../../../components/Flex';
-const PreviewChartSection = ({ chartDefinition }) => {
-    const adaptable = useAdaptable();
-    const divRef = React.useRef(null);
-    React.useEffect(() => {
-        if (!divRef.current) {
-            return;
-        }
-        const container = {
-            name: 'Preview Chart',
-            element: divRef.current,
-        };
-        const transientChartDefinition = adaptable.api.chartingApi.internalApi.onPreviewExternalChart(chartDefinition, container);
-        return () => {
-            adaptable.api.chartingApi.internalApi.onHideExternalChart(transientChartDefinition);
-        };
-    }, [divRef]);
-    return _jsx("div", { ref: divRef });
-};
 export const ExternalChartingWizard = (props) => {
     const adaptable = useAdaptable();
     const onPreviewChart = adaptable.api.optionsApi.getChartingOptions().externalChartingOptions?.onPreviewChart;
@@ -34,18 +15,10 @@ export const ExternalChartingWizard = (props) => {
     };
     return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: chartDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
-                title: 'Settings',
-                details: 'Chart Settings',
+                title: 'Chart',
+                details: 'Configure chart properties and preview the result',
                 isValid: isSettingsValid,
-                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(SettingsSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }) })),
+                render: () => (_jsx(SettingsSection, { chartDefinition: chartDefinition, onChange: setChartDefinition, showPreview: Boolean(onPreviewChart) })),
             },
-            onPreviewChart
-                ? {
-                    title: 'Preview Chart',
-                    render: () => {
-                        return (_jsx(Box, { className: "twa:p-2", children: _jsx(PreviewChartSection, { chartDefinition: chartDefinition }) }));
-                    },
-                }
-                : null,
-        ].filter(Boolean) }));
+        ] }));
 };

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/PreviewChartSection.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { ExternalChartDefinition } from '../../../../AdaptableState/ChartingState';
+export declare const PreviewChartSection: React.FunctionComponent<{
+    chartDefinition: ExternalChartDefinition;
+}>;

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/PreviewChartSection.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useAdaptable } from '../../../AdaptableContext';
+export const PreviewChartSection = (props) => {
+    const adaptable = useAdaptable();
+    const divRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!divRef.current) {
+            return;
+        }
+        const container = {
+            name: 'Preview Chart',
+            element: divRef.current,
+        };
+        const transientChartDefinition = adaptable.api.chartingApi.internalApi.onPreviewExternalChart(props.chartDefinition, container);
+        return () => {
+            adaptable.api.chartingApi.internalApi.onHideExternalChart(transientChartDefinition);
+        };
+    }, [divRef]);
+    return _jsx("div", { ref: divRef, className: "twa:min-h-[280px] twa:h-full twa:w-full" });
+};

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/SettingsSection.d.ts

@@ -5,5 +5,6 @@ export declare const isSettingsValid: (chartDefinition: ExternalChartDefinition,
 export interface SettingsSectionProps {
     chartDefinition: ExternalChartDefinition;
     onChange: (chartDefinition: ExternalChartDefinition) => void;
+    showPreview?: boolean;
 }
 export declare const SettingsSection: React.FunctionComponent<SettingsSectionProps>;

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/SettingsSection.js

@@ -1,13 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import FormLayout, { FormRow } from '../../../../components/FormLayout';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { validateChartName } from '../../../../Utilities/Helpers/chartingHelper';
-import AdaptableInput from '../../../Components/AdaptableInput';
+import { Box, Flex } from '../../../../components/Flex';
+import { Card } from '../../../../components/Card';
+import Input from '../../../../components/Input';
+import { PreviewChartSection } from './PreviewChartSection';
 export const isSettingsValid = (chartDefinition, api) => {
     return validateChartName(api, chartDefinition.Name, chartDefinition.Uuid);
 };
 export const SettingsSection = (props) => {
-    return (_jsx(FormLayout, { children: _jsx(FormRow, { label: "Name", children: _jsx(AdaptableInput, { value: props.chartDefinition.Name, onChange: (e) => props.onChange({
-                    ...props.chartDefinition,
-                    Name: e.target.value,
-                }) }) }) }));
+    const { chartDefinition, onChange, showPreview } = props;
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3 twa:h-full twa:min-h-0", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the chart" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "chart-name", className: "twa:max-w-[300px] twa:w-full", value: chartDefinition.Name ?? '', placeholder: "Enter chart name", onChange: (event) => onChange({
+                                ...chartDefinition,
+                                Name: event.target.value,
+                            }) }) })] }), showPreview ? (_jsxs(Card, { shadow: false, className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Preview" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Live preview of the external chart" })] }), _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-[280px]", children: _jsx(PreviewChartSection, { chartDefinition: chartDefinition }) })] })) : null] }));
 };

package/src/View/Comments/CommentsEditor.js

@@ -53,7 +53,7 @@ export const CommentsEditor = (props) => {
     const formatDate = (date, format) => {
         return FormatHelper.DateFormatter(date, { Pattern: format });
     };
-    return (_jsxs(Panel, { color: "var(--ab-color-text-on-primary)", onClick: () => props.enableEditMode(), className: "ab-CommentPopup twa:min-w-[250px]", onKeyDown: (event) => {
+    return (_jsxs(Panel, { color: "var(--ab-color-primary-foreground)", onClick: () => props.enableEditMode(), className: "ab-CommentPopup twa:min-w-[250px]", onKeyDown: (event) => {
             if (event.key === 'Escape') {
                 api.commentApi.hideCommentsPopup();
             }

package/src/View/Components/ModuleProfile.js

@@ -4,7 +4,7 @@ import { Icon } from '../../components/icons';
 export class ModuleProfile extends React.Component {
     render() {
         return (_jsxs("div", { children: [_jsx(Icon, { name: this.props.moduleInfo.Glyph, style: {
-                        fill: 'var(--ab-color-text-on-primary)',
+                        fill: 'var(--ab-color-primary-foreground)',
                     } }), ' ', this.props.moduleInfo.FriendlyName] }));
     }
 }

package/src/View/Components/Popups/WindowPopups/windowFactory.d.ts

@@ -1,7 +1,6 @@
 import { WindowPopupChildProps } from './WindowPopups';
 export declare const WINDOW_GRID_FILTER_EDITOR = "WINDOW_GRID_FILTER_EDITOR";
 export declare const SHOW_PIVOT_COLUMN_DETAILS = "SHOW_PIVOT_COLUMN_DETAILS";
-export declare const SHOW_THEME_EDITOR = "SHOW_THEME_EDITOR";
 export declare const WINDOW_SHOW_TRANSPOSED_VIEW = "WINDOW_SHOW_TRANSPOSED_VIEW";
 export declare const COLUMN_FILTER_WINDOW = "COLUMN_FILTER_WINDOW";
 export declare const windowFactory: Record<string, React.FunctionComponent<WindowPopupChildProps>>;

package/src/View/Components/Popups/WindowPopups/windowFactory.js

@@ -4,7 +4,6 @@ import { TransposedPopup } from '../../../Layout/TransposedPopup';
 import { ColumnFilterWindow } from '../../ColumnFilter/ColumnFilterWindow';
 export const WINDOW_GRID_FILTER_EDITOR = 'WINDOW_GRID_FILTER_EDITOR';
 export const SHOW_PIVOT_COLUMN_DETAILS = 'SHOW_PIVOT_COLUMN_DETAILS';
-export const SHOW_THEME_EDITOR = 'SHOW_THEME_EDITOR';
 export const WINDOW_SHOW_TRANSPOSED_VIEW = 'WINDOW_SHOW_TRANSPOSED_VIEW';
 export const COLUMN_FILTER_WINDOW = 'COLUMN_FILTER_WINDOW';
 export const windowFactory = {

package/src/View/Components/RangesComponent.d.ts

@@ -14,7 +14,7 @@ export interface RangesComponentProps extends React.ClassAttributes<RangesCompon
     minMaxRangeValues: {
         min: number;
         max: number;
-    };
+    } | null;
     disabled?: boolean;
     /**
      * When true, the user may delete every band so `ranges` becomes `[]`.
@@ -45,7 +45,7 @@ export interface RangesComponentProps extends React.ClassAttributes<RangesCompon
     showRangeDirection?: boolean;
 }
 export interface RangesComponentState {
-    rangesType: 'NumberRange' | 'PercentageRange' | 'ZeroCentred' | 'ColumnComparison';
+    rangesType: 'None' | 'NumberRange' | 'PercentageRange' | 'ZeroCentred' | 'ColumnComparison';
 }
 export declare class RangesComponent extends React.Component<RangesComponentProps, RangesComponentState> {
     constructor(props: RangesComponentProps);
@@ -60,6 +60,11 @@ export declare class RangesComponent extends React.Component<RangesComponentProp
     setRangeColMin(range: CellColorRange): void;
     setRangeColMax(range: CellColorRange): void;
     addRange(): void;
+    /**
+     * When there is exactly one band spanning the full scale (Col-Min→Col-Max or
+     * 0→100), split at the midpoint instead of at the column maximum.
+     */
+    private splitFullSpanRangeAtMidpoint;
     changeColumnComparisonMinValue(value: number): void;
     private onMinColumnSelectedChanged;
     changeColumnComparisonMaxValue(value: number): void;

package/src/View/Components/RangesComponent.js

@@ -15,14 +15,16 @@ const DEFAULT_ZERO_CENTRED_COLORS = {
     NegativeColor: 'rgba(220, 53, 69, 0.55)',
     PositiveColor: 'rgba(40, 167, 69, 0.55)',
 };
+const hasConfiguredRanges = (ranges) => (ranges?.length ?? 0) > 0;
 /**
- * Decide which of the four range tabs should be active given the current props.
+ * Decide which range tab should be active given the current props.
  *
  * Precedence:
  *  1. `columnComparison` set       → Column Comparison tab
  *  2. Zero Centred set + supported → Zero Centred tab
- *  3. `rangeValueType === 'Percentage'` → Percentage Range tab
- *  4. otherwise                    → Number Range tab (default for new styles)
+ *  3. `allowEmptyRanges` + no bands → No Ranges tab
+ *  4. `rangeValueType === 'Percentage'` → Percentage Range tab
+ *  5. otherwise                    → Number Range tab (default for new styles)
  */
 function deriveInitialRangesType(props) {
     if (props.columnComparison) {
@@ -31,6 +33,9 @@ function deriveInitialRangesType(props) {
     if (props.showZeroCentredTab && props.zeroCentred) {
         return 'ZeroCentred';
     }
+    if (props.allowEmptyRanges && !hasConfiguredRanges(props.ranges)) {
+        return 'None';
+    }
     return props.rangeValueType === 'Percentage' ? 'PercentageRange' : 'NumberRange';
 }
 export class RangesComponent extends React.Component {
@@ -66,6 +71,7 @@ export class RangesComponent extends React.Component {
         // vs Percentage Range tab) instead of an inline radio. The inner content
         // is shared between the two range tabs and parameterised on this flag.
         const isRangeValueTypeNumber = this.state.rangesType === 'NumberRange';
+        const renderNoneContent = () => (_jsx(Box, { className: "twa:text-2 twa:opacity-70 twa:py-2 twa:max-w-[520px]", children: "No coloured bands configured" }));
         const renderRangesContent = () => (_jsxs(_Fragment, { children: [this.props.ranges?.map((range, index, list) => (_jsxs(Flex, { alignItems: "end", className: "twa:mb-2", "data-name": "percent-bar-range", children: [_jsxs(Flex, { flexDirection: "column", children: [isRangeValueTypeNumber && index === 0 && (_jsx(CheckBox, { onClick: () => this.setRangeColMin(range), checked: range.Min === 'Col-Min', className: "twa:mt-0 twa:mb-1 twa:text-3", disabled: this.props.disabled, children: "Col Min" })), _jsx(NumberInput, { disabled: this.props.disabled ||
                                         range.Min === 'Col-Min' ||
                                         (index === 0 && !isRangeValueTypeNumber), value: range.Min, onChange: (value) => {
@@ -97,7 +103,7 @@ export class RangesComponent extends React.Component {
         const tabFlex = { flex: 1 };
         const radioCls = 'twa:m-0 twa:align-baseline';
         const renderTabRadio = (label, value) => (_jsx(Radio, { tabIndex: -1, className: radioCls, checked: this.state.rangesType === value, children: label }));
-        return (_jsxs(Tabs, { autoFocus: false, className: "twa:mt-2", value: this.state.rangesType, onValueChange: (v) => this.handleRangesModeTab(v), children: [_jsx(Tabs.Tab, { value: "NumberRange", style: tabFlex, children: renderTabRadio('Number Range', 'NumberRange') }), _jsx(Tabs.Tab, { value: "PercentageRange", style: tabFlex, children: renderTabRadio('Percentage Range', 'PercentageRange') }), this.props.showZeroCentredTab && (_jsx(Tabs.Tab, { value: "ZeroCentred", style: tabFlex, children: renderTabRadio('Zero Centred Range', 'ZeroCentred') })), !this.props.hideColumnComparison && (_jsx(Tabs.Tab, { value: "ColumnComparison", style: tabFlex, children: renderTabRadio('Column Comparison', 'ColumnComparison') })), _jsx(Tabs.Content, { value: "NumberRange", children: renderRangesContent() }), _jsx(Tabs.Content, { value: "PercentageRange", children: renderRangesContent() }), this.props.showZeroCentredTab && (_jsx(Tabs.Content, { value: "ZeroCentred", children: renderZeroCentredContent() })), !this.props.hideColumnComparison && (_jsx(Tabs.Content, { value: "ColumnComparison", children: renderColumnComparisonContent() }))] }));
+        return (_jsxs(Tabs, { autoFocus: false, className: "twa:mt-2", value: this.state.rangesType, onValueChange: (v) => this.handleRangesModeTab(v), children: [this.props.allowEmptyRanges && (_jsx(Tabs.Tab, { value: "None", style: tabFlex, children: renderTabRadio('No Ranges', 'None') })), _jsx(Tabs.Tab, { value: "NumberRange", style: tabFlex, children: renderTabRadio('Number Range', 'NumberRange') }), _jsx(Tabs.Tab, { value: "PercentageRange", style: tabFlex, children: renderTabRadio('Percentage Range', 'PercentageRange') }), this.props.showZeroCentredTab && (_jsx(Tabs.Tab, { value: "ZeroCentred", style: tabFlex, children: renderTabRadio('Zero Centred Range', 'ZeroCentred') })), !this.props.hideColumnComparison && (_jsx(Tabs.Tab, { value: "ColumnComparison", style: tabFlex, children: renderTabRadio('Column Comparison', 'ColumnComparison') })), this.props.allowEmptyRanges && (_jsx(Tabs.Content, { value: "None", children: renderNoneContent() })), _jsx(Tabs.Content, { value: "NumberRange", children: renderRangesContent() }), _jsx(Tabs.Content, { value: "PercentageRange", children: renderRangesContent() }), this.props.showZeroCentredTab && (_jsx(Tabs.Content, { value: "ZeroCentred", children: renderZeroCentredContent() })), !this.props.hideColumnComparison && (_jsx(Tabs.Content, { value: "ColumnComparison", children: renderColumnComparisonContent() }))] }));
     }
     componentDidUpdate(prevProps) {
         const wasComparison = !!prevProps.columnComparison;
@@ -125,12 +131,31 @@ export class RangesComponent extends React.Component {
                 rangesType: this.props.rangeValueType === 'Percentage' ? 'PercentageRange' : 'NumberRange',
             });
         }
+        if (this.props.allowEmptyRanges) {
+            const hadRanges = hasConfiguredRanges(prevProps.ranges);
+            const hasRanges = hasConfiguredRanges(this.props.ranges);
+            if (!hadRanges && hasRanges && this.state.rangesType === 'None') {
+                this.setState({
+                    rangesType: this.props.rangeValueType === 'Percentage' ? 'PercentageRange' : 'NumberRange',
+                });
+            }
+            else if (hadRanges &&
+                !hasRanges &&
+                this.state.rangesType !== 'ColumnComparison' &&
+                this.state.rangesType !== 'ZeroCentred') {
+                this.setState({ rangesType: 'None' });
+            }
+        }
     }
     handleRangesModeTab(value) {
         if (value === this.state.rangesType) {
             return;
         }
         this.setState({ rangesType: value });
+        if (value === 'None') {
+            this.props.updateRanges([]);
+            return;
+        }
         if (value === 'ColumnComparison') {
             const columnComparison = {
                 Color: getGraySwatchColor(),
@@ -198,7 +223,9 @@ export class RangesComponent extends React.Component {
     setRangeColMin(range) {
         const newRanges = this.props.ranges.map((rangeItem) => {
             if (rangeItem === range) {
-                let newMin = rangeItem.Min === 'Col-Min' ? this.props.minMaxRangeValues.min : 'Col-Min';
+                let newMin = rangeItem.Min === 'Col-Min'
+                    ? (this.props.minMaxRangeValues?.min ?? 0)
+                    : 'Col-Min';
                 return {
                     ...rangeItem,
                     Min: newMin,
@@ -232,32 +259,51 @@ export class RangesComponent extends React.Component {
         const existingRanges = this.props.ranges ?? [];
         if (existingRanges.length === 0) {
             const isPercentage = this.props.rangeValueType === 'Percentage';
-            const min = isPercentage ? 0 : this.props.minMaxRangeValues?.min ?? 0;
-            const max = isPercentage ? 100 : this.props.minMaxRangeValues?.max ?? 100;
-            const mid = Math.round((min + max) / 2);
-            const seedRanges = [
-                {
-                    Min: isPercentage ? 0 : 'Col-Min',
-                    Max: mid,
-                    Color: 'rgba(128, 128, 128, 0.25)',
-                },
-                {
-                    Min: mid,
-                    Max: isPercentage ? 100 : 'Col-Max',
-                    Color: 'rgba(128, 128, 128, 0.55)',
-                },
-            ];
+            const seedRanges = this.props.allowEmptyRanges
+                ? [
+                    {
+                        Min: isPercentage ? 0 : 'Col-Min',
+                        Max: isPercentage ? 100 : 'Col-Max',
+                        Color: getGraySwatchColor(),
+                    },
+                ]
+                : (() => {
+                    const min = isPercentage ? 0 : this.props.minMaxRangeValues?.min ?? 0;
+                    const max = isPercentage ? 100 : this.props.minMaxRangeValues?.max ?? 100;
+                    const mid = Math.round((min + max) / 2);
+                    return [
+                        {
+                            Min: isPercentage ? 0 : 'Col-Min',
+                            Max: mid,
+                            Color: 'rgba(128, 128, 128, 0.25)',
+                        },
+                        {
+                            Min: mid,
+                            Max: isPercentage ? 100 : 'Col-Max',
+                            Color: 'rgba(128, 128, 128, 0.55)',
+                        },
+                    ];
+                })();
             this.props.updateRanges(seedRanges);
             return;
         }
+        // Splitting a single full-width band at the midpoint is easier to reason
+        // about than anchoring the break at the column maximum (e.g. tradeId 1–200 → 100).
+        if (existingRanges.length === 1) {
+            const splitAtMidpoint = this.splitFullSpanRangeAtMidpoint(existingRanges[0]);
+            if (splitAtMidpoint) {
+                this.props.updateRanges(splitAtMidpoint);
+                return;
+            }
+        }
         const lastRange = existingRanges[existingRanges.length - 1];
         let previousRange = lastRange;
         let Min = null;
         if (lastRange.Max === 'Col-Max') {
-            Min = this.props.minMaxRangeValues.max;
+            Min = this.props.minMaxRangeValues?.max ?? 100;
             previousRange = {
                 ...previousRange,
-                Max: this.props.minMaxRangeValues.max,
+                Max: this.props.minMaxRangeValues?.max ?? 100,
             };
         }
         else {
@@ -271,6 +317,32 @@ export class RangesComponent extends React.Component {
         const newRanges = [...existingRanges.slice(0, -1), previousRange, newRange];
         this.props.updateRanges(newRanges);
     }
+    /**
+     * When there is exactly one band spanning the full scale (Col-Min→Col-Max or
+     * 0→100), split at the midpoint instead of at the column maximum.
+     */
+    splitFullSpanRangeAtMidpoint(onlyRange) {
+        const isPercentage = this.props.rangeValueType === 'Percentage';
+        if (isPercentage) {
+            if (onlyRange.Min !== 0 || onlyRange.Max !== 100) {
+                return null;
+            }
+            return [
+                { ...onlyRange, Max: 50 },
+                { Min: 50, Max: 100, Color: getGraySwatchColor() },
+            ];
+        }
+        if (onlyRange.Min !== 'Col-Min' || onlyRange.Max !== 'Col-Max') {
+            return null;
+        }
+        const min = this.props.minMaxRangeValues?.min ?? 0;
+        const max = this.props.minMaxRangeValues?.max ?? 100;
+        const mid = Math.round((min + max) / 2);
+        return [
+            { ...onlyRange, Max: mid },
+            { Min: mid, Max: 'Col-Max', Color: getGraySwatchColor() },
+        ];
+    }
     changeColumnComparisonMinValue(value) {
         const { columnComparison } = this.props;
         columnComparison.MinValue = value;

package/src/View/Components/StyleComponent.d.ts

@@ -8,6 +8,7 @@ export interface StyleComponentProps {
     api: AdaptableApi;
     headless?: boolean;
     hidePreview?: boolean;
+    previewText?: React.ReactNode;
     headerText?: string;
     Style: AdaptableStyle;
     UpdateStyle: (style: AdaptableStyle) => void;

package/src/View/Components/StyleComponent.js

@@ -187,5 +187,5 @@ export const StyleComponent = (props) => {
                                             label: enumName,
                                             value: enumName,
                                         })),
-                                    ], value: componentStyle.FontSize?.toString() ?? '', onValueChange: (value) => onFontSizeChange(value) }) }), _jsx("span", { children: "Alignment" }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }), _jsx(Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }), _jsx(Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })] })] }) }) })), !props.hidePreview && (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: "Preview" }), _jsx(Card.Body, { className: "twa:grid twa:place-items-center", children: _jsx(Box, { className: "twa:p-2 twa:inline-block", children: _jsx(StylePreview, { className: "twa:mt-0", styleObject: componentStyle }) }) })] }))] }));
+                                    ], value: componentStyle.FontSize?.toString() ?? '', onValueChange: (value) => onFontSizeChange(value) }) }), _jsx("span", { children: "Alignment" }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }), _jsx(Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }), _jsx(Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })] })] }) }) })), !props.hidePreview && (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: "Preview" }), _jsx(Card.Body, { className: "twa:grid twa:place-items-center", children: _jsx(Box, { className: "twa:p-2 twa:inline-block", children: _jsx(StylePreview, { className: "twa:mt-0", styleObject: componentStyle, children: props.previewText }) }) })] }))] }));
 };