@adaptabletools/adaptable-cjs 22.1.1 → 23.0.0-canary.0

package/src/View/Layout/Wizard/sections/ParameterizedAggFuncPicker.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ParameterizedAggFuncPicker = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const ParameterizedAggregationRegistry_1 = require("../../../../Aggregation/ParameterizedAggregationRegistry");
+const parameterizedAggregationWizardHelpers_1 = require("../../../../Aggregation/parameterizedAggregationWizardHelpers");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const Flex_1 = require("../../../../components/Flex");
+const ParameterizedAggFuncPicker = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const adaptableAggFunctions = (0, parameterizedAggregationWizardHelpers_1.getAdaptableAggFuncNamesForColumn)(props.column);
+    const availableAggregationFunctions = props.availableAggregationFunctions ?? props.column.availableAggregationFunctions ?? [];
+    const aggOptions = [
+        ...new Set([...availableAggregationFunctions, ...adaptableAggFunctions]),
+    ].map((fnName) => ({
+        label: fnName,
+        onClick: () => {
+            const aggFuncValue = (0, parameterizedAggregationWizardHelpers_1.resolveAggFuncValueFromWizardSelection)(fnName);
+            props.onChangeEntries((0, parameterizedAggregationWizardHelpers_1.upsertColumnAggregationEntry)(props.aggregationEntries, props.column.columnId, aggFuncValue));
+        },
+    }));
+    const currentAggFnName = props.aggregationColumnsMap[props.column.columnId];
+    const parameterizedDefinition = currentAggFnName
+        ? (0, ParameterizedAggregationRegistry_1.getParameterizedAggregationDefinitionByAgGridName)(currentAggFnName)
+        : undefined;
+    const numericColumnsOptions = props.numberColumns
+        .filter((col) => col.columnId !== props.column.columnId)
+        .map((col) => {
+        return {
+            label: col.friendlyName,
+            onClick: () => {
+                const definition = parameterizedDefinition;
+                if (!definition?.createDefinition) {
+                    return;
+                }
+                props.onChangeEntries((0, parameterizedAggregationWizardHelpers_1.upsertColumnAggregationEntry)(props.aggregationEntries, props.column.columnId, definition.createDefinition(col.columnId)));
+            },
+        };
+    });
+    const argSelectionLabel = (0, parameterizedAggregationWizardHelpers_1.formatParameterizedArgSelectionLabel)(adaptable.api, props.column.columnId, props.aggValue);
+    if (!props.aggValue) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DropdownButton_1.default, { columns: ['label'], items: aggOptions, className: "twa:ml-2", children: currentAggFnName }), parameterizedDefinition && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:bg-primary twa:ml-3", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, parameterizedAggregationWizardHelpers_1.getParameterizedArgColumnLabel)(currentAggFnName) }), ' ', (0, jsx_runtime_1.jsx)(DropdownButton_1.default, { columns: ['label'], items: numericColumnsOptions, className: "twa:ml-2", children: argSelectionLabel })] }))] }));
+};
+exports.ParameterizedAggFuncPicker = ParameterizedAggFuncPicker;

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { PivotLayout } from '../../../../../types';
-export declare const isPivotAggregationsSectionValid: (data: PivotLayout) => true | string;
+import { validatePivotLayoutAggregations } from '../../../../Aggregation/validateParameterizedAggregations';
+export declare const isPivotAggregationsSectionValid: typeof validatePivotLayoutAggregations;
 export declare const PivotAggregationsSectionSummary: React.FunctionComponent;
 interface PivotAggregationsSectionProps {
     onChange: (data: PivotLayout) => void;

package/src/View/Layout/Wizard/sections/PivotAggregationsSection.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PivotAggregationsSection = exports.PivotAggregationsSectionSummary = exports.isPivotAggregationsSectionValid = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const CheckBox_1 = require("../../../../components/CheckBox");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
@@ -9,6 +10,10 @@ const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLa
 const Tabs_1 = require("../../../../components/Tabs");
 const Tag_1 = require("../../../../components/Tag");
 const AggregationColumns_1 = require("../../../../AdaptableState/Common/AggregationColumns");
+const validateParameterizedAggregations_1 = require("../../../../Aggregation/validateParameterizedAggregations");
+const parameterizedAggregationHeader_1 = require("../../../../Aggregation/parameterizedAggregationHeader");
+const parameterizedAggregationWizardHelpers_1 = require("../../../../Aggregation/parameterizedAggregationWizardHelpers");
+const ParameterizedAggFuncPicker_1 = require("./ParameterizedAggFuncPicker");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const ValueSelector_1 = require("../../../Components/ValueSelector");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
@@ -16,92 +21,11 @@ const Utilities_1 = require("./Utilities");
 const ColumnGroupTag_1 = require("../../../Components/ColumnGroupTag");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
-const Select_1 = require("../../../../components/Select");
 const Flex_1 = require("../../../../components/Flex");
+const NewSelect_1 = require("../../../../components/NewSelect");
 const PivotColumnRow = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const aggValue = (props.layout.PivotAggregationColumns || []).find((x) => x.ColumnId === props.column.columnId)?.AggFunc;
-    const adaptableAggFunctions = [];
-    if (props.column.dataType === 'number') {
-        adaptableAggFunctions.push(AggregationColumns_1.WEIGHTED_AVERAGE_AGG_FN_NAME);
-    }
-    const aggOptions = [...props.column.availableAggregationFunctions, ...adaptableAggFunctions].map((fnName) => {
-        return {
-            label: fnName,
-            onClick: () => {
-                let aggCols = props.layout.PivotAggregationColumns || [];
-                if (!aggCols) {
-                    return;
-                }
-                const AggFuncValue = fnName === AggregationColumns_1.WEIGHTED_AVERAGE_AGG_FN_NAME
-                    ? {
-                        type: 'weightedAverage',
-                        weightedColumnId: null,
-                    }
-                    : fnName;
-                let found = false;
-                aggCols = aggCols.map(({ ColumnId, AggFunc }) => {
-                    if (ColumnId === props.column.columnId) {
-                        found = true;
-                        return {
-                            ColumnId,
-                            AggFunc: AggFuncValue,
-                        };
-                    }
-                    return { ColumnId, AggFunc };
-                });
-                if (!found) {
-                    aggCols.push({
-                        ColumnId: props.column.columnId,
-                        AggFunc: AggFuncValue,
-                    });
-                }
-                props.onChangeAggFunction(aggCols);
-            },
-        };
-    });
-    const numericColumnsOptions = props.numberColumns
-        .filter((col) => col.columnId !== props.column.columnId)
-        .map((col) => {
-        return {
-            label: col.friendlyName,
-            onClick: () => {
-                let aggCols = props.layout.PivotAggregationColumns;
-                if (!aggCols) {
-                    return;
-                }
-                const AggFuncValue = {
-                    type: 'weightedAverage',
-                    weightedColumnId: col.columnId,
-                };
-                let found = false;
-                aggCols = aggCols.map(({ ColumnId, AggFunc }) => {
-                    if (ColumnId === props.column.columnId) {
-                        found = true;
-                        return {
-                            ColumnId,
-                            AggFunc: AggFuncValue,
-                        };
-                    }
-                    return { ColumnId, AggFunc };
-                });
-                if (!found) {
-                    aggCols.push({
-                        ColumnId: props.column.columnId,
-                        AggFunc: AggFuncValue,
-                    });
-                }
-                props.onChangeAggFunction(aggCols);
-            },
-        };
-    });
-    const currentAggFnName = props.aggregationColumnsMap[props.column.columnId];
-    let weightName = null;
-    if (typeof aggValue === 'object' && aggValue.type === 'weightedAverage') {
-        weightName = aggValue.weightedColumnId
-            ? adaptable.api.columnApi.getFriendlyNameForColumnId(aggValue.weightedColumnId)
-            : 'Select Weight';
-    }
     const totalOptions = ['Off', 'Before', 'After', 'Pivot Specific'].map((totalVariant) => {
         return {
             label: totalVariant,
@@ -174,72 +98,42 @@ const PivotColumnRow = (props) => {
         label: option,
         value: option === 'Off' ? false : option.toLowerCase(),
     }));
-    return (React.createElement(Flex_1.Box, { "data-name": props.column.columnId, className: "ab-Layout-Wizard__ColumnRow" },
-        React.createElement(Flex_1.Flex, { alignItems: "flex-start" },
-            React.createElement(Flex_1.Flex, { className: "twa:flex-[0_0_auto]", alignItems: "center" },
-                React.createElement(Flex_1.Flex, { className: "twa:min-w-[80px]" }, props.column.friendlyName),
-                React.createElement(ColumnGroupTag_1.ColumnGroupTag, { column: props.column }),
-                aggValue && (React.createElement(DropdownButton_1.default, { columns: ['label'], items: aggOptions, className: "twa:ml-2" }, currentAggFnName)),
-                currentAggFnName === AggregationColumns_1.WEIGHTED_AVERAGE_AGG_FN_NAME && (React.createElement(Flex_1.Flex, { className: "twa:bg-primary twa:ml-3", alignItems: "center" },
-                    React.createElement(Flex_1.Box, null, "Weight"),
-                    ' ',
-                    React.createElement(DropdownButton_1.default, { columns: ['label'], items: numericColumnsOptions, className: "twa:ml-2" }, weightName))),
-                aggValue && (React.createElement(Flex_1.Flex, { className: "twa:bg-primary twa:ml-3", alignItems: "center" },
-                    React.createElement(Flex_1.Box, null, "Total"),
-                    ' ',
-                    React.createElement(DropdownButton_1.default, { columns: ['label'], items: totalOptions, className: "twa:ml-2" }, currentTotal)))),
-            hasPivotSpecificTotals && (React.createElement(Flex_1.Flex, { className: "twa:ml-2 twa:pl-2 twa:flex-[1_1_auto] twa:min-w-[200px]", flexWrap: "wrap", alignItems: "center", style: {
-                    borderLeft: '1px solid var(--ab-color-text-on-primary)',
-                    rowGap: '8px',
-                    columnGap: '12px',
-                } }, props.layout.PivotColumns.map((pivotColId) => {
-                const pivotTotalSetting = pivotSpecificTotals.find((t) => t.PivotColumnId === pivotColId);
-                const currentValue = pivotTotalSetting == undefined
-                    ? 'Off'
-                    : pivotTotalSetting.ShowTotal === false
-                        ? 'Off'
-                        : pivotTotalSetting.ShowTotal === 'before' ||
-                            pivotTotalSetting.ShowTotal === true ||
-                            pivotTotalSetting.ShowTotal == undefined
-                            ? 'Before'
-                            : pivotTotalSetting.ShowTotal === 'after'
-                                ? 'After'
-                                : 'Off';
-                return (React.createElement(Flex_1.Flex, { key: pivotColId, alignItems: "center" },
-                    React.createElement(Flex_1.Box, { className: "twa:mr-1" },
-                        adaptable.api.columnApi.getFriendlyNameForColumnId(pivotColId),
-                        ":"),
-                    React.createElement(DropdownButton_1.default, { columns: ['label'], items: pivotTotalOptions.map((opt) => ({
-                            label: opt.label,
-                            onClick: () => handleTotalChange(pivotColId, opt.value),
-                        })) }, currentValue)));
-            }))))));
-};
-const isPivotAggregationsSectionValid = (data) => {
-    const weightedAvg = data.PivotAggregationColumns
-        ? (data.PivotAggregationColumns || [])
-            .map((agg) => agg.AggFunc)
-            .find((agg) => typeof agg === 'object' && agg.type === 'weightedAverage')
-        : null;
-    if (weightedAvg && !weightedAvg.weightedColumnId) {
-        return 'Weighted Average requires a weight column to be selected.';
-    }
-    return true;
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": props.column.columnId, className: "ab-Layout-Wizard__ColumnRow", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "flex-start", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-[0_0_auto]", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:min-w-[80px]", children: props.column.friendlyName }), (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: props.column }), (0, jsx_runtime_1.jsx)(ParameterizedAggFuncPicker_1.ParameterizedAggFuncPicker, { column: props.column, aggValue: aggValue, aggregationColumnsMap: props.aggregationColumnsMap, numberColumns: props.numberColumns, aggregationEntries: props.layout.PivotAggregationColumns || [], onChangeEntries: props.onChangeAggFunction, availableAggregationFunctions: props.column.availableAggregationFunctions }), aggValue && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:bg-primary twa:ml-3", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Total" }), ' ', (0, jsx_runtime_1.jsx)(DropdownButton_1.default, { columns: ['label'], items: totalOptions, className: "twa:ml-2", children: currentTotal })] }))] }), hasPivotSpecificTotals && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:ml-2 twa:pl-2 twa:flex-[1_1_auto] twa:min-w-[200px]", flexWrap: "wrap", alignItems: "center", style: {
+                        borderLeft: '1px solid var(--ab-color-text-on-primary)',
+                        rowGap: '8px',
+                        columnGap: '12px',
+                    }, children: props.layout.PivotColumns.map((pivotColId) => {
+                        const pivotTotalSetting = pivotSpecificTotals.find((t) => t.PivotColumnId === pivotColId);
+                        const currentValue = pivotTotalSetting == undefined
+                            ? 'Off'
+                            : pivotTotalSetting.ShowTotal === false
+                                ? 'Off'
+                                : pivotTotalSetting.ShowTotal === 'before' ||
+                                    pivotTotalSetting.ShowTotal === true ||
+                                    pivotTotalSetting.ShowTotal == undefined
+                                    ? 'Before'
+                                    : pivotTotalSetting.ShowTotal === 'after'
+                                        ? 'After'
+                                        : 'Off';
+                        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: [adaptable.api.columnApi.getFriendlyNameForColumnId(pivotColId), ":"] }), (0, jsx_runtime_1.jsx)(DropdownButton_1.default, { columns: ['label'], items: pivotTotalOptions.map((opt) => ({
+                                        label: opt.label,
+                                        onClick: () => handleTotalChange(pivotColId, opt.value),
+                                    })), children: currentValue })] }, pivotColId));
+                    }) }))] }) }));
 };
