gamma-app-controller 1.1.14 → 1.1.15

package/fesm2020/gamma-app-controller.mjs

@@ -2091,7 +2091,6 @@ class ApplicationFilterComponent {
         };
     }
     editFilter(data) {
-        debugger;
         this.creatFilterObject = data;
         this.isNewFilterCreate = true;
     }
@@ -3896,7 +3895,7 @@ class GeoMapComponent {
             "backgroundColor": "#6c98e0",
             "colors": ['#003566', '#fd0000']
         };
-        this.enrichNameList = ["abbreviateNumber", "getColorCodeSpan", "ThousandSeparator"];
+        this.enrichNameList = ["abbreviateNumber", "getColorCodeSpan", "ThousandSeparator", "formatBytesv2"];
         this.isLoader = true;
         this.activeTab = 'basic';
         this.createOtherComponentView = new EventEmitter();
@@ -4479,7 +4478,7 @@ class DashTableComponent {
                 "isSearchBox": false
             }
         };
-        this.enrichNameList = ["abbreviateNumber", "getColorCodeSpan", "ThousandSeparator", "ThousandSeparatorWithTwoDecimals"];
+        this.enrichNameList = ["abbreviateNumber", "getColorCodeSpan", "ThousandSeparator", "ThousandSeparatorWithTwoDecimals", "formatBytesv2"];
         this.isLoader = true;
         this.activeTab = 'basic';
         this.getTableConfigOutPut = new EventEmitter();
@@ -4907,7 +4906,7 @@ class TableWithBarComponent {
                 "isSearchBox": false
             }
         };
-        this.enrichNameList = ["abbreviateNumber", "getColorCodeSpan", "ThousandSeparator", "ThousandSeparatorWithTwoDecimals"];
+        this.enrichNameList = ["abbreviateNumber", "getColorCodeSpan", "ThousandSeparator", "ThousandSeparatorWithTwoDecimals", "formatBytesv2"];
         this.isLoader = true;
         this.activeTab = 'basic';
         this.createOtherComponentView = new EventEmitter();
@@ -5143,7 +5142,7 @@ class DashTodayPreviousComponent {
             "sortBy": [],
             "columns": []
         };
-        this.enrichNameList = ["abbreviateNumber", "getColorCodeSpan", "ThousandSeparator", "ThousandSeparatorWithTwoDecimals"];
+        this.enrichNameList = ["abbreviateNumber", "getColorCodeSpan", "ThousandSeparator", "ThousandSeparatorWithTwoDecimals", "formatBytesv2"];
         this.isLoader = true;
         this.activeTab = 'basic';
         this.gettodayPreviousConfigOutPut = new EventEmitter();
@@ -5404,7 +5403,7 @@ class SingleCardComponent {
             "sortBy": [],
             "columns": []
         };
-        this.enrichNameList = ["abbreviateNumber", "getColorCodeSpan", "ThousandSeparator", "ThousandSeparatorWithTwoDecimals"];
+        this.enrichNameList = ["abbreviateNumber", "getColorCodeSpan", "ThousandSeparator", "ThousandSeparatorWithTwoDecimals", "formatBytesv2"];
         this.isLoader = true;
         this.activeTab = 'basic';
         this.getSingleCardConfigOutPut = new EventEmitter();
@@ -5591,7 +5590,6 @@ class SingleCardComponent {
         return newColumns;
     }
     getSaveConfig() {
-        debugger;
         if (this.viewProperties.clickEventOptions.eventType == 'optionalDrillDown') {
             this.viewProperties['clickEventOptions']['associatedViews'] = this.optionalDrilDownDataSource;
         }
@@ -5639,6 +5637,548 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['datasetmodal']
             }] } });
 
