@adaptabletools/adaptable 13.0.10 → 13.1.0-canary.0

package/src/Strategy/ChartingModule.js

@@ -4,12 +4,109 @@ exports.ChartingModule = void 0;
 const tslib_1 = require("tslib");
 const AdaptableModuleBase_1 = require("./AdaptableModuleBase");
 const ModuleConstants = tslib_1.__importStar(require("../Utilities/Constants/ModuleConstants"));
+const ShowChartButton_1 = require("../View/Components/Charting/ShowChartButton");
+const ChartingWizard_1 = require("../View/Components/Charting/ChartingWizard/ChartingWizard");
+const ChartingRedux = tslib_1.__importStar(require("../Redux/ActionsReducers/ChartingRedux"));
+const ChartingStatusBarPopover_1 = require("../View/Components/Charting/ChartingStatusBarPopover");
 class ChartingModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     constructor(api) {
         super(ModuleConstants.ChartingModuleId, ModuleConstants.ChartingFriendlyName, 'chart', 'ChartPopup', 'Create AG Grid Charts in order to see Adaptable Data visually', api);
     }
+    updateOldConfig() {
+        const allChartDefinitions = this.getModuleAdaptableObjects();
+        const chartDefinitionsToUpdate = allChartDefinitions
+            .filter((chartDefinition) => 'model' in chartDefinition || !('Name' in chartDefinition))
+            .map((charDefinition) => {
+            const newChartDefinition = Object.assign({}, charDefinition);
+            if ('model' in newChartDefinition) {
+                newChartDefinition.Model = charDefinition.model;
+                delete newChartDefinition.model;
+            }
+            if (!('Name' in newChartDefinition)) {
+                // default to chartId
+                newChartDefinition.Name = newChartDefinition.Model.chartId;
+            }
+            return newChartDefinition;
+        });
+        if (chartDefinitionsToUpdate.length > 0) {
+            chartDefinitionsToUpdate.forEach((chartDefinition) => this.api.chartingApi.editChartDefinition(chartDefinition));
+        }
+    }
     isModuleAvailable() {
         return this.api.chartingApi.isChartingEnabled() && super.isModuleAvailable();
+        // return false;
+    }
+    getModuleAdaptableObjects() {
+        return this.api.chartingApi.getAllChartDefinitions();
+    }
+    toViewAll() {
+        return this.getModuleAdaptableObjects().map((layout) => this.toView(layout));
+    }
+    toView(chart) {
+        var _a;
+        return {
+            items: [
+                {
+                    name: 'Name',
+                    values: [chart.Name],
+                },
+                {
+                    name: 'About',
+                    values: [
+                        `Chart Type: ${chart.Model.chartType}`,
+                        chart.Model.aggFunc && `Aggregation Function: ${chart.Model.aggFunc}`,
+                    ].filter(Boolean),
+                },
+                {
+                    name: 'Settings',
+                    values: [
+                        `Unlink from data: ${chart.Model.unlinkChart ? 'Yes' : 'No'}`,
+                        `Suppress Chart Ranges: ${chart.Model.suppressChartRanges ? 'Yes' : 'No'}`,
+                    ],
+                },
+                {
+                    name: 'Range',
+                    values: [
+                        `Row start index: ${chart.Model.cellRange.rowStartIndex}`,
+                        `Row end index: ${chart.Model.cellRange.rowEndIndex}`,
+                        chart.Model.cellRange.columnStart &&
+                            `Column start: ${typeof chart.Model.cellRange.columnStart === 'string'
+                                ? chart.Model.cellRange.columnStart
+                                : chart.Model.cellRange.columnStart.getColId()}`,
+                        chart.Model.cellRange.columnEnd &&
+                            `Column start: ${typeof chart.Model.cellRange.columnEnd === 'string'
+                                ? chart.Model.cellRange.columnEnd
+                                : chart.Model.cellRange.columnEnd.getColId()}`,
+                        ((_a = chart.Model.cellRange.columns) === null || _a === void 0 ? void 0 : _a.length) &&
+                            `Columns ${chart.Model.cellRange.columns
+                                .map((column) => (typeof column === 'string' ? column : column.getColId()))
+                                .join(', ')}`,
+                    ].filter(Boolean),
+                },
+            ].filter(Boolean),
+            abObject: chart,
+        };
+    }
+    getViewProperties() {
+        return {
+            actions: [ShowChartButton_1.ShowChartButton],
+            getEditWizard: () => ChartingWizard_1.ChartingWizard,
+            // not sure if charts should be created via adaptable wizard
+            hideNewButton: true,
+            getDeleteAction: (chartDefinition) => {
+                return ChartingRedux.ChartingDeleteChart(chartDefinition.Name);
+            },
+            emptyView: 'To create a chart select a few cells and right click. Then select "Chart Range" from the context menu.',
+            getStatusBarPanelProps: () => {
+                const chartDefinitions = this.getModuleAdaptableObjects();
+                const popover = chartDefinitions.length > 0 ? ChartingStatusBarPopover_1.ChartingStatusBarPopover : null;
+                const content = popover ? 'See Charts' : 'No Charts';
+                return {
+                    content,
+                    popover,
+                };
+            },
+        };
     }
 }
 exports.ChartingModule = ChartingModule;

