gamma-app-controller 2.0.3 → 2.0.4

package/fesm2020/gamma-app-controller.mjs

@@ -3530,6 +3530,9 @@ class GoogleGeoMapComponent {
         this.rightClickEnable = true;
         this.markers = [];
         this.bounds = new google.maps.LatLngBounds();
+        this.choropleth_map_data_source = new Map();
+        this.minChoroplethMapCnt = Infinity;
+        this.maxChoroplethMapCnt = -Infinity;
     }
     set chartDataSource(value) {
         if (value === undefined || value.length === 0) {
@@ -3580,6 +3583,27 @@ class GoogleGeoMapComponent {
                             zoom: this.zoomValuForAll
                         };
                     }
+                    else if (this.mapTYpe == "choroplethMap") {
+                        let choroplethMapDataSource = new Map();
+                        let choroplethTooltipDataSource = new Map();
+                        let chartConfig = value.kpiConfig.dataConfig;
+                        this.chartHeight = `${chartConfig.size}px`;
+                        let tootTipColumn = chartConfig.chart_config
+                            .filter(c => c.displayFor === 'map' || c.displayFor === 'tooltip');
+                        const valueField = chartConfig.chart_config.find(c => c.displayFor === 'map')?.dataField;
+                        value.kpiConfig.dataSource.forEach(d => {
+                            const key = d[chartConfig.argumentField].toUpperCase();
+                            const val = d[valueField];
+                            choroplethMapDataSource.set(key, val);
+                            choroplethTooltipDataSource.set(key, d);
+                            this.minChoroplethMapCnt = Math.min(this.minChoroplethMapCnt, d[valueField]);
+                            this.maxChoroplethMapCnt = Math.max(this.maxChoroplethMapCnt, d[valueField]);
+                        });
+                        this.initChoroplethMapMap(chartConfig, tootTipColumn, choroplethMapDataSource, choroplethTooltipDataSource);
+                        setTimeout(() => {
+                            this.isLoader = false;
+                        }, 200);
+                    }
                     else {
                         this.locations = value.kpiConfig.dataSource;
                         this.chartHeight = `${value.kpiConfig.dataConfig.size}px`;
@@ -3635,6 +3659,9 @@ class GoogleGeoMapComponent {
                 this.initializeHeatWithMarkerMap(this.locations);
             }
         }
+        else if (this.mapTYpe == "choroplethMap") {
+            return;
+        }
         else {
             this.isLoader = false;
             this.initializeMap();
@@ -3932,12 +3959,92 @@ class GoogleGeoMapComponent {
             d.sales_percentage = Math.min(Math.max(normalize(d[this.page_config.kpiConfig.dataConfig.agrumentValue], minSales, maxSales), minPercentage), maxPercentage);
         });
     }