-exports.isPivotAggregationsSectionValid = isPivotAggregationsSectionValid;
+exports.isPivotAggregationsSectionValid = validateParameterizedAggregations_1.validatePivotLayoutAggregations;
 const PivotAggregationsSectionSummary = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const pivotAggregationColumns = layout.PivotAggregationColumns || [];
     let content = null;
     if (pivotAggregationColumns.length) {
-        content = (React.createElement(FormLayout_1.default, null, pivotAggregationColumns.map(({ ColumnId: colId, AggFunc: aggFunc }) => (React.createElement(FormLayout_1.FormRow, { key: colId, label: adaptable.api.columnApi.getFriendlyNameForColumnId(colId) },
-            React.createElement(Tag_1.Tag, null, typeof aggFunc === 'object' ? aggFunc.type : aggFunc))))));
+        content = ((0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: pivotAggregationColumns.map(({ ColumnId: colId, AggFunc: aggFunc }) => ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: adaptable.api.columnApi.getFriendlyNameForColumnId(colId), children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, parameterizedAggregationHeader_1.getParameterizedAggregationDisplayName)(adaptable.api, aggFunc, colId) }) }, colId))) }));
     }
     else {
-        content = React.createElement(Tag_1.Tag, null, "No Pivot Column Aggregations");
+        content = (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Pivot Column Aggregations" });
     }
-    return React.createElement(Flex_1.Box, null, content);
+    return (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: content });
 };
 exports.PivotAggregationsSectionSummary = PivotAggregationsSectionSummary;
 const PivotAggregationsSection = (props) => {
@@ -281,22 +175,8 @@ const PivotAggregationsSection = (props) => {
             acc[col.columnId] = col;
             return acc;
         }, {});
