<ng-container *ngTemplateOutlet="compType == 'COMPOSITE' ? compositeTempl : componentTempl"></ng-container>

<ng-template #componentTempl>	
<div *ngIf=" compTitle !=='Doctor Participating'" >	
<table class="tableCSS" cellpadding="0;" cellspacing="0;">
   <tbody>
      <tr>
         <td align="center" [ngClass]="vieWtype=='flat' ? 'dashboardConatinerFlat' : 'dashboardConatiner'">
            <div class="chartContainer">
               <!-- <div id="dbChartCnt" [style.width]="compWidth   ?  compWidth : ''"
               [style.margin.px]="compWidth =='100%'   ? '0'  : ''"
               [ngClass]="flatView || flatCompView  ? 'ang-dbChartContainerFlat' : vieWtype=='flat' ? 'ang-dbChartContainerFlat1' : 'ang-dbChartContainer'" 
			   [ngClass]="isSingleDashboard && flatView && !isDrillDown ? 'single-dashboard' : ''" > -->
			   <!-- Changed by Samruddhi for Pending order dashboard layout is disturbed -->
			   <div id="dbChartCont" [style.width]="compWidth   ?  compWidth : ''"
               [style.margin.px]="compWidth =='100%'   ? '0'  : ''"
               [ngClass]="{
				'ang-dbChartContainerFlat':flatView || flatCompView,
				'ang-dbChartContainerFlat1':vieWtype=='flat',
				'ang-dbChartContainer':vieWtype!='flat',
				'single-dashboard':isSingleDashboard && flatView && !isDrillDown
			}">
                 <!-- Added by Saiprasad G for floating button 30-MAR-20 -->                    
                          <div *ngIf="linkData && linkData.AutoInvoke=='Y' && linkData.FormNo=='1' && floatingButton=='N' " class="angDashboadAddLink">
                         	<span class="vision-ui-add_circle" (click)="performLinkAction(linkData);" ></span>
                         </div>

						  <div *ngIf="linkData && linkData.AutoInvoke=='Y' && linkData.FormNo=='1' && floatingButton=='Y' "  class="float-add-button">
							<button (click)="performLinkAction(linkData);" mat-fab class="add_Attachmennt-Button">
								<mat-icon class="icon"><i class="icon-display material-icons">add</i></mat-icon>
							</button>
						</div>
                  <!-- Added by Saiprasad G for floating button 30-MAR-20 -->
                  <div *ngIf=" !flatView && !flatCompView && vieWtype !=='flat'" class="angChartContainerHead" id="Cardgwt-uid-41head">
                     <div class="mainPanel" [ngClass]="{'mainPanel-drillDown' : isDrillDown}">
                        <!--Commented and Added by Poonam B on 26-May-21 for Expense START-->
	                     <!-- <div style="height: 32px;width: 32px;background-color: #465775;border-radius: 50%; display: inline-block;"> -->
                         <div style="height: 32px;width: 32px;background-color: var(--primary);border-radius: 50%; display: inline-block;">
                         <!--Commented and Added by Poonam B on 26-May-21 for Expense END-->
	                    	 <img src="dashboard/assets/images/dashboard/{{compIcon}}" class="componantTtlImg"/> 
	                     </div>
                         <div class="refreshDatePanel">
                            <div class="componantTtl truncateText" [ngStyle]="{'width' : isMobile ? '180px' : '350px'}" title="{{compTitle}}">{{compTitle}} {{titleLabel || ''}}</div>
	                         <div *ngIf=" compTitle !=='Doctor Participating'" >
                            <div class = "refreshIconWithDate ">
                                <span class="refreshDate">Refreshed Today, {{refreshDate | date:'h:mm a'}}</span>
                                <!--<img src="FusionChart/images/refresh.svg" class="refrshIcon" (click)="getCompData(filterParameter, true);" />  -->
                                <span #bbRefreshIcon id="bbRefreshIcon" class="vision-ui-refresh_small icon-refresh-small " (click)="getCompData(filterParameter, true); isRefresh = true;"></span>
                            </div>
                         </div>
                          
                        
                         
                         <div *ngIf="obj_links  && obj_links.length > 0" class="angDashboadLink">
							<!-- <img src="FusionChart/images/dashboard_links.png" class="angDashboadLinkImg" [matMenuTriggerFor]="linkMenu">  -->
	                        <span class="vision-ui-more_v" [matMenuTriggerFor]="linkMenu" ></span>
						 </div>
						
						<div *ngIf="totalVal" class="total-value-cont">
						  <span>{{totalVal}}</span>
						</div>
                     </div>
					 </div>
                    <div *ngIf="isDrillDown && compTitle !=='Doctor Participating'" class="ang-drilldown-close-cont">
                        <span class="ang-drilldown-close-btn visionicon" (click)="closeDrillDown();"></span>
                    </div>
                  </div>
                  <div>
                     <div  [ngClass]="flatView || flatCompView ? 'cardScrlPnlFlat' : 'cardScrlPnl'" [style.height.px]="flatView || flatCompView ? '' : compHeight - 66" >
                        <div style="position: relative; zoom: 1;">
                           <div class="angCompPanel" [ngStyle]="{'min-height' : minHeight}">
