@adaptabletools/adaptable 23.0.0-canary.8 → 23.0.0

package/src/agGrid/AgGridMenuAdapter.js

@@ -2,8 +2,133 @@ import { isAdaptableElementIcon } from '../components/Icon';
 import { iconToString } from '../components/icons';
 import ArrayExtensions from '../Utilities/Extensions/ArrayExtensions';
 import { MENU_SEPARATOR } from '../Utilities/Constants/GeneralConstants';
-import { buildValueAggregationMenuItem } from './buildValueAggregationMenuItem';
-import { createAgGridIcon } from './createAgGridIcon';
+import { getAggFuncName, getDisplayAggFuncNames, isWeightedAverageAggregation, WEIGHTED_AVERAGE_AGG_FN_NAME, } from '../AdaptableState/Common/AggregationColumns';
+/**
+ * Creates an AG Grid icon element for the given icon name.
+ *
+ * Mimics AG Grid's internal icon creation, producing a
+ * `<span class="ag-icon ag-icon-{name}" role="presentation" unselectable="on">`
+ * so the icon picks up AG Grid's own icon font/theme styling.
+ *
+ * @see https://github.com/ag-grid/ag-grid/blob/5ca14e73188f6f52fd7d545d595c067bf1b72168/packages/ag-grid-community/src/utils/icon.ts#L139
+ */
+function createAgGridIcon(name) {
+    const element = document.createElement('span');
+    element.className = `ag-icon ag-icon-${name}`;
+    element.setAttribute('role', 'presentation');
+    element.setAttribute('unselectable', 'on');
+    return element;
+}
+const toFuncLabel = (funcName) => {
+    if (funcName === 'avg') {
+        return 'Average';
+    }
+    if (funcName === 'weightedAvg') {
+        return 'Weighted Average';
+    }
+    return funcName ? funcName.charAt(0).toUpperCase() + funcName.slice(1) : funcName;
+};
+/**
+ * Builds the replacement for AG Grid's built-in `valueAggSubMenu` column menu item.
+ *
+ * AG Grid does not allow customizing the built-in submenu, so we rebuild an
+ * equivalent one: the column's existing aggregation functions plus a
+ * `Weighted Average` item whose submenu lists the numeric columns that can be
+ * used as the weight parameter.
+ *
+ * Both standard and weighted selections persist through the current Layout
+ * (`updateCurrentLayout`), so the existing `weightedAvg` aggFunc can read the
+ * chosen `weightedColumnId` back from the Layout.
+ *
+ * Weighted Average is never used in Pivot Layouts, so this only deals with the
+ * Table Layout aggregations and the caller skips it entirely in Pivot mode.
+ */
+function buildValueAggregationMenuItem(adaptableApi, menuContext) {
+    const column = menuContext.adaptableColumn;
+    const columnId = column.columnId;
+    const currentLayout = adaptableApi.layoutApi.getCurrentLayout();
+    const aggregationColumns = currentLayout.TableAggregationColumns || [];
+    const currentAggFunc = aggregationColumns.find((agg) => agg.ColumnId === columnId)?.AggFunc;
+    let activeAggFuncName;
+    if (currentAggFunc != null) {
+        const aggFuncName = getAggFuncName(currentAggFunc);
+        activeAggFuncName = aggFuncName === true ? column.aggregationFunction : aggFuncName;
+    }
+    const activeWeightColumnId = isWeightedAverageAggregation(currentAggFunc)
+        ? currentAggFunc.weightedColumnId
+        : undefined;
+    const applyAggregation = (aggFuncValue) => {
+        const upsert = (cols) => {
+            const list = cols ? [...cols] : [];
+            const index = list.findIndex((col) => col.ColumnId === columnId);
+            if (index >= 0) {
+                list[index] = { ...list[index], AggFunc: aggFuncValue };
+            }
+            else {
+                list.push({ ColumnId: columnId, AggFunc: aggFuncValue });
+            }
+            return list;
+        };
+        adaptableApi.layoutApi.updateCurrentLayout((layout) => {
+            const tableLayout = layout;
+            return {
+                ...tableLayout,
+                TableAggregationColumns: upsert(tableLayout.TableAggregationColumns),
+            };
+        });
+    };
+    const removeAggregation = () => {
+        adaptableApi.layoutApi.updateCurrentLayout((layout) => {
+            const tableLayout = layout;
+            return {
+                ...tableLayout,
+                TableAggregationColumns: (tableLayout.TableAggregationColumns || []).filter((col) => col.ColumnId !== columnId),
+            };
+        });
+    };
+    // 'None' clears any aggregation for the column and is checked when none is set
+    const subMenu = [
+        {
+            name: 'None',
+            checked: activeAggFuncName == null,
+            action: () => removeAggregation(),
+        },
+    ];
+    // getDisplayAggFuncNames already positions weightedAvg right after 'avg'
+    // (and only includes it when the column is eligible)
+    const aggFuncItems = getDisplayAggFuncNames(column).map((funcName) => {
+        // Weighted Average needs a weight column parameter, so instead of a plain
+        // action it gets a submenu listing the numeric columns usable as the weight.
+        if (funcName === WEIGHTED_AVERAGE_AGG_FN_NAME) {
+            const weightColumnItems = adaptableApi.columnApi
+                .getNumericColumns()
+                .filter((numericColumn) => numericColumn.columnId !== columnId)
+                .map((numericColumn) => ({
+                name: numericColumn.friendlyName ?? numericColumn.columnId,
+                checked: activeWeightColumnId === numericColumn.columnId,
+                action: () => applyAggregation({
+                    type: 'weightedAverage',
+                    weightedColumnId: numericColumn.columnId,
+                }),
+            }));
+            return {
+                name: 'Weighted Average',
+                checked: activeAggFuncName === WEIGHTED_AVERAGE_AGG_FN_NAME,
+                subMenu: weightColumnItems,
+            };
+        }
+        return {
+            name: toFuncLabel(funcName),
+            checked: activeAggFuncName === funcName,
+            action: () => applyAggregation(funcName),
+        };
+    });
+    subMenu.push(...aggFuncItems);
+    return {
+        name: 'Value Aggregation',
+        subMenu,
+    };
+}
 export class AgGridMenuAdapter {
     _adaptableInstance;
     constructor(_adaptableInstance) {

package/src/agGrid/cellRenderers/BadgeRenderer.js

@@ -1,7 +1,7 @@
 import { Badge } from '../../View/Components/Badge';
 import { renderWithAdaptableContext } from '../../View/renderWithAdaptableContext';
 import * as React from 'react';
-import { shouldRenderStyledColumnOnRow } from './shouldRenderStyledColumnOnRow';
+import { shouldRenderStyledColumnOnRow } from '../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
 const OVERFLOW_CLASS = {
     Truncate: 'ab-Badge__wrapper--truncate',
     Wrap: 'ab-Badge__wrapper--wrap',

package/src/agGrid/cellRenderers/BulletChartRenderer.js

@@ -1,7 +1,7 @@
 import Helper from '../../Utilities/Helpers/Helper';
-import clamp from '../../Utilities/utils/clamp';
-import { buildBarChartCellTextLabels, hasBarChartCellTextConfigured, mountBarChartCellText, } from '../../Utilities/Helpers/barChartCellText';
-import { shouldRenderStyledColumnOnRow } from './shouldRenderStyledColumnOnRow';
+import { clamp } from '../../Utilities/Extensions/NumberExtensions';
+import { buildBarStyleCellTextLabels, hasBarStyleCellTextConfigured, mountBarStyleCellText, } from '../../Utilities/Helpers/StyledColumns/BarStylesHelper';
+import { shouldRenderStyledColumnOnRow } from '../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
 const SVG_NS = 'http://www.w3.org/2000/svg';
 const DEFAULT_BAR_HEIGHT = 8;
 const DEFAULT_BAND_HEIGHT = 14;
@@ -155,7 +155,7 @@ export const getBulletChartRendererForColumn = (styledColumn, abColumn, api) =>
             const barThickness = bulletStyle.Bar?.Height ?? DEFAULT_BAR_HEIGHT;
             const bandThickness = Math.max(barThickness + 6, DEFAULT_BAND_HEIGHT);
             const cellTextProperties = bulletStyle.CellTextProperties;
-            const hasCellText = hasBarChartCellTextConfigured(cellTextProperties);
+            const hasCellText = hasBarStyleCellTextConfigured(cellTextProperties);
             // Map a 0..1 value fraction onto the long-axis viewBox (0..100).
             // In horizontal: 0 -> left, 1 -> right.
             // In vertical:   0 -> bottom, 1 -> top (SVG y origin is at the top so
@@ -281,8 +281,8 @@ export const getBulletChartRendererForColumn = (styledColumn, abColumn, api) =>
                 // `valueFormatter` returns the raw value (a number here), so coerce
                 // to string before it flows into the helpers.
                 const formattedCellValue = String(params.formatValue?.(cellValue) ?? cellValue);
-                const labels = buildBarChartCellTextLabels(cellTextProperties, formattedCellValue, `${(valueFraction * 100).toFixed(0)}%`);
-                mountBarChartCellText({
+                const labels = buildBarStyleCellTextLabels(cellTextProperties, formattedCellValue, `${(valueFraction * 100).toFixed(0)}%`);
+                mountBarStyleCellText({
                     wrapperEl: this.eGui,
                     mergedOverlayEl: svgContainer,
                     textClassName: 'ab-BulletChart__text',

package/src/agGrid/cellRenderers/IconRenderer.js

@@ -2,9 +2,8 @@ import * as React from 'react';
 import { IconComponent, isAdaptableSystemIcon, isAdaptableCustomIcon, isAdaptableElementIcon, } from '../../components/Icon';
 import { renderWithAdaptableContext } from '../../View/renderWithAdaptableContext';
 import Helper from '../../Utilities/Helpers/Helper';
-import { getIconStylePresetMappings } from '../../Utilities/Helpers/IconStylePresets';
-import { shouldRenderStyledColumnOnRow } from './shouldRenderStyledColumnOnRow';
-import { isUnsupportedColumnDataTypeForIconStyle } from '../../Utilities/Helpers/iconStyledColumnColumnSupport';
+import { getIconStylePresetMappings, isUnsupportedColumnDataTypeForIconStyle, } from '../../Utilities/Helpers/StyledColumns/IconStyleHelper';
+import { shouldRenderStyledColumnOnRow } from '../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
 import { errorOnce } from '../AdaptableLogger';
 const DEFAULT_SIZE = 18;
 const DEFAULT_GAP = 4;

package/src/agGrid/cellRenderers/PercentBarRenderer.js

@@ -1,7 +1,7 @@
 import Helper from '../../Utilities/Helpers/Helper';
-import clamp from '../../Utilities/utils/clamp';
-import { shouldRenderStyledColumnOnRow } from './shouldRenderStyledColumnOnRow';
-import { buildBarChartCellTextLabels, hasBarChartCellTextConfigured, mountBarChartCellText, } from '../../Utilities/Helpers/barChartCellText';
+import { clamp } from '../../Utilities/Extensions/NumberExtensions';
+import { shouldRenderStyledColumnOnRow } from '../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
+import { buildBarStyleCellTextLabels, hasBarStyleCellTextConfigured, mountBarStyleCellText, } from '../../Utilities/Helpers/StyledColumns/BarStylesHelper';
 /**
  * Resolve the origin value (in the same numeric space as `min`/`max`) the bar
  * should grow from.
@@ -141,7 +141,7 @@ export const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
             }
             // ----- Build the DOM -------------------------------------------------
             const cellTextProperties = percentBarStyle.CellTextProperties;
-            const hasCellText = hasBarChartCellTextConfigured(cellTextProperties);
+            const hasCellText = hasBarStyleCellTextConfigured(cellTextProperties);
             // Wrapper always fills the cell. The bar is the flex-grow child so it
             // claims whatever space the (compact) text rows leave, with a small
             // floor to stay visible even on short rows.
@@ -189,8 +189,8 @@ export const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
                 // columns), which then propagates through the helpers as a non-string
                 // and breaks string-only operations (e.g. `.length` checks).
                 const formattedCellValue = String(params.formatValue?.(rawCellValue) ?? rawCellValue);
-                const labels = buildBarChartCellTextLabels(cellTextProperties, formattedCellValue, `${percentageValue.toFixed(0)}%`);
-                mountBarChartCellText({
+                const labels = buildBarStyleCellTextLabels(cellTextProperties, formattedCellValue, `${percentageValue.toFixed(0)}%`);
+                mountBarStyleCellText({
                     wrapperEl: this.eGui,
                     mergedOverlayEl: barEl,
                     textClassName: 'ab-PercentBar__text',

package/src/agGrid/cellRenderers/RangeBarRenderer.js

@@ -1,7 +1,7 @@
 import Helper from '../../Utilities/Helpers/Helper';
-import clamp from '../../Utilities/utils/clamp';
-import { buildBarChartCellTextLabels, hasBarChartCellTextConfigured, mountBarChartCellText, } from '../../Utilities/Helpers/barChartCellText';
-import { shouldRenderStyledColumnOnRow } from './shouldRenderStyledColumnOnRow';
+import { clamp } from '../../Utilities/Extensions/NumberExtensions';
+import { buildBarStyleCellTextLabels, hasBarStyleCellTextConfigured, mountBarStyleCellText, } from '../../Utilities/Helpers/StyledColumns/BarStylesHelper';
+import { shouldRenderStyledColumnOnRow } from '../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
 const SVG_NS = 'http://www.w3.org/2000/svg';
 const DEFAULT_TRACK_HEIGHT = 4;
 const DEFAULT_BAND_HEIGHT = 14;
@@ -47,8 +47,7 @@ const normaliseMarker = (override, defaults) => {
     return {
         Shape: shape,
         Color: override?.Color ?? defaults.Color,
-        Size: override?.Size ??
-            (shape === 'Line' ? DEFAULT_LINE_MARKER_THICKNESS : defaults.Size),
+        Size: override?.Size ?? (shape === 'Line' ? DEFAULT_LINE_MARKER_THICKNESS : defaults.Size),
     };
 };
 /**
@@ -124,7 +123,7 @@ export const getRangeBarRendererForColumn = (styledColumn, abColumn, api) => {
             const trackThickness = trackProperties?.Height ?? DEFAULT_TRACK_HEIGHT;
             const bandThickness = Math.max(trackThickness + 6, DEFAULT_BAND_HEIGHT);
             const cellTextProperties = rangeStyle.CellTextProperties;
-            const hasCellText = hasBarChartCellTextConfigured(cellTextProperties);
+            const hasCellText = hasBarStyleCellTextConfigured(cellTextProperties);
             // Map a 0..1 fraction onto the long-axis viewBox (0..100). Vertical
             // orientation inverts so that lower values appear at the bottom of
             // the cell, matching user expectation.
@@ -262,8 +261,8 @@ export const getRangeBarRendererForColumn = (styledColumn, abColumn, api) => {
                 // `valueFormatter` returns the raw value (a number here), so coerce
                 // to string before it flows into the helpers.
                 const formattedCellValue = String(params.formatValue?.(numericValue) ?? numericValue);
-                const labels = buildBarChartCellTextLabels(cellTextProperties, formattedCellValue, `${pct.toFixed(0)}%`);
-                mountBarChartCellText({
+                const labels = buildBarStyleCellTextLabels(cellTextProperties, formattedCellValue, `${pct.toFixed(0)}%`);
+                mountBarStyleCellText({
                     wrapperEl: this.eGui,
                     mergedOverlayEl: svgContainer,
                     textClassName: 'ab-RangeBar__text',

package/src/agGrid/cellRenderers/RatingRenderer.js

@@ -1,6 +1,6 @@
 import Helper from '../../Utilities/Helpers/Helper';
-import clamp from '../../Utilities/utils/clamp';
-import { shouldRenderStyledColumnOnRow } from './shouldRenderStyledColumnOnRow';
+import { clamp } from '../../Utilities/Extensions/NumberExtensions';
+import { shouldRenderStyledColumnOnRow } from '../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
 const SVG_NS = 'http://www.w3.org/2000/svg';
 const DEFAULT_MAX = 5;
 const DEFAULT_SIZE = 14;

package/src/agGrid/editors/AdaptableDateEditor/index.js

@@ -3,7 +3,7 @@ import { renderWithAdaptableContext } from '../../../View/renderWithAdaptableCon
 import { InternalAdaptableDateEditor, } from './InternalAdaptableDateEditor';
 import { KeyCode } from 'ag-grid-enterprise';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
-import { DateFormatter } from '../../../Utilities/Helpers/FormatHelper';
+import { DateFormatter } from '../../../Utilities/Helpers/DisplayFormatHelper';
 function shouldClearExistingValue(params) {
     return params.eventKey === KeyCode.BACKSPACE || params.eventKey === KeyCode.DELETE;
 }

package/src/components/ColorPicker/ColorPicker.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useCallback, useEffect } from 'react';
-import debounce from '../../Utilities/utils/debounce';
+import { debounce } from '../../Utilities/Helpers/TimingHelper';
 import { cn } from '../../lib/utils';
 import Input from '../Input';
 import { getVariableColor } from '../../Utilities/Helpers/StyleHelper';

package/src/components/Datepicker/index.js

@@ -4,7 +4,7 @@ import { useEffect, useLayoutEffect, useState } from 'react';
 import useProperty from '../utils/useProperty';
 import SimpleButton from '../SimpleButton';
 import { ACCESS_LEVEL_FULL } from '../../Utilities/Constants/GeneralConstants';
-import { DateFormatter } from '../../Utilities/Helpers/FormatHelper';
+import { DateFormatter } from '../../Utilities/Helpers/DisplayFormatHelper';
 import { useDatepickerContext } from './DatepickerContext';
 import { AdaptableDateInlineInput } from '../../View/Components/AdaptableInput/AdaptableDateInlineInput';
 import { isValid, addYears, endOfYear, startOfYear, addDays, addBusinessDays, } from 'date-fns';

package/src/components/DragAndDropContext/ModuleManager.js

@@ -71,9 +71,12 @@ export const ModuleManager = (props) => {
                         'ab-ModuleSelector__UnusedGroups--row': groupsLayout === 'row',
                     }), children: unusedItemGroups.map((group, index) => {
                         const listId = group.listId ?? `UNUSED-${index}`;
+                        const isRow = groupsLayout === 'row';
+                        const hasCustomFlex = typeof group.flex === 'number';
                         return (_jsxs(Card, { className: cn('twa:m-0 ab-ModuleSelector__UnusedGroup', {
-                                'twa:flex-1 twa:min-w-0': groupsLayout === 'row',
-                            }), children: [_jsxs(Card.Title, { border: false, className: "twa:py-2", children: [_jsx(Box, { className: "twa:text-sm twa:font-medium", children: group.title }), group.help ? (_jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal", children: group.help })) : null] }), _jsx(Card.Body, { className: "twa:px-0 twa:pt-0", children: _jsx(UnusedPanel, { listId: listId, disabled: disabled, items: group.items }) })] }, listId));
+                                'twa:min-w-0': isRow,
+                                'twa:flex-1': isRow && !hasCustomFlex,
+                            }), style: isRow && hasCustomFlex ? { flex: group.flex } : undefined, children: [_jsxs(Card.Title, { border: false, className: "twa:py-2", children: [_jsx(Box, { className: "twa:text-sm twa:font-medium", children: group.title }), group.help ? (_jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal", children: group.help })) : null] }), _jsx(Card.Body, { className: "twa:px-0 twa:pt-0", children: _jsx(UnusedPanel, { listId: listId, disabled: disabled, items: group.items }) })] }, listId));
                     }) })] }));
     };
     const renderAvailableItemPanels = (options) => {

package/src/components/DragAndDropContext/types.d.ts

@@ -12,4 +12,11 @@ export interface UnusedItemGroup {
     title: string;
     help?: string;
     items: string[];
+    /**
+     * Optional flex weight when groups are laid out in a row. If any group
+     * sets this, the weights are used as `flex-grow` values (so e.g. 40 / 60
+     * gives a 40% / 60% split). When omitted on every group the layout falls
+     * back to equal-width columns.
+     */
+    flex?: number;
 }

package/src/components/FormLayout/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { createContext, useContext } from 'react';
-import merge from '../../Utilities/utils/merge';
+import { merge } from '../../Utilities/Extensions/ObjectExtensions';
 import join from '../utils/join';
 import { Box } from '../Flex';
 const FormLayoutContext = createContext(null);

package/src/components/OverlayTrigger/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useRef, useEffect } from 'react';
-import debounce from '../../Utilities/utils/debounce';
+import { debounce } from '../../Utilities/Helpers/TimingHelper';
 import batchUpdate from '../utils/batchUpdate';
 import selectParent from '../utils/selectParent';
 import useProperty from '../utils/useProperty';

package/src/env.js

@@ -1,5 +1,5 @@
 export default {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1782067349296 || Date.now(),
-    VERSION: "23.0.0-canary.8" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1782227625016 || Date.now(),
+    VERSION: "23.0.0" || '--current-version--',
 };

package/src/layout-manager/src/isLayoutEqual.js

@@ -1,4 +1,4 @@
-import isDeepEqual from '../../Utilities/utils/isEqual';
+import { isEqual as isDeepEqual } from '../../Utilities/Extensions/ObjectExtensions';
 import { debug as debugFactory } from '@infinite-table/infinite-react';
 import { isPivotLayoutModel } from './isPivotLayoutModel';
 import { normalizePivotLayoutModel, normalizeTableLayoutModel } from './normalizeLayoutModel';

package/src/metamodel/adaptable.metamodel.d.ts

@@ -1170,7 +1170,40 @@ export declare const ADAPTABLE_METAMODEL: {
     BadgeStylePredicate: {
         k: string;
     };
-    BarChartMarker: {
+    BarStyleCellTextHorizontalAlignment: {
+        k: string;
+    };
+    BarStyleCellTextLayout: {
+        k: string;
+        p: {
+            n: string;
+            k: string;
+            o: boolean;
+            r: string;
+        }[];
+    };
+    BarStyleCellTextPlacement: {
+        k: string;
+        p: {
+            n: string;
+            k: string;
+            o: boolean;
+            r: string;
+        }[];
+    };
+    BarStyleCellTextProperties: {
+        k: string;
+        p: {
+            n: string;
+            k: string;
+            o: boolean;
+            r: string;
+        }[];
+    };
+    BarStyleCellTextVerticalAlignment: {
+        k: string;
+    };
+    BarStyleMarker: {
         k: string;
         p: {
             n: string;
@@ -3226,13 +3259,6 @@ export declare const ADAPTABLE_METAMODEL: {
             r: string;
         })[];
     };
-    GradientZeroCentredColors: {
-        k: string;
-        p: {
-            n: string;
-            k: string;
-        }[];
-    };
     GridApi: {
         k: string;
         p: {
@@ -5269,4 +5295,11 @@ export declare const ADAPTABLE_METAMODEL: {
     WindowSize: {
         k: string;
     };
+    ZeroCentredColors: {
+        k: string;
+        p: {
+            n: string;
+            k: string;
+        }[];
+    };
 };