gamma-app-controller 1.2.10 → 1.2.11
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/common-header/common-header.component.mjs +3 -3
- package/esm2020/lib/application-controller/support-components/dash-chart/dash-chart.component.mjs +9 -6
- package/esm2020/lib/application-controller/support-components/dash-table/dash-table.component.mjs +29 -7
- package/esm2020/lib/shared/advanced-component/gamm-single-number-card/gamm-single-number-card.component.mjs +3 -3
- package/esm2020/lib/shared/advanced-component/gamma-advance-chart/gamma-advance-chart.component.mjs +3 -3
- package/esm2020/lib/shared/advanced-component/gamma-advance-operator-table/gamma-advance-operator-table.component.mjs +3 -3
- package/esm2020/lib/shared/app-title/app-title.component.mjs +3 -3
- package/esm2020/lib/template-module/defaulLandingComponent/landing-component.component.mjs +45 -12
- package/esm2020/lib/template-module/kpiWithSingleLayout/kpi-with-dataset.component.mjs +55 -12
- package/fesm2015/gamma-app-controller.mjs +146 -43
- package/fesm2015/gamma-app-controller.mjs.map +1 -1
- package/fesm2020/gamma-app-controller.mjs +144 -43
- package/fesm2020/gamma-app-controller.mjs.map +1 -1
- package/lib/application-controller/support-components/dash-table/dash-table.component.d.ts +1 -0
- package/lib/template-module/defaulLandingComponent/landing-component.component.d.ts +1 -0
- package/lib/template-module/kpiWithSingleLayout/kpi-with-dataset.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -2055,10 +2055,10 @@ class CommonHeaderComponent {
|
|
|
2055
2055
|
}
|
|
2056
2056
|
}
|
|
2057
2057
|
CommonHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CommonHeaderComponent, deps: [{ token: CommonService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
2058
|
-
CommonHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CommonHeaderComponent, selector: "lib-common-header", inputs: { pageTitle: "pageTitle" }, ngImport: i0, template: "<div class=\"flex justify-between border-b bg-card dark:bg-transparent\">\n <div class=\"flex-1 min-w-0\" *ngIf=\"pageTitle !== ''\">\n <div class=\"flex items-center py-3 pl-2 pr-6 float-start\">\n <div class=\"flex items-center overflow-hidden\">\n <mat-icon class=\"icon-size-2\" [svgIcon]=\"'heroicons_solid:template'\"></mat-icon>\n </div>\n <h2 class=\"text-3xl md:text-3xl py-2 font-extrabold items-center ml-2 tracking-tight leading-5 truncate\">\n {{pageTitle}}\n </h2>\n </div>\n </div>\n <div class=\"flex justify-between items-center p-0 m-0\" [ngClass]=\"{'border-l-2': pageTitle !== ''}\">\n <div class=\"mx-2\">\n <button class=\"{{commonService.btn_success_md}}\" (click)=\"gotoDataSets()\">\n All Dataset\n </button>\n </div>\n <div class=\"mx-2\">\n <button class=\"{{commonService.btn_primary_md}}\" (click)=\"gotoViews()\">\n All Views\n </button>\n </div>\n <div class=\"mx-2\">\n <button class=\"{{commonService.btn_warning_md}}\" (click)=\"gotoPages()\">\n All Pages\n </button>\n </div>\n <div class=\"mx-2\">\n <button class=\"{{commonService.btn_light_md}}\" (click)=\"gotoFilters()\">\n All Filters\n </button>\n </div>\n <div class=\"mx-2\">\n <button class=\"{{commonService.btn_purple_md}}\" (click)=\"gotoMenuConfig()\">\n All Menu\n </button>\n </div
|
|
2058
|
+
CommonHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CommonHeaderComponent, selector: "lib-common-header", inputs: { pageTitle: "pageTitle" }, ngImport: i0, template: "<div class=\"flex justify-between border-b bg-card dark:bg-transparent\">\n <div class=\"flex-1 min-w-0\" *ngIf=\"pageTitle !== ''\">\n <div class=\"flex items-center py-3 pl-2 pr-6 float-start\">\n <div class=\"flex items-center overflow-hidden\">\n <mat-icon class=\"icon-size-2\" [svgIcon]=\"'heroicons_solid:template'\"></mat-icon>\n </div>\n <h2 class=\"text-3xl md:text-3xl py-2 font-extrabold items-center ml-2 tracking-tight leading-5 truncate\">\n {{pageTitle}}\n </h2>\n </div>\n </div>\n <div class=\"flex justify-between items-center p-0 m-0\" [ngClass]=\"{'border-l-2': pageTitle !== ''}\">\n <div class=\"mx-2\">\n <button class=\"{{commonService.btn_success_md}}\" (click)=\"gotoDataSets()\">\n All Dataset\n </button>\n </div>\n <div class=\"mx-2\">\n <button class=\"{{commonService.btn_primary_md}}\" (click)=\"gotoViews()\">\n All Views\n </button>\n </div>\n <div class=\"mx-2\">\n <button class=\"{{commonService.btn_warning_md}}\" (click)=\"gotoPages()\">\n All Pages\n </button>\n </div>\n <div class=\"mx-2\">\n <button class=\"{{commonService.btn_light_md}}\" (click)=\"gotoFilters()\">\n All Filters\n </button>\n </div>\n <!-- <div class=\"mx-2\">\n <button class=\"{{commonService.btn_purple_md}}\" (click)=\"gotoMenuConfig()\">\n All Menu\n </button>\n </div> -->\n\n </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
2059
2059
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CommonHeaderComponent, decorators: [{
|
|
2060
2060
|
type: Component,
|
|
2061
|
-
args: [{ selector: 'lib-common-header', template: "<div class=\"flex justify-between border-b bg-card dark:bg-transparent\">\n <div class=\"flex-1 min-w-0\" *ngIf=\"pageTitle !== ''\">\n <div class=\"flex items-center py-3 pl-2 pr-6 float-start\">\n <div class=\"flex items-center overflow-hidden\">\n <mat-icon class=\"icon-size-2\" [svgIcon]=\"'heroicons_solid:template'\"></mat-icon>\n </div>\n <h2 class=\"text-3xl md:text-3xl py-2 font-extrabold items-center ml-2 tracking-tight leading-5 truncate\">\n {{pageTitle}}\n </h2>\n </div>\n </div>\n <div class=\"flex justify-between items-center p-0 m-0\" [ngClass]=\"{'border-l-2': pageTitle !== ''}\">\n <div class=\"mx-2\">\n <button class=\"{{commonService.btn_success_md}}\" (click)=\"gotoDataSets()\">\n All Dataset\n </button>\n </div>\n <div class=\"mx-2\">\n <button class=\"{{commonService.btn_primary_md}}\" (click)=\"gotoViews()\">\n All Views\n </button>\n </div>\n <div class=\"mx-2\">\n <button class=\"{{commonService.btn_warning_md}}\" (click)=\"gotoPages()\">\n All Pages\n </button>\n </div>\n <div class=\"mx-2\">\n <button class=\"{{commonService.btn_light_md}}\" (click)=\"gotoFilters()\">\n All Filters\n </button>\n </div>\n <div class=\"mx-2\">\n <button class=\"{{commonService.btn_purple_md}}\" (click)=\"gotoMenuConfig()\">\n All Menu\n </button>\n </div
|
|
2061
|
+
args: [{ selector: 'lib-common-header', template: "<div class=\"flex justify-between border-b bg-card dark:bg-transparent\">\n <div class=\"flex-1 min-w-0\" *ngIf=\"pageTitle !== ''\">\n <div class=\"flex items-center py-3 pl-2 pr-6 float-start\">\n <div class=\"flex items-center overflow-hidden\">\n <mat-icon class=\"icon-size-2\" [svgIcon]=\"'heroicons_solid:template'\"></mat-icon>\n </div>\n <h2 class=\"text-3xl md:text-3xl py-2 font-extrabold items-center ml-2 tracking-tight leading-5 truncate\">\n {{pageTitle}}\n </h2>\n </div>\n </div>\n <div class=\"flex justify-between items-center p-0 m-0\" [ngClass]=\"{'border-l-2': pageTitle !== ''}\">\n <div class=\"mx-2\">\n <button class=\"{{commonService.btn_success_md}}\" (click)=\"gotoDataSets()\">\n All Dataset\n </button>\n </div>\n <div class=\"mx-2\">\n <button class=\"{{commonService.btn_primary_md}}\" (click)=\"gotoViews()\">\n All Views\n </button>\n </div>\n <div class=\"mx-2\">\n <button class=\"{{commonService.btn_warning_md}}\" (click)=\"gotoPages()\">\n All Pages\n </button>\n </div>\n <div class=\"mx-2\">\n <button class=\"{{commonService.btn_light_md}}\" (click)=\"gotoFilters()\">\n All Filters\n </button>\n </div>\n <!-- <div class=\"mx-2\">\n <button class=\"{{commonService.btn_purple_md}}\" (click)=\"gotoMenuConfig()\">\n All Menu\n </button>\n </div> -->\n\n </div>\n</div>" }]
|
|
2062
2062
|
}], ctorParameters: function () { return [{ type: CommonService }, { type: i2.Router }]; }, propDecorators: { pageTitle: [{
|
|
2063
2063
|
type: Input
|
|
2064
2064
|
}] } });
|
|
@@ -4310,6 +4310,8 @@ class DashChartComponent {
|
|
|
4310
4310
|
enableRightClickEvent: true,
|
|
4311
4311
|
clickEventOptions: {
|
|
4312
4312
|
associatedViews: [],
|
|
4313
|
+
associatedPage: [],
|
|
4314
|
+
associatedParams: "",
|
|
4313
4315
|
eventType: ""
|
|
4314
4316
|
}
|
|
4315
4317
|
};
|
|
@@ -4363,7 +4365,6 @@ class DashChartComponent {
|
|
|
4363
4365
|
let chartTypes = value.selectedWidgetConfig.dataConfig.chart_config.map(config => config.type);
|
|
4364
4366
|
this.chartType = chartTypes[0];
|
|
4365
4367
|
}
|
|
4366
|
-
debugger;
|
|
4367
4368
|
if (value.selectedWidgetConfig.viewProperties) {
|
|
4368
4369
|
const eventType = value.selectedWidgetConfig.viewProperties.clickEventOptions.eventType;
|
|
4369
4370
|
this.viewProperties = value.selectedWidgetConfig.viewProperties;
|
|
@@ -4384,7 +4385,8 @@ class DashChartComponent {
|
|
|
4384
4385
|
else if (eventType == 'navigateToPage') {
|
|
4385
4386
|
this.viewProperties['clickEventOptions'] = {
|
|
4386
4387
|
"eventType": eventType,
|
|
4387
|
-
"associatedPage": value.selectedWidgetConfig.viewProperties.clickEventOptions.associatedPage
|
|
4388
|
+
"associatedPage": value.selectedWidgetConfig.viewProperties.clickEventOptions.associatedPage,
|
|
4389
|
+
"associatedParams": value.selectedWidgetConfig.viewProperties.clickEventOptions.associatedParams
|
|
4388
4390
|
};
|
|
4389
4391
|
}
|
|
4390
4392
|
}
|
|
@@ -4401,7 +4403,8 @@ class DashChartComponent {
|
|
|
4401
4403
|
enableRightClickEvent: true,
|
|
4402
4404
|
clickEventOptions: {
|
|
4403
4405
|
associatedViews: [],
|
|
4404
|
-
|
|
4406
|
+
associatedPage: [],
|
|
4407
|
+
associatedParams: "",
|
|
4405
4408
|
eventType: ""
|
|
4406
4409
|
}
|
|
4407
4410
|
};
|
|
@@ -4636,10 +4639,10 @@ class DashChartComponent {
|
|
|
4636
4639
|
}
|
|
4637
4640
|
}
|
|
4638
4641
|
DashChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashChartComponent, deps: [{ token: CommonService }, { token: ApplicationContentService }, { token: i3$1.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4639
|
-
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 <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\"\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 <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n <ng-container *ngIf=\"item.color\">\n <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n 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}}\" axis=\"{{item.axis}}\"\n name=\"{{item.name}}\">\n </dxi-series>\n </ng-container>\n\n </ng-container>\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 </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 [(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-2/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut' || chartType == 'pie'\">\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 </div>\n\n\n </div>\n <div class=\"w-2/3 px-2 mt-2\" *ngIf=\"chartType == 'bubble'\">\n <div class=\" flex flex-row\">\n <div class=\"mr-2\">\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\">\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\">\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=\"w-1/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut'\">\n\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 == 'navigateToPage'\">\n <div class=\"flex flex-row justify-between mt-3\">\n <div class=\"w-full\">\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 \n [searchEnabled]=\"true\"></dx-select-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>\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 </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 [(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 </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 *ngIf=\"viewProperties.clickEventOptions.eventType == 'navigateToPage'\">\n <div class=\"flex flex-row justify-between mt-3\">\n <div class=\"w-full\">\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 \n [searchEnabled]=\"true\"></dx-select-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 *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>\n </ng-container>\n\n\n </div>\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>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "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: LoaderComponent, selector: "app-loader" }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] });
|
|
4642
|
+
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 <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\"\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 <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n <ng-container *ngIf=\"item.color\">\n <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n 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}}\" axis=\"{{item.axis}}\"\n name=\"{{item.name}}\">\n </dxi-series>\n </ng-container>\n\n </ng-container>\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 </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-2/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut' || chartType == 'pie'\">\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 </div>\n\n\n </div>\n <div class=\"w-2/3 px-2 mt-2\" *ngIf=\"chartType == 'bubble'\">\n <div class=\" flex flex-row\">\n <div class=\"mr-2\">\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\">\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\">\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=\"w-1/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut'\">\n\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>\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 </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 </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>\n </ng-container>\n\n\n </div>\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>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "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: LoaderComponent, selector: "app-loader" }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] });
|
|
4640
4643
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashChartComponent, decorators: [{
|
|
4641
4644
|
type: Component,
|
|
4642
|
-
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 <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\"\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 <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n <ng-container *ngIf=\"item.color\">\n <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n 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}}\" axis=\"{{item.axis}}\"\n name=\"{{item.name}}\">\n </dxi-series>\n </ng-container>\n\n </ng-container>\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 </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 [(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-2/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut' || chartType == 'pie'\">\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 </div>\n\n\n </div>\n <div class=\"w-2/3 px-2 mt-2\" *ngIf=\"chartType == 'bubble'\">\n <div class=\" flex flex-row\">\n <div class=\"mr-2\">\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\">\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\">\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=\"w-1/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut'\">\n\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 == 'navigateToPage'\">\n <div class=\"flex flex-row justify-between mt-3\">\n <div class=\"w-full\">\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 \n [searchEnabled]=\"true\"></dx-select-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>\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 </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 [(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 </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 *ngIf=\"viewProperties.clickEventOptions.eventType == 'navigateToPage'\">\n <div class=\"flex flex-row justify-between mt-3\">\n <div class=\"w-full\">\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 \n [searchEnabled]=\"true\"></dx-select-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 *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>\n </ng-container>\n\n\n </div>\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>" }]
|
|
4645
|
+
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 <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\"\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 <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n <ng-container *ngIf=\"item.color\">\n <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n 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}}\" axis=\"{{item.axis}}\"\n name=\"{{item.name}}\">\n </dxi-series>\n </ng-container>\n\n </ng-container>\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 </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-2/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut' || chartType == 'pie'\">\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 </div>\n\n\n </div>\n <div class=\"w-2/3 px-2 mt-2\" *ngIf=\"chartType == 'bubble'\">\n <div class=\" flex flex-row\">\n <div class=\"mr-2\">\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\">\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\">\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=\"w-1/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut'\">\n\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>\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 </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 </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>\n </ng-container>\n\n\n </div>\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>" }]
|
|
4643
4646
|
}], ctorParameters: function () { return [{ type: CommonService }, { type: ApplicationContentService }, { type: i3$1.ToastrService }]; }, propDecorators: { getChartConfigOutPut: [{
|
|
4644
4647
|
type: Output
|
|
4645
4648
|
}], chartconfigData: [{
|
|
@@ -4660,6 +4663,8 @@ class DashTableComponent {
|
|
|
4660
4663
|
enableRightClickEvent: true,
|
|
4661
4664
|
clickEventOptions: {
|
|
4662
4665
|
associatedViews: [],
|
|
4666
|
+
associatedPage: [],
|
|
4667
|
+
associatedParams: "",
|
|
4663
4668
|
eventType: ""
|
|
4664
4669
|
}
|
|
4665
4670
|
};
|
|
@@ -4698,6 +4703,7 @@ class DashTableComponent {
|
|
|
4698
4703
|
};
|
|
4699
4704
|
this.enrichNameList = ["abbreviateNumber", "getColorCodeSpan", "ThousandSeparator", "ThousandSeparatorWithTwoDecimals", "formatBytesv2"];
|
|
4700
4705
|
this.isLoader = true;
|
|
4706
|
+
this.allConfiguredPage = [];
|
|
4701
4707
|
this.activeTab = 'basic';
|
|
4702
4708
|
this.getTableConfigOutPut = new EventEmitter();
|
|
4703
4709
|
}
|
|
@@ -4718,19 +4724,28 @@ class DashTableComponent {
|
|
|
4718
4724
|
if (value.selectedWidgetConfig.viewProperties) {
|
|
4719
4725
|
this.viewProperties = value.selectedWidgetConfig.viewProperties;
|
|
4720
4726
|
if (value.selectedWidgetConfig.viewProperties.enableClickEvent) {
|
|
4721
|
-
|
|
4727
|
+
const eventType = value.selectedWidgetConfig.viewProperties.clickEventOptions.eventType;
|
|
4728
|
+
this.viewProperties = value.selectedWidgetConfig.viewProperties;
|
|
4729
|
+
if (eventType == 'optionalDrillDown') {
|
|
4722
4730
|
this.optionalDrilDownDataSource = value.selectedWidgetConfig.viewProperties.clickEventOptions.associatedViews;
|
|
4723
4731
|
this.viewProperties['clickEventOptions'] = {
|
|
4724
|
-
"eventType":
|
|
4732
|
+
"eventType": eventType,
|
|
4725
4733
|
"associatedViews": []
|
|
4726
4734
|
};
|
|
4727
4735
|
}
|
|
4728
|
-
else if (
|
|
4736
|
+
else if (eventType == 'drilldown' || eventType == 'popup') {
|
|
4729
4737
|
this.viewProperties['clickEventOptions'] = {
|
|
4730
|
-
"eventType":
|
|
4738
|
+
"eventType": eventType,
|
|
4731
4739
|
"associatedViews": value.selectedWidgetConfig.viewProperties.clickEventOptions.associatedViews
|
|
4732
4740
|
};
|
|
4733
4741
|
}
|
|
4742
|
+
else if (eventType == 'navigateToPage') {
|
|
4743
|
+
this.viewProperties['clickEventOptions'] = {
|
|
4744
|
+
"eventType": eventType,
|
|
4745
|
+
"associatedPage": value.selectedWidgetConfig.viewProperties.clickEventOptions.associatedPage,
|
|
4746
|
+
"associatedParams": value.selectedWidgetConfig.viewProperties.clickEventOptions.associatedParams
|
|
4747
|
+
};
|
|
4748
|
+
}
|
|
4734
4749
|
}
|
|
4735
4750
|
else {
|
|
4736
4751
|
this.viewProperties['clickEventOptions'] = {};
|
|
@@ -4748,6 +4763,8 @@ class DashTableComponent {
|
|
|
4748
4763
|
enableRightClickEvent: true,
|
|
4749
4764
|
clickEventOptions: {
|
|
4750
4765
|
associatedViews: [],
|
|
4766
|
+
associatedPage: [],
|
|
4767
|
+
associatedParams: "",
|
|
4751
4768
|
eventType: ""
|
|
4752
4769
|
}
|
|
4753
4770
|
};
|
|
@@ -4788,6 +4805,14 @@ class DashTableComponent {
|
|
|
4788
4805
|
this.taostr.error('Unexpected Server Exception. Please contact System Admin.', 'All Views');
|
|
4789
4806
|
}
|
|
4790
4807
|
});
|
|
4808
|
+
this.service.getAppPageConfigs().subscribe({
|
|
4809
|
+
next: (data) => {
|
|
4810
|
+
this.allConfiguredPage = data;
|
|
4811
|
+
this.isLoader = false;
|
|
4812
|
+
}, error: (err) => {
|
|
4813
|
+
this.taostr.error('Unexpected Server Exception. Please contact System Admin.', 'All Pages');
|
|
4814
|
+
}
|
|
4815
|
+
});
|
|
4791
4816
|
if (this.optionalDrilDownDataSource.length == 0) {
|
|
4792
4817
|
this.optionalDrilDownDataSource = [
|
|
4793
4818
|
{
|
|
@@ -4904,10 +4929,10 @@ class DashTableComponent {
|
|
|
4904
4929
|
}
|
|
4905
4930
|
}
|
|
4906
4931
|
DashTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashTableComponent, deps: [{ token: CommonService }, { token: i0.ChangeDetectorRef }, { token: ApplicationContentService }, { token: i3$1.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4907
|
-
DashTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DashTableComponent, selector: "app-dash-table", inputs: { chartconfigData: ["datasetmodal", "chartconfigData"] }, outputs: { getTableConfigOutPut: "getTableConfigOutPut" }, ngImport: i0, template: "<div class=\"m-2\">\n <div class=\"w-full m-2 border-r\">\n <ng-container *ngIf=\"!isJsonPreview\">\n <pre><code>{{jsaonDatasource | json}}</code></pre>\n </ng-container>\n <ng-container *ngIf=\"isJsonPreview\">\n <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"dataSourseForTable\" [hoverStateEnabled]=\"true\"\n [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\" [columns]=\"tableDataConfig.columns\"\n [showRowLines]=\"true\" id=\"gridContainer\">\n <dxo-search-panel [highlightCaseSensitive]=\"true\"\n [visible]=\"tableDataConfig.searchPanel\"></dxo-search-panel>\n <dxo-export [enabled]=\"true\" fileName=\"{{tableDataConfig.file_name}}\"\n [customizeExcelCell]=\"commonService.customizeExcelCell\"></dxo-export>\n <dxo-paging [pageSize]=\"5\"></dxo-paging>\n <!-- <dxo-pager [showInfo]=\"tableDataConfig.pageInfo\" [showPageSizeSelector]=\"true\"\n [allowedPageSizes]=\"tableDataConfig.allowedPageSizes\">\n </dxo-pager> -->\n <!-- <ng-container *ngFor=\"let item of dataSourseForTable\">\n <div *ngFor=\"let key of getObjectKeys(item)\">\n <dxi-column dataField=\"{{ key }}\" *ngIf=\"key == 'recordDate'\" sortOrder=\"desc\"></dxi-column>\n <dxi-column [sortingMethod]=\"commonService.customValueSorter\" dataField=\"{{ key }}\"\n alignment=\"right\"></dxi-column>\n </div>\n </ng-container> -->\n <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n <dxi-column *ngIf=\"item.dataField == 'recordDate'\" dataField=\"{{ item.dataField }}\"\n [caption]=\"item.caption\" [visible]=\"item.visible\" sortOrder=\"desc\"></dxi-column>\n <dxi-column *ngIf=\"item.dataField !== 'recordDate'\"\n [sortingMethod]=\"commonService.customValueSorter\" [caption]=\"item.caption\"\n dataField=\"{{ item.dataField }}\" alignment=\"left\" [visible]=\"item.visible\">\n </dxi-column>\n </ng-container>\n </dx-data-grid>\n </ng-container>\n </div>\n <div class=\"w-full mx-2 border-r\">\n <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n <li class=\"me-2\" role=\"presentation\">\n <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n 'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n 'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n Basic\n </button>\n </li>\n <li class=\"me-2\" role=\"presentation\">\n <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n 'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n 'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n Columns\n </button>\n </li>\n <li class=\"me-2\" role=\"presentation\">\n <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n 'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n 'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n Properties\n </button>\n </li>\n\n </ul>\n </div>\n\n <div id=\"default-styled-tab-content\">\n <div *ngIf=\"activeTab === 'basic'\">\n <div class=\"flex flex-col flex-auto min-w-0\">\n <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title Config\n </div>\n <div class=\"pt-2 border-x border-b \">\n <div class=\"my-2 flex justify-between\">\n <div class=\"px-1 mb-1 w-full\">\n <div class=\"text-md mb-1\"> Title</div>\n <dx-text-box [(ngModel)]=\"tableDataConfig.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)]=\"tableDataConfig.commonConfig.dataField\"></dx-select-box>\n </div>\n <div class=\"px-1 mb-1 w-full\">\n <div class=\"text-md mb-2\"> Display Formate </div>\n <dx-select-box [items]=\"['daily','hourly','monthly']\"\n [(ngModel)]=\"table_columns_config.kpiConfig.formate\"></dx-select-box>\n </div>\n <div class=\"px-1 mb-1 w-full\">\n <div class=\"text-md mb-2\"> Key To Pass </div>\n <dx-tag-box [items]=\"configColume\"\n [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n </div>\n <!-- <div class=\"px-1 mb-1\">\n <div class=\"text-md mb-1\"> Checked Key</div>\n <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n [(ngModel)]=\"tableDataConfig.commonConfig.checkedKey\"></dx-select-box>\n </div>\n <div class=\"px-4 mt-6\">\n <dx-check-box [value]=\"tableDataConfig.commonConfig.isSearchBox\"\n [(ngModel)]=\"tableDataConfig.commonConfig.isSearchBox\"\n text=\"Search Box\"></dx-check-box>\n\n </div> -->\n </div>\n </div>\n </div>\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\"> Table Config\n </div>\n <div class=\"flex flse-row border-x border-b\">\n <div class=\"px-1 mb-2 mt-8 w-full\">\n <!-- <div class=\"text-md mb-2\"> </div> -->\n <dx-check-box [value]=\"tableDataConfig.searchPanel\"\n [(ngModel)]=\"tableDataConfig.searchPanel\" text=\"Search Panel\"></dx-check-box>\n </div>\n <div class=\" px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\">Sort By</div>\n <dx-tag-box [searchEnabled]=\"true\" [items]=\"configColume\"\n [(ngModel)]=\"tableDataConfig.tableSortBy\"></dx-tag-box>\n </div>\n <div class=\" px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\">File Name</div>\n <dx-text-box [(ngModel)]=\"tableDataConfig.file_name\"></dx-text-box>\n </div>\n <div class=\"px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\"> Number Of Row</div>\n <dx-number-box [value]=\"tableDataConfig.numberOfRow\"\n [(ngModel)]=\"tableDataConfig.numberOfRow\"></dx-number-box>\n </div>\n <div class=\"px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\"> Table Height</div>\n <dx-text-box [value]=\"tableDataConfig.tableHeight\"\n [(ngModel)]=\"tableDataConfig.tableHeight\"></dx-text-box>\n </div>\n <div class=\"px-1 mb-2 mt-8 w-full\">\n <dx-check-box [value]=\"tableDataConfig.pageInfo\" [(ngModel)]=\"tableDataConfig.pageInfo\"\n text=\"Page Info\"></dx-check-box>\n </div>\n </div>\n </div>\n\n </div>\n <div *ngIf=\"activeTab === 'columns'\">\n <div class=\"h-full overflow-x-auto\">\n <div class=\"flex flex-col flex-auto min-w-0\">\n\n <div class=\"pt-2 border-x border-b \">\n <div class=\"my-2 border-b flex flex-row\"\n *ngFor=\"let item of tableDataConfig.columns; let i = index;\">\n <div class=\"px-1 mb-2 mt-6 w-full\">\n <dx-check-box [value]=\"item.visible\" [(ngModel)]=\"item.visible\"\n text=\"Visiblity\"></dx-check-box>\n </div>\n <ng-container *ngIf=\"item.group !== undefined\">\n <div class=\"px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\">Group Name</div>\n <dx-text-box [(ngModel)]=\"item.group\"></dx-text-box>\n </div>\n </ng-container>\n <div class=\"px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\"> Value Field</div>\n <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n [(ngModel)]=\"item.dataField\"></dx-select-box>\n </div>\n <div class=\"px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\"> Caption</div>\n <dx-text-box [(ngModel)]=\"item.caption\"></dx-text-box>\n </div>\n <div class=\"px-2 mb-2 w-full\">\n <div class=\"text-md mb-2\"> UI Function</div>\n <dx-select-box [items]=\"enrichNameList\" [(ngModel)]=\"item.enrichName\"\n [searchEnabled]=\"true\"></dx-select-box>\n </div>\n <div class=\"text-center mt-8 w-full\">\n <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n (click)=\"moveItemForColumns(i, 'up')\">\n <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n </button>\n\n <button *ngIf=\"i !== tableDataConfig.columns.length - 1\"\n class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n (click)=\"moveItemForColumns(i, 'down')\">\n <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n </button>\n <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n </button>\n </div>\n\n </div>\n </div>\n </div>\n <div class=\"flex flex-row justify-end my-2\">\n <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addColumns()\">Add\n Columns</button>\n </div>\n </div>\n </div>\n <div *ngIf=\"activeTab === 'properties'\">\n <div class=\"h-full overflow-x-auto\">\n <app-loader *ngIf=\"isLoader\"></app-loader>\n <ng-container *ngIf=\"!isLoader\">\n <div class=\"flex flex-row justify-between border-b py-3\">\n <div class=\"mx-2\">\n <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n [(ngModel)]=\"viewProperties.enableClickEvent\"\n text=\"Enable Click Event\"></dx-check-box>\n </div>\n <div class=\"mx-2\">\n <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n text=\"Enable Right Click\"></dx-check-box>\n </div>\n </div>\n <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n Type\n Option\n </div>\n <div class=\"w-full p-3 border-x border-b \">\n <div class=\"flex flex-row\">\n <div class=\"w-full\">\n <div class=\"text-md mb-2\"> Event Type</div>\n </div>\n <div class=\"w-full\">\n <dx-select-box\n [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown']\"\n (onValueChanged)=\"getSelectedEventType($event)\"\n [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n </div>\n </div>\n <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n <div class=\"flex flex-row justify-between mt-3\">\n <div class=\"w-full\">\n <div class=\"text-md mb-2\"> Associated Views</div>\n <dx-tag-box [items]=\"allConfiguredViews\"\n [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n valueExpr=\"viewId\" displayExpr=\"viewName\"\n [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n </div>\n </div>\n </ng-container>\n <ng-container\n *ngIf=\"viewProperties.clickEventOptions.eventType == 'sameViewDrilldown'\">\n <div class=\"flex flex-row justify-between mt-3\">\n <div class=\"w-full\">\n <div class=\"text-md mb-2\"> Associated Views</div>\n <dx-tag-box [items]=\"allConfiguredViews\"\n [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n valueExpr=\"viewId\" displayExpr=\"viewName\"\n [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n </div>\n </div>\n </ng-container>\n <ng-container\n *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n <div class=\"flex flex-row justify-between mt-3\">\n <div class=\"w-full\">\n <ng-container\n *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n <div class=\"flex flex-row justify-between\">\n <div class=\"mx-2 w-1/2\">\n <div class=\"text-md mb-2\"> Associated Views</div>\n <dx-tag-box [items]=\"allConfiguredViews\"\n [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n displayExpr=\"viewName\" [showSelectionControls]=\"true\"\n [maxDisplayedTags]=\"2\"\n [searchEnabled]=\"true\"></dx-tag-box>\n\n </div>\n <div class=\"mx-2 w-1/2\">\n <div class=\"text-md mb-2\"> Associated Params</div>\n <dx-text-box\n [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n </div>\n <div class=\"mx-2\">\n <button\n class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n (click)=\"deleteAssociatedParams(i)\"><i\n class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </ng-container>\n <div class=\"flex flex-row justify-end mt-4\">\n <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n (click)=\"addAssociatedParams()\">Add\n Params</button>\n </div>\n </div>\n </div>\n </ng-container>\n <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n (click)=\"resetViewProprstise()\">Reset All Event</button>\n </div>\n </div>\n\n </div>\n </ng-container>\n </div>\n </div>\n\n </div>\n\n\n </div>\n</div>\n\n\n<div class=\"flex flex-row border-t pl-3\">\n <div class=\"flex justify-start mx-1\">\n <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n Preview</button>\n <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n Preview</button>\n </div>\n <div class=\"flex justify-end mx-1 flex-grow\">\n <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n (click)=\"getSaveChartConfig()\">Submit</button>\n </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.DxoExportComponent, selector: "dxo-export", inputs: ["backgroundColor", "enabled", "fileName", "formats", "margin", "printingEnabled", "proxyUrl", "svgToCanvas", "allowExportSelectedData", "customizeExcelCell", "excelFilterEnabled", "excelWrapTextEnabled", "ignoreExcelErrors", "texts"] }, { 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: i9.DxDataGridComponent, selector: "dx-data-grid", inputs: ["accessKey", "activeStateEnabled", "allowColumnReordering", "allowColumnResizing", "autoNavigateToFocusedRow", "cacheEnabled", "cellHintEnabled", "columnAutoWidth", "columnChooser", "columnFixing", "columnHidingEnabled", "columnMinWidth", "columnResizingMode", "columns", "columnWidth", "customizeColumns", "customizeExportData", "dataRowTemplate", "dataSource", "dateSerializationFormat", "disabled", "editing", "elementAttr", "errorRowEnabled", "export", "filterBuilder", "filterBuilderPopup", "filterPanel", "filterRow", "filterSyncEnabled", "filterValue", "focusedColumnIndex", "focusedRowEnabled", "focusedRowIndex", "focusedRowKey", "focusStateEnabled", "grouping", "groupPanel", "headerFilter", "height", "highlightChanges", "hint", "hoverStateEnabled", "keyboardNavigation", "keyExpr", "loadPanel", "masterDetail", "noDataText", "pager", "paging", "remoteOperations", "renderAsync", "repaintChangesOnly", "rowAlternationEnabled", "rowDragging", "rowTemplate", "rtlEnabled", "scrolling", "searchPanel", "selectedRowKeys", "selection", "selectionFilter", "showBorders", "showColumnHeaders", "showColumnLines", "showRowLines", "sortByGroupSummaryInfo", "sorting", "stateStoring", "summary", "syncLookupFilterValues", "tabIndex", "toolbar", "twoWayBindingEnabled", "visible", "width", "wordWrapEnabled"], outputs: ["onAdaptiveDetailRowPreparing", "onCellClick", "onCellDblClick", "onCellHoverChanged", "onCellPrepared", "onContentReady", "onContextMenuPreparing", "onDataErrorOccurred", "onDisposing", "onEditCanceled", "onEditCanceling", "onEditingStart", "onEditorPrepared", "onEditorPreparing", "onExported", "onExporting", "onFileSaving", "onFocusedCellChanged", "onFocusedCellChanging", "onFocusedRowChanged", "onFocusedRowChanging", "onInitialized", "onInitNewRow", "onKeyDown", "onOptionChanged", "onRowClick", "onRowCollapsed", "onRowCollapsing", "onRowDblClick", "onRowExpanded", "onRowExpanding", "onRowInserted", "onRowInserting", "onRowPrepared", "onRowRemoved", "onRowRemoving", "onRowUpdated", "onRowUpdating", "onRowValidating", "onSaved", "onSaving", "onSelectionChanged", "onToolbarPreparing", "accessKeyChange", "activeStateEnabledChange", "allowColumnReorderingChange", "allowColumnResizingChange", "autoNavigateToFocusedRowChange", "cacheEnabledChange", "cellHintEnabledChange", "columnAutoWidthChange", "columnChooserChange", "columnFixingChange", "columnHidingEnabledChange", "columnMinWidthChange", "columnResizingModeChange", "columnsChange", "columnWidthChange", "customizeColumnsChange", "customizeExportDataChange", "dataRowTemplateChange", "dataSourceChange", "dateSerializationFormatChange", "disabledChange", "editingChange", "elementAttrChange", "errorRowEnabledChange", "exportChange", "filterBuilderChange", "filterBuilderPopupChange", "filterPanelChange", "filterRowChange", "filterSyncEnabledChange", "filterValueChange", "focusedColumnIndexChange", "focusedRowEnabledChange", "focusedRowIndexChange", "focusedRowKeyChange", "focusStateEnabledChange", "groupingChange", "groupPanelChange", "headerFilterChange", "heightChange", "highlightChangesChange", "hintChange", "hoverStateEnabledChange", "keyboardNavigationChange", "keyExprChange", "loadPanelChange", "masterDetailChange", "noDataTextChange", "pagerChange", "pagingChange", "remoteOperationsChange", "renderAsyncChange", "repaintChangesOnlyChange", "rowAlternationEnabledChange", "rowDraggingChange", "rowTemplateChange", "rtlEnabledChange", "scrollingChange", "searchPanelChange", "selectedRowKeysChange", "selectionChange", "selectionFilterChange", "showBordersChange", "showColumnHeadersChange", "showColumnLinesChange", "showRowLinesChange", "sortByGroupSummaryInfoChange", "sortingChange", "stateStoringChange", "summaryChange", "syncLookupFilterValuesChange", "tabIndexChange", "toolbarChange", "twoWayBindingEnabledChange", "visibleChange", "widthChange", "wordWrapEnabledChange"] }, { kind: "component", type: i6.DxiColumnComponent, selector: "dxi-column", inputs: ["alignment", "allowEditing", "allowExporting", "allowFiltering", "allowFixing", "allowGrouping", "allowHeaderFiltering", "allowHiding", "allowReordering", "allowResizing", "allowSearch", "allowSorting", "autoExpandGroup", "buttons", "calculateCellValue", "calculateDisplayValue", "calculateFilterExpression", "calculateGroupValue", "calculateSortValue", "caption", "cellTemplate", "columns", "cssClass", "customizeText", "dataField", "dataType", "editCellTemplate", "editorOptions", "encodeHtml", "falseText", "filterOperations", "filterType", "filterValue", "filterValues", "fixed", "fixedPosition", "format", "formItem", "groupCellTemplate", "groupIndex", "headerCellTemplate", "headerFilter", "hidingPriority", "isBand", "lookup", "minWidth", "name", "ownerBand", "renderAsync", "selectedFilterOperation", "setCellValue", "showEditorAlways", "showInColumnChooser", "showWhenGrouped", "sortIndex", "sortingMethod", "sortOrder", "trueText", "type", "validationRules", "visible", "visibleIndex", "width"], outputs: ["filterValueChange", "filterValuesChange", "groupIndexChange", "selectedFilterOperationChange", "sortIndexChange", "sortOrderChange", "visibleChange", "visibleIndexChange"] }, { kind: "component", type: i6.DxoPagingComponent, selector: "dxo-paging", inputs: ["enabled", "pageIndex", "pageSize"], outputs: ["pageIndexChange", "pageSizeChange"] }, { kind: "component", type: i6.DxoSearchPanelComponent, selector: "dxo-search-panel", inputs: ["highlightCaseSensitive", "highlightSearchText", "placeholder", "searchVisibleColumnsOnly", "text", "visible", "width"], outputs: ["textChange"] }, { kind: "component", type: i8$2.DxNumberBoxComponent, selector: "dx-number-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "format", "height", "hint", "hoverStateEnabled", "inputAttr", "invalidValueMessage", "isValid", "label", "labelMode", "max", "min", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showSpinButtons", "step", "stylingMode", "tabIndex", "text", "useLargeSpinButtons", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "formatChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "invalidValueMessageChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "minChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showSpinButtonsChange", "stepChange", "stylingModeChange", "tabIndexChange", "textChange", "useLargeSpinButtonsChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i8$1.DxTagBoxComponent, selector: "dx-tag-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyValueMode", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hideSelectedItems", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxDisplayedTags", "maxFilterQueryLength", "maxLength", "minSearchLength", "multiline", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectAllMode", "selectAllText", "selectedItems", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showMultiTagOnly", "showSelectionControls", "stylingMode", "tabIndex", "tagTemplate", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCustomItemCreating", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onMultiTagPreparing", "onOpened", "onOptionChanged", "onSelectAllValueChanged", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyValueModeChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hideSelectedItemsChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxDisplayedTagsChange", "maxFilterQueryLengthChange", "maxLengthChange", "minSearchLengthChange", "multilineChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectAllModeChange", "selectAllTextChange", "selectedItemsChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showMultiTagOnlyChange", "showSelectionControlsChange", "stylingModeChange", "tabIndexChange", "tagTemplateChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] });
|
|
4932
|
+
DashTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DashTableComponent, selector: "app-dash-table", inputs: { chartconfigData: ["datasetmodal", "chartconfigData"] }, outputs: { getTableConfigOutPut: "getTableConfigOutPut" }, ngImport: i0, template: "<div class=\"m-2\">\n <div class=\"w-full m-2 border-r\">\n <ng-container *ngIf=\"!isJsonPreview\">\n <pre><code>{{jsaonDatasource | json}}</code></pre>\n </ng-container>\n <ng-container *ngIf=\"isJsonPreview\">\n <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"dataSourseForTable\" [hoverStateEnabled]=\"true\"\n [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\" [columns]=\"tableDataConfig.columns\"\n [showRowLines]=\"true\" id=\"gridContainer\">\n <dxo-search-panel [highlightCaseSensitive]=\"true\"\n [visible]=\"tableDataConfig.searchPanel\"></dxo-search-panel>\n <dxo-export [enabled]=\"true\" fileName=\"{{tableDataConfig.file_name}}\"\n [customizeExcelCell]=\"commonService.customizeExcelCell\"></dxo-export>\n <dxo-paging [pageSize]=\"5\"></dxo-paging>\n <!-- <dxo-pager [showInfo]=\"tableDataConfig.pageInfo\" [showPageSizeSelector]=\"true\"\n [allowedPageSizes]=\"tableDataConfig.allowedPageSizes\">\n </dxo-pager> -->\n <!-- <ng-container *ngFor=\"let item of dataSourseForTable\">\n <div *ngFor=\"let key of getObjectKeys(item)\">\n <dxi-column dataField=\"{{ key }}\" *ngIf=\"key == 'recordDate'\" sortOrder=\"desc\"></dxi-column>\n <dxi-column [sortingMethod]=\"commonService.customValueSorter\" dataField=\"{{ key }}\"\n alignment=\"right\"></dxi-column>\n </div>\n </ng-container> -->\n <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n <dxi-column *ngIf=\"item.dataField == 'recordDate'\" dataField=\"{{ item.dataField }}\"\n [caption]=\"item.caption\" [visible]=\"item.visible\" sortOrder=\"desc\"></dxi-column>\n <dxi-column *ngIf=\"item.dataField !== 'recordDate'\"\n [sortingMethod]=\"commonService.customValueSorter\" [caption]=\"item.caption\"\n dataField=\"{{ item.dataField }}\" alignment=\"left\" [visible]=\"item.visible\">\n </dxi-column>\n </ng-container>\n </dx-data-grid>\n </ng-container>\n </div>\n <div class=\"w-full mx-2 border-r\">\n <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n <li class=\"me-2\" role=\"presentation\">\n <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n 'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n 'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n Basic\n </button>\n </li>\n <li class=\"me-2\" role=\"presentation\">\n <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n 'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n 'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n Columns\n </button>\n </li>\n <li class=\"me-2\" role=\"presentation\">\n <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n 'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n 'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n Properties\n </button>\n </li>\n\n </ul>\n </div>\n\n <div id=\"default-styled-tab-content\">\n <div *ngIf=\"activeTab === 'basic'\">\n <div class=\"flex flex-col flex-auto min-w-0\">\n <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title Config\n </div>\n <div class=\"pt-2 border-x border-b \">\n <div class=\"my-2 flex justify-between\">\n <div class=\"px-1 mb-1 w-full\">\n <div class=\"text-md mb-1\"> Title</div>\n <dx-text-box [(ngModel)]=\"tableDataConfig.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)]=\"tableDataConfig.commonConfig.dataField\"></dx-select-box>\n </div>\n <div class=\"px-1 mb-1 w-full\">\n <div class=\"text-md mb-2\"> Display Formate </div>\n <dx-select-box [items]=\"['daily','hourly','monthly']\"\n [(ngModel)]=\"table_columns_config.kpiConfig.formate\"></dx-select-box>\n </div>\n <div class=\"px-1 mb-1 w-full\">\n <div class=\"text-md mb-2\"> Key To Pass </div>\n <dx-tag-box [items]=\"configColume\"\n [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n </div>\n <!-- <div class=\"px-1 mb-1\">\n <div class=\"text-md mb-1\"> Checked Key</div>\n <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n [(ngModel)]=\"tableDataConfig.commonConfig.checkedKey\"></dx-select-box>\n </div>\n <div class=\"px-4 mt-6\">\n <dx-check-box [value]=\"tableDataConfig.commonConfig.isSearchBox\"\n [(ngModel)]=\"tableDataConfig.commonConfig.isSearchBox\"\n text=\"Search Box\"></dx-check-box>\n\n </div> -->\n </div>\n </div>\n </div>\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\"> Table Config\n </div>\n <div class=\"flex flse-row border-x border-b\">\n <div class=\"px-1 mb-2 mt-8 w-full\">\n <!-- <div class=\"text-md mb-2\"> </div> -->\n <dx-check-box [value]=\"tableDataConfig.searchPanel\"\n [(ngModel)]=\"tableDataConfig.searchPanel\" text=\"Search Panel\"></dx-check-box>\n </div>\n <div class=\" px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\">Sort By</div>\n <dx-tag-box [searchEnabled]=\"true\" [items]=\"configColume\"\n [(ngModel)]=\"tableDataConfig.tableSortBy\"></dx-tag-box>\n </div>\n <div class=\" px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\">File Name</div>\n <dx-text-box [(ngModel)]=\"tableDataConfig.file_name\"></dx-text-box>\n </div>\n <div class=\"px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\"> Number Of Row</div>\n <dx-number-box [value]=\"tableDataConfig.numberOfRow\"\n [(ngModel)]=\"tableDataConfig.numberOfRow\"></dx-number-box>\n </div>\n <div class=\"px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\"> Table Height</div>\n <dx-text-box [value]=\"tableDataConfig.tableHeight\"\n [(ngModel)]=\"tableDataConfig.tableHeight\"></dx-text-box>\n </div>\n <div class=\"px-1 mb-2 mt-8 w-full\">\n <dx-check-box [value]=\"tableDataConfig.pageInfo\" [(ngModel)]=\"tableDataConfig.pageInfo\"\n text=\"Page Info\"></dx-check-box>\n </div>\n </div>\n </div>\n\n </div>\n <div *ngIf=\"activeTab === 'columns'\">\n <div class=\"h-full overflow-x-auto\">\n <div class=\"flex flex-col flex-auto min-w-0\">\n\n <div class=\"pt-2 border-x border-b \">\n <div class=\"my-2 border-b flex flex-row\"\n *ngFor=\"let item of tableDataConfig.columns; let i = index;\">\n <div class=\"px-1 mb-2 mt-6 w-full\">\n <dx-check-box [value]=\"item.visible\" [(ngModel)]=\"item.visible\"\n text=\"Visiblity\"></dx-check-box>\n </div>\n <ng-container *ngIf=\"item.group !== undefined\">\n <div class=\"px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\">Group Name</div>\n <dx-text-box [(ngModel)]=\"item.group\"></dx-text-box>\n </div>\n </ng-container>\n <div class=\"px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\"> Value Field</div>\n <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n [(ngModel)]=\"item.dataField\"></dx-select-box>\n </div>\n <div class=\"px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\"> Caption</div>\n <dx-text-box [(ngModel)]=\"item.caption\"></dx-text-box>\n </div>\n <div class=\"px-2 mb-2 w-full\">\n <div class=\"text-md mb-2\"> UI Function</div>\n <dx-select-box [items]=\"enrichNameList\" [(ngModel)]=\"item.enrichName\"\n [searchEnabled]=\"true\"></dx-select-box>\n </div>\n <div class=\"text-center mt-8 w-full\">\n <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n (click)=\"moveItemForColumns(i, 'up')\">\n <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n </button>\n\n <button *ngIf=\"i !== tableDataConfig.columns.length - 1\"\n class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n (click)=\"moveItemForColumns(i, 'down')\">\n <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n </button>\n <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n </button>\n </div>\n\n </div>\n </div>\n </div>\n <div class=\"flex flex-row justify-end my-2\">\n <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addColumns()\">Add\n Columns</button>\n </div>\n </div>\n </div>\n <div *ngIf=\"activeTab === 'properties'\">\n <div class=\"h-full overflow-x-auto\">\n <app-loader *ngIf=\"isLoader\"></app-loader>\n <ng-container *ngIf=\"!isLoader\">\n <div class=\"flex flex-row justify-between border-b py-3\">\n <div class=\"mx-2\">\n <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n [(ngModel)]=\"viewProperties.enableClickEvent\"\n text=\"Enable Click Event\"></dx-check-box>\n </div>\n <div class=\"mx-2\">\n <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n text=\"Enable Right Click\"></dx-check-box>\n </div>\n </div>\n <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n Type\n Option\n </div>\n <div class=\"w-full p-3 border-x border-b \">\n <div class=\"flex flex-row\">\n <div class=\"w-full\">\n <div class=\"text-md mb-2\"> Event Type</div>\n </div>\n <div class=\"w-full\">\n <dx-select-box\n [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','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 </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\" [searchEnabled]=\"true\"></dx-tag-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\" [searchEnabled]=\"true\"></dx-tag-box>\n </div>\n </div>\n </ng-container>\n <ng-container\n *ngIf=\"viewProperties.clickEventOptions.eventType == 'sameViewDrilldown'\">\n <div class=\"flex flex-row justify-between mt-3\">\n <div class=\"w-full\">\n <div class=\"text-md mb-2\"> Associated Views</div>\n <dx-tag-box [items]=\"allConfiguredViews\"\n [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n valueExpr=\"viewId\" displayExpr=\"viewName\"\n [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n </div>\n </div>\n </ng-container>\n <ng-container\n *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n <div class=\"flex flex-row justify-between mt-3\">\n <div class=\"w-full\">\n <ng-container\n *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n <div class=\"flex flex-row justify-between\">\n <div class=\"mx-2 w-1/2\">\n <div class=\"text-md mb-2\"> Associated Views</div>\n <dx-tag-box [items]=\"allConfiguredViews\"\n [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n displayExpr=\"viewName\" [showSelectionControls]=\"true\"\n [maxDisplayedTags]=\"2\"\n [searchEnabled]=\"true\"></dx-tag-box>\n\n </div>\n <div class=\"mx-2 w-1/2\">\n <div class=\"text-md mb-2\"> Associated Params</div>\n <dx-text-box\n [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n </div>\n <div class=\"mx-2\">\n <button\n class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n (click)=\"deleteAssociatedParams(i)\"><i\n class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </ng-container>\n <div class=\"flex flex-row justify-end mt-4\">\n <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n (click)=\"addAssociatedParams()\">Add\n Params</button>\n </div>\n </div>\n </div>\n </ng-container>\n <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n (click)=\"resetViewProprstise()\">Reset All Event</button>\n </div>\n </div>\n\n </div>\n </ng-container>\n </div>\n </div>\n\n </div>\n\n\n </div>\n</div>\n\n\n<div class=\"flex flex-row border-t pl-3\">\n <div class=\"flex justify-start mx-1\">\n <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n Preview</button>\n <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n Preview</button>\n </div>\n <div class=\"flex justify-end mx-1 flex-grow\">\n <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n (click)=\"getSaveChartConfig()\">Submit</button>\n </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.DxoExportComponent, selector: "dxo-export", inputs: ["backgroundColor", "enabled", "fileName", "formats", "margin", "printingEnabled", "proxyUrl", "svgToCanvas", "allowExportSelectedData", "customizeExcelCell", "excelFilterEnabled", "excelWrapTextEnabled", "ignoreExcelErrors", "texts"] }, { 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: i9.DxDataGridComponent, selector: "dx-data-grid", inputs: ["accessKey", "activeStateEnabled", "allowColumnReordering", "allowColumnResizing", "autoNavigateToFocusedRow", "cacheEnabled", "cellHintEnabled", "columnAutoWidth", "columnChooser", "columnFixing", "columnHidingEnabled", "columnMinWidth", "columnResizingMode", "columns", "columnWidth", "customizeColumns", "customizeExportData", "dataRowTemplate", "dataSource", "dateSerializationFormat", "disabled", "editing", "elementAttr", "errorRowEnabled", "export", "filterBuilder", "filterBuilderPopup", "filterPanel", "filterRow", "filterSyncEnabled", "filterValue", "focusedColumnIndex", "focusedRowEnabled", "focusedRowIndex", "focusedRowKey", "focusStateEnabled", "grouping", "groupPanel", "headerFilter", "height", "highlightChanges", "hint", "hoverStateEnabled", "keyboardNavigation", "keyExpr", "loadPanel", "masterDetail", "noDataText", "pager", "paging", "remoteOperations", "renderAsync", "repaintChangesOnly", "rowAlternationEnabled", "rowDragging", "rowTemplate", "rtlEnabled", "scrolling", "searchPanel", "selectedRowKeys", "selection", "selectionFilter", "showBorders", "showColumnHeaders", "showColumnLines", "showRowLines", "sortByGroupSummaryInfo", "sorting", "stateStoring", "summary", "syncLookupFilterValues", "tabIndex", "toolbar", "twoWayBindingEnabled", "visible", "width", "wordWrapEnabled"], outputs: ["onAdaptiveDetailRowPreparing", "onCellClick", "onCellDblClick", "onCellHoverChanged", "onCellPrepared", "onContentReady", "onContextMenuPreparing", "onDataErrorOccurred", "onDisposing", "onEditCanceled", "onEditCanceling", "onEditingStart", "onEditorPrepared", "onEditorPreparing", "onExported", "onExporting", "onFileSaving", "onFocusedCellChanged", "onFocusedCellChanging", "onFocusedRowChanged", "onFocusedRowChanging", "onInitialized", "onInitNewRow", "onKeyDown", "onOptionChanged", "onRowClick", "onRowCollapsed", "onRowCollapsing", "onRowDblClick", "onRowExpanded", "onRowExpanding", "onRowInserted", "onRowInserting", "onRowPrepared", "onRowRemoved", "onRowRemoving", "onRowUpdated", "onRowUpdating", "onRowValidating", "onSaved", "onSaving", "onSelectionChanged", "onToolbarPreparing", "accessKeyChange", "activeStateEnabledChange", "allowColumnReorderingChange", "allowColumnResizingChange", "autoNavigateToFocusedRowChange", "cacheEnabledChange", "cellHintEnabledChange", "columnAutoWidthChange", "columnChooserChange", "columnFixingChange", "columnHidingEnabledChange", "columnMinWidthChange", "columnResizingModeChange", "columnsChange", "columnWidthChange", "customizeColumnsChange", "customizeExportDataChange", "dataRowTemplateChange", "dataSourceChange", "dateSerializationFormatChange", "disabledChange", "editingChange", "elementAttrChange", "errorRowEnabledChange", "exportChange", "filterBuilderChange", "filterBuilderPopupChange", "filterPanelChange", "filterRowChange", "filterSyncEnabledChange", "filterValueChange", "focusedColumnIndexChange", "focusedRowEnabledChange", "focusedRowIndexChange", "focusedRowKeyChange", "focusStateEnabledChange", "groupingChange", "groupPanelChange", "headerFilterChange", "heightChange", "highlightChangesChange", "hintChange", "hoverStateEnabledChange", "keyboardNavigationChange", "keyExprChange", "loadPanelChange", "masterDetailChange", "noDataTextChange", "pagerChange", "pagingChange", "remoteOperationsChange", "renderAsyncChange", "repaintChangesOnlyChange", "rowAlternationEnabledChange", "rowDraggingChange", "rowTemplateChange", "rtlEnabledChange", "scrollingChange", "searchPanelChange", "selectedRowKeysChange", "selectionChange", "selectionFilterChange", "showBordersChange", "showColumnHeadersChange", "showColumnLinesChange", "showRowLinesChange", "sortByGroupSummaryInfoChange", "sortingChange", "stateStoringChange", "summaryChange", "syncLookupFilterValuesChange", "tabIndexChange", "toolbarChange", "twoWayBindingEnabledChange", "visibleChange", "widthChange", "wordWrapEnabledChange"] }, { kind: "component", type: i6.DxiColumnComponent, selector: "dxi-column", inputs: ["alignment", "allowEditing", "allowExporting", "allowFiltering", "allowFixing", "allowGrouping", "allowHeaderFiltering", "allowHiding", "allowReordering", "allowResizing", "allowSearch", "allowSorting", "autoExpandGroup", "buttons", "calculateCellValue", "calculateDisplayValue", "calculateFilterExpression", "calculateGroupValue", "calculateSortValue", "caption", "cellTemplate", "columns", "cssClass", "customizeText", "dataField", "dataType", "editCellTemplate", "editorOptions", "encodeHtml", "falseText", "filterOperations", "filterType", "filterValue", "filterValues", "fixed", "fixedPosition", "format", "formItem", "groupCellTemplate", "groupIndex", "headerCellTemplate", "headerFilter", "hidingPriority", "isBand", "lookup", "minWidth", "name", "ownerBand", "renderAsync", "selectedFilterOperation", "setCellValue", "showEditorAlways", "showInColumnChooser", "showWhenGrouped", "sortIndex", "sortingMethod", "sortOrder", "trueText", "type", "validationRules", "visible", "visibleIndex", "width"], outputs: ["filterValueChange", "filterValuesChange", "groupIndexChange", "selectedFilterOperationChange", "sortIndexChange", "sortOrderChange", "visibleChange", "visibleIndexChange"] }, { kind: "component", type: i6.DxoPagingComponent, selector: "dxo-paging", inputs: ["enabled", "pageIndex", "pageSize"], outputs: ["pageIndexChange", "pageSizeChange"] }, { kind: "component", type: i6.DxoSearchPanelComponent, selector: "dxo-search-panel", inputs: ["highlightCaseSensitive", "highlightSearchText", "placeholder", "searchVisibleColumnsOnly", "text", "visible", "width"], outputs: ["textChange"] }, { kind: "component", type: i8$2.DxNumberBoxComponent, selector: "dx-number-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "format", "height", "hint", "hoverStateEnabled", "inputAttr", "invalidValueMessage", "isValid", "label", "labelMode", "max", "min", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showSpinButtons", "step", "stylingMode", "tabIndex", "text", "useLargeSpinButtons", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "formatChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "invalidValueMessageChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "minChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showSpinButtonsChange", "stepChange", "stylingModeChange", "tabIndexChange", "textChange", "useLargeSpinButtonsChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i8$1.DxTagBoxComponent, selector: "dx-tag-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyValueMode", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hideSelectedItems", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxDisplayedTags", "maxFilterQueryLength", "maxLength", "minSearchLength", "multiline", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectAllMode", "selectAllText", "selectedItems", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showMultiTagOnly", "showSelectionControls", "stylingMode", "tabIndex", "tagTemplate", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCustomItemCreating", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onMultiTagPreparing", "onOpened", "onOptionChanged", "onSelectAllValueChanged", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyValueModeChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hideSelectedItemsChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxDisplayedTagsChange", "maxFilterQueryLengthChange", "maxLengthChange", "minSearchLengthChange", "multilineChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectAllModeChange", "selectAllTextChange", "selectedItemsChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showMultiTagOnlyChange", "showSelectionControlsChange", "stylingModeChange", "tabIndexChange", "tagTemplateChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] });
|
|
4908
4933
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashTableComponent, decorators: [{
|
|
4909
4934
|
type: Component,
|
|
4910
|
-
args: [{ selector: 'app-dash-table', template: "<div class=\"m-2\">\n <div class=\"w-full m-2 border-r\">\n <ng-container *ngIf=\"!isJsonPreview\">\n <pre><code>{{jsaonDatasource | json}}</code></pre>\n </ng-container>\n <ng-container *ngIf=\"isJsonPreview\">\n <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"dataSourseForTable\" [hoverStateEnabled]=\"true\"\n [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\" [columns]=\"tableDataConfig.columns\"\n [showRowLines]=\"true\" id=\"gridContainer\">\n <dxo-search-panel [highlightCaseSensitive]=\"true\"\n [visible]=\"tableDataConfig.searchPanel\"></dxo-search-panel>\n <dxo-export [enabled]=\"true\" fileName=\"{{tableDataConfig.file_name}}\"\n [customizeExcelCell]=\"commonService.customizeExcelCell\"></dxo-export>\n <dxo-paging [pageSize]=\"5\"></dxo-paging>\n <!-- <dxo-pager [showInfo]=\"tableDataConfig.pageInfo\" [showPageSizeSelector]=\"true\"\n [allowedPageSizes]=\"tableDataConfig.allowedPageSizes\">\n </dxo-pager> -->\n <!-- <ng-container *ngFor=\"let item of dataSourseForTable\">\n <div *ngFor=\"let key of getObjectKeys(item)\">\n <dxi-column dataField=\"{{ key }}\" *ngIf=\"key == 'recordDate'\" sortOrder=\"desc\"></dxi-column>\n <dxi-column [sortingMethod]=\"commonService.customValueSorter\" dataField=\"{{ key }}\"\n alignment=\"right\"></dxi-column>\n </div>\n </ng-container> -->\n <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n <dxi-column *ngIf=\"item.dataField == 'recordDate'\" dataField=\"{{ item.dataField }}\"\n [caption]=\"item.caption\" [visible]=\"item.visible\" sortOrder=\"desc\"></dxi-column>\n <dxi-column *ngIf=\"item.dataField !== 'recordDate'\"\n [sortingMethod]=\"commonService.customValueSorter\" [caption]=\"item.caption\"\n dataField=\"{{ item.dataField }}\" alignment=\"left\" [visible]=\"item.visible\">\n </dxi-column>\n </ng-container>\n </dx-data-grid>\n </ng-container>\n </div>\n <div class=\"w-full mx-2 border-r\">\n <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n <li class=\"me-2\" role=\"presentation\">\n <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n 'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n 'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n Basic\n </button>\n </li>\n <li class=\"me-2\" role=\"presentation\">\n <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n 'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n 'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n Columns\n </button>\n </li>\n <li class=\"me-2\" role=\"presentation\">\n <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n 'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n 'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n Properties\n </button>\n </li>\n\n </ul>\n </div>\n\n <div id=\"default-styled-tab-content\">\n <div *ngIf=\"activeTab === 'basic'\">\n <div class=\"flex flex-col flex-auto min-w-0\">\n <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title Config\n </div>\n <div class=\"pt-2 border-x border-b \">\n <div class=\"my-2 flex justify-between\">\n <div class=\"px-1 mb-1 w-full\">\n <div class=\"text-md mb-1\"> Title</div>\n <dx-text-box [(ngModel)]=\"tableDataConfig.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)]=\"tableDataConfig.commonConfig.dataField\"></dx-select-box>\n </div>\n <div class=\"px-1 mb-1 w-full\">\n <div class=\"text-md mb-2\"> Display Formate </div>\n <dx-select-box [items]=\"['daily','hourly','monthly']\"\n [(ngModel)]=\"table_columns_config.kpiConfig.formate\"></dx-select-box>\n </div>\n <div class=\"px-1 mb-1 w-full\">\n <div class=\"text-md mb-2\"> Key To Pass </div>\n <dx-tag-box [items]=\"configColume\"\n [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n </div>\n <!-- <div class=\"px-1 mb-1\">\n <div class=\"text-md mb-1\"> Checked Key</div>\n <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n [(ngModel)]=\"tableDataConfig.commonConfig.checkedKey\"></dx-select-box>\n </div>\n <div class=\"px-4 mt-6\">\n <dx-check-box [value]=\"tableDataConfig.commonConfig.isSearchBox\"\n [(ngModel)]=\"tableDataConfig.commonConfig.isSearchBox\"\n text=\"Search Box\"></dx-check-box>\n\n </div> -->\n </div>\n </div>\n </div>\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\"> Table Config\n </div>\n <div class=\"flex flse-row border-x border-b\">\n <div class=\"px-1 mb-2 mt-8 w-full\">\n <!-- <div class=\"text-md mb-2\"> </div> -->\n <dx-check-box [value]=\"tableDataConfig.searchPanel\"\n [(ngModel)]=\"tableDataConfig.searchPanel\" text=\"Search Panel\"></dx-check-box>\n </div>\n <div class=\" px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\">Sort By</div>\n <dx-tag-box [searchEnabled]=\"true\" [items]=\"configColume\"\n [(ngModel)]=\"tableDataConfig.tableSortBy\"></dx-tag-box>\n </div>\n <div class=\" px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\">File Name</div>\n <dx-text-box [(ngModel)]=\"tableDataConfig.file_name\"></dx-text-box>\n </div>\n <div class=\"px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\"> Number Of Row</div>\n <dx-number-box [value]=\"tableDataConfig.numberOfRow\"\n [(ngModel)]=\"tableDataConfig.numberOfRow\"></dx-number-box>\n </div>\n <div class=\"px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\"> Table Height</div>\n <dx-text-box [value]=\"tableDataConfig.tableHeight\"\n [(ngModel)]=\"tableDataConfig.tableHeight\"></dx-text-box>\n </div>\n <div class=\"px-1 mb-2 mt-8 w-full\">\n <dx-check-box [value]=\"tableDataConfig.pageInfo\" [(ngModel)]=\"tableDataConfig.pageInfo\"\n text=\"Page Info\"></dx-check-box>\n </div>\n </div>\n </div>\n\n </div>\n <div *ngIf=\"activeTab === 'columns'\">\n <div class=\"h-full overflow-x-auto\">\n <div class=\"flex flex-col flex-auto min-w-0\">\n\n <div class=\"pt-2 border-x border-b \">\n <div class=\"my-2 border-b flex flex-row\"\n *ngFor=\"let item of tableDataConfig.columns; let i = index;\">\n <div class=\"px-1 mb-2 mt-6 w-full\">\n <dx-check-box [value]=\"item.visible\" [(ngModel)]=\"item.visible\"\n text=\"Visiblity\"></dx-check-box>\n </div>\n <ng-container *ngIf=\"item.group !== undefined\">\n <div class=\"px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\">Group Name</div>\n <dx-text-box [(ngModel)]=\"item.group\"></dx-text-box>\n </div>\n </ng-container>\n <div class=\"px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\"> Value Field</div>\n <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n [(ngModel)]=\"item.dataField\"></dx-select-box>\n </div>\n <div class=\"px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\"> Caption</div>\n <dx-text-box [(ngModel)]=\"item.caption\"></dx-text-box>\n </div>\n <div class=\"px-2 mb-2 w-full\">\n <div class=\"text-md mb-2\"> UI Function</div>\n <dx-select-box [items]=\"enrichNameList\" [(ngModel)]=\"item.enrichName\"\n [searchEnabled]=\"true\"></dx-select-box>\n </div>\n <div class=\"text-center mt-8 w-full\">\n <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n (click)=\"moveItemForColumns(i, 'up')\">\n <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n </button>\n\n <button *ngIf=\"i !== tableDataConfig.columns.length - 1\"\n class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n (click)=\"moveItemForColumns(i, 'down')\">\n <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n </button>\n <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n </button>\n </div>\n\n </div>\n </div>\n </div>\n <div class=\"flex flex-row justify-end my-2\">\n <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addColumns()\">Add\n Columns</button>\n </div>\n </div>\n </div>\n <div *ngIf=\"activeTab === 'properties'\">\n <div class=\"h-full overflow-x-auto\">\n <app-loader *ngIf=\"isLoader\"></app-loader>\n <ng-container *ngIf=\"!isLoader\">\n <div class=\"flex flex-row justify-between border-b py-3\">\n <div class=\"mx-2\">\n <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n [(ngModel)]=\"viewProperties.enableClickEvent\"\n text=\"Enable Click Event\"></dx-check-box>\n </div>\n <div class=\"mx-2\">\n <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n text=\"Enable Right Click\"></dx-check-box>\n </div>\n </div>\n <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n Type\n Option\n </div>\n <div class=\"w-full p-3 border-x border-b \">\n <div class=\"flex flex-row\">\n <div class=\"w-full\">\n <div class=\"text-md mb-2\"> Event Type</div>\n </div>\n <div class=\"w-full\">\n <dx-select-box\n [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown']\"\n (onValueChanged)=\"getSelectedEventType($event)\"\n [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n </div>\n </div>\n <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n <div class=\"flex flex-row justify-between mt-3\">\n <div class=\"w-full\">\n <div class=\"text-md mb-2\"> Associated Views</div>\n <dx-tag-box [items]=\"allConfiguredViews\"\n [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n valueExpr=\"viewId\" displayExpr=\"viewName\"\n [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n </div>\n </div>\n </ng-container>\n <ng-container\n *ngIf=\"viewProperties.clickEventOptions.eventType == 'sameViewDrilldown'\">\n <div class=\"flex flex-row justify-between mt-3\">\n <div class=\"w-full\">\n <div class=\"text-md mb-2\"> Associated Views</div>\n <dx-tag-box [items]=\"allConfiguredViews\"\n [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n valueExpr=\"viewId\" displayExpr=\"viewName\"\n [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n </div>\n </div>\n </ng-container>\n <ng-container\n *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n <div class=\"flex flex-row justify-between mt-3\">\n <div class=\"w-full\">\n <ng-container\n *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n <div class=\"flex flex-row justify-between\">\n <div class=\"mx-2 w-1/2\">\n <div class=\"text-md mb-2\"> Associated Views</div>\n <dx-tag-box [items]=\"allConfiguredViews\"\n [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n displayExpr=\"viewName\" [showSelectionControls]=\"true\"\n [maxDisplayedTags]=\"2\"\n [searchEnabled]=\"true\"></dx-tag-box>\n\n </div>\n <div class=\"mx-2 w-1/2\">\n <div class=\"text-md mb-2\"> Associated Params</div>\n <dx-text-box\n [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n </div>\n <div class=\"mx-2\">\n <button\n class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n (click)=\"deleteAssociatedParams(i)\"><i\n class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </ng-container>\n <div class=\"flex flex-row justify-end mt-4\">\n <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n (click)=\"addAssociatedParams()\">Add\n Params</button>\n </div>\n </div>\n </div>\n </ng-container>\n <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n (click)=\"resetViewProprstise()\">Reset All Event</button>\n </div>\n </div>\n\n </div>\n </ng-container>\n </div>\n </div>\n\n </div>\n\n\n </div>\n</div>\n\n\n<div class=\"flex flex-row border-t pl-3\">\n <div class=\"flex justify-start mx-1\">\n <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n Preview</button>\n <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n Preview</button>\n </div>\n <div class=\"flex justify-end mx-1 flex-grow\">\n <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n (click)=\"getSaveChartConfig()\">Submit</button>\n </div>\n</div>" }]
|
|
4935
|
+
args: [{ selector: 'app-dash-table', template: "<div class=\"m-2\">\n <div class=\"w-full m-2 border-r\">\n <ng-container *ngIf=\"!isJsonPreview\">\n <pre><code>{{jsaonDatasource | json}}</code></pre>\n </ng-container>\n <ng-container *ngIf=\"isJsonPreview\">\n <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"dataSourseForTable\" [hoverStateEnabled]=\"true\"\n [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\" [columns]=\"tableDataConfig.columns\"\n [showRowLines]=\"true\" id=\"gridContainer\">\n <dxo-search-panel [highlightCaseSensitive]=\"true\"\n [visible]=\"tableDataConfig.searchPanel\"></dxo-search-panel>\n <dxo-export [enabled]=\"true\" fileName=\"{{tableDataConfig.file_name}}\"\n [customizeExcelCell]=\"commonService.customizeExcelCell\"></dxo-export>\n <dxo-paging [pageSize]=\"5\"></dxo-paging>\n <!-- <dxo-pager [showInfo]=\"tableDataConfig.pageInfo\" [showPageSizeSelector]=\"true\"\n [allowedPageSizes]=\"tableDataConfig.allowedPageSizes\">\n </dxo-pager> -->\n <!-- <ng-container *ngFor=\"let item of dataSourseForTable\">\n <div *ngFor=\"let key of getObjectKeys(item)\">\n <dxi-column dataField=\"{{ key }}\" *ngIf=\"key == 'recordDate'\" sortOrder=\"desc\"></dxi-column>\n <dxi-column [sortingMethod]=\"commonService.customValueSorter\" dataField=\"{{ key }}\"\n alignment=\"right\"></dxi-column>\n </div>\n </ng-container> -->\n <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n <dxi-column *ngIf=\"item.dataField == 'recordDate'\" dataField=\"{{ item.dataField }}\"\n [caption]=\"item.caption\" [visible]=\"item.visible\" sortOrder=\"desc\"></dxi-column>\n <dxi-column *ngIf=\"item.dataField !== 'recordDate'\"\n [sortingMethod]=\"commonService.customValueSorter\" [caption]=\"item.caption\"\n dataField=\"{{ item.dataField }}\" alignment=\"left\" [visible]=\"item.visible\">\n </dxi-column>\n </ng-container>\n </dx-data-grid>\n </ng-container>\n </div>\n <div class=\"w-full mx-2 border-r\">\n <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n <li class=\"me-2\" role=\"presentation\">\n <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n 'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n 'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n Basic\n </button>\n </li>\n <li class=\"me-2\" role=\"presentation\">\n <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n 'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n 'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n Columns\n </button>\n </li>\n <li class=\"me-2\" role=\"presentation\">\n <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n 'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n 'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n Properties\n </button>\n </li>\n\n </ul>\n </div>\n\n <div id=\"default-styled-tab-content\">\n <div *ngIf=\"activeTab === 'basic'\">\n <div class=\"flex flex-col flex-auto min-w-0\">\n <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title Config\n </div>\n <div class=\"pt-2 border-x border-b \">\n <div class=\"my-2 flex justify-between\">\n <div class=\"px-1 mb-1 w-full\">\n <div class=\"text-md mb-1\"> Title</div>\n <dx-text-box [(ngModel)]=\"tableDataConfig.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)]=\"tableDataConfig.commonConfig.dataField\"></dx-select-box>\n </div>\n <div class=\"px-1 mb-1 w-full\">\n <div class=\"text-md mb-2\"> Display Formate </div>\n <dx-select-box [items]=\"['daily','hourly','monthly']\"\n [(ngModel)]=\"table_columns_config.kpiConfig.formate\"></dx-select-box>\n </div>\n <div class=\"px-1 mb-1 w-full\">\n <div class=\"text-md mb-2\"> Key To Pass </div>\n <dx-tag-box [items]=\"configColume\"\n [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n </div>\n <!-- <div class=\"px-1 mb-1\">\n <div class=\"text-md mb-1\"> Checked Key</div>\n <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n [(ngModel)]=\"tableDataConfig.commonConfig.checkedKey\"></dx-select-box>\n </div>\n <div class=\"px-4 mt-6\">\n <dx-check-box [value]=\"tableDataConfig.commonConfig.isSearchBox\"\n [(ngModel)]=\"tableDataConfig.commonConfig.isSearchBox\"\n text=\"Search Box\"></dx-check-box>\n\n </div> -->\n </div>\n </div>\n </div>\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\"> Table Config\n </div>\n <div class=\"flex flse-row border-x border-b\">\n <div class=\"px-1 mb-2 mt-8 w-full\">\n <!-- <div class=\"text-md mb-2\"> </div> -->\n <dx-check-box [value]=\"tableDataConfig.searchPanel\"\n [(ngModel)]=\"tableDataConfig.searchPanel\" text=\"Search Panel\"></dx-check-box>\n </div>\n <div class=\" px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\">Sort By</div>\n <dx-tag-box [searchEnabled]=\"true\" [items]=\"configColume\"\n [(ngModel)]=\"tableDataConfig.tableSortBy\"></dx-tag-box>\n </div>\n <div class=\" px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\">File Name</div>\n <dx-text-box [(ngModel)]=\"tableDataConfig.file_name\"></dx-text-box>\n </div>\n <div class=\"px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\"> Number Of Row</div>\n <dx-number-box [value]=\"tableDataConfig.numberOfRow\"\n [(ngModel)]=\"tableDataConfig.numberOfRow\"></dx-number-box>\n </div>\n <div class=\"px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\"> Table Height</div>\n <dx-text-box [value]=\"tableDataConfig.tableHeight\"\n [(ngModel)]=\"tableDataConfig.tableHeight\"></dx-text-box>\n </div>\n <div class=\"px-1 mb-2 mt-8 w-full\">\n <dx-check-box [value]=\"tableDataConfig.pageInfo\" [(ngModel)]=\"tableDataConfig.pageInfo\"\n text=\"Page Info\"></dx-check-box>\n </div>\n </div>\n </div>\n\n </div>\n <div *ngIf=\"activeTab === 'columns'\">\n <div class=\"h-full overflow-x-auto\">\n <div class=\"flex flex-col flex-auto min-w-0\">\n\n <div class=\"pt-2 border-x border-b \">\n <div class=\"my-2 border-b flex flex-row\"\n *ngFor=\"let item of tableDataConfig.columns; let i = index;\">\n <div class=\"px-1 mb-2 mt-6 w-full\">\n <dx-check-box [value]=\"item.visible\" [(ngModel)]=\"item.visible\"\n text=\"Visiblity\"></dx-check-box>\n </div>\n <ng-container *ngIf=\"item.group !== undefined\">\n <div class=\"px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\">Group Name</div>\n <dx-text-box [(ngModel)]=\"item.group\"></dx-text-box>\n </div>\n </ng-container>\n <div class=\"px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\"> Value Field</div>\n <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n [(ngModel)]=\"item.dataField\"></dx-select-box>\n </div>\n <div class=\"px-1 mb-2 w-full\">\n <div class=\"text-md mb-2\"> Caption</div>\n <dx-text-box [(ngModel)]=\"item.caption\"></dx-text-box>\n </div>\n <div class=\"px-2 mb-2 w-full\">\n <div class=\"text-md mb-2\"> UI Function</div>\n <dx-select-box [items]=\"enrichNameList\" [(ngModel)]=\"item.enrichName\"\n [searchEnabled]=\"true\"></dx-select-box>\n </div>\n <div class=\"text-center mt-8 w-full\">\n <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n (click)=\"moveItemForColumns(i, 'up')\">\n <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n </button>\n\n <button *ngIf=\"i !== tableDataConfig.columns.length - 1\"\n class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n (click)=\"moveItemForColumns(i, 'down')\">\n <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n </button>\n <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n </button>\n </div>\n\n </div>\n </div>\n </div>\n <div class=\"flex flex-row justify-end my-2\">\n <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addColumns()\">Add\n Columns</button>\n </div>\n </div>\n </div>\n <div *ngIf=\"activeTab === 'properties'\">\n <div class=\"h-full overflow-x-auto\">\n <app-loader *ngIf=\"isLoader\"></app-loader>\n <ng-container *ngIf=\"!isLoader\">\n <div class=\"flex flex-row justify-between border-b py-3\">\n <div class=\"mx-2\">\n <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n [(ngModel)]=\"viewProperties.enableClickEvent\"\n text=\"Enable Click Event\"></dx-check-box>\n </div>\n <div class=\"mx-2\">\n <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n text=\"Enable Right Click\"></dx-check-box>\n </div>\n </div>\n <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n Type\n Option\n </div>\n <div class=\"w-full p-3 border-x border-b \">\n <div class=\"flex flex-row\">\n <div class=\"w-full\">\n <div class=\"text-md mb-2\"> Event Type</div>\n </div>\n <div class=\"w-full\">\n <dx-select-box\n [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','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 </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\" [searchEnabled]=\"true\"></dx-tag-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\" [searchEnabled]=\"true\"></dx-tag-box>\n </div>\n </div>\n </ng-container>\n <ng-container\n *ngIf=\"viewProperties.clickEventOptions.eventType == 'sameViewDrilldown'\">\n <div class=\"flex flex-row justify-between mt-3\">\n <div class=\"w-full\">\n <div class=\"text-md mb-2\"> Associated Views</div>\n <dx-tag-box [items]=\"allConfiguredViews\"\n [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n valueExpr=\"viewId\" displayExpr=\"viewName\"\n [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n </div>\n </div>\n </ng-container>\n <ng-container\n *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n <div class=\"flex flex-row justify-between mt-3\">\n <div class=\"w-full\">\n <ng-container\n *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n <div class=\"flex flex-row justify-between\">\n <div class=\"mx-2 w-1/2\">\n <div class=\"text-md mb-2\"> Associated Views</div>\n <dx-tag-box [items]=\"allConfiguredViews\"\n [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n displayExpr=\"viewName\" [showSelectionControls]=\"true\"\n [maxDisplayedTags]=\"2\"\n [searchEnabled]=\"true\"></dx-tag-box>\n\n </div>\n <div class=\"mx-2 w-1/2\">\n <div class=\"text-md mb-2\"> Associated Params</div>\n <dx-text-box\n [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n </div>\n <div class=\"mx-2\">\n <button\n class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n (click)=\"deleteAssociatedParams(i)\"><i\n class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </ng-container>\n <div class=\"flex flex-row justify-end mt-4\">\n <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n (click)=\"addAssociatedParams()\">Add\n Params</button>\n </div>\n </div>\n </div>\n </ng-container>\n <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n (click)=\"resetViewProprstise()\">Reset All Event</button>\n </div>\n </div>\n\n </div>\n </ng-container>\n </div>\n </div>\n\n </div>\n\n\n </div>\n</div>\n\n\n<div class=\"flex flex-row border-t pl-3\">\n <div class=\"flex justify-start mx-1\">\n <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n Preview</button>\n <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n Preview</button>\n </div>\n <div class=\"flex justify-end mx-1 flex-grow\">\n <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n (click)=\"getSaveChartConfig()\">Submit</button>\n </div>\n</div>" }]
|
|
4911
4936
|
}], ctorParameters: function () { return [{ type: CommonService }, { type: i0.ChangeDetectorRef }, { type: ApplicationContentService }, { type: i3$1.ToastrService }]; }, propDecorators: { getTableConfigOutPut: [{
|
|
4912
4937
|
type: Output
|
|
4913
4938
|
}], chartconfigData: [{
|
|
@@ -8574,10 +8599,10 @@ class GammSingleNumberCardComponent {
|
|
|
8574
8599
|
}
|
|
8575
8600
|
}
|
|
8576
8601
|
GammSingleNumberCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammSingleNumberCardComponent, deps: [{ token: CommonService }, { token: i3$1.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8577
|
-
GammSingleNumberCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammSingleNumberCardComponent, selector: "app-gamm-single-number-card", inputs: { chartDataSource: "chartDataSource" }, ngImport: i0, template: "<div class=\"flex flex-row justify-center items-start bg-gray-800 p-4 mx-2 text-center\">\n <ng-container *ngIf=\"isLoader\">\n <app-loader></app-loader>\n </ng-container>\n <ng-container *ngIf=\"!isLoader\">\n <div class=\"flex justify-center items-center text-4xl font-bold p-2 {{randomColorClass}}\">\n {{ currentDateData }}\n </div>\n </ng-container>\n\n</div>", dependencies: [{ kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
|
|
8602
|
+
GammSingleNumberCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammSingleNumberCardComponent, selector: "app-gamm-single-number-card", inputs: { chartDataSource: "chartDataSource" }, ngImport: i0, template: "<div class=\"flex flex-row justify-center items-start \n bg-gray-200 dark:bg-gray-800 \n text-gray-900 dark:text-gray-100 \n p-4 mx-2 text-center transition-colors duration-300\">\n\n <ng-container *ngIf=\"isLoader\">\n <app-loader></app-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!isLoader\">\n <div class=\"flex justify-center items-center text-4xl font-bold p-2 {{randomColorClass}}\">\n {{ currentDateData }}\n </div>\n </ng-container>\n\n</div>", dependencies: [{ kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
|
|
8578
8603
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammSingleNumberCardComponent, decorators: [{
|
|
8579
8604
|
type: Component,
|
|
8580
|
-
args: [{ selector: 'app-gamm-single-number-card', template: "<div class=\"flex flex-row justify-center items-start bg-gray-800 p-4 mx-2 text-center\">\n <ng-container *ngIf=\"isLoader\">\n <app-loader></app-loader>\n </ng-container>\n <ng-container *ngIf=\"!isLoader\">\n <div class=\"flex justify-center items-center text-4xl font-bold p-2 {{randomColorClass}}\">\n {{ currentDateData }}\n </div>\n </ng-container>\n\n</div>" }]
|
|
8605
|
+
args: [{ selector: 'app-gamm-single-number-card', template: "<div class=\"flex flex-row justify-center items-start \n bg-gray-200 dark:bg-gray-800 \n text-gray-900 dark:text-gray-100 \n p-4 mx-2 text-center transition-colors duration-300\">\n\n <ng-container *ngIf=\"isLoader\">\n <app-loader></app-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!isLoader\">\n <div class=\"flex justify-center items-center text-4xl font-bold p-2 {{randomColorClass}}\">\n {{ currentDateData }}\n </div>\n </ng-container>\n\n</div>" }]
|
|
8581
8606
|
}], ctorParameters: function () { return [{ type: CommonService }, { type: i3$1.ToastrService }]; }, propDecorators: { chartDataSource: [{
|
|
8582
8607
|
type: Input,
|
|
8583
8608
|
args: ['chartDataSource']
|
|
@@ -8745,10 +8770,10 @@ class GammaAdvanceOperatorTableComponent {
|
|
|
8745
8770
|
}
|
|
8746
8771
|
}
|
|
8747
8772
|
GammaAdvanceOperatorTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaAdvanceOperatorTableComponent, deps: [{ token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8748
|
-
GammaAdvanceOperatorTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammaAdvanceOperatorTableComponent, selector: "app-gamma-advance-operator-table", inputs: { chartDataSource: "chartDataSource" }, outputs: { getTableConfigOutPut: "getTableConfigOutPut", oRowClick: "oRowClick", onrightClickContextSelection: "onrightClickContextSelection" }, ngImport: i0, template: "<div class=\"mx-2 bg-gray-800\">\n <ng-container *ngIf=\"isLoader\">\n <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n <app-loader></app-loader>\n </div>\n </ng-container>\n\n <div class=\"mx-2 pb-2\">\n <!-- <dx-data-grid [columnAutoWidth]=\"true\" (onRowClick)=\"onRowClick($event)\" [dataSource]=\"dataSourseForTable\"\n [hoverStateEnabled]=\"true\" [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\"\n *ngIf=\"!isLoader\" [columns]=\"tableDataConfig.columns\" [showRowLines]=\"true\" id=\"gridContainer\"\n (onContextMenuPreparing)=\"addMenuItems($event)\">\n <dxo-search-panel [highlightCaseSensitive]=\"true\"\n [visible]=\"tableDataConfig.searchPanel\"></dxo-search-panel>\n <dxo-export [enabled]=\"true\" fileName=\"{{tableDataConfig.file_name}}\"\n [customizeExcelCell]=\"commonService.customizeExcelCell\"></dxo-export>\n <dxo-paging [pageSize]=\"tableDataConfig.numberOfRow\"></dxo-paging>\n <dxo-pager [showInfo]=\"tableDataConfig.pageInfo\" [showPageSizeSelector]=\"true\"\n [allowedPageSizes]=\"tableDataConfig.allowedPageSizes\">\n </dxo-pager>\n <ng-container *ngIf=\"tableDataConfig.columns && tableDataConfig.columns.length !== 0\">\n <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n <dxi-column *ngIf=\"item.dataField == 'recordDate'\" dataField=\"{{ item.dataField }}\"\n [caption]=\"item.caption\" [visible]=\"item.visible\" sortOrder=\"desc\"></dxi-column>\n <dxi-column *ngIf=\"item.dataField !== 'recordDate'\" format=\"#,##0.##\"\n [sortingMethod]=\"commonService.customValueSorter\" [cellTemplate]=\"item.dataField\"\n [caption]=\"item.caption\" dataField=\"{{ item.dataField }}\" alignment=\"left\"\n [visible]=\"item.visible\">\n </dxi-column>\n </ng-container>\n <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n <div *dxTemplate=\"let data of item.dataField\">\n <span [innerHTML]=\"data.value\"></span>\n </div>\n </ng-container>\n </ng-container>\n\n </dx-data-grid> -->\n <dx-data-grid [columnAutoWidth]=\"true\" (onRowClick)=\"onRowClick($event)\" [dataSource]=\"dataSourseForTable\"\n [hoverStateEnabled]=\"true\" [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\"\n [height]=\"tableHeight\" *ngIf=\"!isLoader\" [columns]=\"tableDataConfig.columns\" [showRowLines]=\"true\"\n id=\"gridContainer\" (onContextMenuPreparing)=\"addMenuItems($event)\"\n [customizeExportData]=\"commonService.removeHtmlContentFromData\">\n <dxo-search-panel [highlightCaseSensitive]=\"true\"\n [visible]=\"tableDataConfig.searchPanel\"></dxo-search-panel>\n <dxo-export [enabled]=\"true\" fileName=\"{{tableDataConfig.file_name}}\"\n [customizeExcelCell]=\"commonService.customizeExcelCell\"></dxo-export>\n <dxo-paging [pageSize]=\"tableDataConfig.numberOfRow\"></dxo-paging>\n <dxo-pager [showInfo]=\"tableDataConfig.pageInfo\" [showPageSizeSelector]=\"true\"\n [allowedPageSizes]=\"tableDataConfig.allowedPageSizes\">\n </dxo-pager>\n\n <!-- <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n <dxi-column *ngIf=\"item.dataField == 'recordDate'\" dataField=\"{{ item.dataField }}\"\n [caption]=\"item.caption\" [visible]=\"item.visible\" sortOrder=\"desc\"></dxi-column>\n <dxi-column *ngIf=\"item.dataField !== 'recordDate'\" [sortingMethod]=\"commonService.customValueSorter\"\n [cellTemplate]=\"item.dataField\" [caption]=\"item.caption\" dataField=\"{{ item.dataField }}\"\n alignment=\"left\" [visible]=\"item.visible\">\n </dxi-column>\n </ng-container> -->\n\n <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n <!-- Check if column has nested columns (columnsOne structure) -->\n <dxi-column *ngIf=\"item.columns; else flatColumn\" caption=\"{{ item.caption }}\">\n <ng-container *ngFor=\"let subItem of item.columns\">\n\n <dxi-column *ngIf=\"!shouldShowColumn(subItem.dataField)\" [dataField]=\"subItem.dataField\"\n [caption]=\"subItem.caption\" [visible]=\"subItem.visible\" alignment=\"left\"\n sortOrder=\"desc\"></dxi-column>\n\n <dxi-column *ngIf=\"shouldShowColumn(subItem.dataField)\" [dataField]=\"subItem.dataField\"\n [caption]=\"subItem.caption\" [visible]=\"subItem.visible\" alignment=\"right\"\n [cellTemplate]=\"item.dataField\"\n [sortingMethod]=\"commonService.customValueSorter\"></dxi-column>\n </ng-container>\n </dxi-column>\n\n <!-- Flat column structure (columnsTwo structure) -->\n <ng-template #flatColumn>\n\n <dxi-column *ngIf=\"!shouldShowColumn(item.dataField)\" dataField=\"{{ item.dataField }}\"\n [caption]=\"item.caption\" [visible]=\"item.visible\" sortOrder=\"desc\"></dxi-column>\n\n <dxi-column *ngIf=\"shouldShowColumn(item.dataField)\"\n [sortingMethod]=\"commonService.customValueSorter\" [cellTemplate]=\"item.dataField\"\n [caption]=\"item.caption\" dataField=\"{{ item.dataField }}\" alignment=\"right\"\n [visible]=\"item.visible\">\n </dxi-column>\n\n\n <!-- <dxi-column [dataField]=\"item.dataField\" [caption]=\"item.caption\" [visible]=\"item.visible\"\n [cellTemplate]=\"item.dataField\" alignment=\"left\"\n [sortingMethod]=\"commonService.customValueSorter\"></dxi-column> -->\n </ng-template>\n </ng-container>\n\n <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n <div *dxTemplate=\"let data of item.dataField\">\n <span [innerHTML]=\"data.value\"></span>\n </div>\n </ng-container>\n </dx-data-grid>\n\n </div>\n\n\n</div>", dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6.DxoExportComponent, selector: "dxo-export", inputs: ["backgroundColor", "enabled", "fileName", "formats", "margin", "printingEnabled", "proxyUrl", "svgToCanvas", "allowExportSelectedData", "customizeExcelCell", "excelFilterEnabled", "excelWrapTextEnabled", "ignoreExcelErrors", "texts"] }, { kind: "component", type: i9.DxDataGridComponent, selector: "dx-data-grid", inputs: ["accessKey", "activeStateEnabled", "allowColumnReordering", "allowColumnResizing", "autoNavigateToFocusedRow", "cacheEnabled", "cellHintEnabled", "columnAutoWidth", "columnChooser", "columnFixing", "columnHidingEnabled", "columnMinWidth", "columnResizingMode", "columns", "columnWidth", "customizeColumns", "customizeExportData", "dataRowTemplate", "dataSource", "dateSerializationFormat", "disabled", "editing", "elementAttr", "errorRowEnabled", "export", "filterBuilder", "filterBuilderPopup", "filterPanel", "filterRow", "filterSyncEnabled", "filterValue", "focusedColumnIndex", "focusedRowEnabled", "focusedRowIndex", "focusedRowKey", "focusStateEnabled", "grouping", "groupPanel", "headerFilter", "height", "highlightChanges", "hint", "hoverStateEnabled", "keyboardNavigation", "keyExpr", "loadPanel", "masterDetail", "noDataText", "pager", "paging", "remoteOperations", "renderAsync", "repaintChangesOnly", "rowAlternationEnabled", "rowDragging", "rowTemplate", "rtlEnabled", "scrolling", "searchPanel", "selectedRowKeys", "selection", "selectionFilter", "showBorders", "showColumnHeaders", "showColumnLines", "showRowLines", "sortByGroupSummaryInfo", "sorting", "stateStoring", "summary", "syncLookupFilterValues", "tabIndex", "toolbar", "twoWayBindingEnabled", "visible", "width", "wordWrapEnabled"], outputs: ["onAdaptiveDetailRowPreparing", "onCellClick", "onCellDblClick", "onCellHoverChanged", "onCellPrepared", "onContentReady", "onContextMenuPreparing", "onDataErrorOccurred", "onDisposing", "onEditCanceled", "onEditCanceling", "onEditingStart", "onEditorPrepared", "onEditorPreparing", "onExported", "onExporting", "onFileSaving", "onFocusedCellChanged", "onFocusedCellChanging", "onFocusedRowChanged", "onFocusedRowChanging", "onInitialized", "onInitNewRow", "onKeyDown", "onOptionChanged", "onRowClick", "onRowCollapsed", "onRowCollapsing", "onRowDblClick", "onRowExpanded", "onRowExpanding", "onRowInserted", "onRowInserting", "onRowPrepared", "onRowRemoved", "onRowRemoving", "onRowUpdated", "onRowUpdating", "onRowValidating", "onSaved", "onSaving", "onSelectionChanged", "onToolbarPreparing", "accessKeyChange", "activeStateEnabledChange", "allowColumnReorderingChange", "allowColumnResizingChange", "autoNavigateToFocusedRowChange", "cacheEnabledChange", "cellHintEnabledChange", "columnAutoWidthChange", "columnChooserChange", "columnFixingChange", "columnHidingEnabledChange", "columnMinWidthChange", "columnResizingModeChange", "columnsChange", "columnWidthChange", "customizeColumnsChange", "customizeExportDataChange", "dataRowTemplateChange", "dataSourceChange", "dateSerializationFormatChange", "disabledChange", "editingChange", "elementAttrChange", "errorRowEnabledChange", "exportChange", "filterBuilderChange", "filterBuilderPopupChange", "filterPanelChange", "filterRowChange", "filterSyncEnabledChange", "filterValueChange", "focusedColumnIndexChange", "focusedRowEnabledChange", "focusedRowIndexChange", "focusedRowKeyChange", "focusStateEnabledChange", "groupingChange", "groupPanelChange", "headerFilterChange", "heightChange", "highlightChangesChange", "hintChange", "hoverStateEnabledChange", "keyboardNavigationChange", "keyExprChange", "loadPanelChange", "masterDetailChange", "noDataTextChange", "pagerChange", "pagingChange", "remoteOperationsChange", "renderAsyncChange", "repaintChangesOnlyChange", "rowAlternationEnabledChange", "rowDraggingChange", "rowTemplateChange", "rtlEnabledChange", "scrollingChange", "searchPanelChange", "selectedRowKeysChange", "selectionChange", "selectionFilterChange", "showBordersChange", "showColumnHeadersChange", "showColumnLinesChange", "showRowLinesChange", "sortByGroupSummaryInfoChange", "sortingChange", "stateStoringChange", "summaryChange", "syncLookupFilterValuesChange", "tabIndexChange", "toolbarChange", "twoWayBindingEnabledChange", "visibleChange", "widthChange", "wordWrapEnabledChange"] }, { kind: "component", type: i6.DxiColumnComponent, selector: "dxi-column", inputs: ["alignment", "allowEditing", "allowExporting", "allowFiltering", "allowFixing", "allowGrouping", "allowHeaderFiltering", "allowHiding", "allowReordering", "allowResizing", "allowSearch", "allowSorting", "autoExpandGroup", "buttons", "calculateCellValue", "calculateDisplayValue", "calculateFilterExpression", "calculateGroupValue", "calculateSortValue", "caption", "cellTemplate", "columns", "cssClass", "customizeText", "dataField", "dataType", "editCellTemplate", "editorOptions", "encodeHtml", "falseText", "filterOperations", "filterType", "filterValue", "filterValues", "fixed", "fixedPosition", "format", "formItem", "groupCellTemplate", "groupIndex", "headerCellTemplate", "headerFilter", "hidingPriority", "isBand", "lookup", "minWidth", "name", "ownerBand", "renderAsync", "selectedFilterOperation", "setCellValue", "showEditorAlways", "showInColumnChooser", "showWhenGrouped", "sortIndex", "sortingMethod", "sortOrder", "trueText", "type", "validationRules", "visible", "visibleIndex", "width"], outputs: ["filterValueChange", "filterValuesChange", "groupIndexChange", "selectedFilterOperationChange", "sortIndexChange", "sortOrderChange", "visibleChange", "visibleIndexChange"] }, { kind: "component", type: i6.DxoPagerComponent, selector: "dxo-pager", inputs: ["allowedPageSizes", "displayMode", "infoText", "showInfo", "showNavigationButtons", "showPageSizeSelector", "visible"] }, { kind: "component", type: i6.DxoPagingComponent, selector: "dxo-paging", inputs: ["enabled", "pageIndex", "pageSize"], outputs: ["pageIndexChange", "pageSizeChange"] }, { kind: "component", type: i6.DxoSearchPanelComponent, selector: "dxo-search-panel", inputs: ["highlightCaseSensitive", "highlightSearchText", "placeholder", "searchVisibleColumnsOnly", "text", "visible", "width"], outputs: ["textChange"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
|
|
8773
|
+
GammaAdvanceOperatorTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammaAdvanceOperatorTableComponent, selector: "app-gamma-advance-operator-table", inputs: { chartDataSource: "chartDataSource" }, outputs: { getTableConfigOutPut: "getTableConfigOutPut", oRowClick: "oRowClick", onrightClickContextSelection: "onrightClickContextSelection" }, ngImport: i0, template: "<div class=\"mx-2 bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100\">\n <ng-container *ngIf=\"isLoader\">\n <div class=\"flex justify-center items-start bg-gray-200 dark:bg-gray-800 p-2\">\n <app-loader></app-loader>\n </div>\n </ng-container>\n\n <div class=\"mx-2 pb-2\">\n <!-- <dx-data-grid [columnAutoWidth]=\"true\" (onRowClick)=\"onRowClick($event)\" [dataSource]=\"dataSourseForTable\"\n [hoverStateEnabled]=\"true\" [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\"\n *ngIf=\"!isLoader\" [columns]=\"tableDataConfig.columns\" [showRowLines]=\"true\" id=\"gridContainer\"\n (onContextMenuPreparing)=\"addMenuItems($event)\">\n <dxo-search-panel [highlightCaseSensitive]=\"true\"\n [visible]=\"tableDataConfig.searchPanel\"></dxo-search-panel>\n <dxo-export [enabled]=\"true\" fileName=\"{{tableDataConfig.file_name}}\"\n [customizeExcelCell]=\"commonService.customizeExcelCell\"></dxo-export>\n <dxo-paging [pageSize]=\"tableDataConfig.numberOfRow\"></dxo-paging>\n <dxo-pager [showInfo]=\"tableDataConfig.pageInfo\" [showPageSizeSelector]=\"true\"\n [allowedPageSizes]=\"tableDataConfig.allowedPageSizes\">\n </dxo-pager>\n <ng-container *ngIf=\"tableDataConfig.columns && tableDataConfig.columns.length !== 0\">\n <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n <dxi-column *ngIf=\"item.dataField == 'recordDate'\" dataField=\"{{ item.dataField }}\"\n [caption]=\"item.caption\" [visible]=\"item.visible\" sortOrder=\"desc\"></dxi-column>\n <dxi-column *ngIf=\"item.dataField !== 'recordDate'\" format=\"#,##0.##\"\n [sortingMethod]=\"commonService.customValueSorter\" [cellTemplate]=\"item.dataField\"\n [caption]=\"item.caption\" dataField=\"{{ item.dataField }}\" alignment=\"left\"\n [visible]=\"item.visible\">\n </dxi-column>\n </ng-container>\n <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n <div *dxTemplate=\"let data of item.dataField\">\n <span [innerHTML]=\"data.value\"></span>\n </div>\n </ng-container>\n </ng-container>\n\n </dx-data-grid> -->\n <dx-data-grid [columnAutoWidth]=\"true\" (onRowClick)=\"onRowClick($event)\" [dataSource]=\"dataSourseForTable\"\n [hoverStateEnabled]=\"true\" [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\"\n [height]=\"tableHeight\" *ngIf=\"!isLoader\" [columns]=\"tableDataConfig.columns\" [showRowLines]=\"true\"\n id=\"gridContainer\" (onContextMenuPreparing)=\"addMenuItems($event)\"\n [customizeExportData]=\"commonService.removeHtmlContentFromData\">\n <dxo-search-panel [highlightCaseSensitive]=\"true\"\n [visible]=\"tableDataConfig.searchPanel\"></dxo-search-panel>\n <dxo-export [enabled]=\"true\" fileName=\"{{tableDataConfig.file_name}}\"\n [customizeExcelCell]=\"commonService.customizeExcelCell\"></dxo-export>\n <dxo-paging [pageSize]=\"tableDataConfig.numberOfRow\"></dxo-paging>\n <dxo-pager [showInfo]=\"tableDataConfig.pageInfo\" [showPageSizeSelector]=\"true\"\n [allowedPageSizes]=\"tableDataConfig.allowedPageSizes\">\n </dxo-pager>\n\n <!-- <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n <dxi-column *ngIf=\"item.dataField == 'recordDate'\" dataField=\"{{ item.dataField }}\"\n [caption]=\"item.caption\" [visible]=\"item.visible\" sortOrder=\"desc\"></dxi-column>\n <dxi-column *ngIf=\"item.dataField !== 'recordDate'\" [sortingMethod]=\"commonService.customValueSorter\"\n [cellTemplate]=\"item.dataField\" [caption]=\"item.caption\" dataField=\"{{ item.dataField }}\"\n alignment=\"left\" [visible]=\"item.visible\">\n </dxi-column>\n </ng-container> -->\n\n <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n <!-- Check if column has nested columns (columnsOne structure) -->\n <dxi-column *ngIf=\"item.columns; else flatColumn\" caption=\"{{ item.caption }}\">\n <ng-container *ngFor=\"let subItem of item.columns\">\n\n <dxi-column *ngIf=\"!shouldShowColumn(subItem.dataField)\" [dataField]=\"subItem.dataField\"\n [caption]=\"subItem.caption\" [visible]=\"subItem.visible\" alignment=\"left\"\n sortOrder=\"desc\"></dxi-column>\n\n <dxi-column *ngIf=\"shouldShowColumn(subItem.dataField)\" [dataField]=\"subItem.dataField\"\n [caption]=\"subItem.caption\" [visible]=\"subItem.visible\" alignment=\"right\"\n [cellTemplate]=\"item.dataField\"\n [sortingMethod]=\"commonService.customValueSorter\"></dxi-column>\n </ng-container>\n </dxi-column>\n\n <!-- Flat column structure (columnsTwo structure) -->\n <ng-template #flatColumn>\n\n <dxi-column *ngIf=\"!shouldShowColumn(item.dataField)\" dataField=\"{{ item.dataField }}\"\n [caption]=\"item.caption\" [visible]=\"item.visible\" sortOrder=\"desc\"></dxi-column>\n\n <dxi-column *ngIf=\"shouldShowColumn(item.dataField)\"\n [sortingMethod]=\"commonService.customValueSorter\" [cellTemplate]=\"item.dataField\"\n [caption]=\"item.caption\" dataField=\"{{ item.dataField }}\" alignment=\"right\"\n [visible]=\"item.visible\">\n </dxi-column>\n\n\n <!-- <dxi-column [dataField]=\"item.dataField\" [caption]=\"item.caption\" [visible]=\"item.visible\"\n [cellTemplate]=\"item.dataField\" alignment=\"left\"\n [sortingMethod]=\"commonService.customValueSorter\"></dxi-column> -->\n </ng-template>\n </ng-container>\n\n <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n <div *dxTemplate=\"let data of item.dataField\">\n <span [innerHTML]=\"data.value\"></span>\n </div>\n </ng-container>\n </dx-data-grid>\n\n </div>\n\n\n</div>", dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6.DxoExportComponent, selector: "dxo-export", inputs: ["backgroundColor", "enabled", "fileName", "formats", "margin", "printingEnabled", "proxyUrl", "svgToCanvas", "allowExportSelectedData", "customizeExcelCell", "excelFilterEnabled", "excelWrapTextEnabled", "ignoreExcelErrors", "texts"] }, { kind: "component", type: i9.DxDataGridComponent, selector: "dx-data-grid", inputs: ["accessKey", "activeStateEnabled", "allowColumnReordering", "allowColumnResizing", "autoNavigateToFocusedRow", "cacheEnabled", "cellHintEnabled", "columnAutoWidth", "columnChooser", "columnFixing", "columnHidingEnabled", "columnMinWidth", "columnResizingMode", "columns", "columnWidth", "customizeColumns", "customizeExportData", "dataRowTemplate", "dataSource", "dateSerializationFormat", "disabled", "editing", "elementAttr", "errorRowEnabled", "export", "filterBuilder", "filterBuilderPopup", "filterPanel", "filterRow", "filterSyncEnabled", "filterValue", "focusedColumnIndex", "focusedRowEnabled", "focusedRowIndex", "focusedRowKey", "focusStateEnabled", "grouping", "groupPanel", "headerFilter", "height", "highlightChanges", "hint", "hoverStateEnabled", "keyboardNavigation", "keyExpr", "loadPanel", "masterDetail", "noDataText", "pager", "paging", "remoteOperations", "renderAsync", "repaintChangesOnly", "rowAlternationEnabled", "rowDragging", "rowTemplate", "rtlEnabled", "scrolling", "searchPanel", "selectedRowKeys", "selection", "selectionFilter", "showBorders", "showColumnHeaders", "showColumnLines", "showRowLines", "sortByGroupSummaryInfo", "sorting", "stateStoring", "summary", "syncLookupFilterValues", "tabIndex", "toolbar", "twoWayBindingEnabled", "visible", "width", "wordWrapEnabled"], outputs: ["onAdaptiveDetailRowPreparing", "onCellClick", "onCellDblClick", "onCellHoverChanged", "onCellPrepared", "onContentReady", "onContextMenuPreparing", "onDataErrorOccurred", "onDisposing", "onEditCanceled", "onEditCanceling", "onEditingStart", "onEditorPrepared", "onEditorPreparing", "onExported", "onExporting", "onFileSaving", "onFocusedCellChanged", "onFocusedCellChanging", "onFocusedRowChanged", "onFocusedRowChanging", "onInitialized", "onInitNewRow", "onKeyDown", "onOptionChanged", "onRowClick", "onRowCollapsed", "onRowCollapsing", "onRowDblClick", "onRowExpanded", "onRowExpanding", "onRowInserted", "onRowInserting", "onRowPrepared", "onRowRemoved", "onRowRemoving", "onRowUpdated", "onRowUpdating", "onRowValidating", "onSaved", "onSaving", "onSelectionChanged", "onToolbarPreparing", "accessKeyChange", "activeStateEnabledChange", "allowColumnReorderingChange", "allowColumnResizingChange", "autoNavigateToFocusedRowChange", "cacheEnabledChange", "cellHintEnabledChange", "columnAutoWidthChange", "columnChooserChange", "columnFixingChange", "columnHidingEnabledChange", "columnMinWidthChange", "columnResizingModeChange", "columnsChange", "columnWidthChange", "customizeColumnsChange", "customizeExportDataChange", "dataRowTemplateChange", "dataSourceChange", "dateSerializationFormatChange", "disabledChange", "editingChange", "elementAttrChange", "errorRowEnabledChange", "exportChange", "filterBuilderChange", "filterBuilderPopupChange", "filterPanelChange", "filterRowChange", "filterSyncEnabledChange", "filterValueChange", "focusedColumnIndexChange", "focusedRowEnabledChange", "focusedRowIndexChange", "focusedRowKeyChange", "focusStateEnabledChange", "groupingChange", "groupPanelChange", "headerFilterChange", "heightChange", "highlightChangesChange", "hintChange", "hoverStateEnabledChange", "keyboardNavigationChange", "keyExprChange", "loadPanelChange", "masterDetailChange", "noDataTextChange", "pagerChange", "pagingChange", "remoteOperationsChange", "renderAsyncChange", "repaintChangesOnlyChange", "rowAlternationEnabledChange", "rowDraggingChange", "rowTemplateChange", "rtlEnabledChange", "scrollingChange", "searchPanelChange", "selectedRowKeysChange", "selectionChange", "selectionFilterChange", "showBordersChange", "showColumnHeadersChange", "showColumnLinesChange", "showRowLinesChange", "sortByGroupSummaryInfoChange", "sortingChange", "stateStoringChange", "summaryChange", "syncLookupFilterValuesChange", "tabIndexChange", "toolbarChange", "twoWayBindingEnabledChange", "visibleChange", "widthChange", "wordWrapEnabledChange"] }, { kind: "component", type: i6.DxiColumnComponent, selector: "dxi-column", inputs: ["alignment", "allowEditing", "allowExporting", "allowFiltering", "allowFixing", "allowGrouping", "allowHeaderFiltering", "allowHiding", "allowReordering", "allowResizing", "allowSearch", "allowSorting", "autoExpandGroup", "buttons", "calculateCellValue", "calculateDisplayValue", "calculateFilterExpression", "calculateGroupValue", "calculateSortValue", "caption", "cellTemplate", "columns", "cssClass", "customizeText", "dataField", "dataType", "editCellTemplate", "editorOptions", "encodeHtml", "falseText", "filterOperations", "filterType", "filterValue", "filterValues", "fixed", "fixedPosition", "format", "formItem", "groupCellTemplate", "groupIndex", "headerCellTemplate", "headerFilter", "hidingPriority", "isBand", "lookup", "minWidth", "name", "ownerBand", "renderAsync", "selectedFilterOperation", "setCellValue", "showEditorAlways", "showInColumnChooser", "showWhenGrouped", "sortIndex", "sortingMethod", "sortOrder", "trueText", "type", "validationRules", "visible", "visibleIndex", "width"], outputs: ["filterValueChange", "filterValuesChange", "groupIndexChange", "selectedFilterOperationChange", "sortIndexChange", "sortOrderChange", "visibleChange", "visibleIndexChange"] }, { kind: "component", type: i6.DxoPagerComponent, selector: "dxo-pager", inputs: ["allowedPageSizes", "displayMode", "infoText", "showInfo", "showNavigationButtons", "showPageSizeSelector", "visible"] }, { kind: "component", type: i6.DxoPagingComponent, selector: "dxo-paging", inputs: ["enabled", "pageIndex", "pageSize"], outputs: ["pageIndexChange", "pageSizeChange"] }, { kind: "component", type: i6.DxoSearchPanelComponent, selector: "dxo-search-panel", inputs: ["highlightCaseSensitive", "highlightSearchText", "placeholder", "searchVisibleColumnsOnly", "text", "visible", "width"], outputs: ["textChange"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
|
|
8749
8774
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaAdvanceOperatorTableComponent, decorators: [{
|
|
8750
8775
|
type: Component,
|
|
8751
|
-
args: [{ selector: 'app-gamma-advance-operator-table', template: "<div class=\"mx-2 bg-gray-800\">\n <ng-container *ngIf=\"isLoader\">\n <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n <app-loader></app-loader>\n </div>\n </ng-container>\n\n <div class=\"mx-2 pb-2\">\n <!-- <dx-data-grid [columnAutoWidth]=\"true\" (onRowClick)=\"onRowClick($event)\" [dataSource]=\"dataSourseForTable\"\n [hoverStateEnabled]=\"true\" [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\"\n *ngIf=\"!isLoader\" [columns]=\"tableDataConfig.columns\" [showRowLines]=\"true\" id=\"gridContainer\"\n (onContextMenuPreparing)=\"addMenuItems($event)\">\n <dxo-search-panel [highlightCaseSensitive]=\"true\"\n [visible]=\"tableDataConfig.searchPanel\"></dxo-search-panel>\n <dxo-export [enabled]=\"true\" fileName=\"{{tableDataConfig.file_name}}\"\n [customizeExcelCell]=\"commonService.customizeExcelCell\"></dxo-export>\n <dxo-paging [pageSize]=\"tableDataConfig.numberOfRow\"></dxo-paging>\n <dxo-pager [showInfo]=\"tableDataConfig.pageInfo\" [showPageSizeSelector]=\"true\"\n [allowedPageSizes]=\"tableDataConfig.allowedPageSizes\">\n </dxo-pager>\n <ng-container *ngIf=\"tableDataConfig.columns && tableDataConfig.columns.length !== 0\">\n <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n <dxi-column *ngIf=\"item.dataField == 'recordDate'\" dataField=\"{{ item.dataField }}\"\n [caption]=\"item.caption\" [visible]=\"item.visible\" sortOrder=\"desc\"></dxi-column>\n <dxi-column *ngIf=\"item.dataField !== 'recordDate'\" format=\"#,##0.##\"\n [sortingMethod]=\"commonService.customValueSorter\" [cellTemplate]=\"item.dataField\"\n [caption]=\"item.caption\" dataField=\"{{ item.dataField }}\" alignment=\"left\"\n [visible]=\"item.visible\">\n </dxi-column>\n </ng-container>\n <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n <div *dxTemplate=\"let data of item.dataField\">\n <span [innerHTML]=\"data.value\"></span>\n </div>\n </ng-container>\n </ng-container>\n\n </dx-data-grid> -->\n <dx-data-grid [columnAutoWidth]=\"true\" (onRowClick)=\"onRowClick($event)\" [dataSource]=\"dataSourseForTable\"\n [hoverStateEnabled]=\"true\" [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\"\n [height]=\"tableHeight\" *ngIf=\"!isLoader\" [columns]=\"tableDataConfig.columns\" [showRowLines]=\"true\"\n id=\"gridContainer\" (onContextMenuPreparing)=\"addMenuItems($event)\"\n [customizeExportData]=\"commonService.removeHtmlContentFromData\">\n <dxo-search-panel [highlightCaseSensitive]=\"true\"\n [visible]=\"tableDataConfig.searchPanel\"></dxo-search-panel>\n <dxo-export [enabled]=\"true\" fileName=\"{{tableDataConfig.file_name}}\"\n [customizeExcelCell]=\"commonService.customizeExcelCell\"></dxo-export>\n <dxo-paging [pageSize]=\"tableDataConfig.numberOfRow\"></dxo-paging>\n <dxo-pager [showInfo]=\"tableDataConfig.pageInfo\" [showPageSizeSelector]=\"true\"\n [allowedPageSizes]=\"tableDataConfig.allowedPageSizes\">\n </dxo-pager>\n\n <!-- <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n <dxi-column *ngIf=\"item.dataField == 'recordDate'\" dataField=\"{{ item.dataField }}\"\n [caption]=\"item.caption\" [visible]=\"item.visible\" sortOrder=\"desc\"></dxi-column>\n <dxi-column *ngIf=\"item.dataField !== 'recordDate'\" [sortingMethod]=\"commonService.customValueSorter\"\n [cellTemplate]=\"item.dataField\" [caption]=\"item.caption\" dataField=\"{{ item.dataField }}\"\n alignment=\"left\" [visible]=\"item.visible\">\n </dxi-column>\n </ng-container> -->\n\n <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n <!-- Check if column has nested columns (columnsOne structure) -->\n <dxi-column *ngIf=\"item.columns; else flatColumn\" caption=\"{{ item.caption }}\">\n <ng-container *ngFor=\"let subItem of item.columns\">\n\n <dxi-column *ngIf=\"!shouldShowColumn(subItem.dataField)\" [dataField]=\"subItem.dataField\"\n [caption]=\"subItem.caption\" [visible]=\"subItem.visible\" alignment=\"left\"\n sortOrder=\"desc\"></dxi-column>\n\n <dxi-column *ngIf=\"shouldShowColumn(subItem.dataField)\" [dataField]=\"subItem.dataField\"\n [caption]=\"subItem.caption\" [visible]=\"subItem.visible\" alignment=\"right\"\n [cellTemplate]=\"item.dataField\"\n [sortingMethod]=\"commonService.customValueSorter\"></dxi-column>\n </ng-container>\n </dxi-column>\n\n <!-- Flat column structure (columnsTwo structure) -->\n <ng-template #flatColumn>\n\n <dxi-column *ngIf=\"!shouldShowColumn(item.dataField)\" dataField=\"{{ item.dataField }}\"\n [caption]=\"item.caption\" [visible]=\"item.visible\" sortOrder=\"desc\"></dxi-column>\n\n <dxi-column *ngIf=\"shouldShowColumn(item.dataField)\"\n [sortingMethod]=\"commonService.customValueSorter\" [cellTemplate]=\"item.dataField\"\n [caption]=\"item.caption\" dataField=\"{{ item.dataField }}\" alignment=\"right\"\n [visible]=\"item.visible\">\n </dxi-column>\n\n\n <!-- <dxi-column [dataField]=\"item.dataField\" [caption]=\"item.caption\" [visible]=\"item.visible\"\n [cellTemplate]=\"item.dataField\" alignment=\"left\"\n [sortingMethod]=\"commonService.customValueSorter\"></dxi-column> -->\n </ng-template>\n </ng-container>\n\n <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n <div *dxTemplate=\"let data of item.dataField\">\n <span [innerHTML]=\"data.value\"></span>\n </div>\n </ng-container>\n </dx-data-grid>\n\n </div>\n\n\n</div>" }]
|
|
8776
|
+
args: [{ selector: 'app-gamma-advance-operator-table', template: "<div class=\"mx-2 bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100\">\n <ng-container *ngIf=\"isLoader\">\n <div class=\"flex justify-center items-start bg-gray-200 dark:bg-gray-800 p-2\">\n <app-loader></app-loader>\n </div>\n </ng-container>\n\n <div class=\"mx-2 pb-2\">\n <!-- <dx-data-grid [columnAutoWidth]=\"true\" (onRowClick)=\"onRowClick($event)\" [dataSource]=\"dataSourseForTable\"\n [hoverStateEnabled]=\"true\" [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\"\n *ngIf=\"!isLoader\" [columns]=\"tableDataConfig.columns\" [showRowLines]=\"true\" id=\"gridContainer\"\n (onContextMenuPreparing)=\"addMenuItems($event)\">\n <dxo-search-panel [highlightCaseSensitive]=\"true\"\n [visible]=\"tableDataConfig.searchPanel\"></dxo-search-panel>\n <dxo-export [enabled]=\"true\" fileName=\"{{tableDataConfig.file_name}}\"\n [customizeExcelCell]=\"commonService.customizeExcelCell\"></dxo-export>\n <dxo-paging [pageSize]=\"tableDataConfig.numberOfRow\"></dxo-paging>\n <dxo-pager [showInfo]=\"tableDataConfig.pageInfo\" [showPageSizeSelector]=\"true\"\n [allowedPageSizes]=\"tableDataConfig.allowedPageSizes\">\n </dxo-pager>\n <ng-container *ngIf=\"tableDataConfig.columns && tableDataConfig.columns.length !== 0\">\n <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n <dxi-column *ngIf=\"item.dataField == 'recordDate'\" dataField=\"{{ item.dataField }}\"\n [caption]=\"item.caption\" [visible]=\"item.visible\" sortOrder=\"desc\"></dxi-column>\n <dxi-column *ngIf=\"item.dataField !== 'recordDate'\" format=\"#,##0.##\"\n [sortingMethod]=\"commonService.customValueSorter\" [cellTemplate]=\"item.dataField\"\n [caption]=\"item.caption\" dataField=\"{{ item.dataField }}\" alignment=\"left\"\n [visible]=\"item.visible\">\n </dxi-column>\n </ng-container>\n <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n <div *dxTemplate=\"let data of item.dataField\">\n <span [innerHTML]=\"data.value\"></span>\n </div>\n </ng-container>\n </ng-container>\n\n </dx-data-grid> -->\n <dx-data-grid [columnAutoWidth]=\"true\" (onRowClick)=\"onRowClick($event)\" [dataSource]=\"dataSourseForTable\"\n [hoverStateEnabled]=\"true\" [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\"\n [height]=\"tableHeight\" *ngIf=\"!isLoader\" [columns]=\"tableDataConfig.columns\" [showRowLines]=\"true\"\n id=\"gridContainer\" (onContextMenuPreparing)=\"addMenuItems($event)\"\n [customizeExportData]=\"commonService.removeHtmlContentFromData\">\n <dxo-search-panel [highlightCaseSensitive]=\"true\"\n [visible]=\"tableDataConfig.searchPanel\"></dxo-search-panel>\n <dxo-export [enabled]=\"true\" fileName=\"{{tableDataConfig.file_name}}\"\n [customizeExcelCell]=\"commonService.customizeExcelCell\"></dxo-export>\n <dxo-paging [pageSize]=\"tableDataConfig.numberOfRow\"></dxo-paging>\n <dxo-pager [showInfo]=\"tableDataConfig.pageInfo\" [showPageSizeSelector]=\"true\"\n [allowedPageSizes]=\"tableDataConfig.allowedPageSizes\">\n </dxo-pager>\n\n <!-- <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n <dxi-column *ngIf=\"item.dataField == 'recordDate'\" dataField=\"{{ item.dataField }}\"\n [caption]=\"item.caption\" [visible]=\"item.visible\" sortOrder=\"desc\"></dxi-column>\n <dxi-column *ngIf=\"item.dataField !== 'recordDate'\" [sortingMethod]=\"commonService.customValueSorter\"\n [cellTemplate]=\"item.dataField\" [caption]=\"item.caption\" dataField=\"{{ item.dataField }}\"\n alignment=\"left\" [visible]=\"item.visible\">\n </dxi-column>\n </ng-container> -->\n\n <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n <!-- Check if column has nested columns (columnsOne structure) -->\n <dxi-column *ngIf=\"item.columns; else flatColumn\" caption=\"{{ item.caption }}\">\n <ng-container *ngFor=\"let subItem of item.columns\">\n\n <dxi-column *ngIf=\"!shouldShowColumn(subItem.dataField)\" [dataField]=\"subItem.dataField\"\n [caption]=\"subItem.caption\" [visible]=\"subItem.visible\" alignment=\"left\"\n sortOrder=\"desc\"></dxi-column>\n\n <dxi-column *ngIf=\"shouldShowColumn(subItem.dataField)\" [dataField]=\"subItem.dataField\"\n [caption]=\"subItem.caption\" [visible]=\"subItem.visible\" alignment=\"right\"\n [cellTemplate]=\"item.dataField\"\n [sortingMethod]=\"commonService.customValueSorter\"></dxi-column>\n </ng-container>\n </dxi-column>\n\n <!-- Flat column structure (columnsTwo structure) -->\n <ng-template #flatColumn>\n\n <dxi-column *ngIf=\"!shouldShowColumn(item.dataField)\" dataField=\"{{ item.dataField }}\"\n [caption]=\"item.caption\" [visible]=\"item.visible\" sortOrder=\"desc\"></dxi-column>\n\n <dxi-column *ngIf=\"shouldShowColumn(item.dataField)\"\n [sortingMethod]=\"commonService.customValueSorter\" [cellTemplate]=\"item.dataField\"\n [caption]=\"item.caption\" dataField=\"{{ item.dataField }}\" alignment=\"right\"\n [visible]=\"item.visible\">\n </dxi-column>\n\n\n <!-- <dxi-column [dataField]=\"item.dataField\" [caption]=\"item.caption\" [visible]=\"item.visible\"\n [cellTemplate]=\"item.dataField\" alignment=\"left\"\n [sortingMethod]=\"commonService.customValueSorter\"></dxi-column> -->\n </ng-template>\n </ng-container>\n\n <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n <div *dxTemplate=\"let data of item.dataField\">\n <span [innerHTML]=\"data.value\"></span>\n </div>\n </ng-container>\n </dx-data-grid>\n\n </div>\n\n\n</div>" }]
|
|
8752
8777
|
}], ctorParameters: function () { return [{ type: CommonService }]; }, propDecorators: { getTableConfigOutPut: [{
|
|
8753
8778
|
type: Output
|
|
8754
8779
|
}], oRowClick: [{
|
|
@@ -8902,10 +8927,10 @@ class AppTitleComponent {
|
|
|
8902
8927
|
}
|
|
8903
8928
|
}
|
|
8904
8929
|
AppTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AppTitleComponent, deps: [{ token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8905
|
-
AppTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AppTitleComponent, selector: "app-title", inputs: { title: "title", multiple: "multiple", isFilterDisplay: "isFilterDisplay", icon: "icon", iconName: "iconName", displayType: "displayType", keyToPass: "keyToPass", fixOperationLevles: "fixOperationLevles", operators: "operators" }, outputs: { onOperatorClick: "onOperatorClick" }, ngImport: i0, template: "<div class=\"p-4 rounded-t-lg shadow-md dark:bg-gray-800 mx-2 mt-2 bg-sky-900\" *ngIf=\"displayType == 'chart'\">\n <h5 class=\"text-md font-bold tracking-tight text-white dark:border-b dark:pb-2 dark:border-gray-700 \">\n <i class=\"{{iconName}}\" *ngIf=\"icon\"></i> {{title}}\n </h5>\n</div>\n\n<!-- <app-card-header [title]=\"'Administration Highlights'\"></app-card-header>\n<div class=\"flex bg-white dark:bg-gray-800 p-4 rounded-b-lg mx-2 mb-2 \">\n</div> -->\n\n<div class=\"p-4 rounded-t-lg shadow-md dark:bg-gray-800
|
|
8930
|
+
AppTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AppTitleComponent, selector: "app-title", inputs: { title: "title", multiple: "multiple", isFilterDisplay: "isFilterDisplay", icon: "icon", iconName: "iconName", displayType: "displayType", keyToPass: "keyToPass", fixOperationLevles: "fixOperationLevles", operators: "operators" }, outputs: { onOperatorClick: "onOperatorClick" }, ngImport: i0, template: "<div class=\"p-4 rounded-t-lg shadow-md dark:bg-gray-800 mx-2 mt-2 bg-sky-900\" *ngIf=\"displayType == 'chart'\">\n <h5 class=\"text-md font-bold tracking-tight text-white dark:border-b dark:pb-2 dark:border-gray-700 \">\n <i class=\"{{iconName}}\" *ngIf=\"icon\"></i> {{title}}\n </h5>\n</div>\n\n<!-- <app-card-header [title]=\"'Administration Highlights'\"></app-card-header>\n<div class=\"flex bg-white dark:bg-gray-800 p-4 rounded-b-lg mx-2 mb-2 \">\n</div> -->\n\n<div class=\"p-4 rounded-t-lg shadow-md bg-gray-200 dark:bg-gray-800 mx-2 mt-2\" *ngIf=\"displayType !== 'chart'\">\n <div class=\"flex justify-between dark:border-b\">\n <div class=\"flex items-center float-start\">\n <h5 class=\"text-md font-bold tracking-tight text-white dark:pb-2\">\n <i class=\"{{iconName}}\" *ngIf=\"icon\"></i> {{title}}\n </h5>\n </div>\n <div class=\"flex items-center float-end mb-2\" *ngIf=\"operator_display\">\n <!-- <div class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"getOperator(item)\">Advance Search</div> -->\n <ng-container *ngIf=\"isFilterDisplay\">\n <div class=\"{{commonService.badge_primary_sm}} cursor-pointer\" (click)=\"openSearchFilter()\">Search Filter</div>\n </ng-container>\n <ng-container *ngFor=\"let item of operatorsDatasource\">\n <div class=\"{{commonService.badge_primary_sm}} cursor-pointer\" (click)=\"getOperator(item)\">\n {{getCapitalize(item)}}\n </div>\n </ng-container>\n </div>\n </div>\n</div>\n\n\n\n<dx-popup [(visible)]=\"isSearchModal\" [closeOnOutsideClick]=\"true\" [dragEnabled]=\"false\" [height]=\"'32rem'\"\n [showTitle]=\"true\" [width]=\"1100\" class=\"popup \" title=\"Search\">\n <div *dxTemplate=\"let data of 'content' \">\n <!-- <app-gamma-filter-component [operators]=\"operatorsDatasource\"\n [fixOperationLevles]=\"fixoperationValue\"></app-gamma-filter-component> -->\n\n </div>\n</dx-popup>", dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i9$1.DxPopupComponent, selector: "dx-popup", inputs: ["accessKey", "animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "elementAttr", "focusStateEnabled", "fullScreen", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "resizeEnabled", "restorePosition", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showTitle", "tabIndex", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onResize", "onResizeEnd", "onResizeStart", "onShowing", "onShown", "onTitleRendered", "accessKeyChange", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "dragAndResizeAreaChange", "dragEnabledChange", "dragOutsideBoundaryChange", "elementAttrChange", "focusStateEnabledChange", "fullScreenChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "resizeEnabledChange", "restorePositionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showTitleChange", "tabIndexChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] });
|
|
8906
8931
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AppTitleComponent, decorators: [{
|
|
8907
8932
|
type: Component,
|
|
8908
|
-
args: [{ selector: 'app-title', template: "<div class=\"p-4 rounded-t-lg shadow-md dark:bg-gray-800 mx-2 mt-2 bg-sky-900\" *ngIf=\"displayType == 'chart'\">\n <h5 class=\"text-md font-bold tracking-tight text-white dark:border-b dark:pb-2 dark:border-gray-700 \">\n <i class=\"{{iconName}}\" *ngIf=\"icon\"></i> {{title}}\n </h5>\n</div>\n\n<!-- <app-card-header [title]=\"'Administration Highlights'\"></app-card-header>\n<div class=\"flex bg-white dark:bg-gray-800 p-4 rounded-b-lg mx-2 mb-2 \">\n</div> -->\n\n<div class=\"p-4 rounded-t-lg shadow-md dark:bg-gray-800
|
|
8933
|
+
args: [{ selector: 'app-title', template: "<div class=\"p-4 rounded-t-lg shadow-md dark:bg-gray-800 mx-2 mt-2 bg-sky-900\" *ngIf=\"displayType == 'chart'\">\n <h5 class=\"text-md font-bold tracking-tight text-white dark:border-b dark:pb-2 dark:border-gray-700 \">\n <i class=\"{{iconName}}\" *ngIf=\"icon\"></i> {{title}}\n </h5>\n</div>\n\n<!-- <app-card-header [title]=\"'Administration Highlights'\"></app-card-header>\n<div class=\"flex bg-white dark:bg-gray-800 p-4 rounded-b-lg mx-2 mb-2 \">\n</div> -->\n\n<div class=\"p-4 rounded-t-lg shadow-md bg-gray-200 dark:bg-gray-800 mx-2 mt-2\" *ngIf=\"displayType !== 'chart'\">\n <div class=\"flex justify-between dark:border-b\">\n <div class=\"flex items-center float-start\">\n <h5 class=\"text-md font-bold tracking-tight text-white dark:pb-2\">\n <i class=\"{{iconName}}\" *ngIf=\"icon\"></i> {{title}}\n </h5>\n </div>\n <div class=\"flex items-center float-end mb-2\" *ngIf=\"operator_display\">\n <!-- <div class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"getOperator(item)\">Advance Search</div> -->\n <ng-container *ngIf=\"isFilterDisplay\">\n <div class=\"{{commonService.badge_primary_sm}} cursor-pointer\" (click)=\"openSearchFilter()\">Search Filter</div>\n </ng-container>\n <ng-container *ngFor=\"let item of operatorsDatasource\">\n <div class=\"{{commonService.badge_primary_sm}} cursor-pointer\" (click)=\"getOperator(item)\">\n {{getCapitalize(item)}}\n </div>\n </ng-container>\n </div>\n </div>\n</div>\n\n\n\n<dx-popup [(visible)]=\"isSearchModal\" [closeOnOutsideClick]=\"true\" [dragEnabled]=\"false\" [height]=\"'32rem'\"\n [showTitle]=\"true\" [width]=\"1100\" class=\"popup \" title=\"Search\">\n <div *dxTemplate=\"let data of 'content' \">\n <!-- <app-gamma-filter-component [operators]=\"operatorsDatasource\"\n [fixOperationLevles]=\"fixoperationValue\"></app-gamma-filter-component> -->\n\n </div>\n</dx-popup>" }]
|
|
8909
8934
|
}], ctorParameters: function () { return [{ type: CommonService }]; }, propDecorators: { title: [{
|
|
8910
8935
|
type: Input
|
|
8911
8936
|
}], multiple: [{
|
|
@@ -9304,10 +9329,10 @@ class GammaAdvanceChartComponent {
|
|
|
9304
9329
|
}
|
|
9305
9330
|
}
|
|
9306
9331
|
GammaAdvanceChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaAdvanceChartComponent, deps: [{ token: CommonService }, { token: i3$1.ToastrService }, { token: kpicommonService$1 }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: APP_ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Component });
|
|
9307
|
-
GammaAdvanceChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammaAdvanceChartComponent, selector: "app-gamma-advance-chart", inputs: { componentId: "componentId", kpi_name: "kpi_name", chartDataSource: "chartDataSource" }, outputs: { onChartPointClick: "onChartPointClick" }, ngImport: i0, template: "<div class=\"not-full-screen\" (dblclick)=\"toggleFullScreen()\">\n <ng-container *ngIf=\"page_config?.widGetConfig?.display\">\n <app-title [title]=\"page_config.widGetConfig.widgetTitle\" [operators]=\"page_config.operations\"\n [displayType]=\"'chart'\"></app-title>\n </ng-container>\n <div class=\"mx-2 p-2 bg-gray-800\">\n <app-loader *ngIf=\"isLoader\"></app-loader>\n <ng-container\n *ngIf=\"chartConfig.chartType !== 'doughnut' && chartConfig.chartType !== 'pie' && chartConfig.chartType !== 'funnel' && chartConfig.chartType !== 'bubble'\">\n \n <dx-chart id=\"chart\" [dataSource]=\"finalChartDataSource\" (onPointClick)=\"getAllChartPointClick($event)\"\n [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" *ngIf=\"!isLoader\"\n [valueAxis]=\"chartConfig.valueAxisConfig\">\n <ng-container *ngIf=\"chartConfig.size\">\n <dxo-size [height]=\"chartConfig.size\">\n </dxo-size>\n </ng-container>\n\n <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n <ng-container *ngIf=\"item && 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\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\" [customizeTooltip]=\"customizeTooltip\">\n </dxo-tooltip>\n <dxo-common-series-settings argumentField=\"{{chartConfig.argumentField}}\">\n </dxo-common-series-settings>\n <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n <ng-container *ngIf=\"item && item.color\">\n <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n name=\"{{item.name}}\" color=\"{{item.color}}\">\n </dxi-series>\n </ng-container>\n <ng-container *ngIf=\"item && !item.color\">\n <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n name=\"{{item.name}}\">\n </dxi-series>\n </ng-container>\n\n </ng-container>\n <dxo-size [height]=\"chartHeight\">\n </dxo-size>\n <dxo-legend [visible]=\"chartConfig.legendDisplay\" verticalAlignment=\"{{chartConfig.verticalAlignment}}\"\n horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\">\n </dxo-legend>\n </dx-chart>\n </ng-container>\n\n\n\n <ng-container *ngIf=\"chartConfig.chartType == 'doughnut' || chartConfig.chartType == 'pie'\">\n\n <dx-pie-chart id=\"pie\" [type]=\"chartConfig.chartType\" [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n [dataSource]=\"finalChartDataSource\" 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=\"currency\">\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=\"currency\">\n <dxo-connector [visible]=\"true\"></dxo-connector>\n </dxo-label>\n </dxi-series>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"chartConfig.size\">\n <dxo-size [height]=\"chartConfig.size\">\n </dxo-size>\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=\"currency\">\n </dxo-tooltip>\n <ng-container *ngIf=\"chartConfig.chartType == 'doughnut'\">\n <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\" opacity=\"0.0001\">\n </circle>\n \n <text text-anchor=\"middle\" style=\"font-size: 15px\" x=\"100\" y=\"100\" fill=\"#eee\">\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 </dx-pie-chart>\n </ng-container>\n\n <ng-container *ngIf=\"chartConfig.chartType == 'funnel'\">\n <dx-funnel id=\"funnel\" [dataSource]=\"finalChartDataSource\" argumentField=\"argument\" valueField=\"value\"\n palette=\"Soft Pastel\">\n <ng-container *ngIf=\"chartConfig.size\">\n <dxo-size [height]=\"chartConfig.size\">\n </dxo-size>\n </ng-container>\n <dxo-export [enabled]=\"false\"></dxo-export>\n <dxo-tooltip [enabled]=\"true\"> </dxo-tooltip>\n <dxo-item>\n <dxo-border [visible]=\"true\"> </dxo-border>\n </dxo-item>\n <dxo-label [visible]=\"true\" position=\"inside\" backgroundColor=\"none\"\n [customizeText]=\"customizeText\"></dxo-label>\n </dx-funnel>\n\n </ng-container>\n\n <ng-container *ngIf=\"chartConfig.chartType == 'bubble'\">\n <div class=\"mx-5 overflow-x-auto\">\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-12 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\"\n (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-12 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\n </div>\n\n <button *ngIf=\"isFullScreen\" class=\"close-button\" (click)=\"toggleFullScreen()\">Close</button>\n</div>", dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6.DxoExportComponent, selector: "dxo-export", inputs: ["backgroundColor", "enabled", "fileName", "formats", "margin", "printingEnabled", "proxyUrl", "svgToCanvas", "allowExportSelectedData", "customizeExcelCell", "excelFilterEnabled", "excelWrapTextEnabled", "ignoreExcelErrors", "texts"] }, { 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.DxoBorderComponent, selector: "dxo-border", inputs: ["color", "cornerRadius", "dashStyle", "opacity", "visible", "width", "bottom", "left", "right", "top"] }, { 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: i8$3.DxFunnelComponent, selector: "dx-funnel", inputs: ["adaptiveLayout", "algorithm", "argumentField", "colorField", "dataSource", "disabled", "elementAttr", "export", "hoverEnabled", "inverted", "item", "label", "legend", "loadingIndicator", "margin", "neckHeight", "neckWidth", "palette", "paletteExtensionMode", "pathModified", "redrawOnResize", "resolveLabelOverlapping", "rtlEnabled", "selectionMode", "size", "sortData", "theme", "title", "tooltip", "valueField"], outputs: ["onDisposing", "onDrawn", "onExported", "onExporting", "onFileSaving", "onHoverChanged", "onIncidentOccurred", "onInitialized", "onItemClick", "onLegendClick", "onOptionChanged", "onSelectionChanged", "adaptiveLayoutChange", "algorithmChange", "argumentFieldChange", "colorFieldChange", "dataSourceChange", "disabledChange", "elementAttrChange", "exportChange", "hoverEnabledChange", "invertedChange", "itemChange", "labelChange", "legendChange", "loadingIndicatorChange", "marginChange", "neckHeightChange", "neckWidthChange", "paletteChange", "paletteExtensionModeChange", "pathModifiedChange", "redrawOnResizeChange", "resolveLabelOverlappingChange", "rtlEnabledChange", "selectionModeChange", "sizeChange", "sortDataChange", "themeChange", "titleChange", "tooltipChange", "valueFieldChange"] }, { kind: "component", type: i6.DxoItemComponent, selector: "dxo-item", inputs: ["border", "hoverStyle", "selectionStyle"] }, { 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: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AppTitleComponent, selector: "app-title", inputs: ["title", "multiple", "isFilterDisplay", "icon", "iconName", "displayType", "keyToPass", "fixOperationLevles", "operators"], outputs: ["onOperatorClick"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
|
|
9332
|
+
GammaAdvanceChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammaAdvanceChartComponent, selector: "app-gamma-advance-chart", inputs: { componentId: "componentId", kpi_name: "kpi_name", chartDataSource: "chartDataSource" }, outputs: { onChartPointClick: "onChartPointClick" }, ngImport: i0, template: "<div class=\"not-full-screen\" (dblclick)=\"toggleFullScreen()\">\n <ng-container *ngIf=\"page_config?.widGetConfig?.display\">\n <app-title [title]=\"page_config.widGetConfig.widgetTitle\" [operators]=\"page_config.operations\"\n [displayType]=\"'chart'\"></app-title>\n </ng-container>\n <div class=\"mx-2 p-2 bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100\">\n <app-loader *ngIf=\"isLoader\"></app-loader>\n <ng-container\n *ngIf=\"chartConfig.chartType !== 'doughnut' && chartConfig.chartType !== 'pie' && chartConfig.chartType !== 'funnel' && chartConfig.chartType !== 'bubble'\">\n \n <dx-chart id=\"chart\" [dataSource]=\"finalChartDataSource\" (onPointClick)=\"getAllChartPointClick($event)\"\n [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" *ngIf=\"!isLoader\"\n [valueAxis]=\"chartConfig.valueAxisConfig\">\n <ng-container *ngIf=\"chartConfig.size\">\n <dxo-size [height]=\"chartConfig.size\">\n </dxo-size>\n </ng-container>\n\n <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n <ng-container *ngIf=\"item && 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\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\" [customizeTooltip]=\"customizeTooltip\">\n </dxo-tooltip>\n <dxo-common-series-settings argumentField=\"{{chartConfig.argumentField}}\">\n </dxo-common-series-settings>\n <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n <ng-container *ngIf=\"item && item.color\">\n <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n name=\"{{item.name}}\" color=\"{{item.color}}\">\n </dxi-series>\n </ng-container>\n <ng-container *ngIf=\"item && !item.color\">\n <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n name=\"{{item.name}}\">\n </dxi-series>\n </ng-container>\n\n </ng-container>\n <dxo-size [height]=\"chartHeight\">\n </dxo-size>\n <dxo-legend [visible]=\"chartConfig.legendDisplay\" verticalAlignment=\"{{chartConfig.verticalAlignment}}\"\n horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\">\n </dxo-legend>\n </dx-chart>\n </ng-container>\n\n\n\n <ng-container *ngIf=\"chartConfig.chartType == 'doughnut' || chartConfig.chartType == 'pie'\">\n\n <dx-pie-chart id=\"pie\" [type]=\"chartConfig.chartType\" [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n [dataSource]=\"finalChartDataSource\" 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=\"currency\">\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=\"currency\">\n <dxo-connector [visible]=\"true\"></dxo-connector>\n </dxo-label>\n </dxi-series>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"chartConfig.size\">\n <dxo-size [height]=\"chartConfig.size\">\n </dxo-size>\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=\"currency\">\n </dxo-tooltip>\n <ng-container *ngIf=\"chartConfig.chartType == 'doughnut'\">\n <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\" opacity=\"0.0001\">\n </circle>\n \n <text text-anchor=\"middle\" style=\"font-size: 15px\" x=\"100\" y=\"100\" fill=\"#eee\">\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 </dx-pie-chart>\n </ng-container>\n\n <ng-container *ngIf=\"chartConfig.chartType == 'funnel'\">\n <dx-funnel id=\"funnel\" [dataSource]=\"finalChartDataSource\" argumentField=\"argument\" valueField=\"value\"\n palette=\"Soft Pastel\">\n <ng-container *ngIf=\"chartConfig.size\">\n <dxo-size [height]=\"chartConfig.size\">\n </dxo-size>\n </ng-container>\n <dxo-export [enabled]=\"false\"></dxo-export>\n <dxo-tooltip [enabled]=\"true\"> </dxo-tooltip>\n <dxo-item>\n <dxo-border [visible]=\"true\"> </dxo-border>\n </dxo-item>\n <dxo-label [visible]=\"true\" position=\"inside\" backgroundColor=\"none\"\n [customizeText]=\"customizeText\"></dxo-label>\n </dx-funnel>\n\n </ng-container>\n\n <ng-container *ngIf=\"chartConfig.chartType == 'bubble'\">\n <div class=\"mx-5 overflow-x-auto\">\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-12 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\"\n (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-12 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\n </div>\n\n <button *ngIf=\"isFullScreen\" class=\"close-button\" (click)=\"toggleFullScreen()\">Close</button>\n</div>", dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6.DxoExportComponent, selector: "dxo-export", inputs: ["backgroundColor", "enabled", "fileName", "formats", "margin", "printingEnabled", "proxyUrl", "svgToCanvas", "allowExportSelectedData", "customizeExcelCell", "excelFilterEnabled", "excelWrapTextEnabled", "ignoreExcelErrors", "texts"] }, { 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.DxoBorderComponent, selector: "dxo-border", inputs: ["color", "cornerRadius", "dashStyle", "opacity", "visible", "width", "bottom", "left", "right", "top"] }, { 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: i8$3.DxFunnelComponent, selector: "dx-funnel", inputs: ["adaptiveLayout", "algorithm", "argumentField", "colorField", "dataSource", "disabled", "elementAttr", "export", "hoverEnabled", "inverted", "item", "label", "legend", "loadingIndicator", "margin", "neckHeight", "neckWidth", "palette", "paletteExtensionMode", "pathModified", "redrawOnResize", "resolveLabelOverlapping", "rtlEnabled", "selectionMode", "size", "sortData", "theme", "title", "tooltip", "valueField"], outputs: ["onDisposing", "onDrawn", "onExported", "onExporting", "onFileSaving", "onHoverChanged", "onIncidentOccurred", "onInitialized", "onItemClick", "onLegendClick", "onOptionChanged", "onSelectionChanged", "adaptiveLayoutChange", "algorithmChange", "argumentFieldChange", "colorFieldChange", "dataSourceChange", "disabledChange", "elementAttrChange", "exportChange", "hoverEnabledChange", "invertedChange", "itemChange", "labelChange", "legendChange", "loadingIndicatorChange", "marginChange", "neckHeightChange", "neckWidthChange", "paletteChange", "paletteExtensionModeChange", "pathModifiedChange", "redrawOnResizeChange", "resolveLabelOverlappingChange", "rtlEnabledChange", "selectionModeChange", "sizeChange", "sortDataChange", "themeChange", "titleChange", "tooltipChange", "valueFieldChange"] }, { kind: "component", type: i6.DxoItemComponent, selector: "dxo-item", inputs: ["border", "hoverStyle", "selectionStyle"] }, { 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: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AppTitleComponent, selector: "app-title", inputs: ["title", "multiple", "isFilterDisplay", "icon", "iconName", "displayType", "keyToPass", "fixOperationLevles", "operators"], outputs: ["onOperatorClick"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
|
|
9308
9333
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaAdvanceChartComponent, decorators: [{
|
|
9309
9334
|
type: Component,
|
|
9310
|
-
args: [{ selector: 'app-gamma-advance-chart', template: "<div class=\"not-full-screen\" (dblclick)=\"toggleFullScreen()\">\n <ng-container *ngIf=\"page_config?.widGetConfig?.display\">\n <app-title [title]=\"page_config.widGetConfig.widgetTitle\" [operators]=\"page_config.operations\"\n [displayType]=\"'chart'\"></app-title>\n </ng-container>\n <div class=\"mx-2 p-2 bg-gray-800\">\n <app-loader *ngIf=\"isLoader\"></app-loader>\n <ng-container\n *ngIf=\"chartConfig.chartType !== 'doughnut' && chartConfig.chartType !== 'pie' && chartConfig.chartType !== 'funnel' && chartConfig.chartType !== 'bubble'\">\n \n <dx-chart id=\"chart\" [dataSource]=\"finalChartDataSource\" (onPointClick)=\"getAllChartPointClick($event)\"\n [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" *ngIf=\"!isLoader\"\n [valueAxis]=\"chartConfig.valueAxisConfig\">\n <ng-container *ngIf=\"chartConfig.size\">\n <dxo-size [height]=\"chartConfig.size\">\n </dxo-size>\n </ng-container>\n\n <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n <ng-container *ngIf=\"item && 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\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\" [customizeTooltip]=\"customizeTooltip\">\n </dxo-tooltip>\n <dxo-common-series-settings argumentField=\"{{chartConfig.argumentField}}\">\n </dxo-common-series-settings>\n <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n <ng-container *ngIf=\"item && item.color\">\n <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n name=\"{{item.name}}\" color=\"{{item.color}}\">\n </dxi-series>\n </ng-container>\n <ng-container *ngIf=\"item && !item.color\">\n <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n name=\"{{item.name}}\">\n </dxi-series>\n </ng-container>\n\n </ng-container>\n <dxo-size [height]=\"chartHeight\">\n </dxo-size>\n <dxo-legend [visible]=\"chartConfig.legendDisplay\" verticalAlignment=\"{{chartConfig.verticalAlignment}}\"\n horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\">\n </dxo-legend>\n </dx-chart>\n </ng-container>\n\n\n\n <ng-container *ngIf=\"chartConfig.chartType == 'doughnut' || chartConfig.chartType == 'pie'\">\n\n <dx-pie-chart id=\"pie\" [type]=\"chartConfig.chartType\" [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n [dataSource]=\"finalChartDataSource\" 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=\"currency\">\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=\"currency\">\n <dxo-connector [visible]=\"true\"></dxo-connector>\n </dxo-label>\n </dxi-series>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"chartConfig.size\">\n <dxo-size [height]=\"chartConfig.size\">\n </dxo-size>\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=\"currency\">\n </dxo-tooltip>\n <ng-container *ngIf=\"chartConfig.chartType == 'doughnut'\">\n <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\" opacity=\"0.0001\">\n </circle>\n \n <text text-anchor=\"middle\" style=\"font-size: 15px\" x=\"100\" y=\"100\" fill=\"#eee\">\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 </dx-pie-chart>\n </ng-container>\n\n <ng-container *ngIf=\"chartConfig.chartType == 'funnel'\">\n <dx-funnel id=\"funnel\" [dataSource]=\"finalChartDataSource\" argumentField=\"argument\" valueField=\"value\"\n palette=\"Soft Pastel\">\n <ng-container *ngIf=\"chartConfig.size\">\n <dxo-size [height]=\"chartConfig.size\">\n </dxo-size>\n </ng-container>\n <dxo-export [enabled]=\"false\"></dxo-export>\n <dxo-tooltip [enabled]=\"true\"> </dxo-tooltip>\n <dxo-item>\n <dxo-border [visible]=\"true\"> </dxo-border>\n </dxo-item>\n <dxo-label [visible]=\"true\" position=\"inside\" backgroundColor=\"none\"\n [customizeText]=\"customizeText\"></dxo-label>\n </dx-funnel>\n\n </ng-container>\n\n <ng-container *ngIf=\"chartConfig.chartType == 'bubble'\">\n <div class=\"mx-5 overflow-x-auto\">\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-12 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\"\n (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-12 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\n </div>\n\n <button *ngIf=\"isFullScreen\" class=\"close-button\" (click)=\"toggleFullScreen()\">Close</button>\n</div>" }]
|
|
9335
|
+
args: [{ selector: 'app-gamma-advance-chart', template: "<div class=\"not-full-screen\" (dblclick)=\"toggleFullScreen()\">\n <ng-container *ngIf=\"page_config?.widGetConfig?.display\">\n <app-title [title]=\"page_config.widGetConfig.widgetTitle\" [operators]=\"page_config.operations\"\n [displayType]=\"'chart'\"></app-title>\n </ng-container>\n <div class=\"mx-2 p-2 bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100\">\n <app-loader *ngIf=\"isLoader\"></app-loader>\n <ng-container\n *ngIf=\"chartConfig.chartType !== 'doughnut' && chartConfig.chartType !== 'pie' && chartConfig.chartType !== 'funnel' && chartConfig.chartType !== 'bubble'\">\n \n <dx-chart id=\"chart\" [dataSource]=\"finalChartDataSource\" (onPointClick)=\"getAllChartPointClick($event)\"\n [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" *ngIf=\"!isLoader\"\n [valueAxis]=\"chartConfig.valueAxisConfig\">\n <ng-container *ngIf=\"chartConfig.size\">\n <dxo-size [height]=\"chartConfig.size\">\n </dxo-size>\n </ng-container>\n\n <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n <ng-container *ngIf=\"item && 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\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\" [customizeTooltip]=\"customizeTooltip\">\n </dxo-tooltip>\n <dxo-common-series-settings argumentField=\"{{chartConfig.argumentField}}\">\n </dxo-common-series-settings>\n <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n <ng-container *ngIf=\"item && item.color\">\n <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n name=\"{{item.name}}\" color=\"{{item.color}}\">\n </dxi-series>\n </ng-container>\n <ng-container *ngIf=\"item && !item.color\">\n <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n name=\"{{item.name}}\">\n </dxi-series>\n </ng-container>\n\n </ng-container>\n <dxo-size [height]=\"chartHeight\">\n </dxo-size>\n <dxo-legend [visible]=\"chartConfig.legendDisplay\" verticalAlignment=\"{{chartConfig.verticalAlignment}}\"\n horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\">\n </dxo-legend>\n </dx-chart>\n </ng-container>\n\n\n\n <ng-container *ngIf=\"chartConfig.chartType == 'doughnut' || chartConfig.chartType == 'pie'\">\n\n <dx-pie-chart id=\"pie\" [type]=\"chartConfig.chartType\" [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n [dataSource]=\"finalChartDataSource\" 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=\"currency\">\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=\"currency\">\n <dxo-connector [visible]=\"true\"></dxo-connector>\n </dxo-label>\n </dxi-series>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"chartConfig.size\">\n <dxo-size [height]=\"chartConfig.size\">\n </dxo-size>\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=\"currency\">\n </dxo-tooltip>\n <ng-container *ngIf=\"chartConfig.chartType == 'doughnut'\">\n <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\" opacity=\"0.0001\">\n </circle>\n \n <text text-anchor=\"middle\" style=\"font-size: 15px\" x=\"100\" y=\"100\" fill=\"#eee\">\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 </dx-pie-chart>\n </ng-container>\n\n <ng-container *ngIf=\"chartConfig.chartType == 'funnel'\">\n <dx-funnel id=\"funnel\" [dataSource]=\"finalChartDataSource\" argumentField=\"argument\" valueField=\"value\"\n palette=\"Soft Pastel\">\n <ng-container *ngIf=\"chartConfig.size\">\n <dxo-size [height]=\"chartConfig.size\">\n </dxo-size>\n </ng-container>\n <dxo-export [enabled]=\"false\"></dxo-export>\n <dxo-tooltip [enabled]=\"true\"> </dxo-tooltip>\n <dxo-item>\n <dxo-border [visible]=\"true\"> </dxo-border>\n </dxo-item>\n <dxo-label [visible]=\"true\" position=\"inside\" backgroundColor=\"none\"\n [customizeText]=\"customizeText\"></dxo-label>\n </dx-funnel>\n\n </ng-container>\n\n <ng-container *ngIf=\"chartConfig.chartType == 'bubble'\">\n <div class=\"mx-5 overflow-x-auto\">\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-12 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\"\n (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-12 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\n </div>\n\n <button *ngIf=\"isFullScreen\" class=\"close-button\" (click)=\"toggleFullScreen()\">Close</button>\n</div>" }]
|
|
9311
9336
|
}], ctorParameters: function () {
|
|
9312
9337
|
return [{ type: CommonService }, { type: i3$1.ToastrService }, { type: kpicommonService$1 }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
9313
9338
|
type: Inject,
|
|
@@ -18384,6 +18409,11 @@ class KpiWithDataSetTestComponent {
|
|
|
18384
18409
|
filter.operationFilter['endDate'] = filter.endDate;
|
|
18385
18410
|
this.loadingModal = true;
|
|
18386
18411
|
this.dashBoardWidgetConfig = [];
|
|
18412
|
+
let navigation = {
|
|
18413
|
+
queryParams: filter.operationFilter,
|
|
18414
|
+
queryParamsHandling: "merge"
|
|
18415
|
+
};
|
|
18416
|
+
this.router.navigate([], navigation);
|
|
18387
18417
|
yield this.getPadeDataSource(true);
|
|
18388
18418
|
this.uniqueDataSetObject = {};
|
|
18389
18419
|
let apiCalls = [];
|
|
@@ -18436,7 +18466,8 @@ class KpiWithDataSetTestComponent {
|
|
|
18436
18466
|
this.componentConfigDataSource = viewConfig;
|
|
18437
18467
|
this.dataSetModal = datasetConfig;
|
|
18438
18468
|
this.allWidgetByDataset = [];
|
|
18439
|
-
|
|
18469
|
+
const _a = this.activatedRoute.snapshot.queryParams, { pageId, startDate, endDate } = _a, params = __rest(_a, ["pageId", "startDate", "endDate"]);
|
|
18470
|
+
let defaultFilters = { operationFilter: Object.assign({ startDate: "", endDate: "" }, params) };
|
|
18440
18471
|
this.dashBoardWidgetConfig.widgets.forEach(widget => {
|
|
18441
18472
|
var _a;
|
|
18442
18473
|
widget.filters.filterItems.forEach(element => {
|
|
@@ -18446,24 +18477,24 @@ class KpiWithDataSetTestComponent {
|
|
|
18446
18477
|
let [count, unit] = element.defaultFilterValue.split(',');
|
|
18447
18478
|
if (element.apiName === "endDate") {
|
|
18448
18479
|
if (element.display) {
|
|
18449
|
-
defaultFilters.operationFilter.endDate = moment$1().subtract(parseInt(count), unit).endOf(unit).format(element.momentFormat);
|
|
18480
|
+
defaultFilters.operationFilter.endDate = (endDate && endDate !== '') ? endDate : moment$1().subtract(parseInt(count), unit).endOf(unit).format(element.momentFormat);
|
|
18450
18481
|
this.defaultEndDate = moment$1().subtract(parseInt(count), unit).endOf(unit).format(element.momentFormat);
|
|
18451
18482
|
}
|
|
18452
18483
|
}
|
|
18453
18484
|
if (element.apiName === "startDate") {
|
|
18454
|
-
defaultFilters.operationFilter.startDate = moment$1().subtract(parseInt(count), unit).startOf(unit).format(element.momentFormat);
|
|
18485
|
+
defaultFilters.operationFilter.startDate = (startDate && startDate !== '') ? startDate : moment$1().subtract(parseInt(count), unit).startOf(unit).format(element.momentFormat);
|
|
18455
18486
|
;
|
|
18456
18487
|
}
|
|
18457
18488
|
}
|
|
18458
18489
|
else if (element.momentFunction == "weekPicker") {
|
|
18459
18490
|
if (element.apiName === "endDate") {
|
|
18460
18491
|
if (element.display) {
|
|
18461
|
-
defaultFilters.operationFilter.endDate = moment$1().endOf('week').format(element.momentFormat);
|
|
18492
|
+
defaultFilters.operationFilter.endDate = (endDate && endDate !== '') ? endDate : moment$1().endOf('week').format(element.momentFormat);
|
|
18462
18493
|
this.defaultEndDate = moment$1().endOf('week').format(element.momentFormat);
|
|
18463
18494
|
}
|
|
18464
18495
|
}
|
|
18465
18496
|
if (element.apiName === "startDate") {
|
|
18466
|
-
defaultFilters.operationFilter.startDate = moment$1().startOf('week').format(element.momentFormat);
|
|
18497
|
+
defaultFilters.operationFilter.startDate = (startDate && startDate !== '') ? startDate : moment$1().startOf('week').format(element.momentFormat);
|
|
18467
18498
|
this.defaultStartDate = moment$1().startOf('week').format(element.momentFormat);
|
|
18468
18499
|
}
|
|
18469
18500
|
}
|
|
@@ -18471,12 +18502,12 @@ class KpiWithDataSetTestComponent {
|
|
|
18471
18502
|
let [count, unit] = element.defaultFilterValue.split(',');
|
|
18472
18503
|
if (element.apiName === "endDate") {
|
|
18473
18504
|
if (element.display) {
|
|
18474
|
-
defaultFilters.operationFilter.endDate = moment$1()[element.momentFunction](parseInt(count), unit).format(element.momentFormat);
|
|
18505
|
+
defaultFilters.operationFilter.endDate = (endDate && endDate !== '') ? endDate : moment$1()[element.momentFunction](parseInt(count), unit).format(element.momentFormat);
|
|
18475
18506
|
this.defaultEndDate = moment$1()[element.momentFunction](parseInt(count), unit).format(element.momentFormat);
|
|
18476
18507
|
}
|
|
18477
18508
|
}
|
|
18478
18509
|
if (element.apiName === "startDate") {
|
|
18479
|
-
defaultFilters.operationFilter.startDate = moment$1()[element.momentFunction](parseInt(count), unit).format(element.momentFormat);
|
|
18510
|
+
defaultFilters.operationFilter.startDate = (startDate && startDate !== '') ? startDate : moment$1()[element.momentFunction](parseInt(count), unit).format(element.momentFormat);
|
|
18480
18511
|
this.defaultStartDate = moment$1()[element.momentFunction](parseInt(count), unit).format(element.momentFormat);
|
|
18481
18512
|
}
|
|
18482
18513
|
}
|
|
@@ -18937,7 +18968,8 @@ class KpiWithDataSetTestComponent {
|
|
|
18937
18968
|
element.kpiConfig.viewProperties.clickEventOptions.eventType !== "") {
|
|
18938
18969
|
let eventType = element.kpiConfig.viewProperties.clickEventOptions.eventType;
|
|
18939
18970
|
let associatedViews = element.kpiConfig.viewProperties.clickEventOptions.associatedViews;
|
|
18940
|
-
let associatedPage = (element.kpiConfig.viewProperties.clickEventOptions.associatedPage) ? element.kpiConfig.viewProperties.clickEventOptions.associatedPage :
|
|
18971
|
+
let associatedPage = (element.kpiConfig.viewProperties.clickEventOptions.associatedPage) ? element.kpiConfig.viewProperties.clickEventOptions.associatedPage : "";
|
|
18972
|
+
let clickEventOptions = element.kpiConfig.viewProperties.clickEventOptions;
|
|
18941
18973
|
if (eventType == 'optionalDrillDown') {
|
|
18942
18974
|
if (associatedViews && associatedViews.length != 0) {
|
|
18943
18975
|
for (let viewForDrillDown of associatedViews) {
|
|
@@ -18962,9 +18994,34 @@ class KpiWithDataSetTestComponent {
|
|
|
18962
18994
|
}
|
|
18963
18995
|
}
|
|
18964
18996
|
else if (eventType == 'navigateToPage') {
|
|
18965
|
-
|
|
18966
|
-
|
|
18967
|
-
|
|
18997
|
+
this.service.getAppPageDetailConfig(associatedPage).subscribe({
|
|
18998
|
+
next: (data) => {
|
|
18999
|
+
let _a = this.activatedRoute.snapshot.queryParams, { pageId } = _a, params = __rest(_a, ["pageId"]);
|
|
19000
|
+
let associatedParamsTemplate = clickEventOptions.associatedParams;
|
|
19001
|
+
let appliedFilters = this.getSetOperatorFilter(event, this.stateDataSource.get(event.viewId));
|
|
19002
|
+
event.keyToPass.forEach(element => {
|
|
19003
|
+
params[element] = event.data[element];
|
|
19004
|
+
});
|
|
19005
|
+
params['pageId'] = associatedPage;
|
|
19006
|
+
if (associatedParamsTemplate !== "") {
|
|
19007
|
+
let finalAssociatedParams = this.replaceAssociatedParams(associatedParamsTemplate, params, appliedFilters);
|
|
19008
|
+
const queryParams = {};
|
|
19009
|
+
finalAssociatedParams.split("&").forEach(pair => {
|
|
19010
|
+
const [key, value] = pair.split("=");
|
|
19011
|
+
queryParams[key] = value;
|
|
19012
|
+
});
|
|
19013
|
+
queryParams['pageId'] = params['pageId'];
|
|
19014
|
+
const fullUrl = this.router.serializeUrl(this.router.createUrlTree([data.pageUrl], { queryParams }));
|
|
19015
|
+
window.open(fullUrl, '_blank');
|
|
19016
|
+
}
|
|
19017
|
+
else {
|
|
19018
|
+
const queryString = new URLSearchParams(params).toString();
|
|
19019
|
+
const fullUrl = this.router.serializeUrl(this.router.createUrlTree([data.pageUrl], { queryParams: params }));
|
|
19020
|
+
window.open(fullUrl, '_blank');
|
|
19021
|
+
console.log(data);
|
|
19022
|
+
}
|
|
19023
|
+
}
|
|
19024
|
+
});
|
|
18968
19025
|
}
|
|
18969
19026
|
else if (eventType == 'sameViewDrilldown') {
|
|
18970
19027
|
debugger;
|
|
@@ -19121,6 +19178,18 @@ class KpiWithDataSetTestComponent {
|
|
|
19121
19178
|
}, 200);
|
|
19122
19179
|
});
|
|
19123
19180
|
}
|
|
19181
|
+
replaceAssociatedParams(template, params, appliedFilters) {
|
|
19182
|
+
return template.replace(/\$(F|P)\{([^}]+)\}/g, (match, type, key) => {
|
|
19183
|
+
var _a, _b, _c;
|
|
19184
|
+
if (type === "F") {
|
|
19185
|
+
return (_b = (_a = appliedFilters.operationFilter) === null || _a === void 0 ? void 0 : _a[key]) !== null && _b !== void 0 ? _b : "";
|
|
19186
|
+
}
|
|
19187
|
+
else if (type === "P") {
|
|
19188
|
+
return (_c = params === null || params === void 0 ? void 0 : params[key]) !== null && _c !== void 0 ? _c : "";
|
|
19189
|
+
}
|
|
19190
|
+
return match;
|
|
19191
|
+
});
|
|
19192
|
+
}
|
|
19124
19193
|
scrollToBottom(container) {
|
|
19125
19194
|
setTimeout(() => {
|
|
19126
19195
|
container.scrollIntoView({ block: 'end' });
|
|
@@ -21992,6 +22061,11 @@ class LandingComponentComponent {
|
|
|
21992
22061
|
this.defaultEndDate = filter.endDate;
|
|
21993
22062
|
filter.operationFilter['startDate'] = filter.startDate;
|
|
21994
22063
|
filter.operationFilter['endDate'] = filter.endDate;
|
|
22064
|
+
let navigation = {
|
|
22065
|
+
queryParams: filter.operationFilter,
|
|
22066
|
+
queryParamsHandling: "merge"
|
|
22067
|
+
};
|
|
22068
|
+
this.router.navigate([], navigation);
|
|
21995
22069
|
this.loadingModal = true;
|
|
21996
22070
|
this.dashBoardWidgetConfig = [];
|
|
21997
22071
|
yield this.getPadeDataSource(true);
|
|
@@ -22046,7 +22120,7 @@ class LandingComponentComponent {
|
|
|
22046
22120
|
this.componentConfigDataSource = viewConfig;
|
|
22047
22121
|
this.dataSetModal = datasetConfig;
|
|
22048
22122
|
this.allWidgetByDataset = [];
|
|
22049
|
-
|
|
22123
|
+
const _a = this.activatedRoute.snapshot.queryParams, { pageId, startDate, endDate } = _a, params = __rest(_a, ["pageId", "startDate", "endDate"]);
|
|
22050
22124
|
let defaultFilters = { operationFilter: Object.assign({ startDate: "", endDate: "" }, params) };
|
|
22051
22125
|
this.dashBoardWidgetConfig.widgets.forEach(widget => {
|
|
22052
22126
|
var _a;
|
|
@@ -22057,24 +22131,24 @@ class LandingComponentComponent {
|
|
|
22057
22131
|
let [count, unit] = element.defaultFilterValue.split(',');
|
|
22058
22132
|
if (element.apiName === "endDate") {
|
|
22059
22133
|
if (element.display) {
|
|
22060
|
-
defaultFilters.operationFilter.endDate = moment$1().subtract(parseInt(count), unit).endOf(unit).format(element.momentFormat);
|
|
22134
|
+
defaultFilters.operationFilter.endDate = (endDate && endDate !== '') ? endDate : moment$1().subtract(parseInt(count), unit).endOf(unit).format(element.momentFormat);
|
|
22061
22135
|
this.defaultEndDate = moment$1().subtract(parseInt(count), unit).endOf(unit).format(element.momentFormat);
|
|
22062
22136
|
}
|
|
22063
22137
|
}
|
|
22064
22138
|
if (element.apiName === "startDate") {
|
|
22065
|
-
defaultFilters.operationFilter.startDate = moment$1().subtract(parseInt(count), unit).startOf(unit).format(element.momentFormat);
|
|
22139
|
+
defaultFilters.operationFilter.startDate = (startDate && startDate !== '') ? startDate : moment$1().subtract(parseInt(count), unit).startOf(unit).format(element.momentFormat);
|
|
22066
22140
|
;
|
|
22067
22141
|
}
|
|
22068
22142
|
}
|
|
22069
22143
|
else if (element.momentFunction == "weekPicker") {
|
|
22070
22144
|
if (element.apiName === "endDate") {
|
|
22071
22145
|
if (element.display) {
|
|
22072
|
-
defaultFilters.operationFilter.endDate = moment$1().endOf('week').format(element.momentFormat);
|
|
22146
|
+
defaultFilters.operationFilter.endDate = (endDate && endDate !== '') ? endDate : moment$1().endOf('week').format(element.momentFormat);
|
|
22073
22147
|
this.defaultEndDate = moment$1().endOf('week').format(element.momentFormat);
|
|
22074
22148
|
}
|
|
22075
22149
|
}
|
|
22076
22150
|
if (element.apiName === "startDate") {
|
|
22077
|
-
defaultFilters.operationFilter.startDate = moment$1().startOf('week').format(element.momentFormat);
|
|
22151
|
+
defaultFilters.operationFilter.startDate = (startDate && startDate !== '') ? startDate : moment$1().startOf('week').format(element.momentFormat);
|
|
22078
22152
|
this.defaultStartDate = moment$1().startOf('week').format(element.momentFormat);
|
|
22079
22153
|
}
|
|
22080
22154
|
}
|
|
@@ -22082,12 +22156,12 @@ class LandingComponentComponent {
|
|
|
22082
22156
|
let [count, unit] = element.defaultFilterValue.split(',');
|
|
22083
22157
|
if (element.apiName === "endDate") {
|
|
22084
22158
|
if (element.display) {
|
|
22085
|
-
defaultFilters.operationFilter.endDate = moment$1()[element.momentFunction](parseInt(count), unit).format(element.momentFormat);
|
|
22159
|
+
defaultFilters.operationFilter.endDate = (endDate && endDate !== '') ? endDate : moment$1()[element.momentFunction](parseInt(count), unit).format(element.momentFormat);
|
|
22086
22160
|
this.defaultEndDate = moment$1()[element.momentFunction](parseInt(count), unit).format(element.momentFormat);
|
|
22087
22161
|
}
|
|
22088
22162
|
}
|
|
22089
22163
|
if (element.apiName === "startDate") {
|
|
22090
|
-
defaultFilters.operationFilter.startDate = moment$1()[element.momentFunction](parseInt(count), unit).format(element.momentFormat);
|
|
22164
|
+
defaultFilters.operationFilter.startDate = (startDate && startDate !== '') ? startDate : moment$1()[element.momentFunction](parseInt(count), unit).format(element.momentFormat);
|
|
22091
22165
|
this.defaultStartDate = moment$1()[element.momentFunction](parseInt(count), unit).format(element.momentFormat);
|
|
22092
22166
|
}
|
|
22093
22167
|
}
|
|
@@ -22546,6 +22620,7 @@ class LandingComponentComponent {
|
|
|
22546
22620
|
let eventType = element.kpiConfig.viewProperties.clickEventOptions.eventType;
|
|
22547
22621
|
let associatedViews = element.kpiConfig.viewProperties.clickEventOptions.associatedViews;
|
|
22548
22622
|
let associatedPage = (element.kpiConfig.viewProperties.clickEventOptions.associatedPage) ? element.kpiConfig.viewProperties.clickEventOptions.associatedPage : "";
|
|
22623
|
+
let clickEventOptions = element.kpiConfig.viewProperties.clickEventOptions;
|
|
22549
22624
|
if (eventType == 'optionalDrillDown') {
|
|
22550
22625
|
if (associatedViews && associatedViews.length != 0) {
|
|
22551
22626
|
for (let viewForDrillDown of associatedViews) {
|
|
@@ -22570,17 +22645,33 @@ class LandingComponentComponent {
|
|
|
22570
22645
|
}
|
|
22571
22646
|
}
|
|
22572
22647
|
else if (eventType == 'navigateToPage') {
|
|
22648
|
+
debugger;
|
|
22573
22649
|
this.service.getAppPageDetailConfig(associatedPage).subscribe({
|
|
22574
22650
|
next: (data) => {
|
|
22575
22651
|
let _a = this.activatedRoute.snapshot.queryParams, { pageId } = _a, params = __rest(_a, ["pageId"]);
|
|
22652
|
+
let associatedParamsTemplate = clickEventOptions.associatedParams;
|
|
22653
|
+
let appliedFilters = this.getSetOperatorFilter(event, this.stateDataSource.get(event.viewId));
|
|
22576
22654
|
event.keyToPass.forEach(element => {
|
|
22577
22655
|
params[element] = event.data[element];
|
|
22578
22656
|
});
|
|
22579
22657
|
params['pageId'] = associatedPage;
|
|
22580
|
-
|
|
22581
|
-
|
|
22582
|
-
|
|
22583
|
-
|
|
22658
|
+
if (associatedParamsTemplate !== "") {
|
|
22659
|
+
let finalAssociatedParams = this.replaceAssociatedParams(associatedParamsTemplate, params, appliedFilters);
|
|
22660
|
+
const queryParams = {};
|
|
22661
|
+
finalAssociatedParams.split("&").forEach(pair => {
|
|
22662
|
+
const [key, value] = pair.split("=");
|
|
22663
|
+
queryParams[key] = value;
|
|
22664
|
+
});
|
|
22665
|
+
queryParams['pageId'] = params['pageId'];
|
|
22666
|
+
const fullUrl = this.router.serializeUrl(this.router.createUrlTree([data.pageUrl], { queryParams }));
|
|
22667
|
+
window.open(fullUrl, '_blank');
|
|
22668
|
+
}
|
|
22669
|
+
else {
|
|
22670
|
+
const queryString = new URLSearchParams(params).toString();
|
|
22671
|
+
const fullUrl = this.router.serializeUrl(this.router.createUrlTree([data.pageUrl], { queryParams: params }));
|
|
22672
|
+
window.open(fullUrl, '_blank');
|
|
22673
|
+
console.log(data);
|
|
22674
|
+
}
|
|
22584
22675
|
}
|
|
22585
22676
|
});
|
|
22586
22677
|
}
|
|
@@ -22738,6 +22829,18 @@ class LandingComponentComponent {
|
|
|
22738
22829
|
}, 200);
|
|
22739
22830
|
});
|
|
22740
22831
|
}
|
|
22832
|
+
replaceAssociatedParams(template, params, appliedFilters) {
|
|
22833
|
+
return template.replace(/\$(F|P)\{([^}]+)\}/g, (match, type, key) => {
|
|
22834
|
+
var _a, _b, _c;
|
|
22835
|
+
if (type === "F") {
|
|
22836
|
+
return (_b = (_a = appliedFilters.operationFilter) === null || _a === void 0 ? void 0 : _a[key]) !== null && _b !== void 0 ? _b : "";
|
|
22837
|
+
}
|
|
22838
|
+
else if (type === "P") {
|
|
22839
|
+
return (_c = params === null || params === void 0 ? void 0 : params[key]) !== null && _c !== void 0 ? _c : "";
|
|
22840
|
+
}
|
|
22841
|
+
return match;
|
|
22842
|
+
});
|
|
22843
|
+
}
|
|
22741
22844
|
scrollToBottom(container) {
|
|
22742
22845
|
setTimeout(() => {
|
|
22743
22846
|
container.scrollIntoView({ block: 'end' });
|