<!--                            		<html-outlet *ngIf="loaded && !isNullData" [html]="compHTML" [data]="compData"></html-outlet> -->
								<div *ngIf="loaded && !isNullData && !loading && vieWtype=='flat'" class="db-comp-title">{{compTitle}}</div>								   

                           		<div *ngIf="loaded && !isNullData && !loading">
                                <!--angularComponent load on basis of types,so in battery usage,meet-variance and e-detailing xml the type should be PIVOT or GRID based on compType, and for content-library and account-activity type will CARD -->
                           			<pivot-grid *ngIf="compType == 'PIVOT'" [data]="compData" [elWidth]="elementRef.nativeElement.clientWidth" (onDrillDown)="openDrillDown($event);" (onRowSelect)="setSelectedFeed($event);"></pivot-grid>
                           			<wbr-simple-grid *ngIf="compType == 'WEBDATAROCKS-GRID'" [data]="compData" [elWidth]="elementRef.nativeElement.clientWidth" (onDrillDown)="openDrillDown($event);" (onRowSelect)="setSelectedFeed($event);"></wbr-simple-grid>
                                    <simple-grid *ngIf="compType == 'GRID'" [data]="compData" [elWidth]="elementRef.nativeElement.clientWidth" (onDrillDown)="openDrillDown($event);" (onRowSelect)="setSelectedFeed($event);"></simple-grid>
                           			<acc-activity-graph *ngIf="compType == 'CARD' && compName == 'acc-activity-graph'" [data]="compData"></acc-activity-graph>
                           			<account-activity *ngIf="compType == 'CARD' && compName == 'account-activity'" [data]="compData"></account-activity>
                           			<content-library *ngIf="compType == 'CARD' && compName == 'content-library'" [data]="compData" (onContentAttached)="getCompData(filterParameter, true);" (onLinksCreation)="onLinksCreation($event);" (onFilePreview)="invokeLink($event)"></content-library>
                           			<feed-component  *ngIf="compType == 'FEED' && compData" style="display:block;"  [data]="compData" (onDrillDown)="openDrillDown($event);" (onPerformAction)="performAction($event);" ></feed-component>
                                    <chart-component *ngIf="compType == 'CHART' && compData" [style.width.px]="elementRef.nativeElement.clientWidth - 11" style="display:block; max-height: 400px; height: 400px;" [data]="compData" ></chart-component>

                           		    <fm-chart *ngIf="compType == 'FMCHART' && compData" [data]="compData" [elWidth]="elementRef.nativeElement.clientWidth" (onDrillDown)="openDrillDown($event);" (onGetData)="setTotal($event);"></fm-chart>
	                      			<!-- <tree-component *ngIf="compType == 'CARD' && compName == 'coaching-dashboard'" [data]="compData" [fileName]="'Coaching_Dashboard'"></tree-component>-->
	                          		<chart-component *ngIf="compType == 'H_BAR' && compName == 'assessment-summary'" [data]="compData" [type]="compType"></chart-component>
	                           		<!-- <tree-component *ngIf="compType == 'CARD' && compName == 'assessment-details'"  [data]="compData" [fileName]="'Assessment_Dashboard'"></tree-component> -->       
	                      			<tree-component *ngIf="compType == 'CARD' && ( treeCompArray.includes(compName) ) " [data]="compData" [compHeight] ="compHeight"></tree-component>
                           			<summary-timeline *ngIf="compType == 'CARD' && compName == 'summary-timeline'" [data]="compData" [elWidth]="elementRef.nativeElement.clientWidth" (onDrillDown)="openDrillDown($event);"></summary-timeline>
									<customer-info *ngIf="compType == 'CARD' && compName == 'customer-info'" [data]="compData"></customer-info>
									<!-- Added by Sainath T on 19/09/18.[for upload status dashbord]-start  -->
									<background-job-status *ngIf="compType == 'CARD' && compName == 'background-job-status'" [data]="compData"></background-job-status>
									<!-- Added by Sainath T on 19/09/18.[for upload status dashbord]-end -->
									<user-info *ngIf="compType == 'CARD' && compName == 'user-info'" [data]="compData" (onRowSelect)="setSelectedFeed($event);"></user-info>
									<fm-component *ngIf="compType == 'CARD' && compName == 'fm-component'" [data]="compData" [elWidth]="elementRef.nativeElement.clientWidth"></fm-component>
									<call-history *ngIf="compType == 'CARD' && compName == 'call-history'" [data]="compData"></call-history>
									<bar-line-chart  *ngIf="compType == 'BARCHART' " [data]="compData" [elWidth]="elementRef.nativeElement.clientWidth"></bar-line-chart>
									<course-library *ngIf="compType == 'CARD' && compName == 'course-library'" [data]="compData" (onRefreshCourseData)="getCompData(filterParameter, true);"></course-library>
									<dashboard-kpi *ngIf="compType == 'CARD' && compName == 'dashboard-kpi'" [data]="compData"></dashboard-kpi>
									<line-bar-chart *ngIf="compName == 'line-Chart'" [data]="compData"></line-bar-chart>
									<sell-performance *ngIf="compType == 'flatonly' && compName == 'sell-performance'" [data]="compData" [filterParameter]="filterParameter"></sell-performance>
									<visual *ngIf="compType == 'VISUAL' && visualUpdOptions" [visualData]="visualUpdOptions" (openDrillDown)="openDrillDown($event);" (onRowSelect)="setSelectedFeed($event);"></visual>
							   	</div>
                           		
                           		<div *ngIf="loaded && isNullData" class="noDataFoundMsg">
                           			<span>{{compData.data?.result?.message || 'No Data'}}</span>
                           		</div>
                           		<div *ngIf="loading" class="ang-dashboard-loader-container" >
                           			<img class="ang-dashboard-loader" src="dashboard/assets/images/svg/loading.svg" /> 
