@adaptabletools/adaptable 23.0.0-canary.1 → 23.0.0-canary.10

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

@@ -2,8 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { getLayoutFilterViewItems } from '../../../../Strategy/Utilities/Layout/getLayoutFilterViewItems';
 import * as ModuleConstants from '../../../../Utilities/Constants/ModuleConstants';
-import FormLayout, { FormRow } from '../../../../components/FormLayout';
-import { Tabs } from '../../../../components/Tabs';
 import { Tag } from '../../../../components/Tag';
 import { useAdaptable } from '../../../AdaptableContext';
 import { AdaptableObjectListItemView } from '../../../Components/AdaptableObjectList/AdaptableObjectList';
@@ -11,6 +9,7 @@ import { ColumnSelector } from '../../../Components/Selectors/ColumnSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { LayoutColumnFilter } from '../../../Components/ColumnFilter/LayoutColumnFilter';
 import { Box } from '../../../../components/Flex';
+import { Card } from '../../../../components/Card';
 export const isColumnFiltersValid = (layout) => {
     const invalidColumnFilters = (layout.ColumnFilters ?? [])?.filter((columnFilter) => !columnFilter?.Predicates[0]?.PredicateId);
     if (invalidColumnFilters.length > 0) {
@@ -41,34 +40,34 @@ export const FilterSection = (props) => {
             ColumnFilters: layoutFilters.map((layoutFilter) => layoutFilter.ColumnId === columnFilter.ColumnId ? { ...columnFilter } : layoutFilter),
         });
     }, [layout.ColumnFilters]);
-    return (_jsxs(Tabs, { className: "twa:h-full", children: [_jsx(Tabs.Tab, { children: "Column Filters" }), _jsxs(Tabs.Content, { children: [_jsx(FormLayout, { className: "twa:mb-2", children: _jsx(FormRow, { label: "Add Column Filter", children: _jsx(ColumnSelector, { filterColumn: (column) => column.filterable && !layoutFilters.some((f) => f.ColumnId === column.columnId), placeholder: "Select Column to create Filter", onChange: (option) => {
-                                    props.onChange({
-                                        ...layout,
-                                        ColumnFilters: [
-                                            ...layoutFilters,
-                                            {
-                                                ColumnId: option,
-                                                Predicates: [],
-                                            },
-                                        ],
-                                    });
-                                } }) }) }), layoutFilters?.length > 0 && (_jsx(Box, { className: "twa:p-0", as: "ul", children: layoutFilters.map((columnFilter) => {
-                            const moduleItems = filterModule.toView(columnFilter).items;
-                            const column = adaptable.api.columnApi.getColumnWithColumnId(columnFilter.ColumnId);
-                            const columnGroupItems = column?.columnGroup && column.columnGroup.groupCount > 1
-                                ? [{ name: 'Column Group', values: [column.columnGroup.friendlyName] }]
-                                : [];
-                            const items = [
-                                moduleItems[0],
-                                ...columnGroupItems,
-                                ...moduleItems.slice(1),
-                                {
-                                    name: 'Column Filter',
-                                    view: (_jsx(LayoutColumnFilter, { columnFilter: columnFilter, onColumnFilterChange: (columnFilter) => {
-                                            handlePredicateEdit(columnFilter);
-                                        } })),
-                                },
-                            ];
-                            return (_jsx(AdaptableObjectListItemView, { module: filterModule, abObject: columnFilter, entityType: "Column Filter", showActions: true, showEditButton: false, items: items, onDelete: () => handleDelete(columnFilter) }, columnFilter.ColumnId));
-                        }) }))] })] }));
+    return (_jsxs(Box, { className: "twa:gap-3 twa:p-3 twa:flex twa:flex-col", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Add Column Filter" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select a column and then create a Filter" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(ColumnSelector, { filterColumn: (column) => column.filterable && !layoutFilters.some((f) => f.ColumnId === column.columnId), placeholder: "Select a Column", onChange: (option) => {
+                                props.onChange({
+                                    ...layout,
+                                    ColumnFilters: [
+                                        ...layoutFilters,
+                                        {
+                                            ColumnId: option,
+                                            Predicates: [],
+                                        },
+                                    ],
+                                });
+                            } }) })] }), layoutFilters?.length > 0 && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Column Filters" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure predicates for each column filter in this Layout" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Box, { className: "twa:p-0", as: "ul", children: layoutFilters.map((columnFilter) => {
+                                const moduleItems = filterModule.toView(columnFilter).items;
+                                const column = adaptable.api.columnApi.getColumnWithColumnId(columnFilter.ColumnId);
+                                const columnGroupItems = column?.columnGroup && column.columnGroup.groupCount > 1
+                                    ? [{ name: 'Column Group', values: [column.columnGroup.friendlyName] }]
+                                    : [];
+                                const items = [
+                                    moduleItems[0],
+                                    ...columnGroupItems,
+                                    ...moduleItems.slice(1),
+                                    {
+                                        name: 'Column Filter',
+                                        view: (_jsx(LayoutColumnFilter, { columnFilter: columnFilter, onColumnFilterChange: (columnFilter) => {
+                                                handlePredicateEdit(columnFilter);
+                                            } })),
+                                    },
+                                ];
+                                return (_jsx(AdaptableObjectListItemView, { module: filterModule, abObject: columnFilter, entityType: "Column Filter", showActions: true, showEditButton: false, items: items, onDelete: () => handleDelete(columnFilter) }, columnFilter.ColumnId));
+                            }) }) })] }))] }));
 };

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useAdaptable } from '../../../AdaptableContext';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
@@ -8,6 +8,7 @@ import { GridFilterModuleId } from '../../../../Utilities/Constants/ModuleConsta
 import StringExtensions from '../../../../Utilities/Extensions/StringExtensions';
 import { useGridFilterOptionsForExpressionEditorProps } from '../../../GridFilter/useGridFilterOptionsForExpressionEditor';
 import { Box } from '../../../../components/Flex';
