@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.0

package/src/View/StyledColumn/Wizard/StyledColumnWizard.js

@@ -1,39 +1,82 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { OnePageAdaptableWizard, OnePageWizardSummary, } from '../../Wizard/OnePageAdaptableWizard';
 import ObjectFactory from '../../../Utilities/ObjectFactory';
 import * as StyledColumnRedux from '../../../Redux/ActionsReducers/StyledColumnRedux';
-import { renderStyledColumnTypeSummary, StyledColumnWizardTypeSection, } from './StyledColumnWizardTypeSection';
-import { isValidStyledColumnColumn, renderStyledColumnColumnSummary, StyledColumnWizardColumnSection, } from './StyledColumnWizardColumnSection';
-import { renderStyledColumnStyleSummary, StyledColumnWizardStyleSection, } from './StyledColumnWizardStyleSection';
+import { getStyledColumnWizardTitle, renderStyledColumnSettingsSummary, StyledColumnWizardTypeSection, } from './StyledColumnWizardTypeSection';
+import { isValidStyledColumnScope, renderStyledColumnScopeSummary, StyledColumnWizardScopeSection, } from './StyledColumnWizardScopeSection';
+import { renderStyledColumnRangesSummary, renderStyledColumnStyleSummary, StyledColumnWizardRangesSection, StyledColumnWizardStyleSection, } from './StyledColumnWizardStyleSection';
+import { renderStyledColumnGradientStyleSummary, StyledColumnWizardGradientSection, } from './StyledColumnWizardGradientSection';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
-import { renderStyledColumnBadgeRowsSummary, StyledColumnBadgeRowsSection, } from './StyledColumnBadgeRowsSection';
-import { StyledColumnSparklineSettingsSection } from './StyledColumnSparklineSettingsSection';
+import { isValidSparklineSettings, renderSparklineSummary, StyledColumnSparklineSettingsSection, } from './StyledColumnSparklineSettingsSection';
+import { renderStyledColumnBulletRangesSummary, renderStyledColumnBulletStyleSummary, StyledColumnWizardBulletSection, } from './StyledColumnWizardBulletSection';
+import { isValidRatingStyle, renderStyledColumnRatingSummary, StyledColumnWizardRatingSection, } from './StyledColumnWizardRatingSection';
+import { isValidRangeBarBounds, renderStyledColumnRangeBarDisplayStepSummary, renderStyledColumnRangeBarRangeStepSummary, StyledColumnWizardRangeBarSection, } from './StyledColumnWizardRangeBarSection';
+import { isValidIconStyleMappings, renderStyledColumnIconStyleSummary, renderStyledColumnIconMappingsSummary, StyledColumnWizardIconSection, } from './StyledColumnWizardIconSection';
 import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
-import { renderBadgeSummary, StyledColumnBadgeSection } from './StyledColumnBadgeSection';
+import { renderBadgeStyleSummary, renderBadgeSummary, StyledColumnBadgeStyleSection, StyledColumnBadgeSection, } from './StyledColumnBadgeSection';
 import { Box } from '../../../components/Flex';