<!-- 									<mat-spinner class="ang-dashboard-loader"></mat-spinner> -->
								</div>
                           	</div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </td>
      </tr>
   </tbody>
</table>
 </div>  


 <div *ngIf=" compTitle =='Doctor Participating'" >	
<table class="tableCSS" cellpadding="0;" cellspacing="0;" #draggable id ="DoctorData">
   <tbody>
      <tr>
         <td align="center" [ngClass]="vieWtype=='flat' ? 'dashboardConatinerFlat' : 'dashboardConatiner'">
            <div class="chartContainer">
               <div id="angDbChartCnt" [style.width]="compWidth   ?  compWidth : ''"
               [style.margin.px]="compWidth =='100%'   ? '0'  : ''"
               [ngClass]="flatView || flatCompView  ? 'ang-dbChartContainerFlat' : vieWtype=='flat' ? 'ang-dbChartContainerFlat1' : 'ang-dbChartContainer'" 
            	[ngClass]="isSingleDashboard && flatView && !isDrillDown ? 'single-dashboard' : ''" >
                 <!-- Added by Saiprasad G for floating button 30-MAR-20 -->                    
                          <div *ngIf="linkData && linkData.AutoInvoke=='Y' && linkData.FormNo=='1' && floatingButton=='N' " class="angDashboadAddLink">
                         	<span class="vision-ui-add_circle" (click)="performLinkAction(linkData);" ></span>
                         </div>

						  <div *ngIf="linkData && linkData.AutoInvoke=='Y' && linkData.FormNo=='1' && floatingButton=='Y' "  class="float-add-button">
							<button (click)="performLinkAction(linkData);" mat-fab class="add_Attachmennt-Button">
								<mat-icon class="icon"><i class="icon-display material-icons">add</i></mat-icon>
							</button>
						</div>
                  <!-- Added by Saiprasad G for floating button 30-MAR-20 -->
                   <!-- <div *ngIf=" compTitle =='Doctor Participating '" >
                     <div class="mainPanel" [ngClass]="{'mainPanel-drillDown' : isDrillDown}" #draggable >
	                     <div style="height: 32px;width: 32px;background-color: #465775;border-radius: 50%; display: inline-block;">
	                    	 <img src="dashboard/assets/images/dashboard/{{compIcon}}" class="componantTtlImg"/> 
	                     </div>
                         <div class="refreshDatePanel">
                            <div class="componantTtl truncateText" [ngStyle]="{'width' : isMobile ? '180px' : '350px'}" title="{{compTitle}}">{{compTitle}} {{titleLabel || ''}}</div>
                            <div *ngIf=" compTitle !=='Doctor Participating '" >

                                <div class = "refreshIconWithDate ">
                                    <span class="refreshDate">Refreshed Today, {{refreshDate | date:'h:mm a'}}</span>
                                    <span #bbRefreshIcon id="bbRefreshIcon" class="vision-ui-refresh_small icon-refresh-small " (click)="getCompData(filterParameter, true);"></span>
                                </div>
                            </div>    

                         </div>
                          
                        
                         
                         <div *ngIf="obj_links  && obj_links.length > 0" class="angDashboadLink">
	                        <span class="vision-ui-more_v" [matMenuTriggerFor]="linkMenu" ></span>
						 </div>
						
						<div *ngIf="totalVal" class="total-value-cont">
						  <span>{{totalVal}}</span>
						</div>
                     </div>
                   </div>   -->
                     
                     
                    
	                     <div *ngIf=" !flatView && !flatCompView && vieWtype !=='flat'" class="angChartContainerHead" id="Cardgwt-uid-41head" >
	                     <div class="mainPanel" [ngClass]="{'mainPanel-drillDown' : isDrillDown}">
		                     <div style="height: 32px;width: 32px;background-color: #465775;border-radius: 50%; display: inline-block;">
		                    	 <img src="dashboard/assets/images/dashboard/{{compIcon}}" class="componantTtlImg"/> 
		                     </div>
	                         <div class="refreshDatePanel">
	                            <div class="componantTtl truncateText" [ngStyle]="{'width' : isMobile ? '180px' : '350px'}" title="{{compTitle}}">{{compTitle}} {{titleLabel || ''}}</div>
	                            <div *ngIf=" compTitle !=='Doctor Participating'" >
	
	                                <div class = "refreshIconWithDate ">
	                                    <span class="refreshDate">Refreshed Today, {{refreshDate | date:'h:mm a'}}</span>
	                                    <span #bbRefreshIcon id="bbRefreshIcon" class="vision-ui-refresh_small icon-refresh-small " (click)="getCompData(filterParameter, true);"></span>
	                                </div>
	                            </div>    
	
	                        
	                          
	                        
	                         
	                         <div *ngIf="obj_links  && obj_links.length > 0" class="angDashboadLink">
								<!-- <img src="FusionChart/images/dashboard_links.png" class="angDashboadLinkImg" [matMenuTriggerFor]="linkMenu">  -->
		                        <span class="vision-ui-more_v" [matMenuTriggerFor]="linkMenu" ></span>
							 </div>
							
							<div *ngIf="totalVal" class="total-value-cont">
							  <span>{{totalVal}}</span>
							</div>
	                     </div>
	                   </div>  
                     
                     
                     
                     
                    <div *ngIf="isDrillDown && compTitle !=='Doctor Participating'" class="ang-drilldown-close-cont">
                        <span class="ang-drilldown-close-btn visionicon" (click)="closeDrillDown();"></span>
                    </div>
                  </div>
                  <div>
                     <div  [ngClass]="flatView || flatCompView ? 'cardScrlPnlFlat' : 'cardScrlPnl'" [style.height.px]="flatView || flatCompView ? '' : compHeight - 66" >
                        <div style="position: relative; zoom: 1;">
                           <div class="angCompPanel" [ngStyle]="{'min-height' : minHeight}">