+import { Card } from '../../../../components/Card';
 export const isGridFiltersValid = (layout, api) => {
     const expression = layout?.GridFilter?.Expression;
     if (StringExtensions.IsNullOrEmpty(expression)) {
@@ -25,14 +26,13 @@ export const GridFilterSection = (props) => {
     const { data: layout } = useOnePageAdaptableWizardContext();
     const initialData = React.useMemo(() => api.internalApi.getQueryPreviewData(), []);
     const expressionEditorProps = useGridFilterOptionsForExpressionEditorProps();
-    const expressionEditorContent = (_jsx(ExpressionEditor, { ...expressionEditorProps, allowSaveNamedQuery: false, type: 'boolean', module: GridFilterModuleId, value: layout?.GridFilter?.Expression ?? '', onChange: (expression) => {
-            props.onChange({
-                ...layout,
-                GridFilter: {
-                    ...layout.GridFilter,
-                    Expression: expression,
-                },
-            });
-        }, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }));
-    return _jsx("div", { children: expressionEditorContent });
+    return (_jsx(Box, { className: "twa:p-3", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Grid Filter" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Define a boolean expression to filter rows across the entire grid in this Layout" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(ExpressionEditor, { ...expressionEditorProps, allowSaveNamedQuery: false, type: 'boolean', module: GridFilterModuleId, value: layout?.GridFilter?.Expression ?? '', onChange: (expression) => {
+                            props.onChange({
+                                ...layout,
+                                GridFilter: {
+                                    ...layout.GridFilter,
+                                    Expression: expression,
+                                },
+                            });
+                        }, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }) })] }) }));
 };

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

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { PivotLayout } from '../../../../../types';
-import { validatePivotLayoutAggregations } from '../../../../Aggregation/validateParameterizedAggregations';
-export declare const isPivotAggregationsSectionValid: typeof validatePivotLayoutAggregations;
-export declare const PivotAggregationsSectionSummary: React.FunctionComponent;
+export declare const isPivotAggregationsSectionValid: (data: PivotLayout) => true | string;
+export declare const PivotAggregationsSectionSummary: React.FunctionComponent<{
+    layout?: PivotLayout;
+}>;
 interface PivotAggregationsSectionProps {
     onChange: (data: PivotLayout) => void;
+    layoutWizardMode?: 'create' | 'edit';
 }
 export declare const PivotAggregationsSection: React.FunctionComponent<PivotAggregationsSectionProps>;
 export {};

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