package/src/Strategy/FlashingCellModule.js

@@ -94,7 +94,9 @@ class FlashingCellModule extends AdaptableModuleBase_1.AdaptableModuleBase {
             if (menuContext.adaptableColumn && menuContext.rowNode) {
                 const flashingCellForRow = this.api.internalApi.getAdaptableFlashingCellFor(menuContext.primaryKeyValue);
                 const flashingCellForCell = this.api.internalApi.getAdaptableFlashingCellFor(menuContext.primaryKeyValue, menuContext.adaptableColumn.columnId);
-                if (flashingCellForRow && flashingCellForRow.flashTarget === 'row') {
+                if (flashingCellForRow &&
+                    (flashingCellForRow.flashTarget === 'row' ||
+                        flashingCellForRow.flashTarget.includes('row'))) {
                     items.push(this.createColumnMenuItemReduxAction('Clear Flashing Row', this.moduleInfo.Glyph, SystemRedux.SystemFlashingCellDelete(flashingCellForRow)));
                 }
                 else if (flashingCellForCell && flashingCellForCell.flashTarget === 'cell') {

package/src/Strategy/Interface/IModule.d.ts

@@ -103,6 +103,7 @@ export interface AdaptableModuleView {
         module: IModule;
     }>> | string;
     newTooltipText?: string;
+    hideNewButton?: boolean;
     /**
      * Specifieds the types of objects the module manages.
      * When specified the new button will have these options.

package/src/Strategy/LayoutModule.js

@@ -425,7 +425,7 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
             .getModuleService()
             .getModuleById('Schedule')
             .setUpScheduleJobs();
-        // ConditionalStyle, CustomSort, FlashingCell, FormatColumn
+        // CustomSort, FlashingCell, FormatColumn
         // we need to refresh the column defs, as some configs may have changed
         this.api.internalApi.getAdaptableInstance().setupColumns();
     }

package/src/Strategy/StyledColumnModule.js

@@ -94,9 +94,6 @@ class StyledColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
             }
             if (column.dataType == 'Boolean' && !this.api.columnApi.isFreeTextColumn(column.columnId)) {
                 let styledColumn = this.api.styledColumnApi.getStyledColumnByColumnId(column.columnId);
-                if (!styledColumn) {
-                    styledColumn = Object.assign(Object.assign({}, ObjectFactory_1.default.CreateEmptyStyledColumn()), { ColumnId: column.columnId, CheckBoxStyle: true });
-                }
                 const hasCheckBox = styledColumn && (styledColumn === null || styledColumn === void 0 ? void 0 : styledColumn.CheckBoxStyle);
                 if (hasCheckBox) {
                     returnColumnMenuItems.push(this.createColumnMenuItemClickFunction('Remove Checkbox', 'unchecked', () => {

package/src/Utilities/Defaults/DefaultAdaptableOptions.js

@@ -100,16 +100,18 @@ exports.DefaultAdaptableOptions = {
     actionOptions: {
         actionColumns: undefined,
         actionRowButtons: undefined,
-        actionRowButtonCustomConfiguration: undefined,
-        actionRowButtonsPosition: 'pinnedLeft',
-        autoHandleActionRowButtons: true,
-        setPrimaryKeyValue: undefined,
-        actionRowFormOptions: {
-            formTitle: undefined,
-            formDescription: undefined,
-            formFieldLabel: undefined,
-            formButtons: undefined,
-            onFormSubmit: undefined,
+        actionRowButtonOptions: {
+            customConfiguration: undefined,
+            position: 'pinnedLeft',
+            autoHandle: true,
+            setPrimaryKeyValue: undefined,
+            actionRowFormOptions: {
+                formTitle: undefined,
+                formDescription: undefined,
+                formFieldLabel: undefined,
+                formButtons: undefined,
+                onFormSubmit: undefined,
+            },
         },
     },
     editOptions: {
@@ -272,4 +274,7 @@ exports.DefaultAdaptableOptions = {
         alwaysShowInDashboard: false,
         alwaysShowInToolPanel: false,
     },
+    chartingOptions: {
+        saveStrategy: 'manual',
+    },
 };

package/src/Utilities/Defaults/DefaultSettingsPanel.js

@@ -40,4 +40,5 @@ exports.DEFAULT_NAVIGATION_ITEMS = [
     'Schedule',
     'StateManagement',
     'TeamSharing',
+    'Charting',
 ];

package/src/Utilities/ExpressionFunctions/scalarExpressionFunctions.js

@@ -114,7 +114,7 @@ exports.scalarExpressionFunctions = {
             if (!column.queryable) {
                 throw new ExpressionEvaluationError_1.ExpressionEvaluationError('COL', `Column name "${columnId}" is not queryable`);
             }
-            return (_b = context.adaptableApi) === null || _b === void 0 ? void 0 : _b.gridApi.getRawValueFromRowNode(context.node, columnId);
+            return (_b = context.adaptableApi) === null || _b === void 0 ? void 0 : _b.gridApi.getNormalisedValueFromRowNode(context.node, columnId);
         },
         description: 'Returns the value of a column',
         signatures: ['[colName]', 'COL(name: string)'],

package/src/Utilities/Helpers/AdaptableHelper.js

@@ -24,7 +24,9 @@ function assignAdaptableOptions(adaptableOptions) {
     returnedAdaptableOptions.dashboardOptions = Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.dashboardOptions, adaptableOptions.dashboardOptions);
     returnedAdaptableOptions.editOptions = Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.editOptions, adaptableOptions.editOptions);
     returnedAdaptableOptions.actionOptions = Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.actionOptions, adaptableOptions.actionOptions);
-    returnedAdaptableOptions.actionOptions.actionRowFormOptions = Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.actionOptions.actionRowFormOptions, returnedAdaptableOptions.actionOptions.actionRowFormOptions);
+    returnedAdaptableOptions.actionOptions.actionRowButtonOptions = Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.actionOptions.actionRowButtonOptions, returnedAdaptableOptions.actionOptions.actionRowButtonOptions);
+    returnedAdaptableOptions.actionOptions.actionRowButtonOptions.actionRowFormOptions =
+        Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.actionOptions.actionRowButtonOptions.actionRowFormOptions, returnedAdaptableOptions.actionOptions.actionRowButtonOptions.actionRowFormOptions);
     returnedAdaptableOptions.containerOptions = Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.containerOptions, adaptableOptions.containerOptions);
     returnedAdaptableOptions.generalOptions = Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.generalOptions, adaptableOptions.generalOptions);
     returnedAdaptableOptions.searchOptions = Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.searchOptions, adaptableOptions.searchOptions);

package/src/Utilities/ObjectFactory.d.ts

@@ -8,7 +8,6 @@ import { Report, ReportSchedule } from '../PredefinedConfig/ExportState';
 import { AdaptableColumn } from '../PredefinedConfig/Common/AdaptableColumn';
 import { BaseSchedule, Schedule } from '../PredefinedConfig/Common/Schedule';
 import { Shortcut } from '../PredefinedConfig/ShortcutState';
-import { ConditionalStyle } from '../PredefinedConfig/ConditionalStyleState';
 import { FormatColumn } from '../PredefinedConfig/FormatColumnState';
 import { FreeTextColumn } from '../PredefinedConfig/FreeTextColumnState';
 import { AdaptableStyle } from '../PredefinedConfig/Common/AdaptableStyle';
@@ -24,7 +23,7 @@ import { AdaptableMessageType } from '../PredefinedConfig/Common/AdaptableMessag
 import { SystemStatusMessageInfo } from '../PredefinedConfig/Common/SystemStatusMessageInfo';
 import { NotificationsOptions } from '../AdaptableOptions/NotificationsOptions';
 import { CellSummmary } from '../PredefinedConfig/Common/CellSummary';
-import { ColumnFilter, CustomDisplayFormatterContext, FlashingCellDefinition, GridDataChangedInfo, SystemFilterPredicateId } from '../types';
+import { ChartDefinition, ColumnFilter, CustomDisplayFormatterContext, FlashingCellDefinition, GridDataChangedInfo, SystemFilterPredicateId } from '../types';
 import { RowNode } from '@ag-grid-community/core';
 import { AdaptableApi } from '../../types';
 import { ToastOptions } from '../components/Toastify';
@@ -55,7 +54,6 @@ export declare function CreateGlue42Schedule(glue42Report: Glue42Report): Glue42
 export declare function CreateReportSchedule(reportName: string): ReportSchedule;
 export declare function CreateEmptySchedule(): Schedule;
 export declare function CreateEmptyShortcut(): Shortcut;
-export declare function CreateEmptyConditionalStyle(): ConditionalStyle;
 export declare function CreateEmptyFormatColumn(): FormatColumn;
 export declare function CreateEmptyFreeTextColumn(): FreeTextColumn;
 export declare function CreateEmptyLayout(layout?: Partial<Layout> & {
@@ -66,10 +64,13 @@ export declare function CreateSystemStatusMessageInfo(message: string, type: Ada
 export declare function CreateEmptyCellSummmary(): CellSummmary;
 export declare function CreateColumnFilter(ColumnId: string, PredicateId: SystemFilterPredicateId, Inputs: any[]): ColumnFilter;
 export declare function CreateEmptyStyledColumn(): StyledColumn;
+export declare function CreateEmptyChartDefinition(chartDefinition?: ChartDefinition): ChartDefinition;
 export declare function CreateCustomDisplayFormatterContext(value: any, node: RowNode, abColumn: AdaptableColumn, api: AdaptableApi): CustomDisplayFormatterContext;
 export declare function CreateToastOptions(notificationsOptions: NotificationsOptions, { onClose, containerId }: {
     onClose?: VoidFunction;
     containerId: string;
+}, overides?: {
+    duration: number | 'always';
 }): ToastOptions;
 export declare const ObjectFactory: {
     CreateEmptyCustomSort: typeof CreateEmptyCustomSort;
@@ -96,7 +97,6 @@ export declare const ObjectFactory: {
     CreateEmptyOpenFinSchedule: typeof CreateEmptyOpenFinSchedule;
     CreateEmptySchedule: typeof CreateEmptySchedule;
     CreateEmptyShortcut: typeof CreateEmptyShortcut;
-    CreateEmptyConditionalStyle: typeof CreateEmptyConditionalStyle;
     CreateEmptyFormatColumn: typeof CreateEmptyFormatColumn;
     CreateEmptyFreeTextColumn: typeof CreateEmptyFreeTextColumn;
     CreateEmptyLayout: typeof CreateEmptyLayout;
@@ -109,5 +109,6 @@ export declare const ObjectFactory: {
     CreateToastOptions: typeof CreateToastOptions;
     CreateCustomDisplayFormatterContext: typeof CreateCustomDisplayFormatterContext;
     CreateEmptyStyledColumn: typeof CreateEmptyStyledColumn;
+    CreateEmptyChartDefinition: typeof CreateEmptyChartDefinition;
 };
 export default ObjectFactory;

package/src/Utilities/ObjectFactory.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ObjectFactory = exports.CreateToastOptions = exports.CreateCustomDisplayFormatterContext = exports.CreateEmptyStyledColumn = exports.CreateColumnFilter = exports.CreateEmptyCellSummmary = exports.CreateSystemStatusMessageInfo = exports.CreateEmptyStyle = exports.CreateEmptyLayout = exports.CreateEmptyFreeTextColumn = exports.CreateEmptyFormatColumn = exports.CreateEmptyConditionalStyle = exports.CreateEmptyShortcut = exports.CreateEmptySchedule = exports.CreateReportSchedule = exports.CreateGlue42Schedule = exports.CreateIPushPullSchedule = exports.CreateEmptyOpenFinSchedule = exports.CreateEmptyGlue42Schedule = exports.CreateEmptyIPushPullSchedule = exports.CreateEmptyOpenFinReport = exports.CreateEmptyGlue42Report = exports.CreateEmptyIPushPullReport = exports.CreateEmptyReportSchedule = exports.CreateEmptyReminderSchedule = exports.CreateEmptyBaseSchedule = exports.CreateServerReport = exports.CreateEmptyReport = exports.CreateInternalAlertDefinitionForMessages = exports.CreateEmptyFlashingCellDefinition = exports.CreateEmptyAlertDefinition = exports.CreateRowChangedAlert = exports.CreateCellChangedAlert = exports.CreateGenericAlert = exports.CreateEmptyPlusMinusNudge = exports.CreateEmptyNamedQuery = exports.CreateEmptyCalculatedColumn = exports.CreateEmptyCustomSort = void 0;
+exports.ObjectFactory = exports.CreateToastOptions = exports.CreateCustomDisplayFormatterContext = exports.CreateEmptyChartDefinition = exports.CreateEmptyStyledColumn = exports.CreateColumnFilter = exports.CreateEmptyCellSummmary = exports.CreateSystemStatusMessageInfo = exports.CreateEmptyStyle = exports.CreateEmptyLayout = exports.CreateEmptyFreeTextColumn = exports.CreateEmptyFormatColumn = exports.CreateEmptyShortcut = exports.CreateEmptySchedule = exports.CreateReportSchedule = exports.CreateGlue42Schedule = exports.CreateIPushPullSchedule = exports.CreateEmptyOpenFinSchedule = exports.CreateEmptyGlue42Schedule = exports.CreateEmptyIPushPullSchedule = exports.CreateEmptyOpenFinReport = exports.CreateEmptyGlue42Report = exports.CreateEmptyIPushPullReport = exports.CreateEmptyReportSchedule = exports.CreateEmptyReminderSchedule = exports.CreateEmptyBaseSchedule = exports.CreateServerReport = exports.CreateEmptyReport = exports.CreateInternalAlertDefinitionForMessages = exports.CreateEmptyFlashingCellDefinition = exports.CreateEmptyAlertDefinition = exports.CreateRowChangedAlert = exports.CreateCellChangedAlert = exports.CreateGenericAlert = exports.CreateEmptyPlusMinusNudge = exports.CreateEmptyNamedQuery = exports.CreateEmptyCalculatedColumn = exports.CreateEmptyCustomSort = void 0;
 const Enums_1 = require("../PredefinedConfig/Common/Enums");
 const GeneralConstants_1 = require("./Constants/GeneralConstants");
 const Uuid_1 = require("../PredefinedConfig/Uuid");
@@ -275,16 +275,6 @@ function CreateEmptyShortcut() {
     };
 }
 exports.CreateEmptyShortcut = CreateEmptyShortcut;
-function CreateEmptyConditionalStyle() {
-    return {
-        Uuid: (0, Uuid_1.createUuid)(),
-        Scope: undefined,
-        Rule: undefined,
-        Style: CreateEmptyStyle(),
-        IncludeGroupedRows: false,
-    };
-}
-exports.CreateEmptyConditionalStyle = CreateEmptyConditionalStyle;
 function CreateEmptyFormatColumn() {
     return {
         Scope: undefined,
@@ -374,6 +364,10 @@ function CreateEmptyStyledColumn() {
     };
 }
 exports.CreateEmptyStyledColumn = CreateEmptyStyledColumn;
+function CreateEmptyChartDefinition(chartDefinition) {
+    return Object.assign({ Uuid: (0, Uuid_1.createUuid)() }, chartDefinition);
+}
+exports.CreateEmptyChartDefinition = CreateEmptyChartDefinition;
 function CreateCustomDisplayFormatterContext(value, node, abColumn, api) {
     return {
         adaptableColumn: abColumn,
@@ -383,10 +377,11 @@ function CreateCustomDisplayFormatterContext(value, node, abColumn, api) {
     };
 }
 exports.CreateCustomDisplayFormatterContext = CreateCustomDisplayFormatterContext;
-function CreateToastOptions(notificationsOptions, { onClose, containerId }) {
+function CreateToastOptions(notificationsOptions, { onClose, containerId }, overides) {
+    var _a;
     const adaptableToastPosition = notificationsOptions.position;
     const position = getToastPosition(adaptableToastPosition);
-    const duration = notificationsOptions.duration;
+    const duration = (_a = overides.duration) !== null && _a !== void 0 ? _a : notificationsOptions.duration;
     const showProgressBar = notificationsOptions.showProgressBar;
     const closeWhenClicked = notificationsOptions.closeWhenClicked;
     const pauseWhenHovering = notificationsOptions.pauseWhenHovering;
@@ -461,7 +456,6 @@ exports.ObjectFactory = {
     CreateEmptyOpenFinSchedule,
     CreateEmptySchedule,
     CreateEmptyShortcut,
-    CreateEmptyConditionalStyle,
     CreateEmptyFormatColumn,
     CreateEmptyFreeTextColumn,
     CreateEmptyLayout,
@@ -474,5 +468,6 @@ exports.ObjectFactory = {
     CreateToastOptions,
     CreateCustomDisplayFormatterContext,
     CreateEmptyStyledColumn,
+    CreateEmptyChartDefinition,
 };
 exports.default = exports.ObjectFactory;

package/src/Utilities/Services/ChartingService.d.ts

@@ -0,0 +1,10 @@
+import { ChartModel } from '@ag-grid-community/core';
+import { AdaptableApi } from '../../types';
+import { IChartingService } from './Interface/IChartingService';
+export declare class ChartingService implements IChartingService {
+    private api;
+    constructor(api: AdaptableApi);
+    onChartModelChange(models: ChartModel[], eventType: string, params: any): void;
+    saveNewChart(chartModel: ChartModel): void;
+    destroy(): void;
+}

package/src/Utilities/Services/ChartingService.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChartingService = void 0;
+const tslib_1 = require("tslib");
+const core_1 = require("@ag-grid-community/core");
+const SystemRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/SystemRedux"));
+const ObjectFactory_1 = tslib_1.__importDefault(require("../ObjectFactory"));
+class ChartingService {
+    constructor(api) {
+        this.api = api;
+    }
+    onChartModelChange(models, eventType, params) {
+        const allChartDefinitions = this.api.chartingApi.getAllChartDefinitions();
+        const currentChartModel = models.find((model) => model.chartId === params.chartId);
+        const currentChartDefinition = allChartDefinitions.find((chartDefinition) => chartDefinition.Model.chartId === params.chartId);
+        switch (eventType) {
+            case core_1.Events.EVENT_CHART_CREATED:
+                const createParams = params;
+                if (allChartDefinitions.some((chartDefinition) => chartDefinition.Model.chartId === createParams.chartId)) {
+                    // chart already exists
+                }
+                else {
+                    const chartModel = models.find((model) => model.chartId === createParams.chartId);
+                    this.saveNewChart(chartModel);
+                }
+                break;
+            case core_1.Events.EVENT_CHART_OPTIONS_CHANGED:
+            case core_1.Events.EVENT_CHART_RANGE_SELECTION_CHANGED:
+                if (!currentChartDefinition) {
+                    // editing a non-saved chart
+                    break;
+                }
+                const updatedChartDefinition = Object.assign(Object.assign({}, currentChartDefinition), { Model: currentChartModel });
+                this.api.chartingApi.editChartDefinition(updatedChartDefinition);
+                break;
+        }
+        this.api.internalApi.dispatchReduxAction(SystemRedux.SystemChartingSetCurrentChartModels(models));
+    }
+    saveNewChart(chartModel) {
+        var _a, _b;
+        const chartingOptions = (_a = this.api.internalApi.getAdaptableOptions().chartingOptions) !== null && _a !== void 0 ? _a : {};
+        const saveStragegy = (_b = chartingOptions.saveStrategy) !== null && _b !== void 0 ? _b : 'manual';
+        if (saveStragegy === 'none') {
+            return;
+        }
+        if (saveStragegy === 'manual') {
+            const alert = {
+                alertType: 'generic',
+                header: 'Save chart',
+                message: 'Do you want to save this Chart?',
+                alertDefinition: Object.assign(Object.assign({}, ObjectFactory_1.default.CreateEmptyAlertDefinition()), { MessageType: 'Info', AlertProperties: {
+                        DisplayNotification: true,
+                        NotificationDuration: 'always',
+                    }, AlertForm: {
+                        Buttons: [
+                            {
+                                Label: 'Save',
+                                Action: (context) => {
+                                    const chartName = context.formData.name || chartModel.chartId;
+                                    this.api.chartingApi.addChartDefinition(ObjectFactory_1.default.CreateEmptyChartDefinition({
+                                        Name: chartName,
+                                        Model: chartModel,
+                                    }));
+                                },
+                                ButtonStyle: {
+                                    tone: 'info',
+                                    variant: 'raised',
+                                },
+                            },
+                            {
+                                Label: 'Dismiss',
+                                ButtonStyle: {
+                                    tone: 'neutral',
+                                    variant: 'raised',
+                                },
+                            },
+                        ],
+                        fields: [
+                            {
+                                name: 'name',
+                                label: 'Name',
+                                fieldType: 'text',
+                            },
+                        ],
+                    } }),
+            };
+            this.api.alertApi.displayAlert(alert);
+        }
+        else if (saveStragegy === 'auto') {
+            this.api.chartingApi.addChartDefinition(ObjectFactory_1.default.CreateEmptyChartDefinition({
+                Name: chartModel.chartId,
+                Model: chartModel,
+            }));
+        }
+    }
+    destroy() {
+        this.api = null;
+    }
+}
+exports.ChartingService = ChartingService;

package/src/Utilities/Services/Interface/IChartingService.d.ts

@@ -0,0 +1,5 @@
+import { ChartModel } from '@ag-grid-community/core';
+import { IAdaptableService } from './IAdaptableService';
+export interface IChartingService extends IAdaptableService {
+    onChartModelChange(models: ChartModel[], eventType: string, params: any): void;
+}

package/src/Utilities/Services/Interface/IChartingService.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/Utilities/Services/Interface/IRowEditService.d.ts

@@ -1,8 +1,8 @@
 import { RowNode } from '@ag-grid-community/core';
 import { IAdaptableService } from './IAdaptableService';
 import { AdaptableForm } from '../../../PredefinedConfig/Common/AdaptableForm';
-import { CreateActionRowContext, EditActionRowContext } from '../../../AdaptableOptions/ActionOptions';
+import { CreateActionRowFormContext, EditActionRowFormContext } from '../../../AdaptableOptions/ActionOptions';
 export interface IRowEditService extends IAdaptableService {
-    buildRowEditForm(rowNode: RowNode): AdaptableForm<EditActionRowContext>;
-    buildRowCreateForm(clonedRowNode?: RowNode): AdaptableForm<CreateActionRowContext>;
+    buildRowEditForm(rowNode: RowNode): AdaptableForm<EditActionRowFormContext>;
+    buildRowCreateForm(clonedRowNode?: RowNode): AdaptableForm<CreateActionRowFormContext>;
 }

package/src/Utilities/Services/ModuleService.js

@@ -141,6 +141,8 @@ class ModuleService {
                 return learnUrl + 'integrations-openfin';
             case 'StyledColumn':
                 return learnUrl + 'handbook-styled-column-overview';
+            case 'Charting':
+                return learnUrl + 'reference-config-charting';
             default:
                 return 'good';
         }

package/src/Utilities/Services/RowEditService.d.ts

@@ -2,14 +2,14 @@ import { IRowEditService } from './Interface/IRowEditService';
 import { RowNode } from '@ag-grid-community/core';
 import { AdaptableApi } from '../../Api/AdaptableApi';
 import { AdaptableForm } from '../../PredefinedConfig/Common/AdaptableForm';
-import { CreateActionRowContext, EditActionRowContext } from '../../AdaptableOptions/ActionOptions';
+import { CreateActionRowFormContext, EditActionRowFormContext } from '../../AdaptableOptions/ActionOptions';
 export declare class RowEditService implements IRowEditService {
     private adaptableApi;
     private adaptableInstance;
     private rowEditFormOptions;
     constructor(adaptableApi: AdaptableApi);
-    buildRowEditForm(rowNode: RowNode): AdaptableForm<EditActionRowContext>;
-    buildRowCreateForm(clonedRowNode?: RowNode): AdaptableForm<CreateActionRowContext>;
+    buildRowEditForm(rowNode: RowNode): AdaptableForm<EditActionRowFormContext>;
+    buildRowCreateForm(clonedRowNode?: RowNode): AdaptableForm<CreateActionRowFormContext>;
     private buildActionRow;
     private getFormTitle;
     private getFormDescription;

package/src/Utilities/Services/RowEditService.js

@@ -6,8 +6,8 @@ class RowEditService {
         this.adaptableApi = adaptableApi;
         this.adaptableInstance = this.adaptableApi.internalApi.getAdaptableInstance();
         this.rowEditFormOptions =
-            this.adaptableApi.internalApi.getAdaptableInstance().adaptableOptions.actionOptions.actionRowFormOptions;
-        if (this.adaptableInstance.adaptableOptions.actionOptions.autoHandleActionRowButtons) {
+            this.adaptableApi.internalApi.getAdaptableInstance().adaptableOptions.actionOptions.actionRowButtonOptions.actionRowFormOptions;
+        if (this.adaptableInstance.adaptableOptions.actionOptions.actionRowButtonOptions.autoHandle) {
             this.adaptableInstance.api.eventApi.on('ActionRowSubmitted', (eventInfo) => this.autoHandleActionRowButtons(eventInfo));
         }
     }
@@ -95,7 +95,7 @@ class RowEditService {
                         adaptableApi: context.adaptableApi,
                     };
                 this.adaptableApi.eventApi.emit('ActionRowSubmitted', eventInfo);
-                (_b = (_a = this.adaptableInstance.adaptableOptions.actionOptions.actionRowFormOptions).onFormSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, eventInfo);
+                (_b = (_a = this.adaptableInstance.adaptableOptions.actionOptions.actionRowButtonOptions.actionRowFormOptions).onFormSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, eventInfo);
             },
         };
         return [cancelButton, saveButton];
@@ -182,7 +182,7 @@ class RowEditService {
         if (actionRowSubmittedInfo.type === 'rowCreated') {
             const { formData } = actionRowSubmittedInfo;
             const setPrimaryKeyValueFunction = adaptableApi.internalApi.getAdaptableInstance().adaptableOptions.actionOptions
-                .setPrimaryKeyValue;
+                .actionRowButtonOptions.setPrimaryKeyValue;
             const newRowData = typeof setPrimaryKeyValueFunction === 'function'
                 ? setPrimaryKeyValueFunction({
                     rowData: formData,

package/src/View/AdaptableViewFactory.js

@@ -30,6 +30,7 @@ const DataChangeHistoryPopup_1 = require("./DataChangeHistory/DataChangeHistoryP
 const DataChangeHistoryViewPanel_1 = require("./DataChangeHistory/DataChangeHistoryViewPanel");
 const StateManagementViewPanel_1 = require("./StateManagement/StateManagementViewPanel");
 const StatusBarPopup_1 = require("./StatusBar/StatusBarPopup");
+const ChartingViewPanel_1 = require("./Components/Charting/ChartingViewPanel");
 exports.AdaptableViewFactory = {
     BulkUpdatePopup: BulkUpdatePopup_1.BulkUpdatePopup,
     DashboardPopup: DashboardPopup_1.DashboardPopup,
@@ -60,4 +61,5 @@ exports.AdaptableViewPanelFactory = new Map([
     [ModuleConstants.DataSetModuleId, DataSetViewPanel_1.DataSetViewPanelControl],
     [ModuleConstants.DataChangeHistoryModuleId, DataChangeHistoryViewPanel_1.DataChangeHistoryViewPanelControl],
     [ModuleConstants.StateManagementModuleId, StateManagementViewPanel_1.StateManagementViewPanel],
+    [ModuleConstants.ChartingModuleId, ChartingViewPanel_1.ChartingViewPanel],
 ]);

package/src/View/Alert/Wizard/AlertButtonsEditor.js

@@ -62,7 +62,7 @@ const AlertButtonsEditor = (props) => {
             var _a, _b;
             let buttonStyle = button.ButtonStyle;
             let buttonLabel = button.Label;
-            const btnActions = button.Action
+            const btnActions = button.Action && typeof button.Action === 'string'
                 ? !Array.isArray(button.Action)
                     ? [button.Action]
                     : button.Action

package/src/View/Components/AdaptableObjectList/AdaptableObjectList.js

@@ -55,14 +55,14 @@ const AdaptableObjectListItemView = (props) => {
 };
 exports.AdaptableObjectListItemView = AdaptableObjectListItemView;
 const AdaptableObjectListItem = (props) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const dispatch = (0, react_redux_1.useDispatch)();
     const [isEditWizardVisible, setIsEditWizardVisible] = React.useState(false);
     const [wizardStepName, setWizardStepName] = React.useState(null);
-    const viewOptions = (_b = (_a = props.module) === null || _a === void 0 ? void 0 : _a.getViewProperties) === null || _b === void 0 ? void 0 : _b.call(_a);
-    const EditWizard = (_c = viewOptions.getEditWizard) === null || _c === void 0 ? void 0 : _c.call(viewOptions, props.data.abObject);
-    const deleteAction = (_d = viewOptions === null || viewOptions === void 0 ? void 0 : viewOptions.getDeleteAction) === null || _d === void 0 ? void 0 : _d.call(viewOptions, props.data.abObject);
+    const viewOptions = (_c = (_b = (_a = props.module) === null || _a === void 0 ? void 0 : _a.getViewProperties) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : {};
+    const EditWizard = (_d = viewOptions.getEditWizard) === null || _d === void 0 ? void 0 : _d.call(viewOptions, props.data.abObject);
+    const deleteAction = (_e = viewOptions === null || viewOptions === void 0 ? void 0 : viewOptions.getDeleteAction) === null || _e === void 0 ? void 0 : _e.call(viewOptions, props.data.abObject);
     const isObjectShareable = props.module.isModuleObjectsShareable();
     const teamSharingActivated = isObjectShareable &&
         adaptable.api.teamSharingApi.isTeamSharingActivated() &&
@@ -89,7 +89,7 @@ const AdaptableObjectListItem = (props) => {
         (_a = viewOptions === null || viewOptions === void 0 ? void 0 : viewOptions.onOpenEditPopup) === null || _a === void 0 ? void 0 : _a.call(viewOptions, props.data.abObject);
     }, []);
     const hasSuspend = Boolean(viewOptions.getSuspendAction);
-    const actions = (_f = (_e = viewOptions === null || viewOptions === void 0 ? void 0 : viewOptions.actions) === null || _e === void 0 ? void 0 : _e.map) === null || _f === void 0 ? void 0 : _f.call(_e, (component, index) => {
+    const actions = (_g = (_f = viewOptions === null || viewOptions === void 0 ? void 0 : viewOptions.actions) === null || _f === void 0 ? void 0 : _f.map) === null || _g === void 0 ? void 0 : _g.call(_f, (component, index) => {
         return React.createElement(component, {
             data: props.data.abObject,
             key: index,

package/src/View/Components/Charting/ChartingStatusBarPopover.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const ChartingStatusBarPopover: React.FunctionComponent;

package/src/View/Components/Charting/ChartingStatusBarPopover.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChartingStatusBarPopover = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const ChartingRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ChartingRedux"));
+const SelectList_1 = require("../../../components/SelectList");
+const ChartingStatusBarPopover = () => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const chartDefinitions = (0, react_redux_1.useSelector)(ChartingRedux.ChartingGetChartModels);
+    const options = chartDefinitions.map((chartDefinition) => ({
+        label: chartDefinition.Name,
+        value: chartDefinition.Uuid,
+    }));
+    const handleChange = React.useCallback((option) => {
+        const definition = chartDefinitions.find((cd) => cd.Uuid === option.value);
+        adaptable.api.chartingApi.showChartDefinitionOnce(definition);
+    }, [chartDefinitions]);
+    return React.createElement(SelectList_1.SelectList, { options: options, onChange: handleChange });
+};
+exports.ChartingStatusBarPopover = ChartingStatusBarPopover;

package/src/View/Components/Charting/ChartingViewPanel.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { LayoutViewPanelComponentProps } from '../../Layout/LayoutViewPanel';
+export declare const ChartingViewPanel: React.FunctionComponent<LayoutViewPanelComponentProps>;