@adaptabletools/adaptable 13.0.10 → 13.1.0-canary.1

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

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

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

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

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

@@ -0,0 +1,79 @@
+"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 AdaptableContext_1 = require("../../AdaptableContext");
+const useChartState_1 = require("./useChartState");
+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 [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.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.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, { onClick: () => (isOpen ? closeChart() : showChart(selectedContainer)), disabled: !Boolean(selectedChart), variant: 'outlined', tone: 'neutral' }, isOpen ? 'Close' : 'Open'));
+    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)));
+    }
+    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)));
+};
+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: 'Preview of the chart',
+                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.getAllChartDefinitions();
+    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/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.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/ExpressionWizard.js

@@ -20,7 +20,7 @@ class ExpressionWizard extends React.Component {
             }, () => this.props.updateGoBackState());
         };
         this.state = {
-            // this is realy horrible but its only way to use the Expression Wizard for both Report (that has Query) and Conditional Style (that has Rule)
+            // this is realy horrible but its only way to use the Expression Wizard for both Report (that has Query) and Format Column (that has Rule)
             // once we move to the new Wizard we can remove this monstrosity
             expression: this.props.callingModule && this.props.callingModule == 'Export'
                 ? (_a = this.props.data.Query) === null || _a === void 0 ? void 0 : _a.BooleanExpression

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupModuleView.js

@@ -14,7 +14,7 @@ const rebass_1 = require("rebass");
 const CheckBox_1 = require("../../../../components/CheckBox");
 const SystemRedux_1 = require("../../../../Redux/ActionsReducers/SystemRedux");
 const AdaptablePopupModuleView = (props) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     /**
      * This triggers an render for each redux change.
      * Not sure yet how to trigger this component to render when an item is edited.
@@ -23,8 +23,8 @@ const AdaptablePopupModuleView = (props) => {
     const [abObjectType, setAbObjectType] = React.useState(null);
     const moduleInfo = props.module.moduleInfo;
     const items = (_a = props.module) === null || _a === void 0 ? void 0 : _a.toViewAll();
-    const moduleViewProperties = props.module.getViewProperties();
-    const EditWizard = (_b = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.getEditWizard) === null || _b === void 0 ? void 0 : _b.call(moduleViewProperties);
+    const moduleViewProperties = (_d = (_c = (_b = props.module) === null || _b === void 0 ? void 0 : _b.getViewProperties) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : {};
+    const EditWizard = (_e = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.getEditWizard) === null || _e === void 0 ? void 0 : _e.call(moduleViewProperties);
     const [isWizardOpen, setIsWizardOpen] = React.useState(() => {
         var _a, _b, _c;
         return (((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'New' ||
@@ -48,7 +48,7 @@ const AdaptablePopupModuleView = (props) => {
         if (((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'New' || ((_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.action) === 'Edit') {
             handleOpenEditPopup();
         }
-    }, [(_c = props.popupParams) === null || _c === void 0 ? void 0 : _c.action]);
+    }, [(_f = props.popupParams) === null || _f === void 0 ? void 0 : _f.action]);
     const emptyView = moduleViewProperties.emptyView;
     let emptyContent = null;
     if (typeof emptyView === 'function') {
@@ -57,11 +57,11 @@ const AdaptablePopupModuleView = (props) => {
     else if (typeof emptyView === 'string') {
         emptyContent = emptyView;
     }
-    const toolTipText = (_d = moduleViewProperties.newTooltipText) !== null && _d !== void 0 ? _d : `Create ${moduleInfo.FriendlyName}`;
+    const toolTipText = (_g = moduleViewProperties.newTooltipText) !== null && _g !== void 0 ? _g : `Create ${moduleInfo.FriendlyName}`;
     // Some modules do not have new button
     // e.g. filter
     let newButton = null;
-    if ((_e = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes) === null || _e === void 0 ? void 0 : _e.length) {
+    if ((_h = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes) === null || _h === void 0 ? void 0 : _h.length) {
         const items = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes.map((abObjectType) => {
             var _a;
             return {
@@ -77,7 +77,8 @@ const AdaptablePopupModuleView = (props) => {
             React.createElement(icons_1.Icon, { name: "plus" }),
             " New"));
     }
-    else if (EditWizard || moduleViewProperties.onOpenEditPopup) {
+    else if (!moduleViewProperties.hideNewButton &&
+        (EditWizard || moduleViewProperties.onOpenEditPopup)) {
         newButton = (React.createElement(ButtonNew_1.ButtonNew, { onClick: () => handleOpenEditPopup(), tooltip: toolTipText, accessLevel: props.accessLevel }));
     }
     const handleWizardClose = () => {

package/src/View/Components/Popups/AdaptableToaster.js

@@ -20,6 +20,8 @@ const showToast = (props) => {
         onClose: () => {
             off();
         },
+    }, {
+        duration: props.adaptableAlert.alertDefinition.AlertProperties.NotificationDuration,
     });
     const content = (React.createElement(AdaptablePopupAlert_1.AdaptablePopupAlert, { headless: true, adaptableAlert: props.adaptableAlert, onClose: () => {
             Toastify_1.toast.dismiss(toastId);

package/src/View/Components/RangesComponent.js

@@ -4,7 +4,7 @@ exports.RangesComponent = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
-const ColorPicker_1 = require("../ColorPicker");
+const ColorPicker_1 = require("../../components/ColorPicker");
 const clamp_1 = tslib_1.__importDefault(require("lodash/clamp"));
 const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
 const CheckBox_1 = require("../../components/CheckBox");

package/src/View/Components/StyleComponent.d.ts

@@ -7,6 +7,7 @@ export interface StyleComponentProps extends React.ClassAttributes<StyleComponen
     style?: CSSProperties;
     api: AdaptableApi;
     headless?: boolean;
+    hidePreview?: boolean;
     Style: AdaptableStyle;
     UpdateStyle: (style: AdaptableStyle) => void;
 }

package/src/View/Components/StyleComponent.js

@@ -5,8 +5,7 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const Enums_1 = require("../../PredefinedConfig/Common/Enums");
 const EnumExtensions_1 = require("../../Utilities/Extensions/EnumExtensions");
-const ColorPicker_1 = require("../ColorPicker");
-const AdaptablePopover_1 = require("../AdaptablePopover");
+const ColorPicker_1 = require("../../components/ColorPicker");
 const rebass_1 = require("rebass");
 const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
 const CheckBox_1 = require("../../components/CheckBox");
@@ -16,6 +15,7 @@ const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout")
 const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
 const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
+const StylePreview_1 = require("../../components/StylePreview");
 class StyleComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -91,10 +91,10 @@ class StyleComponent extends React.Component {
                                         value: enumName,
                                         label: enumName,
                                         onClick: () => this.onFontSizeChange(enumName),
-                                    })), columns: ['label'] }, this.state.componentStyle.FontSize.toString()),
-                                React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: 'Conditional Style: Font Size', bodyText: [
-                                        "Select the size of the font for the Conditional Style.  The default is 'Medium'.",
-                                    ] })))))))))));
+                                    })), columns: ['label'] }, this.state.componentStyle.FontSize.toString()))))))))),
+            !this.props.hidePreview && (React.createElement(rebass_1.Box, null,
+                React.createElement(HelpBlock_1.default, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Preview"),
+                React.createElement(StylePreview_1.StylePreview, { styleObject: this.state.componentStyle })))));
     }
     onShowClassNameChanged(checked) {
         // clear everything

package/src/View/Components/ToolPanel/ToolPanelPopup.js

@@ -26,7 +26,6 @@ class ToolPanelPopupComponent extends React.Component {
         };
     }
     render() {
-        const moduleService = this.props.api.internalApi.getModuleService();
         const entitlementService = this.props.api.internalApi.getEntitlementService();
         // 1. process module buttons
         const selectedModuleButtons = [];

package/src/View/Layout/Wizard/LayoutWizard.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutWizard = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const react_1 = require("react");
 const LayoutRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/LayoutRedux"));
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
@@ -24,7 +23,7 @@ const LayoutWizard = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const allLayouts = adaptable.api.layoutApi.getAllLayout();
     const initialLayout = (_a = props.data) !== null && _a !== void 0 ? _a : (_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.value;
-    const [layout, setLayout] = (0, react_1.useState)(() => {
+    const [layout, setLayout] = React.useState(() => {
         var _a;
         let preparedLayout = null;
         if (initialLayout) {

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection.js

@@ -9,7 +9,7 @@ const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const Tabs_1 = require("../../../components/Tabs");
 const Tag_1 = require("../../../components/Tag");
-const ColorPicker_1 = require("../../ColorPicker");
+const ColorPicker_1 = require("../../../components/ColorPicker");
 const RangesComponent_1 = require("../../Components/RangesComponent");
 const StyleVisualItem_1 = require("../../Components/StyleVisualItem");
 const UIHelper_1 = require("../../UIHelper");

package/src/agGrid/Adaptable.d.ts

@@ -1,4 +1,4 @@
-import { ChartModel, ChartRef, ColDef, ColGroupDef, Column, ExcelStyle, GridOptions, Module, ModuleNames, RowNode } from '@ag-grid-community/core';
+import { ChartRef, ColDef, ColGroupDef, Column, ExcelStyle, GridOptions, Module, ModuleNames, RowNode } from '@ag-grid-community/core';
 import { AdaptableNoCodeWizardOptions, IAdaptableNoCodeWizard } from '../AdaptableInterfaces/AdaptableNoCodeWizard';
 import { AdaptableVariant, IAdaptable } from '../AdaptableInterfaces/IAdaptable';
 import { AdaptableOptions } from '../AdaptableOptions/AdaptableOptions';
@@ -18,6 +18,7 @@ import { SelectedRowInfo } from '../PredefinedConfig/Selection/SelectedRowInfo';
 import { AdaptableTheme } from '../PredefinedConfig/ThemeState';
 import { IAdaptableStore } from '../Redux/Store/Interface/IAdaptableStore';
 import { IModuleCollection } from '../Strategy/Interface/IModule';
+import { ChartDefinition } from '../types';
 import { EmitterCallback } from '../Utilities/Emitter';
 import { IPPStyle } from '../Utilities/Interface/IPPStyle';
 import { LicenseService } from '../Utilities/Services/LicenseService';
@@ -59,6 +60,7 @@ export declare class Adaptable implements IAdaptable {
     MetamodelService: IMetamodelService;
     RowEditService: IRowEditService;
     private LicenseService;
+    private ChartingService;
     embedColumnMenu: boolean;
     gridOptions: GridOptions;
     isInitialised: boolean;
@@ -208,7 +210,7 @@ export declare class Adaptable implements IAdaptable {
     getDisplayValueFromRowNode(rowNode: RowNode, columnId: string): string | undefined;
     getDisplayValueFromRawValue(rowNode: RowNode, columnId: string, rawValue: any): string | undefined;
     private getFormattedValue;
-    private getNormalisedValueFromRowValue;
+    getNormalisedValueFromRawValue(rawValue: any, column: AdaptableColumn): string | number | boolean | Date | unknown;
     getRawValueFromRowNode(rowNode: RowNode, columnId: string): any;
     getDataRowFromRowNode(rowNode: RowNode): any;
     getRowNodeForPrimaryKey(primaryKeyValue: any): any;
@@ -380,8 +382,10 @@ export declare class Adaptable implements IAdaptable {
     private addSyntheticPrimaryKey;
     private addSyntheticPrimaryKeyIfMissing;
     initLicenseService(): LicenseService;
-    showCharts(charts: ChartModel[]): ChartRef[];
-    getChartModels(): ChartModel[];
+    showCharts(chartsDefinitions: ChartDefinition[], chartContainer?: HTMLElement): ChartRef[];
+    showChart(chartDefinition: ChartDefinition, container?: HTMLElement): ChartRef;
+    getChartRef(chartId: string): ChartRef;
+    getChartModels(): import("@ag-grid-community/core").ChartModel[];
     getRowModel(): import("@ag-grid-community/core").RowModelType;
     private getActiveAdaptableAggFuncForCol;
     private registerAdaptableAggFuncs;