@@ -1,73 +1,126 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { CheckBox } from '../../../../components/CheckBox';
-import DropdownButton from '../../../../components/DropdownButton';
-import FormLayout, { FormRow } from '../../../../components/FormLayout';
-import { Tabs } from '../../../../components/Tabs';
-import { Tag } from '../../../../components/Tag';
-import { getAggFuncName } from '../../../../AdaptableState/Common/AggregationColumns';
-import { validatePivotLayoutAggregations } from '../../../../Aggregation/validateParameterizedAggregations';
-import { getParameterizedAggregationDisplayName } from '../../../../Aggregation/parameterizedAggregationHeader';
-import { buildAggregationColumnsMap } from '../../../../Aggregation/parameterizedAggregationWizardHelpers';
-import { ParameterizedAggFuncPicker } from './ParameterizedAggFuncPicker';
+import { Card } from '../../../../components/Card';
+import { ColumnTag, Tag } from '../../../../components/Tag';
+import { getAggFuncName, isWeightedAverageAggFuncName, WEIGHTED_AVERAGE_AGG_FN_NAME, } from '../../../../AdaptableState/Common/AggregationColumns';
 import { useAdaptable } from '../../../AdaptableContext';
 import { ValueSelector } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
+import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactColumnTags, useWizardCardAccordion, } from '../../../Wizard/CollapsibleWizardCard';
+import { TypeRadio } from '../../../Wizard/TypeRadio';
+import { getLayoutWizardInitialExpandedCardId, isPivotAggregationsSectionConfigured, } from './layoutWizardAccordionHelpers';
 import { columnFilter } from './Utilities';
 import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
-import StringExtensions from '../../../../Utilities/Extensions/StringExtensions';
 import { Box, Flex } from '../../../../components/Flex';
 import { SingleSelect } from '../../../../components/NewSelect';
