@adaptabletools/adaptable 16.0.9 → 16.0.10-canary.0

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

@@ -0,0 +1,59 @@
+"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 = (0, AdaptableContext_1.useAdaptable)();
+    const divRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!divRef.current) {
+            return;
+        }
+        const container = {
+            name: 'Preview Chart',
+            element: divRef.current,
+        };
+        const transientChartDefinition = adaptable.api.chartingApi.internalApi.onPreviewExternalChart(chartDefinition, container);
+        return () => {
+            adaptable.api.chartingApi.internalApi.onHideExternalChart(transientChartDefinition);
+        };
+    }, [divRef]);
+    return React.createElement("div", { ref: divRef });
+};
+const ExternalChartingWizard = (props) => {
+    var _a;
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const onPreviewChart = (_a = adaptable.api.optionsApi.getChartingOptions().externalCharting) === null || _a === void 0 ? void 0 : _a.onPreviewChart;
+    const [chartDefinition, setChartDefinition] = React.useState(() => {
+        var _a, _b;
+        return (_a = props.data) !== null && _a !== void 0 ? _a : (_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.value;
+    });
+    const handleFinish = () => {
+        adaptable.api.chartingApi.editExternalChartDefinition(chartDefinition);
+        props.onFinishWizard(props.data);
+    };
+    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: 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(rebass_1.Box, { padding: 2 },
+                            React.createElement(PreviewChartSection, { chartDefinition: chartDefinition })));
+                    },
+                }
+                : null,
+        ].filter(Boolean) }));
+};
+exports.ExternalChartingWizard = ExternalChartingWizard;

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/SettingsSection.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ExternalChartDefinition } from '../../../../PredefinedConfig/ChartingState';
+import { AdaptableApi } from '../../../../types';
+export declare const isSettingsValid: (chartDefinition: ExternalChartDefinition, api: AdaptableApi) => true | string;
+export interface SettingsSectionProps {
+    chartDefinition: ExternalChartDefinition;
+    onChange: (chartDefinition: ExternalChartDefinition) => void;
+}
+export declare const SettingsSection: React.FunctionComponent<SettingsSectionProps>;

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

@@ -0,0 +1,25 @@
+"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';
+    }
+    const allChartDefinitions = api.chartingApi.getExternalChartDefinitions();
+    if (allChartDefinitions.some((chartDefinitionLoopItem) => chartDefinitionLoopItem.Uuid !== chartDefinition.Uuid &&
+        chartDefinitionLoopItem.Name === chartDefinition.Name)) {
+        return 'There is already a chart with this name';
+    }
+    return true;
+};
+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.d.ts

@@ -0,0 +1 @@
+export * from './ExternalChartingWizard';

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

@@ -0,0 +1,4 @@
+"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.d.ts

@@ -0,0 +1 @@
+export * from './ChartingWizard';

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

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

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { AccessLevel, ChartDefinition } from '../../types';
+import { ExternalChartDefinition } from '../../PredefinedConfig/ChartingState';
 export interface ButtonDeleteProps {
-    chart: ChartDefinition;
+    chart: ChartDefinition | ExternalChartDefinition;
     accessLevel: AccessLevel;
     iconSize?: number;
 }

package/src/View/Charting/DeleteChartButton.js