<!--                            		<html-outlet *ngIf="loaded && !isNullData" [html]="compHTML" [data]="compData"></html-outlet> -->
								<div *ngIf="loaded && !isNullData && !loading && vieWtype=='flat'" class="db-comp-title">{{compTitle}}</div>								   

                           		<div *ngIf="loaded && !isNullData && !loading">
                                <!--angularComponent load on basis of types,so in battery usage,meet-variance and e-detailing xml the type should be PIVOT or GRID based on compType, and for content-library and account-activity type will CARD -->
                           			<pivot-grid *ngIf="compType == 'PIVOT'" [data]="compData" [elWidth]="elementRef.nativeElement.clientWidth" (onDrillDown)="openDrillDown($event);" (onRowSelect)="setSelectedFeed($event);"></pivot-grid>
                           			<simple-grid *ngIf="compType == 'GRID'" [data]="compData" [elWidth]="elementRef.nativeElement.clientWidth" (onDrillDown)="openDrillDown($event);" (onRowSelect)="setSelectedFeed($event);"></simple-grid>
                           			<acc-activity-graph *ngIf="compType == 'CARD' && compName == 'acc-activity-graph'" [data]="compData"></acc-activity-graph>
                           			<account-activity *ngIf="compType == 'CARD' && compName == 'account-activity'" [data]="compData"></account-activity>
                           			<content-library *ngIf="compType == 'CARD' && compName == 'content-library'" [data]="compData" (onContentAttached)="getCompData(filterParameter, true);" (onLinksCreation)="onLinksCreation($event);" (onFilePreview)="invokeLink($event)"></content-library>
                           			<feed-component  *ngIf="compType == 'FEED' && compData" style="display:block;"  [data]="compData" (onDrillDown)="openDrillDown($event);" (onPerformAction)="performAction($event);" ></feed-component>
                                    <chart-component *ngIf="compType == 'CHART' && compData" [style.width.px]="elementRef.nativeElement.clientWidth - 11" style="display:block; max-height: 400px; height: 400px;" [data]="compData" ></chart-component>

                           		    <fm-chart *ngIf="compType == 'FMCHART' && compData" [data]="compData" [elWidth]="elementRef.nativeElement.clientWidth" (onDrillDown)="openDrillDown($event);" (onGetData)="setTotal($event);"></fm-chart>
	                      			<!-- <tree-component *ngIf="compType == 'CARD' && compName == 'coaching-dashboard'" [data]="compData" [fileName]="'Coaching_Dashboard'"></tree-component>-->
	                          		<chart-component *ngIf="compType == 'H_BAR' && compName == 'assessment-summary'" [data]="compData" [type]="compType"></chart-component>
	                           		<!-- <tree-component *ngIf="compType == 'CARD' && compName == 'assessment-details'"  [data]="compData" [fileName]="'Assessment_Dashboard'"></tree-component> -->       
	                      			<tree-component *ngIf="compType == 'CARD' && ( treeCompArray.includes(compName) ) " [data]="compData" [compHeight] ="compHeight"></tree-component>
                           			<summary-timeline *ngIf="compType == 'CARD' && compName == 'summary-timeline'" [data]="compData" [elWidth]="elementRef.nativeElement.clientWidth" (onDrillDown)="openDrillDown($event);"></summary-timeline>
									<customer-info *ngIf="compType == 'CARD' && compName == 'customer-info'" [data]="compData"></customer-info>
									<!-- Added by Sainath T on 19/09/18.[for upload status dashbord]-start  -->
									<background-job-status *ngIf="compType == 'CARD' && compName == 'background-job-status'" [data]="compData"></background-job-status>
									<!-- Added by Sainath T on 19/09/18.[for upload status dashbord]-end -->
									<user-info *ngIf="compType == 'CARD' && compName == 'user-info'" [data]="compData" (onRowSelect)="setSelectedFeed($event);"></user-info>
									<fm-component *ngIf="compType == 'CARD' && compName == 'fm-component'" [data]="compData" [elWidth]="elementRef.nativeElement.clientWidth"></fm-component>
									<call-history *ngIf="compType == 'CARD' && compName == 'call-history'" [data]="compData"></call-history>
									<bar-line-chart  *ngIf="compType == 'BARCHART' " [data]="compData" [elWidth]="elementRef.nativeElement.clientWidth"></bar-line-chart>
									<course-library *ngIf="compType == 'CARD' && compName == 'course-library'" [data]="compData" (onRefreshCourseData)="getCompData(filterParameter, true);"></course-library>
									<dashboard-kpi *ngIf="compType == 'CARD' && compName == 'dashboard-kpi'" [data]="compData"></dashboard-kpi>
									<line-bar-chart *ngIf="compName == 'line-Chart'" [data]="compData"></line-bar-chart>
									<sell-performance *ngIf="compType == 'flatonly' && compName == 'sell-performance'" [data]="compData" [filterParameter]="filterParameter"></sell-performance>
								</div>
                           		
                           		<div *ngIf="loaded && isNullData" class="noDataFoundMsg">
                           			<span>{{compData.data?.result?.message || 'No Data'}}</span>
                           		</div>
                           		<div *ngIf="loading" class="ang-dashboard-loader-container" >
                           			<img class="ang-dashboard-loader" src="dashboard/assets/images/svg/loading.svg" /> 