+import Radio, { RadioGroup } from '../../../../components/Radio';
+import { LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, } from './layoutWizardColumns';
+import { getPivotAggregationSummaryValues } from '../../../../Strategy/Utilities/Layout/aggregationSummaryHelpers';
+import { renderSummaryStringTags } from '../../../Wizard/SummaryColorTag';
+import { getAggFuncSummaryLabel, getGrandTotalRowKey, getGrandTotalRowLabel, GRAND_TOTAL_ROW_DESCRIPTIONS, GRAND_TOTAL_ROW_LABELS, GRAND_TOTAL_ROW_OPTIONS, } from './AggregationsSection';
+const PIVOT_LAYOUT_TOTAL_LABELS = {
+    off: 'None',
+    before: 'Before',
+    after: 'After',
+};
+const PIVOT_LAYOUT_TOTAL_DESCRIPTIONS = {
+    off: 'Pivot totals are not displayed in the grid',
+    before: 'Pivot totals are displayed before the value columns',
+    after: 'Pivot totals are displayed after the value columns',
+};
+const PIVOT_LAYOUT_TOTAL_OPTIONS = ['off', 'before', 'after'];
+function getPivotLayoutTotalKey(value) {
+    if (value == null || value === false) {
+        return 'off';
+    }
+    if (value === 'before') {
+        return 'before';
+    }
+    if (value === 'after') {
+        return 'after';
+    }
+    return 'off';
+}
+function getPivotLayoutTotalLabel(value) {
+    return PIVOT_LAYOUT_TOTAL_LABELS[getPivotLayoutTotalKey(value)];
+}
+function getAggregationTotalSelectValue(total) {
+    if (!total) {
+        return 'off';
+    }
+    if (total === true || total === 'before') {
+        return 'before';
+    }
+    if (total === 'after') {
+        return 'after';
+    }
+    if (Array.isArray(total)) {
+        return 'pivot-specific';
+    }
+    return 'off';
+}
 const PivotColumnRow = (props) => {
     const adaptable = useAdaptable();
     const aggValue = (props.layout.PivotAggregationColumns || []).find((x) => x.ColumnId === props.column.columnId)?.AggFunc;
-    const totalOptions = ['Off', 'Before', 'After', 'Pivot Specific'].map((totalVariant) => {
-        return {
-            label: totalVariant,
-            onClick: () => {
-                let aggCols = props.layout.PivotAggregationColumns;
-                if (!aggCols) {
-                    return;
+    const aggFunctionNames = (props.column.availableAggregationFunctions || []).filter((fnName) => !isWeightedAverageAggFuncName(fnName));
+    const currentAggFnName = props.aggregationColumnsMap[props.column.columnId];
+    const updateAggFunc = (fnName) => {
+        let aggCols = [...(props.layout.PivotAggregationColumns || [])];
+        const AggFuncValue = fnName;
+        let found = false;
+        aggCols = aggCols.map(({ ColumnId, AggFunc, ...rest }) => {
+            if (ColumnId === props.column.columnId) {
+                found = true;
+                return {
+                    ColumnId,
+                    AggFunc: AggFuncValue,
+                    ...rest,
+                };
+            }
+            return { ColumnId, AggFunc, ...rest };
+        });
+        if (!found) {
+            aggCols.push({
+                ColumnId: props.column.columnId,
+                AggFunc: AggFuncValue,
+            });
+        }
+        props.onChangeAggFunction(aggCols);
+    };
+    const currentAggCol = props.layout.PivotAggregationColumns?.find((aggCol) => aggCol.ColumnId === props.column.columnId);
+    const currentTotalSelectValue = getAggregationTotalSelectValue(currentAggCol?.Total);
+    const handleTotalSelectChange = (totalVariant) => {
+        let aggCols = props.layout.PivotAggregationColumns;
+        if (!aggCols) {
+            return;
+        }
+        aggCols = aggCols.map((aggCol) => {
+            if (aggCol.ColumnId === props.column.columnId) {
+                let updatedTotal = false;
+                if (totalVariant === 'before') {
+                    updatedTotal = 'before';
                 }
-                aggCols = aggCols.map((aggCol) => {
-                    if (aggCol.ColumnId === props.column.columnId) {
-                        let updatedTotalColumn = false;
-                        if (totalVariant === 'Before') {
-                            updatedTotalColumn = 'before';
-                        }
-                        if (totalVariant === 'After') {
-                            updatedTotalColumn = 'after';
-                        }
-                        if (totalVariant === 'Pivot Specific') {
-                            updatedTotalColumn = props.layout.PivotColumns.map((pivotColId) => {
-                                return {
-                                    PivotColumnId: pivotColId,
-                                    ShowTotal: true,
-                                };
-                            });
-                        }
+                else if (totalVariant === 'after') {
+                    updatedTotal = 'after';
+                }
+                else if (totalVariant === 'pivot-specific') {
+                    updatedTotal = props.layout.PivotColumns.map((pivotColId) => {
                         return {
-                            ...aggCol,
-                            Total: updatedTotalColumn,
+                            PivotColumnId: pivotColId,
+                            ShowTotal: true,
                         };
-                    }
-                    return aggCol;
-                });
-                props.onChangeAggFunction(aggCols);
-            },
-        };
-    });
-    const currentAggCol = props.layout.PivotAggregationColumns?.find((aggCol) => aggCol.ColumnId === props.column.columnId);
-    const currentTotal = currentAggCol?.Total
-        ? currentAggCol.Total === true || currentAggCol.Total === 'before'
-            ? 'Before'
-            : currentAggCol.Total === 'after'
-                ? 'After'
-                : Array.isArray(currentAggCol.Total)
-                    ? 'Pivot Specific'
-                    : 'Off'
-        : 'Off';
+                    });
+                }
+                return {
+                    ...aggCol,
+                    Total: updatedTotal,
+                };
+            }
+            return aggCol;
+        });
+        props.onChangeAggFunction(aggCols);
+    };
     const hasPivotSpecificTotals = Array.isArray(currentAggCol?.Total);
     const pivotSpecificTotals = Array.isArray(currentAggCol?.Total)
         ? currentAggCol.Total
@@ -75,7 +128,7 @@ const PivotColumnRow = (props) => {
             PivotColumnId: pivotColId,
             ShowTotal: false,
         }));
