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

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

@@ -14,7 +14,6 @@ const ColumnsSection_1 = require("./sections/ColumnsSection");
 const PivotColumnsSection_1 = require("./sections/PivotColumnsSection");
 const RowGroupingSection_1 = require("./sections/RowGroupingSection");
 const AggregationsSection_1 = require("./sections/AggregationsSection");
-const SortSection_1 = require("./sections/SortSection");
 const FilterSection_1 = require("./sections/FilterSection");
 const GridFilterSection_1 = require("./sections/GridFilterSection");
 const RowSummarySection_1 = require("./sections/RowSummarySection");
@@ -24,11 +23,26 @@ const isPivotLayout_1 = require("../../../Utilities/isPivotLayout");
 const PivotRowGroupingSection_1 = require("./sections/PivotRowGroupingSection");
 const PivotAggregationsSection_1 = require("./sections/PivotAggregationsSection");
 const Flex_1 = require("../../../components/Flex");
+const getLayoutWizardTitle = (layout, moduleFriendlyName) => {
+    const layoutName = layout.Name?.trim();
+    return layoutName ? `${moduleFriendlyName} (${layoutName})` : moduleFriendlyName;
+};
+const getLayoutWizardMode = (popupParams, initialLayout) => {
+    const action = popupParams?.action;
+    if (action === 'Edit') {
+        return 'edit';
+    }
+    if (action === 'New' || action === 'Clone') {
+        return 'create';
+    }
+    return initialLayout ? 'edit' : 'create';
+};
 const LayoutWizard = (props) => {
     const dispatch = (0, react_redux_1.useDispatch)();
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const allLayouts = adaptable.api.layoutApi.getLayouts();
     const initialLayout = props.data ?? props.popupParams?.value;
+    const layoutWizardMode = getLayoutWizardMode(props.popupParams, initialLayout);
     const [layout, setLayout] = React.useState(() => {
         let preparedLayout = null;
         if (initialLayout) {
@@ -77,7 +91,8 @@ const LayoutWizard = (props) => {
         props.onFinishWizard(layout);
     };
     const layoutSupportedFeatures = adaptable.api.layoutApi.internalApi.getLayoutSupportedFeatures();
-    return (0, isPivotLayout_1.isPivotLayout)(layout) ? ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    const wizardTitle = getLayoutWizardTitle(layout, props.moduleInfo.FriendlyName);
+    return (0, isPivotLayout_1.isPivotLayout)(layout) ? ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, moduleName: wizardTitle, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 details: 'Configure Pivot Layout',
@@ -97,36 +112,29 @@ const LayoutWizard = (props) => {
                 title: 'Pivot Row Groups',
                 isVisible: () => layoutSupportedFeatures.PivotColumns && layoutSupportedFeatures.RowGroupedColumns,
                 details: 'Configure Pivot Row Grouping',
-                renderSummary: () => (0, jsx_runtime_1.jsx)(PivotRowGroupingSection_1.PivotRowGroupingSectionSummary, {}),
-                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(PivotRowGroupingSection_1.PivotRowGroupingSection, { onChange: (newLayout) => {
+                renderSummary: (data) => (0, jsx_runtime_1.jsx)(PivotRowGroupingSection_1.PivotRowGroupingSectionSummary, { layout: data }),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(PivotRowGroupingSection_1.PivotRowGroupingSection, { layoutWizardMode: layoutWizardMode, onChange: (newLayout) => {
                             setLayout(newLayout);
                         } }) })),
             },
             {
                 title: 'Pivot Columns',
-                details: 'Select Pivot Columns',
+                details: 'Select Pivot Columns and Column Sorting',
                 isVisible: () => layoutSupportedFeatures.PivotColumns,
                 renderSummary: () => (0, jsx_runtime_1.jsx)(PivotColumnsSection_1.PivotColumnsSectionSummary, {}),
-                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(PivotColumnsSection_1.PivotColumnsSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(PivotColumnsSection_1.PivotColumnsSection, { layoutWizardMode: layoutWizardMode, onChange: (newLayout) => setLayout(newLayout) }) })),
             },
             {
                 title: 'Pivot Aggregations',
                 isVisible: () => layoutSupportedFeatures.PivotAggregationColumns && layoutSupportedFeatures.PivotColumns,
                 details: 'Select Pivot Column Aggregations',
-                renderSummary: () => (0, jsx_runtime_1.jsx)(PivotAggregationsSection_1.PivotAggregationsSectionSummary, {}),
+                renderSummary: (data) => (0, jsx_runtime_1.jsx)(PivotAggregationsSection_1.PivotAggregationsSectionSummary, { layout: data }),
                 isValid: (data) => (0, PivotAggregationsSection_1.isPivotAggregationsSectionValid)(data),
-                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(PivotAggregationsSection_1.PivotAggregationsSection, { onChange: (layout) => {
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(PivotAggregationsSection_1.PivotAggregationsSection, { layoutWizardMode: layoutWizardMode, onChange: (layout) => {
                             const newLayout = (0, Helper_1.cloneObject)(layout);
                             setLayout(newLayout);
                         } }) })),
             },
-            {
-                title: 'Sort',
-                isVisible: () => layoutSupportedFeatures.ColumnSorts,
-                renderSummary: () => (0, jsx_runtime_1.jsx)(SortSection_1.SortSectionSummary, {}),
-                details: 'Configure Aggregated Column Sorts',
-                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(SortSection_1.SortSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
-            },
             {
                 title: 'Column Filters',
                 isVisible: () => layoutSupportedFeatures.ColumnFilters,
@@ -155,7 +163,7 @@ const LayoutWizard = (props) => {
                 render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageWizardSummary, {}) })),
                 title: 'Summary',
             },