-        return (layout.PivotAggregationColumns || []).reduce((acc, { ColumnId: colId, AggFunc: aggFunc }) => {
-            let fn = aggFunc;
-            let fnName = '';
-            if (typeof fn === 'boolean') {
-                fnName = allColumnsMap[colId].aggregationFunction;
-            }
-            if (typeof fn === 'object' && fn.type === 'weightedAverage') {
-                fnName = AggregationColumns_1.WEIGHTED_AVERAGE_AGG_FN_NAME;
-            }
-            else if (typeof fn === 'string') {
-                fnName = fn;
-            }
-            acc[colId] = fnName;
-            return acc;
-        }, {});
-    }, [layout]);
+        return (0, parameterizedAggregationWizardHelpers_1.buildAggregationColumnsMap)(layout.PivotAggregationColumns || [], allColumnsMap);
+    }, [layout, allColumns]);
     const handleSuppressAggFuncInHeader = (checked) => {
         props.onChange({
             ...layout,
@@ -321,48 +201,47 @@ const PivotAggregationsSection = (props) => {
         return true;
     };
     const isPivotColumnTotalEnabled = checkIfPivotColumnTotalEnabled();
-    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs_1.Tabs.Tab, null, "Column Aggregations"),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(Flex_1.Flex, null,
-                React.createElement(FormLayout_1.default, null,
-                    React.createElement(FormLayout_1.FormRow, { label: 'Omit Aggregation from Header' },
-                        React.createElement(CheckBox_1.CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader })),
-                    React.createElement(FormLayout_1.FormRow, { label: 'Grand Total Row' },
-                        React.createElement(Select_1.Select, { style: { width: 160 }, options: ['top', 'bottom', 'pinnedTop', 'pinnedBottom'].map((position) => {
-                                return {
-                                    label: StringExtensions_1.default.CamelCaseToHumanText(position),
-                                    value: position,
-                                };
-                            }), placeholder: "[none]", value: layout.GrandTotalRow, onChange: (value) => {
-                                props.onChange({
-                                    ...layout,
-                                    GrandTotalRow: value,
-                                });
-                            }, isClearable: true })),
-                    React.createElement(FormLayout_1.FormRow, { label: 'Pivot Grand Total' },
-                        React.createElement(Select_1.Select, { className: "twa:w-[160px]", options: ['before', 'after'].map((position) => {
-                                return {
-                                    label: StringExtensions_1.default.CapitaliseFirstLetter(position),
-                                    value: position,
-                                };
-                            }), placeholder: "[none]", value: layout.PivotGrandTotal, onChange: (value) => {
-                                props.onChange({
-                                    ...layout,
-                                    PivotGrandTotal: value,
-                                });
-                            }, isClearable: true })),
-                    React.createElement(FormLayout_1.FormRow, { label: 'Pivot Column Total' }, isPivotColumnTotalEnabled === true ? (React.createElement(Select_1.Select, { style: { width: 160 }, options: ['before', 'after'].map((position) => {
-                            return {
-                                label: StringExtensions_1.default.CapitaliseFirstLetter(position),
-                                value: position,
-                            };
-                        }), placeholder: "[none]", value: layout.PivotColumnTotal, onChange: (value) => {
-                            props.onChange({
-                                ...layout,
-                                PivotColumnTotal: value,
-                            });
-                        }, isClearable: true })) : (React.createElement(Flex_1.Box, { className: "twa:ml-1 twa:italic" }, isPivotColumnTotalEnabled))))),
-            React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => (React.createElement(PivotColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap, numberColumns: numberColumns })), options: sortedAggregableColumns, value: (layout.PivotAggregationColumns || []).map((col) => col.ColumnId), allowReorder: true, onChange: handleColumnsSelectionChange }))));
+    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { style: { height: '100%' }, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Column Aggregations" }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Content, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:mb-2", children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: 'Omit Aggregation from Header', children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: 'Grand Total Row', children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-[160px]", items: [
+                                            {
+                                                label: 'Off',
+                                                value: null,
+                                            },
+                                        ].concat(['top', 'bottom', 'pinnedTop', 'pinnedBottom'].map((position) => {
+                                            return {
+                                                label: StringExtensions_1.default.CamelCaseToHumanText(position),
+                                                value: position,
+                                            };
+                                        })), placeholder: "[none]", value: layout.GrandTotalRow, onValueChange: (value) => {
+                                            props.onChange({
+                                                ...layout,
+                                                GrandTotalRow: value,
+                                            });
+                                        } }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: 'Pivot Grand Total', children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-[160px]", items: [
+                                            { label: 'Off', value: null },
+                                            ...['before', 'after'].map((position) => {
+                                                return {
+                                                    label: StringExtensions_1.default.CapitaliseFirstLetter(position),
+                                                    value: position,
+                                                };
+                                            }),
+                                        ], placeholder: "[none]", value: layout.PivotGrandTotal, onValueChange: (value) => {
+                                            props.onChange({
+                                                ...layout,
+                                                PivotGrandTotal: value,
+                                            });
+                                        } }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: 'Pivot Column Total', children: isPivotColumnTotalEnabled === true ? ((0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-[160px]", items: [
+                                            { label: 'Off', value: null },
+                                            ...['before', 'after'].map((position) => {
+                                                return {
+                                                    label: StringExtensions_1.default.CapitaliseFirstLetter(position),
+                                                    value: position,
+                                                };
+                                            }),
+                                        ], placeholder: "[none]", value: layout.PivotColumnTotal, onValueChange: (value) => {
+                                            props.onChange({
+                                                ...layout,
+                                                PivotColumnTotal: value,
+                                            });
+                                        } })) : ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-1 twa:italic", children: isPivotColumnTotalEnabled })) })] }) }), (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => ((0, jsx_runtime_1.jsx)(PivotColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap, numberColumns: numberColumns })), options: sortedAggregableColumns, value: (layout.PivotAggregationColumns || []).map((col) => col.ColumnId), allowReorder: true, onChange: handleColumnsSelectionChange })] })] }));
 };
 exports.PivotAggregationsSection = PivotAggregationsSection;