+/**
+ * Mirrors the migration default in `VersionUpgrade23.patchStyledColumnName` and
+ * the auto-fill logic in `StyledColumnWizardTypeSection` so users opening the
+ * wizard immediately see a sensible Name (e.g. `Badge-tradeId`).
+ */
+const computeDefaultStyledColumnName = (sc) => {
+    let typeKey = '';
+    if (sc.GradientStyle)
+        typeKey = 'Gradient';
+    else if (sc.PercentBarStyle)
+        typeKey = 'PercentBar';
+    else if (sc.SparklineStyle)
+        typeKey = 'Sparkline';
+    else if (sc.BadgeStyle)
+        typeKey = 'Badge';
+    else if (sc.BulletChartStyle)
+        typeKey = 'BulletChart';
+    else if (sc.RatingStyle)
+        typeKey = 'Rating';
+    else if (sc.RangeBarStyle)
+        typeKey = 'RangeBar';
+    else if (sc.IconStyle)
+        typeKey = 'Icon';
+    if (!typeKey) {
+        return '';
+    }
+    return `${typeKey}-${sc.ColumnId || 'column'}`;
+};
 export const StyledColumnWizard = (props) => {
     const data = props.data ?? props.popupParams?.value;
     const popupDefaultCurrentSectionName = props?.popupParams?.config?.defaultCurrentSectionName ?? undefined;
     const defaultCurrentSectionName = props.defaultCurrentSectionName ?? popupDefaultCurrentSectionName;
+    const allStyledColumns = useSelector((state) => state.StyledColumn?.StyledColumns ?? []);
     const [styledColumn, setStyledColumn] = useState(() => {
         if (data) {
-            return cloneObject(data);
+            const cloned = cloneObject(data);
+            // For *Edit* (existing object loaded from state) we fall back to the
+            // migration default if the Name is somehow missing. For *New* we leave
+            // the Name blank so the user enters one themselves — same pattern as
+            // Format Column / Alert / Custom Sort etc.
+            const isNew = props.popupParams?.action === 'New';
+            if (!isNew && !cloned.Name) {
+                cloned.Name = computeDefaultStyledColumnName(cloned);
+            }
+            return cloned;
         }
         const newData = ObjectFactory.CreateEmptyStyledColumn();
-        newData.GradientStyle = {};
+        // Default new Styled Columns to a Badge — applicable to every data type
+        // and the most-used styled column overall, so it makes a sensible
+        // initial pick in the Type wizard step.
+        newData.BadgeStyle = {
+            Badges: [ObjectFactory.CreateDefaultStyledColumnBadge()],
+        };
         if (props.popupParams?.column && props.popupParams?.action === 'New') {
             newData.ColumnId = props.popupParams.column.columnId;
-            if (props.popupParams.column.dataType === 'text') {
-                newData.BadgeStyle = {
-                    Badges: [ObjectFactory.CreateDefaultStyledColumnBadge()],
-                };
-                delete newData.GradientStyle;
-            }
-            else if (props.popupParams.column.dataType.includes('Array')) {
+            // For numeric-array columns the natural pick is a Sparkline; flip the
+            // default rather than open a Badge over an array column.
+            if (props.popupParams.column.dataType.includes('Array')) {
                 newData.SparklineStyle = {};
-                delete newData.GradientStyle;
+                delete newData.BadgeStyle;
             }
         }
         return newData;
@@ -51,51 +94,126 @@ export const StyledColumnWizard = (props) => {
     const specificSteps = [];
     if (styledColumn.SparklineStyle) {
         specificSteps.push({
-            title: 'Settings',
-            render: () => (React.createElement(Box, { className: "twa:p-2" },
-                React.createElement(StyledColumnSparklineSettingsSection, { onChange: setStyledColumn }))),
+            title: 'Style',
+            details: 'Configure the Sparkline chart type, theming, axis and tooltip',
+            isValid: () => isValidSparklineSettings(styledColumn),
+            renderSummary: () => renderSparklineSummary(styledColumn),
+            render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnSparklineSettingsSection, { onChange: setStyledColumn }) })),
         });
     }
     else if (styledColumn.GradientStyle || styledColumn.PercentBarStyle) {
         specificSteps.push({
-            details: 'Create the Style to apply',
-            renderSummary: renderStyledColumnStyleSummary,
-            render: () => {
-                return (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(StyledColumnWizardStyleSection, { onChange: setStyledColumn })));
-            },
-            title: 'Style',
+            details: 'Define the Cell Ranges or a Column Comparison',
+            renderSummary: renderStyledColumnRangesSummary,
+            render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardRangesSection, { onChange: setStyledColumn }) })),
+            title: 'Ranges',
             isValid: () => {
                 const columnComparison = styledColumn.GradientStyle?.ColumnComparison ??
                     styledColumn.PercentBarStyle?.ColumnComparison;
-                return columnComparison
-                    ? columnComparison.MaxValue == undefined && columnComparison.MinValue == undefined
+                if (columnComparison) {
+                    return columnComparison.MaxValue == undefined && columnComparison.MinValue == undefined
                         ? 'Define Min and Max Values for the Column Comparison'
                         : columnComparison.MaxValue == undefined
                             ? 'Define a Max Value for the Column Comparison'
                             : columnComparison.MinValue == undefined
                                 ? 'Define a Min Value for the Column Comparison'
-                                : true
-                    : true;
+                                : true;
+                }
+                const gs = styledColumn.GradientStyle;
+                if (gs) {
+                    const hasCellRanges = !!gs.CellRanges?.length;
+                    const hasZeroCentred = !!gs.ZeroCentred;
+                    if (!hasCellRanges && !hasZeroCentred) {
+                        return 'Define cell ranges, zero-centred colours, or a column comparison';
+                    }
+                }
+                return true;
             },
