@adaptabletools/adaptable 23.0.0-canary.6 → 23.0.0-canary.8

package/src/Strategy/Utilities/Layout/columnsSummaryHelpers.js

@@ -0,0 +1,166 @@
+export const TABLE_COLUMNS_SETTINGS_PANEL_LABELS = {
+    visibility: 'Columns',
+    pinning: 'Pinning',
+    sizing: 'Sizing',
+    sorting: 'Sorting',
+};
+export const TABLE_COLUMNS_WIZARD_SUBSECTION_LABELS = {
+    visibility: 'Visibility and Order',
+    pinning: 'Pinning',
+    sizing: 'Sizing',
+    sorting: 'Sorting',
+};
+function resolveDefaultColumnWidth(api) {
+    return (columnId) => api.internalApi.getAdaptableInstance().getDefaultColumnWidthForCol(columnId);
+}
+function hasExplicitLayoutSizing(columnId, sizing, resolveDefaultWidth) {
+    if (!sizing) {
+        return false;
+    }
+    if (sizing.Flex != null) {
+        return true;
+    }
+    if (sizing.MinWidth != null || sizing.MaxWidth != null) {
+        return true;
+    }
+    if (sizing.Width != null) {
+        return sizing.Width !== resolveDefaultWidth(columnId);
+    }
+    return false;
+}
+function getLayoutExplicitSizedColumnIds(layout, resolveDefaultWidth) {
+    const sizing = layout.ColumnSizing ?? {};
+    return Object.keys(sizing).filter((columnId) => hasExplicitLayoutSizing(columnId, sizing[columnId], resolveDefaultWidth));
+}
+function formatExplicitColumnSizingBrief(columnId, sizing, resolveDefaultWidth) {
+    if (!hasExplicitLayoutSizing(columnId, sizing, resolveDefaultWidth)) {
+        return '';
+    }
+    const parts = [];
+    if (sizing?.Flex != null) {
+        parts.push(`flex ${sizing.Flex}`);
+    }
+    else if (sizing?.Width != null && sizing.Width !== resolveDefaultWidth(columnId)) {
+        parts.push(String(sizing.Width));
+    }
+    if (sizing?.MinWidth != null) {
+        parts.push(`min ${sizing.MinWidth}`);
+    }
+    if (sizing?.MaxWidth != null) {
+        parts.push(`max ${sizing.MaxWidth}`);
+    }
+    return parts.join(', ');
+}
+function getLayoutTableColumnIds(layout, api) {
+    return (layout.TableColumns ?? [])
+        .filter((columnId) => !api.columnApi.isAutoRowGroupColumn(columnId))
+        .filter((columnId) => !api.columnApi.isPivotResultColumn(columnId))
+        .filter((columnId) => !api.columnApi.isSelectionColumn(columnId));
+}
+function getLayoutPinnedColumnIds(layout, side) {
+    const pinning = layout.ColumnPinning ?? {};
+    return Object.entries(pinning)
+        .filter(([, pin]) => pin === side)
+        .map(([columnId]) => columnId);
+}
+export function getTableColumnsVisibilitySummaryValues(layout, api) {
+    return getLayoutTableColumnIds(layout, api).map((columnId) => {
+        const name = api.columnApi.getFriendlyNameForColumnId(columnId, layout);
+        const customHeader = layout.ColumnHeaders?.[columnId]?.trim();
+        if (customHeader) {
+            return `${name} (header: ${customHeader})`;
+        }
+        return name;
+    });
+}
+export function getTableColumnsPinningSummaryValues(layout, api) {
+    const leftPinned = getLayoutPinnedColumnIds(layout, 'left');
+    const rightPinned = getLayoutPinnedColumnIds(layout, 'right');
+    return [
+        ...leftPinned.map((columnId) => `${api.columnApi.getFriendlyNameForColumnId(columnId, layout)} (left)`),
+        ...rightPinned.map((columnId) => `${api.columnApi.getFriendlyNameForColumnId(columnId, layout)} (right)`),
+    ];
+}
+export function getTableColumnsSizingSummaryValues(layout, api) {
+    const resolveDefaultWidth = resolveDefaultColumnWidth(api);
+    return getLayoutExplicitSizedColumnIds(layout, resolveDefaultWidth).map((columnId) => {
+        const name = api.columnApi.getFriendlyNameForColumnId(columnId, layout);
+        const sizingBrief = formatExplicitColumnSizingBrief(columnId, layout.ColumnSizing?.[columnId], resolveDefaultWidth);
+        return `${name} (${sizingBrief})`;
+    });
+}
+export function getTableColumnsSortingSummaryValues(layout, api) {
+    return (layout.ColumnSorts ?? []).map((sort) => `[${api.columnApi.getFriendlyNameForColumnId(sort.ColumnId, layout)}: ${sort.SortOrder}]`);
+}
+/** Matches legacy Layout settings panel behaviour (`layoutViewOptions.maxColumnsToDisplay`). */
+export const DEFAULT_LAYOUT_VIEW_MAX_COLUMNS = 10;
+/**
+ * Collapse a long column list for compact views (e.g. Layout settings panel).
+ * Keeps all items when the overflow is only 1 column; otherwise shows `+N more`.
+ */
+export function truncateColumnSummaryValues(values, maxToDisplay = DEFAULT_LAYOUT_VIEW_MAX_COLUMNS) {
+    if (maxToDisplay <= 0 || values.length <= maxToDisplay + 1) {
+        return values;
+    }
+    const extra = values.length - maxToDisplay;
+    return [...values.slice(0, maxToDisplay), `+${extra} more`];
+}
+export function getTableColumnsSummaryGroups(layout, api, labels = TABLE_COLUMNS_SETTINGS_PANEL_LABELS) {
+    return [
+        {
+            label: labels.visibility,
+            values: getTableColumnsVisibilitySummaryValues(layout, api),
+            emptyLabel: 'No columns in this Layout',
+        },
+        {
+            label: labels.pinning,
+            values: getTableColumnsPinningSummaryValues(layout, api),
+            emptyLabel: 'No columns pinned in this Layout',
+        },
+        {
+            label: labels.sizing,
+            values: getTableColumnsSizingSummaryValues(layout, api),
+            emptyLabel: 'All columns use default sizing in this Layout',
+        },
+        {
+            label: labels.sorting,
+            values: getTableColumnsSortingSummaryValues(layout, api),
+            emptyLabel: 'No column sorts in this Layout',
+        },
+    ];
+}
+export function getLayoutTableColumnsViewItems(layout, api, options) {
+    const maxColumnsToDisplay = options?.maxColumnsToDisplay ?? DEFAULT_LAYOUT_VIEW_MAX_COLUMNS;
+    const optionalRowLabels = new Set([
+        TABLE_COLUMNS_SETTINGS_PANEL_LABELS.pinning,
+        TABLE_COLUMNS_SETTINGS_PANEL_LABELS.sizing,
+        TABLE_COLUMNS_SETTINGS_PANEL_LABELS.sorting,
+    ]);
+    return getTableColumnsSummaryGroups(layout, api).flatMap(({ label, values, emptyLabel }) => {
+        if (optionalRowLabels.has(label) && !values.length) {
+            return [];
+        }
+        const resolvedValues = values.length ? values : [emptyLabel];
+        const displayValues = label === TABLE_COLUMNS_SETTINGS_PANEL_LABELS.visibility
+            ? truncateColumnSummaryValues(resolvedValues, maxColumnsToDisplay)
+            : resolvedValues;
+        return [
+            {
+                name: label,
+                values: displayValues,
+                tagVariant: 'column',
+            },
+        ];
+    });
+}
+export function getLayoutPivotSortingViewItem(layout, api) {
+    const values = getTableColumnsSortingSummaryValues(layout, api);
+    if (!values.length) {
+        return null;
+    }
+    return {
+        name: 'Sorting',
+        values,
+        tagVariant: 'column',
+    };
+}