+class HeatMapSupportComponent {
+    constructor(toastrService, commonService, cdr, service) {
+        this.toastrService = toastrService;
+        this.commonService = commonService;
+        this.cdr = cdr;
+        this.service = service;
+        this.isAdvanceFilter = false;
+        this.isHeatMapClick = false;
+        this.heatChartDataSource = {};
+        this.chartDataForTooltip = {};
+        this.enrichNameList = ["abbreviateNumber", "getColorCodeSpan", "ThousandSeparator", "ThousandSeparatorWithTwoDecimals", "formatBytesv2"];
+        this.heatmapChartConfig = {
+            "chartFormat": "",
+            "topArgument": "",
+            "leftArgument": "",
+            "color": [],
+            "type": "",
+            "formate": "",
+            "columns": [
+                {
+                    "visible": true,
+                    "dataField": "",
+                    "caption": "",
+                    "enrichName": "",
+                }
+            ],
+            "commonConfig": {
+                "title": "",
+                "dataField": "",
+                "checkedKey": "",
+                "isSearchBox": false
+            }
+        };
+        this.heatmap_content_config = {
+            "kpiConfig": {
+                "serviceId": "",
+                "api": "/kpi/trends/network/get-metric-data",
+                "displayType": "table",
+                "formate": "",
+                "keyToPass": [],
+                "componentName": "GammaHeatChartComponent",
+                "dataConfig": {}
+            },
+        };
+        this.dataSourseForHeatMap = [];
+        this.viewProperties = {
+            enableClickEvent: false,
+            enableRightClickEvent: true,
+            clickEventOptions: {
+                associatedViews: [],
+                eventType: ""
+            }
+        };
+        this.optionalDrilDownDataSource = [];
+        this.isLoader = true;
+        this.activeTab = 'basic';
+        this.allConfiguredViews = [];
+        this.colorArray = [];
+        this.firstColor = "rgba(45, 110, 18, 1)";
+        this.secondColor = "rgba(255, 204, 0, 1)";
+        this.singleColor = "rgba(255, 204, 0, 1)";
+        this.test_voice_data = [{
+                record_date: '20250527',
+                dataset: [
+                    { other_party_iso: 'YEM', total_charge: 184357176 },
+                    { other_party_iso: 'ERI', total_charge: 115262500 },
+                    { other_party_iso: 'BGD', total_charge: 83289614 },
+                    { other_party_iso: 'ETH', total_charge: 79004500 },
+                    { other_party_iso: 'PAK', total_charge: 76992454 },
+                    { other_party_iso: 'SDN', total_charge: 60480400 },
+                    { other_party_iso: 'IND', total_charge: 38892858 },
+                    { other_party_iso: 'EGY', total_charge: 37769744 },
+                    { other_party_iso: 'NPL', total_charge: 17214000 },
+                    { other_party_iso: 'AFG', total_charge: 7268000 },
+                    { other_party_iso: 'TCD', total_charge: 5372500 },
+                    { other_party_iso: 'IDN', total_charge: 4425700 },
+                    { other_party_iso: 'UGA', total_charge: 3933300 },
+                    { other_party_iso: 'GBR', total_charge: 3848225 }
+                ]
+            },
+            {
+                record_date: '20250531',
+                dataset: [
+                    { other_party_iso: 'YEM', total_charge: 208699827 },
+                    { other_party_iso: 'ERI', total_charge: 143501500 },
+                    { other_party_iso: 'BGD', total_charge: 106296294 },
+                    { other_party_iso: 'ETH', total_charge: 86093500 },
+                    { other_party_iso: 'PAK', total_charge: 77428461 },
+                    { other_party_iso: 'SDN', total_charge: 65818598 },
+                    { other_party_iso: 'IND', total_charge: 38635175 },
+                    { other_party_iso: 'EGY', total_charge: 37658700 },
+                    { other_party_iso: 'NPL', total_charge: 18773200 },
+                    { other_party_iso: 'AFG', total_charge: 8232500 },
+                    { other_party_iso: 'TCD', total_charge: 7007500 },
+                    { other_party_iso: 'ARE', total_charge: 4593800 },
+                    { other_party_iso: 'IDN', total_charge: 4118800 },
+                    { other_party_iso: 'PHL', total_charge: 4051500 }
+                ]
+            },
+            {
+                record_date: '20250528',
+                dataset: [
+                    { other_party_iso: 'YEM', total_charge: 198943661 },
+                    { other_party_iso: 'ERI', total_charge: 118065000 },
+                    { other_party_iso: 'BGD', total_charge: 90980829 },
+                    { other_party_iso: 'ETH', total_charge: 80367700 },
+                    { other_party_iso: 'PAK', total_charge: 78018973 },
+                    { other_party_iso: 'SDN', total_charge: 56826500 },
+                    { other_party_iso: 'IND', total_charge: 37871625 },
+                    { other_party_iso: 'EGY', total_charge: 33374815 },
+                    { other_party_iso: 'NPL', total_charge: 16763400 },
+                    { other_party_iso: 'AFG', total_charge: 7926000 },
+                    { other_party_iso: 'TCD', total_charge: 5600000 },
+                    { other_party_iso: 'IDN', total_charge: 4602400 },
+                    { other_party_iso: 'GBR', total_charge: 4443625 },
+                    { other_party_iso: 'UGA', total_charge: 4379200 }
+                ]
+            },
+            {
+                record_date: '20250530',
+                dataset: [
+                    { other_party_iso: 'YEM', total_charge: 231378852 },
+                    { other_party_iso: 'BGD', total_charge: 151786018 },
+                    { other_party_iso: 'ERI', total_charge: 146782500 },
+                    { other_party_iso: 'PAK', total_charge: 88054445 },
+                    { other_party_iso: 'ETH', total_charge: 83635500 },
+                    { other_party_iso: 'SDN', total_charge: 62257000 },
+                    { other_party_iso: 'IND', total_charge: 44316500 },
+                    { other_party_iso: 'EGY', total_charge: 29894392 },
+                    { other_party_iso: 'NPL', total_charge: 23383500 },
+                    { other_party_iso: 'AFG', total_charge: 8029500 },
+                    { other_party_iso: 'TCD', total_charge: 7322500 },
+                    { other_party_iso: 'GBR', total_charge: 4338450 },
+                    { other_party_iso: 'IDN', total_charge: 3904400 },
+                    { other_party_iso: 'ARE', total_charge: 3832100 }
+                ]
+            },
+            {
+                record_date: '20250529',
+                dataset: [
+                    { other_party_iso: 'YEM', total_charge: 200906357 },
+                    { other_party_iso: 'ERI', total_charge: 126725000 },
+                    { other_party_iso: 'BGD', total_charge: 115287722 },
+                    { other_party_iso: 'ETH', total_charge: 82062400 },
+                    { other_party_iso: 'PAK', total_charge: 77260610 },
+                    { other_party_iso: 'SDN', total_charge: 54394810 },
+                    { other_party_iso: 'IND', total_charge: 38654000 },
+                    { other_party_iso: 'EGY', total_charge: 34503350 },
+                    { other_party_iso: 'NPL', total_charge: 17277100 },
+                    { other_party_iso: 'AFG', total_charge: 7746500 },
+                    { other_party_iso: 'TCD', total_charge: 6100000 },
+                    { other_party_iso: 'GBR', total_charge: 4736150 },
+                    { other_party_iso: 'IDN', total_charge: 4678900 },
+                    { other_party_iso: 'KEN', total_charge: 4453000 }
+                ]
+            },
+            {
+                record_date: '20250601',
+                dataset: [
+                    { other_party_iso: 'YEM', total_charge: 214287978 },
+                    { other_party_iso: 'ERI', total_charge: 154402500 },
+                    { other_party_iso: 'BGD', total_charge: 100204000 },
+                    { other_party_iso: 'ETH', total_charge: 97479800 },
+                    { other_party_iso: 'PAK', total_charge: 75391463 },
+                    { other_party_iso: 'SDN', total_charge: 65622200 },
+                    { other_party_iso: 'IND', total_charge: 38124497 },
+                    { other_party_iso: 'EGY', total_charge: 35278025 },
+                    { other_party_iso: 'NPL', total_charge: 22665000 },
+                    { other_party_iso: 'AFG', total_charge: 6920000 },
+                    { other_party_iso: 'UGA', total_charge: 5625100 },
+                    { other_party_iso: 'IDN', total_charge: 5256900 },
+                    { other_party_iso: 'TCD', total_charge: 4970000 },
+                    { other_party_iso: 'GBR', total_charge: 4410250 }
+                ]
+            }
+        ];
+        this.getHeatMapConfigOutPut = new EventEmitter();
+    }
+    set chartconfigData(value) {
+        if (value === undefined || value.length === 0) {
+            return;
+        }
+        else {
+            this.jsaonDatasource = value.data[0];
+            this.configColume = Object.keys(value.data[0]);
+            this.dataSourseForHeatMap = value.data;
+            this.selectedViewConfigs = value;
+            this.selectedTableViewType = value.selectedViewType;
+            if (value.selectedWidgetConfig) {
+                this.heatmap_content_config['kpiConfig'] = value.selectedWidgetConfig;
+                this.heatmapChartConfig = value.selectedWidgetConfig.dataConfig;
+                this.heatmapChartConfig.columns = value.selectedWidgetConfig.dataConfig.columns;
+                if (value.selectedWidgetConfig.viewProperties) {
+                    this.viewProperties = value.selectedWidgetConfig.viewProperties;
+                    if (value.selectedWidgetConfig.viewProperties.enableClickEvent) {
+                        if (value.selectedWidgetConfig.viewProperties.clickEventOptions.eventType == 'optionalDrillDown') {
+                            this.optionalDrilDownDataSource = value.selectedWidgetConfig.viewProperties.clickEventOptions.associatedViews;
+                            this.viewProperties['clickEventOptions'] = {
+                                "eventType": value.selectedWidgetConfig.viewProperties.clickEventOptions.eventType,
+                                "associatedViews": []
+                            };
+                        }
+                        else if (value.selectedWidgetConfig.viewProperties.clickEventOptions.eventType == 'drilldown') {
+                            this.viewProperties['clickEventOptions'] = {
+                                "eventType": value.selectedWidgetConfig.viewProperties.clickEventOptions.eventType,
+                                "associatedViews": value.selectedWidgetConfig.viewProperties.clickEventOptions.associatedViews
+                            };
+                        }
+                    }
+                    else {
+                        this.viewProperties['clickEventOptions'] = {};
+                    }
+                }
+                this.cdr.detectChanges();
+            }
+            else {
+                this.viewProperties = {
+                    enableClickEvent: false,
+                    enableRightClickEvent: true,
+                    clickEventOptions: {
+                        associatedViews: [],
+                        eventType: ""
+                    }
+                };
+                if (this.heatmapChartConfig.columns) {
+                }
+                else {
+                    this.heatmapChartConfig.columns = [];
+                    console.log(this.configColume);
+                }
+                this.cdr.detectChanges();
+            }
+        }
+    }
+    ngOnInit() {
+        this.service.getAppViewConfigs().subscribe({
+            next: (data) => {
+                this.allConfiguredViews = data;
+                this.isLoader = false;
+            }, error: (err) => {
+                this.toastrService.error('Unexpected Server Exception. Please contact System Admin.', 'All Views');
+            }
+        });
+        if (this.optionalDrilDownDataSource.length == 0) {
+            this.optionalDrilDownDataSource = [
+                {
+                    'viewId': "",
+                    'filterCondition': ""
+                }
+            ];
+        }
+    }
+    getHeatmapData() {
+        this.heatChartDataSource = {};
+        this.isAdvanceFilter = false;
+        if (this.dataSourseForHeatMap && this.dataSourseForHeatMap.length !== 0) {
+            if (this.heatmapChartConfig.chartFormat == "topx") {
+                const { result, uniqueDates } = this.generateDateWiseColorCodedData(this.dataSourseForHeatMap);
+                uniqueDates.sort();
+                this.heatChartDataSource.dataSet = this.getTransposedHeatmapData(result);
+                this.heatChartDataSource["argumentValue"] = uniqueDates;
+            }
+            else if ((this.heatmapChartConfig.chartFormat == "simple")) {
+                const { result, uniqueDates } = this.generateData(this.dataSourseForHeatMap);
+                uniqueDates.sort();
+                this.heatChartDataSource["dataSet"] = result;
+                this.heatChartDataSource["argumentValue"] = uniqueDates;
+            }
+            this.isHeatMapLoader = false;
+            this.isHeatMapClick = false;
+        }
+        else {
+            this.isHeatMapClick = false;
+            this.toastrService.info("No Data Found");
+        }
+    }
+    getTransposedHeatmapData(dataSet) {
+        const transposed = [];
+        const maxBoxes = Math.max(...dataSet.map(item => item.dataset.length));
+        for (let i = 0; i < maxBoxes; i++) {
+            const row = [];
+            for (let j = 0; j < dataSet.length; j++) {
+                const box = dataSet[j].dataset[i];
+                row.push({
+                    box: box || null,
+                    date: dataSet[j].record_date
+                });
+            }
+            transposed.push(row);
+        }
+        return transposed;
+    }
+    generateDateWiseColorCodedData(data) {
+        const result = [];
+        const uniqueDates = new Set();
+        const allEntries = [];
+        const topArg = this.heatmapChartConfig.topArgument;
+        const leftArg = this.heatmapChartConfig.leftArgument;
+        const valueField = this.heatmapChartConfig.columns[0].dataField;
+        data.forEach(entry => {
+            const formattedDate = moment(entry.record_date).format('YYYY-MM-DD');
+            uniqueDates.add(formattedDate);
+            entry.dataset.forEach(item => {
+                allEntries.push({
+                    [topArg]: formattedDate,
+                    [leftArg]: item[`${leftArg}`],
+                    [valueField]: item[`${valueField}`]
+                });
+            });
+        });
+        let coloredData;
+        if (this.heatmapChartConfig.type === 'gradient') {
+            coloredData = this.getFormateDataByColorCodeForGradient(allEntries, valueField);
+        }
+        else if (this.heatmapChartConfig.type === 'twoColor') {
+            coloredData = this.getFormateDataByColorCodeForWithTwoColor(allEntries, valueField);
+        }
+        else {
+            coloredData = this.getFormateDataByColorCodeForWithSingleColor(allEntries, valueField);
+        }
+        const dateMap = {};
+        coloredData.forEach(item => {
+            const date = item[topArg];
+            if (!dateMap[date]) {
+                dateMap[date] = [];
+            }
+            dateMap[date].push({
+                [leftArg]: item[leftArg],
+                [valueField]: item[valueField],
+                color: item.color,
+                [topArg]: date,
+            });
+        });
+        for (const date of Array.from(uniqueDates).sort()) {
+            result.push({
+                record_date: date,
+                dataset: dateMap[date] || []
+            });
+        }
+        return {
+            result,
+            uniqueDates: Array.from(uniqueDates).sort()
+        };
+    }
+    generateData(data) {
+        const result = [];
+        const uniqueDates = new Set();
+        const dataSourceMap = {};
+        const topArg = this.heatmapChartConfig.topArgument;
+        const leftArg = this.heatmapChartConfig.leftArgument;
+        data.forEach(item => {
+            const rowKey = item[leftArg];
+            const columnKey = moment(item[topArg]).format('YYYY-MM-DD');
+            if (!dataSourceMap[rowKey]) {
+                dataSourceMap[rowKey] = {
+                    datasource: rowKey,
+                    dataset: []
+                };
+            }
+            dataSourceMap[rowKey].dataset.push({
+                ...item,
+                [topArg]: columnKey
+            });
+            uniqueDates.add(columnKey);
+        });
+        const uniqueDatesArray = Array.from(uniqueDates);
+        for (const key in dataSourceMap) {
+            const dataset = dataSourceMap[key].dataset;
+            let formattedDataset;
+            if (this.heatmapChartConfig.type == "gradient") {
+                formattedDataset = this.getFormateDataByColorCodeForGradient(dataset, this.heatmapChartConfig.columns[0].dataField);
+            }
+            else if (this.heatmapChartConfig.type == "twoColor") {
+                formattedDataset = this.getFormateDataByColorCodeForWithTwoColor(dataset, this.heatmapChartConfig.columns[0].dataField);
+            }
+            else {
+                formattedDataset = this.getFormateDataByColorCodeForWithSingleColor(dataset, this.heatmapChartConfig.columns[0].dataField);
+            }
+            const dateToItemMap = {};
+            formattedDataset.forEach(item => {
+                dateToItemMap[item[topArg]] = item;
+            });
+            const completeDataset = uniqueDatesArray.map((date) => {
+                if (dateToItemMap[date]) {
+                    return dateToItemMap[date];
+                }
+                else {
+                    return {
+                        [topArg]: date,
+                        avgSize: "No Data",
+                        fileCount: 0,
+                        fileSize: 0,
+                        color: "rgb(242, 118, 109)"
+                    };
+                }
+            });
+            result.push({
+                datasource: key,
+                dataset: completeDataset
+            });
+        }
+        return {
+            result: result,
+            uniqueDates: uniqueDatesArray
+        };
+    }
+    getFormateDataByColorCodeForGradient(filedata, column) {
+        filedata.forEach(item => {
+            item.avgSize = parseFloat(item[column]);
+        });
+        const maxAvgSize = Math.max(...filedata.map(item => item[column]));
+        const minAvgSize = Math.min(...filedata.map(item => item[column]));
+        const [minColorStr, maxColorStr] = this.colorArray || ["rgba(45, 110, 18,1)", "rgba(255, 204, 0,1)"];
+        const minColor = this.parseRGBA(minColorStr);
+        const maxColor = this.parseRGBA(maxColorStr);
+        filedata.forEach(item => {
+            item.color = this.calculateColor(item[column], minAvgSize, maxAvgSize, minColor, maxColor);
+        });
+        return filedata;
+    }
+    getFormateDataByColorCodeForWithTwoColor(filedata, column) {
+        filedata.forEach(item => {
+            item[column] = parseFloat(item[column]);
+        });
+        const [minColorStr, maxColorStr] = this.colorArray || ["rgba(45, 110, 18,1)", "rgba(255, 204, 0,1)"];
+        const minColor = this.parseRGBA(minColorStr);
+        const maxColor = this.parseRGBA(maxColorStr);
+        filedata.forEach(item => {
+            if (item[column] == 0) {
+                item.color = `rgb(${minColor.join(',')})`;
+            }
+            else {
+                item.color = `rgb(${maxColor.join(',')})`;
+            }
+        });
+        return filedata;
+    }
+    getFormateDataByColorCodeForWithSingleColor(filedata, column) {
+        filedata.forEach(item => {
+            item[column] = parseFloat(item[column]);
+        });
+        const [singleColor] = this.colorArray || ["rgba(255, 204, 0,1)"];
+        const minColor = this.parseRGBA(singleColor);
+        filedata.forEach(item => {
+            item.color = `rgb(${minColor.join(',')})`;
+        });
+        return filedata;
+    }
+    parseRGBA(colorStr) {
+        const values = colorStr.match(/[\d.]+/g)?.map(Number) || [];
+        if (values.length === 3)
+            values.push(1);
+        return [
+            values[0] ?? 0,
+            values[1] ?? 0,
+            values[2] ?? 0,
+            values[3] ?? 1
+        ];
+    }
+    calculateColor(avgSize, minAvgSize, maxAvgSize, minColor, maxColor) {
+        if (minAvgSize != maxAvgSize) {
+            let gradient = (avgSize - minAvgSize) / (maxAvgSize - minAvgSize);
+            let color = minColor.map((channel, index) => {
+                return Math.round(channel + gradient * (maxColor[index] - channel));
+            });
+            return `rgb(${color.join(',')})`;
+        }
+        else {
+            return `rgb(${minColor.join(',')})`;
+        }
+    }
+    setActiveTab(tab) {
+        this.activeTab = tab;
+    }
+    getSelectedEventType(e) {
+        if (e.event) {
+            this.optionalDrilDownDataSource = [];
+            if (this.viewProperties.clickEventOptions.eventType == 'drilldown') {
+                this.heatmapChartConfig['viewProperties']['associatedViews'] = [];
+            }
+        }
+    }
+    resetViewProprstise() {
+        this.viewProperties = {
+            enableClickEvent: false,
+            enableRightClickEvent: true,
+            clickEventOptions: {
+                associatedViews: [],
+                eventType: ""
+            }
+        };
+    }
+    deleteAssociatedParams(index) {
+        this.optionalDrilDownDataSource.splice(index, 1);
+    }
+    addAssociatedParams() {
+        this.optionalDrilDownDataSource.push({
+            'viewId': "",
+            'filterCondition': ""
+        });
+    }
+    getColorBoxVisible(e) {
+        this.colorArray = [];
+    }
+    saveColors() {
+        if (this.heatmapChartConfig.type == 'gradient' || this.heatmapChartConfig.type == 'twoColor') {
+            this.colorArray = [this.firstColor, this.secondColor];
+        }
+        else if (this.heatmapChartConfig.type == 'singleColor') {
+            this.colorArray = [this.singleColor];
+        }
+        this.getHeatmapData();
+    }
+    getSaveChartConfig() {
+        if (this.colorArray && this.colorArray.length !== 0) {
+            if (this.heatmapChartConfig.type == 'gradient' || this.heatmapChartConfig.type == 'twoColor') {
+                this.heatmapChartConfig.color = this.colorArray;
+            }
+            else if (this.heatmapChartConfig.type == 'singleColor') {
+                this.heatmapChartConfig.color = this.colorArray;
+            }
+        }
+        if (this.viewProperties.clickEventOptions.eventType == 'optionalDrillDown') {
+            this.viewProperties['clickEventOptions']['associatedViews'] = this.optionalDrilDownDataSource;
+        }
+        this.heatmap_content_config.kpiConfig['viewProperties'] = this.viewProperties;
+        this.heatmap_content_config.kpiConfig['dataConfig'] = this.heatmapChartConfig;
+        this.getHeatMapConfigOutPut.emit(this.heatmap_content_config);
+    }
+}
+HeatMapSupportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HeatMapSupportComponent, deps: [{ token: i2$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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.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: i8$1.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$1.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>" }]
+        }], ctorParameters: function () { return [{ type: i2$1.ToastrService }, { type: CommonService }, { type: i0.ChangeDetectorRef }, { type: ApplicationContentService }]; }, propDecorators: { getHeatMapConfigOutPut: [{
+                type: Output
+            }], chartconfigData: [{
+                type: Input,
+                args: ['datasetmodal']
+            }] } });
+
 class CreateCompViewComponent {
     constructor(toastr, commonService, service, kpiService, router, activatedRoute, environment) {
         this.toastr = toastr;
@@ -5874,13 +6414,9 @@ class CreateCompViewComponent {
     }
     getDatasetForSimpleApiImpala(dataset) {
         this.dataSourceModal = {};
-        let filters = {
-            startDate: this.defaultStartDate,
-            endDate: this.defaultEndDate
-        };
         dataset.config.queryConfig.mapedFilters.forEach(filter => {
-            if (filters.hasOwnProperty(filter.localColumn)) {
-                filter.defaultValue = filters[filter.localColumn];
+            if (filter.hasOwnProperty(filter.localColumn)) {
+                filter.defaultValue = filter[filter.localColumn];
             }
         });
         if (dataset.config.apiType === "post") {
@@ -6051,6 +6587,10 @@ class CreateCompViewComponent {
         data['datasetId'] = this.selectedDataSet['datasetId'];
         this.createViewConfig(data);
     }
+    getEmitNewHeatMapConfig(data) {
+        data['datasetId'] = this.selectedDataSet['datasetId'];
+        this.createViewConfig(data);
+    }
     getEmitNewChartCongig(data) {
         data['datasetId'] = this.selectedDataSet['datasetId'];
         this.createViewConfig(data);
@@ -6189,10 +6729,10 @@ class CreateCompViewComponent {
     }
 }
 CreateCompViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CreateCompViewComponent, deps: [{ token: i2$1.ToastrService }, { token: CommonService }, { token: ApplicationContentService }, { token: kpicommonService$2 }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: APP_ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Component });
-CreateCompViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CreateCompViewComponent, selector: "app-create-comp-view", inputs: { kpiTreeData: "kpiTreeData", isHeader: "isHeader", selectedViewId: "selectedViewId" }, ngImport: i0, template: "<div class=\"flex flex-col flex-auto min-w-0\">\n    <lib-common-header [pageTitle]=\"'Views Editor'\" *ngIf=\"isHeader\"></lib-common-header>\n    <div>\n        <div class=\"p-2 w-full\">\n            <div\n                class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                <div class=\"flex flex-row justify-between\">\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">Dataset List <span *ngIf=\"isFilterInputs\"\n                                class=\"text-blue-500 cursor-pointer\"><i class=\"fa fa-pencil\"\n                                    (click)=\"getEditDataSet()\"></i></span></div>\n                        <dx-select-box [items]=\"dataSettableDataSource\" (onValueChanged)=\"getDataSetDetails($event)\"\n                            displayExpr=\"datasetName\" valueExpr=\"datasetId\" [searchEnabled]=\"true\"\n                            [value]=\"selectedDataSetOnedit.datasetId\"></dx-select-box>\n                    </div>\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">Select View Type</div>\n                        <dx-select-box [items]=\"['chart','table','groupTable','others']\" [(ngModel)]=\"selectedViewType\"\n                            (onValueChanged)=\"getViewType($event)\"></dx-select-box>\n                    </div>\n                    <ng-container *ngIf=\"selectedViewType =='others'\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md mb-2\">Select Component</div>\n                            <dx-select-box [items]=\"componentNamesOthers\" displayExpr=\"item\" valueExpr=\"compName\"\n                                [(ngModel)]=\"componentName\"></dx-select-box>\n                        </div>\n                    </ng-container>\n\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">View Name</div>\n                        <dx-text-box [(ngModel)]=\"creatCompViewObject.viewName\"></dx-text-box>\n                    </div>\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">View Label</div>\n                        <dx-text-box [(ngModel)]=\"creatCompViewObject.viewLabel\"></dx-text-box>\n                    </div>\n                </div>\n                <ng-container *ngIf=\"isFilterInputs\">\n                    <div class=\"flex flex-row mt-2\">\n                        <ng-container *ngFor=\"let request of selectedDataSet.config.queryConfig.mapedFilters\">\n                            <div class=\"m-2\">\n                                <div class=\"text-md mb-1\"> {{getCapitalize(request.localColumn)}}</div>\n                                <dx-date-box displayFormat=\"yyyy-MM-dd\" type=\"date\"\n                                    (onValueChanged)=\"startDateChange($event,request)\"\n                                    *ngIf=\"getFilter(request.localColumn)\">\n                                </dx-date-box>\n                                <dx-text-box [(ngModel)]=\"request.defaultValue\"\n                                    *ngIf=\"!getFilter(request.localColumn)\"></dx-text-box>\n                            </div>\n                        </ng-container>\n                    </div>\n                </ng-container>\n\n                <div class=\"flex flex-row mt-5 justify-center items-center\">\n                    <button class=\"{{commonService.btn_success_md}}\" (click)=\"addNewView()\">\n                        Reset View\n                    </button>\n                    <button class=\"{{commonService.btn_primary_md}} cursor-pointer mx-4 my-2\" (click)=\"createNewView()\">\n                        Proceed\n                    </button>\n\n\n                </div>\n                <div class=\"m-5 border\">\n                    <div class=\"m-2\">\n                        <div class=\"mt-5\">\n                            <app-loader *ngIf=\"isLoader\"></app-loader>\n                            <!-- for chart view -->\n                            <ng-container *ngIf=\"isGenerate\">\n                                <ng-container *ngIf=\"selectedViewType == 'chart'\">\n                                    <app-dash-chart [datasetmodal]=\"dataSourceModal\"\n                                        (getChartConfigOutPut)=\"getEmitNewChartCongig($event)\"></app-dash-chart>\n                                </ng-container>\n                                <!-- for table view -->\n                                <ng-container *ngIf=\"selectedViewType == 'table' || selectedViewType == 'groupTable'\">\n                                    <app-dash-table [datasetmodal]=\"dataSourceModal\"\n                                        (getTableConfigOutPut)=\"getEmitNewTableConfig($event)\"></app-dash-table>\n                                </ng-container>\n                                <!-- for others view  -->\n                                <ng-container *ngIf=\"selectedViewType == 'others'\">\n                                    <ng-container *ngIf=\"componentName == 'GammaTableWithPercentageComponent'\">\n                                        <app-table-with-bar [datasetmodal]=\"dataSourceModal\"\n                                            (createOtherComponentView)=\"getEmitNewOtherSetCongig($event)\"></app-table-with-bar>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"componentName == 'GammaGeoChartComponent' &&  componentName != 'GammaTableWithPercentageComponent'\">\n                                        <!-- <app-gamma-geo-chart></app-gamma-geo-chart> -->\n                                        <app-geo-map [datasetmodal]=\"dataSourceModal\"\n                                            (createOtherComponentView)=\"getEmitNewOtherSetCongig($event)\"></app-geo-map>\n                                    </ng-container>\n                                    <ng-container\n                                    *ngIf=\"componentName != 'GammaTableWithPercentageComponent' && componentName != 'GammaGeoChartComponent' &&  componentName != 'GammSingleNumberCardComponent'\">\n                                        <lib-dash-today-previous [datasetmodal]=\"dataSourceModal\"\n                                        (gettodayPreviousConfigOutPut)=\"getEmitNewOtherSetCongig($event)\"></lib-dash-today-previous>\n                                    </ng-container>\n\n                                    <ng-container\n                                     *ngIf=\"componentName != 'GammaTableWithPercentageComponent' && componentName != 'GammaGeoChartComponent' && componentName != 'GammaTodayPreviousComponent'\">\n                                        <lib-single-card [datasetmodal]=\"dataSourceModal\"\n                                        (getSingleCardConfigOutPut)=\"getEmitNewOtherSetCongig($event)\">\n                                        </lib-single-card>\n                                     </ng-container>\n\n                                     \n                                </ng-container>\n                            </ng-container>\n                        </div>\n\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i11.DxDateBoxComponent, selector: "dx-date-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "adaptivityEnabled", "applyButtonText", "applyValueMode", "buttons", "calendarOptions", "cancelButtonText", "dateOutOfRangeMessage", "dateSerializationFormat", "deferRendering", "disabled", "disabledDates", "displayFormat", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "interval", "invalidDateMessage", "isValid", "label", "labelMode", "max", "maxLength", "min", "name", "opened", "openOnFieldClick", "pickerType", "placeholder", "readOnly", "rtlEnabled", "showAnalogClock", "showClearButton", "showDropDownButton", "spellcheck", "stylingMode", "tabIndex", "text", "type", "useMaskBehavior", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "adaptivityEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "calendarOptionsChange", "cancelButtonTextChange", "dateOutOfRangeMessageChange", "dateSerializationFormatChange", "deferRenderingChange", "disabledChange", "disabledDatesChange", "displayFormatChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "intervalChange", "invalidDateMessageChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "maxLengthChange", "minChange", "nameChange", "openedChange", "openOnFieldClickChange", "pickerTypeChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showAnalogClockChange", "showClearButtonChange", "showDropDownButtonChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "typeChange", "useMaskBehaviorChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "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: 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: GeoMapComponent, selector: "app-geo-map", inputs: ["datasetmodal"], outputs: ["createOtherComponentView"] }, { kind: "component", type: DashChartComponent, selector: "app-dash-chart", inputs: ["datasetmodal"], outputs: ["getChartConfigOutPut"] }, { kind: "component", type: DashTableComponent, selector: "app-dash-table", inputs: ["datasetmodal"], outputs: ["getTableConfigOutPut"] }, { kind: "component", type: TableWithBarComponent, selector: "app-table-with-bar", inputs: ["datasetmodal"], outputs: ["createOtherComponentView"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "component", type: CommonHeaderComponent, selector: "lib-common-header", inputs: ["pageTitle"] }, { kind: "component", type: DashTodayPreviousComponent, selector: "lib-dash-today-previous", inputs: ["datasetmodal"], outputs: ["gettodayPreviousConfigOutPut"] }, { kind: "component", type: SingleCardComponent, selector: "lib-single-card", inputs: ["datasetmodal"], outputs: ["getSingleCardConfigOutPut"] }] });
+CreateCompViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CreateCompViewComponent, selector: "app-create-comp-view", inputs: { kpiTreeData: "kpiTreeData", isHeader: "isHeader", selectedViewId: "selectedViewId" }, ngImport: i0, template: "<div class=\"flex flex-col flex-auto min-w-0\">\n    <lib-common-header [pageTitle]=\"'Views Editor'\" *ngIf=\"isHeader\"></lib-common-header>\n    <div>\n        <div class=\"p-2 w-full\">\n            <div\n                class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                <div class=\"flex flex-row justify-between\">\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">Dataset List <span *ngIf=\"isFilterInputs\"\n                                class=\"text-blue-500 cursor-pointer\"><i class=\"fa fa-pencil\"\n                                    (click)=\"getEditDataSet()\"></i></span></div>\n                        <dx-select-box [items]=\"dataSettableDataSource\" (onValueChanged)=\"getDataSetDetails($event)\"\n                            displayExpr=\"datasetName\" valueExpr=\"datasetId\" [searchEnabled]=\"true\"\n                            [value]=\"selectedDataSetOnedit.datasetId\"></dx-select-box>\n                    </div>\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">Select View Type</div>\n                        <dx-select-box [items]=\"['chart','table','groupTable','others','heatmap']\" [(ngModel)]=\"selectedViewType\"\n                            (onValueChanged)=\"getViewType($event)\"></dx-select-box>\n                    </div>\n                    <ng-container *ngIf=\"selectedViewType =='others'\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md mb-2\">Select Component</div>\n                            <dx-select-box [items]=\"componentNamesOthers\" displayExpr=\"item\" valueExpr=\"compName\"\n                                [(ngModel)]=\"componentName\"></dx-select-box>\n                        </div>\n                    </ng-container>\n\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">View Name</div>\n                        <dx-text-box [(ngModel)]=\"creatCompViewObject.viewName\"></dx-text-box>\n                    </div>\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">View Label</div>\n                        <dx-text-box [(ngModel)]=\"creatCompViewObject.viewLabel\"></dx-text-box>\n                    </div>\n                </div>\n                <ng-container *ngIf=\"isFilterInputs\">\n                    <div class=\"flex flex-row mt-2\">\n                        <ng-container *ngFor=\"let request of selectedDataSet.config.queryConfig.mapedFilters\">\n                            <div class=\"m-2\">\n                                <div class=\"text-md mb-1\"> {{getCapitalize(request.localColumn)}}</div>\n                                <dx-date-box displayFormat=\"yyyy-MM-dd\" type=\"date\"\n                                    (onValueChanged)=\"startDateChange($event,request)\"\n                                    *ngIf=\"getFilter(request.localColumn)\">\n                                </dx-date-box>\n                                <dx-text-box [(ngModel)]=\"request.defaultValue\"\n                                    *ngIf=\"!getFilter(request.localColumn)\"></dx-text-box>\n                            </div>\n                        </ng-container>\n                    </div>\n                </ng-container>\n\n                <div class=\"flex flex-row mt-5 justify-center items-center\">\n                    <button class=\"{{commonService.btn_success_md}}\" (click)=\"addNewView()\">\n                        Reset View\n                    </button>\n                    <button class=\"{{commonService.btn_primary_md}} cursor-pointer mx-4 my-2\" (click)=\"createNewView()\">\n                        Proceed\n                    </button>\n\n\n                </div>\n                <div class=\"m-5 border\">\n                    <div class=\"m-2\">\n                        <div class=\"mt-5\">\n                            <app-loader *ngIf=\"isLoader\"></app-loader>\n                            <!-- for chart view -->\n                            <ng-container *ngIf=\"isGenerate\">\n                                <ng-container *ngIf=\"selectedViewType == 'chart'\">\n                                    <app-dash-chart [datasetmodal]=\"dataSourceModal\"\n                                        (getChartConfigOutPut)=\"getEmitNewChartCongig($event)\"></app-dash-chart>\n                                </ng-container>\n                                <ng-container *ngIf=\"selectedViewType == 'heatmap'\">\n                                    <app-heat-map [datasetmodal]=\"dataSourceModal\"\n                                        (getHeatMapConfigOutPut)=\"getEmitNewHeatMapConfig($event)\"></app-heat-map>\n                                </ng-container>\n                                <!-- for table view -->\n                                <ng-container *ngIf=\"selectedViewType == 'table' || selectedViewType == 'groupTable'\">\n                                    <app-dash-table [datasetmodal]=\"dataSourceModal\"\n                                        (getChartConfigOutPut)=\"getEmitNewTableConfig($event)\"></app-dash-table>\n                                </ng-container>\n                                <!-- for others view  -->\n                                <ng-container *ngIf=\"selectedViewType == 'others'\">\n                                    <ng-container *ngIf=\"componentName == 'GammaTableWithPercentageComponent'\">\n                                        <app-table-with-bar [datasetmodal]=\"dataSourceModal\"\n                                            (createOtherComponentView)=\"getEmitNewOtherSetCongig($event)\"></app-table-with-bar>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"componentName == 'GammaGeoChartComponent' &&  componentName != 'GammaTableWithPercentageComponent'\">\n                                        <!-- <app-gamma-geo-chart></app-gamma-geo-chart> -->\n                                        <app-geo-map [datasetmodal]=\"dataSourceModal\"\n                                            (createOtherComponentView)=\"getEmitNewOtherSetCongig($event)\"></app-geo-map>\n                                    </ng-container>\n                                    <ng-container\n                                    *ngIf=\"componentName != 'GammaTableWithPercentageComponent' && componentName != 'GammaGeoChartComponent' &&  componentName != 'GammSingleNumberCardComponent'\">\n                                        <lib-dash-today-previous [datasetmodal]=\"dataSourceModal\"\n                                        (gettodayPreviousConfigOutPut)=\"getEmitNewOtherSetCongig($event)\"></lib-dash-today-previous>\n                                    </ng-container>\n\n                                    <ng-container\n                                     *ngIf=\"componentName != 'GammaTableWithPercentageComponent' && componentName != 'GammaGeoChartComponent' && componentName != 'GammaTodayPreviousComponent'\">\n                                        <lib-single-card [datasetmodal]=\"dataSourceModal\"\n                                        (getSingleCardConfigOutPut)=\"getEmitNewOtherSetCongig($event)\">\n                                        </lib-single-card>\n                                     </ng-container>\n\n                                     \n                                </ng-container>\n                            </ng-container>\n                        </div>\n\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i11.DxDateBoxComponent, selector: "dx-date-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "adaptivityEnabled", "applyButtonText", "applyValueMode", "buttons", "calendarOptions", "cancelButtonText", "dateOutOfRangeMessage", "dateSerializationFormat", "deferRendering", "disabled", "disabledDates", "displayFormat", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "interval", "invalidDateMessage", "isValid", "label", "labelMode", "max", "maxLength", "min", "name", "opened", "openOnFieldClick", "pickerType", "placeholder", "readOnly", "rtlEnabled", "showAnalogClock", "showClearButton", "showDropDownButton", "spellcheck", "stylingMode", "tabIndex", "text", "type", "useMaskBehavior", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "adaptivityEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "calendarOptionsChange", "cancelButtonTextChange", "dateOutOfRangeMessageChange", "dateSerializationFormatChange", "deferRenderingChange", "disabledChange", "disabledDatesChange", "displayFormatChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "intervalChange", "invalidDateMessageChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "maxLengthChange", "minChange", "nameChange", "openedChange", "openOnFieldClickChange", "pickerTypeChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showAnalogClockChange", "showClearButtonChange", "showDropDownButtonChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "typeChange", "useMaskBehaviorChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "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: 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: GeoMapComponent, selector: "app-geo-map", inputs: ["datasetmodal"], outputs: ["createOtherComponentView"] }, { kind: "component", type: DashChartComponent, selector: "app-dash-chart", inputs: ["datasetmodal"], outputs: ["getChartConfigOutPut"] }, { kind: "component", type: DashTableComponent, selector: "app-dash-table", inputs: ["datasetmodal"], outputs: ["getTableConfigOutPut"] }, { kind: "component", type: TableWithBarComponent, selector: "app-table-with-bar", inputs: ["datasetmodal"], outputs: ["createOtherComponentView"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "component", type: CommonHeaderComponent, selector: "lib-common-header", inputs: ["pageTitle"] }, { kind: "component", type: DashTodayPreviousComponent, selector: "lib-dash-today-previous", inputs: ["datasetmodal"], outputs: ["gettodayPreviousConfigOutPut"] }, { kind: "component", type: SingleCardComponent, selector: "lib-single-card", inputs: ["datasetmodal"], outputs: ["getSingleCardConfigOutPut"] }, { kind: "component", type: HeatMapSupportComponent, selector: "app-heat-map", inputs: ["datasetmodal"], outputs: ["getHeatMapConfigOutPut"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CreateCompViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-create-comp-view', template: "<div class=\"flex flex-col flex-auto min-w-0\">\n    <lib-common-header [pageTitle]=\"'Views Editor'\" *ngIf=\"isHeader\"></lib-common-header>\n    <div>\n        <div class=\"p-2 w-full\">\n            <div\n                class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                <div class=\"flex flex-row justify-between\">\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">Dataset List <span *ngIf=\"isFilterInputs\"\n                                class=\"text-blue-500 cursor-pointer\"><i class=\"fa fa-pencil\"\n                                    (click)=\"getEditDataSet()\"></i></span></div>\n                        <dx-select-box [items]=\"dataSettableDataSource\" (onValueChanged)=\"getDataSetDetails($event)\"\n                            displayExpr=\"datasetName\" valueExpr=\"datasetId\" [searchEnabled]=\"true\"\n                            [value]=\"selectedDataSetOnedit.datasetId\"></dx-select-box>\n                    </div>\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">Select View Type</div>\n                        <dx-select-box [items]=\"['chart','table','groupTable','others']\" [(ngModel)]=\"selectedViewType\"\n                            (onValueChanged)=\"getViewType($event)\"></dx-select-box>\n                    </div>\n                    <ng-container *ngIf=\"selectedViewType =='others'\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md mb-2\">Select Component</div>\n                            <dx-select-box [items]=\"componentNamesOthers\" displayExpr=\"item\" valueExpr=\"compName\"\n                                [(ngModel)]=\"componentName\"></dx-select-box>\n                        </div>\n                    </ng-container>\n\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">View Name</div>\n                        <dx-text-box [(ngModel)]=\"creatCompViewObject.viewName\"></dx-text-box>\n                    </div>\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">View Label</div>\n                        <dx-text-box [(ngModel)]=\"creatCompViewObject.viewLabel\"></dx-text-box>\n                    </div>\n                </div>\n                <ng-container *ngIf=\"isFilterInputs\">\n                    <div class=\"flex flex-row mt-2\">\n                        <ng-container *ngFor=\"let request of selectedDataSet.config.queryConfig.mapedFilters\">\n                            <div class=\"m-2\">\n                                <div class=\"text-md mb-1\"> {{getCapitalize(request.localColumn)}}</div>\n                                <dx-date-box displayFormat=\"yyyy-MM-dd\" type=\"date\"\n                                    (onValueChanged)=\"startDateChange($event,request)\"\n                                    *ngIf=\"getFilter(request.localColumn)\">\n                                </dx-date-box>\n                                <dx-text-box [(ngModel)]=\"request.defaultValue\"\n                                    *ngIf=\"!getFilter(request.localColumn)\"></dx-text-box>\n                            </div>\n                        </ng-container>\n                    </div>\n                </ng-container>\n\n                <div class=\"flex flex-row mt-5 justify-center items-center\">\n                    <button class=\"{{commonService.btn_success_md}}\" (click)=\"addNewView()\">\n                        Reset View\n                    </button>\n                    <button class=\"{{commonService.btn_primary_md}} cursor-pointer mx-4 my-2\" (click)=\"createNewView()\">\n                        Proceed\n                    </button>\n\n\n                </div>\n                <div class=\"m-5 border\">\n                    <div class=\"m-2\">\n                        <div class=\"mt-5\">\n                            <app-loader *ngIf=\"isLoader\"></app-loader>\n                            <!-- for chart view -->\n                            <ng-container *ngIf=\"isGenerate\">\n                                <ng-container *ngIf=\"selectedViewType == 'chart'\">\n                                    <app-dash-chart [datasetmodal]=\"dataSourceModal\"\n                                        (getChartConfigOutPut)=\"getEmitNewChartCongig($event)\"></app-dash-chart>\n                                </ng-container>\n                                <!-- for table view -->\n                                <ng-container *ngIf=\"selectedViewType == 'table' || selectedViewType == 'groupTable'\">\n                                    <app-dash-table [datasetmodal]=\"dataSourceModal\"\n                                        (getTableConfigOutPut)=\"getEmitNewTableConfig($event)\"></app-dash-table>\n                                </ng-container>\n                                <!-- for others view  -->\n                                <ng-container *ngIf=\"selectedViewType == 'others'\">\n                                    <ng-container *ngIf=\"componentName == 'GammaTableWithPercentageComponent'\">\n                                        <app-table-with-bar [datasetmodal]=\"dataSourceModal\"\n                                            (createOtherComponentView)=\"getEmitNewOtherSetCongig($event)\"></app-table-with-bar>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"componentName == 'GammaGeoChartComponent' &&  componentName != 'GammaTableWithPercentageComponent'\">\n                                        <!-- <app-gamma-geo-chart></app-gamma-geo-chart> -->\n                                        <app-geo-map [datasetmodal]=\"dataSourceModal\"\n                                            (createOtherComponentView)=\"getEmitNewOtherSetCongig($event)\"></app-geo-map>\n                                    </ng-container>\n                                    <ng-container\n                                    *ngIf=\"componentName != 'GammaTableWithPercentageComponent' && componentName != 'GammaGeoChartComponent' &&  componentName != 'GammSingleNumberCardComponent'\">\n                                        <lib-dash-today-previous [datasetmodal]=\"dataSourceModal\"\n                                        (gettodayPreviousConfigOutPut)=\"getEmitNewOtherSetCongig($event)\"></lib-dash-today-previous>\n                                    </ng-container>\n\n                                    <ng-container\n                                     *ngIf=\"componentName != 'GammaTableWithPercentageComponent' && componentName != 'GammaGeoChartComponent' && componentName != 'GammaTodayPreviousComponent'\">\n                                        <lib-single-card [datasetmodal]=\"dataSourceModal\"\n                                        (getSingleCardConfigOutPut)=\"getEmitNewOtherSetCongig($event)\">\n                                        </lib-single-card>\n                                     </ng-container>\n\n                                     \n                                </ng-container>\n                            </ng-container>\n                        </div>\n\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'app-create-comp-view', template: "<div class=\"flex flex-col flex-auto min-w-0\">\n    <lib-common-header [pageTitle]=\"'Views Editor'\" *ngIf=\"isHeader\"></lib-common-header>\n    <div>\n        <div class=\"p-2 w-full\">\n            <div\n                class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                <div class=\"flex flex-row justify-between\">\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">Dataset List <span *ngIf=\"isFilterInputs\"\n                                class=\"text-blue-500 cursor-pointer\"><i class=\"fa fa-pencil\"\n                                    (click)=\"getEditDataSet()\"></i></span></div>\n                        <dx-select-box [items]=\"dataSettableDataSource\" (onValueChanged)=\"getDataSetDetails($event)\"\n                            displayExpr=\"datasetName\" valueExpr=\"datasetId\" [searchEnabled]=\"true\"\n                            [value]=\"selectedDataSetOnedit.datasetId\"></dx-select-box>\n                    </div>\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">Select View Type</div>\n                        <dx-select-box [items]=\"['chart','table','groupTable','others','heatmap']\" [(ngModel)]=\"selectedViewType\"\n                            (onValueChanged)=\"getViewType($event)\"></dx-select-box>\n                    </div>\n                    <ng-container *ngIf=\"selectedViewType =='others'\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md mb-2\">Select Component</div>\n                            <dx-select-box [items]=\"componentNamesOthers\" displayExpr=\"item\" valueExpr=\"compName\"\n                                [(ngModel)]=\"componentName\"></dx-select-box>\n                        </div>\n                    </ng-container>\n\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">View Name</div>\n                        <dx-text-box [(ngModel)]=\"creatCompViewObject.viewName\"></dx-text-box>\n                    </div>\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">View Label</div>\n                        <dx-text-box [(ngModel)]=\"creatCompViewObject.viewLabel\"></dx-text-box>\n                    </div>\n                </div>\n                <ng-container *ngIf=\"isFilterInputs\">\n                    <div class=\"flex flex-row mt-2\">\n                        <ng-container *ngFor=\"let request of selectedDataSet.config.queryConfig.mapedFilters\">\n                            <div class=\"m-2\">\n                                <div class=\"text-md mb-1\"> {{getCapitalize(request.localColumn)}}</div>\n                                <dx-date-box displayFormat=\"yyyy-MM-dd\" type=\"date\"\n                                    (onValueChanged)=\"startDateChange($event,request)\"\n                                    *ngIf=\"getFilter(request.localColumn)\">\n                                </dx-date-box>\n                                <dx-text-box [(ngModel)]=\"request.defaultValue\"\n                                    *ngIf=\"!getFilter(request.localColumn)\"></dx-text-box>\n                            </div>\n                        </ng-container>\n                    </div>\n                </ng-container>\n\n                <div class=\"flex flex-row mt-5 justify-center items-center\">\n                    <button class=\"{{commonService.btn_success_md}}\" (click)=\"addNewView()\">\n                        Reset View\n                    </button>\n                    <button class=\"{{commonService.btn_primary_md}} cursor-pointer mx-4 my-2\" (click)=\"createNewView()\">\n                        Proceed\n                    </button>\n\n\n                </div>\n                <div class=\"m-5 border\">\n                    <div class=\"m-2\">\n                        <div class=\"mt-5\">\n                            <app-loader *ngIf=\"isLoader\"></app-loader>\n                            <!-- for chart view -->\n                            <ng-container *ngIf=\"isGenerate\">\n                                <ng-container *ngIf=\"selectedViewType == 'chart'\">\n                                    <app-dash-chart [datasetmodal]=\"dataSourceModal\"\n                                        (getChartConfigOutPut)=\"getEmitNewChartCongig($event)\"></app-dash-chart>\n                                </ng-container>\n                                <ng-container *ngIf=\"selectedViewType == 'heatmap'\">\n                                    <app-heat-map [datasetmodal]=\"dataSourceModal\"\n                                        (getHeatMapConfigOutPut)=\"getEmitNewHeatMapConfig($event)\"></app-heat-map>\n                                </ng-container>\n                                <!-- for table view -->\n                                <ng-container *ngIf=\"selectedViewType == 'table' || selectedViewType == 'groupTable'\">\n                                    <app-dash-table [datasetmodal]=\"dataSourceModal\"\n                                        (getChartConfigOutPut)=\"getEmitNewTableConfig($event)\"></app-dash-table>\n                                </ng-container>\n                                <!-- for others view  -->\n                                <ng-container *ngIf=\"selectedViewType == 'others'\">\n                                    <ng-container *ngIf=\"componentName == 'GammaTableWithPercentageComponent'\">\n                                        <app-table-with-bar [datasetmodal]=\"dataSourceModal\"\n                                            (createOtherComponentView)=\"getEmitNewOtherSetCongig($event)\"></app-table-with-bar>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"componentName == 'GammaGeoChartComponent' &&  componentName != 'GammaTableWithPercentageComponent'\">\n                                        <!-- <app-gamma-geo-chart></app-gamma-geo-chart> -->\n                                        <app-geo-map [datasetmodal]=\"dataSourceModal\"\n                                            (createOtherComponentView)=\"getEmitNewOtherSetCongig($event)\"></app-geo-map>\n                                    </ng-container>\n                                    <ng-container\n                                    *ngIf=\"componentName != 'GammaTableWithPercentageComponent' && componentName != 'GammaGeoChartComponent' &&  componentName != 'GammSingleNumberCardComponent'\">\n                                        <lib-dash-today-previous [datasetmodal]=\"dataSourceModal\"\n                                        (gettodayPreviousConfigOutPut)=\"getEmitNewOtherSetCongig($event)\"></lib-dash-today-previous>\n                                    </ng-container>\n\n                                    <ng-container\n                                     *ngIf=\"componentName != 'GammaTableWithPercentageComponent' && componentName != 'GammaGeoChartComponent' && componentName != 'GammaTodayPreviousComponent'\">\n                                        <lib-single-card [datasetmodal]=\"dataSourceModal\"\n                                        (getSingleCardConfigOutPut)=\"getEmitNewOtherSetCongig($event)\">\n                                        </lib-single-card>\n                                     </ng-container>\n\n                                     \n                                </ng-container>\n                            </ng-container>\n                        </div>\n\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i2$1.ToastrService }, { type: CommonService }, { type: ApplicationContentService }, { type: kpicommonService$2 }, { type: i4.Router }, { type: i4.ActivatedRoute }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [APP_ENVIRONMENT]
@@ -7661,7 +8201,6 @@ class GammaAdvanceOperatorTableComponent {
                                 const foundMatchObject = tableColumns.find(obj => obj.dataField === key);
                                 if (foundMatchObject) {
                                     if (foundMatchObject.enrichName && foundMatchObject.enrichName !== "") {
-                                        console.log(foundMatchObject.enrichName);
                                         newObj[key] = this.callServiceFunction(foundMatchObject.enrichName, newObj[key]);
                                     }
                                 }
@@ -8742,6 +9281,328 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ["chartDataSource"]
             }] } });
 
