@adaptabletools/adaptable 14.0.1-canary.0 → 14.0.1-canary.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "14.0.1-canary.0",
+  "version": "14.0.1-canary.2",
   "description": "Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",

package/publishTimestamp.d.ts

@@ -1,2 +1,2 @@
-declare const _default: 1672558364064;
+declare const _default: 1672852001158;
 export default _default;

package/publishTimestamp.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = 1672558364064;
+exports.default = 1672852001158;

package/src/AdaptableOptions/AdaptableFrameworkComponent.d.ts

@@ -1,18 +1,20 @@
 import { AdaptableApi } from '../Api/AdaptableApi';
 import { ReactElement } from 'react';
+import { BaseContext } from '../types';
+/**
+ * Base Component for Bespoke Components - Can be Angular or React
+ */
 export declare type AdaptableFrameworkComponent = AngularFrameworkComponent | ReactFrameworkComponent;
 /**
- * An Angular component defined by its type and an optional initialisation callback.
+ * Angular component defined by its type and (optional) initialisation callback
  */
 export declare type AngularFrameworkComponent<T = unknown> = {
     /**
-     * The angular component class (instance of https://angular.io/api/core/Type).
-     * It will be automatically instantiated at runtime and the `adaptableApi` is provided through an Injection token
+     * Angular component class (instance of https://angular.io/api/core/Type); will be automatically instantiated at runtime - `adaptableApi` is provided via Injection token
      */
     type: T;
     /**
-     * Optional initialisation callback.
-     * If provided, it will be invoked after each component instantiation and the returned object properties will be assigned to the component instance
+     * Optional initialisation callback; will be invoked after each component instantiation and returned object properties assigned to component instance
      */
     onSetup?: ({ adaptableApi }: {
         adaptableApi: AdaptableApi;
@@ -32,8 +34,13 @@ export declare type ReactFrameworkComponent = ({ adaptableApi, }: {
 /**
  * Context provided for any custom rendering
  */
-export interface CustomRenderContext {
+export interface CustomRenderContext extends BaseContext {
+    /**
+     * Whether Tool Panel is currently visible
+     */
     visible: boolean;
+    /**
+     * Current Div Element
+     */
     element: HTMLDivElement;
-    adaptableApi: AdaptableApi;
 }

package/src/AdaptableOptions/ChartingOptions.d.ts

@@ -21,6 +21,12 @@ export interface ChartContainer {
      * Name of the Location - used in Dropdowns
      */
     name: string;
+    /**
+     * Weather a single chart can be displayed or multiple in the same location
+     *
+     * @defaults 'single'
+     */
+    type?: 'single' | 'multiple';
     /**
      * Location - can be HTMLElement or Id of Div
      */

package/src/AdaptableOptions/ToolPanelOptions.d.ts

@@ -41,7 +41,7 @@ export interface CustomToolPanel extends AdaptableObject {
      */
     buttons?: AdaptableButton<CustomToolPanelButtonContext>[];
     /**
-     * Function to provide bespoke content when NOT using a Framework wrapper
+     * Function to provide bespoke content when using AdapTable Vanilla
      */
     render?: (customRenderContext: CustomRenderContext) => string | null;
     /**

package/src/Api/Implementation/AlertApiImpl.js

@@ -267,7 +267,7 @@ class AlertApiImpl extends ApiBase_1.ApiBase {
         this.internalApi.executeAlertButton(button, context);
     }
     getActiveNonReactiveAlertDefinitions() {
-        (0, logDeprecation_1.logDeprecationInternal)('AlertApi', 'executeAlertButton');
+        (0, logDeprecation_1.logDeprecationInternal)('AlertApi', 'getActiveNonReactiveAlertDefinitions');
         return this.internalApi.getActiveNonReactiveAlertDefinitions();
     }
     getActiveReactiveAlertDefinitions() {

package/src/PredefinedConfig/Common/Enums.d.ts

@@ -1,12 +1,3 @@
-export declare enum DataType {
-    String = "String",
-    Number = "Number",
-    Boolean = "Boolean",
-    Date = "Date",
-    Object = "Object",
-    Unknown = "Unknown",
-    All = "All"
-}
 export declare enum MathOperation {
     Add = "Add",
     Subtract = "Subtract",

package/src/PredefinedConfig/Common/Enums.js

@@ -1,17 +1,7 @@
 "use strict";
 // General Enums
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChangeDirection = exports.FilterOnDataChangeOptions = exports.SummaryOperation = exports.StatusColour = exports.ColumnMenuTab = exports.FontSize = exports.FontStyle = exports.FontWeight = exports.SelectionMode = exports.SortOrder = exports.ScheduleType = exports.ExportDestination = exports.MathOperation = exports.DataType = void 0;
-var DataType;
-(function (DataType) {
-    DataType["String"] = "String";
-    DataType["Number"] = "Number";
-    DataType["Boolean"] = "Boolean";
-    DataType["Date"] = "Date";
-    DataType["Object"] = "Object";
-    DataType["Unknown"] = "Unknown";
-    DataType["All"] = "All";
-})(DataType = exports.DataType || (exports.DataType = {}));
+exports.ChangeDirection = exports.FilterOnDataChangeOptions = exports.SummaryOperation = exports.StatusColour = exports.ColumnMenuTab = exports.FontSize = exports.FontStyle = exports.FontWeight = exports.SelectionMode = exports.SortOrder = exports.ScheduleType = exports.ExportDestination = exports.MathOperation = void 0;
 var MathOperation;
 (function (MathOperation) {
     MathOperation["Add"] = "Add";

package/src/PredefinedConfig/Common/SpecialColumnSettings.d.ts

@@ -3,9 +3,9 @@
  */
 export interface SpecialColumnSettings {
     /**
-     *  Expression's return value DataType; inferred by AdapTable but settable by User
+     *  Expression's return value DataType, only mandatory property
      */
-    DataType: 'String' | 'Number' | 'Boolean' | 'Date';
+    DataType: 'String' | 'Number' | 'Boolean' | 'Date' | 'NumberArray';
     /**
      * Preferred (pixel) Column Width; if unset, calculated dynamically by AG Grid
      */

package/src/Strategy/CalculatedColumnModule.js

@@ -34,6 +34,13 @@ class CalculatedColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                 oldCalculatedColumns.push(cc);
                 (0, LoggingHelper_1.LogAdaptableWarning)(`Updating incorrect Predefined Config for Calculated Column: ${cc.ColumnId}`);
             }
+            if (!cc.CalculatedColumnSettings) {
+                cc.CalculatedColumnSettings = {
+                    DataType: 'Number',
+                };
+                oldCalculatedColumns.push(cc);
+                (0, LoggingHelper_1.LogAdaptableWarning)(`Updating incorrect Predefined Config for Calculated Column: ${cc.ColumnId}`);
+            }
         });
         oldCalculatedColumns.forEach((oldCalcCol) => this.api.calculatedColumnApi.editCalculatedColumn(oldCalcCol));
     }

package/src/Strategy/ChartingModule.js

@@ -98,12 +98,10 @@ class ChartingModule extends AdaptableModuleBase_1.AdaptableModuleBase {
             },
             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';
+                const content = ChartingStatusBarPopover_1.ChartingStatusBarPopover;
                 return {
                     content,
-                    popover,
+                    triggerActionOnWrapperClick: false,
                 };
             },
         };

package/src/Strategy/FormatColumnModule.d.ts

@@ -12,7 +12,7 @@ export declare class FormatColumnModule extends AdaptableModuleBase implements I
         includeLayoutNotAssociatedObjects?: boolean;
     }): AdaptableObject[];
     getExplicitlyReferencedColumnIds(formatColumn: FormatColumn): string[];
-    hasNamedQueryReferences(): boolean;
+    getReferencedNamedQueryNames(formatColumn: FormatColumn): string[];
     updateOldConfig(): void;
     private updateFormatColumnSingleToMultiplePredicates;
     private updateConditionalStylesColumnsOldConfig;

package/src/Strategy/FormatColumnModule.js

@@ -24,15 +24,23 @@ class FormatColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         return this.api.formatColumnApi.getFormatColumns(config);
     }
     getExplicitlyReferencedColumnIds(formatColumn) {
-        if (this.api.scopeApi.scopeHasColumns(formatColumn.Scope)) {
+        const queryExpression = this.api.queryLanguageApi.getAdaptableQueryExpression(formatColumn.Rule);
+        if (queryExpression) {
+            return this.api.queryLanguageApi.getColumnsFromExpression(queryExpression);
+        }
+        else if (this.api.scopeApi.scopeHasColumns(formatColumn.Scope)) {
             return this.api.scopeApi
                 .getColumnsForScope(formatColumn.Scope)
                 .map((adaptableColumn) => adaptableColumn.columnId);
         }
         return [];
     }
-    hasNamedQueryReferences() {
-        return false;
+    getReferencedNamedQueryNames(formatColumn) {
+        const queryExpression = this.api.queryLanguageApi.getAdaptableQueryExpression(formatColumn.Rule);
+        if (!queryExpression) {
+            return [];
+        }
+        return this.api.queryApi.internalApi.getReferencedNamedQueryNames(queryExpression);
     }
     updateOldConfig() {
         this.updateConditionalStylesColumnsOldConfig();

package/src/Strategy/StyledColumnModule.js

@@ -108,9 +108,14 @@ class StyledColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                     let styledColumn = this.api.styledColumnApi.getStyledColumnForColumnId(column.columnId);
                     let styledColumnExists = Boolean(styledColumn);
                     if (!styledColumn) {
+                        const emptyRanges = this.api.scopeApi.createCellColorRangesForScope({
+                            ColumnIds: [column.columnId],
+                        });
                         styledColumn = Object.assign(Object.assign({}, ObjectFactory_1.default.CreateEmptyStyledColumn()), { ColumnId: column.columnId, 
                             // numbers default to gradient
-                            GradientStyle: {} });
+                            GradientStyle: {
+                                CellRanges: emptyRanges,
+                            } });
                     }
                     if (styledColumn && styledColumn.IsReadOnly && styledColumn.IsReadOnly == true) {
                         styledColumnExists = false;

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

@@ -1,13 +1,13 @@
 import { ICalculatedColumnExpressionService } from './Interface/ICalculatedColumnExpressionService';
 import { RowNode } from '@ag-grid-community/core';
-import { AdaptableCalculatedColumnQuery, CalculatedColumn } from '../../PredefinedConfig/CalculatedColumnState';
+import { AdaptableCalculatedColumnQuery, CalculatedColumn, CalculatedColumnSettings } from '../../PredefinedConfig/CalculatedColumnState';
 import { AdaptableApi } from '../../../types';
 export declare class CalculatedColumnExpressionService implements ICalculatedColumnExpressionService {
     private adaptableApi;
     private aggregatedScalarLiveValuesMap;
     constructor(adaptableApi: AdaptableApi);
     destroy(): void;
-    getCalculatedColumnDataType(calculatedColumnQuery: AdaptableCalculatedColumnQuery): 'String' | 'Number' | 'Boolean' | 'Date';
+    getCalculatedColumnDataType(calculatedColumnQuery: AdaptableCalculatedColumnQuery): CalculatedColumnSettings['DataType'];
     isCalculatedColumnQueryValid(calculatedColumnQuery: AdaptableCalculatedColumnQuery): boolean;
     evaluateCalculatedColumnQuery(calculatedColumn: CalculatedColumn, rowNode: RowNode): any;
     createAggregatedScalarLiveValue(calculatedColumn: CalculatedColumn): void;

package/src/Utilities/Services/CalculatedColumnExpressionService.js

@@ -69,6 +69,9 @@ class CalculatedColumnExpressionService {
             if (typeof firstRowValue === 'number') {
                 return 'Number';
             }
+            if (Array.isArray(firstRowValue)) {
+                return 'NumberArray';
+            }
         }
         catch (e) {
             (0, LoggingHelper_1.LogAdaptableWarning)(`Invalid CalculatedColumn expression ${this.adaptableApi.queryLanguageApi.getAdaptableQueryExpression(calculatedColumnQuery)} :: ${e}`);

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

@@ -1,10 +1,10 @@
 import { IAdaptableService } from './IAdaptableService';
 import { RowNode } from '@ag-grid-community/core';
-import { AdaptableCalculatedColumnQuery, CalculatedColumn } from '../../../PredefinedConfig/CalculatedColumnState';
+import { AdaptableCalculatedColumnQuery, CalculatedColumn, CalculatedColumnSettings } from '../../../PredefinedConfig/CalculatedColumnState';
 export interface ICalculatedColumnExpressionService extends IAdaptableService {
     isCalculatedColumnQueryValid(calculatedColumnQuery: AdaptableCalculatedColumnQuery): boolean;
     evaluateCalculatedColumnQuery(calculatedColumn: CalculatedColumn, rowNode: RowNode): any;
-    getCalculatedColumnDataType(calculatedColumnQuery: AdaptableCalculatedColumnQuery): 'String' | 'Number' | 'Boolean' | 'Date';
+    getCalculatedColumnDataType(calculatedColumnQuery: AdaptableCalculatedColumnQuery): CalculatedColumnSettings['DataType'];
     createAggregatedScalarLiveValue(calculatedColumn: CalculatedColumn): void;
     destroyAggregatedScalarLiveValue(calculatedColumn: CalculatedColumn): void;
 }

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UiOptionsForm.js

@@ -4,14 +4,22 @@ exports.UIElementsForm = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
+const Tabs_1 = require("../../../../components/Tabs");
 const UIOptionsActionColumnsForm_1 = require("./UIOptionsActionColumnsForm");
 const UIOptionsSidebarForm_1 = require("./UIOptionsSidebarForm");
 const UIOptionsStatusbarForm_1 = require("./UIOptionsStatusbarForm");
 const UIElementsForm = (props) => {
     let abOptions = props.adaptableOptions;
     return (React.createElement(rebass_1.Box, { p: 2 },
-        React.createElement(UIOptionsActionColumnsForm_1.UIOptionsActionColumnsForm, { abOptions: abOptions, onChange: props.onChangeadAptableOptions }),
-        React.createElement(UIOptionsSidebarForm_1.UIOptionsSidebarForm, { abOptions: abOptions, onChange: props.onChangeadAptableOptions }),
-        React.createElement(UIOptionsStatusbarForm_1.UIOptionsStatusbarForm, { abOptions: abOptions, onChange: props.onChangeadAptableOptions })));
+        React.createElement(Tabs_1.Tabs, null,
+            React.createElement(Tabs_1.Tabs.Tab, null, "Action Rows"),
+            React.createElement(Tabs_1.Tabs.Tab, null, "Sidebar"),
+            React.createElement(Tabs_1.Tabs.Tab, null, "Statusbar"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(UIOptionsActionColumnsForm_1.UIOptionsActionColumnsForm, { abOptions: abOptions, onChange: props.onChangeadAptableOptions })),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(UIOptionsSidebarForm_1.UIOptionsSidebarForm, { abOptions: abOptions, onChange: props.onChangeadAptableOptions })),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(UIOptionsStatusbarForm_1.UIOptionsStatusbarForm, { abOptions: abOptions, onChange: props.onChangeadAptableOptions })))));
 };
 exports.UIElementsForm = UIElementsForm;