package/src/Strategy/Utilities/Layout/getLayoutSortViewItems.d.ts

@@ -2,4 +2,5 @@ import { AdaptableApi, Layout } from '../../../types';
 export declare const getLayoutSortViewItems: (layout: Layout, api: AdaptableApi) => {
     name: string;
     values: string[];
+    tagVariant: "column";
 };

package/src/Strategy/Utilities/Layout/getLayoutSortViewItems.js

@@ -5,5 +5,6 @@ export const getLayoutSortViewItems = (layout, api) => {
     return {
         name: 'Sort',
         values: (layout.ColumnSorts ?? []).map((customSort) => `[${columnIdToFriendlyName(customSort.ColumnId)}: ${customSort.SortOrder}]`),
+        tagVariant: 'column',
     };
 };

package/src/Strategy/Utilities/Layout/rowGroupSummaryHelpers.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { AdaptableApi, Layout, TableLayout } from '../../../types';
+export declare const ROW_GROUP_DISPLAY_TYPE_LABELS: Record<NonNullable<TableLayout['RowGroupDisplayType']>, string>;
+export declare const ROW_GROUP_DISPLAY_TYPE_DESCRIPTIONS: Record<NonNullable<TableLayout['RowGroupDisplayType']>, string>;
+export declare const ROW_GROUP_BEHAVIOR_LABELS: Record<TableLayout['RowGroupValues']['RowGroupDefaultBehavior'], string>;
+export declare const ROW_GROUP_BEHAVIOR_DESCRIPTIONS: Record<TableLayout['RowGroupValues']['RowGroupDefaultBehavior'], string>;
+export declare function getRowGroupDisplayTypeLabel(layout: Layout): string;
+export declare function getRowGroupDisplayTypeDescription(layout: Layout): string;
+export declare function getRowGroupBehaviorLabel(layout: Layout): string;
+export declare function getRowGroupBehaviorDescription(layout: Layout): string;
+export declare function getTableRowGroupSummaryValues(layout: Layout, api: AdaptableApi): string[];
+export declare function getLayoutTableRowGroupViewItems(layout: Layout, api: AdaptableApi): {
+    name: string;
+    view: () => React.FunctionComponentElement<{
+        layout: Layout;
+        api: AdaptableApi;
+    }>;
+}[];
+export declare function getPivotRowGroupSummaryValues(layout: Layout, api: AdaptableApi): string[];
+export declare function getLayoutPivotRowGroupViewItems(layout: Layout, api: AdaptableApi): {
+    name: string;
+    view: () => React.FunctionComponentElement<{
+        layout: Layout;
+        api: AdaptableApi;
+    }>;
+}[];

