gamma-app-controller 1.2.4 → 1.2.5
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/support-components/dash-chart/dash-chart.component.mjs +4 -3
- package/esm2020/lib/template-module/kpiWithSingleLayout/kpi-with-dataset.component.mjs +139 -41
- package/esm2020/lib/template-module/kpiWithSingleLayout/single-layout-dataset-call.service.mjs +3 -2
- package/fesm2015/gamma-app-controller.mjs +144 -43
- package/fesm2015/gamma-app-controller.mjs.map +1 -1
- package/fesm2020/gamma-app-controller.mjs +143 -43
- package/fesm2020/gamma-app-controller.mjs.map +1 -1
- package/lib/template-module/kpiWithSingleLayout/kpi-with-dataset.component.d.ts +5 -1
- package/package.json +1 -1
|
@@ -4369,6 +4369,7 @@ class DashChartComponent {
|
|
|
4369
4369
|
};
|
|
4370
4370
|
this.isEditWidget = false;
|
|
4371
4371
|
this.chartConfig = this.mainChartCourceObject.kpiConfig['dataConfig'];
|
|
4372
|
+
this.chartConfig = this.mainChartCourceObject.kpiConfig['dataConfig'];
|
|
4372
4373
|
}
|
|
4373
4374
|
}
|
|
4374
4375
|
}
|
|
@@ -4589,10 +4590,10 @@ class DashChartComponent {
|
|
|
4589
4590
|
}
|
|
4590
4591
|
}
|
|
4591
4592
|
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 });
|
|
4592
|
-
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)]=\"chartConfig.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)]=\"chartConfig.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']\"\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\"\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)]=\"chartConfig.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)]=\"chartConfig.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']\"\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\"\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" }] });
|
|
4593
|
+
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.dataConfig.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.dataConfig.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']\"\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\"\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)]=\"chartConfig.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)]=\"chartConfig.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']\"\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\"\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" }] });
|
|
4593
4594
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashChartComponent, decorators: [{
|
|
4594
4595
|
type: Component,
|
|
4595
|
-
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)]=\"chartConfig.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)]=\"chartConfig.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']\"\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\"\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)]=\"chartConfig.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)]=\"chartConfig.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']\"\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\"\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>" }]
|
|
4596
|
+
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.dataConfig.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.dataConfig.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']\"\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\"\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)]=\"chartConfig.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)]=\"chartConfig.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']\"\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\"\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>" }]
|
|
4596
4597
|
}], ctorParameters: function () { return [{ type: CommonService }, { type: ApplicationContentService }, { type: i3$1.ToastrService }]; }, propDecorators: { getChartConfigOutPut: [{
|
|
4597
4598
|
type: Output
|
|
4598
4599
|
}], chartconfigData: [{
|
|
@@ -18041,7 +18042,8 @@ class SingleLayoutApplicationDatssetsCall {
|
|
|
18041
18042
|
},
|
|
18042
18043
|
error: (err) => {
|
|
18043
18044
|
console.error('Error:', err);
|
|
18044
|
-
this.toastr.error(err.message);
|
|
18045
|
+
this.toastr.error(err.error.message);
|
|
18046
|
+
resolve();
|
|
18045
18047
|
reject(err);
|
|
18046
18048
|
}
|
|
18047
18049
|
});
|
|
@@ -18561,9 +18563,23 @@ class KpiWithDataSetTestComponent {
|
|
|
18561
18563
|
widget.widgetNode.forEach(node => {
|
|
18562
18564
|
if (node.nodeProperties.display) {
|
|
18563
18565
|
node.compConfig.viewConfig.forEach(view => {
|
|
18564
|
-
datasetIds.add(view.datasetId);
|
|
18565
|
-
viewIds.add(view.viewId);
|
|
18566
18566
|
this.defaultViewIds.push(view.viewId);
|
|
18567
|
+
const foundObject = this.defaultViewIdsOnPageRefresh?.find(item => item.viewId === view.viewId);
|
|
18568
|
+
const derivedFilters = foundObject ? this.getDrildownFilter(foundObject, defaultFilters) : defaultFilters;
|
|
18569
|
+
let obj = {
|
|
18570
|
+
"filters": JSON.parse(JSON.stringify(derivedFilters)),
|
|
18571
|
+
"keyToPass": [],
|
|
18572
|
+
"drillDownType": "natural",
|
|
18573
|
+
"drilldownFrom": ""
|
|
18574
|
+
};
|
|
18575
|
+
this.stateDataSource.set(view.viewId, obj);
|
|
18576
|
+
let node = {
|
|
18577
|
+
datasetId: view.datasetId,
|
|
18578
|
+
viewId: view.viewId,
|
|
18579
|
+
filter: derivedFilters
|
|
18580
|
+
};
|
|
18581
|
+
datasetIds.add(node);
|
|
18582
|
+
viewIds.add(view.viewId);
|
|
18567
18583
|
});
|
|
18568
18584
|
}
|
|
18569
18585
|
else {
|
|
@@ -18572,20 +18588,14 @@ class KpiWithDataSetTestComponent {
|
|
|
18572
18588
|
});
|
|
18573
18589
|
}
|
|
18574
18590
|
});
|
|
18575
|
-
|
|
18576
|
-
|
|
18577
|
-
|
|
18578
|
-
|
|
18579
|
-
"keyToPass": [],
|
|
18580
|
-
"drillDownType": "natural",
|
|
18581
|
-
"drilldownFrom": ""
|
|
18582
|
-
};
|
|
18583
|
-
this.stateDataSource.set(element, obj);
|
|
18584
|
-
});
|
|
18591
|
+
if (this.defaultViewIdsOnPageRefresh?.length) {
|
|
18592
|
+
const newViews = this.defaultViewIdsOnPageRefresh.map(item => item.viewId);
|
|
18593
|
+
this.defaultViewIds = [...this.defaultViewIds, ...newViews.filter(item => !this.defaultViewIds.includes(item))];
|
|
18594
|
+
}
|
|
18585
18595
|
let obj = {
|
|
18586
18596
|
widgetId: widget.widgetId,
|
|
18587
18597
|
pageId: widget.pageId,
|
|
18588
|
-
filters:
|
|
18598
|
+
filters: defaultFilters,
|
|
18589
18599
|
datasetIds: datasetIds
|
|
18590
18600
|
};
|
|
18591
18601
|
this.allWidgetByDataset.push(obj);
|
|
@@ -18594,9 +18604,9 @@ class KpiWithDataSetTestComponent {
|
|
|
18594
18604
|
let apiCalls = [];
|
|
18595
18605
|
this.allWidgetByDataset.forEach(view => {
|
|
18596
18606
|
view.datasetIds.forEach(id => {
|
|
18597
|
-
let found = datasetConfig.find(d => d.datasetId === id);
|
|
18607
|
+
let found = datasetConfig.find(d => d.datasetId === id.datasetId);
|
|
18598
18608
|
if (found) {
|
|
18599
|
-
apiCalls.push(this.datasetService.getDataFromDataSet(found, id,
|
|
18609
|
+
apiCalls.push(this.datasetService.getDataFromDataSet(found, id.datasetId, id.filter));
|
|
18600
18610
|
}
|
|
18601
18611
|
});
|
|
18602
18612
|
});
|
|
@@ -18613,6 +18623,7 @@ class KpiWithDataSetTestComponent {
|
|
|
18613
18623
|
this.router.navigate([], navigation);
|
|
18614
18624
|
});
|
|
18615
18625
|
}), error: (err) => {
|
|
18626
|
+
this.loadingModal = false;
|
|
18616
18627
|
this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'Error');
|
|
18617
18628
|
}
|
|
18618
18629
|
});
|
|
@@ -18707,7 +18718,13 @@ class KpiWithDataSetTestComponent {
|
|
|
18707
18718
|
widgetDiv.classList.add('flex', 'items-center', 'justify-between', 'font-bold', 'text-md', 'text-gray-900', 'dark:text-white', 'border-b', 'p-3', 'bg-gray-800', 'mx-2', 'rounded-t-lg', 'relative');
|
|
18708
18719
|
const titleDiv = document.createElement('div');
|
|
18709
18720
|
titleDiv.classList.add('relative', 'group');
|
|
18710
|
-
|
|
18721
|
+
let params = "";
|
|
18722
|
+
if (!item.nodeProperties.widgetParams && this.defaultViewIdsOnPageRefresh?.length) {
|
|
18723
|
+
params = this.getTitleParams(item) || "";
|
|
18724
|
+
}
|
|
18725
|
+
else {
|
|
18726
|
+
params = item.nodeProperties.widgetParams || "";
|
|
18727
|
+
}
|
|
18711
18728
|
const widgetTitle = item.nodeProperties.widgetTitle;
|
|
18712
18729
|
const tooltipMatch = widgetTitle.match(/\$t\{([\s\S]*?)\}/);
|
|
18713
18730
|
const displayTitle = widgetTitle.replace(/\$t\{[\s\S]*?\}/g, '').trim();
|
|
@@ -18940,7 +18957,6 @@ class KpiWithDataSetTestComponent {
|
|
|
18940
18957
|
const stateData = Array.from(this.stateDataSource.keys());
|
|
18941
18958
|
const currentViewIndex = stateData.indexOf(event.viewId);
|
|
18942
18959
|
const deletedViewIds = [];
|
|
18943
|
-
console.log(this.defaultViewIds, "default view");
|
|
18944
18960
|
for (let i = currentViewIndex + 1; i < stateData.length; i++) {
|
|
18945
18961
|
deletedViewIds.push(stateData[i]);
|
|
18946
18962
|
}
|
|
@@ -19103,7 +19119,6 @@ class KpiWithDataSetTestComponent {
|
|
|
19103
19119
|
let appliedFilters = this.getSetOperatorFilter(event, this.stateDataSource.get(event.viewId));
|
|
19104
19120
|
view.compConfig.viewConfig.forEach(contentView => {
|
|
19105
19121
|
let found = this.dataSetModal.find(d => d.datasetId === contentView.datasetId);
|
|
19106
|
-
let queryParams = this.getFiltersForQueryParams(appliedFilters, found.config.queryConfig.mapedFilters);
|
|
19107
19122
|
if (found) {
|
|
19108
19123
|
apiCalls.push(this.datasetService.getDataFromDataSet(found, contentView.datasetId, appliedFilters));
|
|
19109
19124
|
chatApiCall.push(this.chatApiService.getDataForChatAi(this.pageId, contentView, appliedFilters));
|
|
@@ -19126,32 +19141,16 @@ class KpiWithDataSetTestComponent {
|
|
|
19126
19141
|
const containerElement = document.querySelector(`#${prefixedId}`);
|
|
19127
19142
|
this.uniqueDataSetObject = this.datasetService.getUniqueDataSetObject();
|
|
19128
19143
|
this.loadSingleWidgetNode(view, this.mainPageDivElement, this.uniqueDataSetObject);
|
|
19144
|
+
let navigation = {
|
|
19145
|
+
queryParams: appliedFilters['operationFilter'],
|
|
19146
|
+
queryParamsHandling: "merge"
|
|
19147
|
+
};
|
|
19148
|
+
this.router.navigate([], navigation);
|
|
19149
|
+
console.log(this.stateDataSource);
|
|
19129
19150
|
setTimeout(() => {
|
|
19130
19151
|
this.scrollToBottom(this.mainPageDivElement);
|
|
19131
19152
|
}, 200);
|
|
19132
19153
|
}
|
|
19133
|
-
getFiltersForQueryParams(operators, filters) {
|
|
19134
|
-
debugger;
|
|
19135
|
-
const operationFilter = operators.operationFilter || {};
|
|
19136
|
-
const currentParams = this.activatedRoute.snapshot.queryParams;
|
|
19137
|
-
const newParams = {};
|
|
19138
|
-
const defaultViewsKeyToPass = [];
|
|
19139
|
-
filters.forEach(filter => {
|
|
19140
|
-
const localKey = filter.localColumn;
|
|
19141
|
-
const serverKey = filter.serverColumn;
|
|
19142
|
-
let value = operationFilter[localKey];
|
|
19143
|
-
if (value !== undefined && value !== "") {
|
|
19144
|
-
newParams[serverKey] = value;
|
|
19145
|
-
defaultViewsKeyToPass.push(localKey);
|
|
19146
|
-
}
|
|
19147
|
-
});
|
|
19148
|
-
const mergedParams = { ...currentParams, ...newParams };
|
|
19149
|
-
const navigation = {
|
|
19150
|
-
queryParams: mergedParams,
|
|
19151
|
-
queryParamsHandling: 'merge'
|
|
19152
|
-
};
|
|
19153
|
-
this.router.navigate([], navigation);
|
|
19154
|
-
}
|
|
19155
19154
|
scrollToBottom(container) {
|
|
19156
19155
|
setTimeout(() => {
|
|
19157
19156
|
container.scrollIntoView({ block: 'end' });
|
|
@@ -19382,6 +19381,107 @@ class KpiWithDataSetTestComponent {
|
|
|
19382
19381
|
return input;
|
|
19383
19382
|
}
|
|
19384
19383
|
}
|
|
19384
|
+
getDrilldownDisplayByUrlParams(all_views) {
|
|
19385
|
+
this.defaultViewIdsOnPageRefresh = [];
|
|
19386
|
+
const params = this.activatedRoute.snapshot.queryParams;
|
|
19387
|
+
this.defaultViewIdsOnPageRefresh = (params['views'] && params['views'] !== "") ? JSON.parse(decodeURIComponent(params['views'])) : [];
|
|
19388
|
+
all_views.forEach(element => {
|
|
19389
|
+
for (let entry of element.widgetNode) {
|
|
19390
|
+
let shouldDisplay = false;
|
|
19391
|
+
entry.compConfig.viewConfig.forEach(view => {
|
|
19392
|
+
if (this.defaultViewIdsOnPageRefresh.length !== 0) {
|
|
19393
|
+
const foundObject = this.defaultViewIdsOnPageRefresh.find(val => val.viewId === view.viewId);
|
|
19394
|
+
if (foundObject) {
|
|
19395
|
+
shouldDisplay = true;
|
|
19396
|
+
}
|
|
19397
|
+
}
|
|
19398
|
+
});
|
|
19399
|
+
if (shouldDisplay) {
|
|
19400
|
+
entry.nodeProperties.display = true;
|
|
19401
|
+
}
|
|
19402
|
+
}
|
|
19403
|
+
});
|
|
19404
|
+
}
|
|
19405
|
+
getFiltersForQueryParams(operators, filters, viewParams) {
|
|
19406
|
+
const operationFilter = operators.operationFilter || {};
|
|
19407
|
+
const currentParams = this.activatedRoute.snapshot.queryParams;
|
|
19408
|
+
let currentViews = [];
|
|
19409
|
+
if (currentParams['views']) {
|
|
19410
|
+
try {
|
|
19411
|
+
currentViews = JSON.parse(decodeURIComponent(currentParams['views']));
|
|
19412
|
+
}
|
|
19413
|
+
catch (e) {
|
|
19414
|
+
console.error("Invalid views param");
|
|
19415
|
+
}
|
|
19416
|
+
}
|
|
19417
|
+
const filterData = { viewId: viewParams.viewId };
|
|
19418
|
+
filters.forEach(filter => {
|
|
19419
|
+
const localKey = filter.localColumn;
|
|
19420
|
+
const serverKey = filter.serverColumn;
|
|
19421
|
+
let value = operationFilter[localKey];
|
|
19422
|
+
if (value !== undefined && value !== "") {
|
|
19423
|
+
filterData[serverKey] = value;
|
|
19424
|
+
}
|
|
19425
|
+
});
|
|
19426
|
+
const existingIndex = currentViews.findIndex(v => v.viewId === viewParams.viewId);
|
|
19427
|
+
if (existingIndex !== -1) {
|
|
19428
|
+
currentViews[existingIndex] = filterData;
|
|
19429
|
+
currentViews = currentViews.slice(0, existingIndex + 1);
|
|
19430
|
+
}
|
|
19431
|
+
else {
|
|
19432
|
+
currentViews.push(filterData);
|
|
19433
|
+
}
|
|
19434
|
+
const encodedViews = encodeURIComponent(JSON.stringify(currentViews));
|
|
19435
|
+
const mergedParams = {
|
|
19436
|
+
...currentParams,
|
|
19437
|
+
};
|
|
19438
|
+
const navigation = {
|
|
19439
|
+
queryParams: mergedParams,
|
|
19440
|
+
queryParamsHandling: 'merge'
|
|
19441
|
+
};
|
|
19442
|
+
this.router.navigate([], navigation);
|
|
19443
|
+
}
|
|
19444
|
+
getDrildownFilter(drildownFilter, defaultFilter) {
|
|
19445
|
+
const expectedDateFields = ['recordDate', 'record_date', 'eventDate', 'event_date'];
|
|
19446
|
+
const result = JSON.parse(JSON.stringify(defaultFilter));
|
|
19447
|
+
const { viewId, ...filteredDrilldown } = drildownFilter;
|
|
19448
|
+
let dateValue = null;
|
|
19449
|
+
for (const key of expectedDateFields) {
|
|
19450
|
+
if (filteredDrilldown[key]) {
|
|
19451
|
+
dateValue = filteredDrilldown[key];
|
|
19452
|
+
break;
|
|
19453
|
+
}
|
|
19454
|
+
}
|
|
19455
|
+
if (dateValue) {
|
|
19456
|
+
result.operationFilter.startDate = dateValue;
|
|
19457
|
+
result.operationFilter.endDate = dateValue;
|
|
19458
|
+
}
|
|
19459
|
+
for (const key in filteredDrilldown) {
|
|
19460
|
+
if (!expectedDateFields.includes(key)) {
|
|
19461
|
+
result.operationFilter[key] = filteredDrilldown[key];
|
|
19462
|
+
}
|
|
19463
|
+
}
|
|
19464
|
+
return result;
|
|
19465
|
+
}
|
|
19466
|
+
getTitleParams(items) {
|
|
19467
|
+
const results = [];
|
|
19468
|
+
items.compConfig.viewConfig.forEach(element => {
|
|
19469
|
+
const foundObject = this.defaultViewIdsOnPageRefresh.find(val => val.viewId === element.viewId);
|
|
19470
|
+
if (foundObject) {
|
|
19471
|
+
const result = Object.entries(foundObject)
|
|
19472
|
+
.filter(([key]) => key !== 'viewId')
|
|
19473
|
+
.map(([key, value]) => {
|
|
19474
|
+
const formattedKey = key
|
|
19475
|
+
.replace(/_/g, ' ')
|
|
19476
|
+
.replace(/\b\w/g, char => char.toUpperCase());
|
|
19477
|
+
return `${formattedKey} = ${value}`;
|
|
19478
|
+
})
|
|
19479
|
+
.join(' | ');
|
|
19480
|
+
results.push(`| ${result} `);
|
|
19481
|
+
}
|
|
19482
|
+
});
|
|
19483
|
+
return results.join('\n');
|
|
19484
|
+
}
|
|
19385
19485
|
}
|
|
19386
19486
|
KpiWithDataSetTestComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithDataSetTestComponent, deps: [{ token: CommonService }, { token: i2.ActivatedRoute }, { token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: KpiWithSingleLayoutService }, { token: i3$1.ToastrService }, { token: i2.Router }, { token: SingleLayoutApplicationDatssetsCall }, { token: ApplicationChatApiCallService }, { token: AppSingleLayoutLocalStorage }], target: i0.ɵɵFactoryTarget.Component });
|
|
19387
19487
|
KpiWithDataSetTestComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: KpiWithDataSetTestComponent, selector: "app-kpi-with-dataset", viewQueries: [{ propertyName: "dynamicComponentContainer", first: true, predicate: ["dynamicComponentContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "dynamicContainer", first: true, predicate: ["dynamicContainer"], descendants: true, static: true }, { propertyName: "dynamicContainerForPopup", first: true, predicate: ["dynamicContainerForPopup"], descendants: true, static: true }], ngImport: i0, template: "<app-loading *ngIf=\"loadingModal\"></app-loading>\n\n<div class=\"w-full\">\n <div class=\"flex flex-wrap \" #dynamicContainer></div>\n</div>\n\n<dx-popup [(visible)]=\"isWidgetFilters\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"800\" [height]=\"400\"\n [showTitle]=\"true\" class=\"popup\" title=\"Dataset Filter\">\n <div *dxTemplate=\"let data of 'content'\">\n <div class=\"my-2\">\n <dx-scroll-view [width]=\"'100%'\" [height]=\"'85%'\">\n <ng-container *ngFor=\"let item of nodeproperticeFilterDataSource.havingConfig; let i = index\">\n <div class=\"flex flex-row my-2\">\n <div class=\"m-1\">\n <dx-text-box [(ngModel)]=\"item.columnName\"></dx-text-box>\n </div>\n <div class=\"m-1\">\n <dx-select-box [items]=\"['get','let']\" [(ngModel)]=\"item.operator\"\n placeholder=\"Operator\"></dx-select-box>\n </div>\n <div class=\"m-1\">\n <dx-text-box [(ngModel)]=\"item.value\"></dx-text-box>\n </div>\n </div>\n </ng-container>\n\n </dx-scroll-view>\n <div class=\"flex justify-end mx-1 flex-grow border-t\">\n <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n (click)=\"submitFilter()\">Submit</button>\n </div>\n\n </div>\n\n </div>\n</dx-popup>\n<dx-popup [(visible)]=\"isPopupView\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"1000\" [height]=\"'auto'\"\n [showTitle]=\"true\" class=\"popup\" title=\"Popup View\">\n <div *dxTemplate=\"let data of 'content'\">\n <div class=\"w-full\">\n <app-dynamic-widget [modalConfigs]=\"modalConfigs\" [contextMenuDataSource]=\"contextMenuDataSource\">\n </app-dynamic-widget>\n </div>\n </div>\n</dx-popup>", styles: [".custom-tooltip{display:none;position:absolute;top:100%;left:0;background:rgba(0,0,0,.8);color:#fff;padding:8px;border-radius:5px;font-size:12px;white-space:nowrap;z-index:100}\n"], dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent$1, selector: "app-loading" }, { 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"] }, { 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: 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: DynamicWidgetComponent, selector: "app-dynamic-widget", inputs: ["view", "datasetById", "contextMenuDataSource", "modalConfigs"] }] });
|