package/src/View/Layout/Wizard/sections/PivotColumnsSection.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PivotColumnsSection = exports.PivotColumnsSectionSummary = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const Tabs_1 = require("../../../../components/Tabs");
 const Tag_1 = require("../../../../components/Tag");
@@ -15,7 +16,7 @@ const CheckBox_1 = require("../../../../components/CheckBox");
 const PivotColumnsSectionSummary = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:rounded-standard twa:bg-defaultbackground" }, layout.PivotColumns?.length ? (layout.PivotColumns.map((columnId) => (React.createElement(Tag_1.Tag, { className: "twa:mr-1", key: columnId }, adaptable.api.columnApi.getFriendlyNameForColumnId(columnId))))) : (React.createElement(Tag_1.Tag, null, "No Pivot Columns Defined"))));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:rounded-standard twa:bg-defaultbackground", children: layout.PivotColumns?.length ? (layout.PivotColumns.map((columnId) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mr-1", children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId)))) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Pivot Columns Defined" })) }));
 };
 exports.PivotColumnsSectionSummary = PivotColumnsSectionSummary;
 const PivotColumnsSection = (props) => {
@@ -31,16 +32,11 @@ const PivotColumnsSection = (props) => {
             PivotColumns: columnIds,
         });
     };
-    return (React.createElement(Tabs_1.Tabs, { className: "twa:h-full" },
-        React.createElement(Tabs_1.Tabs.Tab, null, "Pivot Columns"),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(Flex_1.Box, { className: "twa:mb-3 twa:px-2" },
-                React.createElement(CheckBox_1.CheckBox, { checked: !!layout.PivotResultColumnsOrder, onChange: (checked) => {
-                        props.onChange({
-                            ...layout,
-                            PivotResultColumnsOrder: checked,
-                        });
-                    } }, "Persist Order of Pivot Result Columns")),
-            React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, options: sortedPivotColumns, value: layout.PivotColumns ?? [], allowReorder: true, onChange: handleColumnsChange }))));
+    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:h-full", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Pivot Columns" }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Content, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mb-3 twa:px-2", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: !!layout.PivotResultColumnsOrder, onChange: (checked) => {
+                                props.onChange({
+                                    ...layout,
+                                    PivotResultColumnsOrder: checked,
+                                });
+                            }, children: "Persist Order of Pivot Result Columns" }) }), (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, options: sortedPivotColumns, value: layout.PivotColumns ?? [], allowReorder: true, onChange: handleColumnsChange })] })] }));
 };
 exports.PivotColumnsSection = PivotColumnsSection;