-    const handleTotalChange = (pivotColId, value) => {
+    const handlePivotSpecificTotalChange = (pivotColId, value) => {
         const updatedAggCols = (props.layout.PivotAggregationColumns || []).map((aggCol) => {
             if (aggCol.ColumnId === props.column.columnId) {
                 const updatedTotals = pivotSpecificTotals.map((total) => {
@@ -90,64 +143,76 @@ const PivotColumnRow = (props) => {
         });
         props.onChangeAggFunction(updatedAggCols);
     };
-    const pivotTotalOptions = ['Off', 'Before', 'After'].map((option) => ({
-        label: option,
-        value: option === 'Off' ? false : option.toLowerCase(),
-    }));
-    return (_jsx(Box, { "data-name": props.column.columnId, className: "ab-Layout-Wizard__ColumnRow", children: _jsxs(Flex, { alignItems: "flex-start", children: [_jsxs(Flex, { className: "twa:flex-[0_0_auto]", alignItems: "center", children: [_jsx(Flex, { className: "twa:min-w-[80px]", children: props.column.friendlyName }), _jsx(ColumnGroupTag, { column: props.column }), _jsx(ParameterizedAggFuncPicker, { column: props.column, aggValue: aggValue, aggregationColumnsMap: props.aggregationColumnsMap, numberColumns: props.numberColumns, aggregationEntries: props.layout.PivotAggregationColumns || [], onChangeEntries: props.onChangeAggFunction, availableAggregationFunctions: props.column.availableAggregationFunctions }), aggValue && (_jsxs(Flex, { className: "twa:bg-primary twa:ml-3", alignItems: "center", children: [_jsx(Box, { children: "Total" }), ' ', _jsx(DropdownButton, { columns: ['label'], items: totalOptions, className: "twa:ml-2", children: currentTotal })] }))] }), hasPivotSpecificTotals && (_jsx(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 (_jsxs(Flex, { alignItems: "center", children: [_jsxs(Box, { className: "twa:mr-1", children: [adaptable.api.columnApi.getFriendlyNameForColumnId(pivotColId), ":"] }), _jsx(DropdownButton, { columns: ['label'], items: pivotTotalOptions.map((opt) => ({
-                                        label: opt.label,
-                                        onClick: () => handleTotalChange(pivotColId, opt.value),
-                                    })), children: currentValue })] }, pivotColId));
-                    }) }))] }) }));
+    const getPivotSpecificTotalSelectValue = (showTotal) => {
+        if (showTotal === false || showTotal == undefined) {
+            return 'off';
+        }
+        if (showTotal === 'before' || showTotal === true) {
+            return 'before';
+        }
+        if (showTotal === 'after') {
+            return 'after';
+        }
+        return 'off';
+    };
+    return (_jsxs(Flex, { alignItems: "flex-start", flexDirection: "column", className: "twa:min-w-0 twa:gap-y-1 twa:gap-x-1.5", children: [_jsxs(Flex, { alignItems: "center", flexWrap: "wrap", className: "twa:min-w-0 twa:gap-x-1.5 twa:gap-y-0.5", children: [_jsx(Box, { className: "twa:truncate", children: props.column.friendlyName }), _jsx(ColumnGroupTag, { column: props.column }), aggValue && (_jsx(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 })), aggValue && (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1 twa:shrink-0", children: [_jsx(Box, { className: "twa:text-3", children: "Total" }), _jsx(SingleSelect, { size: "small", stopMouseDownPropagation: true, className: "twa:min-w-[6.5rem]", value: currentTotalSelectValue, items: [
+                                    { label: 'Off', value: 'off' },
+                                    { label: 'Before', value: 'before' },
+                                    { label: 'After', value: 'after' },
+                                    { label: 'Pivot Specific', value: 'pivot-specific' },
+                                ], onValueChange: handleTotalSelectChange })] }))] }), hasPivotSpecificTotals && (_jsx(Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-x-2 twa:gap-y-1 twa:pl-2", style: { borderLeft: '1px solid var(--ab-color-primary-foreground)' }, children: props.layout.PivotColumns.map((pivotColId) => {
+                    const pivotTotalSetting = pivotSpecificTotals.find((t) => t.PivotColumnId === pivotColId);
+                    const pivotTotalValue = getPivotSpecificTotalSelectValue(pivotTotalSetting?.ShowTotal);
+                    return (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1 twa:shrink-0", children: [_jsxs(Box, { className: "twa:text-3 twa:truncate", children: [adaptable.api.columnApi.getFriendlyNameForColumnId(pivotColId), ":"] }), _jsx(SingleSelect, { size: "small", stopMouseDownPropagation: true, className: "twa:min-w-[5.5rem]", value: pivotTotalValue, items: [
+                                    { label: 'Off', value: 'off' },
+                                    { label: 'Before', value: 'before' },
+                                    { label: 'After', value: 'after' },
+                                ], onValueChange: (value) => {
+                                    const mappedValue = value === 'off' ? false : value;
+                                    handlePivotSpecificTotalChange(pivotColId, mappedValue);
+                                } })] }, pivotColId));
+                }) }))] }));
 };
