gamma-app-controller 2.0.25 → 3.0.1

package/fesm2020/gamma-app-controller.mjs

@@ -8856,9 +8856,11 @@ class BreadCrumbsComponent {
             return;
         }
         else {
-            this.kpiListData = value;
-            this.getBreadCrumbsData(value);
-            this.loadBreadCrumbs();
+            let relativePath = 'rakpiBrowser';
+            this.getKpiName(value, relativePath);
+            setTimeout(() => {
+                this.loadBreadCrumbs();
+            }, 500);
             this.isBreadCrumbs = true;
         }
     }
@@ -8895,70 +8897,76 @@ class BreadCrumbsComponent {
         let structures = {};
         data.forEach(result => {
             const item = {};
-            item["name"] = result["kpiName"];
-            item["pageId"] = result.tagType == 'child' ? result["pageId"] : null;
-            item["tid"] = result.tagType == 'child' ? result["childTid"].trim() : result["parentTid"].trim();
+            item["relativePath"] = result.relativePath;
+            item["name"] = result["name"];
+            item["pageId"] = result["pageId"];
+            item["tid"] = result["tid"].trim();
+            if (result["nodes"] !== undefined) {
+                item["nodes"] = this.getBreadCrumbsData(result["nodes"]);
+            }
             this.kpi_names[result["pageId"]] = item["tid"];
-            structures[result["childTid"]] = item;
-            this.kpi_structures[result["childTid"]] = item;
+            structures[result["tid"]] = item;
+            this.kpi_structures[result["tid"]] = item;
         });
         return structures;
     }
     loadBreadCrumbs() {
-        const pageId = this.activatedRoute.snapshot.queryParams['pageId'];
-        const kpiTid = this.kpi_names[pageId];
+        let kpiRoot = this.kpiBrowserName ? "fmskpi" : "rakpi";
+        let kpiContainer;
+        if (this.kpiListData.length > 0 || this.kpiListData != undefined) {
+            kpiContainer = this.getBreadCrumbsData(this.kpiListData);
+        }
+        else {
+            kpiContainer = this.getBreadCrumbsData(this.commonService.allKpibrowserDetailContainer);
+        }
+        const kpiId = this.activatedRoute.snapshot.queryParams['pageId'];
+        const kpiTid = this.kpi_names[kpiId];
         const props = this.kpi_structures[kpiTid];
-        const propsList = this.buildKpiPath(this.kpiListData, props["tid"]);
-        this.breadcrumbList = propsList.split("/");
-        if (this.location.path() !== "") {
-            let link = {};
-            this.breadcrumbLinksList = [];
-            this.breadcrumbLinksList.unshift({
-                name: "RA KPI Browser",
-                url: "/apps/raKpi/rakpiBrowser",
-                kpiName: "RA KPI Browser"
-            });
-            for (let i = 0; i < this.breadcrumbList.length; i++) {
-                let returnId = "";
-                for (let j = 0; j <= i; j++) {
-                    if (j != 0) {
-                        returnId += "/";
+        if (props) {
+            const propsList = props["relativePath"] + "/" + props["name"];
+            this.breadcrumbList = propsList.split("/");
+            if (this.location.path() !== "") {
+                let link = {};
+                this.breadcrumbLinksList = [];
+                for (let i = 0; i < this.breadcrumbList.length; i++) {
+                    if (i == 0) {
+                        if (!this.kpiBrowserName) {
+                            link = {
+                                name: this.breadcrumbList[i],
+                                url: "/apps/raKpi/rakpiBrowser",
+                                kpiName: "RA KPI Browser",
+                            };
+                        }
+                        else {
+                            link = {
+                                name: this.breadcrumbList[i],
+                                url: "/apps/fmsKpi",
+                                kpiName: "FMS KPI Browser",
+                            };
+                        }
                     }
-                    returnId += this.breadcrumbList[j];
-                }
-                link = {
-                    name: this.breadcrumbList[i],
-                    url: this.breadcrumbLinksList[i]["url"],
-                    id: this.breadcrumbList[i],
-                    kpiName: this.breadcrumbList[i],
-                    returnId: returnId,
-                };
-                this.commonService.global_kpi_name = this.breadcrumbList[i];
-                this.breadcrumbLinksList.push(link);
-            }
-            this.count = this.breadcrumbList.length;
-        }
-    }
-    buildKpiPath(kpiListData, startTid) {
-        const path = [];
-        const tidArray = this.buildTidArray(startTid);
-        tidArray.forEach((tid, index) => {
-            const kpi = kpiListData.find(kpi => index === 0
-                ? kpi.parentTid === tid
-                : kpi.childTid === tid);
-            if (kpi) {
-                path.push(kpi.kpiName);
+                    else {
+                        let returnId = "";
+                        for (let j = 0; j <= i; j++) {
+                            if (j != 0) {
+                                returnId += "/";
+                            }
+                            returnId += this.breadcrumbList[j];
+                        }
+                        link = {
+                            name: this.breadcrumbList[i],
+                            url: this.breadcrumbLinksList[i - 1]["url"],
+                            id: this.breadcrumbList[i],
+                            kpiName: this.breadcrumbList[i],
+                            returnId: returnId,
+                        };
+                        this.commonService.global_kpi_name = this.breadcrumbList[i];
+                    }
+                    this.breadcrumbLinksList.push(link);
+                }
+                this.count = this.breadcrumbList.length;
             }
-        });
-        return path.join(" / ");
-    }
-    buildTidArray(startTid) {
-        const parts = startTid.split(".");
-        const result = [];
-        for (let i = 0; i < parts.length; i++) {
-            result.push(parts.slice(0, i + 1).join("."));
         }
-        return result;
     }
 }
 BreadCrumbsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BreadCrumbsComponent, deps: [{ token: i4$2.Location }, { token: i2.Router }, { token: i1.HttpClient }, { token: i2.ActivatedRoute }, { token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
@@ -9781,16 +9789,17 @@ class GammaHeatChartComponent {
         this.rightClickEnable = true;
     }
     set chartDataSource(value) {
+        debugger;
         if (value === undefined || value.length === 0) {
             return;
         }
         else {
             this.isLoader = true;
             this.page_config = value;
-            this.page_parms = value.titleParams;
+            debugger;
             if (value.kpiConfig.dataSource && value.kpiConfig.dataSource.length !== 0) {
                 this.heatmapChartConfig = value.kpiConfig.dataConfig;
-                this.colorArray = value.kpiConfig.dataConfig.color;
+                this.colorArray = value.kpiConfig.dataConfig.color || ["rgba(45, 110, 18,1)", "rgba(255, 204, 0,1)"];
                 this.getHeatmapData(value.kpiConfig.dataSource);
                 setTimeout(() => {
                     this.isLoader = false;
@@ -9800,7 +9809,7 @@ class GammaHeatChartComponent {
                 setTimeout(() => {
                     this.dataSourseForTable = [];
                     this.tableDataConfig['columns'] = [];
-                    this.isLoader = false;
+                    this.isLoader = true;
                 }, 200);
             }
         }
@@ -9849,7 +9858,9 @@ class GammaHeatChartComponent {
         const allEntries = [];
         const topArg = this.heatmapChartConfig.topArgument;
         const leftArg = this.heatmapChartConfig.leftArgument;
-        const valueField = this.heatmapChartConfig.columns[0].dataField;
+        const mapColumn = this.heatmapChartConfig.columns.filter(col => col.displayFor === 'map' && col.visible);
+        const tooltipColumns = this.heatmapChartConfig.columns.filter(col => col.displayFor === 'tooltip' && col.visible);
+        const valueField = mapColumn.length > 0 ? mapColumn[0].dataField : null;
         data.forEach(entry => {
             const formattedDate = (moment$1(entry[topArg]).format('YYYY-MM-DD')) ? moment$1(entry[topArg]).format('YYYY-MM-DD') : topArg;
             uniqueDates.add(formattedDate);
@@ -9877,7 +9888,14 @@ class GammaHeatChartComponent {
             if (!dateMap[date]) {
                 dateMap[date] = [];
             }
-            let toolTip = `Record Date : ${item[topArg]} \n${this.commonService.convertString(valueField)} : ${this.commonService.ThousandSeparatorWithTwoDecimals(item[valueField])}`;
+            let toolTip = '';
+            if (valueField) {
+                toolTip += `${this.commonService.convertString(valueField)} : ${item[valueField]}\n`;
+            }
+            tooltipColumns.forEach(col => {
+                const value = item[col.dataField];
+                toolTip += `${col.caption} : ${value}\n`;
+            });
             dateMap[date].push({
                 [leftArg]: item[leftArg],
                 [valueField]: item[valueField],
@@ -9904,7 +9922,9 @@ class GammaHeatChartComponent {
         const dataSourceMap = {};
         const topArg = this.heatmapChartConfig.topArgument;
         const leftArg = this.heatmapChartConfig.leftArgument;
-        const valueField = this.heatmapChartConfig.columns[0].dataField;
+        const mapColumn = this.heatmapChartConfig.columns.filter(col => col.displayFor === 'map' && col.visible);
+        const tooltipColumns = this.heatmapChartConfig.columns.filter(col => col.displayFor === 'tooltip' && col.visible);
+        const valueField = mapColumn.length > 0 ? mapColumn[0].dataField : null;
         data.forEach(item => {
             const rowKey = item[leftArg];
             const columnKey = moment$1(item[topArg]).format('YYYY-MM-DD');
@@ -9914,7 +9934,14 @@ class GammaHeatChartComponent {
                     dataset: []
                 };
             }
-            let toolTip = `${this.commonService.convertString(leftArg)} : ${item[leftArg]} \nRecord Date : ${columnKey} \n${this.commonService.convertString(valueField)} : ${this.commonService.ThousandSeparatorWithTwoDecimals(item[valueField])}`;
+            let toolTip = '';
+            if (valueField) {
+                toolTip += `${this.commonService.convertString(valueField)} : ${item[valueField]} | `;
+            }
+            tooltipColumns.forEach(col => {
+                const value = item[col.dataField];
+                toolTip += `${col.caption} : ${value} | `;
+            });
             dataSourceMap[rowKey].dataset.push({
                 ...item,
                 toolTip: toolTip,
@@ -10040,26 +10067,61 @@ class GammaHeatChartComponent {
     getObjectKeys(obj) {
         return Object.keys(obj);
     }
-    callServiceFunction(functionName, value) {
-        if (value !== undefined) {
-            if (typeof this.commonService[functionName] === "function") {
-                return this.commonService[functionName](value);
+    callServiceFunction(data) {
+        const mapColumn = this.heatmapChartConfig.columns.find(col => col.displayFor === 'map' && col.visible);
+        const functionName = mapColumn ? mapColumn.enrichName : null;
+        const valueField = mapColumn ? mapColumn.dataField : null;
+        if (functionName != "") {
+            if (data[valueField] !== undefined) {
+                if (typeof this.commonService[functionName] === "function") {
+                    return this.commonService[functionName](data[valueField]);
+                }
+                else {
+                    console.error(`Function ${functionName} not found in CommonService`);
+                    return null;
+                }
             }
             else {
-                console.error(`Function ${functionName} not found in CommonService`);
-                return null;
+                return "No Data";
             }
         }
         else {
-            return "No Data";
+            return data[valueField];
         }
     }
+    onRowClick(data) {
+        const title_params = data[this.page_config.kpiConfig.dataConfig.commonConfig['dataField']];
+        let title = this.getParamsTitle(data);
+        let obj = {
+            data: data,
+            keyToPass: this.page_config.kpiConfig.keyToPass,
+            tableTitle: (this.page_parms) ? this.page_parms + title : title,
+            viewId: this.page_config.viewId,
+            drillDownType: "natural",
+            drilldownFrom: this.page_config.viewId,
+            drilldownTo: "",
+        };
+        this.oRowClick.emit(obj);
+    }
+    getParamsTitle(data) {
+        const config = this.page_config.kpiConfig.dataConfig.commonConfig;
+        const titleTemplate = config['title'];
+        const hasParams = /\$P\{.*?\}/.test(titleTemplate);
+        if (!hasParams) {
+            const title_params = data[config['dataField']];
+            return titleTemplate + (title_params ?? '');
+        }
+        let result = titleTemplate.replace(/\$P\{(.*?)\}/g, (_, key) => {
+            return data[key] ?? '';
+        });
+        return result;
+    }
 }
 GammaHeatChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaHeatChartComponent, deps: [{ token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
-GammaHeatChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammaHeatChartComponent, selector: "app-gamma-heatmap", inputs: { rightClickEnable: "rightClickEnable", chartDataSource: "chartDataSource" }, outputs: { getTableConfigOutPut: "getTableConfigOutPut", oRowClick: "oRowClick", onrightClickContextSelection: "onrightClickContextSelection" }, ngImport: i0, template: "<div class=\"mx-2 bg-gray-800\">\n    <app-loader *ngIf=\"isLoader\"></app-loader>\n    <ng-container *ngIf=\"!isLoader\">\n        <ng-container *ngIf=\"heatmapChartConfig.chartFormat == 'simple'\">\n            <div class=\"p-3 h-auto overflow-x-auto\">\n                <div class=\"inline-block\">\n                    <div class=\"flex flex-nowrap justify-center\">\n                        <div class=\"flex-shrink-0 w-22 max-w-[20%] h-10 flex items-center justify-center\"></div>\n                        <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                            class=\"flex-shrink-0 min-w-22 max-w-[20%] h-8 text-sm flex items-center justify-center\">\n                            {{item}}\n                        </div>\n                    </div>\n                </div>\n                <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"h-8 flex text-sm items-center min-w-22 justify-end px-2 inline\">\n                            {{ item.datasource }}\n                        </div>\n                        <div class=\"inline-block\">\n                            <div class=\"flex flex-nowrap justify-start\">\n                                <ng-container *ngFor=\"let box of item.dataset\">\n                                    <div class=\"flex-shrink-0 min-w-22 max-w-[20%] h-8 border-2 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                        [ngStyle]=\"{ 'background-color': box.color }\" [matTooltip]=\"box.toolTip\"\n                                        matTooltipClass=\"custom-tooltip\">\n                                        {{ callServiceFunction(heatmapChartConfig.columns[0].enrichName,\n                                        box[heatmapChartConfig.columns[0].dataField]) }}\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"heatmapChartConfig.chartFormat == 'topx'\">\n            <div class=\"p-3 h-auto overflow-x-auto\">\n                <div class=\"flex flex-row\">\n                    <ng-container *ngFor=\"let header of heatChartDataSource.argumentValue\">\n                        <div class=\"min-w-32 text-sm font-medium text-center mb-2\">\n                            {{ header }}\n                        </div>\n                    </ng-container>\n                </div>\n\n                <div *ngFor=\"let row of heatChartDataSource.dataSet\" class=\"flex flex-row\">\n                    <ng-container *ngFor=\"let cell of row\">\n                        <div *ngIf=\"cell.box\"\n                            class=\"h-8 border-2 text-sm cursor-pointer flex items-center justify-center text-gray-800 min-w-32 cursor-pointer\"\n                            [ngStyle]=\"{ 'background-color': cell.box.color }\" [matTooltip]=\"cell.box.toolTip\"\n                            matTooltipClass=\"custom-tooltip\">\n                            {{ cell.box[heatmapChartConfig.leftArgument] }} ({{\n                            callServiceFunction(heatmapChartConfig.columns[0].enrichName,\n                            cell.box[heatmapChartConfig.columns[0].dataField]) }})\n                        </div>\n                        <div *ngIf=\"!cell.box\" class=\"h-8 min-w-32\"></div>\n                    </ng-container>\n                </div>\n            </div>\n        </ng-container>\n    </ng-container>\n</div>", dependencies: [{ kind: "directive", type: i4$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
+GammaHeatChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammaHeatChartComponent, selector: "app-gamma-heatmap", inputs: { rightClickEnable: "rightClickEnable", chartDataSource: "chartDataSource" }, outputs: { getTableConfigOutPut: "getTableConfigOutPut", oRowClick: "oRowClick", onrightClickContextSelection: "onrightClickContextSelection" }, ngImport: i0, template: "<div class=\"mx-2 bg-gray-800\">\n    <app-loader *ngIf=\"isLoader\"></app-loader>\n    <ng-container *ngIf=\"!isLoader\">\n        <ng-container *ngIf=\"heatmapChartConfig.chartFormat == 'simple'\">\n            <div class=\"p-3 h-auto overflow-x-auto\">\n                <div class=\"inline-block\">\n                    <div class=\"flex flex-nowrap justify-center\">\n                        <div class=\"flex-shrink-0 w-48 h-10 flex items-center justify-center\"></div>\n                        <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                            class=\"flex-shrink-0 min-w-22 max-w-[20%] h-8 text-sm flex items-center justify-center\">\n                            {{item}}\n                        </div>\n                    </div>\n                </div>\n                <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"h-8 flex text-sm items-center min-w-48 justify-end px-2 inline\">\n                            {{ item.datasource }}\n                        </div>\n                        <div class=\"inline-block\">\n                            <div class=\"flex flex-nowrap justify-start\">\n                                <ng-container *ngFor=\"let box of item.dataset\">\n                                    <div (click)=\"onRowClick(box)\" class=\"flex-shrink-0 min-w-22 max-w-[20%] h-8 border-2 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                        [ngStyle]=\"{ 'background-color': box.color }\" [matTooltip]=\"box.toolTip\"\n                                        matTooltipClass=\"custom-tooltip\">\n                                        {{ callServiceFunction(box) }}\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"heatmapChartConfig.chartFormat == 'topx'\">\n            <div class=\"p-3 h-auto overflow-x-auto\">\n                <div class=\"flex flex-row\">\n                    <ng-container *ngFor=\"let header of heatChartDataSource.argumentValue\">\n                        <div class=\"min-w-32 text-sm font-medium text-center mb-2\">\n                            {{ header }}\n                        </div>\n                    </ng-container>\n                </div>\n\n                <div *ngFor=\"let row of heatChartDataSource.dataSet\" class=\"flex flex-row\">\n                    <ng-container *ngFor=\"let cell of row\">\n                        <div *ngIf=\"cell.box\" (click)=\"onRowClick(cell.box)\"\n                            class=\"h-8 border-2 text-sm cursor-pointer flex items-center justify-center text-gray-800 min-w-32 cursor-pointer\"\n                            [ngStyle]=\"{ 'background-color': cell.box.color }\" [matTooltip]=\"cell.box.toolTip\"\n                            matTooltipClass=\"custom-tooltip\">\n                            {{ cell.box[heatmapChartConfig.leftArgument] }}\n                             ({{callServiceFunction(cell.box) }})\n                        </div>\n                        <div *ngIf=\"!cell.box\" class=\"h-8 min-w-32\"></div>\n                    </ng-container>\n                </div>\n            </div>\n        </ng-container>\n    </ng-container>\n</div>", dependencies: [{ kind: "directive", type: i4$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaHeatChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-gamma-heatmap', template: "<div class=\"mx-2 bg-gray-800\">\n    <app-loader *ngIf=\"isLoader\"></app-loader>\n    <ng-container *ngIf=\"!isLoader\">\n        <ng-container *ngIf=\"heatmapChartConfig.chartFormat == 'simple'\">\n            <div class=\"p-3 h-auto overflow-x-auto\">\n                <div class=\"inline-block\">\n                    <div class=\"flex flex-nowrap justify-center\">\n                        <div class=\"flex-shrink-0 w-22 max-w-[20%] h-10 flex items-center justify-center\"></div>\n                        <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                            class=\"flex-shrink-0 min-w-22 max-w-[20%] h-8 text-sm flex items-center justify-center\">\n                            {{item}}\n                        </div>\n                    </div>\n                </div>\n                <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"h-8 flex text-sm items-center min-w-22 justify-end px-2 inline\">\n                            {{ item.datasource }}\n                        </div>\n                        <div class=\"inline-block\">\n                            <div class=\"flex flex-nowrap justify-start\">\n                                <ng-container *ngFor=\"let box of item.dataset\">\n                                    <div class=\"flex-shrink-0 min-w-22 max-w-[20%] h-8 border-2 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                        [ngStyle]=\"{ 'background-color': box.color }\" [matTooltip]=\"box.toolTip\"\n                                        matTooltipClass=\"custom-tooltip\">\n                                        {{ callServiceFunction(heatmapChartConfig.columns[0].enrichName,\n                                        box[heatmapChartConfig.columns[0].dataField]) }}\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"heatmapChartConfig.chartFormat == 'topx'\">\n            <div class=\"p-3 h-auto overflow-x-auto\">\n                <div class=\"flex flex-row\">\n                    <ng-container *ngFor=\"let header of heatChartDataSource.argumentValue\">\n                        <div class=\"min-w-32 text-sm font-medium text-center mb-2\">\n                            {{ header }}\n                        </div>\n                    </ng-container>\n                </div>\n\n                <div *ngFor=\"let row of heatChartDataSource.dataSet\" class=\"flex flex-row\">\n                    <ng-container *ngFor=\"let cell of row\">\n                        <div *ngIf=\"cell.box\"\n                            class=\"h-8 border-2 text-sm cursor-pointer flex items-center justify-center text-gray-800 min-w-32 cursor-pointer\"\n                            [ngStyle]=\"{ 'background-color': cell.box.color }\" [matTooltip]=\"cell.box.toolTip\"\n                            matTooltipClass=\"custom-tooltip\">\n                            {{ cell.box[heatmapChartConfig.leftArgument] }} ({{\n                            callServiceFunction(heatmapChartConfig.columns[0].enrichName,\n                            cell.box[heatmapChartConfig.columns[0].dataField]) }})\n                        </div>\n                        <div *ngIf=\"!cell.box\" class=\"h-8 min-w-32\"></div>\n                    </ng-container>\n                </div>\n            </div>\n        </ng-container>\n    </ng-container>\n</div>" }]
+            args: [{ selector: 'app-gamma-heatmap', template: "<div class=\"mx-2 bg-gray-800\">\n    <app-loader *ngIf=\"isLoader\"></app-loader>\n    <ng-container *ngIf=\"!isLoader\">\n        <ng-container *ngIf=\"heatmapChartConfig.chartFormat == 'simple'\">\n            <div class=\"p-3 h-auto overflow-x-auto\">\n                <div class=\"inline-block\">\n                    <div class=\"flex flex-nowrap justify-center\">\n                        <div class=\"flex-shrink-0 w-48 h-10 flex items-center justify-center\"></div>\n                        <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                            class=\"flex-shrink-0 min-w-22 max-w-[20%] h-8 text-sm flex items-center justify-center\">\n                            {{item}}\n                        </div>\n                    </div>\n                </div>\n                <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"h-8 flex text-sm items-center min-w-48 justify-end px-2 inline\">\n                            {{ item.datasource }}\n                        </div>\n                        <div class=\"inline-block\">\n                            <div class=\"flex flex-nowrap justify-start\">\n                                <ng-container *ngFor=\"let box of item.dataset\">\n                                    <div (click)=\"onRowClick(box)\" class=\"flex-shrink-0 min-w-22 max-w-[20%] h-8 border-2 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                        [ngStyle]=\"{ 'background-color': box.color }\" [matTooltip]=\"box.toolTip\"\n                                        matTooltipClass=\"custom-tooltip\">\n                                        {{ callServiceFunction(box) }}\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"heatmapChartConfig.chartFormat == 'topx'\">\n            <div class=\"p-3 h-auto overflow-x-auto\">\n                <div class=\"flex flex-row\">\n                    <ng-container *ngFor=\"let header of heatChartDataSource.argumentValue\">\n                        <div class=\"min-w-32 text-sm font-medium text-center mb-2\">\n                            {{ header }}\n                        </div>\n                    </ng-container>\n                </div>\n\n                <div *ngFor=\"let row of heatChartDataSource.dataSet\" class=\"flex flex-row\">\n                    <ng-container *ngFor=\"let cell of row\">\n                        <div *ngIf=\"cell.box\" (click)=\"onRowClick(cell.box)\"\n                            class=\"h-8 border-2 text-sm cursor-pointer flex items-center justify-center text-gray-800 min-w-32 cursor-pointer\"\n                            [ngStyle]=\"{ 'background-color': cell.box.color }\" [matTooltip]=\"cell.box.toolTip\"\n                            matTooltipClass=\"custom-tooltip\">\n                            {{ cell.box[heatmapChartConfig.leftArgument] }}\n                             ({{callServiceFunction(cell.box) }})\n                        </div>\n                        <div *ngIf=\"!cell.box\" class=\"h-8 min-w-32\"></div>\n                    </ng-container>\n                </div>\n            </div>\n        </ng-container>\n    </ng-container>\n</div>" }]
         }], ctorParameters: function () { return [{ type: CommonService }]; }, propDecorators: { getTableConfigOutPut: [{
                 type: Output
             }], oRowClick: [{
@@ -14552,6 +14614,7 @@ class HeatMapSupportComponent {
                     "visible": true,
                     "dataField": "",
                     "caption": "",
+                    "displayFor": "",
                     "enrichName": "",
                 }
             ],
@@ -14705,6 +14768,7 @@ class HeatMapSupportComponent {
                 ]
             }
         ];
+        this.chartDataSource = {};
         this.getHeatMapConfigOutPut = new EventEmitter();
     }
     set chartconfigData(value) {
@@ -14721,6 +14785,7 @@ class HeatMapSupportComponent {
                 this.heatmap_content_config['kpiConfig'] = value.selectedWidgetConfig;
                 this.heatmapChartConfig = value.selectedWidgetConfig.dataConfig;
                 this.heatmapChartConfig.columns = value.selectedWidgetConfig.dataConfig.columns;
+                this.colorArray = value.selectedWidgetConfig.dataConfig.color;
                 if (value.selectedWidgetConfig.viewProperties) {
                     this.viewProperties = value.selectedWidgetConfig.viewProperties;
                     if (value.selectedWidgetConfig.viewProperties.enableClickEvent) {
@@ -14781,6 +14846,29 @@ class HeatMapSupportComponent {
             ];
         }
     }
+    addColumns() {
+        let obj = {
+            "dataField": "",
+            "caption": "",
+            "enrichName": "",
+            "displayFor": "",
+            "visible": true
+        };
+        this.heatmapChartConfig.columns.push(obj);
+    }
+    deleteColumns(i) {
+        this.heatmapChartConfig.columns.splice(i, 1);
+    }
+    moveItemForColumns(index, direction) {
+        if (index < 0 || index >= this.heatmapChartConfig.columns.length)
+            return;
+        const newPosition = direction === 'up' ? index - 1 : index + 1;
+        if (newPosition < 0 || newPosition >= this.heatmapChartConfig.columns.length)
+            return;
+        const itemToMove = this.heatmapChartConfig.columns[index];
+        this.heatmapChartConfig.columns.splice(index, 1);
+        this.heatmapChartConfig.columns.splice(newPosition, 0, itemToMove);
+    }
     getHeatmapData() {
         this.heatChartDataSource = {};
         this.isAdvanceFilter = false;
@@ -14799,6 +14887,9 @@ class HeatMapSupportComponent {
             }
             this.isHeatMapLoader = false;
             this.isHeatMapClick = false;
+            this.chartDataSource = this.heatmap_content_config;
+            this.chartDataSource.kpiConfig['dataSource'] = this.dataSourseForHeatMap;
+            this.chartDataSource.kpiConfig['dataConfig'] = this.heatmapChartConfig;
         }
         else {
             this.isHeatMapClick = false;
@@ -15060,10 +15151,10 @@ class HeatMapSupportComponent {
     }
 }
 HeatMapSupportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HeatMapSupportComponent, deps: [{ token: i4$1.ToastrService }, { token: CommonService }, { token: i0.ChangeDetectorRef }, { token: ApplicationContentService }], target: i0.ɵɵFactoryTarget.Component });
-HeatMapSupportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: HeatMapSupportComponent, selector: "app-heat-map", inputs: { chartconfigData: ["datasetmodal", "chartconfigData"] }, outputs: { getHeatMapConfigOutPut: "getHeatMapConfigOutPut" }, ngImport: i0, template: "<div class=\"m-2\">\n    <div class=\"w-full m-2 border-r\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n            <ng-container *ngIf=\"heatmapChartConfig.chartFormat == 'simple'\">\n                 <div class=\"mx-5 h-[60vh] overflow-x-auto\">\n                <div class=\"inline-block\">\n                    <div class=\"flex flex-nowrap justify-center\">\n                        <div class=\"flex-shrink-0 w-64 max-w-[20%] h-10 flex items-center justify-center\"></div>\n                        <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                            class=\"flex-shrink-0 min-w-22 max-w-[20%] h-8 text-sm flex items-center justify-center\">\n                            {{item}}\n                        </div>\n                    </div>\n                </div>\n                <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"h-8 flex text-sm items-center min-w-64 justify-end px-2 inline\">\n                            {{ item.datasource }}\n                        </div>\n                        <div class=\"inline-block\">\n                            <div class=\"flex flex-nowrap justify-start\">\n                                <ng-container *ngFor=\"let box of item.dataset\">\n                                    <div class=\"flex-shrink-0 min-w-22 max-w-[20%] h-8 border-2 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                        [ngStyle]=\"{ 'background-color': box.color }\"\n                                        [attr.title]=\"'Record Date: ' + box[heatmapChartConfig.topArgument] + ', Value: ' + box[heatmapChartConfig.columns[0].dataField]\">\n                                        {{ box[heatmapChartConfig.columns[0].dataField]}}\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n            </ng-container>\n            <ng-container *ngIf=\"heatmapChartConfig.chartFormat == 'topx'\">\n                 <div class=\"mx-5 h-[60vh] overflow-x-auto\">\n                <div class=\"flex flex-row\">\n                    <ng-container *ngFor=\"let header of heatChartDataSource.argumentValue\">\n                        <div class=\"min-w-32 text-sm font-medium text-center mb-2\">\n                            {{ header }}\n                        </div>\n                    </ng-container>\n                </div>\n\n                <!-- Heatmap Body (Top to Bottom Layout) -->\n                <div *ngFor=\"let row of heatChartDataSource.dataSet\" class=\"flex flex-row\">\n                    <ng-container *ngFor=\"let cell of row\">\n                        <div *ngIf=\"cell.box\"\n                            class=\"h-8 border-2 text-sm cursor-pointer flex items-center justify-center text-gray-800 min-w-32\"\n                            [ngStyle]=\"{ 'background-color': cell.box.color }\"\n                            [attr.title]=\"'Record Date: ' + cell.heatmapChartConfig.topArgument + ', Value: ' + cell.box.heatmapChartConfig.columns[0].dataField\">\n                            {{ cell.box.heatmapChartConfig.leftArgument }} ({{ commonService.abbreviateNumber(cell.box.heatmapChartConfig.columns[0].dataField) }})\n                        </div>\n                        <div *ngIf=\"!cell.box\" class=\"h-8 min-w-32\"></div>\n                    </ng-container>\n                </div>\n            </div>\n            </ng-container>\n           \n           \n        </ng-container>\n    </div>\n    <div class=\"w-full mx-2 border-r\">\n        <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n            <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                                    }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                        Basic\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                                    }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                        Columns\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                                    }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                        Properties\n                    </button>\n                </li>\n\n            </ul>\n        </div>\n\n        <div id=\"default-styled-tab-content\">\n            <div *ngIf=\"activeTab === 'basic'\">\n                <div class=\"flex flex-col flex-auto min-w-0\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title Config\n                    </div>\n                    <div class=\"pt-2 border-x border-b \">\n                        <div class=\"my-2 flex justify-between\">\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-1\"> Title</div>\n                                <dx-select-box [(ngModel)]=\"heatmapChartConfig.chartFormat\" [items]=\"['simple','topx']\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-1\"> Top Argument</div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                    [(ngModel)]=\"heatmapChartConfig.topArgument\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-1\"> Left Argument</div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                    [(ngModel)]=\"heatmapChartConfig.leftArgument\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-1\"> Color Usage</div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"['gradient','twoColor','singleColor',]\"\n                                    [(ngModel)]=\"heatmapChartConfig.type\"\n                                    (onValueChanged)=\"getColorBoxVisible($event)\"></dx-select-box>\n                            </div>\n\n                            <ng-container\n                                *ngIf=\"heatmapChartConfig.type == 'gradient' || heatmapChartConfig.type == 'twoColor'\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Color</div>\n                                    <dx-color-box [(ngModel)]=\"firstColor\" [editAlphaChannel]=\"true\"></dx-color-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Color</div>\n                                    <dx-color-box [(ngModel)]=\"secondColor\" [editAlphaChannel]=\"true\"></dx-color-box>\n                                </div>\n\n                            </ng-container>\n                            <ng-container *ngIf=\"heatmapChartConfig.type == 'singleColor'\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Color</div>\n                                    <dx-color-box [(ngModel)]=\"singleColor\" [editAlphaChannel]=\"true\"></dx-color-box>\n                                </div>\n\n                            </ng-container>\n                            <div class=\"px-1 mb-1 w-full\" *ngIf=\"heatmapChartConfig.type !== ''\">\n                                <button class=\"{{commonService.btn_primary_md}} mt-6\" (click)=\"saveColors()\">Check\n                                    View</button>\n                            </div>\n\n\n\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"activeTab === 'columns'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 border-b flex flex-row\"\n                                *ngFor=\"let item of heatmapChartConfig.columns; let i = index;\">\n                                <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [value]=\"item.visible\" [(ngModel)]=\"item.visible\"\n                                        text=\"Visiblity\"></dx-check-box>\n                                </div>\n\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Caption</div>\n                                    <dx-text-box [(ngModel)]=\"item.caption\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> UI Function</div>\n                                    <dx-select-box [items]=\"enrichNameList\" [(ngModel)]=\"item.enrichName\"\n                                        [searchEnabled]=\"true\"></dx-select-box>\n                                </div>\n\n\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"activeTab === 'properties'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <app-loader *ngIf=\"isLoader\"></app-loader>\n                    <ng-container *ngIf=\"!isLoader\">\n                        <div class=\"flex flex-row justify-between border-b py-3\">\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                    text=\"Enable Click Event\"></dx-check-box>\n                            </div>\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                    text=\"Enable Right Click\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                            <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                    Type\n                                    Option\n                                </div>\n                                <div class=\"w-full p-3 border-x border-b \">\n                                    <div class=\"flex flex-row\">\n                                        <div class=\"w-full\">\n                                            <div class=\"text-md mb-2\"> Event Type</div>\n                                        </div>\n                                        <div class=\"w-full\">\n                                            <dx-select-box\n                                                [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown']\"\n                                                (onValueChanged)=\"getSelectedEventType($event)\"\n                                                [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                        </div>\n                                    </div>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"viewProperties.clickEventOptions.eventType == 'sameViewDrilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <ng-container\n                                                    *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                    <div class=\"flex flex-row justify-between\">\n                                                        <div class=\"mx-2 w-1/2\">\n                                                            <div class=\"text-md mb-2\"> Associated Views</div>\n                                                            <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                displayExpr=\"viewName\" [showSelectionControls]=\"true\"\n                                                                [maxDisplayedTags]=\"2\"\n                                                                [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                        </div>\n                                                        <div class=\"mx-2 w-1/2\">\n                                                            <div class=\"text-md mb-2\"> Associated Params</div>\n                                                            <dx-text-box\n                                                                [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                        </div>\n                                                        <div class=\"mx-2\">\n                                                            <button\n                                                                class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                (click)=\"deleteAssociatedParams(i)\"><i\n                                                                    class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                            </button>\n                                                        </div>\n                                                    </div>\n                                                </ng-container>\n                                                <div class=\"flex flex-row justify-end mt-4\">\n                                                    <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                        (click)=\"addAssociatedParams()\">Add\n                                                        Params</button>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                        (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                </div>\n                            </div>\n\n                        </div>\n                    </ng-container>\n                </div>\n            </div>\n\n        </div>\n\n\n    </div>\n</div>\n\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveChartConfig()\">Submit</button>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i4$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5$1.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$2.DxColorBoxComponent, selector: "dx-color-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyButtonText", "applyValueMode", "buttons", "cancelButtonText", "deferRendering", "disabled", "dropDownButtonTemplate", "dropDownOptions", "editAlphaChannel", "elementAttr", "fieldTemplate", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "keyStep", "label", "labelMode", "name", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showDropDownButton", "stylingMode", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onChange", "onClosed", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "cancelButtonTextChange", "deferRenderingChange", "disabledChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "editAlphaChannelChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "keyStepChange", "labelChange", "labelModeChange", "nameChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showDropDownButtonChange", "stylingModeChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { 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: i9$2.DxTagBoxComponent, selector: "dx-tag-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyValueMode", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hideSelectedItems", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxDisplayedTags", "maxFilterQueryLength", "maxLength", "minSearchLength", "multiline", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectAllMode", "selectAllText", "selectedItems", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showMultiTagOnly", "showSelectionControls", "stylingMode", "tabIndex", "tagTemplate", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCustomItemCreating", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onMultiTagPreparing", "onOpened", "onOptionChanged", "onSelectAllValueChanged", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyValueModeChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hideSelectedItemsChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxDisplayedTagsChange", "maxFilterQueryLengthChange", "maxLengthChange", "minSearchLengthChange", "multilineChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectAllModeChange", "selectAllTextChange", "selectedItemsChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showMultiTagOnlyChange", "showSelectionControlsChange", "stylingModeChange", "tabIndexChange", "tagTemplateChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "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: LoaderComponent, selector: "app-loader" }, { kind: "pipe", type: i4$2.JsonPipe, name: "json" }] });
+HeatMapSupportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: HeatMapSupportComponent, selector: "app-heat-map", inputs: { chartconfigData: ["datasetmodal", "chartconfigData"] }, outputs: { getHeatMapConfigOutPut: "getHeatMapConfigOutPut" }, ngImport: i0, template: "<div class=\"m-2\">\n    <div class=\"w-full m-2 border-r\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n            <app-gamma-heatmap [chartDataSource]=\"heatmap_content_config\" ></app-gamma-heatmap>  \n\n            <!-- <ng-container *ngIf=\"heatmapChartConfig.chartFormat == 'simple'\">\n                <div class=\"mx-5 h-[60vh] overflow-x-auto\">\n                    <div class=\"inline-block\">\n                        <div class=\"flex flex-nowrap justify-center\">\n                            <div class=\"flex-shrink-0 w-64 max-w-[20%] h-10 flex items-center justify-center\"></div>\n                            <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                                class=\"flex-shrink-0 min-w-22 max-w-[20%] h-8 text-sm flex items-center justify-center\">\n                                {{item}}\n                            </div>\n                        </div>\n                    </div>\n                    <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                        <div class=\"flex flex-row\">\n                            <div class=\"h-8 flex text-sm items-center min-w-64 justify-end px-2 inline\">\n                                {{ item.datasource }}\n                            </div>\n                            <div class=\"inline-block\">\n                                <div class=\"flex flex-nowrap justify-start\">\n                                    <ng-container *ngFor=\"let box of item.dataset\">\n                                        <div class=\"flex-shrink-0 min-w-22 max-w-[20%] h-8 border-2 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                            [ngStyle]=\"{ 'background-color': box.color }\"\n                                            [attr.title]=\"'Record Date: ' + box[heatmapChartConfig.topArgument] + ', Value: ' + box[heatmapChartConfig.columns[0].dataField]\">\n                                            {{ box[heatmapChartConfig.columns[0].dataField]}}\n                                        </div>\n                                    </ng-container>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"heatmapChartConfig.chartFormat == 'topx'\">\n                <div class=\"mx-5 h-[60vh] overflow-x-auto\">\n                    <div class=\"flex flex-row\">\n                        <ng-container *ngFor=\"let header of heatChartDataSource.argumentValue\">\n                            <div class=\"min-w-32 text-sm font-medium text-center mb-2\">\n                                {{ header }}\n                            </div>\n                        </ng-container>\n                    </div>\n\n                    <div *ngFor=\"let row of heatChartDataSource.dataSet\" class=\"flex flex-row\">\n                        <ng-container *ngFor=\"let cell of row\">\n                            <div *ngIf=\"cell.box\"\n                                class=\"h-8 border-2 text-sm cursor-pointer flex items-center justify-center text-gray-800 min-w-32\"\n                                [ngStyle]=\"{ 'background-color': cell.box.color }\"\n                                [attr.title]=\"'Record Date: ' + cell.heatmapChartConfig.topArgument + ', Value: ' + cell.box.heatmapChartConfig.columns[0].dataField\">\n                                {{ cell.box.heatmapChartConfig.leftArgument }} ({{\n                                commonService.abbreviateNumber(cell.box.heatmapChartConfig.columns[0].dataField) }})\n                            </div>\n                            <div *ngIf=\"!cell.box\" class=\"h-8 min-w-32\"></div>\n                        </ng-container>\n                    </div>\n                </div>\n            </ng-container> -->\n\n\n        </ng-container>\n    </div>\n    <div class=\"w-full mx-2 border-r\">\n        <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n            <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                                    }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                        Basic\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                                    }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                        Columns\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                                    }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                        Properties\n                    </button>\n                </li>\n\n            </ul>\n        </div>\n\n        <div id=\"default-styled-tab-content\">\n            <div *ngIf=\"activeTab === 'basic'\">\n                <div class=\"flex flex-col flex-auto min-w-0\">\n\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n                        <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                            Config\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex justify-between\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Title Filters</div>\n                                    <dx-text-box [(ngModel)]=\"heatmapChartConfig.commonConfig.title\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Filter Data Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"heatmapChartConfig.commonConfig.dataField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Key To Pass </div>\n                                    <dx-tag-box [items]=\"configColume\"\n                                        [(ngModel)]=\"heatmap_content_config.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"pt-2 border-x border-b \">\n                        <div class=\"my-2 flex justify-between\">\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-1\"> Chart Type</div>\n                                <dx-select-box [(ngModel)]=\"heatmapChartConfig.chartFormat\"\n                                    [items]=\"['simple','topx']\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-1\"> Top Argument</div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                    [(ngModel)]=\"heatmapChartConfig.topArgument\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-1\"> Left Argument</div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                    [(ngModel)]=\"heatmapChartConfig.leftArgument\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-1\"> Color Usage</div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"['gradient','twoColor','singleColor',]\"\n                                    [(ngModel)]=\"heatmapChartConfig.type\"\n                                    (onValueChanged)=\"getColorBoxVisible($event)\"></dx-select-box>\n                            </div>\n\n                            <ng-container\n                                *ngIf=\"heatmapChartConfig.type == 'gradient' || heatmapChartConfig.type == 'twoColor'\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Color</div>\n                                    <dx-color-box [(ngModel)]=\"firstColor\" [editAlphaChannel]=\"true\"></dx-color-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Color</div>\n                                    <dx-color-box [(ngModel)]=\"secondColor\" [editAlphaChannel]=\"true\"></dx-color-box>\n                                </div>\n\n                            </ng-container>\n                            <ng-container *ngIf=\"heatmapChartConfig.type == 'singleColor'\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Color</div>\n                                    <dx-color-box [(ngModel)]=\"singleColor\" [editAlphaChannel]=\"true\"></dx-color-box>\n                                </div>\n\n                            </ng-container>\n                            <div class=\"px-1 mb-1 w-full\" *ngIf=\"heatmapChartConfig.type !== ''\">\n                                <button class=\"{{commonService.btn_primary_md}} mt-6\" (click)=\"saveColors()\">Save Color\n                                    </button>\n                            </div>\n\n\n\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"activeTab === 'columns'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 border-b flex flex-row\"\n                                *ngFor=\"let item of heatmapChartConfig.columns; let i = index;\">\n                                <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [value]=\"item.visible\" [(ngModel)]=\"item.visible\"\n                                        text=\"Visiblity\"></dx-check-box>\n                                </div>\n\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Caption</div>\n                                    <dx-text-box [(ngModel)]=\"item.caption\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Display For</div>\n                                    <dx-select-box [items]=\"['map', 'tooltip']\"\n                                        [(ngModel)]=\"item.displayFor\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> UI Function</div>\n                                    <dx-select-box [items]=\"enrichNameList\" [(ngModel)]=\"item.enrichName\"\n                                        [searchEnabled]=\"true\"></dx-select-box>\n                                </div>\n                                <div class=\"text-center mt-8 w-full\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button *ngIf=\"i !== heatmapChartConfig.columns.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n\n\n                            </div>\n                        </div>\n                    </div>\n                     <div class=\"flex flex-row justify-end my-2\">\n                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addColumns()\">Add\n                            Columns</button>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"activeTab === 'properties'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <app-loader *ngIf=\"isLoader\"></app-loader>\n                    <ng-container *ngIf=\"!isLoader\">\n                        <div class=\"flex flex-row justify-between border-b py-3\">\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                    text=\"Enable Click Event\"></dx-check-box>\n                            </div>\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                    text=\"Enable Right Click\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                            <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                    Type\n                                    Option\n                                </div>\n                                <div class=\"w-full p-3 border-x border-b \">\n                                    <div class=\"flex flex-row\">\n                                        <div class=\"w-full\">\n                                            <div class=\"text-md mb-2\"> Event Type</div>\n                                        </div>\n                                        <div class=\"w-full\">\n                                            <dx-select-box\n                                                [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown']\"\n                                                (onValueChanged)=\"getSelectedEventType($event)\"\n                                                [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                        </div>\n                                    </div>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"viewProperties.clickEventOptions.eventType == 'sameViewDrilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <ng-container\n                                                    *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                    <div class=\"flex flex-row justify-between\">\n                                                        <div class=\"mx-2 w-1/2\">\n                                                            <div class=\"text-md mb-2\"> Associated Views</div>\n                                                            <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                displayExpr=\"viewName\" [showSelectionControls]=\"true\"\n                                                                [maxDisplayedTags]=\"2\"\n                                                                [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                        </div>\n                                                        <div class=\"mx-2 w-1/2\">\n                                                            <div class=\"text-md mb-2\"> Associated Params</div>\n                                                            <dx-text-box\n                                                                [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                        </div>\n                                                        <div class=\"mx-2\">\n                                                            <button\n                                                                class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                (click)=\"deleteAssociatedParams(i)\"><i\n                                                                    class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                            </button>\n                                                        </div>\n                                                    </div>\n                                                </ng-container>\n                                                <div class=\"flex flex-row justify-end mt-4\">\n                                                    <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                        (click)=\"addAssociatedParams()\">Add\n                                                        Params</button>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                        (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                </div>\n                            </div>\n\n                        </div>\n                    </ng-container>\n                </div>\n            </div>\n\n        </div>\n\n\n    </div>\n</div>\n\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveChartConfig()\">Submit</button>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i4$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$2.DxColorBoxComponent, selector: "dx-color-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyButtonText", "applyValueMode", "buttons", "cancelButtonText", "deferRendering", "disabled", "dropDownButtonTemplate", "dropDownOptions", "editAlphaChannel", "elementAttr", "fieldTemplate", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "keyStep", "label", "labelMode", "name", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showDropDownButton", "stylingMode", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onChange", "onClosed", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "cancelButtonTextChange", "deferRenderingChange", "disabledChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "editAlphaChannelChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "keyStepChange", "labelChange", "labelModeChange", "nameChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showDropDownButtonChange", "stylingModeChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { 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: i9$2.DxTagBoxComponent, selector: "dx-tag-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyValueMode", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hideSelectedItems", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxDisplayedTags", "maxFilterQueryLength", "maxLength", "minSearchLength", "multiline", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectAllMode", "selectAllText", "selectedItems", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showMultiTagOnly", "showSelectionControls", "stylingMode", "tabIndex", "tagTemplate", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCustomItemCreating", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onMultiTagPreparing", "onOpened", "onOptionChanged", "onSelectAllValueChanged", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyValueModeChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hideSelectedItemsChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxDisplayedTagsChange", "maxFilterQueryLengthChange", "maxLengthChange", "minSearchLengthChange", "multilineChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectAllModeChange", "selectAllTextChange", "selectedItemsChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showMultiTagOnlyChange", "showSelectionControlsChange", "stylingModeChange", "tabIndexChange", "tagTemplateChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "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: LoaderComponent, selector: "app-loader" }, { kind: "component", type: GammaHeatChartComponent, selector: "app-gamma-heatmap", inputs: ["rightClickEnable", "chartDataSource"], outputs: ["getTableConfigOutPut", "oRowClick", "onrightClickContextSelection"] }, { kind: "pipe", type: i4$2.JsonPipe, name: "json" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HeatMapSupportComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-heat-map', template: "<div class=\"m-2\">\n    <div class=\"w-full m-2 border-r\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n            <ng-container *ngIf=\"heatmapChartConfig.chartFormat == 'simple'\">\n                 <div class=\"mx-5 h-[60vh] overflow-x-auto\">\n                <div class=\"inline-block\">\n                    <div class=\"flex flex-nowrap justify-center\">\n                        <div class=\"flex-shrink-0 w-64 max-w-[20%] h-10 flex items-center justify-center\"></div>\n                        <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                            class=\"flex-shrink-0 min-w-22 max-w-[20%] h-8 text-sm flex items-center justify-center\">\n                            {{item}}\n                        </div>\n                    </div>\n                </div>\n                <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"h-8 flex text-sm items-center min-w-64 justify-end px-2 inline\">\n                            {{ item.datasource }}\n                        </div>\n                        <div class=\"inline-block\">\n                            <div class=\"flex flex-nowrap justify-start\">\n                                <ng-container *ngFor=\"let box of item.dataset\">\n                                    <div class=\"flex-shrink-0 min-w-22 max-w-[20%] h-8 border-2 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                        [ngStyle]=\"{ 'background-color': box.color }\"\n                                        [attr.title]=\"'Record Date: ' + box[heatmapChartConfig.topArgument] + ', Value: ' + box[heatmapChartConfig.columns[0].dataField]\">\n                                        {{ box[heatmapChartConfig.columns[0].dataField]}}\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n            </ng-container>\n            <ng-container *ngIf=\"heatmapChartConfig.chartFormat == 'topx'\">\n                 <div class=\"mx-5 h-[60vh] overflow-x-auto\">\n                <div class=\"flex flex-row\">\n                    <ng-container *ngFor=\"let header of heatChartDataSource.argumentValue\">\n                        <div class=\"min-w-32 text-sm font-medium text-center mb-2\">\n                            {{ header }}\n                        </div>\n                    </ng-container>\n                </div>\n\n                <!-- Heatmap Body (Top to Bottom Layout) -->\n                <div *ngFor=\"let row of heatChartDataSource.dataSet\" class=\"flex flex-row\">\n                    <ng-container *ngFor=\"let cell of row\">\n                        <div *ngIf=\"cell.box\"\n                            class=\"h-8 border-2 text-sm cursor-pointer flex items-center justify-center text-gray-800 min-w-32\"\n                            [ngStyle]=\"{ 'background-color': cell.box.color }\"\n                            [attr.title]=\"'Record Date: ' + cell.heatmapChartConfig.topArgument + ', Value: ' + cell.box.heatmapChartConfig.columns[0].dataField\">\n                            {{ cell.box.heatmapChartConfig.leftArgument }} ({{ commonService.abbreviateNumber(cell.box.heatmapChartConfig.columns[0].dataField) }})\n                        </div>\n                        <div *ngIf=\"!cell.box\" class=\"h-8 min-w-32\"></div>\n                    </ng-container>\n                </div>\n            </div>\n            </ng-container>\n           \n           \n        </ng-container>\n    </div>\n    <div class=\"w-full mx-2 border-r\">\n        <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n            <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                                    }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                        Basic\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                                    }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                        Columns\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                                    }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                        Properties\n                    </button>\n                </li>\n\n            </ul>\n        </div>\n\n        <div id=\"default-styled-tab-content\">\n            <div *ngIf=\"activeTab === 'basic'\">\n                <div class=\"flex flex-col flex-auto min-w-0\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title Config\n                    </div>\n                    <div class=\"pt-2 border-x border-b \">\n                        <div class=\"my-2 flex justify-between\">\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-1\"> Title</div>\n                                <dx-select-box [(ngModel)]=\"heatmapChartConfig.chartFormat\" [items]=\"['simple','topx']\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-1\"> Top Argument</div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                    [(ngModel)]=\"heatmapChartConfig.topArgument\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-1\"> Left Argument</div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                    [(ngModel)]=\"heatmapChartConfig.leftArgument\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-1\"> Color Usage</div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"['gradient','twoColor','singleColor',]\"\n                                    [(ngModel)]=\"heatmapChartConfig.type\"\n                                    (onValueChanged)=\"getColorBoxVisible($event)\"></dx-select-box>\n                            </div>\n\n                            <ng-container\n                                *ngIf=\"heatmapChartConfig.type == 'gradient' || heatmapChartConfig.type == 'twoColor'\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Color</div>\n                                    <dx-color-box [(ngModel)]=\"firstColor\" [editAlphaChannel]=\"true\"></dx-color-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Color</div>\n                                    <dx-color-box [(ngModel)]=\"secondColor\" [editAlphaChannel]=\"true\"></dx-color-box>\n                                </div>\n\n                            </ng-container>\n                            <ng-container *ngIf=\"heatmapChartConfig.type == 'singleColor'\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Color</div>\n                                    <dx-color-box [(ngModel)]=\"singleColor\" [editAlphaChannel]=\"true\"></dx-color-box>\n                                </div>\n\n                            </ng-container>\n                            <div class=\"px-1 mb-1 w-full\" *ngIf=\"heatmapChartConfig.type !== ''\">\n                                <button class=\"{{commonService.btn_primary_md}} mt-6\" (click)=\"saveColors()\">Check\n                                    View</button>\n                            </div>\n\n\n\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"activeTab === 'columns'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 border-b flex flex-row\"\n                                *ngFor=\"let item of heatmapChartConfig.columns; let i = index;\">\n                                <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [value]=\"item.visible\" [(ngModel)]=\"item.visible\"\n                                        text=\"Visiblity\"></dx-check-box>\n                                </div>\n\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Caption</div>\n                                    <dx-text-box [(ngModel)]=\"item.caption\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> UI Function</div>\n                                    <dx-select-box [items]=\"enrichNameList\" [(ngModel)]=\"item.enrichName\"\n                                        [searchEnabled]=\"true\"></dx-select-box>\n                                </div>\n\n\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"activeTab === 'properties'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <app-loader *ngIf=\"isLoader\"></app-loader>\n                    <ng-container *ngIf=\"!isLoader\">\n                        <div class=\"flex flex-row justify-between border-b py-3\">\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                    text=\"Enable Click Event\"></dx-check-box>\n                            </div>\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                    text=\"Enable Right Click\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                            <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                    Type\n                                    Option\n                                </div>\n                                <div class=\"w-full p-3 border-x border-b \">\n                                    <div class=\"flex flex-row\">\n                                        <div class=\"w-full\">\n                                            <div class=\"text-md mb-2\"> Event Type</div>\n                                        </div>\n                                        <div class=\"w-full\">\n                                            <dx-select-box\n                                                [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown']\"\n                                                (onValueChanged)=\"getSelectedEventType($event)\"\n                                                [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                        </div>\n                                    </div>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"viewProperties.clickEventOptions.eventType == 'sameViewDrilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <ng-container\n                                                    *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                    <div class=\"flex flex-row justify-between\">\n                                                        <div class=\"mx-2 w-1/2\">\n                                                            <div class=\"text-md mb-2\"> Associated Views</div>\n                                                            <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                displayExpr=\"viewName\" [showSelectionControls]=\"true\"\n                                                                [maxDisplayedTags]=\"2\"\n                                                                [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                        </div>\n                                                        <div class=\"mx-2 w-1/2\">\n                                                            <div class=\"text-md mb-2\"> Associated Params</div>\n                                                            <dx-text-box\n                                                                [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                        </div>\n                                                        <div class=\"mx-2\">\n                                                            <button\n                                                                class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                (click)=\"deleteAssociatedParams(i)\"><i\n                                                                    class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                            </button>\n                                                        </div>\n                                                    </div>\n                                                </ng-container>\n                                                <div class=\"flex flex-row justify-end mt-4\">\n                                                    <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                        (click)=\"addAssociatedParams()\">Add\n                                                        Params</button>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                        (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                </div>\n                            </div>\n\n                        </div>\n                    </ng-container>\n                </div>\n            </div>\n\n        </div>\n\n\n    </div>\n</div>\n\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveChartConfig()\">Submit</button>\n    </div>\n</div>" }]
+            args: [{ selector: 'app-heat-map', template: "<div class=\"m-2\">\n    <div class=\"w-full m-2 border-r\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n            <app-gamma-heatmap [chartDataSource]=\"heatmap_content_config\" ></app-gamma-heatmap>  \n\n            <!-- <ng-container *ngIf=\"heatmapChartConfig.chartFormat == 'simple'\">\n                <div class=\"mx-5 h-[60vh] overflow-x-auto\">\n                    <div class=\"inline-block\">\n                        <div class=\"flex flex-nowrap justify-center\">\n                            <div class=\"flex-shrink-0 w-64 max-w-[20%] h-10 flex items-center justify-center\"></div>\n                            <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                                class=\"flex-shrink-0 min-w-22 max-w-[20%] h-8 text-sm flex items-center justify-center\">\n                                {{item}}\n                            </div>\n                        </div>\n                    </div>\n                    <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                        <div class=\"flex flex-row\">\n                            <div class=\"h-8 flex text-sm items-center min-w-64 justify-end px-2 inline\">\n                                {{ item.datasource }}\n                            </div>\n                            <div class=\"inline-block\">\n                                <div class=\"flex flex-nowrap justify-start\">\n                                    <ng-container *ngFor=\"let box of item.dataset\">\n                                        <div class=\"flex-shrink-0 min-w-22 max-w-[20%] h-8 border-2 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                            [ngStyle]=\"{ 'background-color': box.color }\"\n                                            [attr.title]=\"'Record Date: ' + box[heatmapChartConfig.topArgument] + ', Value: ' + box[heatmapChartConfig.columns[0].dataField]\">\n                                            {{ box[heatmapChartConfig.columns[0].dataField]}}\n                                        </div>\n                                    </ng-container>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"heatmapChartConfig.chartFormat == 'topx'\">\n                <div class=\"mx-5 h-[60vh] overflow-x-auto\">\n                    <div class=\"flex flex-row\">\n                        <ng-container *ngFor=\"let header of heatChartDataSource.argumentValue\">\n                            <div class=\"min-w-32 text-sm font-medium text-center mb-2\">\n                                {{ header }}\n                            </div>\n                        </ng-container>\n                    </div>\n\n                    <div *ngFor=\"let row of heatChartDataSource.dataSet\" class=\"flex flex-row\">\n                        <ng-container *ngFor=\"let cell of row\">\n                            <div *ngIf=\"cell.box\"\n                                class=\"h-8 border-2 text-sm cursor-pointer flex items-center justify-center text-gray-800 min-w-32\"\n                                [ngStyle]=\"{ 'background-color': cell.box.color }\"\n                                [attr.title]=\"'Record Date: ' + cell.heatmapChartConfig.topArgument + ', Value: ' + cell.box.heatmapChartConfig.columns[0].dataField\">\n                                {{ cell.box.heatmapChartConfig.leftArgument }} ({{\n                                commonService.abbreviateNumber(cell.box.heatmapChartConfig.columns[0].dataField) }})\n                            </div>\n                            <div *ngIf=\"!cell.box\" class=\"h-8 min-w-32\"></div>\n                        </ng-container>\n                    </div>\n                </div>\n            </ng-container> -->\n\n\n        </ng-container>\n    </div>\n    <div class=\"w-full mx-2 border-r\">\n        <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n            <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                                    }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                        Basic\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                                    }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                        Columns\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                                    }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                        Properties\n                    </button>\n                </li>\n\n            </ul>\n        </div>\n\n        <div id=\"default-styled-tab-content\">\n            <div *ngIf=\"activeTab === 'basic'\">\n                <div class=\"flex flex-col flex-auto min-w-0\">\n\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n                        <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                            Config\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex justify-between\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Title Filters</div>\n                                    <dx-text-box [(ngModel)]=\"heatmapChartConfig.commonConfig.title\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Filter Data Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"heatmapChartConfig.commonConfig.dataField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Key To Pass </div>\n                                    <dx-tag-box [items]=\"configColume\"\n                                        [(ngModel)]=\"heatmap_content_config.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"pt-2 border-x border-b \">\n                        <div class=\"my-2 flex justify-between\">\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-1\"> Chart Type</div>\n                                <dx-select-box [(ngModel)]=\"heatmapChartConfig.chartFormat\"\n                                    [items]=\"['simple','topx']\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-1\"> Top Argument</div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                    [(ngModel)]=\"heatmapChartConfig.topArgument\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-1\"> Left Argument</div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                    [(ngModel)]=\"heatmapChartConfig.leftArgument\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-1\"> Color Usage</div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"['gradient','twoColor','singleColor',]\"\n                                    [(ngModel)]=\"heatmapChartConfig.type\"\n                                    (onValueChanged)=\"getColorBoxVisible($event)\"></dx-select-box>\n                            </div>\n\n                            <ng-container\n                                *ngIf=\"heatmapChartConfig.type == 'gradient' || heatmapChartConfig.type == 'twoColor'\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Color</div>\n                                    <dx-color-box [(ngModel)]=\"firstColor\" [editAlphaChannel]=\"true\"></dx-color-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Color</div>\n                                    <dx-color-box [(ngModel)]=\"secondColor\" [editAlphaChannel]=\"true\"></dx-color-box>\n                                </div>\n\n                            </ng-container>\n                            <ng-container *ngIf=\"heatmapChartConfig.type == 'singleColor'\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Color</div>\n                                    <dx-color-box [(ngModel)]=\"singleColor\" [editAlphaChannel]=\"true\"></dx-color-box>\n                                </div>\n\n                            </ng-container>\n                            <div class=\"px-1 mb-1 w-full\" *ngIf=\"heatmapChartConfig.type !== ''\">\n                                <button class=\"{{commonService.btn_primary_md}} mt-6\" (click)=\"saveColors()\">Save Color\n                                    </button>\n                            </div>\n\n\n\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"activeTab === 'columns'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 border-b flex flex-row\"\n                                *ngFor=\"let item of heatmapChartConfig.columns; let i = index;\">\n                                <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [value]=\"item.visible\" [(ngModel)]=\"item.visible\"\n                                        text=\"Visiblity\"></dx-check-box>\n                                </div>\n\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Caption</div>\n                                    <dx-text-box [(ngModel)]=\"item.caption\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Display For</div>\n                                    <dx-select-box [items]=\"['map', 'tooltip']\"\n                                        [(ngModel)]=\"item.displayFor\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> UI Function</div>\n                                    <dx-select-box [items]=\"enrichNameList\" [(ngModel)]=\"item.enrichName\"\n                                        [searchEnabled]=\"true\"></dx-select-box>\n                                </div>\n                                <div class=\"text-center mt-8 w-full\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button *ngIf=\"i !== heatmapChartConfig.columns.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n\n\n                            </div>\n                        </div>\n                    </div>\n                     <div class=\"flex flex-row justify-end my-2\">\n                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addColumns()\">Add\n                            Columns</button>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"activeTab === 'properties'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <app-loader *ngIf=\"isLoader\"></app-loader>\n                    <ng-container *ngIf=\"!isLoader\">\n                        <div class=\"flex flex-row justify-between border-b py-3\">\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                    text=\"Enable Click Event\"></dx-check-box>\n                            </div>\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                    text=\"Enable Right Click\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                            <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                    Type\n                                    Option\n                                </div>\n                                <div class=\"w-full p-3 border-x border-b \">\n                                    <div class=\"flex flex-row\">\n                                        <div class=\"w-full\">\n                                            <div class=\"text-md mb-2\"> Event Type</div>\n                                        </div>\n                                        <div class=\"w-full\">\n                                            <dx-select-box\n                                                [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown']\"\n                                                (onValueChanged)=\"getSelectedEventType($event)\"\n                                                [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                        </div>\n                                    </div>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"viewProperties.clickEventOptions.eventType == 'sameViewDrilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <ng-container\n                                                    *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                    <div class=\"flex flex-row justify-between\">\n                                                        <div class=\"mx-2 w-1/2\">\n                                                            <div class=\"text-md mb-2\"> Associated Views</div>\n                                                            <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                displayExpr=\"viewName\" [showSelectionControls]=\"true\"\n                                                                [maxDisplayedTags]=\"2\"\n                                                                [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                        </div>\n                                                        <div class=\"mx-2 w-1/2\">\n                                                            <div class=\"text-md mb-2\"> Associated Params</div>\n                                                            <dx-text-box\n                                                                [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                        </div>\n                                                        <div class=\"mx-2\">\n                                                            <button\n                                                                class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                (click)=\"deleteAssociatedParams(i)\"><i\n                                                                    class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                            </button>\n                                                        </div>\n                                                    </div>\n                                                </ng-container>\n                                                <div class=\"flex flex-row justify-end mt-4\">\n                                                    <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                        (click)=\"addAssociatedParams()\">Add\n                                                        Params</button>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                        (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                </div>\n                            </div>\n\n                        </div>\n                    </ng-container>\n                </div>\n            </div>\n\n        </div>\n\n\n    </div>\n</div>\n\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveChartConfig()\">Submit</button>\n    </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i4$1.ToastrService }, { type: CommonService }, { type: i0.ChangeDetectorRef }, { type: ApplicationContentService }]; }, propDecorators: { getHeatMapConfigOutPut: [{
                 type: Output
             }], chartconfigData: [{
@@ -19092,10 +19183,10 @@ class KpiWithDataSetTestComponent {
         this.isDefaultFilterParams = false;
     }
     ngOnInit() {
-        this.service.listKpiEntryConfigs().subscribe((data) => {
-            this.kpi_breadcrumbs_container = data;
-        }, err => {
-            this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'KPI Config');
+        this.service.getlistKpiBrowser().subscribe({
+            next: ((data) => {
+                this.kpi_breadcrumbs_container = data;
+            })
         });
         this.loadingModal = true;
         this.pageId = this.activatedRoute.snapshot.queryParams['pageId'];
@@ -19403,9 +19494,6 @@ class KpiWithDataSetTestComponent {
                 if (hasPermission) {
                     this.loadSingleWidgetNode(item, mainItemDiv, datasetById);
                 }
-                else {
-                    this.toastr.error('You do not have permission to view this widget.', 'Permission Denied');
-                }
             }
             else {
                 this.loadSingleWidgetNode(item, mainItemDiv, datasetById);
@@ -19419,8 +19507,7 @@ class KpiWithDataSetTestComponent {
             const w_height = item.nodeProperties.height === "" ? "h-auto" : `h-[${item.nodeProperties.height}]`;
             const itemDiv = document.createElement('div');
             itemDiv.id = elementId;
-            const width = item.nodeProperties.width ? item.nodeProperties.width : "w-full";
-            itemDiv.classList.add(width, w_height, 'mb-2');
+            itemDiv.classList.add(item.nodeProperties.width, w_height, 'mb-2');
             if (item.nodeProperties.widgetTitle !== "") {
                 const widgetDiv = this.getWidgetTitleDiv(item);
                 itemDiv.appendChild(widgetDiv);
@@ -19565,7 +19652,7 @@ class KpiWithDataSetTestComponent {
         const dynamicComponentInstance = this.CompRefs.instance;
         dynamicComponentInstance.chartDataSource = data;
         dynamicComponentInstance.kpi_name = "";
-        if (data.kpiConfig.componentName == "GammaAdvanceOperatorTableComponent" || data.kpiConfig.componentName == "GammaTableWithPercentageComponent") {
+        if (data.kpiConfig.componentName == "GammaAdvanceOperatorTableComponent" || data.kpiConfig.componentName == "GammaTableWithPercentageComponent" || data.kpiConfig.componentName == "GammaHeatChartComponent") {
             dynamicComponentInstance.oRowClick.subscribe((value) => {
                 this.getRowClick(value);
             });
@@ -19705,6 +19792,7 @@ class KpiWithDataSetTestComponent {
         });
     }
     async getRowClick(event) {
+        debugger;
         const stateData = Array.from(this.stateDataSource.keys());
         const currentViewIndex = stateData.indexOf(event.viewId);
         const deletedViewIds = [];
@@ -19714,7 +19802,7 @@ class KpiWithDataSetTestComponent {
         const hourlyNode = this.dashBoardWidgetConfig.widgets
             .map(widget => widget.widgetNode.find(node => this.getHourlyData(node)))
             .find(node => node);
-        if (hourlyNode && event.keyToPass.includes("recordDate") || event.keyToPass.includes("record_date")) {
+        if (hourlyNode && event.keyToPass.includes("recordDate") || hourlyNode && event.keyToPass.includes("record_date")) {
             this.getViewByRowCLickForHourlyChart(event, hourlyNode);
         }
         const currentViewNode = this.dashBoardWidgetConfig.widgets