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

package/src/View/Components/Buttons/ButtonDelete.d.ts

@@ -5,7 +5,7 @@ import { UIConfirmation } from '../../../Utilities/Interface/MessagePopups';
 import { SimpleButtonProps } from '../../../components/SimpleButton';
 export interface DeleteButtonProps extends SimpleButtonProps {
     onConfirmWarning?: (confirmation: UIConfirmation) => PopupRedux.PopupShowConfirmationAction;
-    ConfirmAction: Redux.Action;
+    ConfirmAction?: Redux.Action;
     ConfirmationMsg: string;
     ConfirmationTitle: string;
     onClickAction?: () => void;

package/src/View/Components/Buttons/ButtonEdit.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { SimpleButtonProps } from '../../../components/SimpleButton';
-export declare const ButtonEdit: React.FunctionComponent<SimpleButtonProps>;
+export declare const ButtonEdit: React.FunctionComponent<React.PropsWithChildren<SimpleButtonProps>>;

package/src/View/Components/Buttons/ButtonInfo.d.ts

@@ -4,6 +4,4 @@ export interface InfoButtonProps extends SimpleButtonProps {
     glyph?: string;
     tooltip?: string;
 }
-export declare class ButtonInfo extends React.Component<InfoButtonProps, {}> {
-    render(): JSX.Element;
-}
+export declare const ButtonInfo: React.FunctionComponent<InfoButtonProps>;

package/src/View/Components/Buttons/ButtonInfo.js

@@ -4,9 +4,7 @@ exports.ButtonInfo = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-class ButtonInfo extends React.Component {
-    render() {
-        return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "info", iconSize: 20, icon: "info", variant: "text" }, this.props)));
-    }
-}
+const ButtonInfo = (props) => {
+    return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "info", iconSize: 20, icon: "info", variant: "raised", tone: "accent" }, props)));
+};
 exports.ButtonInfo = ButtonInfo;

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

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

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

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

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

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

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

@@ -0,0 +1,95 @@
+"use strict";
+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 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 }));
+    if (elementType === 'DashboardToolbar') {
+        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)));
+    }
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column", width: "100%" },
+        React.createElement(rebass_1.Box, { mb: 1 }, chartSelector),
+        containerSelector && React.createElement(rebass_1.Box, { mb: 1 }, containerSelector),
+        React.createElement(rebass_1.Box, null,
+            chartButton,
+            " ",
+            deleteButton,
+            " ",
+            editButton)));
+};
+exports.ChartingViewPanel = ChartingViewPanel;

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { ChartDefinition } from '../../../../types';
+import { AdaptableOnePageWizardProps } from '../../../Wizard/Interface/IAdaptableWizard';
+export interface ChartingWizardProps extends AdaptableOnePageWizardProps<ChartDefinition> {
+}
+export declare const ChartingWizard: React.FunctionComponent<ChartingWizardProps>;

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

@@ -0,0 +1,37 @@
+"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 rebass_1 = require("rebass");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const PreviewChartSection_1 = require("./PreviewChartSection");
+const SettingsSection_1 = require("./SettingsSection");
+const ChartingWizard = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    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 = React.useCallback(() => {
+        adaptable.api.chartingApi.editChartDefinition(chartDefinition);
+        props.onFinishWizard(chartDefinition);
+    }, [chartDefinition]);
+    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 }))),
+            },
+            {
+                title: 'Preview Chart',
+                details: 'Chart Preview',
+                render: () => (React.createElement(rebass_1.Box, { p: 2 },
+                    React.createElement(PreviewChartSection_1.PreviewChartSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }))),
+            },
+        ] }));
+};
+exports.ChartingWizard = ChartingWizard;

package/src/View/Components/Charting/ChartingWizard/PreviewChartSection.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { ChartDefinition } from '../../../../types';
+export declare const PreviewChartSection: React.FunctionComponent<{
+    chartDefinition: ChartDefinition;
+    onChange: (chartDefinition: ChartDefinition) => void;
+}>;

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