<!-- 									<mat-spinner class="ang-dashboard-loader"></mat-spinner> -->
								</div>
                           	</div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </td>
      </tr>
   </tbody>
</table>
 </div>
</ng-template>

<mat-menu #linkMenu="matMenu" xPosition="before">
	<div *ngFor="let link of obj_links" (click)="performLinkAction(link);" class="ang-db-Link"> 
	    <span class="dashboard-link-img" *ngIf ="link.FormNo=='1'">
			<img *ngIf="link.Image && link.LinkType != 'CL'" #imgRef [src]="getImgSrc(link)" alt="" class="actionIcons" title="{{link.LinkTitle}}" (error)="imgRef.style.display='none'; defImgRef.style.display='block'">
				
			<img class="ang-Link-Image defaultImg" 
			      #defImgRef
			      [style.display]="!link.Image ? 'block' : 'none'"
				  [ngClass]="{
					    		'ang-sideEditLblView':link.LinkType == 2,
					    		'ang-sideReportLblView':link.LinkType == 3,
							    'ang-sideAddLblView':link.LinkType == 4,
					    		'ang-sideProcessLblView':link.LinkType == 6
					    	}"		  		  
		  		  [src]="getImgSrc(link)"
			      title="{{link.LinkTitle}}"
			      alt="">
		     <span *ngIf="link.LinkType == 'CL' && link.Image" [ngClass]="link.Image" class="def-link-icon"></span>
		</span>	      
	    <span class="dashboard-link-title">{{link.LinkTitle}}</span>
	</div>		