+class GammaHeatChartComponent {
+    constructor(commonService) {
+        this.commonService = commonService;
+        this.dataSourseForTable = [];
+        this.isLoader = true;
+        this.tableDataConfig = {};
+        this.enrichNameList = ["formatBytes", "formatBytsToKb", "formatBytsToGb", "reformatNumberWithThousandSeparatorV3", "formatBytesv2"];
+        this.activeTab = 'basic';
+        this.isAdvanceFilter = false;
+        this.isHeatMapClick = false;
+        this.heatChartDataSource = {};
+        this.chartDataForTooltip = {};
+        this.dataSourseForHeatMap = [];
+        this.viewProperties = {
+            enableClickEvent: false,
+            enableRightClickEvent: true,
+            clickEventOptions: {
+                associatedViews: [],
+                eventType: ""
+            }
+        };
+        this.optionalDrilDownDataSource = [];
+        this.allConfiguredViews = [];
+        this.colorArray = [];
+        this.firstColor = "rgba(45, 110, 18, 1)";
+        this.secondColor = "rgba(255, 204, 0, 1)";
+        this.singleColor = "rgba(255, 204, 0, 1)";
+        this.heatmapChartConfig = {};
+        this.getTableConfigOutPut = new EventEmitter();
+        this.oRowClick = new EventEmitter();
+        this.onrightClickContextSelection = new EventEmitter();
+        this.rightClickEnable = true;
+    }
+    set chartDataSource(value) {
+        if (value === undefined || value.length === 0) {
+            return;
+        }
+        else {
+            this.isLoader = true;
+            this.page_config = value;
+            this.page_parms = value.titleParams;
+            if (value.kpiConfig.dataSource && value.kpiConfig.dataSource.length !== 0) {
+                this.heatmapChartConfig = value.kpiConfig.dataConfig;
+                this.colorArray = value.kpiConfig.dataConfig.color;
+                this.getHeatmapData(value.kpiConfig.dataSource);
+                setTimeout(() => {
+                    this.isLoader = false;
+                }, 200);
+            }
+            else {
+                setTimeout(() => {
+                    this.dataSourseForTable = [];
+                    this.tableDataConfig['columns'] = [];
+                    this.isLoader = false;
+                }, 200);
+            }
+        }
+    }
+    ngOnInit() {
+    }
+    getHeatmapData(heatMapData) {
+        this.heatChartDataSource = {};
+        this.isAdvanceFilter = false;
+        if (heatMapData && heatMapData.length !== 0) {
+            if (this.heatmapChartConfig.chartFormat == "topx") {
+                const { result, uniqueDates } = this.generateDateWiseColorCodedData(heatMapData);
+                uniqueDates.sort();
+                this.heatChartDataSource.dataSet = this.getTransposedHeatmapData(result);
+                this.heatChartDataSource["argumentValue"] = uniqueDates;
+            }
+            else if ((this.heatmapChartConfig.chartFormat == "simple")) {
+                const { result, uniqueDates } = this.generateData(heatMapData);
+                uniqueDates.sort();
+                this.heatChartDataSource["dataSet"] = result;
+                this.heatChartDataSource["argumentValue"] = uniqueDates;
+            }
+            this.isHeatMapClick = false;
+        }
+        else {
+            this.isHeatMapClick = false;
+        }
+    }
+    getTransposedHeatmapData(dataSet) {
+        const transposed = [];
+        const maxBoxes = Math.max(...dataSet.map(item => item.dataset.length));
+        for (let i = 0; i < maxBoxes; i++) {
+            const row = [];
+            for (let j = 0; j < dataSet.length; j++) {
+                const box = dataSet[j].dataset[i];
+                row.push({
+                    box: box || null,
+                    date: dataSet[j].record_date
+                });
+            }
+            transposed.push(row);
+        }
+        return transposed;
+    }
+    generateDateWiseColorCodedData(data) {
+        const result = [];
+        const uniqueDates = new Set();
+        const allEntries = [];
+        const topArg = this.heatmapChartConfig.topArgument;
+        const leftArg = this.heatmapChartConfig.leftArgument;
+        const valueField = this.heatmapChartConfig.columns[0].dataField;
+        data.forEach(entry => {
+            const formattedDate = (moment(entry[topArg]).format('YYYY-MM-DD')) ? moment(entry[topArg]).format('YYYY-MM-DD') : topArg;
+            uniqueDates.add(formattedDate);
+            entry.resultDataset.forEach(item => {
+                allEntries.push({
+                    [topArg]: formattedDate,
+                    [leftArg]: item[`${leftArg}`],
+                    [valueField]: item[`${valueField}`]
+                });
+            });
+        });
+        let coloredData;
+        if (this.heatmapChartConfig.type === 'gradient') {
+            coloredData = this.getFormateDataByColorCodeForGradient(allEntries, valueField);
+        }
+        else if (this.heatmapChartConfig.type === 'twoColor') {
+            coloredData = this.getFormateDataByColorCodeForWithTwoColor(allEntries, valueField);
+        }
+        else {
+            coloredData = this.getFormateDataByColorCodeForWithSingleColor(allEntries, valueField);
+        }
+        const dateMap = {};
+        coloredData.forEach(item => {
+            const date = item[topArg];
+            if (!dateMap[date]) {
+                dateMap[date] = [];
+            }
+            dateMap[date].push({
+                [leftArg]: item[leftArg],
+                [valueField]: item[valueField],
+                color: item.color,
+                [topArg]: date,
+            });
+        });
+        for (const date of Array.from(uniqueDates).sort()) {
+            result.push({
+                record_date: date,
+                dataset: dateMap[date] || []
+            });
+        }
+        return {
+            result,
+            uniqueDates: Array.from(uniqueDates).sort()
+        };
+    }
+    generateData(data) {
+        const result = [];
+        const uniqueDates = new Set();
+        const dataSourceMap = {};
+        const topArg = this.heatmapChartConfig.topArgument;
+        const leftArg = this.heatmapChartConfig.leftArgument;
+        data.forEach(item => {
+            const rowKey = item[leftArg];
+            const columnKey = moment(item[topArg]).format('YYYY-MM-DD');
+            if (!dataSourceMap[rowKey]) {
+                dataSourceMap[rowKey] = {
+                    datasource: rowKey,
+                    dataset: []
+                };
+            }
+            dataSourceMap[rowKey].dataset.push({
+                ...item,
+                [topArg]: columnKey
+            });
+            uniqueDates.add(columnKey);
+        });
+        const uniqueDatesArray = Array.from(uniqueDates);
+        for (const key in dataSourceMap) {
+            const dataset = dataSourceMap[key].dataset;
+            let formattedDataset;
+            if (this.heatmapChartConfig.type == "gradient") {
+                formattedDataset = this.getFormateDataByColorCodeForGradient(dataset, this.heatmapChartConfig.columns[0].dataField);
+            }
+            else if (this.heatmapChartConfig.type == "twoColor") {
+                formattedDataset = this.getFormateDataByColorCodeForWithTwoColor(dataset, this.heatmapChartConfig.columns[0].dataField);
+            }
+            else {
+                formattedDataset = this.getFormateDataByColorCodeForWithSingleColor(dataset, this.heatmapChartConfig.columns[0].dataField);
+            }
+            const dateToItemMap = {};
+            formattedDataset.forEach(item => {
+                dateToItemMap[item[topArg]] = item;
+            });
+            const completeDataset = uniqueDatesArray.map((date) => {
+                if (dateToItemMap[date]) {
+                    return dateToItemMap[date];
+                }
+                else {
+                    return {
+                        [topArg]: date,
+                        avgSize: "No Data",
+                        fileCount: 0,
+                        fileSize: 0,
+                        color: "rgb(242, 118, 109)"
+                    };
+                }
+            });
+            result.push({
+                datasource: key,
+                dataset: completeDataset
+            });
+        }
+        return {
+            result: result,
+            uniqueDates: uniqueDatesArray
+        };
+    }
+    getFormateDataByColorCodeForGradient(filedata, column) {
+        filedata.forEach(item => {
+            item.avgSize = parseFloat(item[column]);
+        });
+        const maxAvgSize = Math.max(...filedata.map(item => item[column]));
+        const minAvgSize = Math.min(...filedata.map(item => item[column]));
+        const [minColorStr, maxColorStr] = this.colorArray || ["rgba(45, 110, 18,1)", "rgba(255, 204, 0,1)"];
+        const minColor = this.parseRGBA(minColorStr);
+        const maxColor = this.parseRGBA(maxColorStr);
+        filedata.forEach(item => {
+            item.color = this.calculateColor(item[column], minAvgSize, maxAvgSize, minColor, maxColor);
+        });
+        return filedata;
+    }
+    getFormateDataByColorCodeForWithTwoColor(filedata, column) {
+        filedata.forEach(item => {
+            item[column] = parseFloat(item[column]);
+        });
+        const [minColorStr, maxColorStr] = this.colorArray || ["rgba(45, 110, 18,1)", "rgba(255, 204, 0,1)"];
+        const minColor = this.parseRGBA(minColorStr);
+        const maxColor = this.parseRGBA(maxColorStr);
+        filedata.forEach(item => {
+            if (item[column] == 0) {
+                item.color = `rgb(${minColor.join(',')})`;
+            }
+            else {
+                item.color = `rgb(${maxColor.join(',')})`;
+            }
+        });
+        return filedata;
+    }
+    getFormateDataByColorCodeForWithSingleColor(filedata, column) {
+        filedata.forEach(item => {
+            item[column] = parseFloat(item[column]);
+        });
+        const [singleColor] = this.colorArray || ["rgba(255, 204, 0,1)"];
+        const minColor = this.parseRGBA(singleColor);
+        filedata.forEach(item => {
+            item.color = `rgb(${minColor.join(',')})`;
+        });
+        return filedata;
+    }
+    parseRGBA(colorStr) {
+        const values = colorStr.match(/[\d.]+/g)?.map(Number) || [];
+        if (values.length === 3)
+            values.push(1);
+        return [
+            values[0] ?? 0,
+            values[1] ?? 0,
+            values[2] ?? 0,
+            values[3] ?? 1
+        ];
+    }
+    calculateColor(avgSize, minAvgSize, maxAvgSize, minColor, maxColor) {
+        if (minAvgSize != maxAvgSize) {
+            let gradient = (avgSize - minAvgSize) / (maxAvgSize - minAvgSize);
+            let color = minColor.map((channel, index) => {
+                return Math.round(channel + gradient * (maxColor[index] - channel));
+            });
+            return `rgb(${color.join(',')})`;
+        }
+        else {
+            return `rgb(${minColor.join(',')})`;
+        }
+    }
+    transformColumns(mainobj) {
+        return Object.keys(mainobj).map(key => {
+            return {
+                visible: true,
+                dataField: key,
+                caption: key
+            };
+        });
+    }
+    getObjectKeys(obj) {
+        return Object.keys(obj);
+    }
+    callServiceFunction(functionName, value) {
+        if (value !== undefined) {
+            if (typeof this.commonService[functionName] === "function") {
+                return this.commonService[functionName](value);
+            }
+            else {
+                console.error(`Function ${functionName} not found in CommonService`);
+                return null;
+            }
+        }
+        else {
+            return "No Data";
+        }
+    }
+}
+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=\"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.box[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        </ng-container>\n</div>", dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "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=\"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.box[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        </ng-container>\n</div>" }]
+        }], ctorParameters: function () { return [{ type: CommonService }]; }, propDecorators: { getTableConfigOutPut: [{
+                type: Output
+            }], oRowClick: [{
+                type: Output
+            }], onrightClickContextSelection: [{
+                type: Output
+            }], rightClickEnable: [{
+                type: Input
+            }], chartDataSource: [{
+                type: Input,
+                args: ['chartDataSource']
+            }] } });
+
 class kpicommonService {
     constructor(commonService) {
         this.commonService = commonService;
@@ -9712,7 +10573,7 @@ class CreateDatasetSqlComponent {
         if (newVal === '' || newVal === undefined) {
         }
         else {
-            fval = this.sqlFormatter.transform(val);
+            fval = val;
             splittedValuesOfQuery = fval.match(/'[^']*'|\S+/g) || [];
             this.queryStringData = fval;
             const re = /{([^}]+)}/g;
@@ -10317,6 +11178,7 @@ class PageConfigComponent {
             GammSingleNumberCardComponent,
             GammaAdvanceOperatorTableComponent,
             AdvanceWidgetHeaderFilterComponent,
+            GammaHeatChartComponent,
             GammaGeoChartComponent
         };
         this.dataSourceMataData = [];
@@ -13546,7 +14408,9 @@ PackageApplicationControllerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion
         OflineMetricsComponent,
         AllMetricsConfigComponent,
         DashTodayPreviousComponent,
-        SingleCardComponent], imports: [CommonModule, i4.RouterModule, DevExtremeModule,
+        SingleCardComponent,
+        HeatMapSupportComponent,
+        GammaHeatChartComponent], imports: [CommonModule, i4.RouterModule, DevExtremeModule,
         DxButtonModule,
         DxCheckBoxModule,
         DxNumberBoxModule,
@@ -13611,7 +14475,9 @@ PackageApplicationControllerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion
         OnlineMetricsComponent,
         OflineMetricsComponent,
         AllMetricsConfigComponent,
-        DashTodayPreviousComponent] });
+        DashTodayPreviousComponent,
+        HeatMapSupportComponent,
+        GammaHeatChartComponent] });
 PackageApplicationControllerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PackageApplicationControllerModule, providers: [
         ApplicationContentService,
         ApplicationDatssetsCall
@@ -13702,7 +14568,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         OflineMetricsComponent,
                         AllMetricsConfigComponent,
                         DashTodayPreviousComponent,
-                        SingleCardComponent
+                        SingleCardComponent,
+                        HeatMapSupportComponent,
+                        GammaHeatChartComponent
                     ],
                     imports: [
                         CommonModule,
@@ -13775,7 +14643,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         OnlineMetricsComponent,
                         OflineMetricsComponent,
                         AllMetricsConfigComponent,
-                        DashTodayPreviousComponent
+                        DashTodayPreviousComponent,
+                        HeatMapSupportComponent,
+                        GammaHeatChartComponent
                     ],
                     providers: [
                         ApplicationContentService,
@@ -13825,5 +14695,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
-export { APP_ENVIRONMENT, AdvanceWidgetHeaderFilterComponent, AllMetricsConfigComponent, AppAdvanceHeaderComponent, AppHttpService, AppTitleComponent, ApplicationContentService, ApplicationDatssetsCall, ApplicationFilterComponent, ApplicationViewsComponent, BreadCrumbsComponent, CdrConfigComponent, CommonHeaderComponent, CommonService, CreateCompViewComponent, CreateDatasetComponent, CreateDatasetJsonComponent, CreateDatasetSqlComponent, CreateMetricsComponent, DashChartComponent, DashTableComponent, DashTodayPreviousComponent, GamamWidgetComponent, GammSingleNumberCardComponent, GammaAdvanceChartComponent, GammaAdvanceFilterComponent, GammaAdvanceOperatorTableComponent, GammaAppControllerComponent, GammaAppControllerModule, GammaAppControllerService, GammaGeoChartComponent, GammaTableClumnBarChartComponent, GammaTableWithPercentageComponent, GammaTodayPreviousComponent, GeoMapComponent, GoogleGeoMapComponent, IconsModule, LoaderComponent, LoadingComponent, LoadingModule, OflineMetricsComponent, OnlineMetricsComponent, PackageApplicationControllerModule, PageConfigComponent, PageConfigMultilayoutComponent, PageControlerComponent, SafeHtmlPipe, SqlPipe, TableWithBarComponent, contentSafeHtml, kpicommonService$2 as kpicommonService };
+export { APP_ENVIRONMENT, AdvanceWidgetHeaderFilterComponent, AllMetricsConfigComponent, AppAdvanceHeaderComponent, AppHttpService, AppTitleComponent, ApplicationContentService, ApplicationDatssetsCall, ApplicationFilterComponent, ApplicationViewsComponent, BreadCrumbsComponent, CdrConfigComponent, CommonHeaderComponent, CommonService, CreateCompViewComponent, CreateDatasetComponent, CreateDatasetJsonComponent, CreateDatasetSqlComponent, CreateMetricsComponent, DashChartComponent, DashTableComponent, DashTodayPreviousComponent, GamamWidgetComponent, GammSingleNumberCardComponent, GammaAdvanceChartComponent, GammaAdvanceFilterComponent, GammaAdvanceOperatorTableComponent, GammaAppControllerComponent, GammaAppControllerModule, GammaAppControllerService, GammaGeoChartComponent, GammaHeatChartComponent, GammaTableClumnBarChartComponent, GammaTableWithPercentageComponent, GammaTodayPreviousComponent, GeoMapComponent, GoogleGeoMapComponent, HeatMapSupportComponent, IconsModule, LoaderComponent, LoadingComponent, LoadingModule, OflineMetricsComponent, OnlineMetricsComponent, PackageApplicationControllerModule, PageConfigComponent, PageConfigMultilayoutComponent, PageControlerComponent, SafeHtmlPipe, SqlPipe, TableWithBarComponent, contentSafeHtml, kpicommonService$2 as kpicommonService };
 //# sourceMappingURL=gamma-app-controller.mjs.map