-        ] })) : ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+        ] })) : ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, moduleName: wizardTitle, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 details: 'Configure Table Layout',
@@ -174,25 +182,24 @@ const LayoutWizard = (props) => {
             {
                 title: 'Row Groups',
                 isVisible: () => layoutSupportedFeatures.RowGroupedColumns,
-                isValid: RowSummarySection_1.areSummaryRowsValid,
-                details: 'Configure Row Grouping',
-                renderSummary: () => (0, jsx_runtime_1.jsx)(RowGroupingSection_1.RowGroupingSectionSummary, {}),
-                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(RowGroupingSection_1.RowGroupingSection, { onChange: setLayout }) })),
+                details: 'Configure Row Grouping and Display Behaviour',
+                renderSummary: (data) => (0, jsx_runtime_1.jsx)(RowGroupingSection_1.RowGroupingSectionSummary, { layout: data }),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(RowGroupingSection_1.RowGroupingSection, { onChange: setLayout, layoutWizardMode: layoutWizardMode }) })),
             },
             {
                 title: 'Columns',
-                details: 'Select Columns',
+                details: 'Configure Column Visibility, Order, Pinning, Sizing and Sorting',
                 isVisible: () => true,
-                renderSummary: () => (0, jsx_runtime_1.jsx)(ColumnsSection_1.ColumnsSectionSummary, {}),
-                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(ColumnsSection_1.ColumnsSection, { onChange: setLayout }) })),
+                renderSummary: (data) => (0, jsx_runtime_1.jsx)(ColumnsSection_1.ColumnsSectionSummary, { layout: data }),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(ColumnsSection_1.ColumnsSection, { layoutWizardMode: layoutWizardMode, onChange: setLayout }) })),
             },
             {
                 title: 'Aggregations',
                 isVisible: () => layoutSupportedFeatures.TableAggregationColumns,
-                details: 'Select Column Aggregations',
-                renderSummary: () => (0, jsx_runtime_1.jsx)(AggregationsSection_1.AggregationsSectionSummary, {}),
+                details: 'Select Aggregation Columns and Behaviour',
+                renderSummary: (data) => (0, jsx_runtime_1.jsx)(AggregationsSection_1.AggregationsSectionSummary, { layout: data }),
                 isValid: (data) => (0, AggregationsSection_1.isAggregationsSectionValid)(data),
-                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(AggregationsSection_1.AggregationsSection, { onChange: (layout) => {
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(AggregationsSection_1.AggregationsSection, { layoutWizardMode: layoutWizardMode, onChange: (layout) => {
                             let newLayout = (0, Helper_1.cloneObject)(layout);
                             // if we do not have an weighted avg col, we need to clear the row summary if one exists
                             if (newLayout.RowSummaries) {
@@ -228,15 +235,9 @@ const LayoutWizard = (props) => {
                 details: 'Configure Row Summaries',
                 renderSummary: () => (0, jsx_runtime_1.jsx)(RowSummarySection_1.RowSummarySectionSummary, {}),
                 isVisible: () => layoutSupportedFeatures.RowSummaries,
+                isValid: RowSummarySection_1.areSummaryRowsValid,
                 render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(RowSummarySection_1.RowSummarySection, { onChange: setLayout }) })),
             },
-            {
-                title: 'Sort',
-                isVisible: () => layoutSupportedFeatures.ColumnSorts,
-                renderSummary: () => (0, jsx_runtime_1.jsx)(SortSection_1.SortSectionSummary, {}),
-                details: 'Configure Column Sorts',
-                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(SortSection_1.SortSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
-            },
             {
                 title: 'Column Filters',
                 isVisible: () => layoutSupportedFeatures.ColumnFilters,

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

@@ -1,10 +1,21 @@
 import * as React from 'react';
-import { TableLayout } from '../../../../../types';
-import { validateTableLayoutAggregations } from '../../../../Aggregation/validateParameterizedAggregations';
-export declare const isAggregationsSectionValid: typeof validateTableLayoutAggregations;
-export declare const AggregationsSectionSummary: React.FunctionComponent;
+import { Layout, TableLayout } from '../../../../../types';
+import { AggregationColumnValue } from '../../../../AdaptableState/Common/AggregationColumns';
+export type GrandTotalRowPosition = 'top' | 'bottom' | 'pinnedTop' | 'pinnedBottom';
+export declare const GRAND_TOTAL_ROW_LABELS: Record<GrandTotalRowPosition | 'off', string>;
+export declare const GRAND_TOTAL_ROW_DESCRIPTIONS: Record<GrandTotalRowPosition | 'off', string>;
+export declare const GRAND_TOTAL_ROW_OPTIONS: (GrandTotalRowPosition | 'off')[];
+export declare function getGrandTotalRowKey(layout: Layout): GrandTotalRowPosition | 'off';
+export declare function getGrandTotalRowLabel(layout: Layout): string;
+export declare function getGrandTotalRowDescription(layout: Layout): string;
+export declare function getAggFuncSummaryLabel(columnId: string, aggFunc: AggregationColumnValue, aggregationColumnsMap: Record<string, string>): string;
+export declare const isAggregationsSectionValid: (data: Layout) => true | string;
+export declare const AggregationsSectionSummary: React.FunctionComponent<{
+    layout?: TableLayout;
+}>;
 interface AggregationsSectionProps {
     onChange: (data: TableLayout) => void;
+    layoutWizardMode?: 'create' | 'edit';
 }
 export declare const AggregationsSection: React.FunctionComponent<AggregationsSectionProps>;
 export {};

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

@@ -1,44 +1,169 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AggregationsSection = exports.AggregationsSectionSummary = exports.isAggregationsSectionValid = void 0;
+exports.AggregationsSection = exports.AggregationsSectionSummary = exports.isAggregationsSectionValid = exports.GRAND_TOTAL_ROW_OPTIONS = exports.GRAND_TOTAL_ROW_DESCRIPTIONS = exports.GRAND_TOTAL_ROW_LABELS = void 0;
+exports.getGrandTotalRowKey = getGrandTotalRowKey;
+exports.getGrandTotalRowLabel = getGrandTotalRowLabel;
+exports.getGrandTotalRowDescription = getGrandTotalRowDescription;
+exports.getAggFuncSummaryLabel = getAggFuncSummaryLabel;
 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 FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
-const Tabs_1 = require("../../../../components/Tabs");
 const Tag_1 = require("../../../../components/Tag");
-const validateParameterizedAggregations_1 = require("../../../../Aggregation/validateParameterizedAggregations");
-const parameterizedAggregationHeader_1 = require("../../../../Aggregation/parameterizedAggregationHeader");
-const parameterizedAggregationWizardHelpers_1 = require("../../../../Aggregation/parameterizedAggregationWizardHelpers");
+const AggregationColumns_1 = require("../../../../AdaptableState/Common/AggregationColumns");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const ValueSelector_1 = require("../../../Components/ValueSelector");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const CollapsibleWizardCard_1 = require("../../../Wizard/CollapsibleWizardCard");
+const layoutWizardAccordionHelpers_1 = require("./layoutWizardAccordionHelpers");
 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 Card_1 = require("../../../../components/Card");
 const Flex_1 = require("../../../../components/Flex");
 const NewSelect_1 = require("../../../../components/NewSelect");
-const ParameterizedAggFuncPicker_1 = require("./ParameterizedAggFuncPicker");
-exports.isAggregationsSectionValid = validateParameterizedAggregations_1.validateTableLayoutAggregations;
-const AggregationsSectionSummary = () => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const entries = layout.TableAggregationColumns || [];
-    let content = null;
-    if (entries.length) {
-        content = ((0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: entries.map(({ ColumnId, AggFunc }) => ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: adaptable.api.columnApi.getFriendlyNameForColumnId(ColumnId), children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, parameterizedAggregationHeader_1.getParameterizedAggregationDisplayName)(adaptable.api, AggFunc, ColumnId) }) }, ColumnId))) }));
+const layoutWizardColumns_1 = require("./layoutWizardColumns");
+const Radio_1 = tslib_1.__importStar(require("../../../../components/Radio"));
+const TypeRadio_1 = require("../../../Wizard/TypeRadio");
+const aggregationSummaryHelpers_1 = require("../../../../Strategy/Utilities/Layout/aggregationSummaryHelpers");
+const SummaryColorTag_1 = require("../../../Wizard/SummaryColorTag");
+const WEIGHTED_AVERAGE_AGG_FN_NAME = 'weightedAvg';
+exports.GRAND_TOTAL_ROW_LABELS = {
+    off: 'None',
+    top: 'Top',
+    bottom: 'Bottom',
+    pinnedTop: 'Pinned Top',
+    pinnedBottom: 'Pinned Bottom',
+};
+exports.GRAND_TOTAL_ROW_DESCRIPTIONS = {
+    off: 'Grand Total Row is not displayed in the grid',
+    top: 'Grand Total Row is displayed at the top of the grid',
+    bottom: 'Grand Total Row is displayed at the bottom of the grid',
+    pinnedTop: 'Grand Total Row is pinned to the top of the grid',
+    pinnedBottom: 'Grand Total Row is pinned to the bottom of the grid',
+};
+exports.GRAND_TOTAL_ROW_OPTIONS = [
+    'off',
+    'top',
+    'bottom',
+    'pinnedTop',
+    'pinnedBottom',
+];
+function getGrandTotalRowKey(layout) {
+    const value = layout.GrandTotalRow;
+    if (value == null || value === false) {
+        return 'off';
+    }
+    return value;
+}
+function getGrandTotalRowLabel(layout) {
+    return exports.GRAND_TOTAL_ROW_LABELS[getGrandTotalRowKey(layout)];
+}
+function getGrandTotalRowDescription(layout) {
+    return exports.GRAND_TOTAL_ROW_DESCRIPTIONS[getGrandTotalRowKey(layout)];
+}
+function getAggFuncSummaryLabel(columnId, aggFunc, aggregationColumnsMap) {
+    if (aggregationColumnsMap[columnId]) {
+        return aggregationColumnsMap[columnId];
+    }
+    if (typeof aggFunc === 'object' && aggFunc.type === 'weightedAverage') {
+        return WEIGHTED_AVERAGE_AGG_FN_NAME;
     }
-    else {
-        content = (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Aggregations" });
+    if (typeof aggFunc === 'string') {
+        return aggFunc;
     }
-    return (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: content });
+    return 'agg';
+}
+const isAggregationsSectionValid = (data) => {
+    const weightedAvg = data.TableAggregationColumns
+        ? (data.TableAggregationColumns || []).find(({ AggFunc }) => typeof AggFunc === 'object' &&
+            AggFunc.type === 'weightedAverage')?.AggFunc
+        : null;
+    if (weightedAvg && !weightedAvg.weightedColumnId) {
+        return 'Weighted Average requires a weight column to be selected.';
+    }
+    return true;
+};
+exports.isAggregationsSectionValid = isAggregationsSectionValid;
+const AggregationsSectionSummary = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const { data: contextLayout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const layout = props.layout ?? contextLayout;
+    const values = (0, aggregationSummaryHelpers_1.getTableAggregationSummaryValues)(layout, adaptable.api);
+    if (!values.length) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Aggregations" });
+    }
+    return (0, SummaryColorTag_1.renderSummaryStringTags)(values);
 };
 exports.AggregationsSectionSummary = AggregationsSectionSummary;
 const ColumnRow = (props) => {
     const aggValue = props.layout?.TableAggregationColumns?.find((agg) => agg.ColumnId === props.column.columnId)?.AggFunc;
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", 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.TableAggregationColumns || [], onChangeEntries: props.onChangeAggFunction })] }));
+    const aggFunctionNames = (0, AggregationColumns_1.getDisplayAggFuncNames)(props.column);
+    const currentAggFnName = props.aggregationColumnsMap[props.column.columnId];
+    const updateAggFunc = (fnName) => {
+        let aggCols = [...(props.layout.TableAggregationColumns || [])];
+        const AggFuncValue = fnName === 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 updateWeightedColumn = (weightedColumnId) => {
+        let aggCols = [...(props.layout.TableAggregationColumns || [])];
+        const AggFuncValue = {
+            type: 'weightedAverage',
+            weightedColumnId: weightedColumnId,
+        };
+        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 weightColumnId = typeof aggValue === 'object' && aggValue.type === 'weightedAverage'
+        ? aggValue.weightedColumnId
+        : null;
+    const weightColumnOptions = props.numberColumns
+        .filter((col) => col.columnId !== props.column.columnId)
+        .map((col) => ({
+        label: col.friendlyName,
+        value: col.columnId,
+    }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:min-w-0 twa:flex-wrap twa:gap-x-1.5 twa:gap-y-0.5", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:truncate", children: props.column.friendlyName }), (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: props.column }), aggValue && ((0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { size: "small", stopMouseDownPropagation: true, className: "twa:min-w-[6.5rem] twa:shrink-0", value: currentAggFnName, items: aggFunctionNames.map((fnName) => ({
+                    label: fnName,
+                    value: fnName,
+                })), onValueChange: updateAggFunc })), currentAggFnName === WEIGHTED_AVERAGE_AGG_FN_NAME && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:shrink-0", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-3", children: "Weight" }), (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { size: "small", stopMouseDownPropagation: true, className: "twa:min-w-[6.5rem]", placeholder: "Select Weight", value: weightColumnId, items: weightColumnOptions, onValueChange: updateWeightedColumn })] }))] }));
 };
 const AggregationsSection = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -48,6 +173,8 @@ const AggregationsSection = (props) => {
     const numberColumns = adaptable.api.columnApi.getNumericColumns();
     const allAggregatableColumnIds = allAggregableColumns.map((col) => col.columnId);
     (layout.TableAggregationColumns || []).forEach((agg) => {
+        // we need to also display the columns currently aggregated,
+        // even if they are not aggregatable
         if (!allAggregatableColumnIds.includes(agg.ColumnId)) {
             allAggregatableColumnIds.push(agg.ColumnId);
         }
@@ -82,29 +209,36 @@ const AggregationsSection = (props) => {
             acc[col.columnId] = col;
             return acc;
         }, {});
-        return (0, parameterizedAggregationWizardHelpers_1.buildAggregationColumnsMap)(layout.TableAggregationColumns || [], allColumnsMap);
-    }, [layout, allColumns]);
+        return (layout.TableAggregationColumns || []).reduce((acc, { ColumnId: colId, AggFunc }) => {
+            let fn = AggFunc;
+            let fnName = '';
+            if (typeof fn === 'boolean') {
+                fnName = allColumnsMap[colId].aggregationFunction;
+            }
+            if (typeof fn === 'object' && fn.type === 'weightedAverage') {
+                fnName = WEIGHTED_AVERAGE_AGG_FN_NAME;
+            }
+            else if (typeof fn === 'string') {
+                fnName = fn;
+            }
+            acc[colId] = fnName;
+            return acc;
+        }, {});
+    }, [layout]);
     const handleSuppressAggFuncInHeader = (checked) => {
         props.onChange({
             ...layout,
             SuppressAggFuncInHeader: checked,
         });
     };