-export const isPivotAggregationsSectionValid = validatePivotLayoutAggregations;
-export const PivotAggregationsSectionSummary = () => {
-    const adaptable = useAdaptable();
-    const { data: layout } = useOnePageAdaptableWizardContext();
-    const pivotAggregationColumns = layout.PivotAggregationColumns || [];
-    let content = null;
-    if (pivotAggregationColumns.length) {
-        content = (_jsx(FormLayout, { children: pivotAggregationColumns.map(({ ColumnId: colId, AggFunc: aggFunc }) => (_jsx(FormRow, { label: adaptable.api.columnApi.getFriendlyNameForColumnId(colId), children: _jsx(Tag, { children: getParameterizedAggregationDisplayName(adaptable.api, aggFunc, colId) }) }, colId))) }));
+export 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.';
     }
-    else {
-        content = _jsx(Tag, { children: "No Pivot Column Aggregations" });
+    return true;
+};
+export const PivotAggregationsSectionSummary = (props) => {
+    const adaptable = useAdaptable();
+    const { data: contextLayout } = useOnePageAdaptableWizardContext();
+    const layout = props.layout ?? contextLayout;
+    const values = getPivotAggregationSummaryValues(layout, adaptable.api);
+    if (!values.length) {
+        return _jsx(Tag, { children: "No Aggregations" });
     }
-    return _jsx(Box, { children: content });
+    return renderSummaryStringTags(values);
 };
 export const PivotAggregationsSection = (props) => {
     const adaptable = useAdaptable();
     const { data: layout } = useOnePageAdaptableWizardContext();
     const allAggregableColumns = adaptable.api.columnApi.getAggregatableColumns();
     const allColumns = adaptable.api.columnApi.getUIAvailableColumns();
-    const numberColumns = adaptable.api.columnApi.getNumericColumns();
     const sortedAggregableColumns = React.useMemo(() => {
         return ArrayExtensions.sortArrayWithOrder(allAggregableColumns.map((col) => col.columnId), (layout.PivotAggregationColumns ?? []).map((col) => col.ColumnId), { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [layout, allAggregableColumns]);
     const handleColumnsSelectionChange = React.useCallback((columnIds) => {
         const currentAggColumns = layout.PivotAggregationColumns ?? [];
         const PivotAggregationColumns = columnIds.map((colId) => {
+            const existing = currentAggColumns.find((x) => x.ColumnId === colId);
             return {
                 ColumnId: colId,
-                AggFunc: currentAggColumns.find((x) => x.ColumnId === colId)?.AggFunc ??
-                    adaptable.api.columnApi.getDefaultAggFunc(colId),
-                TotalColumn: currentAggColumns.find((x) => x.ColumnId === colId)?.Total,
+                AggFunc: existing?.AggFunc ?? adaptable.api.columnApi.getDefaultAggFunc(colId),
+                Total: existing?.Total,
             };
         });
         props.onChange({
@@ -156,22 +221,36 @@ export const PivotAggregationsSection = (props) => {
         });
     }, [layout]);
     const handleAggregationChange = React.useCallback((pivotAggregationColumns) => {
-        if (pivotAggregationColumns.some((aggCol) => aggCol.Total !== false || aggCol.Total !== null)) {
-            // if any Aggregation Column has a Total Column, we need to disable the Pivot Group Total Column
-            delete layout['PivotColumnTotal'];
-        }
-        props.onChange({
+        const updatedLayout = {
             ...layout,
             PivotAggregationColumns: pivotAggregationColumns,
-        });
+        };
+        if (pivotAggregationColumns.some((aggCol) => aggCol.Total !== false && aggCol.Total != null)) {
+            delete updatedLayout.PivotColumnTotal;
+        }
+        props.onChange(updatedLayout);
     }, [layout]);
     const aggregationColumnsMap = React.useMemo(() => {
         const allColumnsMap = allColumns.reduce((acc, col) => {
             acc[col.columnId] = col;
             return acc;
         }, {});
-        return buildAggregationColumnsMap(layout.PivotAggregationColumns || [], allColumnsMap);
-    }, [layout, allColumns]);
+        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 = WEIGHTED_AVERAGE_AGG_FN_NAME;
+            }
+            else if (typeof fn === 'string') {
+                fnName = fn;
+            }
+            acc[colId] = fnName;
+            return acc;
+        }, {});
+    }, [layout]);
     const handleSuppressAggFuncInHeader = (checked) => {
         props.onChange({
             ...layout,
@@ -179,7 +258,6 @@ export const PivotAggregationsSection = (props) => {
         });
     };
     const checkIfPivotColumnTotalEnabled = () => {
-        // check that all AggregationColumns have identical AggFuncs
         const aggregationColumns = layout.PivotAggregationColumns;
         if (!aggregationColumns || aggregationColumns.length === 0) {
             return true;
@@ -188,7 +266,6 @@ export const PivotAggregationsSection = (props) => {
         if (layout.PivotAggregationColumns?.some((aggCol) => getAggFuncName(aggCol.AggFunc) !== firstAggFuncName)) {
             return 'All columns must use the same aggregation function.';
         }
-        // check that no Aggregation Total Column is enabled
         const hasAggregationTotalColumn = aggregationColumns.some((aggCol) => aggCol.Total !== false && aggCol.Total != null);
         if (hasAggregationTotalColumn) {
             return 'This option is not available when an Aggregation Total Column is present.';
@@ -196,46 +273,21 @@ export const PivotAggregationsSection = (props) => {
         return true;
     };
     const isPivotColumnTotalEnabled = checkIfPivotColumnTotalEnabled();
-    return (_jsxs(Tabs, { style: { height: '100%' }, children: [_jsx(Tabs.Tab, { children: "Column Aggregations" }), _jsxs(Tabs.Content, { children: [_jsx(Flex, { className: "twa:mb-2", children: _jsxs(FormLayout, { children: [_jsx(FormRow, { label: 'Omit Aggregation from Header', children: _jsx(CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader }) }), _jsx(FormRow, { label: 'Grand Total Row', children: _jsx(SingleSelect, { className: "twa:w-[160px]", items: [
-                                            {
-                                                label: 'Off',
-                                                value: null,
-                                            },
-                                        ].concat(['top', 'bottom', 'pinnedTop', 'pinnedBottom'].map((position) => {
-                                            return {
-                                                label: StringExtensions.CamelCaseToHumanText(position),
-                                                value: position,
-                                            };
-                                        })), placeholder: "[none]", value: layout.GrandTotalRow, onValueChange: (value) => {
-                                            props.onChange({
-                                                ...layout,
-                                                GrandTotalRow: value,
-                                            });
-                                        } }) }), _jsx(FormRow, { label: 'Pivot Grand Total', children: _jsx(SingleSelect, { className: "twa:w-[160px]", items: [
-                                            { label: 'Off', value: null },
-                                            ...['before', 'after'].map((position) => {
-                                                return {
-                                                    label: StringExtensions.CapitaliseFirstLetter(position),
-                                                    value: position,
-                                                };
-                                            }),
-                                        ], placeholder: "[none]", value: layout.PivotGrandTotal, onValueChange: (value) => {
-                                            props.onChange({
-                                                ...layout,
-                                                PivotGrandTotal: value,
-                                            });
-                                        } }) }), _jsx(FormRow, { label: 'Pivot Column Total', children: isPivotColumnTotalEnabled === true ? (_jsx(SingleSelect, { className: "twa:w-[160px]", items: [
-                                            { label: 'Off', value: null },
-                                            ...['before', 'after'].map((position) => {
-                                                return {
-                                                    label: StringExtensions.CapitaliseFirstLetter(position),
-                                                    value: position,
-                                                };
-                                            }),
-                                        ], placeholder: "[none]", value: layout.PivotColumnTotal, onValueChange: (value) => {
-                                            props.onChange({
-                                                ...layout,
-                                                PivotColumnTotal: value,
-                                            });
-                                        } })) : (_jsx(Box, { className: "twa:ml-1 twa:italic", children: isPivotColumnTotalEnabled })) })] }) }), _jsx(ValueSelector, { showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => (_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 })] })] }));
+    const aggregationEntries = layout.PivotAggregationColumns || [];
+    const initialExpandedCardId = getLayoutWizardInitialExpandedCardId(props.layoutWizardMode, 'aggregation-columns', isPivotAggregationsSectionConfigured(layout));
+    const { bindCard, hasExpandedCard, expandedFillsSpace } = useWizardCardAccordion(initialExpandedCardId);
+    const handlePivotLayoutTotalChange = (field, key) => {
+        props.onChange({
+            ...layout,
+            [field]: key === 'off' ? null : key,
+        });
+    };
+    return (_jsxs(Box, { className: getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), children: [_jsx(CollapsibleWizardCard, { ...bindCard('aggregation-columns', { fillAvailable: true }), surface: "panel", "data-name": "aggregation-columns", title: "Aggregation Columns", help: "Select a column and an aggregation function", collapsedHelp: "", compactSummary: renderCompactColumnTags(aggregationEntries.map(({ ColumnId }) => ColumnId), (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' }), summary: aggregationEntries.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: aggregationEntries.map(({ ColumnId, AggFunc }) => (_jsxs(ColumnTag, { children: [adaptable.api.columnApi.getFriendlyNameForColumnId(ColumnId), " (", getAggFuncSummaryLabel(ColumnId, AggFunc, aggregationColumnsMap), ")"] }, ColumnId))) })) : (_jsx(Tag, { children: "No columns" })), children: _jsx(Card, { shadow: false, className: "twa:h-full twa:overflow-hidden twa:flex twa:flex-col", children: _jsx(Card.Body, { className: "", children: _jsx(Box, { className: "twa:flex twa:flex-col twa:min-h-0", "data-name": "aggregation-columns-container", children: _jsx(ValueSelector, { style: { minHeight: 0 }, compact: true, showFilterInput: true, filter: columnFilter, filterPlaceholder: "Search Columns...", compactHeaderClassName: LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, optionLayout: "label-beside-checkbox", toggleSelectionOnRowClick: true, optionClassName: LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => (_jsx(PivotColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap })), options: sortedAggregableColumns, value: aggregationEntries.map((agg) => agg.ColumnId), allowReorder: () => true, onChange: handleColumnsSelectionChange }) }) }) }) }), _jsx(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: _jsx(Tag, { children: layout.SuppressAggFuncInHeader ? 'Hide Function Name' : 'Show Function Name' }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: layout.SuppressAggFuncInHeader ? 'Hide Function Name' : 'Show Function Name' }) }), children: _jsxs(RadioGroup, { orientation: "vertical", value: layout.SuppressAggFuncInHeader ?? false, onRadioChange: handleSuppressAggFuncInHeader, children: [_jsx(Radio, { value: false, children: "Show Aggregation function names" }), _jsx(Radio, { value: true, children: "Hide Aggregation function names" })] }) }), _jsx(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: _jsx(Tag, { children: getGrandTotalRowLabel(layout) }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: getGrandTotalRowLabel(layout) }) }), children: _jsx(RadioGroup, { orientation: "vertical", value: getGrandTotalRowKey(layout), onRadioChange: (key) => {
+                        props.onChange({
+                            ...layout,
+                            GrandTotalRow: key === 'off' ? null : key,
+                        });
+                    }, children: GRAND_TOTAL_ROW_OPTIONS.map((key) => (_jsx(TypeRadio, { value: key, text: GRAND_TOTAL_ROW_LABELS[key], description: GRAND_TOTAL_ROW_DESCRIPTIONS[key] }, key))) }) }), _jsx(CollapsibleWizardCard, { ...bindCard('pivot-grand-total'), surface: "panel", "data-name": "pivot-grand-total", title: "Pivot Grand Total", help: "Set position of pivot grand total columns", compactSummary: _jsx(Tag, { children: getPivotLayoutTotalLabel(layout.PivotGrandTotal) }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: getPivotLayoutTotalLabel(layout.PivotGrandTotal) }) }), children: _jsx(RadioGroup, { orientation: "vertical", value: getPivotLayoutTotalKey(layout.PivotGrandTotal), onRadioChange: (key) => handlePivotLayoutTotalChange('PivotGrandTotal', key), children: PIVOT_LAYOUT_TOTAL_OPTIONS.map((key) => (_jsx(TypeRadio, { value: key, text: PIVOT_LAYOUT_TOTAL_LABELS[key], description: PIVOT_LAYOUT_TOTAL_DESCRIPTIONS[key] }, key))) }) }), _jsx(CollapsibleWizardCard, { ...bindCard('pivot-column-total'), surface: "panel", "data-name": "pivot-column-total", title: "Pivot Column Total", help: "Set position of pivot column totals within each pivot column group", compactSummary: _jsx(Tag, { children: isPivotColumnTotalEnabled === true
+                        ? getPivotLayoutTotalLabel(layout.PivotColumnTotal)
+                        : 'Not available' }), summary: isPivotColumnTotalEnabled === true ? (_jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: getPivotLayoutTotalLabel(layout.PivotColumnTotal) }) })) : (_jsx(Tag, { children: isPivotColumnTotalEnabled })), children: isPivotColumnTotalEnabled === true ? (_jsx(RadioGroup, { orientation: "vertical", value: getPivotLayoutTotalKey(layout.PivotColumnTotal), onRadioChange: (key) => handlePivotLayoutTotalChange('PivotColumnTotal', key), children: PIVOT_LAYOUT_TOTAL_OPTIONS.map((key) => (_jsx(TypeRadio, { value: key, text: PIVOT_LAYOUT_TOTAL_LABELS[key], description: PIVOT_LAYOUT_TOTAL_DESCRIPTIONS[key] }, key))) })) : (_jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:italic", children: isPivotColumnTotalEnabled })) })] }));
 };

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

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