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
|
@@ -4381,6 +4381,7 @@ class DashChartComponent {
|
|
|
4381
4381
|
};
|
|
4382
4382
|
this.isEditWidget = false;
|
|
4383
4383
|
this.chartConfig = this.mainChartCourceObject.kpiConfig['dataConfig'];
|
|
4384
|
+
this.chartConfig = this.mainChartCourceObject.kpiConfig['dataConfig'];
|
|
4384
4385
|
}
|
|
4385
4386
|
}
|
|
4386
4387
|
}
|
|
@@ -4598,10 +4599,10 @@ class DashChartComponent {
|
|
|
4598
4599
|
}
|
|
4599
4600
|
}
|
|
4600
4601
|
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 });
|
|
4601
|
-
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" }] });
|
|
4602
|
+
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" }] });
|
|
4602
4603
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashChartComponent, decorators: [{
|
|
4603
4604
|
type: Component,
|
|
4604
|
-
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>" }]
|
|
4605
|
+
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>" }]
|
|
4605
4606
|
}], ctorParameters: function () { return [{ type: CommonService }, { type: ApplicationContentService }, { type: i3$1.ToastrService }]; }, propDecorators: { getChartConfigOutPut: [{
|
|
4606
4607
|
type: Output
|
|
4607
4608
|
}], chartconfigData: [{
|
|
@@ -18055,7 +18056,8 @@ class SingleLayoutApplicationDatssetsCall {
|
|
|
18055
18056
|
},
|
|
18056
18057
|
error: (err) => {
|
|
18057
18058
|
console.error('Error:', err);
|
|
18058
|
-
this.toastr.error(err.message);
|
|
18059
|
+
this.toastr.error(err.error.message);
|
|
18060
|
+
resolve();
|
|
18059
18061
|
reject(err);
|
|
18060
18062
|
}
|
|
18061
18063
|
});
|
|
@@ -18509,6 +18511,7 @@ class KpiWithDataSetTestComponent {
|
|
|
18509
18511
|
this.allWidgetByDataset = [];
|
|
18510
18512
|
let defaultFilters = { operationFilter: { startDate: "", endDate: "" } };
|
|
18511
18513
|
this.dashBoardWidgetConfig.widgets.forEach(widget => {
|
|
18514
|
+
var _a;
|
|
18512
18515
|
widget.filters.filterItems.forEach(element => {
|
|
18513
18516
|
if (element.filterType === 'date' || element.filterType === 'datetime') {
|
|
18514
18517
|
if (element.defaultFilterType === "dynamic" && element.momentFunction !== "" && element.defaultFilterValue !== "" && element.momentFormat !== "") {
|
|
@@ -18583,9 +18586,24 @@ class KpiWithDataSetTestComponent {
|
|
|
18583
18586
|
widget.widgetNode.forEach(node => {
|
|
18584
18587
|
if (node.nodeProperties.display) {
|
|
18585
18588
|
node.compConfig.viewConfig.forEach(view => {
|
|
18586
|
-
|
|
18587
|
-
viewIds.add(view.viewId);
|
|
18589
|
+
var _a;
|
|
18588
18590
|
this.defaultViewIds.push(view.viewId);
|
|
18591
|
+
const foundObject = (_a = this.defaultViewIdsOnPageRefresh) === null || _a === void 0 ? void 0 : _a.find(item => item.viewId === view.viewId);
|
|
18592
|
+
const derivedFilters = foundObject ? this.getDrildownFilter(foundObject, defaultFilters) : defaultFilters;
|
|
18593
|
+
let obj = {
|
|
18594
|
+
"filters": JSON.parse(JSON.stringify(derivedFilters)),
|
|
18595
|
+
"keyToPass": [],
|
|
18596
|
+
"drillDownType": "natural",
|
|
18597
|
+
"drilldownFrom": ""
|
|
18598
|
+
};
|
|
18599
|
+
this.stateDataSource.set(view.viewId, obj);
|
|
18600
|
+
let node = {
|
|
18601
|
+
datasetId: view.datasetId,
|
|
18602
|
+
viewId: view.viewId,
|
|
18603
|
+
filter: derivedFilters
|
|
18604
|
+
};
|
|
18605
|
+
datasetIds.add(node);
|
|
18606
|
+
viewIds.add(view.viewId);
|
|
18589
18607
|
});
|
|
18590
18608
|
}
|
|
18591
18609
|
else {
|
|
@@ -18594,20 +18612,14 @@ class KpiWithDataSetTestComponent {
|
|
|
18594
18612
|
});
|
|
18595
18613
|
}
|
|
18596
18614
|
});
|
|
18597
|
-
|
|
18598
|
-
|
|
18599
|
-
|
|
18600
|
-
|
|
18601
|
-
"keyToPass": [],
|
|
18602
|
-
"drillDownType": "natural",
|
|
18603
|
-
"drilldownFrom": ""
|
|
18604
|
-
};
|
|
18605
|
-
this.stateDataSource.set(element, obj);
|
|
18606
|
-
});
|
|
18615
|
+
if ((_a = this.defaultViewIdsOnPageRefresh) === null || _a === void 0 ? void 0 : _a.length) {
|
|
18616
|
+
const newViews = this.defaultViewIdsOnPageRefresh.map(item => item.viewId);
|
|
18617
|
+
this.defaultViewIds = [...this.defaultViewIds, ...newViews.filter(item => !this.defaultViewIds.includes(item))];
|
|
18618
|
+
}
|
|
18607
18619
|
let obj = {
|
|
18608
18620
|
widgetId: widget.widgetId,
|
|
18609
18621
|
pageId: widget.pageId,
|
|
18610
|
-
filters:
|
|
18622
|
+
filters: defaultFilters,
|
|
18611
18623
|
datasetIds: datasetIds
|
|
18612
18624
|
};
|
|
18613
18625
|
this.allWidgetByDataset.push(obj);
|
|
@@ -18616,9 +18628,9 @@ class KpiWithDataSetTestComponent {
|
|
|
18616
18628
|
let apiCalls = [];
|
|
18617
18629
|
this.allWidgetByDataset.forEach(view => {
|
|
18618
18630
|
view.datasetIds.forEach(id => {
|
|
18619
|
-
let found = datasetConfig.find(d => d.datasetId === id);
|
|
18631
|
+
let found = datasetConfig.find(d => d.datasetId === id.datasetId);
|
|
18620
18632
|
if (found) {
|
|
18621
|
-
apiCalls.push(this.datasetService.getDataFromDataSet(found, id,
|
|
18633
|
+
apiCalls.push(this.datasetService.getDataFromDataSet(found, id.datasetId, id.filter));
|
|
18622
18634
|
}
|
|
18623
18635
|
});
|
|
18624
18636
|
});
|
|
@@ -18635,6 +18647,7 @@ class KpiWithDataSetTestComponent {
|
|
|
18635
18647
|
this.router.navigate([], navigation);
|
|
18636
18648
|
});
|
|
18637
18649
|
}), error: (err) => {
|
|
18650
|
+
this.loadingModal = false;
|
|
18638
18651
|
this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'Error');
|
|
18639
18652
|
}
|
|
18640
18653
|
});
|
|
@@ -18727,11 +18740,18 @@ class KpiWithDataSetTestComponent {
|
|
|
18727
18740
|
}
|
|
18728
18741
|
}
|
|
18729
18742
|
getWidgetTitleDiv(item) {
|
|
18743
|
+
var _a;
|
|
18730
18744
|
const widgetDiv = document.createElement('div');
|
|
18731
18745
|
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');
|
|
18732
18746
|
const titleDiv = document.createElement('div');
|
|
18733
18747
|
titleDiv.classList.add('relative', 'group');
|
|
18734
|
-
|
|
18748
|
+
let params = "";
|
|
18749
|
+
if (!item.nodeProperties.widgetParams && ((_a = this.defaultViewIdsOnPageRefresh) === null || _a === void 0 ? void 0 : _a.length)) {
|
|
18750
|
+
params = this.getTitleParams(item) || "";
|
|
18751
|
+
}
|
|
18752
|
+
else {
|
|
18753
|
+
params = item.nodeProperties.widgetParams || "";
|
|
18754
|
+
}
|
|
18735
18755
|
const widgetTitle = item.nodeProperties.widgetTitle;
|
|
18736
18756
|
const tooltipMatch = widgetTitle.match(/\$t\{([\s\S]*?)\}/);
|
|
18737
18757
|
const displayTitle = widgetTitle.replace(/\$t\{[\s\S]*?\}/g, '').trim();
|
|
@@ -18965,7 +18985,6 @@ class KpiWithDataSetTestComponent {
|
|
|
18965
18985
|
const stateData = Array.from(this.stateDataSource.keys());
|
|
18966
18986
|
const currentViewIndex = stateData.indexOf(event.viewId);
|
|
18967
18987
|
const deletedViewIds = [];
|
|
18968
|
-
console.log(this.defaultViewIds, "default view");
|
|
18969
18988
|
for (let i = currentViewIndex + 1; i < stateData.length; i++) {
|
|
18970
18989
|
deletedViewIds.push(stateData[i]);
|
|
18971
18990
|
}
|
|
@@ -19133,7 +19152,6 @@ class KpiWithDataSetTestComponent {
|
|
|
19133
19152
|
let appliedFilters = this.getSetOperatorFilter(event, this.stateDataSource.get(event.viewId));
|
|
19134
19153
|
view.compConfig.viewConfig.forEach(contentView => {
|
|
19135
19154
|
let found = this.dataSetModal.find(d => d.datasetId === contentView.datasetId);
|
|
19136
|
-
let queryParams = this.getFiltersForQueryParams(appliedFilters, found.config.queryConfig.mapedFilters);
|
|
19137
19155
|
if (found) {
|
|
19138
19156
|
apiCalls.push(this.datasetService.getDataFromDataSet(found, contentView.datasetId, appliedFilters));
|
|
19139
19157
|
chatApiCall.push(this.chatApiService.getDataForChatAi(this.pageId, contentView, appliedFilters));
|
|
@@ -19156,33 +19174,17 @@ class KpiWithDataSetTestComponent {
|
|
|
19156
19174
|
const containerElement = document.querySelector(`#${prefixedId}`);
|
|
19157
19175
|
this.uniqueDataSetObject = this.datasetService.getUniqueDataSetObject();
|
|
19158
19176
|
this.loadSingleWidgetNode(view, this.mainPageDivElement, this.uniqueDataSetObject);
|
|
19177
|
+
let navigation = {
|
|
19178
|
+
queryParams: appliedFilters['operationFilter'],
|
|
19179
|
+
queryParamsHandling: "merge"
|
|
19180
|
+
};
|
|
19181
|
+
this.router.navigate([], navigation);
|
|
19182
|
+
console.log(this.stateDataSource);
|
|
19159
19183
|
setTimeout(() => {
|
|
19160
19184
|
this.scrollToBottom(this.mainPageDivElement);
|
|
19161
19185
|
}, 200);
|
|
19162
19186
|
});
|
|
19163
19187
|
}
|
|
19164
|
-
getFiltersForQueryParams(operators, filters) {
|
|
19165
|
-
debugger;
|
|
19166
|
-
const operationFilter = operators.operationFilter || {};
|
|
19167
|
-
const currentParams = this.activatedRoute.snapshot.queryParams;
|
|
19168
|
-
const newParams = {};
|
|
19169
|
-
const defaultViewsKeyToPass = [];
|
|
19170
|
-
filters.forEach(filter => {
|
|
19171
|
-
const localKey = filter.localColumn;
|
|
19172
|
-
const serverKey = filter.serverColumn;
|
|
19173
|
-
let value = operationFilter[localKey];
|
|
19174
|
-
if (value !== undefined && value !== "") {
|
|
19175
|
-
newParams[serverKey] = value;
|
|
19176
|
-
defaultViewsKeyToPass.push(localKey);
|
|
19177
|
-
}
|
|
19178
|
-
});
|
|
19179
|
-
const mergedParams = Object.assign(Object.assign({}, currentParams), newParams);
|
|
19180
|
-
const navigation = {
|
|
19181
|
-
queryParams: mergedParams,
|
|
19182
|
-
queryParamsHandling: 'merge'
|
|
19183
|
-
};
|
|
19184
|
-
this.router.navigate([], navigation);
|
|
19185
|
-
}
|
|
19186
19188
|
scrollToBottom(container) {
|
|
19187
19189
|
setTimeout(() => {
|
|
19188
19190
|
container.scrollIntoView({ block: 'end' });
|
|
@@ -19417,6 +19419,105 @@ class KpiWithDataSetTestComponent {
|
|
|
19417
19419
|
return input;
|
|
19418
19420
|
}
|
|
19419
19421
|
}
|
|
19422
|
+
getDrilldownDisplayByUrlParams(all_views) {
|
|
19423
|
+
this.defaultViewIdsOnPageRefresh = [];
|
|
19424
|
+
const params = this.activatedRoute.snapshot.queryParams;
|
|
19425
|
+
this.defaultViewIdsOnPageRefresh = (params['views'] && params['views'] !== "") ? JSON.parse(decodeURIComponent(params['views'])) : [];
|
|
19426
|
+
all_views.forEach(element => {
|
|
19427
|
+
for (let entry of element.widgetNode) {
|
|
19428
|
+
let shouldDisplay = false;
|
|
19429
|
+
entry.compConfig.viewConfig.forEach(view => {
|
|
19430
|
+
if (this.defaultViewIdsOnPageRefresh.length !== 0) {
|
|
19431
|
+
const foundObject = this.defaultViewIdsOnPageRefresh.find(val => val.viewId === view.viewId);
|
|
19432
|
+
if (foundObject) {
|
|
19433
|
+
shouldDisplay = true;
|
|
19434
|
+
}
|
|
19435
|
+
}
|
|
19436
|
+
});
|
|
19437
|
+
if (shouldDisplay) {
|
|
19438
|
+
entry.nodeProperties.display = true;
|
|
19439
|
+
}
|
|
19440
|
+
}
|
|
19441
|
+
});
|
|
19442
|
+
}
|
|
19443
|
+
getFiltersForQueryParams(operators, filters, viewParams) {
|
|
19444
|
+
const operationFilter = operators.operationFilter || {};
|
|
19445
|
+
const currentParams = this.activatedRoute.snapshot.queryParams;
|
|
19446
|
+
let currentViews = [];
|
|
19447
|
+
if (currentParams['views']) {
|
|
19448
|
+
try {
|
|
19449
|
+
currentViews = JSON.parse(decodeURIComponent(currentParams['views']));
|
|
19450
|
+
}
|
|
19451
|
+
catch (e) {
|
|
19452
|
+
console.error("Invalid views param");
|
|
19453
|
+
}
|
|
19454
|
+
}
|
|
19455
|
+
const filterData = { viewId: viewParams.viewId };
|
|
19456
|
+
filters.forEach(filter => {
|
|
19457
|
+
const localKey = filter.localColumn;
|
|
19458
|
+
const serverKey = filter.serverColumn;
|
|
19459
|
+
let value = operationFilter[localKey];
|
|
19460
|
+
if (value !== undefined && value !== "") {
|
|
19461
|
+
filterData[serverKey] = value;
|
|
19462
|
+
}
|
|
19463
|
+
});
|
|
19464
|
+
const existingIndex = currentViews.findIndex(v => v.viewId === viewParams.viewId);
|
|
19465
|
+
if (existingIndex !== -1) {
|
|
19466
|
+
currentViews[existingIndex] = filterData;
|
|
19467
|
+
currentViews = currentViews.slice(0, existingIndex + 1);
|
|
19468
|
+
}
|
|
19469
|
+
else {
|
|
19470
|
+
currentViews.push(filterData);
|
|
19471
|
+
}
|
|
19472
|
+
const encodedViews = encodeURIComponent(JSON.stringify(currentViews));
|
|
19473
|
+
const mergedParams = Object.assign({}, currentParams);
|
|
19474
|
+
const navigation = {
|
|
19475
|
+
queryParams: mergedParams,
|
|
19476
|
+
queryParamsHandling: 'merge'
|
|
19477
|
+
};
|
|
19478
|
+
this.router.navigate([], navigation);
|
|
19479
|
+
}
|
|
19480
|
+
getDrildownFilter(drildownFilter, defaultFilter) {
|
|
19481
|
+
const expectedDateFields = ['recordDate', 'record_date', 'eventDate', 'event_date'];
|
|
19482
|
+
const result = JSON.parse(JSON.stringify(defaultFilter));
|
|
19483
|
+
const { viewId } = drildownFilter, filteredDrilldown = __rest(drildownFilter, ["viewId"]);
|
|
19484
|
+
let dateValue = null;
|
|
19485
|
+
for (const key of expectedDateFields) {
|
|
19486
|
+
if (filteredDrilldown[key]) {
|
|
19487
|
+
dateValue = filteredDrilldown[key];
|
|
19488
|
+
break;
|
|
19489
|
+
}
|
|
19490
|
+
}
|
|
19491
|
+
if (dateValue) {
|
|
19492
|
+
result.operationFilter.startDate = dateValue;
|
|
19493
|
+
result.operationFilter.endDate = dateValue;
|
|
19494
|
+
}
|
|
19495
|
+
for (const key in filteredDrilldown) {
|
|
19496
|
+
if (!expectedDateFields.includes(key)) {
|
|
19497
|
+
result.operationFilter[key] = filteredDrilldown[key];
|
|
19498
|
+
}
|
|
19499
|
+
}
|
|
19500
|
+
return result;
|
|
19501
|
+
}
|
|
19502
|
+
getTitleParams(items) {
|
|
19503
|
+
const results = [];
|
|
19504
|
+
items.compConfig.viewConfig.forEach(element => {
|
|
19505
|
+
const foundObject = this.defaultViewIdsOnPageRefresh.find(val => val.viewId === element.viewId);
|
|
19506
|
+
if (foundObject) {
|
|
19507
|
+
const result = Object.entries(foundObject)
|
|
19508
|
+
.filter(([key]) => key !== 'viewId')
|
|
19509
|
+
.map(([key, value]) => {
|
|
19510
|
+
const formattedKey = key
|
|
19511
|
+
.replace(/_/g, ' ')
|
|
19512
|
+
.replace(/\b\w/g, char => char.toUpperCase());
|
|
19513
|
+
return `${formattedKey} = ${value}`;
|
|
19514
|
+
})
|
|
19515
|
+
.join(' | ');
|
|
19516
|
+
results.push(`| ${result} `);
|
|
19517
|
+
}
|
|
19518
|
+
});
|
|
19519
|
+
return results.join('\n');
|
|
19520
|
+
}
|
|
19420
19521
|
}
|
|
19421
19522
|
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 });
|
|
19422
19523
|
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"] }] });
|