@@ -0,0 +1,34 @@
+"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 = (0, AdaptableContext_1.useAdaptable)();
+    const divRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!divRef.current) {
+            return;
+        }
+        const chartRef = adaptable.api.chartingApi.showChartDefinition(props.chartDefinition, divRef.current);
+        setLocalChartId(chartRef.chartId);
+        chartRef.chart;
+        return () => {
+            chartRef.destroyChart();
+        };
+    }, [divRef]);
+    React.useEffect(() => {
+        const model = currentChartModels.find((model) => model.chartId == localChartId);
+        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/Components/Charting/ChartingWizard/SettingsSection.d.ts

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

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

@@ -0,0 +1,53 @@
+"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("../../AdaptableInput"));
+const isSettingsValid = (chartDefinition, api) => {
+    if (!chartDefinition.Name) {
+        return 'Name is mandatory';
+    }
+    const allChartDefinitions = api.chartingApi.getChartDefinitions();
+    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) => {
+    const handleNameChange = React.useCallback((event) => {
+        props.onChange(Object.assign(Object.assign({}, props.chartDefinition), { Name: event.target.value, Model: props.chartDefinition.Model }));
+    }, [props.chartDefinition]);
+    const handleUnLinkChange = React.useCallback(() => {
+        props.onChange(Object.assign(Object.assign({}, props.chartDefinition), { Model: Object.assign(Object.assign({}, props.chartDefinition.Model), { unlinkChart: !props.chartDefinition.Model.unlinkChart }) }));
+    }, [props.chartDefinition]);
+    const handleSuppressChartRanges = React.useCallback(() => {
+        props.onChange(Object.assign(Object.assign({}, props.chartDefinition), { Model: Object.assign(Object.assign({}, props.chartDefinition.Model), { suppressChartRanges: !props.chartDefinition.Model.suppressChartRanges }) }));
+    }, [props.chartDefinition]);
+    const aggFuncs = ['sum', 'min', 'max', 'count', 'avg', 'first', 'last'];
+    const aggFuncsOptions = aggFuncs.map((aggFunc) => ({
+        label: aggFunc,
+        onClick: () => {
+            props.onChange(Object.assign(Object.assign({}, props.chartDefinition), { Model: Object.assign(Object.assign({}, props.chartDefinition.Model), { aggFunc }) }));
+        },
+    }));
+    const aggFunc = props.chartDefinition.Model.aggFunc;
+    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_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/Components/Charting/DeleteChartButton.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { AccessLevel, ChartDefinition } from '../../../types';
+export interface ButtonDeleteProps {
+    chart: ChartDefinition;
+    accessLevel: AccessLevel;
+}
+export declare const DeleteChartButton: React.FunctionComponent<ButtonDeleteProps>;

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

@@ -0,0 +1,12 @@
+"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("../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 }));
+};
+exports.DeleteChartButton = DeleteChartButton;

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { AccessLevel, ChartDefinition } from '../../../types';
+export interface EditChartButtonProps {
+    chart: ChartDefinition;
+    accessLevel: AccessLevel;
+    isOpen: boolean;
+}
+export declare const EditChartButton: React.FunctionComponent<EditChartButtonProps>;

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

@@ -0,0 +1,21 @@
+"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("../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, { 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', {
+            action: 'Edit',
+            value: props.chart,
+            source: 'Toolbar',
+        })) }));
+};
+exports.EditChartButton = EditChartButton;

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { AdaptableObject } from '../../../types';
+export declare const ShowChartButton: React.FunctionComponent<{
+    data: AdaptableObject;
+}>;

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