-    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, { 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-[180px]", items: [
-                                            {
-                                                label: 'Off',
-                                                value: null,
-                                            },
-                                        ].concat(['top', 'bottom', 'pinnedTop', 'pinnedBottom'].map((position) => {
-                                            return {
-                                                label: StringExtensions_1.default.CamelCaseToHumanText(position),
-                                                value: position,
-                                            };
-                                        })), placeholder: "Off", value: layout.GrandTotalRow, onValueChange: (value) => {
-                                            props.onChange({
-                                                ...layout,
-                                                GrandTotalRow: value,
-                                            });
-                                        } }) })] }) }), (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)(ColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap, numberColumns: numberColumns })), options: sortedAggregableColumns, value: (layout.TableAggregationColumns || []).map((agg) => agg.ColumnId), allowReorder: () => true, onChange: handleColumnsSelectionChange })] })] }));
+    const aggregationEntries = layout.TableAggregationColumns || [];
+    const initialExpandedCardId = (0, layoutWizardAccordionHelpers_1.getLayoutWizardInitialExpandedCardId)(props.layoutWizardMode, 'columns', (0, layoutWizardAccordionHelpers_1.isTableAggregationsSectionConfigured)(layout));
+    const { bindCard, hasExpandedCard, expandedFillsSpace } = (0, CollapsibleWizardCard_1.useWizardCardAccordion)(initialExpandedCardId);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, CollapsibleWizardCard_1.getWizardAccordionSectionClassName)(hasExpandedCard, expandedFillsSpace), children: [(0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardCard, { ...bindCard('columns', { fillAvailable: true }), surface: "panel", "data-name": "aggregation-columns", title: "Aggregation Columns", help: "Select a column and an aggregation function", collapsedHelp: "", compactSummary: (0, CollapsibleWizardCard_1.renderCompactColumnTags)(aggregationEntries.map(({ ColumnId }) => ColumnId), (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' }), summary: aggregationEntries.length ? ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", className: "twa:gap-1", children: aggregationEntries.map(({ ColumnId, AggFunc }) => ((0, jsx_runtime_1.jsxs)(Tag_1.ColumnTag, { children: [adaptable.api.columnApi.getFriendlyNameForColumnId(ColumnId), " (", getAggFuncSummaryLabel(ColumnId, AggFunc, aggregationColumnsMap), ")"] }, ColumnId))) })) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No columns" })), className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:max-h-[420px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0 twa:!pb-0 twa:px-1", children: (0, jsx_runtime_1.jsx)(Card_1.Card, { shadow: false, className: "twa:h-full twa:overflow-hidden twa:flex twa:flex-col", children: (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:px-1 twa:pt-0 twa:pb-0", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-1.5 twa:h-full twa:overflow-hidden twa:flex-1 twa:min-h-0", "data-name": "aggregation-columns-container", children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { compact: true, showFilterInput: true, filter: Utilities_1.columnFilter, filterPlaceholder: "Search Columns...", compactHeaderClassName: layoutWizardColumns_1.LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: layoutWizardColumns_1.LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, optionLayout: "label-beside-checkbox", toggleSelectionOnRowClick: true, optionClassName: layoutWizardColumns_1.LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => ((0, jsx_runtime_1.jsx)(ColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap, numberColumns: numberColumns })), options: sortedAggregableColumns, value: aggregationEntries.map((agg) => agg.ColumnId), allowReorder: () => true, onChange: handleColumnsSelectionChange }) }) }) }) }), (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardCard, { ...bindCard('suppress-header'), surface: "panel", "data-name": "omit-aggregation-from-header", title: "Aggregation Column Header", help: "Set behaviour for aggregation function names", collapsedHelp: "Behaviour for aggregation function names", compactSummary: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: layout.SuppressAggFuncInHeader ? 'Hide Function Name in Header' : 'Show Function Name in Header' }), summary: (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardValueSummary, { value: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: layout.SuppressAggFuncInHeader ? 'Hide Function Name in Header' : 'Show Function Name in Header' }) }), children: (0, jsx_runtime_1.jsxs)(Radio_1.RadioGroup, { orientation: "vertical", value: layout.SuppressAggFuncInHeader ?? false, onRadioChange: handleSuppressAggFuncInHeader, children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { value: false, children: "Show Aggregation function names" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: true, children: "Hide Aggregation function names" })] }) }), (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardCard, { ...bindCard('grand-total'), surface: "panel", "data-name": "grand-total-row", title: "Grand Total Row", help: "Set position of the Grand Total Row in the grid", collapsedHelp: "Position of the Grand Total Row in the grid", compactSummary: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: getGrandTotalRowLabel(layout) }), summary: (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardValueSummary, { value: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: getGrandTotalRowLabel(layout) }) }), children: (0, jsx_runtime_1.jsx)(Radio_1.RadioGroup, { orientation: "vertical", value: getGrandTotalRowKey(layout), onRadioChange: (key) => {
+                        props.onChange({
+                            ...layout,
+                            GrandTotalRow: key === 'off' ? null : key,
+                        });
+                    }, children: exports.GRAND_TOTAL_ROW_OPTIONS.map((key) => ((0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: key, text: exports.GRAND_TOTAL_ROW_LABELS[key], description: exports.GRAND_TOTAL_ROW_DESCRIPTIONS[key] }, key))) }) })] }));
 };
 exports.AggregationsSection = AggregationsSection;

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

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import { Layout } from '../../../../../types';
-export declare const ColumnsSectionSummary: React.FunctionComponent;
+export declare const ColumnsSectionSummary: React.FunctionComponent<{
+    layout?: Layout;
+}>;
 interface ColumnsSectionProps {
     onChange: (data: Layout) => void;
+    layoutWizardMode?: 'create' | 'edit';
 }
 export declare const ColumnsSection: React.FunctionComponent<ColumnsSectionProps>;
 export {};