package/src/Strategy/Utilities/Layout/rowGroupSummaryHelpers.js

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { PivotRowGroupSummaryView, TableRowGroupSummaryView, } from '../../../View/Wizard/rowGroupSummaryTags';
+export const ROW_GROUP_DISPLAY_TYPE_LABELS = {
+    single: 'Single Column',
+    multi: 'Multiple Columns',
+    groupRows: 'Full Width Group Rows',
+};
+export const ROW_GROUP_DISPLAY_TYPE_DESCRIPTIONS = {
+    single: 'All Row Grouped Columns display in one hierarchical Column',
+    multi: 'Each Row Grouped Column displays in its own, separate, Column',
+    groupRows: 'Row groups display as full-width rows (no group column and no aggregations)',
+};
+export const ROW_GROUP_BEHAVIOR_LABELS = {
+    'always-collapsed': 'All Collapsed',
+    'always-expanded': 'All Expanded',
+    expanded: 'Mostly Expanded',
+    collapsed: 'Mostly Collapsed',
+};
+export const ROW_GROUP_BEHAVIOR_DESCRIPTIONS = {
+    'always-collapsed': 'All Grouped Rows are always collapsed',
+    'always-expanded': 'All Grouped Rows are always expanded',
+    expanded: 'All Grouped Rows expanded, other than those collapsed when Layout last displayed',
+    collapsed: 'All Grouped Rows collapsed, other than those expanded when Layout last displayed',
+};
+export function getRowGroupDisplayTypeLabel(layout) {
+    const displayType = layout.RowGroupDisplayType ?? 'single';
+    return ROW_GROUP_DISPLAY_TYPE_LABELS[displayType];
+}
+export function getRowGroupDisplayTypeDescription(layout) {
+    const displayType = layout.RowGroupDisplayType ?? 'single';
+    return ROW_GROUP_DISPLAY_TYPE_DESCRIPTIONS[displayType];
+}
+export function getRowGroupBehaviorLabel(layout) {
+    const behavior = layout.RowGroupValues?.RowGroupDefaultBehavior ?? 'always-collapsed';
+    return ROW_GROUP_BEHAVIOR_LABELS[behavior];
+}
+export function getRowGroupBehaviorDescription(layout) {
+    const behavior = layout.RowGroupValues?.RowGroupDefaultBehavior ?? 'always-collapsed';
+    return ROW_GROUP_BEHAVIOR_DESCRIPTIONS[behavior];
+}
+export function getTableRowGroupSummaryValues(layout, api) {
+    const columnIdToFriendlyName = (columnId) => api.columnApi.getFriendlyNameForColumnId(columnId);
+    const values = [];
+    if (!layout.RowGroupedColumns?.length) {
+        values.push('No Row Grouped Columns');
+    }
+    else {
+        layout.RowGroupedColumns.forEach((colId) => {
+            values.push(columnIdToFriendlyName(colId));
+        });
+    }
+    values.push(`Display Type: ${getRowGroupDisplayTypeLabel(layout)}`);
+    values.push(`Behaviour: ${getRowGroupBehaviorLabel(layout)}`);
+    return values;
+}
+export function getLayoutTableRowGroupViewItems(layout, api) {
+    return [
+        {
+            name: 'Row Groups',
+            view: () => React.createElement(TableRowGroupSummaryView, { layout, api }),
+        },
+    ];
+}
+export function getPivotRowGroupSummaryValues(layout, api) {
+    const columnIdToFriendlyName = (columnId) => api.columnApi.getFriendlyNameForColumnId(columnId);
+    const values = [];
+    if (!layout.PivotGroupedColumns?.length) {
+        values.push('No Row Grouped Columns');
+    }
+    else {
+        layout.PivotGroupedColumns.forEach((colId) => {
+            values.push(columnIdToFriendlyName(colId));
+        });
+    }
+    values.push(`Behaviour: ${getRowGroupBehaviorLabel(layout)}`);
+    return values;
+}
+export function getLayoutPivotRowGroupViewItems(layout, api) {
+    return [
+        {
+            name: 'Row Groups',
+            view: () => React.createElement(PivotRowGroupSummaryView, { layout, api }),
+        },
+    ];
+}