+    getColor(cnt, startColor, endColor) {
+        if (cnt === undefined || cnt === null || this.maxChoroplethMapCnt === this.minChoroplethMapCnt) {
+            return '#cccccc';
+        }
+        const ratio = Math.min(Math.max((cnt - this.minChoroplethMapCnt) / (this.maxChoroplethMapCnt - this.minChoroplethMapCnt), 0), 1);
+        const start = this.hexToRgb(startColor);
+        const end = this.hexToRgb(endColor);
+        const r = this.lerp(start.r, end.r, ratio);
+        const g = this.lerp(start.g, end.g, ratio);
+        const b = this.lerp(start.b, end.b, ratio);
+        return `rgb(${r}, ${g}, ${b})`;
+    }
+    lerp(start, end, ratio) {
+        return Math.round(start + (end - start) * ratio);
+    }
+    hexToRgb(hex) {
+        const cleanHex = hex.replace('#', '');
+        const bigint = parseInt(cleanHex, 16);
+        return {
+            r: (bigint >> 16) & 255,
+            g: (bigint >> 8) & 255,
+            b: bigint & 255
+        };
+    }
+    initChoroplethMapMap(chartConfig, tootTipColumn, choroplethMapDataSource, choroplethTooltipDataSource) {
+        const map = new google.maps.Map(document.getElementById('googlemap'), {
+            center: { lat: parseFloat(chartConfig.centerLat), lng: parseFloat(chartConfig.centerLng) },
+            zoom: parseInt(chartConfig.zoom)
+        });
+        map.data.loadGeoJson(chartConfig.gjsonFilePath);
+        map.data.setStyle((feature) => {
+            const district = feature.getProperty('d')?.toUpperCase();
+            const cnt = choroplethMapDataSource.get(district);
+            return {
+                fillColor: this.getColor(cnt, chartConfig.colorOne, chartConfig.colorTwo),
+                strokeColor: '#555',
+                strokeWeight: 1,
+                fillOpacity: 0.75
+            };
+        });
+        const infoWindow = new google.maps.InfoWindow();
+        map.data.addListener('mouseover', (event) => {
+            const district = event.feature.getProperty('d');
+            const key = district?.toUpperCase();
+            const row = choroplethTooltipDataSource.get(key);
+            infoWindow.setContent(this.buildInfoWindowContent(district, row, tootTipColumn));
+            infoWindow.setPosition(event.latLng);
+            infoWindow.open(map);
+        });
+        map.data.addListener('mouseout', () => infoWindow.close());
+    }
+    getFeatureCenter(feature) {
+        const bounds = new google.maps.LatLngBounds();
+        feature.getGeometry()?.forEachLatLng((latLng) => {
+            bounds.extend(latLng);
+        });
+        return bounds.getCenter();
+    }
+    buildInfoWindowContent(district, row, tootTipColumn) {
+        const rows = tootTipColumn.map(c => `
+    <div style="display:flex; justify-content:space-between;">
+      <span>${c.caption}</span>
+      <strong>${row?.[c.dataField] ?? 'No data'}</strong>
+    </div>
+  `).join('');
+        return `
+    <div style="
+      color:#000;
+      background:#fff;
+      padding:8px 12px;
+      font-size:13px;
+      min-width:150px;
+    ">
+      <div style="font-weight:600; margin-bottom:6px;">
+        ${district}
+      </div>
+      ${rows}
+    </div>
+  `;
+    }
 }
 GoogleGeoMapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GoogleGeoMapComponent, deps: [{ token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
-GoogleGeoMapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GoogleGeoMapComponent, selector: "app-google-geo-map", inputs: { rightClickEnable: "rightClickEnable", chartDataSource: "chartDataSource" }, outputs: { getTableConfigOutPut: "getTableConfigOutPut", oRowClick: "oRowClick", onrightClickContextSelection: "onrightClickContextSelection" }, viewQueries: [{ propertyName: "googlMap", first: true, predicate: ["googlMap"], descendants: true }], ngImport: i0, template: "\n<div class=\"mx-2 bg-gray-800\">\n    <ng-container *ngIf=\"isLoader\">\n        <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n            <app-loader></app-loader>\n        </div>\n    </ng-container>\n\n    <div class=\"mx-2 pb-2\">\n\n      <ng-container>\n        <!-- <div id=\"regions_div\" style=\"width: 100%\" ></div>   -->\n        <div id=\"regions_div\" #googlMap style=\"width: 100%\" ></div>    \n      </ng-container>\n      \n       \n\n    </div>\n\n\n</div>\n", dependencies: [{ kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
+GoogleGeoMapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GoogleGeoMapComponent, selector: "app-google-geo-map", inputs: { rightClickEnable: "rightClickEnable", chartDataSource: "chartDataSource" }, outputs: { getTableConfigOutPut: "getTableConfigOutPut", oRowClick: "oRowClick", onrightClickContextSelection: "onrightClickContextSelection" }, viewQueries: [{ propertyName: "googlMap", first: true, predicate: ["googlMap"], descendants: true }], ngImport: i0, template: "<div class=\"mx-2 bg-gray-800\">\n  <ng-container *ngIf=\"isLoader\">\n    <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n      <app-loader></app-loader>\n    </div>\n  </ng-container>\n\n  <div class=\"mx-2 pb-2\">\n\n    <ng-container>\n      <!-- <div id=\"regions_div\" style=\"width: 100%\" ></div>   -->\n      <div id=\"regions_div\" #googlMap style=\"width: 100%\"></div>\n      <div id=\"googlemap\" style=\"width: 100%;\" [style.height]=\"chartHeight\"></div>\n\n    </ng-container>\n\n\n\n  </div>\n\n\n</div>", dependencies: [{ kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GoogleGeoMapComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-google-geo-map", template: "\n<div class=\"mx-2 bg-gray-800\">\n    <ng-container *ngIf=\"isLoader\">\n        <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n            <app-loader></app-loader>\n        </div>\n    </ng-container>\n\n    <div class=\"mx-2 pb-2\">\n\n      <ng-container>\n        <!-- <div id=\"regions_div\" style=\"width: 100%\" ></div>   -->\n        <div id=\"regions_div\" #googlMap style=\"width: 100%\" ></div>    \n      </ng-container>\n      \n       \n\n    </div>\n\n\n</div>\n" }]
+            args: [{ selector: "app-google-geo-map", template: "<div class=\"mx-2 bg-gray-800\">\n  <ng-container *ngIf=\"isLoader\">\n    <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n      <app-loader></app-loader>\n    </div>\n  </ng-container>\n\n  <div class=\"mx-2 pb-2\">\n\n    <ng-container>\n      <!-- <div id=\"regions_div\" style=\"width: 100%\" ></div>   -->\n      <div id=\"regions_div\" #googlMap style=\"width: 100%\"></div>\n      <div id=\"googlemap\" style=\"width: 100%;\" [style.height]=\"chartHeight\"></div>\n\n    </ng-container>\n\n\n\n  </div>\n\n\n</div>" }]
         }], ctorParameters: function () { return [{ type: CommonService }]; }, propDecorators: { googlMap: [{
                 type: ViewChild,
                 args: ["googlMap"]
@@ -3974,9 +4081,14 @@ class GeoMapComponent {
                 "value": "heatMapAndMarker"
             }
         ];
-        this.chartViewTypeDataSource = ["geoMap", "heatMap", "bubbleMap"];
         this.mapIconsDataSource = ["assets/custom-marker..jpeg"];
         this.mapType = '';
+        this.chartViewTypeDataSource = [
+            { name: 'GEO Map', value: 'geoMap' },
+            { name: 'Heat Map', value: 'heatMap' },
+            { name: 'Bubble Map', value: 'bubbleMap' },
+            { name: 'Choropleth Map', value: 'choroplethMap' }
+        ];
         this.regionData = ["country", "city"];
         this.colors = [];
         this.dataSourseForTable = [];
@@ -4032,6 +4144,30 @@ class GeoMapComponent {
             "backgroundColor": "#6c98e0",
             "colors": ['#003566', '#fd0000']
         };
+        this.choroplethMapConfig = {
+            chart_config: [
+                {
+                    dataField: "cnt",
+                    caption: "Count",
+                    displayFor: "map",
+                    enrichName: ""
+                }
+            ],
+            zoom: "7",
+            centerLat: "1.3733",
+            centerLng: "32.2903",
+            argumentField: "district",
+            gjsonFilePath: "/assets/api-data/uganda_districts.geojson",
+            size: "450",
+            chartType: "choroplethMap",
+            colorOne: '#089274',
+            colorTwo: '#f0f921',
+        };
+        this.isCenterdChoroplethMap = false;
+        this.centarLaitngObject = {
+            latKey: "",
+            lngKey: ""
+        };
         this.enrichNameList = ["abbreviateNumber", "getColorCodeSpan", "ThousandSeparator", "formatBytesv2"];
         this.isLoader = true;
         this.activeTab = 'basic';
@@ -4060,6 +4196,11 @@ class GeoMapComponent {
                     this.bubbleMapConfig.chart_config = value.selectedWidgetConfig.dataConfig.chart_config;
                     this.tableDataConfig.chart_config = value.selectedWidgetConfig.dataConfig.chart_config;
                 }
+                else if (this.mapType == 'choroplethMap') {
+                    this.choroplethMapConfig = value.selectedWidgetConfig.dataConfig;
+                    this.choroplethMapConfig.chart_config = value.selectedWidgetConfig.dataConfig.chart_config;
+                    this.tableDataConfig.chart_config = value.selectedWidgetConfig.dataConfig.chart_config;
+                }
                 else {
                     this.heatMapConfig = value.selectedWidgetConfig.dataConfig;
                     this.heatMapConfig.chart_config = value.selectedWidgetConfig.dataConfig.chart_config;
@@ -4095,6 +4236,8 @@ class GeoMapComponent {
                         let obj = {
                             "dataField": element,
                             "caption": this.commonService.convertString(element),
+                            "enrichName": "",
+                            "displayFor": "map",
                         };
                         this.tableDataConfig.chart_config.push(obj);
                     });
@@ -4124,6 +4267,8 @@ class GeoMapComponent {
         let obj = {
             "dataField": "",
             "caption": "",
+            "enrichName": "",
+            "displayFor": "",
         };
         this.tableDataConfig.chart_config.push(obj);
     }
@@ -4200,6 +4345,17 @@ class GeoMapComponent {
             this.table_columns_config.kpiConfig['dataSource'] = '';
             this.createOtherComponentView.emit(this.table_columns_config);
         }
+        else if (this.mapType == 'choroplethMap') {
+            this.table_columns_config.kpiConfig['dataConfig'] = this.choroplethMapConfig;
+            this.table_columns_config.kpiConfig['dataConfig']['chart_config'] = this.tableDataConfig.chart_config;
+            this.table_columns_config.kpiConfig['dataConfig']['mapType'] = this.mapType;
+            if (this.viewProperties.clickEventOptions.eventType == 'optionalDrillDown') {
+                this.viewProperties['clickEventOptions']['associatedViews'] = this.optionalDrilDownDataSource;
+            }
+            this.table_columns_config.kpiConfig['viewProperties'] = this.viewProperties;
+            this.table_columns_config.kpiConfig['dataSource'] = '';
+            this.createOtherComponentView.emit(this.table_columns_config);
+        }
         else {
             this.table_columns_config.kpiConfig['dataConfig'] = this.heatMapConfig;
             this.table_columns_config.kpiConfig['dataConfig']['chart_config'] = this.tableDataConfig.chart_config;
@@ -4257,6 +4413,11 @@ class GeoMapComponent {
             this.table_columns_config.kpiConfig['dataConfig']['chart_config'] = this.tableDataConfig.chart_config;
             this.table_columns_config.kpiConfig['dataConfig']['mapType'] = this.mapType;
         }
+        else if (this.mapType == 'choroplethMap') {
+            this.table_columns_config.kpiConfig['dataConfig'] = this.choroplethMapConfig;
+            this.table_columns_config.kpiConfig['dataConfig']['chart_config'] = this.tableDataConfig.chart_config;
+            this.table_columns_config.kpiConfig['dataConfig']['mapType'] = this.mapType;
+        }
         else {
             this.table_columns_config.kpiConfig['dataConfig'] = this.heatMapConfig;
             this.table_columns_config.kpiConfig['dataConfig']['chart_config'] = this.tableDataConfig.chart_config;
@@ -4273,15 +4434,50 @@ class GeoMapComponent {
     heatMapCategory(e) {
         this.heatMapConfig.heatMapCategory = e.value;
     }
-    changeMapType($event) {
-        this.heatMapConfig.heatMapCategory = '';
+    changeMapType(event) {
+        if (event.event) {
+            this.heatMapConfig.heatMapCategory = '';
+        }
+    }
+    onLatLngKeyChange(event) {
+        debugger;
+        const { latKey, lngKey } = this.centarLaitngObject;
+        if (!latKey || !lngKey) {
+            return;
+        }
+        this.calculateCenterFromDatasource();
+    }
+    calculateCenterFromDatasource() {
+        const latKey = this.centarLaitngObject.latKey;
+        const lngKey = this.centarLaitngObject.lngKey;
+        if (!latKey || !lngKey || !this.dataSourseForTable?.length) {
+            return;
+        }
+        let minLat = Infinity;
+        let maxLat = -Infinity;
+        let minLng = Infinity;
+        let maxLng = -Infinity;
+        this.dataSourseForTable.forEach(item => {
+            const lat = Number(item[latKey]);
+            const lng = Number(item[lngKey]);
+            if (!isNaN(lat) && !isNaN(lng)) {
+                minLat = Math.min(minLat, lat);
+                maxLat = Math.max(maxLat, lat);
+                minLng = Math.min(minLng, lng);
+                maxLng = Math.max(maxLng, lng);
+            }
+        });
+        const centerLat = (minLat + maxLat) / 2;
+        const centerLng = (minLng + maxLng) / 2;
+        this.choroplethMapConfig['centerLat'] = centerLat.toFixed(6);
+        this.choroplethMapConfig['centerLng'] = centerLng.toFixed(6);
     }
 }
 GeoMapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GeoMapComponent, deps: [{ token: CommonService }, { token: i0.ChangeDetectorRef }, { token: ApplicationContentService }, { token: i4$1.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
-GeoMapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GeoMapComponent, selector: "app-geo-map", inputs: { chartconfigData: ["datasetmodal", "chartconfigData"] }, outputs: { createOtherComponentView: "createOtherComponentView" }, ngImport: i0, template: "<div class=\"flex flex-wrap\">\n    <div class=\"w-full mx-2 border-r\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container  *ngIf=\"isJsonPreview\">\n            <!-- <app-gamma-geo-chart [chartDataSource]=\"chartDataSourceForMap\"></app-gamma-geo-chart> -->\n            <app-google-geo-map [chartDataSource]=\"chartDataSourceForMap\"></app-google-geo-map>\n\n            <div #dynamicContainer></div>\n\n        </ng-container>\n    </div>\n    <div class=\"w-full mx-2\">\n\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 === 'chart_config',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'chart_config' \n                                    }\" (click)=\"setActiveTab('chart_config')\" type=\"button\" role=\"tab\">\n                        Chart 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 my-2\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                        Config\n                    </div>\n                    <div class=\"flex pt-2 border-x border-b\">\n                        <div class=\"px-1 mb-1 w-1/3\">\n                            <div class=\"text-md mb-1\"> Select Map type </div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"chartViewTypeDataSource\"\n                                [(ngModel)]=\"mapType\" (onValueChanged)=\"changeMapType($event)\"></dx-select-box>\n                        </div>\n                      \n                        <ng-container *ngIf=\"mapType == 'heatMap'\">\n                            <div class=\"px-1 mb-1 w-1/3\">\n                              \n                                    <div class=\"text-md mb-1\"> Heat Map Category </div>\n                                    <dx-select-box [searchEnabled]=\"true\" [dataSource]=\"heatMapTypeDatasource\"\n                                    displayExpr=\"name\"\n                                    valueExpr=\"value\" [(ngModel)]=\"heatMapConfig.heatMapCategory\" (onValueChanged)=\"heatMapCategory($event)\"></dx-select-box>\n                            </div>\n                        </ng-container>\n                    </div>\n                    <ng-container *ngIf=\"mapType == 'geoMap'\">\n                        <div class=\"flex pt-2 border-x border-b\">\n                            <div class=\"px-1 mb-1 w-1/3\">\n                                <div class=\"text-md mb-1\"> Region </div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"regionData\"\n                                    [(ngModel)]=\"tableDataConfig.region\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-1/3\" *ngIf=\"tableDataConfig.region == 'city'\">\n                                <div class=\"text-md mb-1\"> Type Region Code</div>\n                                <dx-text-box [(ngModel)]=\"tableDataConfig.regionCode\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex justify-between\">\n                                <!-- <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Title</div>\n                                    <dx-text-box [(ngModel)]=\"tableDataConfig.title\"></dx-text-box>\n                                </div> -->\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Argument Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"tableDataConfig.argumentField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Chartvalu Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"tableDataConfig.chartValueField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> size</div>\n                                    <dx-text-box [(ngModel)]=\"tableDataConfig.size\"></dx-text-box>\n                                </div>\n    \n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Background Color</div>\n                                    <dx-color-box [(ngModel)]=\"tableDataConfig.backgroundColor\"></dx-color-box>\n                                </div>\n                                <!-- <div class=\"px-4 mt-6 w-full\">\n                                    <dx-check-box [value]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                        [(ngModel)]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                        text=\"Search Box\"></dx-check-box>\n    \n                                </div> -->\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Formate </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"table_columns_config.kpiConfig.formate\"\n                                        [readOnly]=\"false\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Key To Pass </div>\n                                    <dx-tag-box [items]=\"configColume\"\n                                        [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\" pt-2 border-x border-b \">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Colors\n                            </div>\n                            <div class=\"flex  flex-wrap px-1 mb-2 mt-2\">\n                                <div class=\"flex mr-2 mb-2\" *ngFor=\"let color of tableDataConfig.colors; let i = index\">\n                                   <div class=\"mr-2\">\n                                    <dx-color-box [(ngModel)]=\"tableDataConfig.colors[i]\"\n                                    (onValueChanged)=\"onColorChange($event.value, i)\"></dx-color-box>\n                                   </div>\n                                   <button class=\"{{commonService.btn_danger_sm}} cursor-pointer px-2\"\n                                   (click)=\"removeColor(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                  </button>\n                                   <!-- <div class=\"px-2\"> <button class=\"{{commonService.btn_danger_sm}}\" (click)=\"removeColor(i)\">Remove</button></div> -->\n                                </div>\n                                \n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\">\n                                <button class=\"{{commonService.btn_success_sm}}\" (click)=\"addColor()\">Add Color</button>\n                            </div>\n                        </div>\n                    </ng-container>\n                 \n                    <ng-container  *ngIf=\"heatMapConfig.heatMapCategory == 'heatMapOnly' || heatMapConfig.heatMapCategory == 'heatMapMarker' || heatMapConfig.heatMapCategory == 'heatMapAndMarker'\" >\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> \n                                Center Location Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <!-- <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Latitude  </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.centerLatitude\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Longitude </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.centerLongitude\"></dx-text-box>\n                                    </div> -->\n                                    <div class=\"px-1 mb-1 w-1/4\" *ngIf=\"heatMapConfig.heatMapCategory != 'heatMapAndMarker'\">\n                                        <div class=\"text-md mb-1\"> Zoom Label  </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.zoom\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Custom Icons </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.icon\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> size</div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.size\"></dx-text-box>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> \n                                 Location Marker  Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Latitude  </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"heatMapConfig.markerLatitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Longitude </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"heatMapConfig.markerLongitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-full\">\n                                        <div class=\"text-md mb-2\"> Display Formate </div>\n                                        <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                            [(ngModel)]=\"table_columns_config.kpiConfig.formate\"\n                                            [readOnly]=\"false\"></dx-select-box>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                     </ng-container>\n                     <ng-container *ngIf=\"mapType == 'bubbleMap'\">\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> \n                               Bubble Map Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Argument Value  </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"bubbleMapConfig.agrumentValue\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Bubble Color </div>\n                                        <dx-color-box [(ngModel)]=\"bubbleMapConfig.bubbleColor\"></dx-color-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\">Bubble Minimum size</div>\n                                        <dx-text-box [(ngModel)]=\"bubbleMapConfig.bubbleMinimumSize\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\">Bubble Maximum size</div>\n                                        <dx-text-box [(ngModel)]=\"bubbleMapConfig.bubbleMaximumSize\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> size</div>\n                                        <dx-text-box [(ngModel)]=\"bubbleMapConfig.size\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Short By</div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"bubbleMapConfig.sortBy\"></dx-select-box>\n                                    </div>\n                                    <!-- <div class=\"px-1 mb-1 w-1/4\" *ngIf=\"heatMapConfig.heatMapCategory != 'heatMapAndMarker'\">\n                                        <div class=\"text-md mb-1\"> Zoom Label  </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.zoom\"></dx-text-box>\n                                    </div> -->\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> \n                                 Location Marker  Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Latitude  </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"bubbleMapConfig.markerLatitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Longitude </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"bubbleMapConfig.markerLongitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-full\">\n                                        <div class=\"text-md mb-2\"> Display Formate </div>\n                                        <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                            [(ngModel)]=\"table_columns_config.kpiConfig.formate\"\n                                            [readOnly]=\"false\"></dx-select-box>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                     </ng-container>\n                     \n                   \n                </div>\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\"> Table Config\n                    </div>\n                    <div class=\"flex flse-row py-3 border-x border-b \">\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <dx-check-box [value]=\"tableDataConfig.searchPanel\"\n                                [(ngModel)]=\"tableDataConfig.searchPanel\" text=\"Search Panel\"></dx-check-box>\n                        </div>\n                        <div class=\" px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\">File Name</div>\n                            <dx-text-box [(ngModel)]=\"tableDataConfig.file_name\"></dx-text-box>\n                        </div>\n                        <div class=\"px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\"> Number Of Row</div>\n                            <dx-number-box [value]=\"tableDataConfig.numberOfRow\"\n                                [(ngModel)]=\"tableDataConfig.numberOfRow\"></dx-number-box>\n                        </div>\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <dx-check-box [value]=\"tableDataConfig.pageInfo\" [(ngModel)]=\"tableDataConfig.pageInfo\"\n                                text=\"Page Info\"></dx-check-box>\n                        </div>\n\n                    </div>\n\n                </div> -->\n\n\n            </div>\n            <div *ngIf=\"activeTab === 'chart_config'\">\n                <div class=\"h-full overflow-x-auto\">\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\"> \n                            Tooltip Columns\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 border-b flex flex-row\"\n                                *ngFor=\"let item of tableDataConfig.chart_config; 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                                <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [value]=\"item.isShowBar\" [(ngModel)]=\"item.isShowBar\"\n                                        text=\"Allow Bar\"></dx-check-box>\n                                </div>\n\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Color</div>\n                                    <dx-color-box [(ngModel)]=\"item.color\"></dx-color-box>\n                                </div> -->\n                                <div class=\"text-center mt-8 w-full\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button *ngIf=\"i !== tableDataConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row justify-end my-2\">\n                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addColumns()\">Add\n                            Columns</button>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"activeTab === 'properties'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <app-loader *ngIf=\"isLoader\"></app-loader>\n                    <ng-container *ngIf=\"!isLoader\">\n                        <div class=\"flex flex-row justify-between border-b py-3\">\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                    text=\"Enable Click Event\"></dx-check-box>\n                            </div>\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                    text=\"Enable Right Click\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                            <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                    Type\n                                    Option\n                                </div>\n                                <div class=\"w-full p-3 border-x border-b \">\n                                    <div class=\"flex flex-row\">\n                                        <div class=\"w-full\">\n                                            <div class=\"text-md mb-2\"> Event Type</div>\n                                        </div>\n                                        <div class=\"w-full\">\n                                            <dx-select-box [items]=\"['drilldown','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 == '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-full\">\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\">\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\n                                </div>\n                            </div>\n\n                        </div>\n                    </ng-container>\n                    <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-2\"\n                        (click)=\"resetViewProprstise()\">Reset All</button>\n                </div>\n            </div>\n\n        </div>\n\n\n    </div>\n</div>\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)=\"viewMapForTest()\">\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>", styles: [""], dependencies: [{ kind: "directive", type: i4$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$2.DxColorBoxComponent, selector: "dx-color-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyButtonText", "applyValueMode", "buttons", "cancelButtonText", "deferRendering", "disabled", "dropDownButtonTemplate", "dropDownOptions", "editAlphaChannel", "elementAttr", "fieldTemplate", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "keyStep", "label", "labelMode", "name", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showDropDownButton", "stylingMode", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onChange", "onClosed", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "cancelButtonTextChange", "deferRenderingChange", "disabledChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "editAlphaChannelChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "keyStepChange", "labelChange", "labelModeChange", "nameChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showDropDownButtonChange", "stylingModeChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: 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: "component", type: GoogleGeoMapComponent, selector: "app-google-geo-map", inputs: ["rightClickEnable", "chartDataSource"], outputs: ["getTableConfigOutPut", "oRowClick", "onrightClickContextSelection"] }, { kind: "pipe", type: i4$2.JsonPipe, name: "json" }] });
+GeoMapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GeoMapComponent, selector: "app-geo-map", inputs: { chartconfigData: ["datasetmodal", "chartconfigData"] }, outputs: { createOtherComponentView: "createOtherComponentView" }, ngImport: i0, template: "<div class=\"flex flex-wrap\">\n    <div class=\"w-full mx-2 border-r\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n            <!-- <app-gamma-geo-chart [chartDataSource]=\"chartDataSourceForMap\"></app-gamma-geo-chart> -->\n            <app-google-geo-map [chartDataSource]=\"chartDataSourceForMap\"></app-google-geo-map>\n\n            <div #dynamicContainer></div>\n\n        </ng-container>\n    </div>\n    <div class=\"w-full mx-2\">\n\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 === 'chart_config',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'chart_config' \n                                    }\" (click)=\"setActiveTab('chart_config')\" type=\"button\" role=\"tab\">\n                        Chart 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 my-2\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                        Config\n                    </div>\n                    <div class=\"flex pt-2 border-x border-b\">\n                        <div class=\"px-1 mb-1 w-1/3\">\n                            <div class=\"text-md mb-1\"> Map Library </div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['Google Maps']\"></dx-select-box>\n                        </div>\n                        <div class=\"px-1 mb-1 w-1/3\">\n                            <div class=\"text-md mb-1\"> Select Map type </div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"chartViewTypeDataSource\" displayExpr=\"name\"\n                                valueExpr=\"value\" [(ngModel)]=\"mapType\"\n                                (onValueChanged)=\"changeMapType($event)\"></dx-select-box>\n                        </div>\n\n                        <ng-container *ngIf=\"mapType == 'heatMap'\">\n                            <div class=\"px-1 mb-1 w-1/3\">\n\n                                <div class=\"text-md mb-1\"> Heat Map Category </div>\n                                <dx-select-box [searchEnabled]=\"true\" [dataSource]=\"heatMapTypeDatasource\"\n                                    displayExpr=\"name\" valueExpr=\"value\" [(ngModel)]=\"heatMapConfig.heatMapCategory\"\n                                    (onValueChanged)=\"heatMapCategory($event)\"></dx-select-box>\n                            </div>\n                        </ng-container>\n                    </div>\n                    <ng-container *ngIf=\"mapType == 'geoMap'\">\n                        <div class=\"flex pt-2 border-x border-b\">\n                            <div class=\"px-1 mb-1 w-1/3\">\n                                <div class=\"text-md mb-1\"> Region </div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"regionData\"\n                                    [(ngModel)]=\"tableDataConfig.region\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-1/3\" *ngIf=\"tableDataConfig.region == 'city'\">\n                                <div class=\"text-md mb-1\"> Type Region Code</div>\n                                <dx-text-box [(ngModel)]=\"tableDataConfig.regionCode\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex justify-between\">\n                                <!-- <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Title</div>\n                                    <dx-text-box [(ngModel)]=\"tableDataConfig.title\"></dx-text-box>\n                                </div> -->\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Argument Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"tableDataConfig.argumentField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Chartvalu Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"tableDataConfig.chartValueField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> size</div>\n                                    <dx-text-box [(ngModel)]=\"tableDataConfig.size\"></dx-text-box>\n                                </div>\n\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Background Color</div>\n                                    <dx-color-box [(ngModel)]=\"tableDataConfig.backgroundColor\"></dx-color-box>\n                                </div>\n                                <!-- <div class=\"px-4 mt-6 w-full\">\n                                    <dx-check-box [value]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                        [(ngModel)]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                        text=\"Search Box\"></dx-check-box>\n    \n                                </div> -->\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Formate </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"table_columns_config.kpiConfig.formate\"\n                                        [readOnly]=\"false\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Key To Pass </div>\n                                    <dx-tag-box [items]=\"configColume\"\n                                        [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\" pt-2 border-x border-b \">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Colors\n                            </div>\n                            <div class=\"flex  flex-wrap px-1 mb-2 mt-2\">\n                                <div class=\"flex mr-2 mb-2\" *ngFor=\"let color of tableDataConfig.colors; let i = index\">\n                                    <div class=\"mr-2\">\n                                        <dx-color-box [(ngModel)]=\"tableDataConfig.colors[i]\"\n                                            (onValueChanged)=\"onColorChange($event.value, i)\"></dx-color-box>\n                                    </div>\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer px-2\"\n                                        (click)=\"removeColor(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <!-- <div class=\"px-2\"> <button class=\"{{commonService.btn_danger_sm}}\" (click)=\"removeColor(i)\">Remove</button></div> -->\n                                </div>\n\n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\">\n                                <button class=\"{{commonService.btn_success_sm}}\" (click)=\"addColor()\">Add Color</button>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"mapType == 'choroplethMap'\">\n                        <div class=\"flex flex-row pt-2 border-x border-b\">\n                            <div class=\"px-1 mb-1 w-1/3\">\n                                <div class=\"text-md mb-1\"> Map Zoom </div>\n                                <dx-text-box [(ngModel)]=\"choroplethMapConfig.zoom\"></dx-text-box>\n                            </div>\n                            <div class=\"px-1 mb-2 mt-6 w-full\">\n                                <dx-check-box [(ngModel)]=\"isCenterdChoroplethMap\"\n                                    text=\"Centerd Position\"></dx-check-box>\n                            </div>\n\n                            <ng-container *ngIf=\"isCenterdChoroplethMap\">\n                                <div class=\"px-1 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Select Latitude Key</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"centarLaitngObject.latKey\" (onValueChanged)=\"onLatLngKeyChange($event)\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Select Longitude Key</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"centarLaitngObject.lngKey\" (onValueChanged)=\"onLatLngKeyChange($event)\"></dx-select-box>\n                                </div>\n\n                            </ng-container>\n\n                            <div class=\"px-1 mb-1 w-1/3\">\n                                <div class=\"text-md mb-1\"> Map Center Latitude</div>\n                                <dx-text-box [(ngModel)]=\"choroplethMapConfig.centerLat\"\n                                    [readOnly]=\"isCenterdChoroplethMap\"></dx-text-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-1/3\">\n                                <div class=\"text-md mb-1\"> Map Center Longitude</div>\n                                <dx-text-box [(ngModel)]=\"choroplethMapConfig.centerLng\"\n                                    [readOnly]=\"isCenterdChoroplethMap\"></dx-text-box>\n                            </div>\n\n\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex flex-row justify-between\">\n\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Argument Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"choroplethMapConfig.argumentField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> size</div>\n                                    <dx-text-box [(ngModel)]=\"choroplethMapConfig.size\"></dx-text-box>\n                                </div>\n\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Color One</div>\n                                    <dx-color-box [(ngModel)]=\"choroplethMapConfig.colorOne\"></dx-color-box>\n                                </div>\n\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Color Two</div>\n                                    <dx-color-box [(ngModel)]=\"choroplethMapConfig.colorTwo\"></dx-color-box>\n                                </div>\n\n\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Formate </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"table_columns_config.kpiConfig.formate\"\n                                        [readOnly]=\"false\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Key To Pass </div>\n                                    <dx-tag-box [items]=\"configColume\"\n                                        [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n                            </div>\n                            <div class=\"my-2 flex-row justify-between\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Gjson File Path</div>\n                                    <dx-text-box [(ngModel)]=\"choroplethMapConfig.gjsonFilePath\"></dx-text-box>\n                                </div>\n                            </div>\n                        </div>\n\n                    </ng-container>\n\n                    <ng-container\n                        *ngIf=\"heatMapConfig.heatMapCategory == 'heatMapOnly' || heatMapConfig.heatMapCategory == 'heatMapMarker' || heatMapConfig.heatMapCategory == 'heatMapAndMarker'\">\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\">\n                                Center Location Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <!-- <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Latitude  </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.centerLatitude\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Longitude </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.centerLongitude\"></dx-text-box>\n                                    </div> -->\n                                    <div class=\"px-1 mb-1 w-1/4\"\n                                        *ngIf=\"heatMapConfig.heatMapCategory != 'heatMapAndMarker'\">\n                                        <div class=\"text-md mb-1\"> Zoom Label </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.zoom\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Custom Icons </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.icon\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> size</div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.size\"></dx-text-box>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\">\n                                Location Marker Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Latitude </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                            [(ngModel)]=\"heatMapConfig.markerLatitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Longitude </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                            [(ngModel)]=\"heatMapConfig.markerLongitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-full\">\n                                        <div class=\"text-md mb-2\"> Display Formate </div>\n                                        <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                            [(ngModel)]=\"table_columns_config.kpiConfig.formate\"\n                                            [readOnly]=\"false\"></dx-select-box>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"mapType == 'bubbleMap'\">\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\">\n                                Bubble Map Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Argument Value </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                            [(ngModel)]=\"bubbleMapConfig.agrumentValue\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Bubble Color </div>\n                                        <dx-color-box [(ngModel)]=\"bubbleMapConfig.bubbleColor\"></dx-color-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\">Bubble Minimum size</div>\n                                        <dx-text-box [(ngModel)]=\"bubbleMapConfig.bubbleMinimumSize\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\">Bubble Maximum size</div>\n                                        <dx-text-box [(ngModel)]=\"bubbleMapConfig.bubbleMaximumSize\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> size</div>\n                                        <dx-text-box [(ngModel)]=\"bubbleMapConfig.size\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Short By</div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                            [(ngModel)]=\"bubbleMapConfig.sortBy\"></dx-select-box>\n                                    </div>\n                                    <!-- <div class=\"px-1 mb-1 w-1/4\" *ngIf=\"heatMapConfig.heatMapCategory != 'heatMapAndMarker'\">\n                                        <div class=\"text-md mb-1\"> Zoom Label  </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.zoom\"></dx-text-box>\n                                    </div> -->\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\">\n                                Location Marker Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Latitude </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                            [(ngModel)]=\"bubbleMapConfig.markerLatitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Longitude </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                            [(ngModel)]=\"bubbleMapConfig.markerLongitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-full\">\n                                        <div class=\"text-md mb-2\"> Display Formate </div>\n                                        <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                            [(ngModel)]=\"table_columns_config.kpiConfig.formate\"\n                                            [readOnly]=\"false\"></dx-select-box>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n\n\n                </div>\n\n\n\n            </div>\n            <div *ngIf=\"activeTab === 'chart_config'\">\n                <div class=\"h-full overflow-x-auto\">\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\">\n                            Tooltip Columns\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 border-b flex flex-row\"\n                                *ngFor=\"let item of tableDataConfig.chart_config; 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\n\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Display For</div>\n                                    <dx-select-box [items]=\"['map', 'tooltip']\"\n                                        [(ngModel)]=\"item.displayFor\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> UI Function</div>\n                                    <dx-select-box [items]=\"enrichNameList\" [(ngModel)]=\"item.enrichName\"\n                                        [searchEnabled]=\"true\"></dx-select-box>\n                                </div>\n\n                                <div class=\"text-center mt-8 w-full\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button *ngIf=\"i !== tableDataConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row justify-end my-2\">\n                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addColumns()\">Add\n                            Columns</button>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"activeTab === 'properties'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <app-loader *ngIf=\"isLoader\"></app-loader>\n                    <ng-container *ngIf=\"!isLoader\">\n                        <div class=\"flex flex-row justify-between border-b py-3\">\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                    text=\"Enable Click Event\"></dx-check-box>\n                            </div>\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                    text=\"Enable Right Click\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                            <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                    Type\n                                    Option\n                                </div>\n                                <div class=\"w-full p-3 border-x border-b \">\n                                    <div class=\"flex flex-row\">\n                                        <div class=\"w-full\">\n                                            <div class=\"text-md mb-2\"> Event Type</div>\n                                        </div>\n                                        <div class=\"w-full\">\n                                            <dx-select-box [items]=\"['drilldown','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 == '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-full\">\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\">\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\n                                </div>\n                            </div>\n\n                        </div>\n                    </ng-container>\n                    <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-2\"\n                        (click)=\"resetViewProprstise()\">Reset All</button>\n                </div>\n            </div>\n\n        </div>\n\n\n    </div>\n</div>\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)=\"viewMapForTest()\">\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>", styles: [""], dependencies: [{ kind: "directive", type: i4$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$2.DxColorBoxComponent, selector: "dx-color-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyButtonText", "applyValueMode", "buttons", "cancelButtonText", "deferRendering", "disabled", "dropDownButtonTemplate", "dropDownOptions", "editAlphaChannel", "elementAttr", "fieldTemplate", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "keyStep", "label", "labelMode", "name", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showDropDownButton", "stylingMode", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onChange", "onClosed", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "cancelButtonTextChange", "deferRenderingChange", "disabledChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "editAlphaChannelChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "keyStepChange", "labelChange", "labelModeChange", "nameChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showDropDownButtonChange", "stylingModeChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: 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: "component", type: GoogleGeoMapComponent, selector: "app-google-geo-map", inputs: ["rightClickEnable", "chartDataSource"], outputs: ["getTableConfigOutPut", "oRowClick", "onrightClickContextSelection"] }, { kind: "pipe", type: i4$2.JsonPipe, name: "json" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GeoMapComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-geo-map', template: "<div class=\"flex flex-wrap\">\n    <div class=\"w-full mx-2 border-r\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container  *ngIf=\"isJsonPreview\">\n            <!-- <app-gamma-geo-chart [chartDataSource]=\"chartDataSourceForMap\"></app-gamma-geo-chart> -->\n            <app-google-geo-map [chartDataSource]=\"chartDataSourceForMap\"></app-google-geo-map>\n\n            <div #dynamicContainer></div>\n\n        </ng-container>\n    </div>\n    <div class=\"w-full mx-2\">\n\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 === 'chart_config',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'chart_config' \n                                    }\" (click)=\"setActiveTab('chart_config')\" type=\"button\" role=\"tab\">\n                        Chart 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 my-2\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                        Config\n                    </div>\n                    <div class=\"flex pt-2 border-x border-b\">\n                        <div class=\"px-1 mb-1 w-1/3\">\n                            <div class=\"text-md mb-1\"> Select Map type </div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"chartViewTypeDataSource\"\n                                [(ngModel)]=\"mapType\" (onValueChanged)=\"changeMapType($event)\"></dx-select-box>\n                        </div>\n                      \n                        <ng-container *ngIf=\"mapType == 'heatMap'\">\n                            <div class=\"px-1 mb-1 w-1/3\">\n                              \n                                    <div class=\"text-md mb-1\"> Heat Map Category </div>\n                                    <dx-select-box [searchEnabled]=\"true\" [dataSource]=\"heatMapTypeDatasource\"\n                                    displayExpr=\"name\"\n                                    valueExpr=\"value\" [(ngModel)]=\"heatMapConfig.heatMapCategory\" (onValueChanged)=\"heatMapCategory($event)\"></dx-select-box>\n                            </div>\n                        </ng-container>\n                    </div>\n                    <ng-container *ngIf=\"mapType == 'geoMap'\">\n                        <div class=\"flex pt-2 border-x border-b\">\n                            <div class=\"px-1 mb-1 w-1/3\">\n                                <div class=\"text-md mb-1\"> Region </div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"regionData\"\n                                    [(ngModel)]=\"tableDataConfig.region\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-1/3\" *ngIf=\"tableDataConfig.region == 'city'\">\n                                <div class=\"text-md mb-1\"> Type Region Code</div>\n                                <dx-text-box [(ngModel)]=\"tableDataConfig.regionCode\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex justify-between\">\n                                <!-- <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Title</div>\n                                    <dx-text-box [(ngModel)]=\"tableDataConfig.title\"></dx-text-box>\n                                </div> -->\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Argument Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"tableDataConfig.argumentField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Chartvalu Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"tableDataConfig.chartValueField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> size</div>\n                                    <dx-text-box [(ngModel)]=\"tableDataConfig.size\"></dx-text-box>\n                                </div>\n    \n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Background Color</div>\n                                    <dx-color-box [(ngModel)]=\"tableDataConfig.backgroundColor\"></dx-color-box>\n                                </div>\n                                <!-- <div class=\"px-4 mt-6 w-full\">\n                                    <dx-check-box [value]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                        [(ngModel)]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                        text=\"Search Box\"></dx-check-box>\n    \n                                </div> -->\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Formate </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"table_columns_config.kpiConfig.formate\"\n                                        [readOnly]=\"false\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Key To Pass </div>\n                                    <dx-tag-box [items]=\"configColume\"\n                                        [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\" pt-2 border-x border-b \">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Colors\n                            </div>\n                            <div class=\"flex  flex-wrap px-1 mb-2 mt-2\">\n                                <div class=\"flex mr-2 mb-2\" *ngFor=\"let color of tableDataConfig.colors; let i = index\">\n                                   <div class=\"mr-2\">\n                                    <dx-color-box [(ngModel)]=\"tableDataConfig.colors[i]\"\n                                    (onValueChanged)=\"onColorChange($event.value, i)\"></dx-color-box>\n                                   </div>\n                                   <button class=\"{{commonService.btn_danger_sm}} cursor-pointer px-2\"\n                                   (click)=\"removeColor(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                  </button>\n                                   <!-- <div class=\"px-2\"> <button class=\"{{commonService.btn_danger_sm}}\" (click)=\"removeColor(i)\">Remove</button></div> -->\n                                </div>\n                                \n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\">\n                                <button class=\"{{commonService.btn_success_sm}}\" (click)=\"addColor()\">Add Color</button>\n                            </div>\n                        </div>\n                    </ng-container>\n                 \n                    <ng-container  *ngIf=\"heatMapConfig.heatMapCategory == 'heatMapOnly' || heatMapConfig.heatMapCategory == 'heatMapMarker' || heatMapConfig.heatMapCategory == 'heatMapAndMarker'\" >\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> \n                                Center Location Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <!-- <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Latitude  </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.centerLatitude\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Longitude </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.centerLongitude\"></dx-text-box>\n                                    </div> -->\n                                    <div class=\"px-1 mb-1 w-1/4\" *ngIf=\"heatMapConfig.heatMapCategory != 'heatMapAndMarker'\">\n                                        <div class=\"text-md mb-1\"> Zoom Label  </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.zoom\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Custom Icons </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.icon\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> size</div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.size\"></dx-text-box>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> \n                                 Location Marker  Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Latitude  </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"heatMapConfig.markerLatitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Longitude </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"heatMapConfig.markerLongitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-full\">\n                                        <div class=\"text-md mb-2\"> Display Formate </div>\n                                        <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                            [(ngModel)]=\"table_columns_config.kpiConfig.formate\"\n                                            [readOnly]=\"false\"></dx-select-box>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                     </ng-container>\n                     <ng-container *ngIf=\"mapType == 'bubbleMap'\">\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> \n                               Bubble Map Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Argument Value  </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"bubbleMapConfig.agrumentValue\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Bubble Color </div>\n                                        <dx-color-box [(ngModel)]=\"bubbleMapConfig.bubbleColor\"></dx-color-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\">Bubble Minimum size</div>\n                                        <dx-text-box [(ngModel)]=\"bubbleMapConfig.bubbleMinimumSize\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\">Bubble Maximum size</div>\n                                        <dx-text-box [(ngModel)]=\"bubbleMapConfig.bubbleMaximumSize\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> size</div>\n                                        <dx-text-box [(ngModel)]=\"bubbleMapConfig.size\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Short By</div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"bubbleMapConfig.sortBy\"></dx-select-box>\n                                    </div>\n                                    <!-- <div class=\"px-1 mb-1 w-1/4\" *ngIf=\"heatMapConfig.heatMapCategory != 'heatMapAndMarker'\">\n                                        <div class=\"text-md mb-1\"> Zoom Label  </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.zoom\"></dx-text-box>\n                                    </div> -->\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> \n                                 Location Marker  Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Latitude  </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"bubbleMapConfig.markerLatitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Longitude </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"bubbleMapConfig.markerLongitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-full\">\n                                        <div class=\"text-md mb-2\"> Display Formate </div>\n                                        <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                            [(ngModel)]=\"table_columns_config.kpiConfig.formate\"\n                                            [readOnly]=\"false\"></dx-select-box>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                     </ng-container>\n                     \n                   \n                </div>\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\"> Table Config\n                    </div>\n                    <div class=\"flex flse-row py-3 border-x border-b \">\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <dx-check-box [value]=\"tableDataConfig.searchPanel\"\n                                [(ngModel)]=\"tableDataConfig.searchPanel\" text=\"Search Panel\"></dx-check-box>\n                        </div>\n                        <div class=\" px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\">File Name</div>\n                            <dx-text-box [(ngModel)]=\"tableDataConfig.file_name\"></dx-text-box>\n                        </div>\n                        <div class=\"px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\"> Number Of Row</div>\n                            <dx-number-box [value]=\"tableDataConfig.numberOfRow\"\n                                [(ngModel)]=\"tableDataConfig.numberOfRow\"></dx-number-box>\n                        </div>\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <dx-check-box [value]=\"tableDataConfig.pageInfo\" [(ngModel)]=\"tableDataConfig.pageInfo\"\n                                text=\"Page Info\"></dx-check-box>\n                        </div>\n\n                    </div>\n\n                </div> -->\n\n\n            </div>\n            <div *ngIf=\"activeTab === 'chart_config'\">\n                <div class=\"h-full overflow-x-auto\">\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\"> \n                            Tooltip Columns\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 border-b flex flex-row\"\n                                *ngFor=\"let item of tableDataConfig.chart_config; 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                                <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [value]=\"item.isShowBar\" [(ngModel)]=\"item.isShowBar\"\n                                        text=\"Allow Bar\"></dx-check-box>\n                                </div>\n\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Color</div>\n                                    <dx-color-box [(ngModel)]=\"item.color\"></dx-color-box>\n                                </div> -->\n                                <div class=\"text-center mt-8 w-full\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button *ngIf=\"i !== tableDataConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row justify-end my-2\">\n                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addColumns()\">Add\n                            Columns</button>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"activeTab === 'properties'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <app-loader *ngIf=\"isLoader\"></app-loader>\n                    <ng-container *ngIf=\"!isLoader\">\n                        <div class=\"flex flex-row justify-between border-b py-3\">\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                    text=\"Enable Click Event\"></dx-check-box>\n                            </div>\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                    text=\"Enable Right Click\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                            <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                    Type\n                                    Option\n                                </div>\n                                <div class=\"w-full p-3 border-x border-b \">\n                                    <div class=\"flex flex-row\">\n                                        <div class=\"w-full\">\n                                            <div class=\"text-md mb-2\"> Event Type</div>\n                                        </div>\n                                        <div class=\"w-full\">\n                                            <dx-select-box [items]=\"['drilldown','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 == '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-full\">\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\">\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\n                                </div>\n                            </div>\n\n                        </div>\n                    </ng-container>\n                    <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-2\"\n                        (click)=\"resetViewProprstise()\">Reset All</button>\n                </div>\n            </div>\n\n        </div>\n\n\n    </div>\n</div>\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)=\"viewMapForTest()\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveChartConfig()\">Submit</button>\n    </div>\n</div>" }]
+            args: [{ selector: 'app-geo-map', template: "<div class=\"flex flex-wrap\">\n    <div class=\"w-full mx-2 border-r\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n            <!-- <app-gamma-geo-chart [chartDataSource]=\"chartDataSourceForMap\"></app-gamma-geo-chart> -->\n            <app-google-geo-map [chartDataSource]=\"chartDataSourceForMap\"></app-google-geo-map>\n\n            <div #dynamicContainer></div>\n\n        </ng-container>\n    </div>\n    <div class=\"w-full mx-2\">\n\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 === 'chart_config',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'chart_config' \n                                    }\" (click)=\"setActiveTab('chart_config')\" type=\"button\" role=\"tab\">\n                        Chart 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 my-2\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                        Config\n                    </div>\n                    <div class=\"flex pt-2 border-x border-b\">\n                        <div class=\"px-1 mb-1 w-1/3\">\n                            <div class=\"text-md mb-1\"> Map Library </div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['Google Maps']\"></dx-select-box>\n                        </div>\n                        <div class=\"px-1 mb-1 w-1/3\">\n                            <div class=\"text-md mb-1\"> Select Map type </div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"chartViewTypeDataSource\" displayExpr=\"name\"\n                                valueExpr=\"value\" [(ngModel)]=\"mapType\"\n                                (onValueChanged)=\"changeMapType($event)\"></dx-select-box>\n                        </div>\n\n                        <ng-container *ngIf=\"mapType == 'heatMap'\">\n                            <div class=\"px-1 mb-1 w-1/3\">\n\n                                <div class=\"text-md mb-1\"> Heat Map Category </div>\n                                <dx-select-box [searchEnabled]=\"true\" [dataSource]=\"heatMapTypeDatasource\"\n                                    displayExpr=\"name\" valueExpr=\"value\" [(ngModel)]=\"heatMapConfig.heatMapCategory\"\n                                    (onValueChanged)=\"heatMapCategory($event)\"></dx-select-box>\n                            </div>\n                        </ng-container>\n                    </div>\n                    <ng-container *ngIf=\"mapType == 'geoMap'\">\n                        <div class=\"flex pt-2 border-x border-b\">\n                            <div class=\"px-1 mb-1 w-1/3\">\n                                <div class=\"text-md mb-1\"> Region </div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"regionData\"\n                                    [(ngModel)]=\"tableDataConfig.region\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-1/3\" *ngIf=\"tableDataConfig.region == 'city'\">\n                                <div class=\"text-md mb-1\"> Type Region Code</div>\n                                <dx-text-box [(ngModel)]=\"tableDataConfig.regionCode\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex justify-between\">\n                                <!-- <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Title</div>\n                                    <dx-text-box [(ngModel)]=\"tableDataConfig.title\"></dx-text-box>\n                                </div> -->\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Argument Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"tableDataConfig.argumentField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Chartvalu Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"tableDataConfig.chartValueField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> size</div>\n                                    <dx-text-box [(ngModel)]=\"tableDataConfig.size\"></dx-text-box>\n                                </div>\n\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Background Color</div>\n                                    <dx-color-box [(ngModel)]=\"tableDataConfig.backgroundColor\"></dx-color-box>\n                                </div>\n                                <!-- <div class=\"px-4 mt-6 w-full\">\n                                    <dx-check-box [value]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                        [(ngModel)]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                        text=\"Search Box\"></dx-check-box>\n    \n                                </div> -->\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Formate </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"table_columns_config.kpiConfig.formate\"\n                                        [readOnly]=\"false\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Key To Pass </div>\n                                    <dx-tag-box [items]=\"configColume\"\n                                        [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\" pt-2 border-x border-b \">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Colors\n                            </div>\n                            <div class=\"flex  flex-wrap px-1 mb-2 mt-2\">\n                                <div class=\"flex mr-2 mb-2\" *ngFor=\"let color of tableDataConfig.colors; let i = index\">\n                                    <div class=\"mr-2\">\n                                        <dx-color-box [(ngModel)]=\"tableDataConfig.colors[i]\"\n                                            (onValueChanged)=\"onColorChange($event.value, i)\"></dx-color-box>\n                                    </div>\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer px-2\"\n                                        (click)=\"removeColor(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <!-- <div class=\"px-2\"> <button class=\"{{commonService.btn_danger_sm}}\" (click)=\"removeColor(i)\">Remove</button></div> -->\n                                </div>\n\n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\">\n                                <button class=\"{{commonService.btn_success_sm}}\" (click)=\"addColor()\">Add Color</button>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"mapType == 'choroplethMap'\">\n                        <div class=\"flex flex-row pt-2 border-x border-b\">\n                            <div class=\"px-1 mb-1 w-1/3\">\n                                <div class=\"text-md mb-1\"> Map Zoom </div>\n                                <dx-text-box [(ngModel)]=\"choroplethMapConfig.zoom\"></dx-text-box>\n                            </div>\n                            <div class=\"px-1 mb-2 mt-6 w-full\">\n                                <dx-check-box [(ngModel)]=\"isCenterdChoroplethMap\"\n                                    text=\"Centerd Position\"></dx-check-box>\n                            </div>\n\n                            <ng-container *ngIf=\"isCenterdChoroplethMap\">\n                                <div class=\"px-1 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Select Latitude Key</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"centarLaitngObject.latKey\" (onValueChanged)=\"onLatLngKeyChange($event)\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Select Longitude Key</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"centarLaitngObject.lngKey\" (onValueChanged)=\"onLatLngKeyChange($event)\"></dx-select-box>\n                                </div>\n\n                            </ng-container>\n\n                            <div class=\"px-1 mb-1 w-1/3\">\n                                <div class=\"text-md mb-1\"> Map Center Latitude</div>\n                                <dx-text-box [(ngModel)]=\"choroplethMapConfig.centerLat\"\n                                    [readOnly]=\"isCenterdChoroplethMap\"></dx-text-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-1/3\">\n                                <div class=\"text-md mb-1\"> Map Center Longitude</div>\n                                <dx-text-box [(ngModel)]=\"choroplethMapConfig.centerLng\"\n                                    [readOnly]=\"isCenterdChoroplethMap\"></dx-text-box>\n                            </div>\n\n\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex flex-row justify-between\">\n\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Argument Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"choroplethMapConfig.argumentField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> size</div>\n                                    <dx-text-box [(ngModel)]=\"choroplethMapConfig.size\"></dx-text-box>\n                                </div>\n\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Color One</div>\n                                    <dx-color-box [(ngModel)]=\"choroplethMapConfig.colorOne\"></dx-color-box>\n                                </div>\n\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Color Two</div>\n                                    <dx-color-box [(ngModel)]=\"choroplethMapConfig.colorTwo\"></dx-color-box>\n                                </div>\n\n\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Formate </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"table_columns_config.kpiConfig.formate\"\n                                        [readOnly]=\"false\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Key To Pass </div>\n                                    <dx-tag-box [items]=\"configColume\"\n                                        [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n                            </div>\n                            <div class=\"my-2 flex-row justify-between\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Gjson File Path</div>\n                                    <dx-text-box [(ngModel)]=\"choroplethMapConfig.gjsonFilePath\"></dx-text-box>\n                                </div>\n                            </div>\n                        </div>\n\n                    </ng-container>\n\n                    <ng-container\n                        *ngIf=\"heatMapConfig.heatMapCategory == 'heatMapOnly' || heatMapConfig.heatMapCategory == 'heatMapMarker' || heatMapConfig.heatMapCategory == 'heatMapAndMarker'\">\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\">\n                                Center Location Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <!-- <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Latitude  </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.centerLatitude\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Longitude </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.centerLongitude\"></dx-text-box>\n                                    </div> -->\n                                    <div class=\"px-1 mb-1 w-1/4\"\n                                        *ngIf=\"heatMapConfig.heatMapCategory != 'heatMapAndMarker'\">\n                                        <div class=\"text-md mb-1\"> Zoom Label </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.zoom\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Custom Icons </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.icon\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> size</div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.size\"></dx-text-box>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\">\n                                Location Marker Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Latitude </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                            [(ngModel)]=\"heatMapConfig.markerLatitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Longitude </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                            [(ngModel)]=\"heatMapConfig.markerLongitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-full\">\n                                        <div class=\"text-md mb-2\"> Display Formate </div>\n                                        <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                            [(ngModel)]=\"table_columns_config.kpiConfig.formate\"\n                                            [readOnly]=\"false\"></dx-select-box>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"mapType == 'bubbleMap'\">\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\">\n                                Bubble Map Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Argument Value </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                            [(ngModel)]=\"bubbleMapConfig.agrumentValue\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Bubble Color </div>\n                                        <dx-color-box [(ngModel)]=\"bubbleMapConfig.bubbleColor\"></dx-color-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\">Bubble Minimum size</div>\n                                        <dx-text-box [(ngModel)]=\"bubbleMapConfig.bubbleMinimumSize\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\">Bubble Maximum size</div>\n                                        <dx-text-box [(ngModel)]=\"bubbleMapConfig.bubbleMaximumSize\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> size</div>\n                                        <dx-text-box [(ngModel)]=\"bubbleMapConfig.size\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Short By</div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                            [(ngModel)]=\"bubbleMapConfig.sortBy\"></dx-select-box>\n                                    </div>\n                                    <!-- <div class=\"px-1 mb-1 w-1/4\" *ngIf=\"heatMapConfig.heatMapCategory != 'heatMapAndMarker'\">\n                                        <div class=\"text-md mb-1\"> Zoom Label  </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.zoom\"></dx-text-box>\n                                    </div> -->\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\">\n                                Location Marker Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Latitude </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                            [(ngModel)]=\"bubbleMapConfig.markerLatitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Longitude </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                            [(ngModel)]=\"bubbleMapConfig.markerLongitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-full\">\n                                        <div class=\"text-md mb-2\"> Display Formate </div>\n                                        <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                            [(ngModel)]=\"table_columns_config.kpiConfig.formate\"\n                                            [readOnly]=\"false\"></dx-select-box>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n\n\n                </div>\n\n\n\n            </div>\n            <div *ngIf=\"activeTab === 'chart_config'\">\n                <div class=\"h-full overflow-x-auto\">\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\">\n                            Tooltip Columns\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 border-b flex flex-row\"\n                                *ngFor=\"let item of tableDataConfig.chart_config; 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\n\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Display For</div>\n                                    <dx-select-box [items]=\"['map', 'tooltip']\"\n                                        [(ngModel)]=\"item.displayFor\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> UI Function</div>\n                                    <dx-select-box [items]=\"enrichNameList\" [(ngModel)]=\"item.enrichName\"\n                                        [searchEnabled]=\"true\"></dx-select-box>\n                                </div>\n\n                                <div class=\"text-center mt-8 w-full\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button *ngIf=\"i !== tableDataConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row justify-end my-2\">\n                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addColumns()\">Add\n                            Columns</button>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"activeTab === 'properties'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <app-loader *ngIf=\"isLoader\"></app-loader>\n                    <ng-container *ngIf=\"!isLoader\">\n                        <div class=\"flex flex-row justify-between border-b py-3\">\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                    text=\"Enable Click Event\"></dx-check-box>\n                            </div>\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                    text=\"Enable Right Click\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                            <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                    Type\n                                    Option\n                                </div>\n                                <div class=\"w-full p-3 border-x border-b \">\n                                    <div class=\"flex flex-row\">\n                                        <div class=\"w-full\">\n                                            <div class=\"text-md mb-2\"> Event Type</div>\n                                        </div>\n                                        <div class=\"w-full\">\n                                            <dx-select-box [items]=\"['drilldown','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 == '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-full\">\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\">\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\n                                </div>\n                            </div>\n\n                        </div>\n                    </ng-container>\n                    <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-2\"\n                        (click)=\"resetViewProprstise()\">Reset All</button>\n                </div>\n            </div>\n\n        </div>\n\n\n    </div>\n</div>\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)=\"viewMapForTest()\">\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: CommonService }, { type: i0.ChangeDetectorRef }, { type: ApplicationContentService }, { type: i4$1.ToastrService }]; }, propDecorators: { createOtherComponentView: [{
                 type: Output
             }], chartconfigData: [{
@@ -6613,7 +6809,11 @@ class CreateCompViewComponent {
             { "compName": "GammaTodayPreviousComponent", "item": "Today vs Previous Day " },
             { "compName": "GammaTableWithPercentageComponent", "item": "Table View with percentage" },
             { "compName": "GammSingleNumberCardComponent", "item": "Single Number Card" },
-            { "compName": "GammaGeoChartComponent", "item": "Geo Chart" }
+        ];
+        this.componentNamesForGoogleMap = [
+            { "compName": "GammaGeoChartComponent", "item": "Geo Chart" },
+            { "compName": "GammaHeatChartComponent", "item": "Heat Map" },
+            { "compName": "GammaChoroplethMapComponent", "item": "Choroplet Map" }
         ];
         this.defaultStartDate = moment$1().subtract('7', 'days').format('YYYY-MM-DD');
         this.defaultEndDate = moment$1().subtract('1', 'days').format('YYYY-MM-DD');
@@ -7183,10 +7383,10 @@ class CreateCompViewComponent {
     }
 }
 CreateCompViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CreateCompViewComponent, deps: [{ token: i4$1.ToastrService }, { token: CommonService }, { token: ApplicationContentService }, { token: kpicommonService$2 }, { token: i2.Router }, { token: i2.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','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; let i = index\">\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                                        (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$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$2.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"] }] });
+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','map']\" [(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\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; let i = index\">\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                                <ng-container *ngIf=\"selectedViewType == 'map'\">\n                                    <app-geo-map [datasetmodal]=\"dataSourceModal\"\n                                            (createOtherComponentView)=\"getEmitNewOtherSetCongig($event)\"></app-geo-map>\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                                  \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$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$2.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','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; let i = index\">\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                                        (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','map']\" [(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\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; let i = index\">\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                                <ng-container *ngIf=\"selectedViewType == 'map'\">\n                                    <app-geo-map [datasetmodal]=\"dataSourceModal\"\n                                            (createOtherComponentView)=\"getEmitNewOtherSetCongig($event)\"></app-geo-map>\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                                  \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: i4$1.ToastrService }, { type: CommonService }, { type: ApplicationContentService }, { type: kpicommonService$2 }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [APP_ENVIRONMENT]
@@ -8122,7 +8322,6 @@ class BreadCrumbsComponent {
             return;
         }
         else {
-            debugger;
             this.kpiListData = value;
             this.getBreadCrumbsData(value);
             this.loadBreadCrumbs();
@@ -8172,7 +8371,6 @@ class BreadCrumbsComponent {
         return structures;
     }
     loadBreadCrumbs() {
-        debugger;
         const pageId = this.activatedRoute.snapshot.queryParams['pageId'];
         const kpiTid = this.kpi_names[pageId];
         const props = this.kpi_structures[kpiTid];
@@ -11718,7 +11916,7 @@ class CreateDatasetComponent {
             }
         };
         this.jsonDataset = {
-            "api": "/kpi-config/getJsonDatasetPayload",
+            "api": "/ui-config/getJsonDatasetPayload",
             "apiType": "get",
             "serviceId": "",
             "queryConfig": {
@@ -13300,7 +13498,6 @@ class ApplicationCreateMenuComponent {
                         this.paparentMenuDatasource.push(obj);
                     }
                 });
-                debugger;
                 if (this.menuObject.menuId !== "" && this.menuObject.menuType == "parent") {
                     const menu_object = this.paparentMenuDatasource.filter(menu => menu.menuId == this.menuObject.menuId);
                     this.defaultSelectedParent = menu_object[0].menuId;
@@ -19113,6 +19310,9 @@ class KpiWithDataSetTestComponent {
                 if (hasPermission) {
                     this.loadSingleWidgetNode(item, mainItemDiv, datasetById);
                 }
+                else {
+                    this.toastr.error('You do not have permission to view this widget.', 'Permission Denied');
+                }
             }
             else {
                 this.loadSingleWidgetNode(item, mainItemDiv, datasetById);