+        });
+        if (styledColumn.PercentBarStyle) {
+            specificSteps.push({
+                details: 'Configure the Percent Bar appearance',
+                renderSummary: renderStyledColumnStyleSummary,
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardStyleSection, { onChange: setStyledColumn }) })),
+                title: 'Style',
+            });
+        }
+        if (styledColumn.GradientStyle) {
+            specificSteps.push({
+                details: 'Set Transparency, Auto Contrast, Tooltip and Font properties',
+                renderSummary: renderStyledColumnGradientStyleSummary,
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardGradientSection, { onChange: setStyledColumn }) })),
+                title: 'Style',
+            });
         }
-        // Only available for Badge
-        // AdditionalSettingSection
-        );
     }
-    else if (styledColumn.BadgeStyle) {
+    else if (styledColumn.BulletChartStyle) {
         specificSteps.push({
-            details: 'Select the Rows where the Badge will be applied',
-            renderSummary: renderStyledColumnBadgeRowsSummary,
-            render: () => {
-                return (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(StyledColumnBadgeRowsSection, { onChange: setStyledColumn })));
+            title: 'Ranges',
+            details: 'Create Cell Ranges',
+            renderSummary: () => renderStyledColumnBulletRangesSummary(styledColumn),
+            render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardBulletSection, { variant: "ranges", onChange: setStyledColumn }) })),
+            isValid: () => {
+                const bs = styledColumn.BulletChartStyle;
+                if (!bs?.CellRanges?.length) {
+                    return 'Define at least one band for the qualitative scale';
+                }
+                return true;
             },
-            title: 'Rows',
         });
+        specificSteps.push({
+            title: 'Style',
+            details: 'Target, bar appearance, cell text, tooltip, background and font',
+            renderSummary: () => renderStyledColumnBulletStyleSummary(styledColumn),
+            render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardBulletSection, { variant: "style", onChange: setStyledColumn }) })),
+            isValid: () => true,
+        });
+    }
+    else if (styledColumn.RatingStyle) {
+        specificSteps.push({
+            title: 'Style',
+            details: 'Configure the Icon, Text and Cell styles',
+            isValid: () => isValidRatingStyle(styledColumn),
+            renderSummary: () => renderStyledColumnRatingSummary(styledColumn),
+            render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardRatingSection, { onChange: setStyledColumn }) })),
+        });
+    }
+    else if (styledColumn.RangeBarStyle) {
+        specificSteps.push({
+            title: 'Style',
+            details: 'Set Bounds and optional Ranges',
+            isValid: () => isValidRangeBarBounds(styledColumn),
+            renderSummary: () => renderStyledColumnRangeBarRangeStepSummary(styledColumn),
+            render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardRangeBarSection, { variant: "range", onChange: setStyledColumn }) })),
+        });
+        specificSteps.push({
+            title: 'Display',
+            details: 'Markers, track, out-of-range behaviour, cell text and tooltip',
+            isValid: () => true,
+            renderSummary: () => renderStyledColumnRangeBarDisplayStepSummary(styledColumn),
+            render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardRangeBarSection, { variant: "appearance", onChange: setStyledColumn }) })),
+        });
+    }
+    else if (styledColumn.IconStyle) {
+        specificSteps.push({
+            title: 'Mappings',
+            details: 'Select a preset or define key → icon mappings',
+            isValid: () => isValidIconStyleMappings(styledColumn),
+            renderSummary: () => renderStyledColumnIconMappingsSummary(styledColumn),
+            render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardIconSection, { variant: "mappings", onChange: setStyledColumn }) })),
+        });
+        specificSteps.push({
+            title: 'Style',
+            details: 'Set Styles for sizing, cell text, tooltips, font and cell',
+            isValid: () => true,
+            renderSummary: () => renderStyledColumnIconStyleSummary(styledColumn),
+            render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardIconSection, { variant: "style", onChange: setStyledColumn }) })),
+        });
+    }
+    else if (styledColumn.BadgeStyle) {
         specificSteps.push({
             title: 'Badges',
-            details: 'Create Badge Styles',
+            details: 'Create Badge(s) and apply Styles',
             isValid: () => {
                 if (styledColumn.BadgeStyle.Badges?.length === 0) {
                     return 'Define at least one Badge';
@@ -107,36 +225,53 @@ export const StyledColumnWizard = (props) => {
                 return true;
             },
             renderSummary: () => renderBadgeSummary(styledColumn),
-            render: () => (React.createElement(Box, { className: "twa:p-2" },
-                React.createElement(StyledColumnBadgeSection, { onChange: setStyledColumn }))),
+            render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnBadgeSection, { onChange: setStyledColumn }) })),
+        });
+        specificSteps.push({
+            title: 'Style',
+            details: 'Set Cell Density and Cell Style',
+            renderSummary: () => renderBadgeStyleSummary(styledColumn),
+            render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnBadgeStyleSection, { onChange: setStyledColumn }) })),
         });
     }
