
<div class="tab-header-panel">{{chartHeaderTitle}}</div>
<div class="tab-content-panel">
    <div class="tab-content-title">
    	<div class="tab-content-initials" [ngClass]="getThemeClass()">
    		<img *ngIf="imageSrc && imageNotFound == false " [src]="imageSrc" (error)=" setImageNotFound(true) " />
    		<img *ngIf="altImageSrc && imageNotFound == false " [src]="altImageSrc" (error)=" setImageNotFound(false) " />
            <span *ngIf="imageNotFound == true ">{{chartContentInitials}}</span>
    	</div>
        <div class="tab-content-title-column">{{chartContentTitle}}</div>
    </div>
	<ng-container [ngSwitch]="chartType"> 
		<ng-container *ngSwitchCase="'SERIES_CHART_PANEL'" [ngTemplateOutlet]="SERIES_CHART_PANEL"></ng-container> 
		<ng-container *ngSwitchCase="'POLAR_AREA'" [ngTemplateOutlet]="POLAR_AREA"></ng-container>  
		<ng-container *ngSwitchCase="'CUSTOM_DOUGHNUT_CHART'" [ngTemplateOutlet]="CUSTOM_DOUGHNUT_CHART"></ng-container> 
		<ng-container *ngSwitchDefault [ngTemplateOutlet]="CHART_PANEL"></ng-container> 
	</ng-container>
	
	<ng-template #CHART_PANEL>
		<div [ngClass]="'chartContentTempl' + chartPanelId">
			<div class="custom-chart-details">
				<div class="bb-chart-panel">
					<div class ="custom-chart">
						<bb-custom-chart 
							[chartType]= "chartConfig['chartType']"
							[datasets]="chartConfig['datasets']"
							[labels]="chartConfig['labels']"
							[options]="chartConfig['options']"
							[parentData]="chartData"
							[chartHeight]="chartCanvasHeight">
					    </bb-custom-chart>
					</div>
				</div>
			</div>
		</div>
	</ng-template>

	<ng-template #SERIES_CHART_PANEL>
		<div class="series_custom-chart-details">
			<div class="series_bb-chart-panel" *ngFor="let chartData of chartDataSource">
				<div class ="series_custom-chart">
					<div *ngIf = "formatSummaryValue" style="height: 50px;">
						<span class="shortTitle_1" style="font-size: 14px; color: #666;">
							{{ chartData[chartSummary['sales_growth_val']]}}	
							<img style="width: 15px; height: 15px;" [src]="'dashboard/assets/images/svg/' + chartData[chartSummary['sales_growth_icon']]" />
							<span>
							</span>							
						</span>
					</div>
					<bb-custom-chart [chartType]= "chartDetailModel['chartType']"
									[data]="[chartData[chartSummary['data_column']]]"
				                    [labels]="[]"
									[options]="chartConfig['options']"
				                    [parentData]="chartData">
				    </bb-custom-chart>
					<div *ngIf = "formatSummaryValue">
						<span class="shortTitle_1" style="font-size: 14px; color: #666;">
							{{formatSummaryValues ( chartData[chartSummary['info_column']], 'MAX_FR_DIG_2' )}}	
						</span>
						<span class="shortTitle_1" style="font-size: 14px; color: #666;">
							{{formatSummaryValues ( chartData[chartSummary['subinfo_column']], 'MAX_FR_DIG_2' )}}	
						</span>
						<span class="shortTitle_1" style="font-size: 14px; color: #666;">
							{{formatSummaryValues ( chartData[chartSummary['datainfo_column']], 'MAX_FR_DIG_2' )}}	
						</span>
						<span class="shortTitle_1" style="font-size: 15px; color: #666;">
							({{chartData[chartSummary['sh_descr']]}})
						</span>
					</div>

					<div *ngIf = "!formatSummaryValue">
						<span class="shortTitle_1">
							{{chartData[chartSummary['info_column']]}}	
						</span>
						<span class="shortTitle_2">
							{{chartData[chartSummary['subinfo_column']]}}
						</span>
						<span class="shortTitle_3">
							({{chartData[chartSummary['sh_descr']]}})							
						</span>
					</div>


				</div>
			</div>
		</div> 
	</ng-template>

    <!-- Added by sainth for polar area -->
	<ng-template #POLAR_AREA>
		<div class="pie-chart-content" >
			<bb-custom-chart [chartType]= "'polarArea'"
				[datasets]= "datasets"
				[labels]="labelsArr"
				[options]="options"
				[parentData]="chartData"
				>
			</bb-custom-chart>
		</div>
	</ng-template>
    <!-- Added by sainth for polar area -->
    <ng-template #CUSTOM_DOUGHNUT_CHART>
			<div class="series_custom-chart-details" style="width : 100%;">
			<div class="series_bb-chart-panel" style="width : 100%;">
				<div class ="series_custom-chart" style="width : 100%;">
					<bb-custom-chart 
					     [chartType]= "'doughnut'"
						 [data]= "dataArr"
						 [labels]="labelsArr"
						 [options]="chartConfig['options']"
						 [colors] = "chartColors"
						 [parentData]="chartParentData">
				    </bb-custom-chart>
				</div>
			</div>
		</div>
	</ng-template>
</div>