@@ -0,0 +1,38 @@
+"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 useChartState_1 = require("./useChartState");
+const ShowChartButton = (props) => {
+    var _a, _b;
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const chartContainers = (_b = (_a = adaptable.adaptableOptions) === null || _a === void 0 ? void 0 : _a.chartingOptions) === null || _b === void 0 ? void 0 : _b.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: "raised", tone: "error" }, "Close"));
+    }
+    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" }, "Open"));
+    }
+    const containerOptions = [
+        {
+            label: 'Ag Grid Window',
+            onClick: () => {
+                showChart(null);
+            },
+        },
+        ...(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")));
+};
+exports.ShowChartButton = ShowChartButton;

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

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

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChartState = 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 LoggingHelper_1 = require("../../../Utilities/Helpers/LoggingHelper");
+const useChartState = (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));
+    React.useEffect(() => {
+        var _a;
+        if (!chartDefinition) {
+            setChartRef(null);
+            return;
+        }
+        const currentChartRef = (_a = adaptable.api.chartingApi.getChartRef(chartDefinition.Model.chartId)) !== null && _a !== void 0 ? _a : null;
+        setChartRef(currentChartRef);
+    }, [currentChartModels, chartDefinition]);
+    const handleShowChart = React.useCallback((chartContainer) => {
+        if (!adaptable || !chartDefinition) {
+            return;
+        }
+        const element = typeof (chartContainer === null || chartContainer === void 0 ? void 0 : chartContainer.element) === 'string'
+            ? document.querySelector(chartContainer.element)
+            : chartContainer === null || chartContainer === void 0 ? void 0 : chartContainer.element;
+        if (!element && typeof (chartContainer === null || chartContainer === void 0 ? void 0 : chartContainer.element) === 'string') {
+            (0, LoggingHelper_1.ConsoleLogByMessageType)(`Chart container element not found: ${chartContainer.element}`, 'Error');
+            return;
+        }
+        const chartRef = adaptable.api.chartingApi.getChartRef(chartDefinition.Model.chartId);
+        if (chartRef) {
+            // chart alredy opened
+            return;
+        }
+        /**
+         * When using a custom container, make sure multiple charts are not opnoed in the same container.
+         * 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();
+                }
+            }
+            adaptable.api.chartingApi.showChartDefinitionOnce(chartDefinition, element);
+        }
+        else {
+            adaptable.api.chartingApi.showChartDefinitionOnce(chartDefinition);
+        }
+    }, [chartDefinition, currentChartModels]);
+    const handleCloseChart = React.useCallback(() => {
+        if (chartRef) {
+            chartRef.destroyChart();
+        }
+    }, [chartRef]);
+    return {
+        isOpen: Boolean(chartRef),
+        showChart: handleShowChart,
+        closeChart: handleCloseChart,
+    };
+};
+exports.useChartState = useChartState;

package/src/View/Components/EntityRulesEditor/PredicatesEditor.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { AdaptablePredicateDef, AdaptableScope } from '../../../types';
+import { EntityRulesEditorProps, RuleType } from './index';
+export interface PredicatesEditorProps {
+    descriptions: EntityRulesEditorProps<any>['descriptions'];
+    data: {
+        Rule: RuleType;
+        Scope: AdaptableScope;
+    };
+    onChange: (data: {
+        Rule: RuleType;
+        Scope: AdaptableScope;
+    }) => void;
+    predicateDefs: AdaptablePredicateDef[];
+}
+export declare const PredicatesEditor: React.FunctionComponent<PredicatesEditorProps>;

package/src/View/Components/EntityRulesEditor/PredicatesEditor.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PredicatesEditor = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
+const AdaptableContext_1 = require("../../AdaptableContext");
+const ButtonInfo_1 = require("../Buttons/ButtonInfo");
+const DocumentationLinkConstants_1 = require("../../../Utilities/Constants/DocumentationLinkConstants");
+const PredicateEditor_1 = require("../PredicateEditor/PredicateEditor");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const Tag_1 = require("../../../components/Tag");
+const PredicatesEditor = (props) => {
+    var _a, _b, _c, _d;
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
+    const predicateDefs = props.predicateDefs
+        // filter out already used ones
+        .filter((predicateDef) => {
+        var _a, _b;
+        return !((_b = (_a = props.data.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.some((item) => item.PredicateId === predicateDef.id));
+    });
+    const handleAddNewPredicate = () => {
+        var _a;
+        props.onChange(Object.assign(Object.assign({}, props.data), { Rule: {
+                Predicates: [
+                    ...(((_a = props.data.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) || []),
+                    {
+                        PredicateId: predicateDefs[0].id,
+                        Inputs: [],
+                    },
+                ],
+            } }));
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(rebass_1.Flex, { mb: 2, justifyContent: "space-between" },
+            React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, props.descriptions.selectPredicate),
+            React.createElement(SimpleButton_1.default, { disabled: !((_b = (_a = props.data.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.length), onClick: handleAddNewPredicate, icon: "plus", variant: "raised" }, "Add Predicate")),
+        (((_d = (_c = props.data.Rule) === null || _c === void 0 ? void 0 : _c.Predicates) === null || _d === void 0 ? void 0 : _d.length) ? props.data.Rule.Predicates : [null]).map((predicate, index) => {
+            var _a, _b;
+            const handleClear = () => {
+                var _a, _b;
+                const newPredicates = (_b = (_a = props.data.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.filter((prevPredicate) => prevPredicate !== predicate);
+                props.onChange(Object.assign(Object.assign({}, props.data), { Rule: {
+                        Predicates: newPredicates,
+                    } }));
+            };
+            const predicateDefsIncludingCurrent = [...predicateDefs];
+            const currentPredicateDef = props.predicateDefs.find((item) => item.id === (predicate === null || predicate === void 0 ? void 0 : predicate.PredicateId));
+            if (currentPredicateDef) {
+                predicateDefsIncludingCurrent.push(currentPredicateDef);
+            }
+            return (React.createElement(rebass_1.Box, { mb: 3, key: index },
+                index > 0 && React.createElement(Tag_1.Tag, { mb: 2 }, "AND"),
+                React.createElement(rebass_1.Flex, { justifyContent: "center", alignItems: "flex-start", width: "100%" },
+                    React.createElement(rebass_1.Box, { flex: 1 },
+                        React.createElement(PredicateEditor_1.PredicateEditor, { columnId: 'ColumnIds' in props.data.Scope ? (_b = (_a = props.data.Scope) === null || _a === void 0 ? void 0 : _a.ColumnIds) === null || _b === void 0 ? void 0 : _b[0] : null, predicateDefs: predicateDefsIncludingCurrent, predicate: predicate, onChange: (newPredicateDef) => {
+                                var _a, _b;
+                                let newPredicates = [];
+                                if (predicate) {
+                                    newPredicates = (_b = (_a = props.data.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.map((prevPredicate) => {
+                                        if (prevPredicate === predicate) {
+                                            return newPredicateDef;
+                                        }
+                                        return prevPredicate;
+                                    });
+                                }
+                                else {
+                                    // no previous predicate, e.g. it was cleared
+                                    newPredicates = [newPredicateDef];
+                                }
+                                props.onChange(Object.assign(Object.assign({}, props.data), { Rule: {
+                                        Predicates: newPredicates,
+                                    } }));
+                            }, onClear: handleClear })),
+                    React.createElement(SimpleButton_1.default, { disabled: !predicate, ml: 2, onClick: handleClear, icon: "delete" }))));
+        }),
+        showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", mt: 3, mb: 2, style: {
+                fontSize: 'var(--ab-font-size-3)',
+                padding: 0,
+            } },
+            React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, onClick: () => window.open(DocumentationLinkConstants_1.PredicateDocsLink, '_blank') }),
+            "See Predicate documentation for more details and examples"))));
+};
+exports.PredicatesEditor = PredicatesEditor;

package/src/View/Components/EntityRulesEditor/Utilities.d.ts

@@ -0,0 +1,6 @@
+import { AdaptableApi } from '../../../types';
+import { OnePageAdaptableWizardContextType } from '../../Wizard/OnePageAdaptableWizard';
+import { RuleType } from './index';
+export declare const isRuleValid: (abObject: {
+    Rule?: RuleType;
+}, api: AdaptableApi, context: OnePageAdaptableWizardContextType<unknown>) => true | "The Expression is not a valid Boolean Expression" | "No valid Condition is specified" | "The Predicates are not valid";