package/src/View/Layout/Wizard/sections/PivotRowGroupingSection.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PivotRowGroupingSection = exports.PivotRowGroupingSectionSummary = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const Utilities_1 = require("./Utilities");
 const ColumnGroupTag_1 = require("../../../Components/ColumnGroupTag");
@@ -17,10 +18,9 @@ const Flex_1 = require("../../../../components/Flex");
 const PivotRowGroupingSectionSummary = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (React.createElement(Flex_1.Box, null, layout.PivotGroupedColumns?.length ? (layout.PivotGroupedColumns.map((columnId) => {
-        return (React.createElement(Flex_1.Box, { className: "twa:mb-2" },
-            React.createElement(Tag_1.Tag, { key: columnId }, adaptable.api.columnApi.getFriendlyNameForColumnId(columnId))));
-    })) : (React.createElement(Tag_1.Tag, null, "No Pivot Row Grouping"))));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: layout.PivotGroupedColumns?.length ? (layout.PivotGroupedColumns.map((columnId) => {
+            return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mb-2", children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId) }));
+        })) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Pivot Row Grouping" })) }));
 };
 exports.PivotRowGroupingSectionSummary = PivotRowGroupingSectionSummary;
 const PivotRowGroupingSection = (props) => {
@@ -40,14 +40,6 @@ const PivotRowGroupingSection = (props) => {
         });
     };
     const rowGroupsText = 'Row Group ' + adaptable.api.internalApi.getCorrectEnglishVariant('Behaviour');