@@ -5,8 +5,10 @@ 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) => {
-    var _a;
-    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, tooltip: "Delete Chart" }));
+    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.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { AccessLevel, ChartDefinition } from '../../types';
+import { ExternalChartDefinition } from '../../PredefinedConfig/ChartingState';
 export interface EditChartButtonProps {
-    chart: ChartDefinition;
+    chart: ChartDefinition | ExternalChartDefinition;
     accessLevel: AccessLevel;
     isOpen: boolean;
     iconSize?: number;

package/src/View/Charting/ShowChartButton.js

@@ -6,35 +6,66 @@ 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 useChartState_1 = require("./useChartState");
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
-const ShowChartButton = (props) => {
-    var _a, _b;
+const ChartingState_1 = require("../../PredefinedConfig/ChartingState");
+const useAgChartState_1 = require("./useAgChartState");
+const useExternalChartState_1 = require("./useExternalChartState");
+const BaseShowChartButton = (props) => {
+    var _a;
     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 } = (0, useChartState_1.useChartState)(props.data);
-    if (isOpen) {
-        return (React.createElement(SimpleButton_1.default, { "data-name": "close-chart-button", onClick: closeChart, variant: "text", tone: "error", icon: "visibility-off", tooltip: "Hide Chart" }));
+    if (props.chartOpened) {
+        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_1.default, { "data-name": "show-chart-button", onClick: () => showChart(), 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_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 = (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 } = (0, useAgChartState_1.useAgChartState)(props.chartDefinition);
     const containerOptions = [
-        {
-            label: (_b = chartingOptions.agGridContainerName) !== null && _b !== void 0 ? _b : GeneralConstants_1.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
             ? chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.map((contianerDef) => ({
                 label: contianerDef.name,
                 onClick: () => showChart(contianerDef),
             }))
-            : []),
+            : [])),
     ];
-    return (React.createElement(DropdownButton_1.default, { "data-name": "show-chart-dropdown", variant: "text", columns: ['label'], items: containerOptions },
-        React.createElement(SimpleButton_1.default, { variant: "raised", tone: "success" }, "Open")));
+    return (React.createElement(BaseShowChartButton, { chartOpened: isOpen, onShowChart: showChart, onCloseChart: closeChart, containerOptions: containerOptions }));
+};
+const ShowExternalChartButton = (props) => {
+    var _a;
+    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, } = (0, useExternalChartState_1.useExternalChartState)(props.chartDefinition);
+    const containerOptions = chartContainers
+        ? chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.map((contianerDef) => ({
+            label: contianerDef.name,
+            onClick: () => onShow(contianerDef),
+        }))
+        : [];
+    return (React.createElement(BaseShowChartButton, { chartOpened: isOpen, onShowChart: onShow, onCloseChart: onHide, containerOptions: containerOptions }));
+};
+const ShowChartButton = (props) => {
+    if ((0, ChartingState_1.isAgChartDefinition)(props.data)) {
+        return React.createElement(ShowAgChartButton, { chartDefinition: 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/{useChartState.d.ts → useAgChartState.d.ts}

@@ -1,5 +1,5 @@
 import { ChartDefinition } from '../../types';
-export declare const useChartState: (chartDefinition?: ChartDefinition) => {
+export declare const useAgChartState: (chartDefinition?: ChartDefinition) => {
     isOpen: boolean;
     showChart: (chartContainer?: {
         element: HTMLElement | string;

package/src/View/Charting/{useChartState.js → useAgChartState.js}

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useChartState = void 0;
+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 useChartState = (chartDefinition) => {
+const useAgChartState = (chartDefinition) => {
     const [chartRef, setChartRef] = React.useState(null);
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const currentChartModels = (0, react_redux_1.useSelector)((state) => SystemRedux.SystemChartingCurrentChartModelsSelector(state.System));
@@ -31,7 +31,7 @@ const useChartState = (chartDefinition) => {
             }
         }
     };
-    const handleShowChart = React.useCallback((chartContainer) => {
+    const showChart = React.useCallback((chartContainer) => {
         if (!adaptable || !chartDefinition) {
             return;
         }
@@ -61,15 +61,15 @@ const useChartState = (chartDefinition) => {
             adaptable.api.chartingApi.showChartDefinitionOnce(chartDefinition);
         }
     }, [chartDefinition, currentChartModels]);
-    const handleCloseChart = React.useCallback(() => {
+    const closeChart = React.useCallback(() => {
         if (chartRef) {
             chartRef.destroyChart();
         }
     }, [chartRef]);
     return {
         isOpen: Boolean(chartRef),
-        showChart: handleShowChart,
-        closeChart: handleCloseChart,
+        showChart,
+        closeChart,
     };
 };
-exports.useChartState = useChartState;
+exports.useAgChartState = useAgChartState;

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { ExternalChartDefinition } from '../../PredefinedConfig/ChartingState';
 import { AccessLevel, ChartDefinition } from '../../types';
 export declare const useChartingElements: ({ elementType, accessLevel, size, }: {
     elementType: string;
@@ -10,5 +11,5 @@ export declare const useChartingElements: ({ elementType, accessLevel, size, }:
     chartButton: JSX.Element;
     deleteButton: JSX.Element;
     editButton: JSX.Element;
-    selectedChart: ChartDefinition;
+    selectedChart: ChartDefinition | ExternalChartDefinition<unknown>;
 };

package/src/View/Charting/useChartingElements.js

@@ -4,30 +4,40 @@ 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 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 useChartState_1 = require("./useChartState");
+const AdaptableContext_1 = require("../AdaptableContext");
 const DeleteChartButton_1 = require("./DeleteChartButton");
 const EditChartButton_1 = require("./EditChartButton");
-const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
+const useAgChartState_1 = require("./useAgChartState");
+const useExternalChartState_1 = require("./useExternalChartState");
 const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) => {
     var _a, _b;
     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;
     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;
+        return allChartDefinitions.length > 0 ? allChartDefinitions[0].Uuid : null;
     });
-    const selectedChart = chartDefinitions.find((chart) => chart.Uuid === selectedChartId);
+    const selectedChart = allChartDefinitions.find((chart) => chart.Uuid === selectedChartId);
+    const isAgChart = (0, ChartingState_1.isAgChartDefinition)(selectedChart);
     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) => ({
+    // Need to always call as they the rule for hooks
+    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, } = (0, useExternalChartState_1.useExternalChartState)(!isAgChart ? selectedChart : undefined);
+    const isOpen = isAgChart ? isAgChartOpen : isExternalChartOpened;
+    const showChart = isAgChart ? showAgChart : showExternalChart;
+    const hideChart = isAgChart ? hideAgChart : hideExternalChart;
+    const options = allChartDefinitions.map((chartDefinition) => ({
         label: chartDefinition.Name,
         value: chartDefinition.Uuid,
         onClick: () => {
@@ -36,15 +46,15 @@ const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) =>
     }));
     const hasCharts = options.length > 0;
     const isSelectedChart = hasCharts && selectedChart != null;
-    let content = '';
+    let selectedChartValue = '';
     if (hasCharts && selectedChart) {
-        content = (_b = chartDefinitions.find((chart) => chart.Uuid === selectedChart.Uuid)) === null || _b === void 0 ? void 0 : _b.Name;
+        selectedChartValue = selectedChart.Name;
     }
     else if (hasCharts) {
-        content = 'Select Chart';
+        selectedChartValue = 'Select Chart';
     }
     else {
-        content = 'No Charts';
+        selectedChartValue = 'No Charts';
     }
     React.useEffect(() => {
         // select first
@@ -52,22 +62,22 @@ const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) =>
             setSelectedChartId(chartDefinitions[0].Uuid);
         }
     }, [chartDefinitions]);
-    const containerOptions = [
-        {
+    let containerOptions = chartContainers
+        ? chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.map((contianerDef) => ({
+            label: contianerDef.name,
+            onClick: () => {
+                setSelectedContainer(contianerDef);
+            },
+        }))
+        : [];
+    if ((0, ChartingState_1.isAgChartDefinition)(selectedChart)) {
+        containerOptions.unshift({
             label: chartingOptions.agGridContainerName,
             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') {
@@ -75,9 +85,9 @@ const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) =>
         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) || chartingOptions.agGridContainerName || GeneralConstants_1.AG_GRID_CHART_WINDOW));
-    const chartButton = (React.createElement(SimpleButton_1.default, { style: style, mr: 1, onClick: () => (isOpen ? closeChart() : showChart(selectedContainer)), disabled: !Boolean(selectedChart), variant: 'text', tone: 'neutral', icon: isOpen ? 'visibility-off' : 'visibility-on', tooltip: isOpen ? 'Hide Chart' : 'Show Chart' }));
+    const chartSelector = (React.createElement(DropdownButton_1.default, { 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_1.default, { 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_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 {

package/src/View/Charting/useExternalChartState.d.ts

@@ -0,0 +1,7 @@
+import { ExternalChartDefinition } from '../../PredefinedConfig/ChartingState';
+import { ChartContainer } from '../../types';
+export declare const useExternalChartState: (chartDefinition?: ExternalChartDefinition) => {
+    showChart: (container?: ChartContainer) => void;
+    hideChart: () => void;
+    isOpen: boolean;
+};

package/src/View/Charting/useExternalChartState.js

@@ -0,0 +1,56 @@
+"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 = [];
+const useExternalChartState = (chartDefinition) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    // needs to update when ever a chart is:
+    // - opened, hidden
+    const [isOpen, setIsOpen] = react_1.default.useState(() => {
+        return (chartDefinition &&
+            adaptable.api.chartingApi.internalApi.isExternalChartOpened(chartDefinition));
+    });
+    const liveChartState = adaptable.api.chartingApi.internalApi.isExternalChartOpened(chartDefinition);
+    if (liveChartState !== isOpen) {
+        setIsOpen(liveChartState);
+    }
+    const updateIsOpen = react_1.default.useCallback(() => {
+        setIsOpen(chartDefinition &&
+            adaptable.api.chartingApi.internalApi.isExternalChartOpened(chartDefinition));
+    }, [chartDefinition]);
+    react_1.default.useEffect(() => {
+        const subscriber = () => {
+            updateIsOpen();
+        };
+        buttonChangeSubscribers.push(subscriber);
+        // clear own subscriptions
+        return () => {
+            const index = buttonChangeSubscribers.indexOf(subscriber);
+            if (index > -1) {
+                buttonChangeSubscribers.splice(index, 1);
+            }
+        };
+    }, [updateIsOpen]);
+    return {
+        showChart: (container) => {
+            adaptable.api.chartingApi.internalApi.onShowExternalChart(chartDefinition, container);
+            // The small delay allows the library to render the chart before the button is updated
+            requestAnimationFrame(() => {
+                buttonChangeSubscribers.forEach((subscriber) => subscriber());
+            });
+        },
+        hideChart: () => {
+            adaptable.api.chartingApi.internalApi.onHideExternalChart(chartDefinition);
+            // The small delay allows the library to destroy the chart before the button is updated
+            requestAnimationFrame(() => {
+                buttonChangeSubscribers.forEach((subscriber) => subscriber());
+            });
+        },
+        isOpen,
+    };
+};
+exports.useExternalChartState = useExternalChartState;

package/src/View/ColumnInfo/ColumnInfo.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface ColumnInfoProps {
+    selectedColumnId: string;
+}
+export declare const ColumnInfo: React.FunctionComponent<ColumnInfoProps>;