@adaptabletools/adaptable 17.0.0-canary.0 → 17.0.0-canary.10

package/src/View/Charting/ChartingWizard/AgChargingWizard/PreviewChartSection.js

@@ -1,12 +1,16 @@
-import * as React from 'react';
-import { useSelector } from 'react-redux';
-import isEqual from 'lodash/isEqual';
-import * as SystemRedux from '../../../../Redux/ActionsReducers/SystemRedux';
-import { useAdaptable } from '../../../AdaptableContext';
-export const PreviewChartSection = (props) => {
-    const currentChartModels = useSelector((state) => SystemRedux.SystemChartingCurrentChartModelsSelector(state.System));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreviewChartSection = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
+const SystemRedux = tslib_1.__importStar(require("../../../../Redux/ActionsReducers/SystemRedux"));
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const PreviewChartSection = (props) => {
+    const currentChartModels = (0, react_redux_1.useSelector)((state) => SystemRedux.SystemChartingCurrentChartModelsSelector(state.System));
     const [localChartId, setLocalChartId] = React.useState(null);
-    const adaptable = useAdaptable();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const divRef = React.useRef(null);
     React.useEffect(() => {
         if (!divRef.current) {
@@ -21,9 +25,10 @@ export const PreviewChartSection = (props) => {
     }, [divRef]);
     React.useEffect(() => {
         const model = currentChartModels.find((model) => model.chartId == localChartId);
-        if (model && !isEqual(model, props.chartDefinition.Model)) {
+        if (model && !(0, isEqual_1.default)(model, props.chartDefinition.Model)) {
             props.onChange(Object.assign(Object.assign({}, props.chartDefinition), { Model: model }));
         }
     }, [currentChartModels]);
     return React.createElement("div", { ref: divRef });
 };
+exports.PreviewChartSection = PreviewChartSection;

package/src/View/Charting/ChartingWizard/AgChargingWizard/SettingsSection.js

@@ -1,9 +1,13 @@
-import * as React from 'react';
-import { CheckBox } from '../../../../components/CheckBox';
-import DropdownButton from '../../../../components/DropdownButton';
-import FormLayout, { FormRow } from '../../../../components/FormLayout';
-import AdaptableInput from '../../../Components/AdaptableInput';
-export const isSettingsValid = (chartDefinition, api) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsSection = exports.isSettingsValid = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const CheckBox_1 = require("../../../../components/CheckBox");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const AdaptableInput_1 = tslib_1.__importDefault(require("../../../Components/AdaptableInput"));
+const isSettingsValid = (chartDefinition, api) => {
     if (!chartDefinition.Name) {
         return 'Name is mandatory';
     }
@@ -14,7 +18,8 @@ export const isSettingsValid = (chartDefinition, api) => {
     }
     return true;
 };
-export const SettingsSection = (props) => {
+exports.isSettingsValid = isSettingsValid;
+const SettingsSection = (props) => {
     const handleNameChange = React.useCallback((event) => {
         props.onChange(Object.assign(Object.assign({}, props.chartDefinition), { Name: event.target.value, Model: props.chartDefinition.Model }));
     }, [props.chartDefinition]);
@@ -35,13 +40,14 @@ export const SettingsSection = (props) => {
     const handleAggFuncClear = React.useCallback(() => {
         props.onChange(Object.assign(Object.assign({}, props.chartDefinition), { Model: Object.assign(Object.assign({}, props.chartDefinition.Model), { aggFunc: '' }) }));
     }, [props.chartDefinition]);
-    return (React.createElement(FormLayout, null,
-        React.createElement(FormRow, { label: "Name" },
-            React.createElement(AdaptableInput, { onChange: handleNameChange, value: props.chartDefinition.Name })),
-        React.createElement(FormRow, { label: "Unlink Chart" },
-            React.createElement(CheckBox, { onClick: handleUnLinkChange, checked: props.chartDefinition.Model.unlinkChart })),
-        React.createElement(FormRow, { label: "Suppress Chart Ranges" },
-            React.createElement(CheckBox, { onClick: handleSuppressChartRanges, checked: props.chartDefinition.Model.suppressChartRanges })),
-        props.chartDefinition.Model.modelType === 'range' && typeof aggFunc !== 'function' && (React.createElement(FormRow, { label: "Agg Func" },
-            React.createElement(DropdownButton, { columns: ['label'], items: aggFuncsOptions, onClear: handleAggFuncClear }, aggFunc ? aggFunc : 'Select ')))));
+    return (React.createElement(FormLayout_1.default, null,
+        React.createElement(FormLayout_1.FormRow, { label: "Name" },
+            React.createElement(AdaptableInput_1.default, { onChange: handleNameChange, value: props.chartDefinition.Name })),
+        React.createElement(FormLayout_1.FormRow, { label: "Unlink Chart" },
+            React.createElement(CheckBox_1.CheckBox, { onClick: handleUnLinkChange, checked: props.chartDefinition.Model.unlinkChart })),
+        React.createElement(FormLayout_1.FormRow, { label: "Suppress Chart Ranges" },
+            React.createElement(CheckBox_1.CheckBox, { onClick: handleSuppressChartRanges, checked: props.chartDefinition.Model.suppressChartRanges })),
+        props.chartDefinition.Model.modelType === 'range' && typeof aggFunc !== 'function' && (React.createElement(FormLayout_1.FormRow, { label: "Agg Func" },
+            React.createElement(DropdownButton_1.default, { columns: ['label'], items: aggFuncsOptions, onClear: handleAggFuncClear }, aggFunc ? aggFunc : 'Select ')))));
 };
+exports.SettingsSection = SettingsSection;

package/src/View/Charting/ChartingWizard/AgChargingWizard/index.js

@@ -1 +1,4 @@
-export * from './AgChargingWizard';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./AgChargingWizard"), exports);

package/src/View/Charting/ChartingWizard/ChartingWizard.js

@@ -1,16 +1,20 @@
-import { __rest } from "tslib";
-import * as React from 'react';
-import { isAgChartDefinition, } from '../../../PredefinedConfig/ChartingState';
-import { AgChargingWizard } from './AgChargingWizard';
-import { ExternalChartingWizard } from './ExternalChartingWizard';
-export const ChartingWizard = (props) => {
-    const { data, configEntities } = props, other = __rest(props, ["data", "configEntities"]);
-    if (isAgChartDefinition(data)) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChartingWizard = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const ChartingState_1 = require("../../../PredefinedConfig/ChartingState");
+const AgChargingWizard_1 = require("./AgChargingWizard");
+const ExternalChartingWizard_1 = require("./ExternalChartingWizard");
+const ChartingWizard = (props) => {
+    const { data, configEntities } = props, other = tslib_1.__rest(props, ["data", "configEntities"]);
+    if ((0, ChartingState_1.isAgChartDefinition)(data)) {
         const chartDef = data;
-        return (React.createElement(AgChargingWizard, Object.assign({}, other, { data: chartDef })));
+        return (React.createElement(AgChargingWizard_1.AgChargingWizard, Object.assign({}, other, { data: chartDef })));
     }
     else {
         const chartDef = data;
-        return (React.createElement(ExternalChartingWizard, Object.assign({}, other, { data: chartDef })));
+        return (React.createElement(ExternalChartingWizard_1.ExternalChartingWizard, Object.assign({}, other, { data: chartDef })));
     }
 };
+exports.ChartingWizard = ChartingWizard;

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/ExternalChartingWizard.js

@@ -1,10 +1,14 @@
-import * as React from 'react';
-import { Box } from 'rebass';
-import { useAdaptable } from '../../../AdaptableContext';
-import { OnePageAdaptableWizard } from '../../../Wizard/OnePageAdaptableWizard';
-import { isSettingsValid, SettingsSection } from './SettingsSection';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExternalChartingWizard = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const SettingsSection_1 = require("./SettingsSection");
 const PreviewChartSection = ({ chartDefinition }) => {
-    const adaptable = useAdaptable();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const divRef = React.useRef(null);
     React.useEffect(() => {
         if (!divRef.current) {
@@ -21,9 +25,9 @@ const PreviewChartSection = ({ chartDefinition }) => {
     }, [divRef]);
     return React.createElement("div", { ref: divRef });
 };
-export const ExternalChartingWizard = (props) => {
+const ExternalChartingWizard = (props) => {
     var _a;
-    const adaptable = useAdaptable();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const onPreviewChart = (_a = adaptable.api.optionsApi.getChartingOptions().externalChartingOptions) === null || _a === void 0 ? void 0 : _a.onPreviewChart;
     const [chartDefinition, setChartDefinition] = React.useState(() => {
         var _a, _b;
@@ -33,22 +37,23 @@ export const ExternalChartingWizard = (props) => {
         adaptable.api.chartingApi.editExternalChartDefinition(chartDefinition);
         props.onFinishWizard(props.data);
     };
-    return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: chartDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: chartDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 details: 'Chart Settings',
-                isValid: isSettingsValid,
-                render: () => (React.createElement(Box, { padding: 2 },
-                    React.createElement(SettingsSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }))),
+                isValid: SettingsSection_1.isSettingsValid,
+                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                    React.createElement(SettingsSection_1.SettingsSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }))),
             },
             onPreviewChart
                 ? {
                     title: 'Preview Chart',
                     render: () => {
-                        return (React.createElement(Box, { padding: 2 },
+                        return (React.createElement(rebass_1.Box, { padding: 2 },
                             React.createElement(PreviewChartSection, { chartDefinition: chartDefinition })));
                     },
                 }
                 : null,
         ].filter(Boolean) }));
 };
+exports.ExternalChartingWizard = ExternalChartingWizard;

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/SettingsSection.js

@@ -1,7 +1,11 @@
-import React from 'react';
-import FormLayout, { FormRow } from '../../../../components/FormLayout';
-import AdaptableInput from '../../../Components/AdaptableInput';
-export const isSettingsValid = (chartDefinition, api) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsSection = exports.isSettingsValid = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const AdaptableInput_1 = tslib_1.__importDefault(require("../../../Components/AdaptableInput"));
+const isSettingsValid = (chartDefinition, api) => {
     if (!chartDefinition.Name) {
         return 'Name is mandatory';
     }
@@ -12,8 +16,10 @@ export const isSettingsValid = (chartDefinition, api) => {
     }
     return true;
 };
-export const SettingsSection = (props) => {
-    return (React.createElement(FormLayout, null,
-        React.createElement(FormRow, { label: "Name" },
-            React.createElement(AdaptableInput, { value: props.chartDefinition.Name, onChange: (e) => props.onChange(Object.assign(Object.assign({}, props.chartDefinition), { Name: e.target.value })) }))));
+exports.isSettingsValid = isSettingsValid;
+const SettingsSection = (props) => {
+    return (react_1.default.createElement(FormLayout_1.default, null,
+        react_1.default.createElement(FormLayout_1.FormRow, { label: "Name" },
+            react_1.default.createElement(AdaptableInput_1.default, { value: props.chartDefinition.Name, onChange: (e) => props.onChange(Object.assign(Object.assign({}, props.chartDefinition), { Name: e.target.value })) }))));
 };
+exports.SettingsSection = SettingsSection;

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/index.js

@@ -1 +1,4 @@
-export * from './ExternalChartingWizard';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./ExternalChartingWizard"), exports);

package/src/View/Charting/ChartingWizard/index.js

@@ -1 +1,4 @@
-export * from './ChartingWizard';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./ChartingWizard"), exports);

package/src/View/Charting/DeleteChartButton.js

@@ -1,9 +1,14 @@
-import * as React from 'react';
-import { ButtonDelete } from '../Components/Buttons/ButtonDelete';
-import * as ChartingRedux from '../../Redux/ActionsReducers/ChartingRedux';
-import { isAgChartDefinition } from '../../PredefinedConfig/ChartingState';
-export const DeleteChartButton = (props) => {
-    return (React.createElement(ButtonDelete, { iconSize: props.iconSize, disabled: !props.chart, ConfirmAction: isAgChartDefinition(props.chart)
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeleteChartButton = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
+const ChartingRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ChartingRedux"));
+const ChartingState_1 = require("../../PredefinedConfig/ChartingState");
+const DeleteChartButton = (props) => {
+    return (React.createElement(ButtonDelete_1.ButtonDelete, { iconSize: props.iconSize, disabled: !props.chart, ConfirmAction: (0, ChartingState_1.isAgChartDefinition)(props.chart)
             ? ChartingRedux.ChartingDeleteChart(props.chart)
             : ChartingRedux.ChartingDeleteExternalChart(props.chart), ConfirmationMsg: `Are you sure you want to delete this Charts?`, ConfirmationTitle: 'Delete Charts', accessLevel: props.accessLevel, tooltip: "Delete Chart" }));
 };
+exports.DeleteChartButton = DeleteChartButton;

package/src/View/Charting/EditChartButton.js

@@ -1,11 +1,15 @@
-import * as React from 'react';
-import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
-import { ButtonEdit } from '../Components/Buttons/ButtonEdit';
-import * as ModuleConstants from '../../Utilities/Constants/ModuleConstants';
-import { useDispatch } from 'react-redux';
-export const EditChartButton = (props) => {
-    const dispatch = useDispatch();
-    return (React.createElement(ButtonEdit, { iconSize: props.iconSize, tooltip: "Edit Chart", 
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditChartButton = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
+const ButtonEdit_1 = require("../Components/Buttons/ButtonEdit");
+const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
+const react_redux_1 = require("react-redux");
+const EditChartButton = (props) => {
+    const dispatch = (0, react_redux_1.useDispatch)();
+    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', {
@@ -14,3 +18,4 @@ export const EditChartButton = (props) => {
             source: 'Toolbar',
         })) }));
 };
+exports.EditChartButton = EditChartButton;

package/src/View/Charting/ShowChartButton.js

@@ -1,33 +1,37 @@
-import * as React from 'react';
-import SimpleButton from '../../components/SimpleButton';
-import { useAdaptable } from '../AdaptableContext';
-import DropdownButton from '../../components/DropdownButton';
-import { AG_GRID_CHART_WINDOW } from '../../Utilities/Constants/GeneralConstants';
-import { isAgChartDefinition, isExternalChartDefinition, } from '../../PredefinedConfig/ChartingState';
-import { useAgChartState } from './useAgChartState';
-import { useExternalChartState } from './useExternalChartState';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShowChartButton = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
+const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
+const ChartingState_1 = require("../../PredefinedConfig/ChartingState");
+const useAgChartState_1 = require("./useAgChartState");
+const useExternalChartState_1 = require("./useExternalChartState");
 const BaseShowChartButton = (props) => {
     var _a;
-    const adaptable = useAdaptable();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const chartingOptions = (_a = adaptable.adaptableOptions) === null || _a === void 0 ? void 0 : _a.chartingOptions;
     const chartContainers = chartingOptions === null || chartingOptions === void 0 ? void 0 : chartingOptions.chartContainers;
     if (props.chartOpened) {
-        return (React.createElement(SimpleButton, { "data-name": "close-chart-button", onClick: props.onCloseChart, variant: "text", tone: "error", icon: "visibility-off", tooltip: "Hide Chart" }));
+        return (React.createElement(SimpleButton_1.default, { "data-name": "close-chart-button", onClick: props.onCloseChart, variant: "text", tone: "error", icon: "visibility-off", tooltip: "Hide Chart" }));
     }
     if (!(chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.length)) {
-        return (React.createElement(SimpleButton, { "data-name": "show-chart-button", onClick: () => props.onShowChart(), variant: "text", tone: "success", icon: "visibility-on", tooltip: "Show Chart" }));
+        return (React.createElement(SimpleButton_1.default, { "data-name": "show-chart-button", onClick: () => props.onShowChart(), variant: "text", tone: "success", icon: "visibility-on", tooltip: "Show Chart" }));
     }
-    return (React.createElement(DropdownButton, { "data-name": "show-chart-dropdown", variant: "text", columns: ['label'], items: props.containerOptions },
-        React.createElement(SimpleButton, { variant: "raised", tone: "success" }, "Open")));
+    return (React.createElement(DropdownButton_1.default, { "data-name": "show-chart-dropdown", variant: "text", columns: ['label'], items: props.containerOptions },
+        React.createElement(SimpleButton_1.default, { variant: "raised", tone: "success" }, "Open")));
 };
 const ShowAgChartButton = (props) => {
     var _a, _b;
-    const adaptable = useAdaptable();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const chartingOptions = (_a = adaptable.adaptableOptions) === null || _a === void 0 ? void 0 : _a.chartingOptions;
     const chartContainers = chartingOptions === null || chartingOptions === void 0 ? void 0 : chartingOptions.chartContainers;
-    const { isOpen, showChart, closeChart } = useAgChartState(props.chartDefinition);
+    const { isOpen, showChart, closeChart } = (0, useAgChartState_1.useAgChartState)(props.chartDefinition);
     const containerOptions = [
-        Object.assign({ label: (_b = chartingOptions.agGridContainerName) !== null && _b !== void 0 ? _b : AG_GRID_CHART_WINDOW, onClick: () => {
+        Object.assign({ label: (_b = chartingOptions.agGridContainerName) !== null && _b !== void 0 ? _b : GeneralConstants_1.AG_GRID_CHART_WINDOW, onClick: () => {
                 showChart(null);
             } }, (chartContainers
             ? chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.map((contianerDef) => ({
@@ -40,13 +44,13 @@ const ShowAgChartButton = (props) => {
 };
 const ShowExternalChartButton = (props) => {
     var _a;
-    const adaptable = useAdaptable();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const chartingOptions = (_a = adaptable.adaptableOptions) === null || _a === void 0 ? void 0 : _a.chartingOptions;
     const chartContainers = chartingOptions === null || chartingOptions === void 0 ? void 0 : chartingOptions.chartContainers;
     /**
      * Need to refresh after the chart is closed/opened
      */
-    const { isOpen, showChart: onShow, hideChart: onHide, } = useExternalChartState(props.chartDefinition);
+    const { isOpen, showChart: onShow, hideChart: onHide, } = (0, useExternalChartState_1.useExternalChartState)(props.chartDefinition);
     const containerOptions = chartContainers
         ? chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.map((contianerDef) => ({
             label: contianerDef.name,
@@ -55,12 +59,13 @@ const ShowExternalChartButton = (props) => {
         : [];
     return (React.createElement(BaseShowChartButton, { chartOpened: isOpen, onShowChart: onShow, onCloseChart: onHide, containerOptions: containerOptions }));
 };
-export const ShowChartButton = (props) => {
-    if (isAgChartDefinition(props.data)) {
+const ShowChartButton = (props) => {
+    if ((0, ChartingState_1.isAgChartDefinition)(props.data)) {
         return React.createElement(ShowAgChartButton, { chartDefinition: props.data });
     }
-    if (isExternalChartDefinition(props.data)) {
+    if ((0, ChartingState_1.isExternalChartDefinition)(props.data)) {
         return React.createElement(ShowExternalChartButton, { chartDefinition: props.data });
     }
     return React.createElement(React.Fragment, null);
 };
+exports.ShowChartButton = ShowChartButton;

package/src/View/Charting/useAgChartState.js

@@ -1,11 +1,15 @@
-import * as React from 'react';
-import { useSelector } from 'react-redux';
-import { useAdaptable } from '../AdaptableContext';
-import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
-export const useAgChartState = (chartDefinition) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAgChartState = 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 SystemRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/SystemRedux"));
+const useAgChartState = (chartDefinition) => {
     const [chartRef, setChartRef] = React.useState(null);
-    const adaptable = useAdaptable();
-    const currentChartModels = useSelector((state) => SystemRedux.SystemChartingCurrentChartModelsSelector(state.System));
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const currentChartModels = (0, react_redux_1.useSelector)((state) => SystemRedux.SystemChartingCurrentChartModelsSelector(state.System));
     React.useEffect(() => {
         var _a, _b;
         if (!chartDefinition) {
@@ -68,3 +72,4 @@ export const useAgChartState = (chartDefinition) => {
         closeChart,
     };
 };
+exports.useAgChartState = useAgChartState;

package/src/View/Charting/useChartingElements.js

@@ -1,20 +1,24 @@
-import * as React from 'react';
-import { useSelector } from 'react-redux';
-import DropdownButton from '../../components/DropdownButton';
-import SimpleButton from '../../components/SimpleButton';
-import { isAgChartDefinition } from '../../PredefinedConfig/ChartingState';
-import * as ChartingRedux from '../../Redux/ActionsReducers/ChartingRedux';
-import AdaptableHelper from '../../Utilities/Helpers/AdaptableHelper';
-import { useAdaptable } from '../AdaptableContext';
-import { DeleteChartButton } from './DeleteChartButton';
-import { EditChartButton } from './EditChartButton';
-import { useAgChartState } from './useAgChartState';
-import { useExternalChartState } from './useExternalChartState';
-export const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) => {
-    var _a, _b;
-    const adaptable = useAdaptable();
-    const chartDefinitions = useSelector(ChartingRedux.ChartingGetChartModels);
-    const extenralChartDefinitions = useSelector(ChartingRedux.ChartingGetExternalChartDefinitions);
+"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 Select_1 = require("../../components/Select");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const ChartingState_1 = require("../../PredefinedConfig/ChartingState");
+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 DeleteChartButton_1 = require("./DeleteChartButton");
+const EditChartButton_1 = require("./EditChartButton");
+const useAgChartState_1 = require("./useAgChartState");
+const useExternalChartState_1 = require("./useExternalChartState");
+const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) => {
+    var _a;
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const chartDefinitions = (0, react_redux_1.useSelector)(ChartingRedux.ChartingGetChartModels);
+    const extenralChartDefinitions = (0, react_redux_1.useSelector)(ChartingRedux.ChartingGetExternalChartDefinitions);
     const allChartDefinitions = [...chartDefinitions, ...extenralChartDefinitions];
     const chartingOptions = (_a = adaptable.adaptableOptions) === null || _a === void 0 ? void 0 : _a.chartingOptions;
     const chartContainers = chartingOptions === null || chartingOptions === void 0 ? void 0 : chartingOptions.chartContainers;
@@ -23,13 +27,13 @@ export const useChartingElements = ({ elementType, accessLevel, size = 'normal',
         return allChartDefinitions.length > 0 ? allChartDefinitions[0].Uuid : null;
     });
     const selectedChart = allChartDefinitions.find((chart) => chart.Uuid === selectedChartId);
-    const isAgChart = isAgChartDefinition(selectedChart);
-    const chartAccessLevel = AdaptableHelper.getAppropriateAccessLevel(selectedChart, accessLevel);
+    const isAgChart = (0, ChartingState_1.isAgChartDefinition)(selectedChart);
+    const chartAccessLevel = AdaptableHelper_1.default.getAppropriateAccessLevel(selectedChart, accessLevel);
     const [selectedContainer, setSelectedContainer] = React.useState(null);
     // Need to always call as they the rule for hooks
-    const { isOpen: isAgChartOpen, showChart: showAgChart, closeChart: hideAgChart, } = useAgChartState(isAgChart ? selectedChart : undefined);
+    const { isOpen: isAgChartOpen, showChart: showAgChart, closeChart: hideAgChart, } = (0, useAgChartState_1.useAgChartState)(isAgChart ? selectedChart : undefined);
     // Need to always call as they the rule for hooks
-    const { isOpen: isExternalChartOpened, showChart: showExternalChart, hideChart: hideExternalChart, } = useExternalChartState(!isAgChart ? selectedChart : undefined);
+    const { isOpen: isExternalChartOpened, showChart: showExternalChart, hideChart: hideExternalChart, } = (0, useExternalChartState_1.useExternalChartState)(!isAgChart ? selectedChart : undefined);
     const isOpen = isAgChart ? isAgChartOpen : isExternalChartOpened;
     const showChart = isAgChart ? showAgChart : showExternalChart;
     const hideChart = isAgChart ? hideAgChart : hideExternalChart;
@@ -61,17 +65,13 @@ export const useChartingElements = ({ elementType, accessLevel, size = 'normal',
     let containerOptions = chartContainers
         ? chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.map((contianerDef) => ({
             label: contianerDef.name,
-            onClick: () => {
-                setSelectedContainer(contianerDef);
-            },
+            value: contianerDef.name,
         }))
         : [];
-    if (isAgChartDefinition(selectedChart)) {
+    if ((0, ChartingState_1.isAgChartDefinition)(selectedChart)) {
         containerOptions.unshift({
             label: chartingOptions.agGridContainerName,
-            onClick: () => {
-                setSelectedContainer(null);
-            },
+            value: null,
         });
     }
     const style = {};
@@ -81,11 +81,13 @@ export const useChartingElements = ({ elementType, accessLevel, size = 'normal',
         style.fontSize = 'small';
         iconSize = 15;
     }
-    const chartSelector = (React.createElement(DropdownButton, { style: style, width: "100%", columns: ['label'], className: `ab-${elementType}__Chart__select`, items: options, disabled: !hasCharts }, selectedChartValue));
-    const containerSelector = Boolean(chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.length) && (React.createElement(DropdownButton, { style: style, width: "100%", columns: ['label'], items: containerOptions, disabled: !isSelectedChart }, (_b = selectedContainer === null || selectedContainer === void 0 ? void 0 : selectedContainer.name) !== null && _b !== void 0 ? _b : 'Select Container'));
-    const chartButton = (React.createElement(SimpleButton, { style: style, mr: 1, onClick: () => (isOpen ? hideChart() : showChart(selectedContainer)), disabled: !Boolean(selectedChart), variant: 'text', tone: 'neutral', icon: isOpen ? 'visibility-off' : 'visibility-on', tooltip: isOpen ? 'Hide Chart' : 'Show Chart' }));
-    const deleteButton = (React.createElement(DeleteChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel }));
-    const editButton = (React.createElement(EditChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel, isOpen: isOpen }));
+    const chartSelector = (React.createElement(Select_1.Select, { className: `ab-${elementType}__Chart__select`, size: size, value: selectedChartId, options: options, placeholder: 'Select Chart', disabled: !hasCharts, onChange: (chartUuid) => setSelectedChartId(chartUuid) }));
+    const containerSelector = Boolean(chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.length) && (React.createElement(Select_1.Select, { value: selectedContainer === null || selectedContainer === void 0 ? void 0 : selectedContainer.name, size: size, onChange: (containerName) => {
+            setSelectedContainer(chartContainers.find((containerOption) => containerOption.name === containerName));
+        }, options: containerOptions, placeholder: "Select Container" }));
+    const chartButton = (React.createElement(SimpleButton_1.default, { style: style, mr: 1, onClick: () => (isOpen ? hideChart() : showChart(selectedContainer)), disabled: !Boolean(selectedChart), variant: 'text', tone: 'neutral', icon: isOpen ? 'visibility-off' : 'visibility-on', tooltip: isOpen ? 'Hide Chart' : 'Show Chart' }));
+    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,
@@ -95,3 +97,4 @@ export const useChartingElements = ({ elementType, accessLevel, size = 'normal',
         selectedChart,
     };
 };
+exports.useChartingElements = useChartingElements;

package/src/View/Charting/useExternalChartState.js

@@ -1,12 +1,16 @@
-import React from 'react';
-import { useAdaptable } from '../AdaptableContext';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExternalChartState = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const AdaptableContext_1 = require("../AdaptableContext");
 // need to trigger other show-chart buttons to close/hide
 const buttonChangeSubscribers = [];
-export const useExternalChartState = (chartDefinition) => {
-    const adaptable = useAdaptable();
+const useExternalChartState = (chartDefinition) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     // needs to update when ever a chart is:
     // - opened, hidden
-    const [isOpen, setIsOpen] = React.useState(() => {
+    const [isOpen, setIsOpen] = react_1.default.useState(() => {
         return (chartDefinition &&
             adaptable.api.chartingApi.internalApi.isExternalChartOpened(chartDefinition));
     });
@@ -14,11 +18,11 @@ export const useExternalChartState = (chartDefinition) => {
     if (liveChartState !== isOpen) {
         setIsOpen(liveChartState);
     }
-    const updateIsOpen = React.useCallback(() => {
+    const updateIsOpen = react_1.default.useCallback(() => {
         setIsOpen(chartDefinition &&
             adaptable.api.chartingApi.internalApi.isExternalChartOpened(chartDefinition));
     }, [chartDefinition]);
-    React.useEffect(() => {
+    react_1.default.useEffect(() => {
         const subscriber = () => {
             updateIsOpen();
         };
@@ -49,3 +53,4 @@ export const useExternalChartState = (chartDefinition) => {
         isOpen,
     };
 };
+exports.useExternalChartState = useExternalChartState;