gamma-app-controller 2.0.10 → 2.0.11

package/fesm2015/gamma-app-controller.mjs

@@ -3532,6 +3532,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['restApiDataset']
             }] } });
 
+class UserAccessComponent {
+    constructor(commonService) {
+        this.commonService = commonService;
+        this.userOptionContainer = [];
+        this.userOptionContainerChange = new EventEmitter();
+        this.menuType = ['user', 'role', 'group', 'tenant', 'service_account'];
+    }
+    ngOnInit() {
+        if (!this.userOptionContainer || this.userOptionContainer.length === 0) {
+            this.userOptionContainer = [
+                {
+                    entityName: 'user',
+                    entityValues: ['{USER}']
+                }
+            ];
+            this.emitChanges();
+        }
+    }
+    addNewUser() {
+        this.userOptionContainer.push({
+            entityName: 'user',
+            entityValues: ['{USER}']
+        });
+        this.emitChanges();
+    }
+    deleteUser(index) {
+        this.userOptionContainer.splice(index, 1);
+        this.emitChanges();
+    }
+    emitChanges() {
+        this.userOptionContainerChange.emit(this.userOptionContainer);
+    }
+}
+UserAccessComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UserAccessComponent, deps: [{ token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
+UserAccessComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: UserAccessComponent, selector: "app-user-access", inputs: { userOptionContainer: "userOptionContainer" }, outputs: { userOptionContainerChange: "userOptionContainerChange" }, ngImport: i0, template: "<div class=\"p-4 w-full\">\n  <div class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n\n    <h6 class=\"mb-2 text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3 flex items-center\">\n      Manage Permissions\n      <div class=\"ml-auto\">\n        <div class=\"{{ commonService?.btn_primary_md }}\" (click)=\"addNewUser()\">\n          Add Permission Entity\n        </div>\n      </div>\n    </h6>\n\n    <div class=\"w-full m-2\">\n      <ng-container *ngFor=\"let item of userOptionContainer; let i = index\">\n        <div class=\"flex flex-row\">\n\n          <!-- Accessible User Type -->\n          <div class=\"mx-2 w-1/4\">\n            <div class=\"text-md p-2 capitalize\">Entity Type</div>\n            <dx-select-box [items]=\"menuType\" [(ngModel)]=\"item.entityName\" (onValueChanged)=\"emitChanges()\">\n            </dx-select-box>\n          </div>\n\n          <!-- User -->\n          <div class=\"mx-2 w-1/4\">\n            <div class=\"text-md p-2 capitalize\">Entity Value</div>\n            <dx-tag-box [(ngModel)]=\"item.entityValues\" [acceptCustomValue]=\"true\" (onValueChanged)=\"emitChanges()\">\n            </dx-tag-box>\n          </div>\n\n          <!-- Delete -->\n          <div class=\"mx-2\">\n            <div class=\"text-md p-2 capitalize\"></div>\n            <div class=\"mt-4\">\n              <div class=\"{{ commonService?.btn_danger_md }}\" (click)=\"deleteUser(i)\">\n                Delete\n              </div>\n            </div>\n          </div>\n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i4$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UserAccessComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-user-access', template: "<div class=\"p-4 w-full\">\n  <div class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n\n    <h6 class=\"mb-2 text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3 flex items-center\">\n      Manage Permissions\n      <div class=\"ml-auto\">\n        <div class=\"{{ commonService?.btn_primary_md }}\" (click)=\"addNewUser()\">\n          Add Permission Entity\n        </div>\n      </div>\n    </h6>\n\n    <div class=\"w-full m-2\">\n      <ng-container *ngFor=\"let item of userOptionContainer; let i = index\">\n        <div class=\"flex flex-row\">\n\n          <!-- Accessible User Type -->\n          <div class=\"mx-2 w-1/4\">\n            <div class=\"text-md p-2 capitalize\">Entity Type</div>\n            <dx-select-box [items]=\"menuType\" [(ngModel)]=\"item.entityName\" (onValueChanged)=\"emitChanges()\">\n            </dx-select-box>\n          </div>\n\n          <!-- User -->\n          <div class=\"mx-2 w-1/4\">\n            <div class=\"text-md p-2 capitalize\">Entity Value</div>\n            <dx-tag-box [(ngModel)]=\"item.entityValues\" [acceptCustomValue]=\"true\" (onValueChanged)=\"emitChanges()\">\n            </dx-tag-box>\n          </div>\n\n          <!-- Delete -->\n          <div class=\"mx-2\">\n            <div class=\"text-md p-2 capitalize\"></div>\n            <div class=\"mt-4\">\n              <div class=\"{{ commonService?.btn_danger_md }}\" (click)=\"deleteUser(i)\">\n                Delete\n              </div>\n            </div>\n          </div>\n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</div>" }]
+        }], ctorParameters: function () { return [{ type: CommonService }]; }, propDecorators: { userOptionContainer: [{
+                type: Input
+            }], userOptionContainerChange: [{
+                type: Output
+            }] } });
+
 class GammaGeoChartComponent {
     constructor(commonService) {
         this.commonService = commonService;
@@ -3557,7 +3601,6 @@ class GammaGeoChartComponent {
             return;
         }
         else {
-            debugger;
             this.isLoader = true;
             this.page_config = value;
             this.page_parms = value.titleParams;
@@ -3985,11 +4028,13 @@ class GammaGeoChartComponent {
             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) {
+    getColor(cnt, startColor, endColor, minCount, maxCount) {
+        if (cnt === undefined || cnt === null || maxCount === minCount) {
             return '#cccccc';
         }
-        const ratio = Math.min(Math.max((cnt - this.minChoroplethMapCnt) / (this.maxChoroplethMapCnt - this.minChoroplethMapCnt), 0), 1);
+        const rawRatio = (cnt - minCount) / (maxCount - minCount);
+        const gamma = 0.2;
+        const ratio = Math.pow(Math.min(Math.max(rawRatio, 0), 1), gamma);
         const start = this.hexToRgb(startColor);
         const end = this.hexToRgb(endColor);
         const r = this.lerp(start.r, end.r, ratio);
@@ -4015,18 +4060,7 @@ class GammaGeoChartComponent {
             zoom: parseInt(chartConfig.zoom)
         });
         this.map.data.loadGeoJson(chartConfig.gjsonFilePath);
-        this.map.data.setStyle(feature => this.getFeatureStyle(feature, chartConfig));
-        this.map.data.setStyle((feature) => {
-            var _a;
-            const district = (_a = feature.getProperty('d')) === null || _a === void 0 ? void 0 : _a.toUpperCase();
-            const cnt = this.choroplethMapDataSource.get(district);
-            return {
-                fillColor: this.getColor(cnt, chartConfig.colorOne, chartConfig.colorTwo),
-                strokeColor: '#555',
-                strokeWeight: 1,
-                fillOpacity: 0.75
-            };
-        });
+        this.map.data.setStyle(feature => this.getFeatureStyle(feature, chartConfig, this.minChoroplethMapCnt, this.maxChoroplethMapCnt));
         const infoWindow = new google.maps.InfoWindow();
         this.map.data.addListener('mouseover', (event) => {
             const district = event.feature.getProperty('d');
@@ -4057,33 +4091,44 @@ class GammaGeoChartComponent {
       min-width:150px;
     ">
       <div style="font-weight:600; margin-bottom:6px;">
-        ${district}
+        ${district} : 
       </div>
       ${rows}
     </div>
   `;
     }
     updateChoroplethMapData(year, chartConfig) {
+        var _a;
         this.choroplethMapDataSource.clear();
-        this.minChoroplethMapCnt = Infinity;
-        this.maxChoroplethMapCnt = -Infinity;
+        this.choroplethTooltipDataSource.clear();
+        let minChoroplethMapCnt = Infinity;
+        let maxChoroplethMapCnt = -Infinity;
+        const valueField = (_a = chartConfig.chart_config.find(c => c.displayFor === 'map')) === null || _a === void 0 ? void 0 : _a.dataField;
         this.choroplethMapData
-            .filter(d => d.year === year)
+            .filter(d => d[chartConfig.sliderValueField] === year)
             .forEach(d => {
-            this.choroplethMapDataSource.set(d.district.toUpperCase(), d.cnt);
-            this.minChoroplethMapCnt = Math.min(this.minChoroplethMapCnt, d.cnt);
-            this.maxChoroplethMapCnt = Math.max(this.maxChoroplethMapCnt, d.cnt);
+            const key = d.district.toUpperCase();
+            this.choroplethMapDataSource.set(key, d[valueField]);
+            this.choroplethTooltipDataSource.set(key, d);
+            minChoroplethMapCnt = Math.min(minChoroplethMapCnt, d[valueField]);
+            maxChoroplethMapCnt = Math.max(maxChoroplethMapCnt, d[valueField]);
         });
         if (this.map) {
-            this.map.data.setStyle(feature => this.getFeatureStyle(feature, chartConfig));
+            if (this.map) {
+                this.map.data.forEach(feature => {
+                    const style = this.getFeatureStyle(feature, chartConfig, this.minChoroplethMapCnt, this.maxChoroplethMapCnt);
+                    this.map.data.overrideStyle(feature, style);
+                });
+            }
         }
     }
-    getFeatureStyle(feature, chartConfig) {
+    getFeatureStyle(feature, chartConfig, minCount, maxCount) {
         var _a;
         const districtName = (_a = feature.getProperty('d')) === null || _a === void 0 ? void 0 : _a.toUpperCase();
         const cnt = this.choroplethMapDataSource.get(districtName);
+        console.log(districtName, cnt, this.getColor(cnt, chartConfig.colorOne, chartConfig.colorTwo, minCount, maxCount));
         return {
-            fillColor: this.getColor(cnt, chartConfig.colorOne, chartConfig.colorTwo),
+            fillColor: this.getColor(cnt, chartConfig.colorOne, chartConfig.colorTwo, minCount, maxCount),
             strokeColor: '#555',
             strokeWeight: 1,
             fillOpacity: 0.75
@@ -4269,11 +4314,13 @@ class GeoMapComponent {
         };
         this.enrichNameList = ["abbreviateNumber", "getColorCodeSpan", "ThousandSeparator", "formatBytesv2"];
         this.isLoader = true;
+        this.userOptionContainer = [];
         this.activeTab = 'basic';
         this.createOtherComponentView = new EventEmitter();
         this.selectedViews = [];
     }
     set chartconfigData(value) {
+        var _a;
         if (value === undefined || value.length === 0) {
             return;
         }
@@ -4283,6 +4330,7 @@ class GeoMapComponent {
             this.dataSourseForTable = value.data;
             this.selectedViewConfigs = value;
             this.selectedTableViewType = value.selectedViewType;
+            this.userOptionContainer = ((_a = value.selectedWidgetConfig) === null || _a === void 0 ? void 0 : _a.permissions) ? value.selectedWidgetConfig.permissions : [];
             if (value.selectedWidgetConfig) {
                 this.table_columns_config['kpiConfig'] = value.selectedWidgetConfig;
                 this.mapType = value.selectedWidgetConfig.dataConfig.mapType;
@@ -4431,6 +4479,7 @@ class GeoMapComponent {
                 this.viewProperties['clickEventOptions']['associatedViews'] = this.optionalDrilDownDataSource;
             }
             this.table_columns_config.kpiConfig['viewProperties'] = this.viewProperties;
+            this.table_columns_config['permissions'] = this.userOptionContainer;
             this.createOtherComponentView.emit(this.table_columns_config);
         }
         else if (this.mapType == 'bubbleMap') {
@@ -4442,6 +4491,7 @@ class GeoMapComponent {
             }
             this.table_columns_config.kpiConfig['viewProperties'] = this.viewProperties;
             this.table_columns_config.kpiConfig['dataSource'] = '';
+            this.table_columns_config['permissions'] = this.userOptionContainer;
             this.createOtherComponentView.emit(this.table_columns_config);
         }
         else if (this.mapType == 'choroplethMap') {
@@ -4453,6 +4503,7 @@ class GeoMapComponent {
             }
             this.table_columns_config.kpiConfig['viewProperties'] = this.viewProperties;
             this.table_columns_config.kpiConfig['dataSource'] = '';
+            this.table_columns_config['permissions'] = this.userOptionContainer;
             this.createOtherComponentView.emit(this.table_columns_config);
         }
         else {
@@ -4463,6 +4514,7 @@ class GeoMapComponent {
                 this.viewProperties['clickEventOptions']['associatedViews'] = this.optionalDrilDownDataSource;
             }
             this.table_columns_config.kpiConfig['viewProperties'] = this.viewProperties;
+            this.table_columns_config['permissions'] = this.userOptionContainer;
             this.createOtherComponentView.emit(this.table_columns_config);
         }
     }
@@ -4573,10 +4625,10 @@ class GeoMapComponent {
     }
 }
 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\"> 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\"\n                                        (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\"\n                                        (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 class=\"my-2 flex flex-row justify-between\">\n                                <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [(ngModel)]=\"choroplethMapConfig.isValueFieldRangeSlider\"\n                                        text=\"Range Slider\"></dx-check-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Slider Speed</div>\n                                    <dx-number-box [(ngModel)]=\"choroplethMapConfig.slideSpeed\"></dx-number-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Value For Slider</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"choroplethMapConfig.sliderValueField\"></dx-select-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: i7$1.DxNumberBoxComponent, selector: "dx-number-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "format", "height", "hint", "hoverStateEnabled", "inputAttr", "invalidValueMessage", "isValid", "label", "labelMode", "max", "min", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showSpinButtons", "step", "stylingMode", "tabIndex", "text", "useLargeSpinButtons", "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", "formatChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "invalidValueMessageChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "minChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showSpinButtonsChange", "stepChange", "stylingModeChange", "tabIndexChange", "textChange", "useLargeSpinButtonsChange", "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: 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: GammaGeoChartComponent, selector: "app-gamma-geo-chart", 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                <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 === 'permission',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'permission'\n                                    }\" (click)=\"setActiveTab('permission')\" type=\"button\" role=\"tab\">\n                        Manage Permissions\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\"\n                                        (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\"\n                                        (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 class=\"my-2 flex flex-row justify-between\">\n                                <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [(ngModel)]=\"choroplethMapConfig.isValueFieldRangeSlider\"\n                                        text=\"Range Slider\"></dx-check-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Slider Speed</div>\n                                    <dx-number-box [(ngModel)]=\"choroplethMapConfig.slideSpeed\"></dx-number-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Value For Slider</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"choroplethMapConfig.sliderValueField\"></dx-select-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             <div *ngIf=\"activeTab === 'permission'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n                    </app-user-access>\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: i7$1.DxNumberBoxComponent, selector: "dx-number-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "format", "height", "hint", "hoverStateEnabled", "inputAttr", "invalidValueMessage", "isValid", "label", "labelMode", "max", "min", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showSpinButtons", "step", "stylingMode", "tabIndex", "text", "useLargeSpinButtons", "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", "formatChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "invalidValueMessageChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "minChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showSpinButtonsChange", "stepChange", "stylingModeChange", "tabIndexChange", "textChange", "useLargeSpinButtonsChange", "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: 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: UserAccessComponent, selector: "app-user-access", inputs: ["userOptionContainer"], outputs: ["userOptionContainerChange"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "component", type: GammaGeoChartComponent, selector: "app-gamma-geo-chart", 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\"> 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\"\n                                        (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\"\n                                        (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 class=\"my-2 flex flex-row justify-between\">\n                                <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [(ngModel)]=\"choroplethMapConfig.isValueFieldRangeSlider\"\n                                        text=\"Range Slider\"></dx-check-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Slider Speed</div>\n                                    <dx-number-box [(ngModel)]=\"choroplethMapConfig.slideSpeed\"></dx-number-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Value For Slider</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"choroplethMapConfig.sliderValueField\"></dx-select-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>" }]
+            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                <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 === 'permission',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'permission'\n                                    }\" (click)=\"setActiveTab('permission')\" type=\"button\" role=\"tab\">\n                        Manage Permissions\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\"\n                                        (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\"\n                                        (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 class=\"my-2 flex flex-row justify-between\">\n                                <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [(ngModel)]=\"choroplethMapConfig.isValueFieldRangeSlider\"\n                                        text=\"Range Slider\"></dx-check-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Slider Speed</div>\n                                    <dx-number-box [(ngModel)]=\"choroplethMapConfig.slideSpeed\"></dx-number-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Value For Slider</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"choroplethMapConfig.sliderValueField\"></dx-select-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             <div *ngIf=\"activeTab === 'permission'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n                    </app-user-access>\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: [{
@@ -4584,50 +4636,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['datasetmodal']
             }] } });
 
-class UserAccessComponent {
-    constructor(commonService) {
-        this.commonService = commonService;
-        this.userOptionContainer = [];
-        this.userOptionContainerChange = new EventEmitter();
-        this.menuType = ['user', 'role', 'group', 'tenant', 'service_account'];
-    }
-    ngOnInit() {
-        if (!this.userOptionContainer || this.userOptionContainer.length === 0) {
-            this.userOptionContainer = [
-                {
-                    entityName: 'user',
-                    entityValues: ['{USER}']
-                }
-            ];
-            this.emitChanges();
-        }
-    }
-    addNewUser() {
-        this.userOptionContainer.push({
-            entityName: 'user',
-            entityValues: ['{USER}']
-        });
-        this.emitChanges();
-    }
-    deleteUser(index) {
-        this.userOptionContainer.splice(index, 1);
-        this.emitChanges();
-    }
-    emitChanges() {
-        this.userOptionContainerChange.emit(this.userOptionContainer);
-    }
-}
-UserAccessComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UserAccessComponent, deps: [{ token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
-UserAccessComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: UserAccessComponent, selector: "app-user-access", inputs: { userOptionContainer: "userOptionContainer" }, outputs: { userOptionContainerChange: "userOptionContainerChange" }, ngImport: i0, template: "<div class=\"p-4 w-full\">\n  <div class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n\n    <h6 class=\"mb-2 text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3 flex items-center\">\n      Manage Permissions\n      <div class=\"ml-auto\">\n        <div class=\"{{ commonService?.btn_primary_md }}\" (click)=\"addNewUser()\">\n          Add Permission Entity\n        </div>\n      </div>\n    </h6>\n\n    <div class=\"w-full m-2\">\n      <ng-container *ngFor=\"let item of userOptionContainer; let i = index\">\n        <div class=\"flex flex-row\">\n\n          <!-- Accessible User Type -->\n          <div class=\"mx-2 w-1/4\">\n            <div class=\"text-md p-2 capitalize\">Entity Type</div>\n            <dx-select-box [items]=\"menuType\" [(ngModel)]=\"item.entityName\" (onValueChanged)=\"emitChanges()\">\n            </dx-select-box>\n          </div>\n\n          <!-- User -->\n          <div class=\"mx-2 w-1/4\">\n            <div class=\"text-md p-2 capitalize\">Entity Value</div>\n            <dx-tag-box [(ngModel)]=\"item.entityValues\" [acceptCustomValue]=\"true\" (onValueChanged)=\"emitChanges()\">\n            </dx-tag-box>\n          </div>\n\n          <!-- Delete -->\n          <div class=\"mx-2\">\n            <div class=\"text-md p-2 capitalize\"></div>\n            <div class=\"mt-4\">\n              <div class=\"{{ commonService?.btn_danger_md }}\" (click)=\"deleteUser(i)\">\n                Delete\n              </div>\n            </div>\n          </div>\n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i4$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UserAccessComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-user-access', template: "<div class=\"p-4 w-full\">\n  <div class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n\n    <h6 class=\"mb-2 text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3 flex items-center\">\n      Manage Permissions\n      <div class=\"ml-auto\">\n        <div class=\"{{ commonService?.btn_primary_md }}\" (click)=\"addNewUser()\">\n          Add Permission Entity\n        </div>\n      </div>\n    </h6>\n\n    <div class=\"w-full m-2\">\n      <ng-container *ngFor=\"let item of userOptionContainer; let i = index\">\n        <div class=\"flex flex-row\">\n\n          <!-- Accessible User Type -->\n          <div class=\"mx-2 w-1/4\">\n            <div class=\"text-md p-2 capitalize\">Entity Type</div>\n            <dx-select-box [items]=\"menuType\" [(ngModel)]=\"item.entityName\" (onValueChanged)=\"emitChanges()\">\n            </dx-select-box>\n          </div>\n\n          <!-- User -->\n          <div class=\"mx-2 w-1/4\">\n            <div class=\"text-md p-2 capitalize\">Entity Value</div>\n            <dx-tag-box [(ngModel)]=\"item.entityValues\" [acceptCustomValue]=\"true\" (onValueChanged)=\"emitChanges()\">\n            </dx-tag-box>\n          </div>\n\n          <!-- Delete -->\n          <div class=\"mx-2\">\n            <div class=\"text-md p-2 capitalize\"></div>\n            <div class=\"mt-4\">\n              <div class=\"{{ commonService?.btn_danger_md }}\" (click)=\"deleteUser(i)\">\n                Delete\n              </div>\n            </div>\n          </div>\n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</div>" }]
-        }], ctorParameters: function () { return [{ type: CommonService }]; }, propDecorators: { userOptionContainer: [{
-                type: Input
-            }], userOptionContainerChange: [{
-                type: Output
-            }] } });
-
 class DashChartComponent {
     constructor(commonService, service, taostr) {
         this.commonService = commonService;
@@ -4658,6 +4666,8 @@ class DashChartComponent {
                     "title": "",
                     "argumentField": "",
                     "chartGroupBy": "",
+                    "dataGroupBy": "",
+                    "functionType": "",
                     "chartSortBy": "",
                     "verticalAlignment": "bottom",
                     "horizontalAlignment": "center",
@@ -4729,12 +4739,14 @@ class DashChartComponent {
                 }
                 if (this.chartType == 'bubble') {
                     this.isAdvanceContainer = true;
-                    this.getHeatmapData();
+                    this.geBubblemapData();
                 }
                 this.mainChartCourceObject['kpiConfig'] = value.selectedWidgetConfig;
                 value.selectedWidgetConfig['keyToPass'] = (value.selectedWidgetConfig['keyToPass']) ? value.selectedWidgetConfig['keyToPass'] : [];
                 value.selectedWidgetConfig['dataConfig']['chartGroupBy'] = (value.selectedWidgetConfig['dataConfig']['chartGroupBy']) ? value.selectedWidgetConfig['dataConfig']['chartGroupBy'] : "";
                 value.selectedWidgetConfig['dataConfig']['chartSortBy'] = (value.selectedWidgetConfig['dataConfig']['chartSortBy']) ? value.selectedWidgetConfig['dataConfig']['chartSortBy'] : "";
+                value.selectedWidgetConfig['dataConfig']['dataGroupBy'] = (value.selectedWidgetConfig['dataConfig']['dataGroupBy']) ? value.selectedWidgetConfig['dataConfig']['dataGroupBy'] : "";
+                value.selectedWidgetConfig['dataConfig']['functionType'] = (value.selectedWidgetConfig['dataConfig']['functionType']) ? value.selectedWidgetConfig['dataConfig']['functionType'] : "";
                 if (value.selectedWidgetConfig['dataConfig']['chartGroupBy']) {
                     const { dataSourceForChart, listOfGroupByData } = this.getStackBarChart(this.previewData, this.chartConfig.argumentField, this.chartConfig.chart_config[0].valueField, value.selectedWidgetConfig['dataConfig']['chartGroupBy']);
                     this.dataSourseForChart = dataSourceForChart;
@@ -4747,7 +4759,7 @@ class DashChartComponent {
                     };
                 }
                 if (value.selectedWidgetConfig.dataConfig['chartType'] && value.selectedWidgetConfig.dataConfig['chartType'] == 'bubble') {
-                    this.getHeatmapData();
+                    this.geBubblemapData();
                 }
                 if (value.selectedWidgetConfig.dataConfig['chartAccess']) {
                     this.chartAccess = value.selectedWidgetConfig.dataConfig['chartAccess'];
@@ -4885,7 +4897,7 @@ class DashChartComponent {
             }
             if (e.value == 'bubble') {
                 this.isAdvanceContainer = true;
-                this.getHeatmapData();
+                this.geBubblemapData();
             }
             if (e.value == 'stackedBar' || e.value == 'line') {
                 this.isAdvanceContainer = true;
@@ -4937,7 +4949,7 @@ class DashChartComponent {
     pointClickHandler(arg) {
         arg.target.select();
     }
-    getHeatmapData() {
+    geBubblemapData() {
         this.heatChartDataSource = {};
         const { result, uniqueDates } = this.generateData(this.bubbleChartData, this.chartConfig);
         this.heatChartDataSource["dataSet"] = result;
@@ -5079,12 +5091,65 @@ class DashChartComponent {
             listOfGroupByData: Array.from(uniqueGroups)
         };
     }
+    getDataGroupBy(event) {
+        if (event.event) {
+            if (this.chartConfig.functionType || this.chartConfig.chart_config[0].valueField || this.chartConfig.dataGroupBy) {
+                const { dataSourceForChart, listOfGroupByData } = this.getGroupDataForChart(this.previewData, this.chartConfig.chart_config, this.chartConfig.dataGroupBy, event.value);
+                this.dataSourseForChart = dataSourceForChart;
+                this.configColume = (dataSourceForChart[0]) ? Object.keys(dataSourceForChart[0]) : [];
+                ;
+            }
+        }
+    }
+    getGroupDataForChart(previewdata, chartConfig, groupBy, functionType) {
+        const grouped = {};
+        for (const item of previewdata) {
+            const key = item[groupBy];
+            if (!grouped[key]) {
+                grouped[key] = [];
+            }
+            grouped[key].push(item);
+        }
+        const dataSourceForChart = Object.entries(grouped).map(([groupKey, items]) => {
+            const row = { [groupBy]: groupKey };
+            chartConfig.forEach(cfg => {
+                const field = cfg.valueField;
+                const values = items
+                    .map(i => i[field])
+                    .filter(v => typeof v === 'number');
+                switch (functionType) {
+                    case 'sum':
+                        row[field] = values.reduce((a, b) => a + b, 0);
+                        break;
+                    case 'avg':
+                        row[field] = values.length
+                            ? values.reduce((a, b) => a + b, 0) / values.length
+                            : 0;
+                        break;
+                    case 'min':
+                        row[field] = values.length ? Math.min(...values) : 0;
+                        break;
+                    case 'max':
+                        row[field] = values.length ? Math.max(...values) : 0;
+                        break;
+                    case 'count':
+                        row[field] = values.length;
+                        break;
+                }
+            });
+            return row;
+        });
+        return {
+            dataSourceForChart: dataSourceForChart,
+            listOfGroupByData: Object.keys(grouped)
+        };
+    }
 }
 DashChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashChartComponent, deps: [{ token: CommonService }, { token: ApplicationContentService }, { token: i4$1.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
-DashChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DashChartComponent, selector: "app-dash-chart", inputs: { chartconfigData: ["datasetmodal", "chartconfigData"] }, outputs: { getChartConfigOutPut: "getChartConfigOutPut" }, ngImport: i0, template: "<div class=\"mx-2\">\n    <div class=\"w-full m-2 border\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n            <ng-container *ngIf=\"chartType === 'doughnut' || chartType === 'pie'\">\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                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-pie-chart id=\"pie\" [type]=\"chartType\"\n                        [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" palette=\"Soft Pastel\"\n                        [dataSource]=\"dataSourseForChart\" centerTemplate=\"centerTemplate\"\n                        (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\" color=\"{{item.color}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                            <ng-container *ngIf=\"!item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                            horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n                            verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n                        <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n                        <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"#,##0.##\">\n                        </dxo-tooltip>\n                        <ng-container *ngIf=\"chartType === 'doughnut'\">\n                            <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n                                <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\"\n                                    opacity=\"0.0001\">\n                                </circle>\n\n                                <text text-anchor=\"middle\" style=\"font-size: 28px\" x=\"100\" y=\"100\" fill=\"#eee\"\n                                    *ngIf=\"chartConfig.displayCenterLabel\">\n                                    <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n                                    <!-- display: inline -->\n                                    <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n                                </text>\n                            </svg>\n                        </ng-container>\n\n                    </dx-pie-chart>\n                </div>\n            </ng-container>\n            <ng-container\n                *ngIf=\"chartType !== 'doughnut' && chartType !== 'funnel' && chartType !== 'bubble' && chartType !== 'pie'\">\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                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-chart id=\"chart\" [dataSource]=\"dataSourseForChart\" [palette]=\"chartConfig.palette\"\n                        [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                        [valueAxis]=\"chartConfig.valueAxisConfig\">\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.axis\">\n                                <dxi-value-axis [name]=\"item.axis\" [position]=\"item.position\">\n                                    <dxo-title [text]=\"item.name\"></dxo-title>\n                                </dxi-value-axis>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-argument-axis>\n                            <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n                        </dxo-argument-axis>\n                        <dxo-tooltip [enabled]=\"true\" [shared]=\"true\"></dxo-tooltip>\n                        <dxo-common-series-settings\n                            [argumentField]=\"chartConfig.argumentField\"></dxo-common-series-settings>\n                        <!-- for others single access chart start -->\n                        <ng-container *ngIf=\"chartType !== 'stackedBar' && chartType !== 'line'\">\n                            <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                                <ng-container *ngIf=\"item.color\">\n                                    <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\"\n                                        axis=\"{{item.axis}}\" name=\"{{item.name}}\" color=\"{{item.color}}\">\n                                    </dxi-series>\n                                </ng-container>\n                                <ng-container *ngIf=\"!item.color\">\n                                    <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\"\n                                        axis=\"{{item.axis}}\" name=\"{{item.name}}\">\n                                    </dxi-series>\n                                </ng-container>\n                            </ng-container>\n                        </ng-container>\n                        <!-- for others single access chart end -->\n\n                        <!-- for stackber start -->\n                        <ng-container *ngIf=\"chartType === 'stackedBar' || chartType === 'line'\">\n                            <ng-container *ngFor=\"let item of chartWithThreeDimentionDataSeries\">\n                                <dxi-series valueField=\"{{item}}\" name=\"{{item}}\" type=\"{{chartType}}\"></dxi-series>\n                            </ng-container>\n                        </ng-container>\n                        <!-- for stackber end -->\n                        <dxo-size [height]=\"chartConfig.size\"></dxo-size>\n                        <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                            [verticalAlignment]=\"chartConfig.verticalAlignment\"\n                            [horizontalAlignment]=\"chartConfig.horizontalAlignment\"></dxo-legend>\n                    </dx-chart>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"chartType === 'funnel'\">\n\n            </ng-container>\n            <ng-container *ngIf=\"chartType === 'bubble'\">\n                <div class=\"mx-5\">\n                    <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                        <div class=\"flex flex-row\">\n                            <div class=\"h-10 text-sm items-center min-w-24 max-w-[30%] justify-center flex\">\n                                {{item.datasource}}\n                            </div>\n                            <div class=\"inline-block \">\n                                <div class=\"flex flex-nowrap justify-center \">\n                                    <ng-container *ngFor=\"let box of item.dataset\">\n                                        <div class=\"flex-shrink-0 min-w-10 max-w-[20%] h-10 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                            [matTooltip]=\"'Record Date: ' + box.recordDate + '\\nRecharge Count: ' + box.toolTip\"\n                                            matTooltipClass=\"custom-tooltip\">\n                                            <div class=\"rounded-full\" [ngStyle]=\"{\n                                        'background-color': box.isHovered ? 'rgb(135, 184, 106)' : box.color,\n                                        'width.px': box.size,\n                                        'hover': box.hover,\n                                        'height.px': box.size\n                                      }\" (mouseenter)=\"box.isHovered = true\" (mouseleave)=\"box.isHovered = false\">\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <div class=\"inline-block\">\n                        <div class=\"flex flex-nowrap justify-center\">\n                            <div class=\"flex-shrink-0 w-24 max-w-[20%] h-full flex items-center justify-center\"></div>\n                            <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                                class=\"flex-shrink-0 w-10 max-w-[20%] min-h-14 flex text-sm items-center justify-center my-1\"\n                                [ngStyle]=\"{'height': 'auto'}\">\n                                <span class=\"text-rotate\">\n                                    {{item}}\n                                </span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n\n        </ng-container>\n\n    </div>\n    <div class=\"w-full m-2 border\">\n        <div class=\"flex flex-row mb-1\">\n            <div class=\"w-1/3 mx-1\">\n                <dx-select-box [dataSource]=\"chartAxisSource\" [(ngModel)]=\"chartAccess\" placeholder=\"Chart Type\"\n                    displayExpr=\"name\" valueExpr=\"value\" (onValueChanged)=\"getChartAccessType($event)\">\n                </dx-select-box>\n            </div>\n            <div class=\"w-1/3 mx-1\">\n                <ng-container *ngIf=\"chartAccess === 'single'\">\n                    <dx-select-box [items]=\"chartTypeSource\" (onValueChanged)=\"getChartType($event)\"\n                        [(ngModel)]=\"chartType\"></dx-select-box>\n                </ng-container>\n                <ng-container *ngIf=\"chartAccess === 'multy'\">\n                    <dx-select-box [items]=\"componentNamesForMultyAccess\" displayExpr=\"item\" valueExpr=\"compName\"\n                        [(ngModel)]=\"componentName\"></dx-select-box>\n                </ng-container>\n            </div>\n        </div>\n        <ng-container *ngIf=\"chartAccess === 'single'\">\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 === 'columns',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                            }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                            Columns\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                            }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                            Properties\n                        </button>\n                    </li>\n                    <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 === 'permission',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'permission'\n                            }\" (click)=\"setActiveTab('permission')\" type=\"button\" role=\"tab\">\n                            Manage Permissions\n                        </button>\n                    </li>\n                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n                        <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                            Config\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex justify-between\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Title</div>\n                                    <dx-text-box\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.title\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Data Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Format </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></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)]=\"mainChartCourceObject.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 \">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Legend Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Date Format </div>\n                            <dx-select-box [items]=\"['MM-DD','YYYY-MM-DD']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.displayDateFormat\"></dx-select-box>\n                        </div>\n\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\">Sort By</div>\n                            <dx-tag-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.chartSortBy\"></dx-tag-box>\n                        </div>\n\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2 mt-6\"> </div>\n                            <dx-check-box [(ngModel)]=\"mainChartCourceObject.kpiConfig.descendingOrder\"\n                                text=\"Descending Order\"></dx-check-box>\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Color Palette</div>\n                                    <dx-select-box [items]=\"doughnut_color_palette\"\n                                        [(ngModel)]=\"chartConfig.palette\"></dx-select-box>\n                                </div>\n                                <div class=\"mt-7\">\n                                    <dx-check-box [value]=\"chartConfig.labelDisplay\"\n                                        [(ngModel)]=\"chartConfig.labelDisplay\" text=\"Label Display\"></dx-check-box>\n                                </div>\n\n                            </div>\n\n\n                        </div>\n\n\n\n\n                    </div>\n\n                    <div class=\"m-3 p-4 bg-white border border-gray-300 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\"\n                        *ngIf=\"isAdvanceContainer\">\n                        <h6\n                            class=\"mb-2 text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3 flex items-center capitalize\">\n                            Advance Columns for {{chartType}} Chart\n                            <div class=\"ml-auto\">\n\n                            </div>\n                        </h6>\n                        <div class=\"flex flex-row\" *ngIf=\"chartType === 'stackedBar' || chartType === 'line' \">\n                            <div class=\"w-1/3 px-2 mt-2\">\n                                <div class=\"text-md mb-2\"> Chart Group By </div>\n                                <dx-select-box [items]=\"configColume\" (onValueChanged)=\"getChartStackbarChart($event)\"\n                                    [(ngModel)]=\"chartConfig.chartGroupBy\"></dx-select-box>\n                            </div>\n                        </div>\n                        <div class=\"flex flex-row\" *ngIf=\"chartType === 'bubble'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2 w-full\">\n                                    <div class=\"text-md mb-1\"> Source Field</div>\n                                    <dx-select-box [items]=\"configColume\"\n                                        [(ngModel)]=\"chartConfig.sourceField\"></dx-select-box>\n                                </div>\n                                <div class=\"mr-2 w-full\">\n                                    <div class=\"text-md mb-1\"> Min Bubble Size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.minBubbleSize\"></dx-text-box>\n                                </div>\n                                <div class=\"mr-2 w-full\">\n                                    <div class=\"text-md mb-1\"> Max bubble size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.maxBubbleSize\"></dx-text-box>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"flex flex-row\" *ngIf=\"chartType === 'doughnut' || chartType === 'pie'\">\n                            <div class=\" flex flex-row\">\n                                <!-- <div class=\"w-1/3 px-2 mt-2\">\n                                    <div class=\"text-md mb-2\"> Chart Group By </div>\n                                    <dx-select-box [items]=\"configColume\"\n                                        (onValueChanged)=\"getChartStackbarChart($event)\"\n                                        [(ngModel)]=\"chartConfig.chartGroupBy\"></dx-select-box>\n\n\n                                </div> -->\n                                <div class=\"mt-7 mx-2\">\n                                    <dx-check-box [(ngModel)]=\"chartConfig.displayCenterLabel\"\n                                        text=\"Display Center Label\"></dx-check-box>\n                                </div>\n                            </div>\n                        </div>\n\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <div class=\"h-60 overflow-x-auto\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-row border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index\">\n\n                                <div class=\"px-1 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-1 mb-1 w-1/4\" *ngIf=\"chartType !== 'doughnut' && chartType !== 'pie'\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"text-center mt-6 w-1/6\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\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                            </div>\n                            <div class=\"flex flex-row justify-end my-2\"\n                                *ngIf=\"chartType === 'doughnut' || chartType === 'pie'\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Series</button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'properties'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-loader *ngIf=\"isLoader\"></app-loader>\n                        <ng-container *ngIf=\"!isLoader\">\n                            <div class=\"flex flex-row justify-between border-b py-3\">\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                        text=\"Enable Click Event\"></dx-check-box>\n                                </div>\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                        text=\"Enable Right Click\"></dx-check-box>\n                                </div>\n                            </div>\n                            <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                                <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                        Type\n                                        Option\n                                    </div>\n                                    <div class=\"w-full p-3 border-x border-b \">\n                                        <div class=\"flex flex-row\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Event Type</div>\n                                            </div>\n                                            <div class=\"w-full\">\n                                                <dx-select-box\n                                                    [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','popup','navigateToPage']\"\n                                                    (onValueChanged)=\"getSelectedEventType($event)\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                            </div>\n                                        </div>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType === 'popup'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views For Popup</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'navigateToPage'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Pages</div>\n                                                    <dx-select-box [items]=\"allConfiguredPage\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedPage\"\n                                                        valueExpr=\"pageId\" displayExpr=\"pageName\"\n                                                        [searchEnabled]=\"true\"></dx-select-box>\n                                                </div>\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Params</div>\n                                                    <dx-text-box\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedParams\"></dx-text-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *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\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'sameViewDrilldown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'optionalDrillDown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <ng-container\n                                                        *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                        <div class=\"flex flex-row justify-between\">\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                    [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                    displayExpr=\"viewName\"\n                                                                    [showSelectionControls]=\"true\"\n                                                                    [maxDisplayedTags]=\"2\"\n                                                                    [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                            </div>\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Params</div>\n                                                                <dx-text-box\n                                                                    [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                            </div>\n                                                            <div class=\"mx-2\">\n                                                                <button\n                                                                    class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                    (click)=\"deleteAssociatedParams(i)\"><i\n                                                                        class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                                </button>\n                                                            </div>\n                                                        </div>\n                                                    </ng-container>\n                                                    <div class=\"flex flex-row justify-end mt-4\">\n                                                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                            (click)=\"addAssociatedParams()\">Add\n                                                            Params</button>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                            (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                    </div>\n                                </div>\n\n                            </div>\n                        </ng-container>\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'permission'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n                        </app-user-access>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"chartAccess === 'multy'\">\n            <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n                <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                            }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                            Basic\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                            }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                            Columns\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                            }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                            Properties\n                        </button>\n                    </li>\n                    <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 === 'permission',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'permission'\n                            }\" (click)=\"setActiveTab('permission')\" type=\"button\" role=\"tab\">\n                            Manage Permissions\n                        </button>\n                    </li>\n                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n                        <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                            Config\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex justify-between\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Title</div>\n                                    <dx-text-box\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.title\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Data Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Format </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></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)]=\"mainChartCourceObject.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2\">\n                            <div class=\"text-md mb-1\">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\" [value]=\"'center'\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> legent Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\" [value]=\"'bottom'\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Format </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Date Format </div>\n                            <dx-select-box [items]=\"['MM-DD','YYYY-MM-DD']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.displayDateFormat\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\">Sort By</div>\n                            <dx-tag-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.chartSortBy\"></dx-tag-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2 mt-6\"> </div>\n                            <dx-check-box [(ngModel)]=\"mainChartCourceObject.kpiConfig.descendingOrder\"\n                                text=\"Descending Order\"></dx-check-box>\n                        </div>\n                    </div>\n\n\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-wrap border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index;\">\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-2\"> Type</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"chartTypeSource\" [value]=\"'spline'\"\n                                        [(ngModel)]=\"item.type\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\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 my-1 w-1/4\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\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                            </div>\n                            <div class=\"flex flex-row justify-end my-2\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Columns</button>\n                            </div>\n                        </div>\n                    </dx-scroll-view>\n                </div>\n                <div *ngIf=\"activeTab === 'properties'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-loader *ngIf=\"isLoader\"></app-loader>\n                        <ng-container *ngIf=\"!isLoader\">\n                            <div class=\"flex flex-row justify-between border-b py-3\">\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                        text=\"Enable Click Event\"></dx-check-box>\n                                </div>\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                        text=\"Enable Right Click\"></dx-check-box>\n                                </div>\n                            </div>\n                            <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                                <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                        Type\n                                        Option\n                                    </div>\n                                    <div class=\"w-full p-3 border-x border-b \">\n                                        <div class=\"flex flex-row\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Event Type</div>\n                                            </div>\n                                            <div class=\"w-full\">\n                                                <dx-select-box\n                                                    [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','popup','navigateToPage']\"\n                                                    (onValueChanged)=\"getSelectedEventType($event)\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                            </div>\n                                        </div>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'navigateToPage'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Pages</div>\n                                                    <dx-select-box [items]=\"allConfiguredPage\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedPage\"\n                                                        valueExpr=\"pageId\" displayExpr=\"pageName\"\n                                                        [searchEnabled]=\"true\"></dx-select-box>\n                                                </div>\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Params</div>\n                                                    <dx-text-box\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedParams\"></dx-text-box>\n\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *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\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType === 'popup'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views For Popup</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'sameViewDrilldown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'optionalDrillDown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <ng-container\n                                                        *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                        <div class=\"flex flex-row justify-between\">\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                    [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                    displayExpr=\"viewName\"\n                                                                    [showSelectionControls]=\"true\"\n                                                                    [maxDisplayedTags]=\"2\"\n                                                                    [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                            </div>\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Params</div>\n                                                                <dx-text-box\n                                                                    [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                            </div>\n                                                            <div class=\"mx-2\">\n                                                                <button\n                                                                    class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                    (click)=\"deleteAssociatedParams(i)\"><i\n                                                                        class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                                </button>\n                                                            </div>\n                                                        </div>\n                                                    </ng-container>\n                                                    <div class=\"flex flex-row justify-end mt-4\">\n                                                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                            (click)=\"addAssociatedParams()\">Add\n                                                            Params</button>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                            (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                    </div>\n                                </div>\n\n                            </div>\n                        </ng-container>\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'permission'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n                        </app-user-access>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n\n\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)=\"isJsonPreview = true\">\n                Preview</button>\n            <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n                Preview</button>\n        </div>\n        <div class=\"flex justify-end mx-1 flex-grow\">\n            <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n                (click)=\"getSaveChartConfig()\">Submit</button>\n        </div>\n    </div>\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: "directive", type: i4$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6.DxoLabelComponent, selector: "dxo-label", inputs: ["connectorColor", "connectorWidth", "customizeText", "font", "format", "indent", "visible", "horizontalAlignment", "position", "text", "verticalAlignment", "alignment", "customizeHint", "displayMode", "indentFromAxis", "overlappingBehavior", "rotationAngle", "staggeringSpacing", "template", "textOverflow", "wordWrap", "argumentFormat", "backgroundColor", "border", "connector", "displayFormat", "horizontalOffset", "showForZeroValues", "verticalOffset", "hideFirstOrLast", "indentFromTick", "useRangeColors", "location", "showColon", "radialOffset", "topIndent", "shadow", "useNodeColors", "dataField", "enabled"] }, { kind: "component", type: i6.DxoLegendComponent, selector: "dxo-legend", inputs: ["backgroundColor", "border", "columnCount", "columnItemSpacing", "customizeHint", "customizeItems", "customizeText", "font", "horizontalAlignment", "itemsAlignment", "itemTextFormat", "itemTextPosition", "margin", "markerSize", "markerTemplate", "orientation", "paddingLeftRight", "paddingTopBottom", "rowCount", "rowItemSpacing", "title", "verticalAlignment", "visible", "hoverMode", "position"] }, { kind: "component", type: i6.DxoTitleComponent, selector: "dxo-title", inputs: ["font", "horizontalAlignment", "margin", "placeholderSize", "subtitle", "text", "verticalAlignment", "textOverflow", "wordWrap", "alignment"] }, { kind: "component", type: i6.DxoSizeComponent, selector: "dxo-size", inputs: ["height", "width"] }, { kind: "component", type: i6.DxoTooltipComponent, selector: "dxo-tooltip", inputs: ["arrowLength", "border", "color", "container", "contentTemplate", "cornerRadius", "customizeTooltip", "enabled", "font", "format", "interactive", "opacity", "paddingLeftRight", "paddingTopBottom", "shadow", "zIndex", "argumentFormat", "location", "shared", "isShown", "text", "position", "showMode", "customizeLinkTooltip", "customizeNodeTooltip", "linkTooltipTemplate", "nodeTooltipTemplate"] }, { kind: "component", type: i7$2.DxChartComponent, selector: "dx-chart", inputs: ["adaptiveLayout", "adjustOnZoom", "animation", "annotations", "argumentAxis", "autoHidePointMarkers", "barGroupPadding", "barGroupWidth", "commonAnnotationSettings", "commonAxisSettings", "commonPaneSettings", "commonSeriesSettings", "containerBackgroundColor", "crosshair", "customizeAnnotation", "customizeLabel", "customizePoint", "dataPrepareSettings", "dataSource", "defaultPane", "disabled", "elementAttr", "export", "legend", "loadingIndicator", "margin", "maxBubbleSize", "minBubbleSize", "negativesAsZeroes", "palette", "paletteExtensionMode", "panes", "pathModified", "pointSelectionMode", "redrawOnResize", "resizePanesOnZoom", "resolveLabelOverlapping", "rotated", "rtlEnabled", "scrollBar", "series", "seriesSelectionMode", "seriesTemplate", "size", "stickyHovering", "synchronizeMultiAxes", "theme", "title", "tooltip", "valueAxis", "zoomAndPan"], outputs: ["onArgumentAxisClick", "onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onSeriesClick", "onSeriesHoverChanged", "onSeriesSelectionChanged", "onTooltipHidden", "onTooltipShown", "onZoomEnd", "onZoomStart", "adaptiveLayoutChange", "adjustOnZoomChange", "animationChange", "annotationsChange", "argumentAxisChange", "autoHidePointMarkersChange", "barGroupPaddingChange", "barGroupWidthChange", "commonAnnotationSettingsChange", "commonAxisSettingsChange", "commonPaneSettingsChange", "commonSeriesSettingsChange", "containerBackgroundColorChange", "crosshairChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataPrepareSettingsChange", "dataSourceChange", "defaultPaneChange", "disabledChange", "elementAttrChange", "exportChange", "legendChange", "loadingIndicatorChange", "marginChange", "maxBubbleSizeChange", "minBubbleSizeChange", "negativesAsZeroesChange", "paletteChange", "paletteExtensionModeChange", "panesChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resizePanesOnZoomChange", "resolveLabelOverlappingChange", "rotatedChange", "rtlEnabledChange", "scrollBarChange", "seriesChange", "seriesSelectionModeChange", "seriesTemplateChange", "sizeChange", "stickyHoveringChange", "synchronizeMultiAxesChange", "themeChange", "titleChange", "tooltipChange", "valueAxisChange", "zoomAndPanChange"] }, { kind: "component", type: i6.DxoArgumentAxisComponent, selector: "dxo-argument-axis", inputs: ["aggregateByCategory", "aggregatedPointsPosition", "aggregationGroupWidth", "aggregationInterval", "allowDecimals", "argumentType", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "customPositionAxis", "discreteAxisDivisionMode", "endOnTick", "grid", "holidays", "hoverMode", "inverted", "label", "linearThreshold", "logarithmBase", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "offset", "opacity", "placeholderSize", "position", "singleWorkdays", "strips", "stripStyle", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width", "workdaysOnly", "workWeek", "firstPointOnStartAngle", "originValue", "period", "startAngle"], outputs: ["visualRangeChange"] }, { kind: "component", type: i6.DxoCommonSeriesSettingsComponent, selector: "dxo-common-series-settings", inputs: ["aggregation", "area", "argumentField", "axis", "bar", "barOverlapGroup", "barPadding", "barWidth", "border", "bubble", "candlestick", "closeValueField", "color", "cornerRadius", "dashStyle", "fullstackedarea", "fullstackedbar", "fullstackedline", "fullstackedspline", "fullstackedsplinearea", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "line", "lowValueField", "maxLabelCount", "minBarSize", "opacity", "openValueField", "pane", "point", "rangearea", "rangebar", "rangeValue1Field", "rangeValue2Field", "reduction", "scatter", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "spline", "splinearea", "stack", "stackedarea", "stackedbar", "stackedline", "stackedspline", "stackedsplinearea", "steparea", "stepline", "stock", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxoConnectorComponent, selector: "dxo-connector", inputs: ["color", "visible", "width", "opacity"] }, { kind: "component", type: i6.DxiSeriesComponent, selector: "dxi-series", inputs: ["aggregation", "argumentField", "axis", "barOverlapGroup", "barPadding", "barWidth", "border", "closeValueField", "color", "cornerRadius", "dashStyle", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "lowValueField", "maxLabelCount", "minBarSize", "name", "opacity", "openValueField", "pane", "point", "rangeValue1Field", "rangeValue2Field", "reduction", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "stack", "tag", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxiValueAxisComponent, selector: "dxi-value-axis", inputs: ["aggregatedPointsPosition", "allowDecimals", "autoBreaksEnabled", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "discreteAxisDivisionMode", "endOnTick", "grid", "inverted", "label", "linearThreshold", "logarithmBase", "maxAutoBreakCount", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "multipleAxesSpacing", "name", "offset", "opacity", "pane", "placeholderSize", "position", "showZero", "strips", "stripStyle", "synchronizedValue", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "valueType", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width"], outputs: ["visualRangeChange"] }, { kind: "component", type: 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: i10.DxPieChartComponent, selector: "dx-pie-chart", inputs: ["adaptiveLayout", "animation", "annotations", "centerTemplate", "commonAnnotationSettings", "commonSeriesSettings", "customizeAnnotation", "customizeLabel", "customizePoint", "dataSource", "diameter", "disabled", "elementAttr", "export", "innerRadius", "legend", "loadingIndicator", "margin", "minDiameter", "palette", "paletteExtensionMode", "pathModified", "pointSelectionMode", "redrawOnResize", "resolveLabelOverlapping", "rtlEnabled", "segmentsDirection", "series", "seriesTemplate", "size", "sizeGroup", "startAngle", "theme", "title", "tooltip", "type"], outputs: ["onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onTooltipHidden", "onTooltipShown", "adaptiveLayoutChange", "animationChange", "annotationsChange", "centerTemplateChange", "commonAnnotationSettingsChange", "commonSeriesSettingsChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataSourceChange", "diameterChange", "disabledChange", "elementAttrChange", "exportChange", "innerRadiusChange", "legendChange", "loadingIndicatorChange", "marginChange", "minDiameterChange", "paletteChange", "paletteExtensionModeChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resolveLabelOverlappingChange", "rtlEnabledChange", "segmentsDirectionChange", "seriesChange", "seriesTemplateChange", "sizeChange", "sizeGroupChange", "startAngleChange", "themeChange", "titleChange", "tooltipChange", "typeChange"] }, { kind: "component", type: i10$1.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: 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: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: UserAccessComponent, selector: "app-user-access", inputs: ["userOptionContainer"], outputs: ["userOptionContainerChange"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "pipe", type: i4$2.JsonPipe, name: "json" }] });
+DashChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DashChartComponent, selector: "app-dash-chart", inputs: { chartconfigData: ["datasetmodal", "chartconfigData"] }, outputs: { getChartConfigOutPut: "getChartConfigOutPut" }, ngImport: i0, template: "<div class=\"mx-2\">\n    <div class=\"w-full m-2 border\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n            <ng-container *ngIf=\"chartType === 'doughnut' || chartType === 'pie'\">\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                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-pie-chart id=\"pie\" [type]=\"chartType\"\n                        [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" palette=\"Soft Pastel\"\n                        [dataSource]=\"dataSourseForChart\" centerTemplate=\"centerTemplate\"\n                        (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\" color=\"{{item.color}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                            <ng-container *ngIf=\"!item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                            horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n                            verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n                        <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n                        <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"#,##0.##\">\n                        </dxo-tooltip>\n                        <ng-container *ngIf=\"chartType === 'doughnut'\">\n                            <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n                                <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\"\n                                    opacity=\"0.0001\">\n                                </circle>\n\n                                <text text-anchor=\"middle\" style=\"font-size: 28px\" x=\"100\" y=\"100\" fill=\"#eee\"\n                                    *ngIf=\"chartConfig.displayCenterLabel\">\n                                    <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n                                    <!-- display: inline -->\n                                    <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n                                </text>\n                            </svg>\n                        </ng-container>\n\n                    </dx-pie-chart>\n                </div>\n            </ng-container>\n            <ng-container\n                *ngIf=\"chartType !== 'doughnut' && chartType !== 'funnel' && chartType !== 'bubble' && chartType !== 'pie'\">\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                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-chart id=\"chart\" [dataSource]=\"dataSourseForChart\" [palette]=\"chartConfig.palette\"\n                        [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                        [valueAxis]=\"chartConfig.valueAxisConfig\">\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.axis\">\n                                <dxi-value-axis [name]=\"item.axis\" [position]=\"item.position\">\n                                    <dxo-title [text]=\"item.name\"></dxo-title>\n                                </dxi-value-axis>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-argument-axis>\n                            <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n                        </dxo-argument-axis>\n                        <dxo-tooltip [enabled]=\"true\" [shared]=\"true\"></dxo-tooltip>\n                        <dxo-common-series-settings\n                            [argumentField]=\"chartConfig.argumentField\"></dxo-common-series-settings>\n                        <!-- for others single access chart start -->\n                        <ng-container *ngIf=\"chartType !== 'stackedBar' && chartType !== 'line'\">\n                            <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                                <ng-container *ngIf=\"item.color\">\n                                    <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\"\n                                        axis=\"{{item.axis}}\" name=\"{{item.name}}\" color=\"{{item.color}}\">\n                                    </dxi-series>\n                                </ng-container>\n                                <ng-container *ngIf=\"!item.color\">\n                                    <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\"\n                                        axis=\"{{item.axis}}\" name=\"{{item.name}}\">\n                                    </dxi-series>\n                                </ng-container>\n                            </ng-container>\n                        </ng-container>\n                        <!-- for others single access chart end -->\n\n                        <!-- for stackber start -->\n                        <ng-container *ngIf=\"chartType === 'stackedBar' || chartType === 'line'\">\n                            <ng-container *ngFor=\"let item of chartWithThreeDimentionDataSeries\">\n                                <dxi-series valueField=\"{{item}}\" name=\"{{item}}\" type=\"{{chartType}}\"></dxi-series>\n                            </ng-container>\n                        </ng-container>\n                        <!-- for stackber end -->\n                        <dxo-size [height]=\"chartConfig.size\"></dxo-size>\n                        <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                            [verticalAlignment]=\"chartConfig.verticalAlignment\"\n                            [horizontalAlignment]=\"chartConfig.horizontalAlignment\"></dxo-legend>\n                    </dx-chart>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"chartType === 'funnel'\">\n\n            </ng-container>\n            <ng-container *ngIf=\"chartType === 'bubble'\">\n                <div class=\"mx-5\">\n                    <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                        <div class=\"flex flex-row\">\n                            <div class=\"h-10 text-sm items-center min-w-24 max-w-[30%] justify-center flex\">\n                                {{item.datasource}}\n                            </div>\n                            <div class=\"inline-block \">\n                                <div class=\"flex flex-nowrap justify-center \">\n                                    <ng-container *ngFor=\"let box of item.dataset\">\n                                        <div class=\"flex-shrink-0 min-w-10 max-w-[20%] h-10 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                            [matTooltip]=\"'Record Date: ' + box.recordDate + '\\nRecharge Count: ' + box.toolTip\"\n                                            matTooltipClass=\"custom-tooltip\">\n                                            <div class=\"rounded-full\" [ngStyle]=\"{\n                                        'background-color': box.isHovered ? 'rgb(135, 184, 106)' : box.color,\n                                        'width.px': box.size,\n                                        'hover': box.hover,\n                                        'height.px': box.size\n                                      }\" (mouseenter)=\"box.isHovered = true\" (mouseleave)=\"box.isHovered = false\">\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <div class=\"inline-block\">\n                        <div class=\"flex flex-nowrap justify-center\">\n                            <div class=\"flex-shrink-0 w-24 max-w-[20%] h-full flex items-center justify-center\"></div>\n                            <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                                class=\"flex-shrink-0 w-10 max-w-[20%] min-h-14 flex text-sm items-center justify-center my-1\"\n                                [ngStyle]=\"{'height': 'auto'}\">\n                                <span class=\"text-rotate\">\n                                    {{item}}\n                                </span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n\n        </ng-container>\n\n    </div>\n    <div class=\"w-full m-2 border\">\n        <div class=\"flex flex-row mb-1\">\n            <div class=\"w-1/3 mx-1\">\n                <dx-select-box [dataSource]=\"chartAxisSource\" [(ngModel)]=\"chartAccess\" placeholder=\"Chart Type\"\n                    displayExpr=\"name\" valueExpr=\"value\" (onValueChanged)=\"getChartAccessType($event)\">\n                </dx-select-box>\n            </div>\n            <div class=\"w-1/3 mx-1\">\n                <ng-container *ngIf=\"chartAccess === 'single'\">\n                    <dx-select-box [items]=\"chartTypeSource\" (onValueChanged)=\"getChartType($event)\"\n                        [(ngModel)]=\"chartType\"></dx-select-box>\n                </ng-container>\n                <ng-container *ngIf=\"chartAccess === 'multy'\">\n                    <dx-select-box [items]=\"componentNamesForMultyAccess\" displayExpr=\"item\" valueExpr=\"compName\"\n                        [(ngModel)]=\"componentName\"></dx-select-box>\n                </ng-container>\n            </div>\n        </div>\n        <ng-container *ngIf=\"chartAccess === 'single'\">\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 === 'columns',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                            }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                            Columns\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                            }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                            Properties\n                        </button>\n                    </li>\n                    <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 === 'permission',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'permission'\n                            }\" (click)=\"setActiveTab('permission')\" type=\"button\" role=\"tab\">\n                            Manage Permissions\n                        </button>\n                    </li>\n                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n                        <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                            Config\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex justify-between\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Title</div>\n                                    <dx-text-box\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.title\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Data Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Format </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></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)]=\"mainChartCourceObject.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 \">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Legend Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Date Format </div>\n                            <dx-select-box [items]=\"['MM-DD','YYYY-MM-DD']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.displayDateFormat\"></dx-select-box>\n                        </div>\n\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\">Sort By</div>\n                            <dx-tag-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.chartSortBy\"></dx-tag-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\">Data Group By</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\" \n                                [(ngModel)]=\"chartConfig.dataGroupBy\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\">Function Type</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['sum','avg','min','max','count']\"\n                                [(ngModel)]=\"chartConfig.functionType\" (onValueChanged)=\"getDataGroupBy($event)\"></dx-select-box>\n                        </div>\n\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2 mt-8\"> </div>\n                            <dx-check-box [(ngModel)]=\"mainChartCourceObject.kpiConfig.descendingOrder\"\n                                text=\"Descending Order\"></dx-check-box>\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Color Palette</div>\n                                    <dx-select-box [items]=\"doughnut_color_palette\"\n                                        [(ngModel)]=\"chartConfig.palette\"></dx-select-box>\n                                </div>\n                                <div class=\"mt-7\">\n                                    <dx-check-box [value]=\"chartConfig.labelDisplay\"\n                                        [(ngModel)]=\"chartConfig.labelDisplay\" text=\"Label Display\"></dx-check-box>\n                                </div>\n\n                            </div>\n\n\n                        </div>\n\n\n\n\n                    </div>\n\n                    <div class=\"m-3 p-4 bg-white border border-gray-300 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\"\n                        *ngIf=\"isAdvanceContainer\">\n                        <h6\n                            class=\"mb-2 text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3 flex items-center capitalize\">\n                            Advance Columns for {{chartType}} Chart\n                            <div class=\"ml-auto\">\n\n                            </div>\n                        </h6>\n                        <div class=\"flex flex-row\" *ngIf=\"chartType === 'stackedBar' || chartType === 'line' \">\n                            <div class=\"w-1/3 px-2 mt-2\">\n                                <div class=\"text-md mb-2\"> Chart Group By </div>\n                                <dx-select-box [items]=\"configColume\" (onValueChanged)=\"getChartStackbarChart($event)\"\n                                    [(ngModel)]=\"chartConfig.chartGroupBy\"></dx-select-box>\n                            </div>\n                        </div>\n                        <div class=\"flex flex-row\" *ngIf=\"chartType === 'bubble'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2 w-full\">\n                                    <div class=\"text-md mb-1\"> Source Field</div>\n                                    <dx-select-box [items]=\"configColume\"\n                                        [(ngModel)]=\"chartConfig.sourceField\"></dx-select-box>\n                                </div>\n                                <div class=\"mr-2 w-full\">\n                                    <div class=\"text-md mb-1\"> Min Bubble Size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.minBubbleSize\"></dx-text-box>\n                                </div>\n                                <div class=\"mr-2 w-full\">\n                                    <div class=\"text-md mb-1\"> Max bubble size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.maxBubbleSize\"></dx-text-box>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"flex flex-row\" *ngIf=\"chartType === 'doughnut' || chartType === 'pie'\">\n                            <div class=\" flex flex-row\">\n                                <!-- <div class=\"w-1/3 px-2 mt-2\">\n                                    <div class=\"text-md mb-2\"> Chart Group By </div>\n                                    <dx-select-box [items]=\"configColume\"\n                                        (onValueChanged)=\"getChartStackbarChart($event)\"\n                                        [(ngModel)]=\"chartConfig.chartGroupBy\"></dx-select-box>\n\n\n                                </div> -->\n                                <div class=\"mt-7 mx-2\">\n                                    <dx-check-box [(ngModel)]=\"chartConfig.displayCenterLabel\"\n                                        text=\"Display Center Label\"></dx-check-box>\n                                </div>\n                            </div>\n                        </div>\n\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <div class=\"h-60 overflow-x-auto\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-row border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index\">\n\n                                <div class=\"px-1 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-1 mb-1 w-1/4\" *ngIf=\"chartType !== 'doughnut' && chartType !== 'pie'\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"text-center mt-6 w-1/6\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\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                            </div>\n                            <div class=\"flex flex-row justify-end my-2\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Colume</button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'properties'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-loader *ngIf=\"isLoader\"></app-loader>\n                        <ng-container *ngIf=\"!isLoader\">\n                            <div class=\"flex flex-row justify-between border-b py-3\">\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                        text=\"Enable Click Event\"></dx-check-box>\n                                </div>\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                        text=\"Enable Right Click\"></dx-check-box>\n                                </div>\n                            </div>\n                            <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                                <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                        Type\n                                        Option\n                                    </div>\n                                    <div class=\"w-full p-3 border-x border-b \">\n                                        <div class=\"flex flex-row\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Event Type</div>\n                                            </div>\n                                            <div class=\"w-full\">\n                                                <dx-select-box\n                                                    [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','popup','navigateToPage']\"\n                                                    (onValueChanged)=\"getSelectedEventType($event)\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                            </div>\n                                        </div>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType === 'popup'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views For Popup</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'navigateToPage'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Pages</div>\n                                                    <dx-select-box [items]=\"allConfiguredPage\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedPage\"\n                                                        valueExpr=\"pageId\" displayExpr=\"pageName\"\n                                                        [searchEnabled]=\"true\"></dx-select-box>\n                                                </div>\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Params</div>\n                                                    <dx-text-box\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedParams\"></dx-text-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *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\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'sameViewDrilldown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'optionalDrillDown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <ng-container\n                                                        *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                        <div class=\"flex flex-row justify-between\">\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                    [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                    displayExpr=\"viewName\"\n                                                                    [showSelectionControls]=\"true\"\n                                                                    [maxDisplayedTags]=\"2\"\n                                                                    [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                            </div>\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Params</div>\n                                                                <dx-text-box\n                                                                    [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                            </div>\n                                                            <div class=\"mx-2\">\n                                                                <button\n                                                                    class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                    (click)=\"deleteAssociatedParams(i)\"><i\n                                                                        class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                                </button>\n                                                            </div>\n                                                        </div>\n                                                    </ng-container>\n                                                    <div class=\"flex flex-row justify-end mt-4\">\n                                                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                            (click)=\"addAssociatedParams()\">Add\n                                                            Params</button>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                            (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                    </div>\n                                </div>\n\n                            </div>\n                        </ng-container>\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'permission'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n                        </app-user-access>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"chartAccess === 'multy'\">\n            <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n                <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                            }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                            Basic\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                            }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                            Columns\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                            }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                            Properties\n                        </button>\n                    </li>\n                    <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 === 'permission',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'permission'\n                            }\" (click)=\"setActiveTab('permission')\" type=\"button\" role=\"tab\">\n                            Manage Permissions\n                        </button>\n                    </li>\n                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n                        <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                            Config\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex justify-between\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Title</div>\n                                    <dx-text-box\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.title\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Data Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Format </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></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)]=\"mainChartCourceObject.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2\">\n                            <div class=\"text-md mb-1\">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\" [value]=\"'center'\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> legent Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\" [value]=\"'bottom'\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Format </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Date Format </div>\n                            <dx-select-box [items]=\"['MM-DD','YYYY-MM-DD']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.displayDateFormat\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\">Sort By</div>\n                            <dx-tag-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.chartSortBy\"></dx-tag-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2 mt-6\"> </div>\n                            <dx-check-box [(ngModel)]=\"mainChartCourceObject.kpiConfig.descendingOrder\"\n                                text=\"Descending Order\"></dx-check-box>\n                        </div>\n                    </div>\n\n\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-wrap border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index;\">\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-2\"> Type</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"chartTypeSource\" [value]=\"'spline'\"\n                                        [(ngModel)]=\"item.type\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\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 my-1 w-1/4\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\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                            </div>\n                            <div class=\"flex flex-row justify-end my-2\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Columns</button>\n                            </div>\n                        </div>\n                    </dx-scroll-view>\n                </div>\n                <div *ngIf=\"activeTab === 'properties'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-loader *ngIf=\"isLoader\"></app-loader>\n                        <ng-container *ngIf=\"!isLoader\">\n                            <div class=\"flex flex-row justify-between border-b py-3\">\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                        text=\"Enable Click Event\"></dx-check-box>\n                                </div>\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                        text=\"Enable Right Click\"></dx-check-box>\n                                </div>\n                            </div>\n                            <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                                <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                        Type\n                                        Option\n                                    </div>\n                                    <div class=\"w-full p-3 border-x border-b \">\n                                        <div class=\"flex flex-row\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Event Type</div>\n                                            </div>\n                                            <div class=\"w-full\">\n                                                <dx-select-box\n                                                    [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','popup','navigateToPage']\"\n                                                    (onValueChanged)=\"getSelectedEventType($event)\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                            </div>\n                                        </div>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'navigateToPage'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Pages</div>\n                                                    <dx-select-box [items]=\"allConfiguredPage\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedPage\"\n                                                        valueExpr=\"pageId\" displayExpr=\"pageName\"\n                                                        [searchEnabled]=\"true\"></dx-select-box>\n                                                </div>\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Params</div>\n                                                    <dx-text-box\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedParams\"></dx-text-box>\n\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *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\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType === 'popup'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views For Popup</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'sameViewDrilldown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'optionalDrillDown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <ng-container\n                                                        *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                        <div class=\"flex flex-row justify-between\">\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                    [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                    displayExpr=\"viewName\"\n                                                                    [showSelectionControls]=\"true\"\n                                                                    [maxDisplayedTags]=\"2\"\n                                                                    [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                            </div>\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Params</div>\n                                                                <dx-text-box\n                                                                    [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                            </div>\n                                                            <div class=\"mx-2\">\n                                                                <button\n                                                                    class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                    (click)=\"deleteAssociatedParams(i)\"><i\n                                                                        class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                                </button>\n                                                            </div>\n                                                        </div>\n                                                    </ng-container>\n                                                    <div class=\"flex flex-row justify-end mt-4\">\n                                                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                            (click)=\"addAssociatedParams()\">Add\n                                                            Params</button>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                            (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                    </div>\n                                </div>\n\n                            </div>\n                        </ng-container>\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'permission'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n                        </app-user-access>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n\n\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)=\"isJsonPreview = true\">\n                Preview</button>\n            <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n                Preview</button>\n        </div>\n        <div class=\"flex justify-end mx-1 flex-grow\">\n            <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n                (click)=\"getSaveChartConfig()\">Submit</button>\n        </div>\n    </div>\n</div>\n\n\n\n", 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: "directive", type: i4$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6.DxoLabelComponent, selector: "dxo-label", inputs: ["connectorColor", "connectorWidth", "customizeText", "font", "format", "indent", "visible", "horizontalAlignment", "position", "text", "verticalAlignment", "alignment", "customizeHint", "displayMode", "indentFromAxis", "overlappingBehavior", "rotationAngle", "staggeringSpacing", "template", "textOverflow", "wordWrap", "argumentFormat", "backgroundColor", "border", "connector", "displayFormat", "horizontalOffset", "showForZeroValues", "verticalOffset", "hideFirstOrLast", "indentFromTick", "useRangeColors", "location", "showColon", "radialOffset", "topIndent", "shadow", "useNodeColors", "dataField", "enabled"] }, { kind: "component", type: i6.DxoLegendComponent, selector: "dxo-legend", inputs: ["backgroundColor", "border", "columnCount", "columnItemSpacing", "customizeHint", "customizeItems", "customizeText", "font", "horizontalAlignment", "itemsAlignment", "itemTextFormat", "itemTextPosition", "margin", "markerSize", "markerTemplate", "orientation", "paddingLeftRight", "paddingTopBottom", "rowCount", "rowItemSpacing", "title", "verticalAlignment", "visible", "hoverMode", "position"] }, { kind: "component", type: i6.DxoTitleComponent, selector: "dxo-title", inputs: ["font", "horizontalAlignment", "margin", "placeholderSize", "subtitle", "text", "verticalAlignment", "textOverflow", "wordWrap", "alignment"] }, { kind: "component", type: i6.DxoSizeComponent, selector: "dxo-size", inputs: ["height", "width"] }, { kind: "component", type: i6.DxoTooltipComponent, selector: "dxo-tooltip", inputs: ["arrowLength", "border", "color", "container", "contentTemplate", "cornerRadius", "customizeTooltip", "enabled", "font", "format", "interactive", "opacity", "paddingLeftRight", "paddingTopBottom", "shadow", "zIndex", "argumentFormat", "location", "shared", "isShown", "text", "position", "showMode", "customizeLinkTooltip", "customizeNodeTooltip", "linkTooltipTemplate", "nodeTooltipTemplate"] }, { kind: "component", type: i7$2.DxChartComponent, selector: "dx-chart", inputs: ["adaptiveLayout", "adjustOnZoom", "animation", "annotations", "argumentAxis", "autoHidePointMarkers", "barGroupPadding", "barGroupWidth", "commonAnnotationSettings", "commonAxisSettings", "commonPaneSettings", "commonSeriesSettings", "containerBackgroundColor", "crosshair", "customizeAnnotation", "customizeLabel", "customizePoint", "dataPrepareSettings", "dataSource", "defaultPane", "disabled", "elementAttr", "export", "legend", "loadingIndicator", "margin", "maxBubbleSize", "minBubbleSize", "negativesAsZeroes", "palette", "paletteExtensionMode", "panes", "pathModified", "pointSelectionMode", "redrawOnResize", "resizePanesOnZoom", "resolveLabelOverlapping", "rotated", "rtlEnabled", "scrollBar", "series", "seriesSelectionMode", "seriesTemplate", "size", "stickyHovering", "synchronizeMultiAxes", "theme", "title", "tooltip", "valueAxis", "zoomAndPan"], outputs: ["onArgumentAxisClick", "onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onSeriesClick", "onSeriesHoverChanged", "onSeriesSelectionChanged", "onTooltipHidden", "onTooltipShown", "onZoomEnd", "onZoomStart", "adaptiveLayoutChange", "adjustOnZoomChange", "animationChange", "annotationsChange", "argumentAxisChange", "autoHidePointMarkersChange", "barGroupPaddingChange", "barGroupWidthChange", "commonAnnotationSettingsChange", "commonAxisSettingsChange", "commonPaneSettingsChange", "commonSeriesSettingsChange", "containerBackgroundColorChange", "crosshairChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataPrepareSettingsChange", "dataSourceChange", "defaultPaneChange", "disabledChange", "elementAttrChange", "exportChange", "legendChange", "loadingIndicatorChange", "marginChange", "maxBubbleSizeChange", "minBubbleSizeChange", "negativesAsZeroesChange", "paletteChange", "paletteExtensionModeChange", "panesChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resizePanesOnZoomChange", "resolveLabelOverlappingChange", "rotatedChange", "rtlEnabledChange", "scrollBarChange", "seriesChange", "seriesSelectionModeChange", "seriesTemplateChange", "sizeChange", "stickyHoveringChange", "synchronizeMultiAxesChange", "themeChange", "titleChange", "tooltipChange", "valueAxisChange", "zoomAndPanChange"] }, { kind: "component", type: i6.DxoArgumentAxisComponent, selector: "dxo-argument-axis", inputs: ["aggregateByCategory", "aggregatedPointsPosition", "aggregationGroupWidth", "aggregationInterval", "allowDecimals", "argumentType", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "customPositionAxis", "discreteAxisDivisionMode", "endOnTick", "grid", "holidays", "hoverMode", "inverted", "label", "linearThreshold", "logarithmBase", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "offset", "opacity", "placeholderSize", "position", "singleWorkdays", "strips", "stripStyle", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width", "workdaysOnly", "workWeek", "firstPointOnStartAngle", "originValue", "period", "startAngle"], outputs: ["visualRangeChange"] }, { kind: "component", type: i6.DxoCommonSeriesSettingsComponent, selector: "dxo-common-series-settings", inputs: ["aggregation", "area", "argumentField", "axis", "bar", "barOverlapGroup", "barPadding", "barWidth", "border", "bubble", "candlestick", "closeValueField", "color", "cornerRadius", "dashStyle", "fullstackedarea", "fullstackedbar", "fullstackedline", "fullstackedspline", "fullstackedsplinearea", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "line", "lowValueField", "maxLabelCount", "minBarSize", "opacity", "openValueField", "pane", "point", "rangearea", "rangebar", "rangeValue1Field", "rangeValue2Field", "reduction", "scatter", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "spline", "splinearea", "stack", "stackedarea", "stackedbar", "stackedline", "stackedspline", "stackedsplinearea", "steparea", "stepline", "stock", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxoConnectorComponent, selector: "dxo-connector", inputs: ["color", "visible", "width", "opacity"] }, { kind: "component", type: i6.DxiSeriesComponent, selector: "dxi-series", inputs: ["aggregation", "argumentField", "axis", "barOverlapGroup", "barPadding", "barWidth", "border", "closeValueField", "color", "cornerRadius", "dashStyle", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "lowValueField", "maxLabelCount", "minBarSize", "name", "opacity", "openValueField", "pane", "point", "rangeValue1Field", "rangeValue2Field", "reduction", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "stack", "tag", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxiValueAxisComponent, selector: "dxi-value-axis", inputs: ["aggregatedPointsPosition", "allowDecimals", "autoBreaksEnabled", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "discreteAxisDivisionMode", "endOnTick", "grid", "inverted", "label", "linearThreshold", "logarithmBase", "maxAutoBreakCount", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "multipleAxesSpacing", "name", "offset", "opacity", "pane", "placeholderSize", "position", "showZero", "strips", "stripStyle", "synchronizedValue", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "valueType", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width"], outputs: ["visualRangeChange"] }, { kind: "component", type: 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: i10.DxPieChartComponent, selector: "dx-pie-chart", inputs: ["adaptiveLayout", "animation", "annotations", "centerTemplate", "commonAnnotationSettings", "commonSeriesSettings", "customizeAnnotation", "customizeLabel", "customizePoint", "dataSource", "diameter", "disabled", "elementAttr", "export", "innerRadius", "legend", "loadingIndicator", "margin", "minDiameter", "palette", "paletteExtensionMode", "pathModified", "pointSelectionMode", "redrawOnResize", "resolveLabelOverlapping", "rtlEnabled", "segmentsDirection", "series", "seriesTemplate", "size", "sizeGroup", "startAngle", "theme", "title", "tooltip", "type"], outputs: ["onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onTooltipHidden", "onTooltipShown", "adaptiveLayoutChange", "animationChange", "annotationsChange", "centerTemplateChange", "commonAnnotationSettingsChange", "commonSeriesSettingsChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataSourceChange", "diameterChange", "disabledChange", "elementAttrChange", "exportChange", "innerRadiusChange", "legendChange", "loadingIndicatorChange", "marginChange", "minDiameterChange", "paletteChange", "paletteExtensionModeChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resolveLabelOverlappingChange", "rtlEnabledChange", "segmentsDirectionChange", "seriesChange", "seriesTemplateChange", "sizeChange", "sizeGroupChange", "startAngleChange", "themeChange", "titleChange", "tooltipChange", "typeChange"] }, { kind: "component", type: i10$1.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: 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: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: UserAccessComponent, selector: "app-user-access", inputs: ["userOptionContainer"], outputs: ["userOptionContainerChange"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "pipe", type: i4$2.JsonPipe, name: "json" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-dash-chart', template: "<div class=\"mx-2\">\n    <div class=\"w-full m-2 border\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n            <ng-container *ngIf=\"chartType === 'doughnut' || chartType === 'pie'\">\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                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-pie-chart id=\"pie\" [type]=\"chartType\"\n                        [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" palette=\"Soft Pastel\"\n                        [dataSource]=\"dataSourseForChart\" centerTemplate=\"centerTemplate\"\n                        (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\" color=\"{{item.color}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                            <ng-container *ngIf=\"!item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                            horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n                            verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n                        <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n                        <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"#,##0.##\">\n                        </dxo-tooltip>\n                        <ng-container *ngIf=\"chartType === 'doughnut'\">\n                            <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n                                <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\"\n                                    opacity=\"0.0001\">\n                                </circle>\n\n                                <text text-anchor=\"middle\" style=\"font-size: 28px\" x=\"100\" y=\"100\" fill=\"#eee\"\n                                    *ngIf=\"chartConfig.displayCenterLabel\">\n                                    <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n                                    <!-- display: inline -->\n                                    <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n                                </text>\n                            </svg>\n                        </ng-container>\n\n                    </dx-pie-chart>\n                </div>\n            </ng-container>\n            <ng-container\n                *ngIf=\"chartType !== 'doughnut' && chartType !== 'funnel' && chartType !== 'bubble' && chartType !== 'pie'\">\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                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-chart id=\"chart\" [dataSource]=\"dataSourseForChart\" [palette]=\"chartConfig.palette\"\n                        [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                        [valueAxis]=\"chartConfig.valueAxisConfig\">\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.axis\">\n                                <dxi-value-axis [name]=\"item.axis\" [position]=\"item.position\">\n                                    <dxo-title [text]=\"item.name\"></dxo-title>\n                                </dxi-value-axis>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-argument-axis>\n                            <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n                        </dxo-argument-axis>\n                        <dxo-tooltip [enabled]=\"true\" [shared]=\"true\"></dxo-tooltip>\n                        <dxo-common-series-settings\n                            [argumentField]=\"chartConfig.argumentField\"></dxo-common-series-settings>\n                        <!-- for others single access chart start -->\n                        <ng-container *ngIf=\"chartType !== 'stackedBar' && chartType !== 'line'\">\n                            <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                                <ng-container *ngIf=\"item.color\">\n                                    <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\"\n                                        axis=\"{{item.axis}}\" name=\"{{item.name}}\" color=\"{{item.color}}\">\n                                    </dxi-series>\n                                </ng-container>\n                                <ng-container *ngIf=\"!item.color\">\n                                    <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\"\n                                        axis=\"{{item.axis}}\" name=\"{{item.name}}\">\n                                    </dxi-series>\n                                </ng-container>\n                            </ng-container>\n                        </ng-container>\n                        <!-- for others single access chart end -->\n\n                        <!-- for stackber start -->\n                        <ng-container *ngIf=\"chartType === 'stackedBar' || chartType === 'line'\">\n                            <ng-container *ngFor=\"let item of chartWithThreeDimentionDataSeries\">\n                                <dxi-series valueField=\"{{item}}\" name=\"{{item}}\" type=\"{{chartType}}\"></dxi-series>\n                            </ng-container>\n                        </ng-container>\n                        <!-- for stackber end -->\n                        <dxo-size [height]=\"chartConfig.size\"></dxo-size>\n                        <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                            [verticalAlignment]=\"chartConfig.verticalAlignment\"\n                            [horizontalAlignment]=\"chartConfig.horizontalAlignment\"></dxo-legend>\n                    </dx-chart>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"chartType === 'funnel'\">\n\n            </ng-container>\n            <ng-container *ngIf=\"chartType === 'bubble'\">\n                <div class=\"mx-5\">\n                    <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                        <div class=\"flex flex-row\">\n                            <div class=\"h-10 text-sm items-center min-w-24 max-w-[30%] justify-center flex\">\n                                {{item.datasource}}\n                            </div>\n                            <div class=\"inline-block \">\n                                <div class=\"flex flex-nowrap justify-center \">\n                                    <ng-container *ngFor=\"let box of item.dataset\">\n                                        <div class=\"flex-shrink-0 min-w-10 max-w-[20%] h-10 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                            [matTooltip]=\"'Record Date: ' + box.recordDate + '\\nRecharge Count: ' + box.toolTip\"\n                                            matTooltipClass=\"custom-tooltip\">\n                                            <div class=\"rounded-full\" [ngStyle]=\"{\n                                        'background-color': box.isHovered ? 'rgb(135, 184, 106)' : box.color,\n                                        'width.px': box.size,\n                                        'hover': box.hover,\n                                        'height.px': box.size\n                                      }\" (mouseenter)=\"box.isHovered = true\" (mouseleave)=\"box.isHovered = false\">\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <div class=\"inline-block\">\n                        <div class=\"flex flex-nowrap justify-center\">\n                            <div class=\"flex-shrink-0 w-24 max-w-[20%] h-full flex items-center justify-center\"></div>\n                            <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                                class=\"flex-shrink-0 w-10 max-w-[20%] min-h-14 flex text-sm items-center justify-center my-1\"\n                                [ngStyle]=\"{'height': 'auto'}\">\n                                <span class=\"text-rotate\">\n                                    {{item}}\n                                </span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n\n        </ng-container>\n\n    </div>\n    <div class=\"w-full m-2 border\">\n        <div class=\"flex flex-row mb-1\">\n            <div class=\"w-1/3 mx-1\">\n                <dx-select-box [dataSource]=\"chartAxisSource\" [(ngModel)]=\"chartAccess\" placeholder=\"Chart Type\"\n                    displayExpr=\"name\" valueExpr=\"value\" (onValueChanged)=\"getChartAccessType($event)\">\n                </dx-select-box>\n            </div>\n            <div class=\"w-1/3 mx-1\">\n                <ng-container *ngIf=\"chartAccess === 'single'\">\n                    <dx-select-box [items]=\"chartTypeSource\" (onValueChanged)=\"getChartType($event)\"\n                        [(ngModel)]=\"chartType\"></dx-select-box>\n                </ng-container>\n                <ng-container *ngIf=\"chartAccess === 'multy'\">\n                    <dx-select-box [items]=\"componentNamesForMultyAccess\" displayExpr=\"item\" valueExpr=\"compName\"\n                        [(ngModel)]=\"componentName\"></dx-select-box>\n                </ng-container>\n            </div>\n        </div>\n        <ng-container *ngIf=\"chartAccess === 'single'\">\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 === 'columns',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                            }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                            Columns\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                            }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                            Properties\n                        </button>\n                    </li>\n                    <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 === 'permission',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'permission'\n                            }\" (click)=\"setActiveTab('permission')\" type=\"button\" role=\"tab\">\n                            Manage Permissions\n                        </button>\n                    </li>\n                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n                        <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                            Config\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex justify-between\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Title</div>\n                                    <dx-text-box\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.title\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Data Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Format </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></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)]=\"mainChartCourceObject.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 \">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Legend Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Date Format </div>\n                            <dx-select-box [items]=\"['MM-DD','YYYY-MM-DD']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.displayDateFormat\"></dx-select-box>\n                        </div>\n\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\">Sort By</div>\n                            <dx-tag-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.chartSortBy\"></dx-tag-box>\n                        </div>\n\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2 mt-6\"> </div>\n                            <dx-check-box [(ngModel)]=\"mainChartCourceObject.kpiConfig.descendingOrder\"\n                                text=\"Descending Order\"></dx-check-box>\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Color Palette</div>\n                                    <dx-select-box [items]=\"doughnut_color_palette\"\n                                        [(ngModel)]=\"chartConfig.palette\"></dx-select-box>\n                                </div>\n                                <div class=\"mt-7\">\n                                    <dx-check-box [value]=\"chartConfig.labelDisplay\"\n                                        [(ngModel)]=\"chartConfig.labelDisplay\" text=\"Label Display\"></dx-check-box>\n                                </div>\n\n                            </div>\n\n\n                        </div>\n\n\n\n\n                    </div>\n\n                    <div class=\"m-3 p-4 bg-white border border-gray-300 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\"\n                        *ngIf=\"isAdvanceContainer\">\n                        <h6\n                            class=\"mb-2 text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3 flex items-center capitalize\">\n                            Advance Columns for {{chartType}} Chart\n                            <div class=\"ml-auto\">\n\n                            </div>\n                        </h6>\n                        <div class=\"flex flex-row\" *ngIf=\"chartType === 'stackedBar' || chartType === 'line' \">\n                            <div class=\"w-1/3 px-2 mt-2\">\n                                <div class=\"text-md mb-2\"> Chart Group By </div>\n                                <dx-select-box [items]=\"configColume\" (onValueChanged)=\"getChartStackbarChart($event)\"\n                                    [(ngModel)]=\"chartConfig.chartGroupBy\"></dx-select-box>\n                            </div>\n                        </div>\n                        <div class=\"flex flex-row\" *ngIf=\"chartType === 'bubble'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2 w-full\">\n                                    <div class=\"text-md mb-1\"> Source Field</div>\n                                    <dx-select-box [items]=\"configColume\"\n                                        [(ngModel)]=\"chartConfig.sourceField\"></dx-select-box>\n                                </div>\n                                <div class=\"mr-2 w-full\">\n                                    <div class=\"text-md mb-1\"> Min Bubble Size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.minBubbleSize\"></dx-text-box>\n                                </div>\n                                <div class=\"mr-2 w-full\">\n                                    <div class=\"text-md mb-1\"> Max bubble size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.maxBubbleSize\"></dx-text-box>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"flex flex-row\" *ngIf=\"chartType === 'doughnut' || chartType === 'pie'\">\n                            <div class=\" flex flex-row\">\n                                <!-- <div class=\"w-1/3 px-2 mt-2\">\n                                    <div class=\"text-md mb-2\"> Chart Group By </div>\n                                    <dx-select-box [items]=\"configColume\"\n                                        (onValueChanged)=\"getChartStackbarChart($event)\"\n                                        [(ngModel)]=\"chartConfig.chartGroupBy\"></dx-select-box>\n\n\n                                </div> -->\n                                <div class=\"mt-7 mx-2\">\n                                    <dx-check-box [(ngModel)]=\"chartConfig.displayCenterLabel\"\n                                        text=\"Display Center Label\"></dx-check-box>\n                                </div>\n                            </div>\n                        </div>\n\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <div class=\"h-60 overflow-x-auto\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-row border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index\">\n\n                                <div class=\"px-1 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-1 mb-1 w-1/4\" *ngIf=\"chartType !== 'doughnut' && chartType !== 'pie'\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"text-center mt-6 w-1/6\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\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                            </div>\n                            <div class=\"flex flex-row justify-end my-2\"\n                                *ngIf=\"chartType === 'doughnut' || chartType === 'pie'\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Series</button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'properties'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-loader *ngIf=\"isLoader\"></app-loader>\n                        <ng-container *ngIf=\"!isLoader\">\n                            <div class=\"flex flex-row justify-between border-b py-3\">\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                        text=\"Enable Click Event\"></dx-check-box>\n                                </div>\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                        text=\"Enable Right Click\"></dx-check-box>\n                                </div>\n                            </div>\n                            <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                                <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                        Type\n                                        Option\n                                    </div>\n                                    <div class=\"w-full p-3 border-x border-b \">\n                                        <div class=\"flex flex-row\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Event Type</div>\n                                            </div>\n                                            <div class=\"w-full\">\n                                                <dx-select-box\n                                                    [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','popup','navigateToPage']\"\n                                                    (onValueChanged)=\"getSelectedEventType($event)\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                            </div>\n                                        </div>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType === 'popup'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views For Popup</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'navigateToPage'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Pages</div>\n                                                    <dx-select-box [items]=\"allConfiguredPage\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedPage\"\n                                                        valueExpr=\"pageId\" displayExpr=\"pageName\"\n                                                        [searchEnabled]=\"true\"></dx-select-box>\n                                                </div>\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Params</div>\n                                                    <dx-text-box\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedParams\"></dx-text-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *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\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'sameViewDrilldown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'optionalDrillDown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <ng-container\n                                                        *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                        <div class=\"flex flex-row justify-between\">\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                    [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                    displayExpr=\"viewName\"\n                                                                    [showSelectionControls]=\"true\"\n                                                                    [maxDisplayedTags]=\"2\"\n                                                                    [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                            </div>\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Params</div>\n                                                                <dx-text-box\n                                                                    [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                            </div>\n                                                            <div class=\"mx-2\">\n                                                                <button\n                                                                    class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                    (click)=\"deleteAssociatedParams(i)\"><i\n                                                                        class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                                </button>\n                                                            </div>\n                                                        </div>\n                                                    </ng-container>\n                                                    <div class=\"flex flex-row justify-end mt-4\">\n                                                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                            (click)=\"addAssociatedParams()\">Add\n                                                            Params</button>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                            (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                    </div>\n                                </div>\n\n                            </div>\n                        </ng-container>\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'permission'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n                        </app-user-access>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"chartAccess === 'multy'\">\n            <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n                <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                            }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                            Basic\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                            }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                            Columns\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                            }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                            Properties\n                        </button>\n                    </li>\n                    <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 === 'permission',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'permission'\n                            }\" (click)=\"setActiveTab('permission')\" type=\"button\" role=\"tab\">\n                            Manage Permissions\n                        </button>\n                    </li>\n                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n                        <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                            Config\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex justify-between\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Title</div>\n                                    <dx-text-box\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.title\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Data Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Format </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></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)]=\"mainChartCourceObject.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2\">\n                            <div class=\"text-md mb-1\">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\" [value]=\"'center'\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> legent Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\" [value]=\"'bottom'\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Format </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Date Format </div>\n                            <dx-select-box [items]=\"['MM-DD','YYYY-MM-DD']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.displayDateFormat\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\">Sort By</div>\n                            <dx-tag-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.chartSortBy\"></dx-tag-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2 mt-6\"> </div>\n                            <dx-check-box [(ngModel)]=\"mainChartCourceObject.kpiConfig.descendingOrder\"\n                                text=\"Descending Order\"></dx-check-box>\n                        </div>\n                    </div>\n\n\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-wrap border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index;\">\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-2\"> Type</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"chartTypeSource\" [value]=\"'spline'\"\n                                        [(ngModel)]=\"item.type\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\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 my-1 w-1/4\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\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                            </div>\n                            <div class=\"flex flex-row justify-end my-2\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Columns</button>\n                            </div>\n                        </div>\n                    </dx-scroll-view>\n                </div>\n                <div *ngIf=\"activeTab === 'properties'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-loader *ngIf=\"isLoader\"></app-loader>\n                        <ng-container *ngIf=\"!isLoader\">\n                            <div class=\"flex flex-row justify-between border-b py-3\">\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                        text=\"Enable Click Event\"></dx-check-box>\n                                </div>\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                        text=\"Enable Right Click\"></dx-check-box>\n                                </div>\n                            </div>\n                            <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                                <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                        Type\n                                        Option\n                                    </div>\n                                    <div class=\"w-full p-3 border-x border-b \">\n                                        <div class=\"flex flex-row\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Event Type</div>\n                                            </div>\n                                            <div class=\"w-full\">\n                                                <dx-select-box\n                                                    [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','popup','navigateToPage']\"\n                                                    (onValueChanged)=\"getSelectedEventType($event)\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                            </div>\n                                        </div>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'navigateToPage'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Pages</div>\n                                                    <dx-select-box [items]=\"allConfiguredPage\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedPage\"\n                                                        valueExpr=\"pageId\" displayExpr=\"pageName\"\n                                                        [searchEnabled]=\"true\"></dx-select-box>\n                                                </div>\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Params</div>\n                                                    <dx-text-box\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedParams\"></dx-text-box>\n\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *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\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType === 'popup'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views For Popup</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'sameViewDrilldown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'optionalDrillDown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <ng-container\n                                                        *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                        <div class=\"flex flex-row justify-between\">\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                    [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                    displayExpr=\"viewName\"\n                                                                    [showSelectionControls]=\"true\"\n                                                                    [maxDisplayedTags]=\"2\"\n                                                                    [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                            </div>\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Params</div>\n                                                                <dx-text-box\n                                                                    [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                            </div>\n                                                            <div class=\"mx-2\">\n                                                                <button\n                                                                    class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                    (click)=\"deleteAssociatedParams(i)\"><i\n                                                                        class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                                </button>\n                                                            </div>\n                                                        </div>\n                                                    </ng-container>\n                                                    <div class=\"flex flex-row justify-end mt-4\">\n                                                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                            (click)=\"addAssociatedParams()\">Add\n                                                            Params</button>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                            (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                    </div>\n                                </div>\n\n                            </div>\n                        </ng-container>\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'permission'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n                        </app-user-access>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n\n\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)=\"isJsonPreview = true\">\n                Preview</button>\n            <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n                Preview</button>\n        </div>\n        <div class=\"flex justify-end mx-1 flex-grow\">\n            <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n                (click)=\"getSaveChartConfig()\">Submit</button>\n        </div>\n    </div>\n</div>" }]
+            args: [{ selector: 'app-dash-chart', template: "<div class=\"mx-2\">\n    <div class=\"w-full m-2 border\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n            <ng-container *ngIf=\"chartType === 'doughnut' || chartType === 'pie'\">\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                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-pie-chart id=\"pie\" [type]=\"chartType\"\n                        [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" palette=\"Soft Pastel\"\n                        [dataSource]=\"dataSourseForChart\" centerTemplate=\"centerTemplate\"\n                        (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\" color=\"{{item.color}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                            <ng-container *ngIf=\"!item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                            horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n                            verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n                        <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n                        <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"#,##0.##\">\n                        </dxo-tooltip>\n                        <ng-container *ngIf=\"chartType === 'doughnut'\">\n                            <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n                                <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\"\n                                    opacity=\"0.0001\">\n                                </circle>\n\n                                <text text-anchor=\"middle\" style=\"font-size: 28px\" x=\"100\" y=\"100\" fill=\"#eee\"\n                                    *ngIf=\"chartConfig.displayCenterLabel\">\n                                    <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n                                    <!-- display: inline -->\n                                    <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n                                </text>\n                            </svg>\n                        </ng-container>\n\n                    </dx-pie-chart>\n                </div>\n            </ng-container>\n            <ng-container\n                *ngIf=\"chartType !== 'doughnut' && chartType !== 'funnel' && chartType !== 'bubble' && chartType !== 'pie'\">\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                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-chart id=\"chart\" [dataSource]=\"dataSourseForChart\" [palette]=\"chartConfig.palette\"\n                        [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                        [valueAxis]=\"chartConfig.valueAxisConfig\">\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.axis\">\n                                <dxi-value-axis [name]=\"item.axis\" [position]=\"item.position\">\n                                    <dxo-title [text]=\"item.name\"></dxo-title>\n                                </dxi-value-axis>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-argument-axis>\n                            <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n                        </dxo-argument-axis>\n                        <dxo-tooltip [enabled]=\"true\" [shared]=\"true\"></dxo-tooltip>\n                        <dxo-common-series-settings\n                            [argumentField]=\"chartConfig.argumentField\"></dxo-common-series-settings>\n                        <!-- for others single access chart start -->\n                        <ng-container *ngIf=\"chartType !== 'stackedBar' && chartType !== 'line'\">\n                            <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                                <ng-container *ngIf=\"item.color\">\n                                    <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\"\n                                        axis=\"{{item.axis}}\" name=\"{{item.name}}\" color=\"{{item.color}}\">\n                                    </dxi-series>\n                                </ng-container>\n                                <ng-container *ngIf=\"!item.color\">\n                                    <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\"\n                                        axis=\"{{item.axis}}\" name=\"{{item.name}}\">\n                                    </dxi-series>\n                                </ng-container>\n                            </ng-container>\n                        </ng-container>\n                        <!-- for others single access chart end -->\n\n                        <!-- for stackber start -->\n                        <ng-container *ngIf=\"chartType === 'stackedBar' || chartType === 'line'\">\n                            <ng-container *ngFor=\"let item of chartWithThreeDimentionDataSeries\">\n                                <dxi-series valueField=\"{{item}}\" name=\"{{item}}\" type=\"{{chartType}}\"></dxi-series>\n                            </ng-container>\n                        </ng-container>\n                        <!-- for stackber end -->\n                        <dxo-size [height]=\"chartConfig.size\"></dxo-size>\n                        <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                            [verticalAlignment]=\"chartConfig.verticalAlignment\"\n                            [horizontalAlignment]=\"chartConfig.horizontalAlignment\"></dxo-legend>\n                    </dx-chart>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"chartType === 'funnel'\">\n\n            </ng-container>\n            <ng-container *ngIf=\"chartType === 'bubble'\">\n                <div class=\"mx-5\">\n                    <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                        <div class=\"flex flex-row\">\n                            <div class=\"h-10 text-sm items-center min-w-24 max-w-[30%] justify-center flex\">\n                                {{item.datasource}}\n                            </div>\n                            <div class=\"inline-block \">\n                                <div class=\"flex flex-nowrap justify-center \">\n                                    <ng-container *ngFor=\"let box of item.dataset\">\n                                        <div class=\"flex-shrink-0 min-w-10 max-w-[20%] h-10 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                            [matTooltip]=\"'Record Date: ' + box.recordDate + '\\nRecharge Count: ' + box.toolTip\"\n                                            matTooltipClass=\"custom-tooltip\">\n                                            <div class=\"rounded-full\" [ngStyle]=\"{\n                                        'background-color': box.isHovered ? 'rgb(135, 184, 106)' : box.color,\n                                        'width.px': box.size,\n                                        'hover': box.hover,\n                                        'height.px': box.size\n                                      }\" (mouseenter)=\"box.isHovered = true\" (mouseleave)=\"box.isHovered = false\">\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <div class=\"inline-block\">\n                        <div class=\"flex flex-nowrap justify-center\">\n                            <div class=\"flex-shrink-0 w-24 max-w-[20%] h-full flex items-center justify-center\"></div>\n                            <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                                class=\"flex-shrink-0 w-10 max-w-[20%] min-h-14 flex text-sm items-center justify-center my-1\"\n                                [ngStyle]=\"{'height': 'auto'}\">\n                                <span class=\"text-rotate\">\n                                    {{item}}\n                                </span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n\n        </ng-container>\n\n    </div>\n    <div class=\"w-full m-2 border\">\n        <div class=\"flex flex-row mb-1\">\n            <div class=\"w-1/3 mx-1\">\n                <dx-select-box [dataSource]=\"chartAxisSource\" [(ngModel)]=\"chartAccess\" placeholder=\"Chart Type\"\n                    displayExpr=\"name\" valueExpr=\"value\" (onValueChanged)=\"getChartAccessType($event)\">\n                </dx-select-box>\n            </div>\n            <div class=\"w-1/3 mx-1\">\n                <ng-container *ngIf=\"chartAccess === 'single'\">\n                    <dx-select-box [items]=\"chartTypeSource\" (onValueChanged)=\"getChartType($event)\"\n                        [(ngModel)]=\"chartType\"></dx-select-box>\n                </ng-container>\n                <ng-container *ngIf=\"chartAccess === 'multy'\">\n                    <dx-select-box [items]=\"componentNamesForMultyAccess\" displayExpr=\"item\" valueExpr=\"compName\"\n                        [(ngModel)]=\"componentName\"></dx-select-box>\n                </ng-container>\n            </div>\n        </div>\n        <ng-container *ngIf=\"chartAccess === 'single'\">\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 === 'columns',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                            }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                            Columns\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                            }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                            Properties\n                        </button>\n                    </li>\n                    <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 === 'permission',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'permission'\n                            }\" (click)=\"setActiveTab('permission')\" type=\"button\" role=\"tab\">\n                            Manage Permissions\n                        </button>\n                    </li>\n                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n                        <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                            Config\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex justify-between\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Title</div>\n                                    <dx-text-box\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.title\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Data Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Format </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></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)]=\"mainChartCourceObject.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 \">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Legend Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Date Format </div>\n                            <dx-select-box [items]=\"['MM-DD','YYYY-MM-DD']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.displayDateFormat\"></dx-select-box>\n                        </div>\n\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\">Sort By</div>\n                            <dx-tag-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.chartSortBy\"></dx-tag-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\">Data Group By</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\" \n                                [(ngModel)]=\"chartConfig.dataGroupBy\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\">Function Type</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['sum','avg','min','max','count']\"\n                                [(ngModel)]=\"chartConfig.functionType\" (onValueChanged)=\"getDataGroupBy($event)\"></dx-select-box>\n                        </div>\n\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2 mt-8\"> </div>\n                            <dx-check-box [(ngModel)]=\"mainChartCourceObject.kpiConfig.descendingOrder\"\n                                text=\"Descending Order\"></dx-check-box>\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Color Palette</div>\n                                    <dx-select-box [items]=\"doughnut_color_palette\"\n                                        [(ngModel)]=\"chartConfig.palette\"></dx-select-box>\n                                </div>\n                                <div class=\"mt-7\">\n                                    <dx-check-box [value]=\"chartConfig.labelDisplay\"\n                                        [(ngModel)]=\"chartConfig.labelDisplay\" text=\"Label Display\"></dx-check-box>\n                                </div>\n\n                            </div>\n\n\n                        </div>\n\n\n\n\n                    </div>\n\n                    <div class=\"m-3 p-4 bg-white border border-gray-300 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\"\n                        *ngIf=\"isAdvanceContainer\">\n                        <h6\n                            class=\"mb-2 text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3 flex items-center capitalize\">\n                            Advance Columns for {{chartType}} Chart\n                            <div class=\"ml-auto\">\n\n                            </div>\n                        </h6>\n                        <div class=\"flex flex-row\" *ngIf=\"chartType === 'stackedBar' || chartType === 'line' \">\n                            <div class=\"w-1/3 px-2 mt-2\">\n                                <div class=\"text-md mb-2\"> Chart Group By </div>\n                                <dx-select-box [items]=\"configColume\" (onValueChanged)=\"getChartStackbarChart($event)\"\n                                    [(ngModel)]=\"chartConfig.chartGroupBy\"></dx-select-box>\n                            </div>\n                        </div>\n                        <div class=\"flex flex-row\" *ngIf=\"chartType === 'bubble'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2 w-full\">\n                                    <div class=\"text-md mb-1\"> Source Field</div>\n                                    <dx-select-box [items]=\"configColume\"\n                                        [(ngModel)]=\"chartConfig.sourceField\"></dx-select-box>\n                                </div>\n                                <div class=\"mr-2 w-full\">\n                                    <div class=\"text-md mb-1\"> Min Bubble Size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.minBubbleSize\"></dx-text-box>\n                                </div>\n                                <div class=\"mr-2 w-full\">\n                                    <div class=\"text-md mb-1\"> Max bubble size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.maxBubbleSize\"></dx-text-box>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"flex flex-row\" *ngIf=\"chartType === 'doughnut' || chartType === 'pie'\">\n                            <div class=\" flex flex-row\">\n                                <!-- <div class=\"w-1/3 px-2 mt-2\">\n                                    <div class=\"text-md mb-2\"> Chart Group By </div>\n                                    <dx-select-box [items]=\"configColume\"\n                                        (onValueChanged)=\"getChartStackbarChart($event)\"\n                                        [(ngModel)]=\"chartConfig.chartGroupBy\"></dx-select-box>\n\n\n                                </div> -->\n                                <div class=\"mt-7 mx-2\">\n                                    <dx-check-box [(ngModel)]=\"chartConfig.displayCenterLabel\"\n                                        text=\"Display Center Label\"></dx-check-box>\n                                </div>\n                            </div>\n                        </div>\n\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <div class=\"h-60 overflow-x-auto\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-row border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index\">\n\n                                <div class=\"px-1 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-1 mb-1 w-1/4\" *ngIf=\"chartType !== 'doughnut' && chartType !== 'pie'\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"text-center mt-6 w-1/6\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\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                            </div>\n                            <div class=\"flex flex-row justify-end my-2\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Colume</button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'properties'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-loader *ngIf=\"isLoader\"></app-loader>\n                        <ng-container *ngIf=\"!isLoader\">\n                            <div class=\"flex flex-row justify-between border-b py-3\">\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                        text=\"Enable Click Event\"></dx-check-box>\n                                </div>\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                        text=\"Enable Right Click\"></dx-check-box>\n                                </div>\n                            </div>\n                            <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                                <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                        Type\n                                        Option\n                                    </div>\n                                    <div class=\"w-full p-3 border-x border-b \">\n                                        <div class=\"flex flex-row\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Event Type</div>\n                                            </div>\n                                            <div class=\"w-full\">\n                                                <dx-select-box\n                                                    [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','popup','navigateToPage']\"\n                                                    (onValueChanged)=\"getSelectedEventType($event)\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                            </div>\n                                        </div>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType === 'popup'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views For Popup</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'navigateToPage'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Pages</div>\n                                                    <dx-select-box [items]=\"allConfiguredPage\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedPage\"\n                                                        valueExpr=\"pageId\" displayExpr=\"pageName\"\n                                                        [searchEnabled]=\"true\"></dx-select-box>\n                                                </div>\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Params</div>\n                                                    <dx-text-box\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedParams\"></dx-text-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *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\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'sameViewDrilldown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'optionalDrillDown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <ng-container\n                                                        *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                        <div class=\"flex flex-row justify-between\">\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                    [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                    displayExpr=\"viewName\"\n                                                                    [showSelectionControls]=\"true\"\n                                                                    [maxDisplayedTags]=\"2\"\n                                                                    [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                            </div>\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Params</div>\n                                                                <dx-text-box\n                                                                    [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                            </div>\n                                                            <div class=\"mx-2\">\n                                                                <button\n                                                                    class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                    (click)=\"deleteAssociatedParams(i)\"><i\n                                                                        class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                                </button>\n                                                            </div>\n                                                        </div>\n                                                    </ng-container>\n                                                    <div class=\"flex flex-row justify-end mt-4\">\n                                                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                            (click)=\"addAssociatedParams()\">Add\n                                                            Params</button>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                            (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                    </div>\n                                </div>\n\n                            </div>\n                        </ng-container>\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'permission'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n                        </app-user-access>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"chartAccess === 'multy'\">\n            <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n                <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                            }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                            Basic\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                            }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                            Columns\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                            }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                            Properties\n                        </button>\n                    </li>\n                    <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 === 'permission',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'permission'\n                            }\" (click)=\"setActiveTab('permission')\" type=\"button\" role=\"tab\">\n                            Manage Permissions\n                        </button>\n                    </li>\n                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n                        <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                            Config\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex justify-between\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Title</div>\n                                    <dx-text-box\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.title\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Data Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Format </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></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)]=\"mainChartCourceObject.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2\">\n                            <div class=\"text-md mb-1\">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\" [value]=\"'center'\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> legent Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\" [value]=\"'bottom'\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Format </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Date Format </div>\n                            <dx-select-box [items]=\"['MM-DD','YYYY-MM-DD']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.displayDateFormat\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\">Sort By</div>\n                            <dx-tag-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.chartSortBy\"></dx-tag-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2 mt-6\"> </div>\n                            <dx-check-box [(ngModel)]=\"mainChartCourceObject.kpiConfig.descendingOrder\"\n                                text=\"Descending Order\"></dx-check-box>\n                        </div>\n                    </div>\n\n\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-wrap border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index;\">\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-2\"> Type</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"chartTypeSource\" [value]=\"'spline'\"\n                                        [(ngModel)]=\"item.type\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\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 my-1 w-1/4\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\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                            </div>\n                            <div class=\"flex flex-row justify-end my-2\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Columns</button>\n                            </div>\n                        </div>\n                    </dx-scroll-view>\n                </div>\n                <div *ngIf=\"activeTab === 'properties'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-loader *ngIf=\"isLoader\"></app-loader>\n                        <ng-container *ngIf=\"!isLoader\">\n                            <div class=\"flex flex-row justify-between border-b py-3\">\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                        text=\"Enable Click Event\"></dx-check-box>\n                                </div>\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                        text=\"Enable Right Click\"></dx-check-box>\n                                </div>\n                            </div>\n                            <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                                <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                        Type\n                                        Option\n                                    </div>\n                                    <div class=\"w-full p-3 border-x border-b \">\n                                        <div class=\"flex flex-row\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Event Type</div>\n                                            </div>\n                                            <div class=\"w-full\">\n                                                <dx-select-box\n                                                    [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','popup','navigateToPage']\"\n                                                    (onValueChanged)=\"getSelectedEventType($event)\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                            </div>\n                                        </div>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'navigateToPage'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Pages</div>\n                                                    <dx-select-box [items]=\"allConfiguredPage\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedPage\"\n                                                        valueExpr=\"pageId\" displayExpr=\"pageName\"\n                                                        [searchEnabled]=\"true\"></dx-select-box>\n                                                </div>\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Params</div>\n                                                    <dx-text-box\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedParams\"></dx-text-box>\n\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *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\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType === 'popup'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views For Popup</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'sameViewDrilldown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'optionalDrillDown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <ng-container\n                                                        *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                        <div class=\"flex flex-row justify-between\">\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                    [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                    displayExpr=\"viewName\"\n                                                                    [showSelectionControls]=\"true\"\n                                                                    [maxDisplayedTags]=\"2\"\n                                                                    [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                            </div>\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Params</div>\n                                                                <dx-text-box\n                                                                    [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                            </div>\n                                                            <div class=\"mx-2\">\n                                                                <button\n                                                                    class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                    (click)=\"deleteAssociatedParams(i)\"><i\n                                                                        class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                                </button>\n                                                            </div>\n                                                        </div>\n                                                    </ng-container>\n                                                    <div class=\"flex flex-row justify-end mt-4\">\n                                                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                            (click)=\"addAssociatedParams()\">Add\n                                                            Params</button>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                            (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                    </div>\n                                </div>\n\n                            </div>\n                        </ng-container>\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'permission'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n                        </app-user-access>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n\n\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)=\"isJsonPreview = true\">\n                Preview</button>\n            <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n                Preview</button>\n        </div>\n        <div class=\"flex justify-end mx-1 flex-grow\">\n            <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n                (click)=\"getSaveChartConfig()\">Submit</button>\n        </div>\n    </div>\n</div>\n\n\n\n" }]
         }], ctorParameters: function () { return [{ type: CommonService }, { type: ApplicationContentService }, { type: i4$1.ToastrService }]; }, propDecorators: { getChartConfigOutPut: [{
                 type: Output
             }], chartconfigData: [{
@@ -8943,6 +9008,7 @@ class GammaAdvanceChartComponent {
             return;
         }
         else {
+            debugger;
             this.isLoader = true;
             this.page_config = value;
             this.page_parms = value.titleParams;
@@ -8950,6 +9016,10 @@ class GammaAdvanceChartComponent {
             this.chartDisplayDateFormat = (value.kpiConfig.displayDateFormat) ? value.kpiConfig.displayDateFormat : "MM-DD";
             if (value.kpiConfig.dataSource && value.kpiConfig.dataSource.length !== 0) {
                 this.chartConfig = value.kpiConfig.dataConfig;
+                if (this.chartConfig['dataGroupBy'] != "" && this.chartConfig['functionType'] != "") {
+                    const { dataSourceForChart } = this.getGroupDataForChart(value.kpiConfig.dataSource, this.chartConfig.chart_config, this.chartConfig.dataGroupBy, this.chartConfig.functionType);
+                    value.kpiConfig.dataSource = dataSourceForChart;
+                }
                 if (value.kpiConfig.formate == "daily") {
                     const sortedData = value.kpiConfig.dataSource
                         .filter(record => record.recordDate)
@@ -9040,6 +9110,49 @@ class GammaAdvanceChartComponent {
             }
         }
     }
+    getGroupDataForChart(previewdata, chartConfig, groupBy, functionType) {
+        const grouped = {};
+        for (const item of previewdata) {
+            const key = item[groupBy];
+            if (!grouped[key]) {
+                grouped[key] = [];
+            }
+            grouped[key].push(item);
+        }
+        const dataSourceForChart = Object.entries(grouped).map(([groupKey, items]) => {
+            const row = { [groupBy]: groupKey };
+            chartConfig.forEach(cfg => {
+                const field = cfg.valueField;
+                const values = items
+                    .map(i => i[field])
+                    .filter(v => typeof v === 'number');
+                switch (functionType) {
+                    case 'sum':
+                        row[field] = values.reduce((a, b) => a + b, 0);
+                        break;
+                    case 'avg':
+                        row[field] = values.length
+                            ? values.reduce((a, b) => a + b, 0) / values.length
+                            : 0;
+                        break;
+                    case 'min':
+                        row[field] = values.length ? Math.min(...values) : 0;
+                        break;
+                    case 'max':
+                        row[field] = values.length ? Math.max(...values) : 0;
+                        break;
+                    case 'count':
+                        row[field] = values.length;
+                        break;
+                }
+            });
+            return row;
+        });
+        return {
+            dataSourceForChart: dataSourceForChart,
+            listOfGroupByData: Object.keys(grouped)
+        };
+    }
     ngOnInit() {
     }
     getHourChart(data, dataConfig) {