gamma-app-controller 1.3.4 → 1.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/application-controller/application-dataset-call.service.mjs +7 -2
- package/esm2020/lib/application-controller/support-components/dash-chart/dash-chart.component.mjs +5 -3
- package/esm2020/lib/application-controller/support-components/dash-table/dash-table.component.mjs +9 -1
- package/esm2020/lib/shared/advanced-component/gamma-advance-chart/gamma-advance-chart.component.mjs +22 -1
- package/esm2020/lib/shared/advanced-component/gamma-advance-operator-table/gamma-advance-operator-table.component.mjs +6 -2
- package/esm2020/lib/shared/template-dataset-call-service.mjs +7 -10
- package/esm2020/lib/template-module/kpiWithSingleLayout/kpi-with-dataset.component.mjs +2 -2
- package/fesm2015/gamma-app-controller.mjs +51 -14
- package/fesm2015/gamma-app-controller.mjs.map +1 -1
- package/fesm2020/gamma-app-controller.mjs +51 -14
- package/fesm2020/gamma-app-controller.mjs.map +1 -1
- package/lib/application-controller/support-components/dash-chart/dash-chart.component.d.ts +1 -0
- package/lib/application-controller/support-components/dash-table/dash-table.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -4363,6 +4363,7 @@ class DashChartComponent {
|
|
|
4363
4363
|
"title": "",
|
|
4364
4364
|
"argumentField": "",
|
|
4365
4365
|
"chartGroupBy": "",
|
|
4366
|
+
"chartSortBy": "",
|
|
4366
4367
|
"verticalAlignment": "bottom",
|
|
4367
4368
|
"horizontalAlignment": "center",
|
|
4368
4369
|
"size": "250",
|
|
@@ -4437,6 +4438,7 @@ class DashChartComponent {
|
|
|
4437
4438
|
this.mainChartCourceObject['kpiConfig'] = value.selectedWidgetConfig;
|
|
4438
4439
|
value.selectedWidgetConfig['keyToPass'] = (value.selectedWidgetConfig['keyToPass']) ? value.selectedWidgetConfig['keyToPass'] : [];
|
|
4439
4440
|
value.selectedWidgetConfig['dataConfig']['chartGroupBy'] = (value.selectedWidgetConfig['dataConfig']['chartGroupBy']) ? value.selectedWidgetConfig['dataConfig']['chartGroupBy'] : "";
|
|
4441
|
+
value.selectedWidgetConfig['dataConfig']['chartSortBy'] = (value.selectedWidgetConfig['dataConfig']['chartSortBy']) ? value.selectedWidgetConfig['dataConfig']['chartSortBy'] : "";
|
|
4440
4442
|
if (value.selectedWidgetConfig['dataConfig']['chartGroupBy']) {
|
|
4441
4443
|
const { dataSourceForChart, listOfGroupByData } = this.getStackBarChart(this.previewData, this.chartConfig.argumentField, this.chartConfig.chart_config[0].valueField, value.selectedWidgetConfig['dataConfig']['chartGroupBy']);
|
|
4442
4444
|
this.dataSourseForChart = dataSourceForChart;
|
|
@@ -4786,10 +4788,10 @@ class DashChartComponent {
|
|
|
4786
4788
|
}
|
|
4787
4789
|
}
|
|
4788
4790
|
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 });
|
|
4789
|
-
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\" *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 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 *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 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 *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$1.DxChartComponent, selector: "dx-chart", inputs: ["adaptiveLayout", "adjustOnZoom", "animation", "annotations", "argumentAxis", "autoHidePointMarkers", "barGroupPadding", "barGroupWidth", "commonAnnotationSettings", "commonAxisSettings", "commonPaneSettings", "commonSeriesSettings", "containerBackgroundColor", "crosshair", "customizeAnnotation", "customizeLabel", "customizePoint", "dataPrepareSettings", "dataSource", "defaultPane", "disabled", "elementAttr", "export", "legend", "loadingIndicator", "margin", "maxBubbleSize", "minBubbleSize", "negativesAsZeroes", "palette", "paletteExtensionMode", "panes", "pathModified", "pointSelectionMode", "redrawOnResize", "resizePanesOnZoom", "resolveLabelOverlapping", "rotated", "rtlEnabled", "scrollBar", "series", "seriesSelectionMode", "seriesTemplate", "size", "stickyHovering", "synchronizeMultiAxes", "theme", "title", "tooltip", "valueAxis", "zoomAndPan"], outputs: ["onArgumentAxisClick", "onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onSeriesClick", "onSeriesHoverChanged", "onSeriesSelectionChanged", "onTooltipHidden", "onTooltipShown", "onZoomEnd", "onZoomStart", "adaptiveLayoutChange", "adjustOnZoomChange", "animationChange", "annotationsChange", "argumentAxisChange", "autoHidePointMarkersChange", "barGroupPaddingChange", "barGroupWidthChange", "commonAnnotationSettingsChange", "commonAxisSettingsChange", "commonPaneSettingsChange", "commonSeriesSettingsChange", "containerBackgroundColorChange", "crosshairChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataPrepareSettingsChange", "dataSourceChange", "defaultPaneChange", "disabledChange", "elementAttrChange", "exportChange", "legendChange", "loadingIndicatorChange", "marginChange", "maxBubbleSizeChange", "minBubbleSizeChange", "negativesAsZeroesChange", "paletteChange", "paletteExtensionModeChange", "panesChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resizePanesOnZoomChange", "resolveLabelOverlappingChange", "rotatedChange", "rtlEnabledChange", "scrollBarChange", "seriesChange", "seriesSelectionModeChange", "seriesTemplateChange", "sizeChange", "stickyHoveringChange", "synchronizeMultiAxesChange", "themeChange", "titleChange", "tooltipChange", "valueAxisChange", "zoomAndPanChange"] }, { kind: "component", type: i6.DxoArgumentAxisComponent, selector: "dxo-argument-axis", inputs: ["aggregateByCategory", "aggregatedPointsPosition", "aggregationGroupWidth", "aggregationInterval", "allowDecimals", "argumentType", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "customPositionAxis", "discreteAxisDivisionMode", "endOnTick", "grid", "holidays", "hoverMode", "inverted", "label", "linearThreshold", "logarithmBase", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "offset", "opacity", "placeholderSize", "position", "singleWorkdays", "strips", "stripStyle", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width", "workdaysOnly", "workWeek", "firstPointOnStartAngle", "originValue", "period", "startAngle"], outputs: ["visualRangeChange"] }, { kind: "component", type: i6.DxoCommonSeriesSettingsComponent, selector: "dxo-common-series-settings", inputs: ["aggregation", "area", "argumentField", "axis", "bar", "barOverlapGroup", "barPadding", "barWidth", "border", "bubble", "candlestick", "closeValueField", "color", "cornerRadius", "dashStyle", "fullstackedarea", "fullstackedbar", "fullstackedline", "fullstackedspline", "fullstackedsplinearea", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "line", "lowValueField", "maxLabelCount", "minBarSize", "opacity", "openValueField", "pane", "point", "rangearea", "rangebar", "rangeValue1Field", "rangeValue2Field", "reduction", "scatter", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "spline", "splinearea", "stack", "stackedarea", "stackedbar", "stackedline", "stackedspline", "stackedsplinearea", "steparea", "stepline", "stock", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxoConnectorComponent, selector: "dxo-connector", inputs: ["color", "visible", "width", "opacity"] }, { kind: "component", type: i6.DxiSeriesComponent, selector: "dxi-series", inputs: ["aggregation", "argumentField", "axis", "barOverlapGroup", "barPadding", "barWidth", "border", "closeValueField", "color", "cornerRadius", "dashStyle", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "lowValueField", "maxLabelCount", "minBarSize", "name", "opacity", "openValueField", "pane", "point", "rangeValue1Field", "rangeValue2Field", "reduction", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "stack", "tag", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxiValueAxisComponent, selector: "dxi-value-axis", inputs: ["aggregatedPointsPosition", "allowDecimals", "autoBreaksEnabled", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "discreteAxisDivisionMode", "endOnTick", "grid", "inverted", "label", "linearThreshold", "logarithmBase", "maxAutoBreakCount", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "multipleAxesSpacing", "name", "offset", "opacity", "pane", "placeholderSize", "position", "showZero", "strips", "stripStyle", "synchronizedValue", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "valueType", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width"], outputs: ["visualRangeChange"] }, { kind: "component", type: 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" }] });
|
|
4791
|
+
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$1.DxChartComponent, selector: "dx-chart", inputs: ["adaptiveLayout", "adjustOnZoom", "animation", "annotations", "argumentAxis", "autoHidePointMarkers", "barGroupPadding", "barGroupWidth", "commonAnnotationSettings", "commonAxisSettings", "commonPaneSettings", "commonSeriesSettings", "containerBackgroundColor", "crosshair", "customizeAnnotation", "customizeLabel", "customizePoint", "dataPrepareSettings", "dataSource", "defaultPane", "disabled", "elementAttr", "export", "legend", "loadingIndicator", "margin", "maxBubbleSize", "minBubbleSize", "negativesAsZeroes", "palette", "paletteExtensionMode", "panes", "pathModified", "pointSelectionMode", "redrawOnResize", "resizePanesOnZoom", "resolveLabelOverlapping", "rotated", "rtlEnabled", "scrollBar", "series", "seriesSelectionMode", "seriesTemplate", "size", "stickyHovering", "synchronizeMultiAxes", "theme", "title", "tooltip", "valueAxis", "zoomAndPan"], outputs: ["onArgumentAxisClick", "onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onSeriesClick", "onSeriesHoverChanged", "onSeriesSelectionChanged", "onTooltipHidden", "onTooltipShown", "onZoomEnd", "onZoomStart", "adaptiveLayoutChange", "adjustOnZoomChange", "animationChange", "annotationsChange", "argumentAxisChange", "autoHidePointMarkersChange", "barGroupPaddingChange", "barGroupWidthChange", "commonAnnotationSettingsChange", "commonAxisSettingsChange", "commonPaneSettingsChange", "commonSeriesSettingsChange", "containerBackgroundColorChange", "crosshairChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataPrepareSettingsChange", "dataSourceChange", "defaultPaneChange", "disabledChange", "elementAttrChange", "exportChange", "legendChange", "loadingIndicatorChange", "marginChange", "maxBubbleSizeChange", "minBubbleSizeChange", "negativesAsZeroesChange", "paletteChange", "paletteExtensionModeChange", "panesChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resizePanesOnZoomChange", "resolveLabelOverlappingChange", "rotatedChange", "rtlEnabledChange", "scrollBarChange", "seriesChange", "seriesSelectionModeChange", "seriesTemplateChange", "sizeChange", "stickyHoveringChange", "synchronizeMultiAxesChange", "themeChange", "titleChange", "tooltipChange", "valueAxisChange", "zoomAndPanChange"] }, { kind: "component", type: i6.DxoArgumentAxisComponent, selector: "dxo-argument-axis", inputs: ["aggregateByCategory", "aggregatedPointsPosition", "aggregationGroupWidth", "aggregationInterval", "allowDecimals", "argumentType", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "customPositionAxis", "discreteAxisDivisionMode", "endOnTick", "grid", "holidays", "hoverMode", "inverted", "label", "linearThreshold", "logarithmBase", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "offset", "opacity", "placeholderSize", "position", "singleWorkdays", "strips", "stripStyle", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width", "workdaysOnly", "workWeek", "firstPointOnStartAngle", "originValue", "period", "startAngle"], outputs: ["visualRangeChange"] }, { kind: "component", type: i6.DxoCommonSeriesSettingsComponent, selector: "dxo-common-series-settings", inputs: ["aggregation", "area", "argumentField", "axis", "bar", "barOverlapGroup", "barPadding", "barWidth", "border", "bubble", "candlestick", "closeValueField", "color", "cornerRadius", "dashStyle", "fullstackedarea", "fullstackedbar", "fullstackedline", "fullstackedspline", "fullstackedsplinearea", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "line", "lowValueField", "maxLabelCount", "minBarSize", "opacity", "openValueField", "pane", "point", "rangearea", "rangebar", "rangeValue1Field", "rangeValue2Field", "reduction", "scatter", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "spline", "splinearea", "stack", "stackedarea", "stackedbar", "stackedline", "stackedspline", "stackedsplinearea", "steparea", "stepline", "stock", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxoConnectorComponent, selector: "dxo-connector", inputs: ["color", "visible", "width", "opacity"] }, { kind: "component", type: i6.DxiSeriesComponent, selector: "dxi-series", inputs: ["aggregation", "argumentField", "axis", "barOverlapGroup", "barPadding", "barWidth", "border", "closeValueField", "color", "cornerRadius", "dashStyle", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "lowValueField", "maxLabelCount", "minBarSize", "name", "opacity", "openValueField", "pane", "point", "rangeValue1Field", "rangeValue2Field", "reduction", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "stack", "tag", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxiValueAxisComponent, selector: "dxi-value-axis", inputs: ["aggregatedPointsPosition", "allowDecimals", "autoBreaksEnabled", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "discreteAxisDivisionMode", "endOnTick", "grid", "inverted", "label", "linearThreshold", "logarithmBase", "maxAutoBreakCount", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "multipleAxesSpacing", "name", "offset", "opacity", "pane", "placeholderSize", "position", "showZero", "strips", "stripStyle", "synchronizedValue", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "valueType", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width"], outputs: ["visualRangeChange"] }, { kind: "component", type: 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" }] });
|
|
4790
4792
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashChartComponent, decorators: [{
|
|
4791
4793
|
type: Component,
|
|
4792
|
-
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\" *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 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 *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 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 *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>" }]
|
|
4794
|
+
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>" }]
|
|
4793
4795
|
}], ctorParameters: function () { return [{ type: CommonService }, { type: ApplicationContentService }, { type: i4$1.ToastrService }]; }, propDecorators: { getChartConfigOutPut: [{
|
|
4794
4796
|
type: Output
|
|
4795
4797
|
}], chartconfigData: [{
|
|
@@ -5072,8 +5074,16 @@ class DashTableComponent {
|
|
|
5072
5074
|
if (event.event) {
|
|
5073
5075
|
const fineName = event.value.join('_&_');
|
|
5074
5076
|
this.tableDataConfig.file_name = "report_by_" + fineName;
|
|
5077
|
+
this.tableDataConfig.commonConfig.title = "| " + this.formatFieldName(fineName) + " = ";
|
|
5078
|
+
this.table_columns_config.kpiConfig.formate = "monthly";
|
|
5075
5079
|
}
|
|
5076
5080
|
}
|
|
5081
|
+
formatFieldName(name) {
|
|
5082
|
+
return name
|
|
5083
|
+
.replace(/([a-z])([A-Z])/g, '$1 $2')
|
|
5084
|
+
.replace(/_/g, ' ')
|
|
5085
|
+
.replace(/\b\w/g, char => char.toUpperCase());
|
|
5086
|
+
}
|
|
5077
5087
|
resetViewProprstise() {
|
|
5078
5088
|
this.viewProperties = {
|
|
5079
5089
|
enableClickEvent: false,
|
|
@@ -8948,12 +8958,16 @@ class GammaAdvanceOperatorTableComponent {
|
|
|
8948
8958
|
}
|
|
8949
8959
|
}
|
|
8950
8960
|
shouldShowColumn(field) {
|
|
8951
|
-
let
|
|
8961
|
+
let defaultFields = ['recordDate', 'record_date', 'eventDate', 'event_date'];
|
|
8962
|
+
let excludedFields = [];
|
|
8952
8963
|
if (this.tableShortBy && this.tableShortBy.length !== 0) {
|
|
8953
8964
|
this.tableShortBy.forEach(element => {
|
|
8954
8965
|
excludedFields.push(element);
|
|
8955
8966
|
});
|
|
8956
8967
|
}
|
|
8968
|
+
else {
|
|
8969
|
+
excludedFields = defaultFields;
|
|
8970
|
+
}
|
|
8957
8971
|
return !excludedFields.includes(field);
|
|
8958
8972
|
}
|
|
8959
8973
|
}
|
|
@@ -9175,6 +9189,7 @@ class GammaAdvanceChartComponent {
|
|
|
9175
9189
|
return;
|
|
9176
9190
|
}
|
|
9177
9191
|
else {
|
|
9192
|
+
debugger;
|
|
9178
9193
|
this.isLoader = true;
|
|
9179
9194
|
this.page_config = value;
|
|
9180
9195
|
this.page_parms = value.titleParams;
|
|
@@ -9225,6 +9240,26 @@ class GammaAdvanceChartComponent {
|
|
|
9225
9240
|
.sort((a, b) => moment$1(b[value.kpiConfig.dataConfig['argumentField']]).diff(moment$1(a[value.kpiConfig.dataConfig['argumentField']])));
|
|
9226
9241
|
}
|
|
9227
9242
|
}
|
|
9243
|
+
const chartSortBy = value.kpiConfig.dataConfig['chartSortBy'];
|
|
9244
|
+
const isDesc = this.chartOrderBy === true;
|
|
9245
|
+
if (Array.isArray(chartSortBy) && chartSortBy.length !== 0) {
|
|
9246
|
+
value.kpiConfig.dataSource.sort((a, b) => {
|
|
9247
|
+
for (const key of chartSortBy) {
|
|
9248
|
+
if (a[key] == null && b[key] == null)
|
|
9249
|
+
continue;
|
|
9250
|
+
if (a[key] == null)
|
|
9251
|
+
return 1;
|
|
9252
|
+
if (b[key] == null)
|
|
9253
|
+
return -1;
|
|
9254
|
+
if (a[key] === b[key])
|
|
9255
|
+
continue;
|
|
9256
|
+
return isDesc
|
|
9257
|
+
? b[key] - a[key]
|
|
9258
|
+
: a[key] - b[key];
|
|
9259
|
+
}
|
|
9260
|
+
return 0;
|
|
9261
|
+
});
|
|
9262
|
+
}
|
|
9228
9263
|
this.getMonthlyChart(value.kpiConfig.dataSource, value.kpiConfig.dataConfig);
|
|
9229
9264
|
this.isChartvisible == true;
|
|
9230
9265
|
}
|
|
@@ -11163,7 +11198,12 @@ class ApplicationDatssetsCall {
|
|
|
11163
11198
|
resultObj.value = value;
|
|
11164
11199
|
}
|
|
11165
11200
|
if (mapping.serverColumn.includes('date') && typeof resultObj.value === 'string') {
|
|
11166
|
-
|
|
11201
|
+
if (mapping.formatter && mapping.formatter !== "") {
|
|
11202
|
+
resultObj.value = moment$1(resultObj.value, "YYYY-MM-DD").format(mapping.formatter);
|
|
11203
|
+
}
|
|
11204
|
+
else {
|
|
11205
|
+
resultObj.value = moment$1(resultObj.value, "YYYY-MM-DD").format(this.environment.dataFormat);
|
|
11206
|
+
}
|
|
11167
11207
|
}
|
|
11168
11208
|
}
|
|
11169
11209
|
}
|
|
@@ -18406,14 +18446,6 @@ class TemplateDatasetCallService {
|
|
|
18406
18446
|
value: mapping.defaultValue,
|
|
18407
18447
|
aliasColumnName: mapping.localColumn
|
|
18408
18448
|
};
|
|
18409
|
-
if (mapping.serverColumn.includes('date') && typeof resultObj.value === 'string') {
|
|
18410
|
-
if (mapping.formatter && mapping.formatter !== "") {
|
|
18411
|
-
resultObj.value = moment$1(resultObj.value, "YYYY-MM-DD").format(mapping.formatter);
|
|
18412
|
-
}
|
|
18413
|
-
else {
|
|
18414
|
-
resultObj.value = moment$1(resultObj.value, "YYYY-MM-DD").format(this.environment.dataFormat);
|
|
18415
|
-
}
|
|
18416
|
-
}
|
|
18417
18449
|
const filter = filterdata.find(f => f.hasOwnProperty(mapping.localColumn));
|
|
18418
18450
|
if (filter) {
|
|
18419
18451
|
if (mapping.defaultValue === "") {
|
|
@@ -18426,7 +18458,12 @@ class TemplateDatasetCallService {
|
|
|
18426
18458
|
resultObj.value = value;
|
|
18427
18459
|
}
|
|
18428
18460
|
if (mapping.serverColumn.includes('date') && typeof resultObj.value === 'string') {
|
|
18429
|
-
|
|
18461
|
+
if (mapping.formatter && mapping.formatter !== "") {
|
|
18462
|
+
resultObj.value = moment$1(resultObj.value, this.environment.dataFormat).format(mapping.formatter);
|
|
18463
|
+
}
|
|
18464
|
+
else {
|
|
18465
|
+
resultObj.value = moment$1(resultObj.value, "YYYY-MM-DD").format(this.environment.dataFormat);
|
|
18466
|
+
}
|
|
18430
18467
|
}
|
|
18431
18468
|
}
|
|
18432
18469
|
}
|
|
@@ -19469,7 +19506,7 @@ class KpiWithDataSetTestComponent {
|
|
|
19469
19506
|
const hourlyNode = this.dashBoardWidgetConfig.widgets
|
|
19470
19507
|
.map(widget => widget.widgetNode.find(node => this.getHourlyData(node)))
|
|
19471
19508
|
.find(node => node);
|
|
19472
|
-
if (hourlyNode && event.keyToPass.includes("recordDate")) {
|
|
19509
|
+
if (hourlyNode && event.keyToPass.includes("recordDate") || event.keyToPass.includes("record_date")) {
|
|
19473
19510
|
this.getViewByRowCLickForHourlyChart(event, hourlyNode);
|
|
19474
19511
|
}
|
|
19475
19512
|
const currentViewNode = this.dashBoardWidgetConfig.widgets
|