@adaptabletools/adaptable 13.0.2 → 13.0.4-canary.0

package/src/Strategy/FilterModule.js

@@ -97,10 +97,6 @@ class FilterModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                     name: 'Column',
                     values: [this.api.columnApi.getFriendlyNameFromColumnId(filter.ColumnId)],
                 },
-                {
-                    name: 'Filter',
-                    values: [this.api.filterApi.columnFilterToString(filter)],
-                },
             ],
             abObject: filter,
         };

package/src/Strategy/Interface/IModule.d.ts

@@ -44,7 +44,7 @@ export interface AdaptableObjectItemView {
      */
     view?: React.FunctionComponent<React.PropsWithChildren<{
         data: AdaptableObject | SuspendableObject;
-    }>>;
+    }>> | React.ReactElement;
     /**
      * Values used for the component.
      * Could be later extended to include an 'onChange' prop.

package/src/Strategy/StyledColumnModule.js

@@ -76,6 +76,11 @@ class StyledColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
             if (column.dataType === 'Number') {
                 let styledColumn = this.api.styledColumnApi.getStyledColumnByColumnId(column.columnId);
                 let styledColumnExists = Boolean(styledColumn);
+                if (!styledColumn) {
+                    styledColumn = Object.assign(Object.assign({}, ObjectFactory_1.default.CreateEmptyStyledColumn()), { ColumnId: column.columnId, 
+                        // numbers default to gradient
+                        GradientStyle: {} });
+                }
                 if (styledColumn && styledColumn.IsReadOnly && styledColumn.IsReadOnly == true) {
                     styledColumnExists = false;
                 }
@@ -88,7 +93,10 @@ class StyledColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                 returnColumnMenuItems.push(this.createColumnMenuItemShowPopup(label + 'Styled Column', this.moduleInfo.Popup, this.moduleInfo.Glyph, popupParam));
             }
             if (column.dataType == 'Boolean' && !this.api.columnApi.isFreeTextColumn(column.columnId)) {
-                const styledColumn = this.api.styledColumnApi.getStyledColumnByColumnId(column.columnId);
+                let styledColumn = this.api.styledColumnApi.getStyledColumnByColumnId(column.columnId);
+                if (!styledColumn) {
+                    styledColumn = Object.assign(Object.assign({}, ObjectFactory_1.default.CreateEmptyStyledColumn()), { ColumnId: column.columnId, CheckBoxStyle: true });
+                }
                 const hasCheckBox = styledColumn && (styledColumn === null || styledColumn === void 0 ? void 0 : styledColumn.CheckBoxStyle);
                 if (hasCheckBox) {
                     returnColumnMenuItems.push(this.createColumnMenuItemClickFunction('Remove Checkbox', 'unchecked', () => {
@@ -140,6 +148,10 @@ class StyledColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                         return (0, StyledColumnWizardStyleSection_1.renderStyledColumnStyleSummary)(styledColumn, this.api);
                     },
                 },
+                {
+                    name: 'Settings',
+                    values: [`Include grouped rows: ${styledColumn.IncludeGroupedRows ? 'Yes' : 'No'}`],
+                },
             ].filter(Boolean),
         };
     }

package/src/Strategy/Utilities/Export/getExportColumnsViewItems.d.ts

@@ -1,3 +1,3 @@
-import { AdaptableApi, Report } from '../../../../types';
 import { AdaptableObjectItemView } from '../../Interface/IModule';
+import { AdaptableApi, Report } from '../../../../types';
 export declare const getExportColumnsViewItems: (report: Report, api: AdaptableApi) => AdaptableObjectItemView;

package/src/Utilities/Services/EntitlementService.js

@@ -28,7 +28,10 @@ class EntitlementService {
         let entitlementOptions = adaptableOptions.entitlementOptions;
         if (entitlementOptions) {
             const defaultAccessLevel = typeof entitlementOptions.defaultAccessLevel === 'function'
-                ? entitlementOptions.defaultAccessLevel(adaptableOptions.userName, adaptableOptions.adaptableId)
+                ? entitlementOptions.defaultAccessLevel({
+                    userName: adaptableOptions.userName,
+                    adaptableId: adaptableOptions.adaptableId,
+                })
                 : entitlementOptions.defaultAccessLevel;
             const moduleEntitlements = entitlementOptions.moduleEntitlements;
             if (moduleEntitlements) {

package/src/View/Components/AdaptableObjectList/AdaptableObjectCompactList.js

@@ -46,10 +46,11 @@ const AdaptableObjectCompactListItem = (props) => {
     return (React.createElement(rebass_1.Flex, { className: `${baseClassName}__Item`, alignItems: "center" },
         labelEl && React.createElement(rebass_1.Flex, { className: `${baseClassName}__Item__Name` }, labelEl),
         React.createElement(rebass_1.Box, { flex: 1 },
-            objectView.item.view &&
-                React.createElement(objectView.item.view, {
+            typeof objectView.item.view === 'function'
+                ? React.createElement(objectView.item.view, {
                     data: props.abObject,
-                }),
+                })
+                : objectView.item.view,
             Boolean(((_f = objectView.item) === null || _f === void 0 ? void 0 : _f.values) && ((_h = (_g = objectView.item) === null || _g === void 0 ? void 0 : _g.values) === null || _h === void 0 ? void 0 : _h.length)) && (React.createElement(rebass_1.Box, { mb: 2, className: `${baseClassName}__Item__Values` },
                 React.createElement(ValueSelector_1.ValueOptionsTags, { style: { marginRight: 0 }, readOnly: true, options: objectView.item.values, value: objectView.item.values, allowWrap: true, toIdentifier: (c) => c, toLabel: (c) => React.createElement(React.Fragment, null, c) })))),
         suspendAction && unSuspendAction && (React.createElement(SimpleButton_1.default, { onMouseDown: handleSuspendUnSuspend, tone: isSuspended ? 'neutral' : 'success', variant: "text", icon: isSuspended ? 'play' : 'pause' })),

package/src/View/Components/AdaptableObjectList/AdaptableObjectList.js

@@ -35,10 +35,11 @@ const AdaptableObjectListItemView = (props) => {
                             props.handleOnEdit(tag.name);
                         } }))),
                 React.createElement(rebass_1.Box, { flex: 1, className: `${baseClassName}__values` },
-                    tag.view &&
-                        React.createElement(tag.view, {
+                    typeof tag.view === 'function'
+                        ? React.createElement(tag.view, {
                             data: props.abObject,
-                        }),
+                        })
+                        : tag.view,
                     Boolean((tag === null || tag === void 0 ? void 0 : tag.values) && ((_a = tag === null || tag === void 0 ? void 0 : tag.values) === null || _a === void 0 ? void 0 : _a.length)) && (React.createElement(ValueSelector_1.ValueOptionsTags, { style: { marginRight: 0 }, readOnly: true, options: tag.values, value: tag.values, allowWrap: true, toIdentifier: (c) => c, toLabel: (c) => React.createElement(React.Fragment, null, c) })))));
         })),
         props.showActions && (React.createElement(rebass_1.Flex, { flexDirection: "column", className: `${baseClassName}__buttons` },

package/src/View/Components/EntityRulesEditor/index.js

@@ -7,14 +7,12 @@ const react_1 = require("react");
 const rebass_1 = require("rebass");
 const Tabs_1 = require("../../../components/Tabs");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
 const ExpressionEditor_1 = require("../../../components/ExpressionEditor");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
-const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
 const AdaptableContext_1 = require("../../AdaptableContext");
 const ButtonInfo_1 = require("../Buttons/ButtonInfo");
 const DocumentationLinkConstants_1 = require("../../../Utilities/Constants/DocumentationLinkConstants");
-const PermittedValuesSelector_1 = require("../PermittedValuesSelector");
+const PredicateEditor_1 = require("../PredicateEditor/PredicateEditor");
 const isRuleValid = (abObject, api, context) => {
     var _a, _b, _c, _d, _e, _f;
     if (!((_a = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _a === void 0 ? void 0 : _a.Predicate) && !((_b = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _b === void 0 ? void 0 : _b.BooleanExpression)) {
@@ -98,14 +96,13 @@ const EntityRulesEditor = (props) => {
     const predicateInputs = predicateId ? (_d = (_c = data.Rule) === null || _c === void 0 ? void 0 : _c.Predicate.Inputs) !== null && _d !== void 0 ? _d : [] : [];
     const currentPredicateDef = api.predicateApi.getPredicateDefById(predicateId);
     const isValuesPredicateDef = (colDef) => colDef && ['Values', 'ExcludeValues'].includes(colDef.id);
-    const predicateDefsOptions = predicateDefs
-        .filter((def) => {
+    const filteredPredicateDefs = predicateDefs.filter((def) => {
         if (isValuesPredicateDef(def)) {
             return 'ColumnIds' in data.Scope && data.Scope.ColumnIds.length === 1;
         }
         return true;
-    })
-        .map((item) => ({
+    });
+    const predicateDefsOptions = filteredPredicateDefs.map((item) => ({
         value: item.id,
         label: item.label,
         onClick: () => onPredicateChange(item),
@@ -173,13 +170,9 @@ const EntityRulesEditor = (props) => {
                 React.createElement(Radio_1.default, { tabIndex: -1, margin: 0, checked: type === 'Predicate' }, "Predicate"))) : null,
             showPredicate ? (React.createElement(Tabs_1.Tabs.Content, { "data-name": "Predicate", value: "Predicate" },
                 React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, descriptions.selectPredicate),
-                React.createElement(DropdownButton_1.default, { "data-name": "entity-rules-editor-predicate-dropdown", className: `${baseClassName}__predicate-dropdown`, placeholder: "Select Rule", showClearButton: !!((_e = data.Rule) === null || _e === void 0 ? void 0 : _e.Predicate), onClear: clearPredicate, items: predicateDefsOptions, columns: ['label'] }, currentPredicateDef ? currentPredicateDef.label : 'Select Rule'), (_f = currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.inputs) === null || _f === void 0 ? void 0 :
-                _f.map((predicateDefInput, index) => (React.createElement(rebass_1.Flex, { key: predicateId + index, flexDirection: "column" },
-                    index > 0 && React.createElement(HelpBlock_1.default, { marginTop: 2 }, "AND"),
-                    React.createElement(AdaptableInput_1.default, { marginTop: 2, type: predicateDefInput.type, autoFocus: index === 0, value: predicateInputs[index], onChange: (e) => onPredicateInputChange(e, index) })))),
-                isValuesPredicateDef(currentPredicateDef) &&
-                    'ColumnIds' in data.Scope &&
-                    data.Scope.ColumnIds.length === 1 && (React.createElement(PermittedValuesSelector_1.PermitedValuesSelector, { onPredicateValuesChange: onPredicateValuesChange, predicate: (_g = data.Rule) === null || _g === void 0 ? void 0 : _g.Predicate, scope: data.Scope })),
+                React.createElement(PredicateEditor_1.PredicateEditor, { columnId: 'ColumnIds' in data.Scope ? (_f = (_e = data.Scope) === null || _e === void 0 ? void 0 : _e.ColumnIds) === null || _f === void 0 ? void 0 : _f[0] : null, predicateDefs: filteredPredicateDefs, predicate: (_g = data.Rule) === null || _g === void 0 ? void 0 : _g.Predicate, onChange: (predicate) => {
+                        props.onChange(Object.assign(Object.assign({}, data), { Rule: Object.assign(Object.assign({}, data.Rule), { Predicate: predicate }) }));
+                    }, onClear: clearPredicate }),
                 showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", mt: 3, mb: 2, style: {
                         fontSize: 'var(--ab-font-size-3)',
                         padding: 0,

package/src/View/Components/PermittedValuesSelector/PermitedValuesSelector.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { ScopeColumnIds } from '../../../PredefinedConfig/Common/AdaptableScope';
 import { AdaptablePredicate } from '../../../types';
 export interface PermitedValuesSelectorProps {
-    scope: ScopeColumnIds;
+    columnId: string;
     onPredicateValuesChange: (inputs: any[]) => void;
     predicate: AdaptablePredicate;
 }

package/src/View/Components/PermittedValuesSelector/PermitedValuesSelector.js

@@ -11,7 +11,7 @@ const ListBoxFilterForm_1 = require("../FilterForm/ListBoxFilterForm");
 const PermitedValuesSelector = (props) => {
     var _a;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const columnId = props.scope.ColumnIds[0];
+    const columnId = props.columnId;
     const column = adaptable.api.columnApi.getColumnFromId(columnId);
     const distinctValues = ((_a = adaptable.api.columnApi.getDistinctDisplayValuesForColumn(columnId)) !== null && _a !== void 0 ? _a : []).map((value) => ({ value: value, label: value }));
     const predicateInputs = props.predicate.Inputs;

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupModuleView.js

@@ -78,11 +78,7 @@ const AdaptablePopupModuleView = (props) => {
             " New"));
     }
     else if (EditWizard || moduleViewProperties.onOpenEditPopup) {
-        newButton = (React.createElement(ButtonNew_1.ButtonNew, { onClick: () => handleOpenEditPopup(), tooltip: toolTipText, accessLevel: props.accessLevel, style: {
-                color: 'var(--ab-color-text-on-add)',
-                fill: 'var(--ab-color-text-on-add)',
-                background: 'var(--ab-color-action-add)',
-            } }));
+        newButton = (React.createElement(ButtonNew_1.ButtonNew, { onClick: () => handleOpenEditPopup(), tooltip: toolTipText, accessLevel: props.accessLevel }));
     }
     const handleWizardClose = () => {
         var _a;

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { AdaptablePredicate, AdaptablePredicateDef } from '../../../types';
+export interface PredicateEditorProps {
+    columnId?: string;
+    predicateDefs: AdaptablePredicateDef[];
+    predicate?: AdaptablePredicate;
+    onChange: (predicate: AdaptablePredicate) => void;
+    onClear?: () => void;
+}
+export declare const PredicateEditor: React.FunctionComponent<PredicateEditorProps>;

package/src/View/Components/PredicateEditor/PredicateEditor.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PredicateEditor = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
+const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
+const PermittedValuesSelector_1 = require("../PermittedValuesSelector");
+const isValuesPredicateDef = (colDef) => colDef && ['Values', 'ExcludeValues'].includes(colDef.id);
+const PredicateEditor = (props) => {
+    var _a;
+    const baseClassName = 'ab-PredicateEditor';
+    const predicateDefsOptions = React.useMemo(() => props.predicateDefs.map((item) => ({
+        value: item.id,
+        label: item.label,
+        onClick: () => {
+            var _a;
+            props.onChange({
+                PredicateId: item.id,
+                Inputs: ((_a = item === null || item === void 0 ? void 0 : item.inputs) !== null && _a !== void 0 ? _a : []).map((input) => { var _a; return (_a = input.defaultValue) !== null && _a !== void 0 ? _a : ''; }),
+            });
+        },
+    })), [props.predicateDefs, props.onChange]);
+    const handlePredicateInputChange = React.useCallback((e, index) => {
+        const { value } = e.target;
+        const newInputs = [...props.predicate.Inputs];
+        newInputs[index] = value;
+        props.onChange(Object.assign(Object.assign({}, props.predicate), { Inputs: newInputs }));
+    }, [props.predicate]);
+    const handlePredicateValuesChange = React.useCallback((inputs) => {
+        props.onChange(Object.assign(Object.assign({}, props.predicate), { Inputs: inputs }));
+    }, [props.predicate]);
+    const currentPredicateDef = props.predicateDefs.find((item) => { var _a; return item.id === ((_a = props.predicate) === null || _a === void 0 ? void 0 : _a.PredicateId); });
+    return (React.createElement(rebass_1.Box, { className: baseClassName },
+        React.createElement(DropdownButton_1.default, { "data-name": "select-predicate", mb: 2, width: "100%", className: `${baseClassName}__predicate-dropdown`, placeholder: "Select Rule", showClearButton: !!props.predicate, onClear: props.onClear, items: predicateDefsOptions, columns: ['label'] }, currentPredicateDef ? currentPredicateDef.label : 'Select Rule'),
+        React.createElement(rebass_1.Flex, null, (_a = currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.inputs) === null || _a === void 0 ? void 0 : _a.map((predicateDefInput, index) => (React.createElement(React.Fragment, null,
+            index > 0 && React.createElement(HelpBlock_1.default, { margin: 2 }, "AND"),
+            React.createElement(rebass_1.Flex, { key: index, flex: 1, flexDirection: "column" },
+                React.createElement(AdaptableInput_1.default, { "data-name": `predicate-input-${index}`, marginTop: 2, type: predicateDefInput.type, autoFocus: index === 0, value: props.predicate.Inputs[index], onChange: (e) => handlePredicateInputChange(e, index) })))))),
+        isValuesPredicateDef(currentPredicateDef) && (React.createElement(PermittedValuesSelector_1.PermitedValuesSelector, { onPredicateValuesChange: handlePredicateValuesChange, predicate: props.predicate, columnId: props.columnId }))));
+};
+exports.PredicateEditor = PredicateEditor;

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

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { AdaptableApi } from '../../Api/AdaptableApi';
-import { CellColorRange, ColumnComparison } from '../../PredefinedConfig/StyledColumnState';
+import { CellColorRange, ColumnComparison, NumericStyledColumn } from '../../PredefinedConfig/StyledColumnState';
 import { AdaptableScope } from '../../PredefinedConfig/Common/AdaptableScope';
 export interface RangesComponentProps extends React.ClassAttributes<RangesComponent> {
     ranges: CellColorRange[];
     columnComparison?: ColumnComparison;
+    rangeValueType: NumericStyledColumn['RangeValueType'];
+    onRangeValueTypeChange: (rangeValueType: NumericStyledColumn['RangeValueType']) => void;
     scope: AdaptableScope;
     api: AdaptableApi;
     showRangeDirection: boolean;
@@ -17,14 +19,13 @@ export interface RangesComponentProps extends React.ClassAttributes<RangesCompon
     disabled?: boolean;
 }
 export interface RangesComponentState {
-    ranges: CellColorRange[];
-    columnComparison: ColumnComparison;
     rangesType: 'Standard' | 'ColumnComparison';
 }
 export declare class RangesComponent extends React.Component<RangesComponentProps, RangesComponentState> {
     constructor(props: RangesComponentProps);
     render(): JSX.Element;
     private onRangesTypeChanged;
+    private handleRangeValueTypeChange;
     changeRangeMin(index: number, value: string): void;
     changeRangeMax(index: number, value: string): void;
     changeRangeColor(index: number, value: string): void;

package/src/View/Components/RangesComponent.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RangesComponent = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const ColorPicker_1 = require("../ColorPicker");
 const rebass_1 = require("rebass");
+const ColorPicker_1 = require("../ColorPicker");
+const clamp_1 = tslib_1.__importDefault(require("lodash/clamp"));
 const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
 const CheckBox_1 = require("../../components/CheckBox");
 const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
@@ -14,56 +15,64 @@ const UIHelper_1 = require("../UIHelper");
 const ColumnSelector_1 = require("./Selectors/ColumnSelector");
 const Enums_1 = require("../../PredefinedConfig/Common/Enums");
 const Tabs_1 = require("../../components/Tabs");
+const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
 class RangesComponent extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            ranges: this.props.ranges,
-            columnComparison: this.props.columnComparison,
             rangesType: this.props.columnComparison ? 'ColumnComparison' : 'Standard',
         };
     }
     render() {
-        var _a;
-        let comparisonMinValueNumber = this.state.columnComparison != null &&
-            this.state.columnComparison.MinValue != null &&
-            !isNaN(Number(this.state.columnComparison.MinValue))
-            ? Number(this.state.columnComparison.MinValue)
+        var _a, _b;
+        let comparisonMinValueNumber = this.props.columnComparison != null &&
+            this.props.columnComparison.MinValue != null &&
+            !isNaN(Number(this.props.columnComparison.MinValue))
+            ? Number(this.props.columnComparison.MinValue)
             : '';
-        let comparisonMaxValueNumber = this.state.columnComparison != null &&
-            this.state.columnComparison.MaxValue != null &&
-            !isNaN(Number(this.state.columnComparison.MaxValue))
-            ? Number(this.state.columnComparison.MaxValue)
+        let comparisonMaxValueNumber = this.props.columnComparison != null &&
+            this.props.columnComparison.MaxValue != null &&
+            !isNaN(Number(this.props.columnComparison.MaxValue))
+            ? Number(this.props.columnComparison.MaxValue)
             : '';
-        let comparisonMinValueColumnId = this.state.columnComparison != null &&
-            this.state.columnComparison.MinValue != null &&
-            isNaN(Number(this.state.columnComparison.MinValue))
-            ? String(this.state.columnComparison.MinValue)
+        let comparisonMinValueColumnId = this.props.columnComparison != null &&
+            this.props.columnComparison.MinValue != null &&
+            isNaN(Number(this.props.columnComparison.MinValue))
+            ? String(this.props.columnComparison.MinValue)
             : undefined;
-        let comparisonMaxValueColumnId = this.state.columnComparison != null &&
-            this.state.columnComparison.MaxValue != null &&
-            isNaN(Number(this.state.columnComparison.MaxValue))
-            ? String(this.state.columnComparison.MaxValue)
+        let comparisonMaxValueColumnId = this.props.columnComparison != null &&
+            this.props.columnComparison.MaxValue != null &&
+            isNaN(Number(this.props.columnComparison.MaxValue))
+            ? String(this.props.columnComparison.MaxValue)
             : undefined;
-        let comparisonColor = this.state.columnComparison != null && this.state.columnComparison.Color != null
-            ? this.state.columnComparison.Color
+        let comparisonColor = this.props.columnComparison != null && this.props.columnComparison.Color != null
+            ? this.props.columnComparison.Color
             : undefined;
+        const isRangeValueTypeNumber = ((_a = this.props.rangeValueType) !== null && _a !== void 0 ? _a : 'Number') === 'Number';
         return (React.createElement(React.Fragment, null,
             React.createElement(rebass_1.Flex, { flexDirection: "row" },
                 React.createElement(CheckBox_1.CheckBox, { marginTop: 3, checked: this.state.rangesType == 'ColumnComparison', onChange: (checked) => this.onRangesTypeChanged(checked) }, "Use a Column Comparison")),
             this.state.rangesType == 'Standard' && (React.createElement(Tabs_1.Tabs, { autoFocus: false, marginTop: 2 },
                 React.createElement(Tabs_1.Tabs.Tab, null, "Ranges"),
-                React.createElement(Tabs_1.Tabs.Content, null, (_a = this.state.ranges) === null || _a === void 0 ? void 0 :
-                    _a.map((range, index, list) => (React.createElement(rebass_1.Flex, { key: index, alignItems: "end", mb: 2, "data-name": "percent-bar-range" },
+                React.createElement(Tabs_1.Tabs.Content, null,
+                    React.createElement(rebass_1.Flex, { alignItems: "center", mb: 2 },
+                        React.createElement(rebass_1.Text, { mr: 3 }, "Range Type"),
+                        React.createElement(Radio_1.default, { onChange: () => this.handleRangeValueTypeChange('Number'), checked: isRangeValueTypeNumber, mr: 2 }, "Number"),
+                        React.createElement(Radio_1.default, { onChange: () => this.handleRangeValueTypeChange('Percentage'), checked: !isRangeValueTypeNumber }, "Percentage")), (_b = this.props.ranges) === null || _b === void 0 ? void 0 :
+                    _b.map((range, index, list) => (React.createElement(rebass_1.Flex, { key: index, alignItems: "end", mb: 2, "data-name": "percent-bar-range" },
                         React.createElement(rebass_1.Flex, { flexDirection: "column" },
-                            index === 0 && (React.createElement(CheckBox_1.CheckBox, { onClick: () => this.setRangeColMin(range), checked: range.Min === 'Col-Min', mt: 0, mb: 1, fontSize: 3, disabled: this.props.disabled }, "Col Min")),
-                            React.createElement(Input_1.default, { type: typeof range.Min == 'number' ? 'number' : 'text', disabled: this.props.disabled || range.Min === 'Col-Min', value: range.Min, onChange: (event) => {
+                            isRangeValueTypeNumber && index === 0 && (React.createElement(CheckBox_1.CheckBox, { onClick: () => this.setRangeColMin(range), checked: range.Min === 'Col-Min', mt: 0, mb: 1, fontSize: 3, disabled: this.props.disabled }, "Col Min")),
+                            React.createElement(Input_1.default, { type: typeof range.Min == 'number' ? 'number' : 'text', disabled: this.props.disabled ||
+                                    range.Min === 'Col-Min' ||
+                                    (index === 0 && !isRangeValueTypeNumber), value: range.Min, onChange: (event) => {
                                     const { value } = event.target;
                                     this.changeRangeMin(index, value);
                                 }, mr: 2 })),
                         React.createElement(rebass_1.Flex, { flexDirection: "column" },
-                            index === list.length - 1 && (React.createElement(CheckBox_1.CheckBox, { mt: 0, mb: 1, onClick: () => this.setRangeColMax(range), checked: range.Max === 'Col-Max', fontSize: 3, disabled: this.props.disabled }, "Col Max")),
-                            React.createElement(Input_1.default, { value: range.Max, type: typeof range.Max == 'number' ? 'number' : 'text', disabled: this.props.disabled || range.Max === 'Col-Max', onChange: (event) => {
+                            isRangeValueTypeNumber && index === list.length - 1 && (React.createElement(CheckBox_1.CheckBox, { mt: 0, mb: 1, onClick: () => this.setRangeColMax(range), checked: range.Max === 'Col-Max', fontSize: 3, disabled: this.props.disabled }, "Col Max")),
+                            React.createElement(Input_1.default, { value: range.Max, type: typeof range.Max == 'number' ? 'number' : 'text', disabled: this.props.disabled ||
+                                    range.Max === 'Col-Max' ||
+                                    (index === list.length - 1 && !isRangeValueTypeNumber), onChange: (event) => {
                                     const { value } = event.target;
                                     this.changeRangeMax(index, value);
                                 }, mr: 2 })),
@@ -72,7 +81,7 @@ class RangesComponent extends React.Component {
                                     this.changeRangeColor(index, color);
                                 }, mr: 2, height: 33 })),
                         this.props.showRangeDirection && (React.createElement(CheckBox_1.CheckBox, { disabled: this.props.disabled, checked: range.ReverseGradient && range.ReverseGradient == true, onChange: (checked) => this.changeRangeDirectionUp(index, checked) }, "Reverse Gradient")),
-                        React.createElement(SimpleButton_1.default, { ml: 2, mb: 1, icon: "delete", disabled: this.props.disabled || (this.state.ranges && this.state.ranges.length == 1), onClick: () => this.removeRange(index) })))),
+                        React.createElement(SimpleButton_1.default, { ml: 2, mb: 1, icon: "delete", disabled: this.props.disabled || (this.props.ranges && this.props.ranges.length == 1), onClick: () => this.removeRange(index) })))),
                     React.createElement("div", null,
                         React.createElement(SimpleButton_1.default, { disabled: this.props.disabled, variant: "raised", "data-name": "add", onClick: () => this.addRange() }, "Add New Range"))))),
             this.state.rangesType == 'ColumnComparison' && (React.createElement(Tabs_1.Tabs, { autoFocus: false, marginTop: 2 },
@@ -105,7 +114,6 @@ class RangesComponent extends React.Component {
             };
             this.setState({
                 rangesType: 'ColumnComparison',
-                columnComparison: columnComparison,
             });
             this.props.updateColumnComparison(columnComparison);
         }
@@ -113,64 +121,78 @@ class RangesComponent extends React.Component {
             const ranges = this.props.api.scopeApi.createCellColorRangesForScope(this.props.scope);
             this.setState({
                 rangesType: 'Standard',
-                ranges: ranges,
             });
             this.props.updateRanges(ranges);
         }
     }
+    handleRangeValueTypeChange(rangeValueType) {
+        this.props.onRangeValueTypeChange(rangeValueType);
+    }
     changeRangeMin(index, value) {
-        const { ranges } = this.state;
-        ranges[index].Min = Number(value);
+        const { ranges } = this.props;
+        let newMin = Number(value);
+        if (this.props.rangeValueType === 'Percentage') {
+            newMin = (0, clamp_1.default)(newMin, 0, 100);
+        }
+        ranges[index].Min = newMin;
         if (ranges[index - 1]) {
-            ranges[index - 1].Max = Number(value);
+            ranges[index - 1].Max = newMin;
         }
         this.props.updateRanges(ranges);
     }
     changeRangeMax(index, value) {
-        const { ranges } = this.state;
-        ranges[index].Max = Number(value);
+        const { ranges } = this.props;
+        let newMax = Number(value);
+        if (this.props.rangeValueType === 'Percentage') {
+            newMax = (0, clamp_1.default)(newMax, 0, 100);
+        }
+        ranges[index].Max = newMax;
         if (ranges[index + 1]) {
-            ranges[index + 1].Min = Number(value);
+            ranges[index + 1].Min = newMax;
         }
         this.props.updateRanges(ranges);
     }
     changeRangeColor(index, value) {
-        const { ranges } = this.state;
+        const { ranges } = this.props;
         ranges[index].Color = value;
         this.props.updateRanges(ranges);
     }
     changeRangeDirectionUp(index, checked) {
-        const { ranges } = this.state;
+        const { ranges } = this.props;
         ranges[index].ReverseGradient = checked;
         this.props.updateRanges(ranges);
     }
     removeRange(index) {
-        const { ranges } = this.state;
+        let ranges = [...this.props.ranges];
         ranges.splice(index, 1);
+        // Max 100 is always disabled, this prevents from having a Max range lower than 100
+        if (this.props.rangeValueType === 'Percentage' && ranges.length === 1) {
+            ranges[0] = Object.assign(Object.assign({}, ranges[0]), { Max: 100 });
+        }
         this.props.updateRanges(ranges);
     }
     setRangeColMin(range) {
-        const newRanges = this.state.ranges.map((rangeItem) => {
+        const newRanges = this.props.ranges.map((rangeItem) => {
             if (rangeItem === range) {
                 let newMin = rangeItem.Min === 'Col-Min' ? this.props.minMaxRangeValues.min : 'Col-Min';
                 return Object.assign(Object.assign({}, rangeItem), { Min: newMin });
             }
             return rangeItem;
         });
-        this.setState({ ranges: newRanges }, () => this.props.updateRanges(this.state.ranges));
+        this.props.updateRanges(newRanges);
     }
     setRangeColMax(range) {
-        const newRanges = this.state.ranges.map((rangeItem) => {
+        const newRanges = this.props.ranges.map((rangeItem) => {
             if (rangeItem === range) {
                 let newMax = rangeItem.Max === 'Col-Max' ? this.props.minMaxRangeValues.max : 'Col-Max';
                 return Object.assign(Object.assign({}, rangeItem), { Max: newMax });
             }
             return rangeItem;
         });
-        this.setState({ ranges: newRanges }, () => this.props.updateRanges(this.state.ranges));
+        this.props.updateRanges(newRanges);
     }
     addRange() {
-        const lastRange = this.state.ranges[this.state.ranges.length - 1];
+        const lastRange = this.props.ranges[this.props.ranges.length - 1];
         let previousRange = lastRange;
         let Min = null;
         if (lastRange.Max === 'Col-Max') {
@@ -185,38 +207,37 @@ class RangesComponent extends React.Component {
             Max: lastRange.Max,
             Color: (0, UIHelper_1.getHexForName)(UIHelper_1.GRAY),
         };
-        const newRanges = [...this.state.ranges.slice(0, -1), previousRange, newRange];
-        // this.state.ranges.push(newRange);
-        this.setState({ ranges: newRanges }, () => this.props.updateRanges(this.state.ranges));
+        const newRanges = [...this.props.ranges.slice(0, -1), previousRange, newRange];
+        this.props.updateRanges(newRanges);
     }
     changeColumnComparisonMinValue(event) {
         let e = event.target;
-        const { columnComparison } = this.state;
+        const { columnComparison } = this.props;
         columnComparison.MinValue = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(e.value)
             ? Number(e.value)
             : undefined;
         this.props.updateColumnComparison(columnComparison);
     }
     onMinColumnSelectedChanged(columns) {
-        const { columnComparison } = this.state;
+        const { columnComparison } = this.props;
         columnComparison.MinValue = columns.length > 0 ? columns[0].columnId : undefined;
         this.props.updateColumnComparison(columnComparison);
     }
     changeColumnComparisonMaxValue(event) {
         let e = event.target;
-        const { columnComparison } = this.state;
+        const { columnComparison } = this.props;
         columnComparison.MaxValue = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(e.value)
             ? Number(e.value)
             : undefined;
         this.props.updateColumnComparison(columnComparison);
     }
     onMaxColumnSelectedChanged(columns) {
-        const { columnComparison } = this.state;
+        const { columnComparison } = this.props;
         columnComparison.MaxValue = columns.length > 0 ? columns[0].columnId : undefined;
         this.props.updateColumnComparison(columnComparison);
     }
     changeColumnComparisonColor(value) {
-        const { columnComparison } = this.state;
+        const { columnComparison } = this.props;
         columnComparison.Color = value;
         this.props.updateColumnComparison(columnComparison);
     }

package/src/View/Layout/Wizard/LayoutWizard.js

@@ -125,6 +125,7 @@ const LayoutWizard = (props) => {
             },
             {
                 title: 'Filters',
+                isValid: (layout) => (0, FilterSection_1.isColumnFiltersValid)(layout),
                 details: 'View Column Filters',
                 renderSummary: () => React.createElement(FilterSection_1.FilterSectionSummary, null),
                 render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },

package/src/View/Layout/Wizard/sections/FilterSection.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Layout } from '../../../../../types';
+export declare const isColumnFiltersValid: (layout: Layout) => true | string;
 export declare const FilterSectionSummary: React.FunctionComponent;
 interface FilterSectionProps {
     onChange: (data: Layout) => void;