package/src/Utilities/Defaults/DefaultSettingsPanel.d.ts

@@ -1,5 +1,3 @@
-import { AdaptableSettingsPanel } from '../../AdaptableState/Common/Types';
-/**
- * This constant determines the items, and order, which appear in Settings Panel
- */
-export declare const DEFAULT_SETTINGS_PANEL_NAVIGATION_ITEMS: (AdaptableSettingsPanel | '-')[];
+import { SettingsPanelNavigation, SettingsPanelNavigationGroup } from '../../AdaptableOptions/SettingsPanelOptions';
+export declare const DEFAULT_SETTINGS_PANEL_NAVIGATION_GROUPS: SettingsPanelNavigationGroup[];
+export declare const buildDefaultSettingsPanelNavigation: (customPanelNames?: string[]) => SettingsPanelNavigation;

package/src/Utilities/Defaults/DefaultSettingsPanel.js

@@ -1,42 +1,47 @@
-/**
- * This constant determines the items, and order, which appear in Settings Panel
- */
-export const DEFAULT_SETTINGS_PANEL_NAVIGATION_ITEMS = [
-    'GridInfo',
-    'ColumnInfo',
-    'Dashboard',
-    'ToolPanel',
-    'StatusBar',
-    'Theme',
-    '-',
-    'Layout',
-    'CalculatedColumn',
-    'CustomSort',
-    'Alert',
-    'SystemStatus',
-    '-',
-    'Export',
-    'DataImport',
-    '-',
-    'FormatColumn',
-    'StyledColumn',
-    'FlashingCell',
-    '-',
-    'QuickSearch',
-    'GridFilter',
-    'ColumnFilter',
-    'DataSet',
-    'NamedQuery',
-    '-',
-    'Note',
-    'Comment',
-    'FreeTextColumn',
-    '-',
-    'PlusMinus',
-    'Shortcut',
-    'DataChangeHistory',
-    '-',
-    'Charting',
-    'TeamSharing',
-    'StateManagement',
+export const DEFAULT_SETTINGS_PANEL_NAVIGATION_GROUPS = [
+    {
+        label: 'Grid & UI',
+        items: ['GridInfo', 'ColumnInfo', 'Dashboard', 'ToolPanel', 'StatusBar', 'Theme'],
+    },
+    {
+        label: 'Layout',
+        items: ['Layout', 'CalculatedColumn', 'CustomSort', 'Charting'],
+    },
+    {
+        label: 'Formatting',
+        items: ['FormatColumn', 'StyledColumn', 'FlashingCell'],
+    },
+    {
+        label: 'Filtering & Search',
+        items: ['QuickSearch', 'GridFilter', 'ColumnFilter', 'DataSet', 'NamedQuery'],
+    },
+    {
+        label: 'Notes & Annotations',
+        items: ['Alert', 'Note', 'Comment', 'FreeTextColumn', 'SystemStatus'],
+    },
+    {
+        label: 'Export & Import',
+        items: ['Export', 'DataImport'],
+    },
+    {
+        label: 'ֵEditing',
+        items: ['PlusMinus', 'Shortcut', 'DataChangeHistory'],
+    },
+    {
+        label: 'Administration',
+        items: ['TeamSharing', 'StateManagement'],
+    },
 ];
+export const buildDefaultSettingsPanelNavigation = (customPanelNames = []) => {
+    const groups = DEFAULT_SETTINGS_PANEL_NAVIGATION_GROUPS.map((group) => ({
+        label: group.label,
+        items: [...group.items],
+    }));
+    if (customPanelNames.length) {
+        groups.push({
+            label: 'Custom Panels',
+            items: [...customPanelNames],
+        });
+    }
+    return { groups };
+};

package/src/Utilities/Helpers/FormatHelper.js

@@ -78,6 +78,9 @@ export function NumberFormatter(input, options = {}, rowNode, column, api) {
     if (options.Empty) {
         return ' ';
     }
+    if (n === 0 && options.ZeroDisplay !== undefined && options.ZeroDisplay !== '0') {
+        return options.ZeroDisplay;
+    }
     let s;
     let digitsToUse;
     const fractionsSepatator = options.FractionSeparator ?? '.';

package/src/Utilities/Helpers/IconStylePresets.d.ts

@@ -1,4 +1,4 @@
-import { IconStyleBuiltInPreset, IconStyleMapping } from '../../AdaptableState/StyledColumnState';
+import { IconStyleBuiltInPreset, IconStyleMapping } from '../../AdaptableState/StyledColumns/IconStyle';
 export declare const ICON_STYLE_PRESETS: Record<IconStyleBuiltInPreset, IconStyleMapping[]>;
 /** Returns a fresh copy of the mappings for a given preset. */
 export declare const getIconStylePresetMappings: (preset: IconStyleBuiltInPreset) => IconStyleMapping[];

package/src/Utilities/Helpers/ScheduleHelper.js

@@ -187,6 +187,8 @@ export function getScheduleDescription(schedule) {
         }
         case 'monthly':
             return `Monthly on day ${dayOfMonth} ${time}`;
+        case 'custom':
+            return schedule.CronExpression?.trim() || 'Custom Cron';
         default:
             return `${schedule.CronExpression ?? 'Custom'} ${time}`;
     }

package/src/Utilities/Helpers/StyleHelper.d.ts

@@ -48,3 +48,21 @@ export declare const toStyle: (style?: AdaptableStyle) => {
     borderStyle: string;
 };
 export declare const getVariableColor: (variable: string) => string;
+/**
+ * Default surface colour assumed to sit *behind* a semi-transparent cell tint
+ * when computing auto-contrast text. Gradient cells paint a base colour at a
+ * value-driven alpha, so the colour the user actually perceives is that tint
+ * composited over the grid cell background (white in the default light theme).
+ */
+export declare const DEFAULT_CELL_SURFACE_COLOR = "#ffffff";
+/**
+ * Picks a readable text colour (near-black or white) for a cell whose
+ * background is `baseColor` painted at `alpha` over `surfaceColor`.
+ *
+ * The tint must be composited over the surface *before* measuring luminance:
+ * `tinycolor.getLuminance()` ignores the alpha channel, so measuring the raw
+ * base colour would yield the same result for a faint cell and a fully-opaque
+ * one — making auto-contrast text identical on every row instead of adapting
+ * per cell.
+ */
+export declare const getAutoContrastTextColor: (baseColor: string, alpha: number, surfaceColor?: string) => string;

package/src/Utilities/Helpers/StyleHelper.js

@@ -1,3 +1,4 @@
+import tinycolor from 'tinycolor2';
 import { EnumExtensions } from '../Extensions/EnumExtensions';
 /**
  * Keys belonging to the "Font" slice (text rendering + alignment).
@@ -215,3 +216,29 @@ export const getVariableColor = (variable) => {
     }
     return getComputedStyle(document.documentElement).getPropertyValue(match[1]).trim();
 };
+/**
+ * Default surface colour assumed to sit *behind* a semi-transparent cell tint
+ * when computing auto-contrast text. Gradient cells paint a base colour at a
+ * value-driven alpha, so the colour the user actually perceives is that tint
+ * composited over the grid cell background (white in the default light theme).
+ */
+export const DEFAULT_CELL_SURFACE_COLOR = '#ffffff';
+/**
+ * Luminance above which a (composited, opaque) background is considered "light"
+ * enough to need dark text.
+ */
+const AUTO_CONTRAST_LUMINANCE_THRESHOLD = 0.45;
+/**
+ * Picks a readable text colour (near-black or white) for a cell whose
+ * background is `baseColor` painted at `alpha` over `surfaceColor`.
+ *
+ * The tint must be composited over the surface *before* measuring luminance:
+ * `tinycolor.getLuminance()` ignores the alpha channel, so measuring the raw
+ * base colour would yield the same result for a faint cell and a fully-opaque
+ * one — making auto-contrast text identical on every row instead of adapting
+ * per cell.
+ */
+export const getAutoContrastTextColor = (baseColor, alpha, surfaceColor = DEFAULT_CELL_SURFACE_COLOR) => {
+    const composited = tinycolor.mix(surfaceColor, baseColor, alpha * 100);
+    return composited.getLuminance() > AUTO_CONTRAST_LUMINANCE_THRESHOLD ? '#111111' : '#ffffff';
+};

package/src/Utilities/Helpers/StyledColumnGradientHelper.d.ts

@@ -1,6 +1,8 @@
 import type { CSSProperties } from 'react';
 import type { IRowNode } from 'ag-grid-community';
-import { CellColorRange, GradientStyle, NumericStyledColumn, StyledColumn } from '../../AdaptableState/StyledColumnState';
+import { StyledColumn } from '../../AdaptableState/StyledColumnState';
+import { CellColorRange, NumericStyledColumn } from '../../AdaptableState/StyledColumns/Common/NumericStyledColumn';
+import { GradientStyle } from '../../AdaptableState/StyledColumns/GradientStyle';
 import { AdaptableApi } from '../../Api/AdaptableApi';
 /**
  * Default alpha at the **low** end of a Gradient range when `MinAlpha` is unset.

package/src/Utilities/Helpers/StyledColumnGradientHelper.js

@@ -1,6 +1,6 @@
 import tinycolor from 'tinycolor2';
 import { convertAdaptableStyleToCSS } from './StyleHelper';
-import { getVariableColor } from './StyleHelper';
+import { getAutoContrastTextColor, getVariableColor } from './StyleHelper';
 import clamp from '../utils/clamp';
 /**
  * Default alpha at the **low** end of a Gradient range when `MinAlpha` is unset.
@@ -129,10 +129,11 @@ const getZeroCentredGradientPreviewCellStyle = (cellValue, gradientStyle) => {
     }
     const alpha = Number((lo + t * (hi - lo)).toPrecision(4));
     let style = {};
-    const bg = tinycolor(getVariableColor(matchingRange.Color)).setAlpha(alpha);
+    const preparedColor = getVariableColor(matchingRange.Color);
+    const bg = tinycolor(preparedColor).setAlpha(alpha);
     style.backgroundColor = bg.toRgbString();
     if (gradientStyle.AutoContrastText) {
-        style.color = bg.getLuminance() > 0.45 ? '#111111' : '#ffffff';
+        style.color = getAutoContrastTextColor(preparedColor, alpha);
     }
     const autoContrastColor = gradientStyle.AutoContrastText && style.color ? style.color : undefined;
     if (gradientStyle.Font) {
@@ -194,10 +195,11 @@ export const getGradientPreviewCellStyle = (cellValue, styledColumn, api, rowNod
     }
     const alpha = Number((lo + t * (hi - lo)).toPrecision(4));
     if (cellBackColor) {
-        const bg = tinycolor(getVariableColor(cellBackColor)).setAlpha(alpha);
+        const preparedColor = getVariableColor(cellBackColor);
+        const bg = tinycolor(preparedColor).setAlpha(alpha);
         style.backgroundColor = bg.toRgbString();
         if (gradientStyle.AutoContrastText) {
-            style.color = bg.getLuminance() > 0.45 ? '#111111' : '#ffffff';
+            style.color = getAutoContrastTextColor(preparedColor, alpha);
         }
     }
     const autoContrastColor = gradientStyle.AutoContrastText && style.color ? style.color : undefined;

package/src/Utilities/Helpers/barChartCellText.d.ts

@@ -0,0 +1,63 @@
+import { BarChartCellTextHorizontalAlignment, BarChartCellTextLayout, BarChartCellTextPlacement, BarChartCellTextProperties, BarChartCellTextVerticalAlignment } from '../../AdaptableState/StyledColumns/Common/BarChartCellText';
+import { CellTextOption, CellTextOptions } from '../../AdaptableState/StyledColumns/Common/CellTextOptions';
+export type BarChartCellTextLabels = {
+    cellValue?: string;
+    percentage?: string;
+};
+export declare const resolveBarChartCellTextLayout: (props: BarChartCellTextProperties | undefined) => BarChartCellTextLayout;
+/** True when any value is configured for display. */
+export declare const hasBarChartCellTextConfigured: (props: BarChartCellTextProperties | undefined) => boolean;
+/** Set of value tokens that currently have a placement. */
+export declare const getActiveBarChartCellTextTokens: (props: BarChartCellTextProperties | undefined) => CellTextOptions;
+export declare const mergeBarChartCellTextProperties: (current: BarChartCellTextProperties | undefined, patch: Partial<BarChartCellTextProperties>) => BarChartCellTextProperties | undefined;
+/**
+ * Set or clear a value's placement. Passing `placement: undefined` removes the value.
+ */
+export declare const setBarChartCellTextPlacement: (current: BarChartCellTextProperties | undefined, token: CellTextOption, placement: BarChartCellTextPlacement | undefined) => BarChartCellTextProperties | undefined;
+/**
+ * Patch a single axis of a value's placement (creating the value with defaults if
+ * needed). Used by the wizard's placement pickers.
+ */
+export declare const patchBarChartCellTextPlacement: (current: BarChartCellTextProperties | undefined, token: CellTextOption, patch: Partial<BarChartCellTextPlacement>) => BarChartCellTextProperties | undefined;
+/**
+ * Toggle whether a value is displayed. When turning on a previously-hidden
+ * value we use the default placement (Left / Below).
+ */
+export declare const toggleBarChartCellTextToken: (current: BarChartCellTextProperties | undefined, token: CellTextOption, show: boolean) => {
+    CellTextProperties: BarChartCellTextProperties | undefined;
+};
+export declare const buildBarChartCellTextLabels: (props: BarChartCellTextProperties | undefined, cellValueLabel: string | undefined, percentageLabel: string | undefined) => BarChartCellTextLabels;
+export declare const hasBarChartCellTextLabels: (labels: BarChartCellTextLabels) => boolean;
+/** Join active labels with a space, Cell Value first then Percent Value. */
+export declare const joinBarChartCellTextLabels: (labels: BarChartCellTextLabels) => string;
+export type BarChartCellTextSlotEntry = {
+    vertical: BarChartCellTextVerticalAlignment;
+    horizontal: BarChartCellTextHorizontalAlignment;
+    /** Labels in render order (Cell Value first, then Percent Value). */
+    parts: string[];
+    /** The joined text, ready to render. */
+    text: string;
+};
+/**
+ * Resolve which placements are populated and what text goes in each cell of
+ * the 3 × 3 grid. Empty slots are omitted. Two values landing on the same
+ * (vertical, horizontal) slot are concatenated with a single space, Cell
+ * Value before Percent Value.
+ */
+export declare const resolveBarChartCellTextSlots: (props: BarChartCellTextProperties | undefined, labels: BarChartCellTextLabels) => BarChartCellTextSlotEntry[];
+export type BarChartCellTextSlotPresence = {
+    hasAbove: boolean;
+    hasBelow: boolean;
+    hasMerged: boolean;
+};
+export declare const getBarChartCellTextSlotPresence: (props: BarChartCellTextProperties | undefined) => BarChartCellTextSlotPresence;
+export declare const formatBarChartCellTextLayoutSummary: (layout: BarChartCellTextLayout) => string | undefined;
+export type MountBarChartCellTextArgs = {
+    wrapperEl: HTMLElement;
+    mergedOverlayEl?: HTMLElement;
+    textClassName: string;
+    cellTextProperties?: BarChartCellTextProperties;
+    labels: BarChartCellTextLabels;
+    mergedPointerEventsNone?: boolean;
+};
+export declare const mountBarChartCellText: (args: MountBarChartCellTextArgs) => void;