-    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs_1.Tabs.Tab, null, "Row Grouped Columns"),
-        React.createElement(Tabs_1.Tabs.Tab, null, rowGroupsText),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => (React.createElement(Flex_1.Flex, { alignItems: "center" },
-                    option.friendlyName ?? option.columnId,
-                    React.createElement(ColumnGroupTag_1.ColumnGroupTag, { column: option }))), options: sortedGroupableColumns, value: layout.PivotGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange })),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(RowGroupingSection_1.RowGroupBehaviorSection, { layout: layout, onChange: onChange }))));
+    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { style: { height: '100%' }, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Row Grouped Columns" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: rowGroupsText }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [option.friendlyName ?? option.columnId, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: option })] })), options: sortedGroupableColumns, value: layout.PivotGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(RowGroupingSection_1.RowGroupBehaviorSection, { layout: layout, onChange: onChange }) })] }));
 };
 exports.PivotRowGroupingSection = PivotRowGroupingSection;

package/src/View/Layout/Wizard/sections/RowGroupingSection.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RowGroupingSection = exports.RowGroupBehaviorSection = exports.RowGroupingSectionSummary = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const FormLayout_1 = tslib_1.__importDefault(require("../../../../components/FormLayout"));
 const Utilities_1 = require("./Utilities");