package/src/View/CalculatedColumn/Wizard/CalculatedColumnSettingsWizardSection.js

@@ -78,6 +78,8 @@ const CalculatedColumnSettingsWizardSection = (props) => {
                                     Width: Number(e.target.value),
                                 }) })))))),
         ErrorMessage ? React.createElement(ErrorBox_1.default, { marginTop: 2 }, ErrorMessage) : null,
-        React.createElement(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: false, settings: data.CalculatedColumnSettings, onChange: handleSpecialColumnSettingsChange })));
+        React.createElement(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: false, 
+            // @ts-ignore CalculatedColumn has a broader DataType
+            settings: data.CalculatedColumnSettings, onChange: handleSpecialColumnSettingsChange })));
 };
 exports.CalculatedColumnSettingsWizardSection = CalculatedColumnSettingsWizardSection;

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

@@ -3,21 +3,26 @@ 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 ModuleConstants = tslib_1.__importStar(require("../../../Utilities/Constants/ModuleConstants"));
+const useChartingElements_1 = require("./useChartingElements");
+const rebass_1 = require("rebass");
+const ChartingStatusBarPopover = (props) => {
     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 });
+    const accessLevel = adaptable.api.internalApi
+        .getEntitlementService()
+        .getEntitlementAccessLevelForModule(ModuleConstants.ChartingModuleId);
+    const { chartSelector, containerSelector, chartButton, deleteButton, editButton } = (0, useChartingElements_1.useChartingElements)({
+        elementType: 'Statusbar',
+        accessLevel: accessLevel,
+        size: 'small',
+    });
+    return (React.createElement(rebass_1.Flex, { width: "100%", alignItems: "center" },
+        React.createElement(rebass_1.Box, null, chartSelector),
+        containerSelector && React.createElement(rebass_1.Box, { ml: 1 }, containerSelector),
+        React.createElement(rebass_1.Box, { ml: 1 },
+            chartButton,
+            deleteButton,
+            editButton)));
 };
 exports.ChartingStatusBarPopover = ChartingStatusBarPopover;

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