-    return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: styledColumn, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
+    return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: defaultCurrentSectionName, moduleInfo: props.moduleInfo, 
+        // Display the picked type in the header (e.g. "Gradient Column",
+        // "Percent Bar Column") so the user always knows which kind of
+        // column they're configuring. Falls back to "Styled Column"
+        // before a type has been selected.
+        moduleName: getStyledColumnWizardTitle(styledColumn), data: styledColumn, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
             {
-                details: 'Select a Styled Column type',
-                renderSummary: renderStyledColumnTypeSummary,
+                details: 'Enter a Name and select a Styled Column Type',
+                isValid: (data) => {
+                    if (!data.Name) {
+                        return 'Styled Column Name cannot be blank';
+                    }
+                    if (allStyledColumns.some((sc) => sc.Name === data.Name && sc.Uuid !== data.Uuid)) {
+                        return 'A Styled Column already exists with that name';
+                    }
+                    return true;
+                },
+                renderSummary: renderStyledColumnSettingsSummary,
                 render: () => {
-                    return React.createElement(StyledColumnWizardTypeSection, { onChange: setStyledColumn });
+                    return _jsx(StyledColumnWizardTypeSection, { onChange: setStyledColumn });
                 },
-                title: 'Type',
+                title: 'Settings',
             },
             {
-                isValid: isValidStyledColumnColumn,
-                renderSummary: renderStyledColumnColumnSummary,
-                details: 'Select the Column where the Style will be applied',
+                isValid: isValidStyledColumnScope,
+                renderSummary: renderStyledColumnScopeSummary,
+                details: 'Select the Column and Rows where Style should render',
                 render: () => {
-                    return (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
-                        React.createElement(StyledColumnWizardColumnSection, { isNew: props.isNew, onChange: setStyledColumn })));
+                    return (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(StyledColumnWizardScopeSection, { isNew: props.isNew, onChange: setStyledColumn }) }));
                 },
-                title: 'Column',
+                title: 'Scope',
             },
             ...specificSteps,
             {
                 details: 'Select Format Column Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(ObjectTagsWizardSection, { onChange: setStyledColumn }))),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(ObjectTagsWizardSection, { onChange: setStyledColumn }) })),
                 renderSummary: renderObjectTagsSummary,
             },
             '-',
@@ -144,8 +279,7 @@ export const StyledColumnWizard = (props) => {
                 title: 'Summary',
                 details: 'Review your Styled Column',
                 render: () => {
-                    return (React.createElement(Box, { className: "twa:p-2" },
-                        React.createElement(OnePageWizardSummary, null)));
+                    return (_jsx(Box, { className: "twa:p-2", children: _jsx(OnePageWizardSummary, {}) }));
                 },
             },
         ] }));

package/src/View/StyledColumn/Wizard/StyledColumnWizardBulletSection.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { StyledColumn } from '../../../AdaptableState/StyledColumnState';
+/** Wizard / list-view summary for the Ranges step (qualitative bands). */
+export declare const renderStyledColumnBulletRangesSummary: (data: StyledColumn) => React.JSX.Element;
+/** Wizard / list-view summary for the Style step (target, bar, text, font). */
+export declare const renderStyledColumnBulletStyleSummary: (data: StyledColumn) => React.JSX.Element;
+/** Full combined summary (ranges + style); kept for callers that expect one block. */
+export declare const renderStyledColumnBulletSummary: (data: StyledColumn) => React.JSX.Element;
+export interface StyledColumnWizardBulletSectionProps {
+    onChange: (styledColumn: StyledColumn) => void;
+    /** `ranges` — bands only. `style` — target, bar, text, font (default). */
+    variant?: 'ranges' | 'style';
+}
+export declare const StyledColumnWizardBulletSection: React.FunctionComponent<StyledColumnWizardBulletSectionProps>;