@@ -20,19 +21,16 @@ const RowGroupingSectionSummary = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     if (adaptable.api.gridApi.isTreeDataGrid()) {
-        return (React.createElement(Flex_1.Flex, { flexDirection: "row" },
-            React.createElement(Tag_1.Tag, null, "Row Grouping is not available in Tree Grids")));
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Row Grouping is not available in Tree Grids" }) }));
     }
-    return (React.createElement(Flex_1.Flex, { flexDirection: "row" }, layout.RowGroupedColumns?.length ? (layout.RowGroupedColumns.map((columnId) => {
-        return (React.createElement(Flex_1.Box, { key: columnId, className: "twa:mb-2 twa:mr-2" },
-            React.createElement(Tag_1.Tag, null, adaptable.api.columnApi.getFriendlyNameForColumnId(columnId))));
-    })) : (React.createElement(Tag_1.Tag, null, "No Row Grouping"))));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: layout.RowGroupedColumns?.length ? (layout.RowGroupedColumns.map((columnId) => {
+            return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mb-2 twa:mr-2", children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }) }, columnId));
+        })) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Row Grouping" })) }));
 };
 exports.RowGroupingSectionSummary = RowGroupingSectionSummary;
 const RowGroupBehaviorSection = (props) => {
     const { layout, onChange } = props;
-    return (React.createElement(FormLayout_1.default, null,
-        React.createElement(Radio_1.RadioGroup, { orientation: "vertical", value: layout.RowGroupValues?.RowGroupDefaultBehavior ?? 'always-collapsed', onRadioChange: (RowGroupDefaultBehavior) => {
+    return ((0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: (0, jsx_runtime_1.jsxs)(Radio_1.RadioGroup, { orientation: "vertical", value: layout.RowGroupValues?.RowGroupDefaultBehavior ?? 'always-collapsed', onRadioChange: (RowGroupDefaultBehavior) => {
                 const newLayout = {
                     ...layout,
                     RowGroupValues: {
@@ -44,18 +42,13 @@ const RowGroupBehaviorSection = (props) => {
                     newLayout.RowGroupValues.ExceptionGroupKeys = [];
                 }
                 onChange(newLayout);
-            } },
-            React.createElement(TypeRadio_1.TypeRadio, { value: "always-collapsed", text: "All Collapsed", description: "Layout opens with all Grouped Rows always collapsed" }),
-            React.createElement(TypeRadio_1.TypeRadio, { value: "always-expanded", text: "All Expanded", description: "Layout opens with all Grouped Rows always expanded" }),
-            React.createElement(TypeRadio_1.TypeRadio, { value: "expanded", text: "Mostly Expanded", description: "Layout opens with all Grouped rows expanded, other than those collapsed when Layout last displayed" }),
-            React.createElement(TypeRadio_1.TypeRadio, { value: "collapsed", text: "Mostly Collapsed", description: "Layout opens with all Grouped rows collapsed, other than those expanded when Layout last displayed" }))));
+            }, children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "always-collapsed", text: "All Collapsed", description: "Layout opens with all Grouped Rows always collapsed" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "always-expanded", text: "All Expanded", description: "Layout opens with all Grouped Rows always expanded" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "expanded", text: "Mostly Expanded", description: "Layout opens with all Grouped rows expanded, other than those collapsed when Layout last displayed" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "collapsed", text: "Mostly Collapsed", description: "Layout opens with all Grouped rows collapsed, other than those expanded when Layout last displayed" })] }) }));
 };
 exports.RowGroupBehaviorSection = RowGroupBehaviorSection;
 const RowGroupingSection = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     if (adaptable.api.gridApi.isTreeDataGrid()) {
-        return (React.createElement(Flex_1.Flex, { flexDirection: "row" },
-            React.createElement(Tag_1.Tag, null, "Row Grouping is not available in Tree Grids")));
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Row Grouping is not available in Tree Grids" }) }));
     }
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const rowGroupsText = 'Row Group ' + adaptable.api.internalApi.getCorrectEnglishVariant('Behaviour');
@@ -78,34 +71,18 @@ const RowGroupingSection = (props) => {
         }
         onChange(newLayout);
     };
