gamma-app-controller 1.1.28 → 1.2.0

package/fesm2020/gamma-app-controller.mjs

@@ -96,7 +96,7 @@ const routes = [
     {
         path: '',
         loadChildren: () => Promise.resolve().then(function () { return applicationController_module; }).then((m) => m.PackageApplicationControllerModule),
-    },
+    }
 ];
 class GammaAppControllerModule {
 }
@@ -8852,25 +8852,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class GammaAdvanceChartComponent {
-    constructor(commonService, toastr, kpiService, renderer, el, cdr) {
+    constructor(commonService, toastr, kpiService, renderer, el, cdr, environment) {
         this.commonService = commonService;
         this.toastr = toastr;
         this.kpiService = kpiService;
         this.renderer = renderer;
         this.el = el;
         this.cdr = cdr;
+        this.environment = environment;
         this.chartConfig = {};
         this.page_config = {};
         this.isLoader = true;
         this.creatChartDataSource = undefined;
         this.finalChartDataSource = [];
         this.isFullScreen = false;
+        this.onChartPointClick = new EventEmitter();
         this.customizeTooltip = (info) => ({
             html: `<table width=100% height=30 border=0  style=\'font-size: 13px\'>
-    <tr><td style=\'text-align: left; color: white\'> ${this.commonService.convertToTitleCase(this.chartConfig.argumentField)} :  ${info.argumentText} </td></tr>
-    <tr><td style=\'text-align: left; color: white; padding-top: 5px\'> ${info.seriesName} :
-    ${this.getValue(info.seriesName, info.value)}  </td></tr>
-    </table>`,
+     <tr><td style=\'text-align: left; color: white\'> ${this.commonService.convertToTitleCase(this.chartConfig.argumentField)} :  ${info.argumentText} </td></tr>
+     <tr><td style=\'text-align: left; color: white; padding-top: 5px\'> ${info.seriesName} :
+     ${this.getValue(info.seriesName, info.value)}  </td></tr>
+     </table>`,
         });
         this.customizeText = ({ percentText, item: { argument } }) => `<span style='font-size: 28px'>${percentText}</span><br/>${argument}`;
     }
@@ -8883,6 +8885,7 @@ class GammaAdvanceChartComponent {
         else {
             this.isLoader = true;
             this.page_config = value;
+            this.page_parms = value.titleParams;
             this.chartOrderBy = (value.kpiConfig.descendingOrder) ? value.kpiConfig.descendingOrder : false;
             this.chartDisplayDateFormat = (value.kpiConfig.displayDateFormat) ? value.kpiConfig.displayDateFormat : "MM-DD";
             if (value.kpiConfig.dataSource && value.kpiConfig.dataSource.length !== 0) {
@@ -8930,7 +8933,6 @@ class GammaAdvanceChartComponent {
                     this.isLoader = false;
                 }
                 else if (value.kpiConfig.formate == "hourly") {
-                    debugger;
                     if (value.kpiConfig.dataSource && value.kpiConfig.dataSource.length !== 0) {
                         const sortedData = value.kpiConfig.dataSource
                             .filter(record => record.hour)
@@ -8939,7 +8941,6 @@ class GammaAdvanceChartComponent {
                         const filteredObjects = sortedData.filter(data => data.recordDate === mostRecentRecord.recordDate);
                         this.getHourChart(filteredObjects, value.kpiConfig.dataConfig);
                         this.isChartvisible == true;
-                        this.chartConfig.caption = sortedData[0].recordDate;
                     }
                     else {
                         this.cdr.detectChanges();
@@ -9059,6 +9060,32 @@ class GammaAdvanceChartComponent {
     pointClickHandler(arg) {
         arg.target.select();
     }
+    getAllChartPointClick(event) {
+        let title = this.page_config.kpiConfig.dataConfig.commonConfig['title'];
+        let title_datafield = this.page_config.kpiConfig.dataConfig.commonConfig['dataField'];
+        const title_params = (title_datafield) ? event.target.data[title_datafield] : "";
+        let widget_title = (title) ? title + title_params : title_params;
+        if ('recordDate' in event.target.data) {
+            const recordDate = event.target.data.recordDate;
+            if (this.chartDisplayDateFormat == "MM-DD") {
+                const fullDate = moment$1(recordDate, "MM-DD")
+                    .year(moment$1().year())
+                    .format(this.environment.dataFormat);
+                event.target.data.recordDate = fullDate;
+            }
+        }
+        let obj = {
+            data: event.target.data,
+            keyToPass: this.page_config.kpiConfig.keyToPass,
+            tableTitle: (this.page_parms) ? this.page_parms + widget_title : widget_title,
+            viewId: this.page_config.viewId,
+            drillDownType: "natural",
+            drilldownFrom: this.page_config.viewId,
+            drilldownTo: "",
+        };
+        this.onChartPointClick.emit(obj);
+        console.log("onchart click", obj);
+    }
     getValue(contextKey, value) {
         let context_data;
         const sml_key = contextKey.toLowerCase();
@@ -9201,15 +9228,20 @@ class GammaAdvanceChartComponent {
         return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
     }
 }
-GammaAdvanceChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaAdvanceChartComponent, deps: [{ token: CommonService }, { token: i3$1.ToastrService }, { token: kpicommonService$1 }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-GammaAdvanceChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammaAdvanceChartComponent, selector: "app-gamma-advance-chart", inputs: { componentId: "componentId", kpi_name: "kpi_name", chartDataSource: "chartDataSource" }, ngImport: i0, template: "<div class=\"not-full-screen\" (dblclick)=\"toggleFullScreen()\">\n    <ng-container *ngIf=\"page_config?.widGetConfig?.display\">\n        <app-title [title]=\"page_config.widGetConfig.widgetTitle\" [operators]=\"page_config.operations\"\n            [displayType]=\"'chart'\"></app-title>\n    </ng-container>\n    <div class=\"mx-2 p-2 bg-gray-800\">\n        <app-loader *ngIf=\"isLoader\"></app-loader>\n        <ng-container\n            *ngIf=\"chartConfig.chartType !== 'doughnut' && chartConfig.chartType !== 'pie' && chartConfig.chartType !== 'funnel' && chartConfig.chartType !== 'bubble'\">\n            \n            <dx-chart id=\"chart\"  [dataSource]=\"finalChartDataSource\"\n                [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" *ngIf=\"!isLoader\"\n                [valueAxis]=\"chartConfig.valueAxisConfig\">\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item && item.axis\">\n                        <dxi-value-axis name=\"{{item.axis}}\" position=\"{{item.position}}\">\n                            <dxo-title text=\"{{item.name}}\"></dxo-title>\n                        </dxi-value-axis>\n                    </ng-container>\n\n                </ng-container>\n                <dxo-argument-axis>\n                    <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n                </dxo-argument-axis>\n                <dxo-tooltip [enabled]=\"true\" [shared]=\"true\" [customizeTooltip]=\"customizeTooltip\">\n                </dxo-tooltip>\n                <dxo-common-series-settings argumentField=\"{{chartConfig.argumentField}}\">\n                </dxo-common-series-settings>\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item && item.color\">\n                        <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                            name=\"{{item.name}}\" color=\"{{item.color}}\">\n                        </dxi-series>\n                    </ng-container>\n                    <ng-container *ngIf=\"item && !item.color\">\n                        <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                            name=\"{{item.name}}\">\n                        </dxi-series>\n                    </ng-container>\n\n                </ng-container>\n                <dxo-size [height]=\"chartHeight\">\n                </dxo-size>\n                <dxo-legend [visible]=\"chartConfig.legendDisplay\" verticalAlignment=\"{{chartConfig.verticalAlignment}}\"\n                    horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\">\n                </dxo-legend>\n            </dx-chart>\n        </ng-container>\n\n\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'doughnut' || chartConfig.chartType == 'pie'\">\n\n            <dx-pie-chart id=\"pie\" [type]=\"chartConfig.chartType\" [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                [dataSource]=\"finalChartDataSource\" centerTemplate=\"centerTemplate\"\n                (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item.color\">\n                        <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                            name=\"{{item.name}}\" color=\"{{item.color}}\">\n                            <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n                                <dxo-connector [visible]=\"true\"></dxo-connector>\n                            </dxo-label>\n                        </dxi-series>\n                    </ng-container>\n                    <ng-container *ngIf=\"!item.color\">\n                        <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                            name=\"{{item.name}}\">\n                            <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n                                <dxo-connector [visible]=\"true\"></dxo-connector>\n                            </dxo-label>\n                        </dxi-series>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n                <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                    horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n                    verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n                <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n                <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"currency\">\n                </dxo-tooltip>\n                <ng-container *ngIf=\"chartConfig.chartType == 'doughnut'\">\n                    <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n                        <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\" opacity=\"0.0001\">\n                        </circle>\n    \n                        <text text-anchor=\"middle\" style=\"font-size: 15px\" x=\"100\" y=\"100\" fill=\"#eee\">\n                            <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n                            <!-- display: inline -->\n                            <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n                        </text>\n                    </svg>\n                </ng-container>\n            </dx-pie-chart>\n        </ng-container>\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'funnel'\">\n            <dx-funnel id=\"funnel\" [dataSource]=\"finalChartDataSource\" argumentField=\"argument\" valueField=\"value\"\n                palette=\"Soft Pastel\">\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n                <dxo-export [enabled]=\"false\"></dxo-export>\n                <dxo-tooltip [enabled]=\"true\"> </dxo-tooltip>\n                <dxo-item>\n                    <dxo-border [visible]=\"true\"> </dxo-border>\n                </dxo-item>\n                <dxo-label [visible]=\"true\" position=\"inside\" backgroundColor=\"none\"\n                    [customizeText]=\"customizeText\"></dxo-label>\n            </dx-funnel>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'bubble'\">\n            <div class=\"mx-5 overflow-x-auto\">\n                <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"h-10 text-sm items-center min-w-12 max-w-[30%] justify-center flex\">\n                            {{item.datasource}}\n                        </div>\n                        <div class=\"inline-block \">\n                            <div class=\"flex flex-nowrap justify-center \">\n                                <ng-container *ngFor=\"let box of item.dataset\">\n                                    <div class=\"flex-shrink-0 min-w-10 max-w-[20%] h-10 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                        [matTooltip]=\"'Record Date: ' + box.recordDate + '\\nRecharge Count: ' + box.toolTip\"\n                                        matTooltipClass=\"custom-tooltip\">\n                                        <div class=\"rounded-full\" [ngStyle]=\"{\n                                                'background-color': box.isHovered ? 'rgb(135, 184, 106)' : box.color,\n                                                'width.px': box.size,\n                                                'hover': box.hover,\n                                                'height.px': box.size\n                                              }\" (mouseenter)=\"box.isHovered = true\"\n                                            (mouseleave)=\"box.isHovered = false\">\n                                        </div>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n                <div class=\"inline-block\">\n                    <div class=\"flex flex-nowrap justify-center\">\n                        <div class=\"flex-shrink-0 w-12 max-w-[20%] h-full flex items-center justify-center\"></div>\n                        <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                            class=\"flex-shrink-0 w-10 max-w-[20%] min-h-14 flex text-sm items-center justify-center my-1\"\n                            [ngStyle]=\"{'height': 'auto'}\">\n                            <span class=\"text-rotate\">\n                                {{item}}\n                            </span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n\n    </div>\n\n    <button *ngIf=\"isFullScreen\" class=\"close-button\" (click)=\"toggleFullScreen()\">Close</button>\n</div>", dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6.DxoExportComponent, selector: "dxo-export", inputs: ["backgroundColor", "enabled", "fileName", "formats", "margin", "printingEnabled", "proxyUrl", "svgToCanvas", "allowExportSelectedData", "customizeExcelCell", "excelFilterEnabled", "excelWrapTextEnabled", "ignoreExcelErrors", "texts"] }, { kind: "component", type: i6.DxoLabelComponent, selector: "dxo-label", inputs: ["connectorColor", "connectorWidth", "customizeText", "font", "format", "indent", "visible", "horizontalAlignment", "position", "text", "verticalAlignment", "alignment", "customizeHint", "displayMode", "indentFromAxis", "overlappingBehavior", "rotationAngle", "staggeringSpacing", "template", "textOverflow", "wordWrap", "argumentFormat", "backgroundColor", "border", "connector", "displayFormat", "horizontalOffset", "showForZeroValues", "verticalOffset", "hideFirstOrLast", "indentFromTick", "useRangeColors", "location", "showColon", "radialOffset", "topIndent", "shadow", "useNodeColors", "dataField", "enabled"] }, { kind: "component", type: i6.DxoLegendComponent, selector: "dxo-legend", inputs: ["backgroundColor", "border", "columnCount", "columnItemSpacing", "customizeHint", "customizeItems", "customizeText", "font", "horizontalAlignment", "itemsAlignment", "itemTextFormat", "itemTextPosition", "margin", "markerSize", "markerTemplate", "orientation", "paddingLeftRight", "paddingTopBottom", "rowCount", "rowItemSpacing", "title", "verticalAlignment", "visible", "hoverMode", "position"] }, { kind: "component", type: i6.DxoBorderComponent, selector: "dxo-border", inputs: ["color", "cornerRadius", "dashStyle", "opacity", "visible", "width", "bottom", "left", "right", "top"] }, { kind: "component", type: i6.DxoTitleComponent, selector: "dxo-title", inputs: ["font", "horizontalAlignment", "margin", "placeholderSize", "subtitle", "text", "verticalAlignment", "textOverflow", "wordWrap", "alignment"] }, { kind: "component", type: i6.DxoSizeComponent, selector: "dxo-size", inputs: ["height", "width"] }, { kind: "component", type: i6.DxoTooltipComponent, selector: "dxo-tooltip", inputs: ["arrowLength", "border", "color", "container", "contentTemplate", "cornerRadius", "customizeTooltip", "enabled", "font", "format", "interactive", "opacity", "paddingLeftRight", "paddingTopBottom", "shadow", "zIndex", "argumentFormat", "location", "shared", "isShown", "text", "position", "showMode", "customizeLinkTooltip", "customizeNodeTooltip", "linkTooltipTemplate", "nodeTooltipTemplate"] }, { kind: "component", type: i7$1.DxChartComponent, selector: "dx-chart", inputs: ["adaptiveLayout", "adjustOnZoom", "animation", "annotations", "argumentAxis", "autoHidePointMarkers", "barGroupPadding", "barGroupWidth", "commonAnnotationSettings", "commonAxisSettings", "commonPaneSettings", "commonSeriesSettings", "containerBackgroundColor", "crosshair", "customizeAnnotation", "customizeLabel", "customizePoint", "dataPrepareSettings", "dataSource", "defaultPane", "disabled", "elementAttr", "export", "legend", "loadingIndicator", "margin", "maxBubbleSize", "minBubbleSize", "negativesAsZeroes", "palette", "paletteExtensionMode", "panes", "pathModified", "pointSelectionMode", "redrawOnResize", "resizePanesOnZoom", "resolveLabelOverlapping", "rotated", "rtlEnabled", "scrollBar", "series", "seriesSelectionMode", "seriesTemplate", "size", "stickyHovering", "synchronizeMultiAxes", "theme", "title", "tooltip", "valueAxis", "zoomAndPan"], outputs: ["onArgumentAxisClick", "onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onSeriesClick", "onSeriesHoverChanged", "onSeriesSelectionChanged", "onTooltipHidden", "onTooltipShown", "onZoomEnd", "onZoomStart", "adaptiveLayoutChange", "adjustOnZoomChange", "animationChange", "annotationsChange", "argumentAxisChange", "autoHidePointMarkersChange", "barGroupPaddingChange", "barGroupWidthChange", "commonAnnotationSettingsChange", "commonAxisSettingsChange", "commonPaneSettingsChange", "commonSeriesSettingsChange", "containerBackgroundColorChange", "crosshairChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataPrepareSettingsChange", "dataSourceChange", "defaultPaneChange", "disabledChange", "elementAttrChange", "exportChange", "legendChange", "loadingIndicatorChange", "marginChange", "maxBubbleSizeChange", "minBubbleSizeChange", "negativesAsZeroesChange", "paletteChange", "paletteExtensionModeChange", "panesChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resizePanesOnZoomChange", "resolveLabelOverlappingChange", "rotatedChange", "rtlEnabledChange", "scrollBarChange", "seriesChange", "seriesSelectionModeChange", "seriesTemplateChange", "sizeChange", "stickyHoveringChange", "synchronizeMultiAxesChange", "themeChange", "titleChange", "tooltipChange", "valueAxisChange", "zoomAndPanChange"] }, { kind: "component", type: i6.DxoArgumentAxisComponent, selector: "dxo-argument-axis", inputs: ["aggregateByCategory", "aggregatedPointsPosition", "aggregationGroupWidth", "aggregationInterval", "allowDecimals", "argumentType", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "customPositionAxis", "discreteAxisDivisionMode", "endOnTick", "grid", "holidays", "hoverMode", "inverted", "label", "linearThreshold", "logarithmBase", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "offset", "opacity", "placeholderSize", "position", "singleWorkdays", "strips", "stripStyle", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width", "workdaysOnly", "workWeek", "firstPointOnStartAngle", "originValue", "period", "startAngle"], outputs: ["visualRangeChange"] }, { kind: "component", type: i6.DxoCommonSeriesSettingsComponent, selector: "dxo-common-series-settings", inputs: ["aggregation", "area", "argumentField", "axis", "bar", "barOverlapGroup", "barPadding", "barWidth", "border", "bubble", "candlestick", "closeValueField", "color", "cornerRadius", "dashStyle", "fullstackedarea", "fullstackedbar", "fullstackedline", "fullstackedspline", "fullstackedsplinearea", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "line", "lowValueField", "maxLabelCount", "minBarSize", "opacity", "openValueField", "pane", "point", "rangearea", "rangebar", "rangeValue1Field", "rangeValue2Field", "reduction", "scatter", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "spline", "splinearea", "stack", "stackedarea", "stackedbar", "stackedline", "stackedspline", "stackedsplinearea", "steparea", "stepline", "stock", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxoConnectorComponent, selector: "dxo-connector", inputs: ["color", "visible", "width", "opacity"] }, { kind: "component", type: i6.DxiSeriesComponent, selector: "dxi-series", inputs: ["aggregation", "argumentField", "axis", "barOverlapGroup", "barPadding", "barWidth", "border", "closeValueField", "color", "cornerRadius", "dashStyle", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "lowValueField", "maxLabelCount", "minBarSize", "name", "opacity", "openValueField", "pane", "point", "rangeValue1Field", "rangeValue2Field", "reduction", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "stack", "tag", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxiValueAxisComponent, selector: "dxi-value-axis", inputs: ["aggregatedPointsPosition", "allowDecimals", "autoBreaksEnabled", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "discreteAxisDivisionMode", "endOnTick", "grid", "inverted", "label", "linearThreshold", "logarithmBase", "maxAutoBreakCount", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "multipleAxesSpacing", "name", "offset", "opacity", "pane", "placeholderSize", "position", "showZero", "strips", "stripStyle", "synchronizedValue", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "valueType", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width"], outputs: ["visualRangeChange"] }, { kind: "component", type: i8$3.DxFunnelComponent, selector: "dx-funnel", inputs: ["adaptiveLayout", "algorithm", "argumentField", "colorField", "dataSource", "disabled", "elementAttr", "export", "hoverEnabled", "inverted", "item", "label", "legend", "loadingIndicator", "margin", "neckHeight", "neckWidth", "palette", "paletteExtensionMode", "pathModified", "redrawOnResize", "resolveLabelOverlapping", "rtlEnabled", "selectionMode", "size", "sortData", "theme", "title", "tooltip", "valueField"], outputs: ["onDisposing", "onDrawn", "onExported", "onExporting", "onFileSaving", "onHoverChanged", "onIncidentOccurred", "onInitialized", "onItemClick", "onLegendClick", "onOptionChanged", "onSelectionChanged", "adaptiveLayoutChange", "algorithmChange", "argumentFieldChange", "colorFieldChange", "dataSourceChange", "disabledChange", "elementAttrChange", "exportChange", "hoverEnabledChange", "invertedChange", "itemChange", "labelChange", "legendChange", "loadingIndicatorChange", "marginChange", "neckHeightChange", "neckWidthChange", "paletteChange", "paletteExtensionModeChange", "pathModifiedChange", "redrawOnResizeChange", "resolveLabelOverlappingChange", "rtlEnabledChange", "selectionModeChange", "sizeChange", "sortDataChange", "themeChange", "titleChange", "tooltipChange", "valueFieldChange"] }, { kind: "component", type: i6.DxoItemComponent, selector: "dxo-item", inputs: ["border", "hoverStyle", "selectionStyle"] }, { kind: "component", type: i10.DxPieChartComponent, selector: "dx-pie-chart", inputs: ["adaptiveLayout", "animation", "annotations", "centerTemplate", "commonAnnotationSettings", "commonSeriesSettings", "customizeAnnotation", "customizeLabel", "customizePoint", "dataSource", "diameter", "disabled", "elementAttr", "export", "innerRadius", "legend", "loadingIndicator", "margin", "minDiameter", "palette", "paletteExtensionMode", "pathModified", "pointSelectionMode", "redrawOnResize", "resolveLabelOverlapping", "rtlEnabled", "segmentsDirection", "series", "seriesTemplate", "size", "sizeGroup", "startAngle", "theme", "title", "tooltip", "type"], outputs: ["onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onTooltipHidden", "onTooltipShown", "adaptiveLayoutChange", "animationChange", "annotationsChange", "centerTemplateChange", "commonAnnotationSettingsChange", "commonSeriesSettingsChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataSourceChange", "diameterChange", "disabledChange", "elementAttrChange", "exportChange", "innerRadiusChange", "legendChange", "loadingIndicatorChange", "marginChange", "minDiameterChange", "paletteChange", "paletteExtensionModeChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resolveLabelOverlappingChange", "rtlEnabledChange", "segmentsDirectionChange", "seriesChange", "seriesTemplateChange", "sizeChange", "sizeGroupChange", "startAngleChange", "themeChange", "titleChange", "tooltipChange", "typeChange"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AppTitleComponent, selector: "app-title", inputs: ["title", "multiple", "isFilterDisplay", "icon", "iconName", "displayType", "keyToPass", "fixOperationLevles", "operators"], outputs: ["onOperatorClick"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
+GammaAdvanceChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaAdvanceChartComponent, deps: [{ token: CommonService }, { token: i3$1.ToastrService }, { token: kpicommonService$1 }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: APP_ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Component });
+GammaAdvanceChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammaAdvanceChartComponent, selector: "app-gamma-advance-chart", inputs: { componentId: "componentId", kpi_name: "kpi_name", chartDataSource: "chartDataSource" }, outputs: { onChartPointClick: "onChartPointClick" }, ngImport: i0, template: "<div class=\"not-full-screen\" (dblclick)=\"toggleFullScreen()\">\n    <ng-container *ngIf=\"page_config?.widGetConfig?.display\">\n        <app-title [title]=\"page_config.widGetConfig.widgetTitle\" [operators]=\"page_config.operations\"\n            [displayType]=\"'chart'\"></app-title>\n    </ng-container>\n    <div class=\"mx-2 p-2 bg-gray-800\">\n        <app-loader *ngIf=\"isLoader\"></app-loader>\n        <ng-container\n            *ngIf=\"chartConfig.chartType !== 'doughnut' && chartConfig.chartType !== 'pie' && chartConfig.chartType !== 'funnel' && chartConfig.chartType !== 'bubble'\">\n            \n            <dx-chart id=\"chart\"  [dataSource]=\"finalChartDataSource\" (onPointClick)=\"getAllChartPointClick($event)\"\n                [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" *ngIf=\"!isLoader\"\n                [valueAxis]=\"chartConfig.valueAxisConfig\">\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item && item.axis\">\n                        <dxi-value-axis name=\"{{item.axis}}\" position=\"{{item.position}}\">\n                            <dxo-title text=\"{{item.name}}\"></dxo-title>\n                        </dxi-value-axis>\n                    </ng-container>\n\n                </ng-container>\n                <dxo-argument-axis>\n                    <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n                </dxo-argument-axis>\n                <dxo-tooltip [enabled]=\"true\" [shared]=\"true\" [customizeTooltip]=\"customizeTooltip\">\n                </dxo-tooltip>\n                <dxo-common-series-settings argumentField=\"{{chartConfig.argumentField}}\">\n                </dxo-common-series-settings>\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item && item.color\">\n                        <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                            name=\"{{item.name}}\" color=\"{{item.color}}\">\n                        </dxi-series>\n                    </ng-container>\n                    <ng-container *ngIf=\"item && !item.color\">\n                        <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                            name=\"{{item.name}}\">\n                        </dxi-series>\n                    </ng-container>\n\n                </ng-container>\n                <dxo-size [height]=\"chartHeight\">\n                </dxo-size>\n                <dxo-legend [visible]=\"chartConfig.legendDisplay\" verticalAlignment=\"{{chartConfig.verticalAlignment}}\"\n                    horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\">\n                </dxo-legend>\n            </dx-chart>\n        </ng-container>\n\n\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'doughnut' || chartConfig.chartType == 'pie'\">\n\n            <dx-pie-chart id=\"pie\" [type]=\"chartConfig.chartType\" [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                [dataSource]=\"finalChartDataSource\" centerTemplate=\"centerTemplate\"\n                (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item.color\">\n                        <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                            name=\"{{item.name}}\" color=\"{{item.color}}\">\n                            <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n                                <dxo-connector [visible]=\"true\"></dxo-connector>\n                            </dxo-label>\n                        </dxi-series>\n                    </ng-container>\n                    <ng-container *ngIf=\"!item.color\">\n                        <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                            name=\"{{item.name}}\">\n                            <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n                                <dxo-connector [visible]=\"true\"></dxo-connector>\n                            </dxo-label>\n                        </dxi-series>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n                <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                    horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n                    verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n                <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n                <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"currency\">\n                </dxo-tooltip>\n                <ng-container *ngIf=\"chartConfig.chartType == 'doughnut'\">\n                    <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n                        <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\" opacity=\"0.0001\">\n                        </circle>\n    \n                        <text text-anchor=\"middle\" style=\"font-size: 15px\" x=\"100\" y=\"100\" fill=\"#eee\">\n                            <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n                            <!-- display: inline -->\n                            <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n                        </text>\n                    </svg>\n                </ng-container>\n            </dx-pie-chart>\n        </ng-container>\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'funnel'\">\n            <dx-funnel id=\"funnel\" [dataSource]=\"finalChartDataSource\" argumentField=\"argument\" valueField=\"value\"\n                palette=\"Soft Pastel\">\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n                <dxo-export [enabled]=\"false\"></dxo-export>\n                <dxo-tooltip [enabled]=\"true\"> </dxo-tooltip>\n                <dxo-item>\n                    <dxo-border [visible]=\"true\"> </dxo-border>\n                </dxo-item>\n                <dxo-label [visible]=\"true\" position=\"inside\" backgroundColor=\"none\"\n                    [customizeText]=\"customizeText\"></dxo-label>\n            </dx-funnel>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'bubble'\">\n            <div class=\"mx-5 overflow-x-auto\">\n                <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"h-10 text-sm items-center min-w-12 max-w-[30%] justify-center flex\">\n                            {{item.datasource}}\n                        </div>\n                        <div class=\"inline-block \">\n                            <div class=\"flex flex-nowrap justify-center \">\n                                <ng-container *ngFor=\"let box of item.dataset\">\n                                    <div class=\"flex-shrink-0 min-w-10 max-w-[20%] h-10 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                        [matTooltip]=\"'Record Date: ' + box.recordDate + '\\nRecharge Count: ' + box.toolTip\"\n                                        matTooltipClass=\"custom-tooltip\">\n                                        <div class=\"rounded-full\" [ngStyle]=\"{\n                                                'background-color': box.isHovered ? 'rgb(135, 184, 106)' : box.color,\n                                                'width.px': box.size,\n                                                'hover': box.hover,\n                                                'height.px': box.size\n                                              }\" (mouseenter)=\"box.isHovered = true\"\n                                            (mouseleave)=\"box.isHovered = false\">\n                                        </div>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n                <div class=\"inline-block\">\n                    <div class=\"flex flex-nowrap justify-center\">\n                        <div class=\"flex-shrink-0 w-12 max-w-[20%] h-full flex items-center justify-center\"></div>\n                        <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                            class=\"flex-shrink-0 w-10 max-w-[20%] min-h-14 flex text-sm items-center justify-center my-1\"\n                            [ngStyle]=\"{'height': 'auto'}\">\n                            <span class=\"text-rotate\">\n                                {{item}}\n                            </span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n\n    </div>\n\n    <button *ngIf=\"isFullScreen\" class=\"close-button\" (click)=\"toggleFullScreen()\">Close</button>\n</div>", dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6.DxoExportComponent, selector: "dxo-export", inputs: ["backgroundColor", "enabled", "fileName", "formats", "margin", "printingEnabled", "proxyUrl", "svgToCanvas", "allowExportSelectedData", "customizeExcelCell", "excelFilterEnabled", "excelWrapTextEnabled", "ignoreExcelErrors", "texts"] }, { kind: "component", type: i6.DxoLabelComponent, selector: "dxo-label", inputs: ["connectorColor", "connectorWidth", "customizeText", "font", "format", "indent", "visible", "horizontalAlignment", "position", "text", "verticalAlignment", "alignment", "customizeHint", "displayMode", "indentFromAxis", "overlappingBehavior", "rotationAngle", "staggeringSpacing", "template", "textOverflow", "wordWrap", "argumentFormat", "backgroundColor", "border", "connector", "displayFormat", "horizontalOffset", "showForZeroValues", "verticalOffset", "hideFirstOrLast", "indentFromTick", "useRangeColors", "location", "showColon", "radialOffset", "topIndent", "shadow", "useNodeColors", "dataField", "enabled"] }, { kind: "component", type: i6.DxoLegendComponent, selector: "dxo-legend", inputs: ["backgroundColor", "border", "columnCount", "columnItemSpacing", "customizeHint", "customizeItems", "customizeText", "font", "horizontalAlignment", "itemsAlignment", "itemTextFormat", "itemTextPosition", "margin", "markerSize", "markerTemplate", "orientation", "paddingLeftRight", "paddingTopBottom", "rowCount", "rowItemSpacing", "title", "verticalAlignment", "visible", "hoverMode", "position"] }, { kind: "component", type: i6.DxoBorderComponent, selector: "dxo-border", inputs: ["color", "cornerRadius", "dashStyle", "opacity", "visible", "width", "bottom", "left", "right", "top"] }, { kind: "component", type: i6.DxoTitleComponent, selector: "dxo-title", inputs: ["font", "horizontalAlignment", "margin", "placeholderSize", "subtitle", "text", "verticalAlignment", "textOverflow", "wordWrap", "alignment"] }, { kind: "component", type: i6.DxoSizeComponent, selector: "dxo-size", inputs: ["height", "width"] }, { kind: "component", type: i6.DxoTooltipComponent, selector: "dxo-tooltip", inputs: ["arrowLength", "border", "color", "container", "contentTemplate", "cornerRadius", "customizeTooltip", "enabled", "font", "format", "interactive", "opacity", "paddingLeftRight", "paddingTopBottom", "shadow", "zIndex", "argumentFormat", "location", "shared", "isShown", "text", "position", "showMode", "customizeLinkTooltip", "customizeNodeTooltip", "linkTooltipTemplate", "nodeTooltipTemplate"] }, { kind: "component", type: i7$1.DxChartComponent, selector: "dx-chart", inputs: ["adaptiveLayout", "adjustOnZoom", "animation", "annotations", "argumentAxis", "autoHidePointMarkers", "barGroupPadding", "barGroupWidth", "commonAnnotationSettings", "commonAxisSettings", "commonPaneSettings", "commonSeriesSettings", "containerBackgroundColor", "crosshair", "customizeAnnotation", "customizeLabel", "customizePoint", "dataPrepareSettings", "dataSource", "defaultPane", "disabled", "elementAttr", "export", "legend", "loadingIndicator", "margin", "maxBubbleSize", "minBubbleSize", "negativesAsZeroes", "palette", "paletteExtensionMode", "panes", "pathModified", "pointSelectionMode", "redrawOnResize", "resizePanesOnZoom", "resolveLabelOverlapping", "rotated", "rtlEnabled", "scrollBar", "series", "seriesSelectionMode", "seriesTemplate", "size", "stickyHovering", "synchronizeMultiAxes", "theme", "title", "tooltip", "valueAxis", "zoomAndPan"], outputs: ["onArgumentAxisClick", "onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onSeriesClick", "onSeriesHoverChanged", "onSeriesSelectionChanged", "onTooltipHidden", "onTooltipShown", "onZoomEnd", "onZoomStart", "adaptiveLayoutChange", "adjustOnZoomChange", "animationChange", "annotationsChange", "argumentAxisChange", "autoHidePointMarkersChange", "barGroupPaddingChange", "barGroupWidthChange", "commonAnnotationSettingsChange", "commonAxisSettingsChange", "commonPaneSettingsChange", "commonSeriesSettingsChange", "containerBackgroundColorChange", "crosshairChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataPrepareSettingsChange", "dataSourceChange", "defaultPaneChange", "disabledChange", "elementAttrChange", "exportChange", "legendChange", "loadingIndicatorChange", "marginChange", "maxBubbleSizeChange", "minBubbleSizeChange", "negativesAsZeroesChange", "paletteChange", "paletteExtensionModeChange", "panesChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resizePanesOnZoomChange", "resolveLabelOverlappingChange", "rotatedChange", "rtlEnabledChange", "scrollBarChange", "seriesChange", "seriesSelectionModeChange", "seriesTemplateChange", "sizeChange", "stickyHoveringChange", "synchronizeMultiAxesChange", "themeChange", "titleChange", "tooltipChange", "valueAxisChange", "zoomAndPanChange"] }, { kind: "component", type: i6.DxoArgumentAxisComponent, selector: "dxo-argument-axis", inputs: ["aggregateByCategory", "aggregatedPointsPosition", "aggregationGroupWidth", "aggregationInterval", "allowDecimals", "argumentType", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "customPositionAxis", "discreteAxisDivisionMode", "endOnTick", "grid", "holidays", "hoverMode", "inverted", "label", "linearThreshold", "logarithmBase", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "offset", "opacity", "placeholderSize", "position", "singleWorkdays", "strips", "stripStyle", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width", "workdaysOnly", "workWeek", "firstPointOnStartAngle", "originValue", "period", "startAngle"], outputs: ["visualRangeChange"] }, { kind: "component", type: i6.DxoCommonSeriesSettingsComponent, selector: "dxo-common-series-settings", inputs: ["aggregation", "area", "argumentField", "axis", "bar", "barOverlapGroup", "barPadding", "barWidth", "border", "bubble", "candlestick", "closeValueField", "color", "cornerRadius", "dashStyle", "fullstackedarea", "fullstackedbar", "fullstackedline", "fullstackedspline", "fullstackedsplinearea", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "line", "lowValueField", "maxLabelCount", "minBarSize", "opacity", "openValueField", "pane", "point", "rangearea", "rangebar", "rangeValue1Field", "rangeValue2Field", "reduction", "scatter", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "spline", "splinearea", "stack", "stackedarea", "stackedbar", "stackedline", "stackedspline", "stackedsplinearea", "steparea", "stepline", "stock", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxoConnectorComponent, selector: "dxo-connector", inputs: ["color", "visible", "width", "opacity"] }, { kind: "component", type: i6.DxiSeriesComponent, selector: "dxi-series", inputs: ["aggregation", "argumentField", "axis", "barOverlapGroup", "barPadding", "barWidth", "border", "closeValueField", "color", "cornerRadius", "dashStyle", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "lowValueField", "maxLabelCount", "minBarSize", "name", "opacity", "openValueField", "pane", "point", "rangeValue1Field", "rangeValue2Field", "reduction", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "stack", "tag", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxiValueAxisComponent, selector: "dxi-value-axis", inputs: ["aggregatedPointsPosition", "allowDecimals", "autoBreaksEnabled", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "discreteAxisDivisionMode", "endOnTick", "grid", "inverted", "label", "linearThreshold", "logarithmBase", "maxAutoBreakCount", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "multipleAxesSpacing", "name", "offset", "opacity", "pane", "placeholderSize", "position", "showZero", "strips", "stripStyle", "synchronizedValue", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "valueType", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width"], outputs: ["visualRangeChange"] }, { kind: "component", type: i8$3.DxFunnelComponent, selector: "dx-funnel", inputs: ["adaptiveLayout", "algorithm", "argumentField", "colorField", "dataSource", "disabled", "elementAttr", "export", "hoverEnabled", "inverted", "item", "label", "legend", "loadingIndicator", "margin", "neckHeight", "neckWidth", "palette", "paletteExtensionMode", "pathModified", "redrawOnResize", "resolveLabelOverlapping", "rtlEnabled", "selectionMode", "size", "sortData", "theme", "title", "tooltip", "valueField"], outputs: ["onDisposing", "onDrawn", "onExported", "onExporting", "onFileSaving", "onHoverChanged", "onIncidentOccurred", "onInitialized", "onItemClick", "onLegendClick", "onOptionChanged", "onSelectionChanged", "adaptiveLayoutChange", "algorithmChange", "argumentFieldChange", "colorFieldChange", "dataSourceChange", "disabledChange", "elementAttrChange", "exportChange", "hoverEnabledChange", "invertedChange", "itemChange", "labelChange", "legendChange", "loadingIndicatorChange", "marginChange", "neckHeightChange", "neckWidthChange", "paletteChange", "paletteExtensionModeChange", "pathModifiedChange", "redrawOnResizeChange", "resolveLabelOverlappingChange", "rtlEnabledChange", "selectionModeChange", "sizeChange", "sortDataChange", "themeChange", "titleChange", "tooltipChange", "valueFieldChange"] }, { kind: "component", type: i6.DxoItemComponent, selector: "dxo-item", inputs: ["border", "hoverStyle", "selectionStyle"] }, { kind: "component", type: i10.DxPieChartComponent, selector: "dx-pie-chart", inputs: ["adaptiveLayout", "animation", "annotations", "centerTemplate", "commonAnnotationSettings", "commonSeriesSettings", "customizeAnnotation", "customizeLabel", "customizePoint", "dataSource", "diameter", "disabled", "elementAttr", "export", "innerRadius", "legend", "loadingIndicator", "margin", "minDiameter", "palette", "paletteExtensionMode", "pathModified", "pointSelectionMode", "redrawOnResize", "resolveLabelOverlapping", "rtlEnabled", "segmentsDirection", "series", "seriesTemplate", "size", "sizeGroup", "startAngle", "theme", "title", "tooltip", "type"], outputs: ["onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onTooltipHidden", "onTooltipShown", "adaptiveLayoutChange", "animationChange", "annotationsChange", "centerTemplateChange", "commonAnnotationSettingsChange", "commonSeriesSettingsChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataSourceChange", "diameterChange", "disabledChange", "elementAttrChange", "exportChange", "innerRadiusChange", "legendChange", "loadingIndicatorChange", "marginChange", "minDiameterChange", "paletteChange", "paletteExtensionModeChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resolveLabelOverlappingChange", "rtlEnabledChange", "segmentsDirectionChange", "seriesChange", "seriesTemplateChange", "sizeChange", "sizeGroupChange", "startAngleChange", "themeChange", "titleChange", "tooltipChange", "typeChange"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AppTitleComponent, selector: "app-title", inputs: ["title", "multiple", "isFilterDisplay", "icon", "iconName", "displayType", "keyToPass", "fixOperationLevles", "operators"], outputs: ["onOperatorClick"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaAdvanceChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-gamma-advance-chart', template: "<div class=\"not-full-screen\" (dblclick)=\"toggleFullScreen()\">\n    <ng-container *ngIf=\"page_config?.widGetConfig?.display\">\n        <app-title [title]=\"page_config.widGetConfig.widgetTitle\" [operators]=\"page_config.operations\"\n            [displayType]=\"'chart'\"></app-title>\n    </ng-container>\n    <div class=\"mx-2 p-2 bg-gray-800\">\n        <app-loader *ngIf=\"isLoader\"></app-loader>\n        <ng-container\n            *ngIf=\"chartConfig.chartType !== 'doughnut' && chartConfig.chartType !== 'pie' && chartConfig.chartType !== 'funnel' && chartConfig.chartType !== 'bubble'\">\n            \n            <dx-chart id=\"chart\"  [dataSource]=\"finalChartDataSource\"\n                [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" *ngIf=\"!isLoader\"\n                [valueAxis]=\"chartConfig.valueAxisConfig\">\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item && item.axis\">\n                        <dxi-value-axis name=\"{{item.axis}}\" position=\"{{item.position}}\">\n                            <dxo-title text=\"{{item.name}}\"></dxo-title>\n                        </dxi-value-axis>\n                    </ng-container>\n\n                </ng-container>\n                <dxo-argument-axis>\n                    <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n                </dxo-argument-axis>\n                <dxo-tooltip [enabled]=\"true\" [shared]=\"true\" [customizeTooltip]=\"customizeTooltip\">\n                </dxo-tooltip>\n                <dxo-common-series-settings argumentField=\"{{chartConfig.argumentField}}\">\n                </dxo-common-series-settings>\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item && item.color\">\n                        <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                            name=\"{{item.name}}\" color=\"{{item.color}}\">\n                        </dxi-series>\n                    </ng-container>\n                    <ng-container *ngIf=\"item && !item.color\">\n                        <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                            name=\"{{item.name}}\">\n                        </dxi-series>\n                    </ng-container>\n\n                </ng-container>\n                <dxo-size [height]=\"chartHeight\">\n                </dxo-size>\n                <dxo-legend [visible]=\"chartConfig.legendDisplay\" verticalAlignment=\"{{chartConfig.verticalAlignment}}\"\n                    horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\">\n                </dxo-legend>\n            </dx-chart>\n        </ng-container>\n\n\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'doughnut' || chartConfig.chartType == 'pie'\">\n\n            <dx-pie-chart id=\"pie\" [type]=\"chartConfig.chartType\" [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                [dataSource]=\"finalChartDataSource\" centerTemplate=\"centerTemplate\"\n                (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item.color\">\n                        <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                            name=\"{{item.name}}\" color=\"{{item.color}}\">\n                            <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n                                <dxo-connector [visible]=\"true\"></dxo-connector>\n                            </dxo-label>\n                        </dxi-series>\n                    </ng-container>\n                    <ng-container *ngIf=\"!item.color\">\n                        <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                            name=\"{{item.name}}\">\n                            <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n                                <dxo-connector [visible]=\"true\"></dxo-connector>\n                            </dxo-label>\n                        </dxi-series>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n                <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                    horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n                    verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n                <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n                <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"currency\">\n                </dxo-tooltip>\n                <ng-container *ngIf=\"chartConfig.chartType == 'doughnut'\">\n                    <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n                        <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\" opacity=\"0.0001\">\n                        </circle>\n    \n                        <text text-anchor=\"middle\" style=\"font-size: 15px\" x=\"100\" y=\"100\" fill=\"#eee\">\n                            <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n                            <!-- display: inline -->\n                            <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n                        </text>\n                    </svg>\n                </ng-container>\n            </dx-pie-chart>\n        </ng-container>\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'funnel'\">\n            <dx-funnel id=\"funnel\" [dataSource]=\"finalChartDataSource\" argumentField=\"argument\" valueField=\"value\"\n                palette=\"Soft Pastel\">\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n                <dxo-export [enabled]=\"false\"></dxo-export>\n                <dxo-tooltip [enabled]=\"true\"> </dxo-tooltip>\n                <dxo-item>\n                    <dxo-border [visible]=\"true\"> </dxo-border>\n                </dxo-item>\n                <dxo-label [visible]=\"true\" position=\"inside\" backgroundColor=\"none\"\n                    [customizeText]=\"customizeText\"></dxo-label>\n            </dx-funnel>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'bubble'\">\n            <div class=\"mx-5 overflow-x-auto\">\n                <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"h-10 text-sm items-center min-w-12 max-w-[30%] justify-center flex\">\n                            {{item.datasource}}\n                        </div>\n                        <div class=\"inline-block \">\n                            <div class=\"flex flex-nowrap justify-center \">\n                                <ng-container *ngFor=\"let box of item.dataset\">\n                                    <div class=\"flex-shrink-0 min-w-10 max-w-[20%] h-10 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                        [matTooltip]=\"'Record Date: ' + box.recordDate + '\\nRecharge Count: ' + box.toolTip\"\n                                        matTooltipClass=\"custom-tooltip\">\n                                        <div class=\"rounded-full\" [ngStyle]=\"{\n                                                'background-color': box.isHovered ? 'rgb(135, 184, 106)' : box.color,\n                                                'width.px': box.size,\n                                                'hover': box.hover,\n                                                'height.px': box.size\n                                              }\" (mouseenter)=\"box.isHovered = true\"\n                                            (mouseleave)=\"box.isHovered = false\">\n                                        </div>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n                <div class=\"inline-block\">\n                    <div class=\"flex flex-nowrap justify-center\">\n                        <div class=\"flex-shrink-0 w-12 max-w-[20%] h-full flex items-center justify-center\"></div>\n                        <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                            class=\"flex-shrink-0 w-10 max-w-[20%] min-h-14 flex text-sm items-center justify-center my-1\"\n                            [ngStyle]=\"{'height': 'auto'}\">\n                            <span class=\"text-rotate\">\n                                {{item}}\n                            </span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n\n    </div>\n\n    <button *ngIf=\"isFullScreen\" class=\"close-button\" (click)=\"toggleFullScreen()\">Close</button>\n</div>" }]
-        }], ctorParameters: function () { return [{ type: CommonService }, { type: i3$1.ToastrService }, { type: kpicommonService$1 }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { componentId: [{
+            args: [{ selector: 'app-gamma-advance-chart', template: "<div class=\"not-full-screen\" (dblclick)=\"toggleFullScreen()\">\n    <ng-container *ngIf=\"page_config?.widGetConfig?.display\">\n        <app-title [title]=\"page_config.widGetConfig.widgetTitle\" [operators]=\"page_config.operations\"\n            [displayType]=\"'chart'\"></app-title>\n    </ng-container>\n    <div class=\"mx-2 p-2 bg-gray-800\">\n        <app-loader *ngIf=\"isLoader\"></app-loader>\n        <ng-container\n            *ngIf=\"chartConfig.chartType !== 'doughnut' && chartConfig.chartType !== 'pie' && chartConfig.chartType !== 'funnel' && chartConfig.chartType !== 'bubble'\">\n            \n            <dx-chart id=\"chart\"  [dataSource]=\"finalChartDataSource\" (onPointClick)=\"getAllChartPointClick($event)\"\n                [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" *ngIf=\"!isLoader\"\n                [valueAxis]=\"chartConfig.valueAxisConfig\">\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item && item.axis\">\n                        <dxi-value-axis name=\"{{item.axis}}\" position=\"{{item.position}}\">\n                            <dxo-title text=\"{{item.name}}\"></dxo-title>\n                        </dxi-value-axis>\n                    </ng-container>\n\n                </ng-container>\n                <dxo-argument-axis>\n                    <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n                </dxo-argument-axis>\n                <dxo-tooltip [enabled]=\"true\" [shared]=\"true\" [customizeTooltip]=\"customizeTooltip\">\n                </dxo-tooltip>\n                <dxo-common-series-settings argumentField=\"{{chartConfig.argumentField}}\">\n                </dxo-common-series-settings>\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item && item.color\">\n                        <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                            name=\"{{item.name}}\" color=\"{{item.color}}\">\n                        </dxi-series>\n                    </ng-container>\n                    <ng-container *ngIf=\"item && !item.color\">\n                        <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                            name=\"{{item.name}}\">\n                        </dxi-series>\n                    </ng-container>\n\n                </ng-container>\n                <dxo-size [height]=\"chartHeight\">\n                </dxo-size>\n                <dxo-legend [visible]=\"chartConfig.legendDisplay\" verticalAlignment=\"{{chartConfig.verticalAlignment}}\"\n                    horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\">\n                </dxo-legend>\n            </dx-chart>\n        </ng-container>\n\n\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'doughnut' || chartConfig.chartType == 'pie'\">\n\n            <dx-pie-chart id=\"pie\" [type]=\"chartConfig.chartType\" [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                [dataSource]=\"finalChartDataSource\" centerTemplate=\"centerTemplate\"\n                (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item.color\">\n                        <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                            name=\"{{item.name}}\" color=\"{{item.color}}\">\n                            <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n                                <dxo-connector [visible]=\"true\"></dxo-connector>\n                            </dxo-label>\n                        </dxi-series>\n                    </ng-container>\n                    <ng-container *ngIf=\"!item.color\">\n                        <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                            name=\"{{item.name}}\">\n                            <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n                                <dxo-connector [visible]=\"true\"></dxo-connector>\n                            </dxo-label>\n                        </dxi-series>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n                <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                    horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n                    verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n                <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n                <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"currency\">\n                </dxo-tooltip>\n                <ng-container *ngIf=\"chartConfig.chartType == 'doughnut'\">\n                    <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n                        <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\" opacity=\"0.0001\">\n                        </circle>\n    \n                        <text text-anchor=\"middle\" style=\"font-size: 15px\" x=\"100\" y=\"100\" fill=\"#eee\">\n                            <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n                            <!-- display: inline -->\n                            <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n                        </text>\n                    </svg>\n                </ng-container>\n            </dx-pie-chart>\n        </ng-container>\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'funnel'\">\n            <dx-funnel id=\"funnel\" [dataSource]=\"finalChartDataSource\" argumentField=\"argument\" valueField=\"value\"\n                palette=\"Soft Pastel\">\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n                <dxo-export [enabled]=\"false\"></dxo-export>\n                <dxo-tooltip [enabled]=\"true\"> </dxo-tooltip>\n                <dxo-item>\n                    <dxo-border [visible]=\"true\"> </dxo-border>\n                </dxo-item>\n                <dxo-label [visible]=\"true\" position=\"inside\" backgroundColor=\"none\"\n                    [customizeText]=\"customizeText\"></dxo-label>\n            </dx-funnel>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'bubble'\">\n            <div class=\"mx-5 overflow-x-auto\">\n                <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"h-10 text-sm items-center min-w-12 max-w-[30%] justify-center flex\">\n                            {{item.datasource}}\n                        </div>\n                        <div class=\"inline-block \">\n                            <div class=\"flex flex-nowrap justify-center \">\n                                <ng-container *ngFor=\"let box of item.dataset\">\n                                    <div class=\"flex-shrink-0 min-w-10 max-w-[20%] h-10 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                        [matTooltip]=\"'Record Date: ' + box.recordDate + '\\nRecharge Count: ' + box.toolTip\"\n                                        matTooltipClass=\"custom-tooltip\">\n                                        <div class=\"rounded-full\" [ngStyle]=\"{\n                                                'background-color': box.isHovered ? 'rgb(135, 184, 106)' : box.color,\n                                                'width.px': box.size,\n                                                'hover': box.hover,\n                                                'height.px': box.size\n                                              }\" (mouseenter)=\"box.isHovered = true\"\n                                            (mouseleave)=\"box.isHovered = false\">\n                                        </div>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n                <div class=\"inline-block\">\n                    <div class=\"flex flex-nowrap justify-center\">\n                        <div class=\"flex-shrink-0 w-12 max-w-[20%] h-full flex items-center justify-center\"></div>\n                        <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                            class=\"flex-shrink-0 w-10 max-w-[20%] min-h-14 flex text-sm items-center justify-center my-1\"\n                            [ngStyle]=\"{'height': 'auto'}\">\n                            <span class=\"text-rotate\">\n                                {{item}}\n                            </span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n\n    </div>\n\n    <button *ngIf=\"isFullScreen\" class=\"close-button\" (click)=\"toggleFullScreen()\">Close</button>\n</div>" }]
+        }], ctorParameters: function () { return [{ type: CommonService }, { type: i3$1.ToastrService }, { type: kpicommonService$1 }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [APP_ENVIRONMENT]
+                }] }]; }, propDecorators: { componentId: [{
                 type: Input
             }], kpi_name: [{
                 type: Input
+            }], onChartPointClick: [{
+                type: Output
             }], chartDataSource: [{
                 type: Input,
                 args: ['chartDataSource']
@@ -17602,7 +17634,122 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                     args: [APP_ENVIRONMENT]
                 }] }]; } });
 
-class MultilayoutApplicationDatssetsCall {
+class KpiWithMultiLayoutService {
+    constructor(http, environment) {
+        this.http = http;
+        this.environment = environment;
+        this.headers = new HttpHeaders().set('Content-Type', 'application/json');
+        this.options = { headers: this.headers, withCredentials: true };
+        this._selectedKpiOnClick = new Subject();
+        this._kpilist = new Subject();
+        this._selectKpiFromDropDown = new Subject();
+        this._componentRegistry = new Map();
+        this.kpiFilter = new BehaviorSubject([]);
+    }
+    handleError(error) {
+        return throwError(error);
+    }
+    getlistKpiBrowser() {
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/listKpiBrowser';
+        return this.http
+            .get(apiUrl, { withCredentials: true })
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+    getAppPageDetailConfig(pageId) {
+        return this.http
+            .get(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppPageDetailConfig?pageConfigId=' + pageId, this.options)
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+    getAppPageConfigs() {
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppPageConfigs';
+        return this.http
+            .get(apiUrl, { withCredentials: true })
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+    getAppDatasetConfigs() {
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppDatasetConfigs';
+        return this.http
+            .get(apiUrl, { withCredentials: true })
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+    getAppDatasetConfig(datasetId) {
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppDatasetConfig?datasetId=' + datasetId;
+        return this.http
+            .get(apiUrl, { withCredentials: true })
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+    getAppFilterConfig(filterId) {
+        return this.http
+            .get(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppFilterConfig?filterId=' + filterId, this.options)
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+    getAppViewConfigs() {
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppViewConfigs';
+        return this.http
+            .get(apiUrl, { withCredentials: true })
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+    getData(body, requestID) {
+        return this.http
+            .post(this.environment.appUrl + this.environment.apiVersion + requestID, JSON.stringify(body), this.options)
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+    getSimpleApiPostRequest(requestApi, body) {
+        return this.http
+            .post(this.environment.appUrl + this.environment.apiVersion + requestApi, JSON.stringify(body), this.options)
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+    getSimpleApiGetRequest(requestApi) {
+        return this.http
+            .get(this.environment.appUrl + this.environment.apiVersion + requestApi, { withCredentials: true })
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+    getJsonDatasetPayload(requestApi) {
+        return this.http
+            .get(this.environment.appUrl + this.environment.apiVersion + requestApi, { withCredentials: true })
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+    genericSqlQueryResponse(requestApi, body) {
+        return this.http
+            .post(this.environment.appUrl + this.environment.apiVersion + requestApi, JSON.stringify(body), this.options)
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+}
+KpiWithMultiLayoutService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithMultiLayoutService, deps: [{ token: i1.HttpClient }, { token: APP_ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+KpiWithMultiLayoutService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithMultiLayoutService, providedIn: "root" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithMultiLayoutService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [APP_ENVIRONMENT]
+                }] }]; } });
+
+class SingleLayoutApplicationDatssetsCall {
     constructor(service, kpiService, toastr, environment) {
         this.service = service;
         this.kpiService = kpiService;
@@ -17949,12 +18096,43 @@ class MultilayoutApplicationDatssetsCall {
         return this.uniqueDataSetObject;
     }
 }
-MultilayoutApplicationDatssetsCall.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultilayoutApplicationDatssetsCall, deps: [{ token: KpiWithSingleLayoutService }, { token: kpicommonService$2 }, { token: i3$1.ToastrService }, { token: APP_ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-MultilayoutApplicationDatssetsCall.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultilayoutApplicationDatssetsCall, providedIn: "root" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultilayoutApplicationDatssetsCall, decorators: [{
+SingleLayoutApplicationDatssetsCall.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SingleLayoutApplicationDatssetsCall, deps: [{ token: KpiWithMultiLayoutService }, { token: kpicommonService$2 }, { token: i3$1.ToastrService }, { token: APP_ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+SingleLayoutApplicationDatssetsCall.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SingleLayoutApplicationDatssetsCall, providedIn: "root" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SingleLayoutApplicationDatssetsCall, decorators: [{
             type: Injectable,
             args: [{ providedIn: "root" }]
-        }], ctorParameters: function () { return [{ type: KpiWithSingleLayoutService }, { type: kpicommonService$2 }, { type: i3$1.ToastrService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: KpiWithMultiLayoutService }, { type: kpicommonService$2 }, { type: i3$1.ToastrService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [APP_ENVIRONMENT]
+                }] }]; } });
+
+class ApplicationChatApiCallService {
+    constructor(service, toastr, activatedRoute, environment) {
+        this.service = service;
+        this.toastr = toastr;
+        this.activatedRoute = activatedRoute;
+        this.environment = environment;
+        this.uniqueDataSetObject = {};
+        this.viewId = new BehaviorSubject(null);
+        this.viewId$ = this.viewId.asObservable();
+    }
+    getViewId(params) {
+        this.viewId.next(params);
+    }
+    getDataForChatAi(pageId, contentView, appliedFilters) {
+        if (this.environment.chatBotClient) {
+            this.viewId.next(contentView.viewId);
+        }
+    }
+}
+ApplicationChatApiCallService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ApplicationChatApiCallService, deps: [{ token: KpiWithSingleLayoutService }, { token: i3$1.ToastrService }, { token: i2.ActivatedRoute }, { token: APP_ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+ApplicationChatApiCallService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ApplicationChatApiCallService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ApplicationChatApiCallService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: KpiWithSingleLayoutService }, { type: i3$1.ToastrService }, { type: i2.ActivatedRoute }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [APP_ENVIRONMENT]
                 }] }]; } });
@@ -18129,7 +18307,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class KpiWithDataSetTestComponent {
-    constructor(commonService, activatedRoute, viewContainerRef, componentFactoryResolver, service, toastr, router, datasetService) {
+    constructor(commonService, activatedRoute, viewContainerRef, componentFactoryResolver, service, toastr, router, datasetService, chatApiService) {
         this.commonService = commonService;
         this.activatedRoute = activatedRoute;
         this.viewContainerRef = viewContainerRef;
@@ -18138,6 +18316,7 @@ class KpiWithDataSetTestComponent {
         this.toastr = toastr;
         this.router = router;
         this.datasetService = datasetService;
+        this.chatApiService = chatApiService;
         this.dashbord_container = [];
         this.widget_width = ['w-full', 'w-1/2', 'w-1/3', 'w-1/4', 'w-1/5', 'w-1/6'];
         this.page_title = 'Dashboard';
@@ -18632,11 +18811,13 @@ class KpiWithDataSetTestComponent {
                 if (this.getElementOfCurrentView(node, event.drilldownTo)) {
                     let view = element.widgetNode[nodeIndex];
                     let apiCalls = [];
+                    let chatApiCall = [];
                     let appliedFilters = this.getSetOperatorFilter(event, this.stateDataSource.get(event.drilldownFrom));
                     view.compConfig.viewConfig.forEach(contentView => {
                         let found = this.dataSetModal.find(d => d.datasetId === contentView.datasetId);
                         if (found) {
                             apiCalls.push(this.datasetService.getDataFromDataSet(found, contentView.datasetId, appliedFilters));
+                            chatApiCall.push(this.chatApiService.getDataForChatAi(this.pageId, contentView, appliedFilters));
                         }
                     });
                     Promise.all(apiCalls).then(() => {
@@ -18862,11 +19043,13 @@ class KpiWithDataSetTestComponent {
     }
     async getViewByRowCLick(event, view) {
         let apiCalls = [];
+        let chatApiCall = [];
         let appliedFilters = this.getSetOperatorFilter(event, this.stateDataSource.get(event.viewId));
         view.compConfig.viewConfig.forEach(contentView => {
             let found = this.dataSetModal.find(d => d.datasetId === contentView.datasetId);
             if (found) {
                 apiCalls.push(this.datasetService.getDataFromDataSet(found, contentView.datasetId, appliedFilters));
+                chatApiCall.push(this.chatApiService.getDataForChatAi(this.pageId, contentView, appliedFilters));
             }
         });
         await Promise.all(apiCalls);
@@ -19128,12 +19311,12 @@ class KpiWithDataSetTestComponent {
         }
     }
 }
-KpiWithDataSetTestComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithDataSetTestComponent, deps: [{ token: CommonService }, { token: i2.ActivatedRoute }, { token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: KpiWithSingleLayoutService }, { token: i3$1.ToastrService }, { token: i2.Router }, { token: MultilayoutApplicationDatssetsCall }], target: i0.ɵɵFactoryTarget.Component });
+KpiWithDataSetTestComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithDataSetTestComponent, deps: [{ token: CommonService }, { token: i2.ActivatedRoute }, { token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: KpiWithSingleLayoutService }, { token: i3$1.ToastrService }, { token: i2.Router }, { token: SingleLayoutApplicationDatssetsCall }, { token: ApplicationChatApiCallService }], target: i0.ɵɵFactoryTarget.Component });
 KpiWithDataSetTestComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: KpiWithDataSetTestComponent, selector: "app-kpi-with-dataset", viewQueries: [{ propertyName: "dynamicComponentContainer", first: true, predicate: ["dynamicComponentContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "dynamicContainer", first: true, predicate: ["dynamicContainer"], descendants: true, static: true }, { propertyName: "dynamicContainerForPopup", first: true, predicate: ["dynamicContainerForPopup"], descendants: true, static: true }], ngImport: i0, template: "<app-loading *ngIf=\"loadingModal\"></app-loading>\n\n<div class=\"w-full\">\n    <div class=\"flex flex-wrap \" #dynamicContainer></div>\n</div>\n\n<dx-popup [(visible)]=\"isWidgetFilters\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"800\" [height]=\"400\"\n    [showTitle]=\"true\" class=\"popup\" title=\"Dataset Filter\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <div class=\"my-2\">\n            <dx-scroll-view [width]=\"'100%'\" [height]=\"'85%'\">\n                <ng-container *ngFor=\"let item of nodeproperticeFilterDataSource.havingConfig; let i = index\">\n                    <div class=\"flex flex-row my-2\">\n                        <div class=\"m-1\">\n                            <dx-text-box [(ngModel)]=\"item.columnName\"></dx-text-box>\n                        </div>\n                        <div class=\"m-1\">\n                            <dx-select-box [items]=\"['get','let']\" [(ngModel)]=\"item.operator\"\n                                placeholder=\"Operator\"></dx-select-box>\n                        </div>\n                        <div class=\"m-1\">\n                            <dx-text-box [(ngModel)]=\"item.value\"></dx-text-box>\n                        </div>\n                    </div>\n                </ng-container>\n\n            </dx-scroll-view>\n            <div class=\"flex justify-end mx-1 flex-grow border-t\">\n                <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n                    (click)=\"submitFilter()\">Submit</button>\n            </div>\n\n        </div>\n\n    </div>\n</dx-popup>\n<dx-popup [(visible)]=\"isPopupView\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"1000\" [height]=\"'auto'\"\n    [showTitle]=\"true\" class=\"popup\" title=\"Popup View\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <div class=\"w-full\">\n            <app-dynamic-widget [modalConfigs]=\"modalConfigs\"  [contextMenuDataSource]=\"contextMenuDataSource\">\n            </app-dynamic-widget>\n        </div>\n    </div>\n</dx-popup>", styles: [".custom-tooltip{display:none;position:absolute;top:100%;left:0;background:rgba(0,0,0,.8);color:#fff;padding:8px;border-radius:5px;font-size:12px;white-space:nowrap;z-index:100}\n"], dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent$1, selector: "app-loading" }, { kind: "directive", type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i9$1.DxPopupComponent, selector: "dx-popup", inputs: ["accessKey", "animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "elementAttr", "focusStateEnabled", "fullScreen", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "resizeEnabled", "restorePosition", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showTitle", "tabIndex", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onResize", "onResizeEnd", "onResizeStart", "onShowing", "onShown", "onTitleRendered", "accessKeyChange", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "dragAndResizeAreaChange", "dragEnabledChange", "dragOutsideBoundaryChange", "elementAttrChange", "focusStateEnabledChange", "fullScreenChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "resizeEnabledChange", "restorePositionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showTitleChange", "tabIndexChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i10$1.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DynamicWidgetComponent, selector: "app-dynamic-widget", inputs: ["view", "datasetById", "contextMenuDataSource", "modalConfigs"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithDataSetTestComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-kpi-with-dataset', template: "<app-loading *ngIf=\"loadingModal\"></app-loading>\n\n<div class=\"w-full\">\n    <div class=\"flex flex-wrap \" #dynamicContainer></div>\n</div>\n\n<dx-popup [(visible)]=\"isWidgetFilters\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"800\" [height]=\"400\"\n    [showTitle]=\"true\" class=\"popup\" title=\"Dataset Filter\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <div class=\"my-2\">\n            <dx-scroll-view [width]=\"'100%'\" [height]=\"'85%'\">\n                <ng-container *ngFor=\"let item of nodeproperticeFilterDataSource.havingConfig; let i = index\">\n                    <div class=\"flex flex-row my-2\">\n                        <div class=\"m-1\">\n                            <dx-text-box [(ngModel)]=\"item.columnName\"></dx-text-box>\n                        </div>\n                        <div class=\"m-1\">\n                            <dx-select-box [items]=\"['get','let']\" [(ngModel)]=\"item.operator\"\n                                placeholder=\"Operator\"></dx-select-box>\n                        </div>\n                        <div class=\"m-1\">\n                            <dx-text-box [(ngModel)]=\"item.value\"></dx-text-box>\n                        </div>\n                    </div>\n                </ng-container>\n\n            </dx-scroll-view>\n            <div class=\"flex justify-end mx-1 flex-grow border-t\">\n                <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n                    (click)=\"submitFilter()\">Submit</button>\n            </div>\n\n        </div>\n\n    </div>\n</dx-popup>\n<dx-popup [(visible)]=\"isPopupView\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"1000\" [height]=\"'auto'\"\n    [showTitle]=\"true\" class=\"popup\" title=\"Popup View\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <div class=\"w-full\">\n            <app-dynamic-widget [modalConfigs]=\"modalConfigs\"  [contextMenuDataSource]=\"contextMenuDataSource\">\n            </app-dynamic-widget>\n        </div>\n    </div>\n</dx-popup>", styles: [".custom-tooltip{display:none;position:absolute;top:100%;left:0;background:rgba(0,0,0,.8);color:#fff;padding:8px;border-radius:5px;font-size:12px;white-space:nowrap;z-index:100}\n"] }]
-        }], ctorParameters: function () { return [{ type: CommonService }, { type: i2.ActivatedRoute }, { type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: KpiWithSingleLayoutService }, { type: i3$1.ToastrService }, { type: i2.Router }, { type: MultilayoutApplicationDatssetsCall }]; }, propDecorators: { dynamicComponentContainer: [{
+        }], ctorParameters: function () { return [{ type: CommonService }, { type: i2.ActivatedRoute }, { type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: KpiWithSingleLayoutService }, { type: i3$1.ToastrService }, { type: i2.Router }, { type: SingleLayoutApplicationDatssetsCall }, { type: ApplicationChatApiCallService }]; }, propDecorators: { dynamicComponentContainer: [{
                 type: ViewChild,
                 args: ['dynamicComponentContainer', { read: ViewContainerRef }]
             }], containerRef: [{
@@ -19192,7 +19375,7 @@ KpiWithSingleLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0
         MatIconModule,
         LoadingModule$1], exports: [DynamicWidgetComponent,
         KpiWithDataSetTestComponent] });
-KpiWithSingleLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithSingleLayoutModule, providers: [KpiWithSingleLayoutService, MultilayoutApplicationDatssetsCall], imports: [CommonModule,
+KpiWithSingleLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithSingleLayoutModule, providers: [KpiWithSingleLayoutService, SingleLayoutApplicationDatssetsCall, ApplicationChatApiCallService], imports: [CommonModule,
         LoadingModule$1,
         CommonModule,
         DevExtremeModule,
@@ -19284,7 +19467,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         DynamicWidgetComponent,
                         KpiWithDataSetTestComponent
                     ],
-                    providers: [KpiWithSingleLayoutService, MultilayoutApplicationDatssetsCall],
+                    providers: [KpiWithSingleLayoutService, SingleLayoutApplicationDatssetsCall, ApplicationChatApiCallService],
                 }]
         }] });
 
@@ -19457,122 +19640,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['modalConfigs']
             }] } });
 
-class KpiWithMultiLayoutService {
-    constructor(http, environment) {
-        this.http = http;
-        this.environment = environment;
-        this.headers = new HttpHeaders().set('Content-Type', 'application/json');
-        this.options = { headers: this.headers, withCredentials: true };
-        this._selectedKpiOnClick = new Subject();
-        this._kpilist = new Subject();
-        this._selectKpiFromDropDown = new Subject();
-        this._componentRegistry = new Map();
-        this.kpiFilter = new BehaviorSubject([]);
-    }
-    handleError(error) {
-        return throwError(error);
-    }
-    getlistKpiBrowser() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/listKpiBrowser';
-        return this.http
-            .get(apiUrl, { withCredentials: true })
-            .pipe(map((response) => {
-            return response;
-        }), catchError(this.handleError));
-    }
-    getAppPageDetailConfig(pageId) {
-        return this.http
-            .get(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppPageDetailConfig?pageConfigId=' + pageId, this.options)
-            .pipe(map((response) => {
-            return response;
-        }), catchError(this.handleError));
-    }
-    getAppPageConfigs() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppPageConfigs';
-        return this.http
-            .get(apiUrl, { withCredentials: true })
-            .pipe(map((response) => {
-            return response;
-        }), catchError(this.handleError));
-    }
-    getAppDatasetConfigs() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppDatasetConfigs';
-        return this.http
-            .get(apiUrl, { withCredentials: true })
-            .pipe(map((response) => {
-            return response;
-        }), catchError(this.handleError));
-    }
-    getAppDatasetConfig(datasetId) {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppDatasetConfig?datasetId=' + datasetId;
-        return this.http
-            .get(apiUrl, { withCredentials: true })
-            .pipe(map((response) => {
-            return response;
-        }), catchError(this.handleError));
-    }
-    getAppFilterConfig(filterId) {
-        return this.http
-            .get(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppFilterConfig?filterId=' + filterId, this.options)
-            .pipe(map((response) => {
-            return response;
-        }), catchError(this.handleError));
-    }
-    getAppViewConfigs() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppViewConfigs';
-        return this.http
-            .get(apiUrl, { withCredentials: true })
-            .pipe(map((response) => {
-            return response;
-        }), catchError(this.handleError));
-    }
-    getData(body, requestID) {
-        return this.http
-            .post(this.environment.appUrl + this.environment.apiVersion + requestID, JSON.stringify(body), this.options)
-            .pipe(map((response) => {
-            return response;
-        }), catchError(this.handleError));
-    }
-    getSimpleApiPostRequest(requestApi, body) {
-        return this.http
-            .post(this.environment.appUrl + this.environment.apiVersion + requestApi, JSON.stringify(body), this.options)
-            .pipe(map((response) => {
-            return response;
-        }), catchError(this.handleError));
-    }
-    getSimpleApiGetRequest(requestApi) {
-        return this.http
-            .get(this.environment.appUrl + this.environment.apiVersion + requestApi, { withCredentials: true })
-            .pipe(map((response) => {
-            return response;
-        }), catchError(this.handleError));
-    }
-    getJsonDatasetPayload(requestApi) {
-        return this.http
-            .get(this.environment.appUrl + this.environment.apiVersion + requestApi, { withCredentials: true })
-            .pipe(map((response) => {
-            return response;
-        }), catchError(this.handleError));
-    }
-    genericSqlQueryResponse(requestApi, body) {
-        return this.http
-            .post(this.environment.appUrl + this.environment.apiVersion + requestApi, JSON.stringify(body), this.options)
-            .pipe(map((response) => {
-            return response;
-        }), catchError(this.handleError));
-    }
-}
-KpiWithMultiLayoutService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithMultiLayoutService, deps: [{ token: i1.HttpClient }, { token: APP_ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-KpiWithMultiLayoutService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithMultiLayoutService, providedIn: "root" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithMultiLayoutService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: "root" }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [APP_ENVIRONMENT]
-                }] }]; } });
-
-class SingleLayoutApplicationDatssetsCall {
+class MultilayoutApplicationDatssetsCall {
     constructor(service, kpiService, toastr, environment) {
         this.service = service;
         this.kpiService = kpiService;
@@ -19919,12 +19987,12 @@ class SingleLayoutApplicationDatssetsCall {
         return this.uniqueDataSetObject;
     }
 }
-SingleLayoutApplicationDatssetsCall.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SingleLayoutApplicationDatssetsCall, deps: [{ token: KpiWithMultiLayoutService }, { token: kpicommonService$2 }, { token: i3$1.ToastrService }, { token: APP_ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-SingleLayoutApplicationDatssetsCall.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SingleLayoutApplicationDatssetsCall, providedIn: "root" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SingleLayoutApplicationDatssetsCall, decorators: [{
+MultilayoutApplicationDatssetsCall.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultilayoutApplicationDatssetsCall, deps: [{ token: KpiWithSingleLayoutService }, { token: kpicommonService$2 }, { token: i3$1.ToastrService }, { token: APP_ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+MultilayoutApplicationDatssetsCall.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultilayoutApplicationDatssetsCall, providedIn: "root" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultilayoutApplicationDatssetsCall, decorators: [{
             type: Injectable,
             args: [{ providedIn: "root" }]
-        }], ctorParameters: function () { return [{ type: KpiWithMultiLayoutService }, { type: kpicommonService$2 }, { type: i3$1.ToastrService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: KpiWithSingleLayoutService }, { type: kpicommonService$2 }, { type: i3$1.ToastrService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [APP_ENVIRONMENT]
                 }] }]; } });
@@ -20879,12 +20947,12 @@ class KpiWithMultilayoutSetTestComponent {
         }
     }
 }
-KpiWithMultilayoutSetTestComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithMultilayoutSetTestComponent, deps: [{ token: CommonService }, { token: i2.ActivatedRoute }, { token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: KpiWithMultiLayoutService }, { token: i3$1.ToastrService }, { token: i2.Router }, { token: SingleLayoutApplicationDatssetsCall }], target: i0.ɵɵFactoryTarget.Component });
+KpiWithMultilayoutSetTestComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithMultilayoutSetTestComponent, deps: [{ token: CommonService }, { token: i2.ActivatedRoute }, { token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: KpiWithMultiLayoutService }, { token: i3$1.ToastrService }, { token: i2.Router }, { token: MultilayoutApplicationDatssetsCall }], target: i0.ɵɵFactoryTarget.Component });
 KpiWithMultilayoutSetTestComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: KpiWithMultilayoutSetTestComponent, selector: "app-kpi-with-multilayout", viewQueries: [{ propertyName: "dynamicComponentContainer", first: true, predicate: ["dynamicComponentContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "dynamicContainer", first: true, predicate: ["dynamicContainer"], descendants: true, static: true }], ngImport: i0, template: "<app-loading *ngIf=\"loadingModal\"></app-loading>\n\n<div class=\"w-full\">\n    <div class=\"flex flex-wrap \" #dynamicContainer></div>\n</div>\n\n<dx-popup [(visible)]=\"isWidgetFilters\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"800\" [height]=\"400\"\n    [showTitle]=\"true\" class=\"popup\" title=\"Dataset Filter\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <div class=\"my-2\">\n            <dx-scroll-view [width]=\"'100%'\" [height]=\"'85%'\">\n                <ng-container *ngFor=\"let item of nodeproperticeFilterDataSource.havingConfig; let i = index\">\n                    <div class=\"flex flex-row my-2\">\n                        <div class=\"m-1\">\n                            <dx-text-box [(ngModel)]=\"item.columnName\"></dx-text-box>\n                        </div>\n                        <div class=\"m-1\">\n                            <dx-select-box [items]=\"['get','let']\" [(ngModel)]=\"item.operator\"\n                                placeholder=\"Operator\"></dx-select-box>\n                        </div>\n                        <div class=\"m-1\">\n                            <dx-text-box [(ngModel)]=\"item.value\"></dx-text-box>\n                        </div>\n                    </div>\n                </ng-container>\n\n            </dx-scroll-view>\n            <div class=\"flex justify-end mx-1 flex-grow border-t\">\n                <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n                    (click)=\"submitFilter()\">Submit</button>\n            </div>\n\n        </div>\n\n    </div>\n</dx-popup>\n\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent$1, selector: "app-loading" }, { kind: "directive", type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i9$1.DxPopupComponent, selector: "dx-popup", inputs: ["accessKey", "animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "elementAttr", "focusStateEnabled", "fullScreen", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "resizeEnabled", "restorePosition", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showTitle", "tabIndex", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onResize", "onResizeEnd", "onResizeStart", "onShowing", "onShown", "onTitleRendered", "accessKeyChange", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "dragAndResizeAreaChange", "dragEnabledChange", "dragOutsideBoundaryChange", "elementAttrChange", "focusStateEnabledChange", "fullScreenChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "resizeEnabledChange", "restorePositionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showTitleChange", "tabIndexChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i10$1.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithMultilayoutSetTestComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-kpi-with-multilayout', template: "<app-loading *ngIf=\"loadingModal\"></app-loading>\n\n<div class=\"w-full\">\n    <div class=\"flex flex-wrap \" #dynamicContainer></div>\n</div>\n\n<dx-popup [(visible)]=\"isWidgetFilters\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"800\" [height]=\"400\"\n    [showTitle]=\"true\" class=\"popup\" title=\"Dataset Filter\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <div class=\"my-2\">\n            <dx-scroll-view [width]=\"'100%'\" [height]=\"'85%'\">\n                <ng-container *ngFor=\"let item of nodeproperticeFilterDataSource.havingConfig; let i = index\">\n                    <div class=\"flex flex-row my-2\">\n                        <div class=\"m-1\">\n                            <dx-text-box [(ngModel)]=\"item.columnName\"></dx-text-box>\n                        </div>\n                        <div class=\"m-1\">\n                            <dx-select-box [items]=\"['get','let']\" [(ngModel)]=\"item.operator\"\n                                placeholder=\"Operator\"></dx-select-box>\n                        </div>\n                        <div class=\"m-1\">\n                            <dx-text-box [(ngModel)]=\"item.value\"></dx-text-box>\n                        </div>\n                    </div>\n                </ng-container>\n\n            </dx-scroll-view>\n            <div class=\"flex justify-end mx-1 flex-grow border-t\">\n                <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n                    (click)=\"submitFilter()\">Submit</button>\n            </div>\n\n        </div>\n\n    </div>\n</dx-popup>\n\n\n\n" }]
-        }], ctorParameters: function () { return [{ type: CommonService }, { type: i2.ActivatedRoute }, { type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: KpiWithMultiLayoutService }, { type: i3$1.ToastrService }, { type: i2.Router }, { type: SingleLayoutApplicationDatssetsCall }]; }, propDecorators: { dynamicComponentContainer: [{
+        }], ctorParameters: function () { return [{ type: CommonService }, { type: i2.ActivatedRoute }, { type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: KpiWithMultiLayoutService }, { type: i3$1.ToastrService }, { type: i2.Router }, { type: MultilayoutApplicationDatssetsCall }]; }, propDecorators: { dynamicComponentContainer: [{
                 type: ViewChild,
                 args: ['dynamicComponentContainer', { read: ViewContainerRef }]
             }], containerRef: [{
@@ -20940,7 +21008,7 @@ KpiWithMultiLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0"
         MatIconModule,
         LoadingModule$1], exports: [KpiWithMultilayoutSetTestComponent,
         DynamicWidgetForMultilayoutComponent] });
-KpiWithMultiLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithMultiLayoutModule, providers: [KpiWithMultiLayoutService, SingleLayoutApplicationDatssetsCall], imports: [CommonModule,
+KpiWithMultiLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithMultiLayoutModule, providers: [KpiWithMultiLayoutService, MultilayoutApplicationDatssetsCall], imports: [CommonModule,
         LoadingModule$1,
         CommonModule,
         DevExtremeModule,
@@ -21032,7 +21100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         KpiWithMultilayoutSetTestComponent,
                         DynamicWidgetForMultilayoutComponent
                     ],
-                    providers: [KpiWithMultiLayoutService, SingleLayoutApplicationDatssetsCall],
+                    providers: [KpiWithMultiLayoutService, MultilayoutApplicationDatssetsCall],
                 }]
         }] });
 
@@ -23904,5 +23972,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
-export { APP_ENVIRONMENT, AdvanceWidgetHeaderFilterComponent, AllMetricsConfigComponent, AppAdvanceHeaderComponent, AppHttpService, AppTitleComponent, ApplicationContentService, ApplicationDatssetsCall, ApplicationFilterComponent, ApplicationViewsComponent, BookMarkedTemplatemodule, BookmarkedApplicationDatssetsCall, BookmarkedService, BookmarkedTemplateComponent, BreadCrumbsComponent, CdrConfigComponent, CdrConfigMoudule, CommonHeaderComponent, CommonService, CreateCompViewComponent, CreateDatasetComponent, CreateDatasetJsonComponent, CreateDatasetSqlComponent, CreateKpiTreeComponent, CreateMetricsComponent, DashChartComponent, DashTableComponent, DashTodayPreviousComponent, DefaultLandingComponenttModule, DynamicWidgetComponent, DynamicWidgetForMultilayoutComponent, ExceptionOperationComponent, ExceptionOperationModule, GamamWidgetComponent, GammSingleNumberCardComponent, GammaAdvanceChartComponent, GammaAdvanceFilterComponent, GammaAdvanceOperatorTableComponent, GammaAppControllerComponent, GammaAppControllerModule, GammaAppControllerService, GammaGeoChartComponent, GammaHeatChartComponent, GammaTableClumnBarChartComponent, GammaTableWithPercentageComponent, GammaTodayPreviousComponent, GeoMapComponent, GoogleGeoMapComponent, HeatMapSupportComponent, IconsModule, KpiCreationModule, KpiWithDataSetTestComponent, KpiWithMultiLayoutModule, KpiWithMultiLayoutService, KpiWithMultilayoutSetTestComponent, KpiWithSingleLayoutModule, KpiWithSingleLayoutService, LandingApplicationDatssetsCall, LandingComponentComponent, LandingComponentService, LoaderComponent, LoadingComponent, LoadingModule, OflineMetricsComponent, OnlineMetricsComponent, PackageApplicationControllerModule, PageConfigComponent, PageConfigMultilayoutComponent, PageControlerComponent, SafeHtmlPipe, SingleLayoutApplicationDatssetsCall, SqlPipe, TableWithBarComponent, TreeViewAsideItemComponent, TreeViewBasicItemComponent, TreeViewCollapsableItemComponent, TreeViewDividerItemComponent, TreeViewGroupItemComponent, TreeViewSpacerItemComponent, TreeviewComponent, contentSafeHtml, kpicommonService$2 as kpicommonService };
+export { APP_ENVIRONMENT, AdvanceWidgetHeaderFilterComponent, AllMetricsConfigComponent, AppAdvanceHeaderComponent, AppHttpService, AppTitleComponent, ApplicationChatApiCallService, ApplicationContentService, ApplicationDatssetsCall, ApplicationFilterComponent, ApplicationViewsComponent, BookMarkedTemplatemodule, BookmarkedApplicationDatssetsCall, BookmarkedService, BookmarkedTemplateComponent, BreadCrumbsComponent, CdrConfigComponent, CdrConfigMoudule, CommonHeaderComponent, CommonService, CreateCompViewComponent, CreateDatasetComponent, CreateDatasetJsonComponent, CreateDatasetSqlComponent, CreateKpiTreeComponent, CreateMetricsComponent, DashChartComponent, DashTableComponent, DashTodayPreviousComponent, DefaultLandingComponenttModule, DynamicWidgetComponent, DynamicWidgetForMultilayoutComponent, ExceptionOperationComponent, ExceptionOperationModule, GamamWidgetComponent, GammSingleNumberCardComponent, GammaAdvanceChartComponent, GammaAdvanceFilterComponent, GammaAdvanceOperatorTableComponent, GammaAppControllerComponent, GammaAppControllerModule, GammaAppControllerService, GammaGeoChartComponent, GammaHeatChartComponent, GammaTableClumnBarChartComponent, GammaTableWithPercentageComponent, GammaTodayPreviousComponent, GeoMapComponent, GoogleGeoMapComponent, HeatMapSupportComponent, IconsModule, KpiCreationModule, KpiWithDataSetTestComponent, KpiWithMultiLayoutModule, KpiWithMultiLayoutService, KpiWithMultilayoutSetTestComponent, KpiWithSingleLayoutModule, KpiWithSingleLayoutService, LandingApplicationDatssetsCall, LandingComponentComponent, LandingComponentService, LoaderComponent, LoadingComponent, LoadingModule, MultilayoutApplicationDatssetsCall, OflineMetricsComponent, OnlineMetricsComponent, PackageApplicationControllerModule, PageConfigComponent, PageConfigMultilayoutComponent, PageControlerComponent, SafeHtmlPipe, SingleLayoutApplicationDatssetsCall, SqlPipe, TableWithBarComponent, TreeViewAsideItemComponent, TreeViewBasicItemComponent, TreeViewCollapsableItemComponent, TreeViewDividerItemComponent, TreeViewGroupItemComponent, TreeViewSpacerItemComponent, TreeviewComponent, contentSafeHtml, kpicommonService$2 as kpicommonService };
 //# sourceMappingURL=gamma-app-controller.mjs.map