@@ -3,76 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChartingViewPanel = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const react_redux_1 = require("react-redux");
 const rebass_1 = require("rebass");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const ChartingRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ChartingRedux"));
-const AdaptableHelper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/AdaptableHelper"));
-const AdaptableContext_1 = require("../../AdaptableContext");
-const useChartState_1 = require("./useChartState");
-const DeleteChartButton_1 = require("./DeleteChartButton");
-const EditChartButton_1 = require("./EditChartButton");
+const useChartingElements_1 = require("./useChartingElements");
 const ChartingViewPanel = (props) => {
-    var _a, _b, _c;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const chartDefinitions = (0, react_redux_1.useSelector)(ChartingRedux.ChartingGetChartModels);
-    const chartContainers = (_b = (_a = adaptable.adaptableOptions) === null || _a === void 0 ? void 0 : _a.chartingOptions) === null || _b === void 0 ? void 0 : _b.chartContainers;
-    const [selectedChartId, setSelectedChartId] = React.useState(() => {
-        // ID is kept in state becaus that does not change, the definition might change
-        return chartDefinitions.length > 0 ? chartDefinitions[0].Uuid : null;
-    });
-    const selectedChart = chartDefinitions.find((chart) => chart.Uuid === selectedChartId);
-    const accessLevel = AdaptableHelper_1.default.getAppropriateAccessLevel(selectedChart, props.accessLevel);
-    const [selectedContainer, setSelectedContainer] = React.useState(null);
-    const { isOpen, showChart, closeChart } = (0, useChartState_1.useChartState)(selectedChart);
-    const options = chartDefinitions.map((chartDefinition) => ({
-        label: chartDefinition.Name,
-        value: chartDefinition.Uuid,
-        onClick: () => {
-            setSelectedChartId(chartDefinition.Uuid);
-        },
-    }));
-    const hasCharts = options.length > 0;
-    const isSelectedChart = hasCharts && selectedChart != null;
-    let content = '';
-    if (hasCharts && selectedChart) {
-        content = (_c = chartDefinitions.find((chart) => chart.Uuid === selectedChart.Uuid)) === null || _c === void 0 ? void 0 : _c.Name;
-    }
-    else if (hasCharts) {
-        content = 'Select Chart';
-    }
-    else {
-        content = 'No Charts';
-    }
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-    React.useEffect(() => {
-        // select first
-        if (!selectedChart && chartDefinitions.length > 0) {
-            setSelectedChartId(chartDefinitions[0].Uuid);
-        }
-    }, [chartDefinitions]);
-    const containerOptions = [
-        {
-            label: 'Ag Grid Window',
-            onClick: () => {
-                setSelectedContainer(null);
-            },
-        },
-        ...(chartContainers
-            ? chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.map((contianerDef) => ({
-                label: contianerDef.name,
-                onClick: () => {
-                    setSelectedContainer(contianerDef);
-                },
-            }))
-            : []),
-    ];
-    const chartSelector = (React.createElement(DropdownButton_1.default, { width: "100%", columns: ['label'], className: `ab-${elementType}__Chart__select`, items: options, disabled: !hasCharts }, content));
-    const containerSelector = Boolean(chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.length) && (React.createElement(DropdownButton_1.default, { width: "100%", columns: ['label'], items: containerOptions, disabled: !isSelectedChart }, (selectedContainer === null || selectedContainer === void 0 ? void 0 : selectedContainer.name) || 'Ag Grid Window'));
-    const chartButton = (React.createElement(SimpleButton_1.default, { mr: 1, onClick: () => (isOpen ? closeChart() : showChart(selectedContainer)), disabled: !Boolean(selectedChart), variant: 'outlined', tone: 'neutral' }, isOpen ? 'Close' : 'Open'));
-    const deleteButton = React.createElement(DeleteChartButton_1.DeleteChartButton, { chart: selectedChart, accessLevel: accessLevel });
-    const editButton = (React.createElement(EditChartButton_1.EditChartButton, { chart: selectedChart, accessLevel: accessLevel, isOpen: isOpen }));
+    const { chartSelector, containerSelector, chartButton, deleteButton, editButton } = (0, useChartingElements_1.useChartingElements)({ elementType, accessLevel: props.accessLevel });
     if (elementType === 'DashboardToolbar') {
         return (React.createElement(rebass_1.Flex, { width: "100%", alignItems: "center" },
             React.createElement(rebass_1.Box, null, chartSelector),

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

@@ -3,5 +3,6 @@ import { AccessLevel, ChartDefinition } from '../../../types';
 export interface ButtonDeleteProps {
     chart: ChartDefinition;
     accessLevel: AccessLevel;
+    iconSize?: number;
 }
 export declare const DeleteChartButton: React.FunctionComponent<ButtonDeleteProps>;

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

@@ -7,6 +7,6 @@ const ButtonDelete_1 = require("../Buttons/ButtonDelete");
 const ChartingRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ChartingRedux"));
 const DeleteChartButton = (props) => {
     var _a;
-    return (React.createElement(ButtonDelete_1.ButtonDelete, { disabled: !props.chart, ConfirmAction: ChartingRedux.ChartingDeleteChart((_a = props.chart) === null || _a === void 0 ? void 0 : _a.Name), ConfirmationMsg: `Are you sure you want to delete this Charts?`, ConfirmationTitle: 'Delete Charts', accessLevel: props.accessLevel }));
+    return (React.createElement(ButtonDelete_1.ButtonDelete, { iconSize: props.iconSize, disabled: !props.chart, ConfirmAction: ChartingRedux.ChartingDeleteChart((_a = props.chart) === null || _a === void 0 ? void 0 : _a.Name), ConfirmationMsg: `Are you sure you want to delete this Charts?`, ConfirmationTitle: 'Delete Charts', accessLevel: props.accessLevel }));
 };
 exports.DeleteChartButton = DeleteChartButton;

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

@@ -4,5 +4,6 @@ export interface EditChartButtonProps {
     chart: ChartDefinition;
     accessLevel: AccessLevel;
     isOpen: boolean;
+    iconSize?: number;
 }
 export declare const EditChartButton: React.FunctionComponent<EditChartButtonProps>;

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

@@ -9,7 +9,7 @@ const ModuleConstants = tslib_1.__importStar(require("../../../Utilities/Constan
 const react_redux_1 = require("react-redux");
 const EditChartButton = (props) => {
     const dispatch = (0, react_redux_1.useDispatch)();
-    return (React.createElement(ButtonEdit_1.ButtonEdit, { tooltip: "Edit Chart", 
+    return (React.createElement(ButtonEdit_1.ButtonEdit, { iconSize: props.iconSize, tooltip: "Edit Chart", 
         // It gets complicated when a chart is both open and opened in edit wizard
         // There an be conflicts between the two open charts (preview and main) and the changes to the active chart may not be syncronized correctly.
         disabled: !props.chart || props.isOpen, accessLevel: props.accessLevel, onClick: () => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.ChartingModuleId, 'Chart', {

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

@@ -20,6 +20,18 @@ const useChartState = (chartDefinition) => {
         const currentChartRef = (_a = adaptable.api.chartingApi.getChartRef(chartDefinition.Model.chartId)) !== null && _a !== void 0 ? _a : null;
         setChartRef(currentChartRef);
     }, [currentChartModels, chartDefinition]);
+    const closeAlreadyOpenedChartsInContainer = (element) => {
+        const chartModelAlreadyInChartContainer = currentChartModels.find((chartModel) => {
+            const chartRef = adaptable.api.chartingApi.getChartRef(chartModel.chartId);
+            return chartRef && element.contains(chartRef.chartElement);
+        });
+        if (chartModelAlreadyInChartContainer) {
+            const chartRef = adaptable.api.chartingApi.getChartRef(chartModelAlreadyInChartContainer.chartId);
+            if (chartRef) {
+                chartRef.destroyChart();
+            }
+        }
+    };
     const handleShowChart = React.useCallback((chartContainer) => {
         if (!adaptable || !chartDefinition) {
             return;
@@ -41,15 +53,8 @@ const useChartState = (chartDefinition) => {
          * If multple charts are opened in the same contianer, it infinitly adds the charts to the container.
          */
         if (chartContainer && element) {
-            const chartModelAlreadyInChartContainer = currentChartModels.find((chartModel) => {
-                const chartRef = adaptable.api.chartingApi.getChartRef(chartModel.chartId);
-                return chartRef && element.contains(chartRef.chartElement);
-            });
-            if (chartModelAlreadyInChartContainer) {
-                const chartRef = adaptable.api.chartingApi.getChartRef(chartModelAlreadyInChartContainer.chartId);
-                if (chartRef) {
-                    chartRef.destroyChart();
-                }
+            if (chartContainer.type !== 'multiple') {
+                closeAlreadyOpenedChartsInContainer(element);
             }
             adaptable.api.chartingApi.showChartDefinitionOnce(chartDefinition, element);
         }

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { AccessLevel, ChartDefinition } from '../../../types';
+export declare const useChartingElements: ({ elementType, accessLevel, size, }: {
+    elementType: string;
+    accessLevel: AccessLevel;
+    size?: 'small' | 'normal';
+}) => {
+    chartSelector: JSX.Element;
+    containerSelector: JSX.Element;
+    chartButton: JSX.Element;
+    deleteButton: JSX.Element;
+    editButton: JSX.Element;
+    selectedChart: ChartDefinition;
+};

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

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChartingElements = 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 DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const ChartingRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ChartingRedux"));
+const AdaptableHelper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/AdaptableHelper"));
+const useChartState_1 = require("./useChartState");
+const DeleteChartButton_1 = require("./DeleteChartButton");
+const EditChartButton_1 = require("./EditChartButton");
+const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) => {
+    var _a, _b, _c;
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const chartDefinitions = (0, react_redux_1.useSelector)(ChartingRedux.ChartingGetChartModels);
+    const chartContainers = (_b = (_a = adaptable.adaptableOptions) === null || _a === void 0 ? void 0 : _a.chartingOptions) === null || _b === void 0 ? void 0 : _b.chartContainers;
+    const [selectedChartId, setSelectedChartId] = React.useState(() => {
+        // ID is kept in state becaus that does not change, the definition might change
+        return chartDefinitions.length > 0 ? chartDefinitions[0].Uuid : null;
+    });
+    const selectedChart = chartDefinitions.find((chart) => chart.Uuid === selectedChartId);
+    const chartAccessLevel = AdaptableHelper_1.default.getAppropriateAccessLevel(selectedChart, accessLevel);
+    const [selectedContainer, setSelectedContainer] = React.useState(null);
+    const { isOpen, showChart, closeChart } = (0, useChartState_1.useChartState)(selectedChart);
+    const options = chartDefinitions.map((chartDefinition) => ({
+        label: chartDefinition.Name,
+        value: chartDefinition.Uuid,
+        onClick: () => {
+            setSelectedChartId(chartDefinition.Uuid);
+        },
+    }));
+    const hasCharts = options.length > 0;
+    const isSelectedChart = hasCharts && selectedChart != null;
+    let content = '';
+    if (hasCharts && selectedChart) {
+        content = (_c = chartDefinitions.find((chart) => chart.Uuid === selectedChart.Uuid)) === null || _c === void 0 ? void 0 : _c.Name;
+    }
+    else if (hasCharts) {
+        content = 'Select Chart';
+    }
+    else {
+        content = 'No Charts';
+    }
+    React.useEffect(() => {
+        // select first
+        if (!selectedChart && chartDefinitions.length > 0) {
+            setSelectedChartId(chartDefinitions[0].Uuid);
+        }
+    }, [chartDefinitions]);
+    const containerOptions = [
+        {
+            label: 'Ag Grid Window',
+            onClick: () => {
+                setSelectedContainer(null);
+            },
+        },
+        ...(chartContainers
+            ? chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.map((contianerDef) => ({
+                label: contianerDef.name,
+                onClick: () => {
+                    setSelectedContainer(contianerDef);
+                },
+            }))
+            : []),
+    ];
+    const style = {};
+    let iconSize;
+    if (size === 'small') {
+        style.padding = 2;
+        style.fontSize = 'small';
+        iconSize = 15;
+    }
+    const chartSelector = (React.createElement(DropdownButton_1.default, { style: style, width: "100%", columns: ['label'], className: `ab-${elementType}__Chart__select`, items: options, disabled: !hasCharts }, content));
+    const containerSelector = Boolean(chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.length) && (React.createElement(DropdownButton_1.default, { style: style, width: "100%", columns: ['label'], items: containerOptions, disabled: !isSelectedChart }, (selectedContainer === null || selectedContainer === void 0 ? void 0 : selectedContainer.name) || 'Ag Grid Window'));
+    const chartButton = (React.createElement(SimpleButton_1.default, { style: style, mr: 1, onClick: () => (isOpen ? closeChart() : showChart(selectedContainer)), disabled: !Boolean(selectedChart), variant: 'outlined', tone: 'neutral' }, isOpen ? 'Close' : 'Open'));
+    const deleteButton = (React.createElement(DeleteChartButton_1.DeleteChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel }));
+    const editButton = (React.createElement(EditChartButton_1.EditChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel, isOpen: isOpen }));
+    return {
+        chartSelector,
+        containerSelector,
+        chartButton,
+        deleteButton,
+        editButton,
+        selectedChart,
+    };
+};
+exports.useChartingElements = useChartingElements;