-    return (React.createElement(Flex_1.Box, { className: "twa:h-full" },
-        React.createElement(Tabs_1.Tabs, null,
-            React.createElement(Tabs_1.Tabs.Tab, null, "Group Display Type"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(FormLayout_1.default, null,
-                    React.createElement(Radio_1.RadioGroup, { orientation: "vertical", value: layout.RowGroupDisplayType ?? 'single', onRadioChange: (RowGroupDisplayType) => {
-                            let newLayout = {
-                                ...layout,
-                                RowGroupDisplayType,
-                            };
-                            if (RowGroupDisplayType === 'single') {
-                                newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForMulti(colId));
-                            }
-                            else {
-                                newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForSingle(colId));
-                            }
-                            onChange(newLayout);
-                        } },
-                        React.createElement(TypeRadio_1.TypeRadio, { value: "single", text: "Single Column", description: "All Row Grouped Columns display in one hierarchical Column" }),
-                        React.createElement(TypeRadio_1.TypeRadio, { value: "multi", text: "Multiple Columns", description: "Each Row Grouped Column displays in its own, separate, Column" }))))),
-        React.createElement(Tabs_1.Tabs, { className: "twa:mt-2" },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Row Grouped Columns"),
-            React.createElement(Tabs_1.Tabs.Tab, null, rowGroupsText),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => (React.createElement(Flex_1.Flex, { alignItems: "center" },
-                        option.friendlyName ?? option.columnId,
-                        React.createElement(ColumnGroupTag_1.ColumnGroupTag, { column: option }))), options: sortedGroupableColumns, value: layout.RowGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange })),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(exports.RowGroupBehaviorSection, { layout: layout, onChange: onChange })))));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:h-full", children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Group Display Type" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: (0, jsx_runtime_1.jsxs)(Radio_1.RadioGroup, { orientation: "vertical", value: layout.RowGroupDisplayType ?? 'single', onRadioChange: (RowGroupDisplayType) => {
+                                    let newLayout = {
+                                        ...layout,
+                                        RowGroupDisplayType,
+                                    };
+                                    if (RowGroupDisplayType === 'single') {
+                                        newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForMulti(colId));
+                                    }
+                                    else {
+                                        newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForSingle(colId));
+                                    }
+                                    onChange(newLayout);
+                                }, children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "single", text: "Single Column", description: "All Row Grouped Columns display in one hierarchical Column" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "multi", text: "Multiple Columns", description: "Each Row Grouped Column displays in its own, separate, Column" })] }) }) })] }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mt-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Row Grouped Columns" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: rowGroupsText }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [option.friendlyName ?? option.columnId, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: option })] })), options: sortedGroupableColumns, value: layout.RowGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(exports.RowGroupBehaviorSection, { layout: layout, onChange: onChange }) })] })] }));
 };
 exports.RowGroupingSection = RowGroupingSection;