</mat-menu>


<div #drillDownContainer>

</div>
<!-- 
<div *ngIf="linkData && linkData.AutoInvoke=='Y' && linkData.FormNo=='1'"  class="pres-add-button-cont">
 <button mat-fab class="pres-add-btn" (click)="performLinkAction(linkData);">
 	<span [ngClass]="linkData.Image"   class="visionicon"></span>
 </button>
</div> 
-->


<ng-template cdk-portal>
	<div></div>
</ng-template>


<ng-template #compositeTempl>
	<div *ngIf="loaded && !isNullData && !loading">
		<!-- Changed by Pravin K on 18-MAR-20  START-->
		<dashboard-composite *ngFor="let composite of compData.composite" [compositeConfig]="composite" [data]="compData" (onDrillDown)="openCompositeDrillDown($event);" (onDrillDownClose)="closeDrillDown();" (onPerformAction)="performAction($event);" [drillDownCompositeInfo]="drillDownCompositeInfo"></dashboard-composite>
		<!-- Changed by Pravin K on 18-MAR-20  END-->
	</div>	
	<div *ngIf="loaded && isNullData" class="noDataFoundMsgComposite">
		<span>{{compData.data?.result?.message || 'No Data'}}</span>
	</div>
	<div *ngIf="loading" class="ang-dashboard-loader-container" >
		<img class="ang-dashboard-loader" src="dashboard/assets/images/svg/loading.svg" /> 
	</div>	
</ng-template>

