
<ng-container *ngTemplateOutlet="totalData === 0 ? noData : accountGraph "></ng-container>

<ng-template #noData>
	<div  class="account-activity-nodata">
		<div class="account-activity-nodata-span">No data found</div>
	</div>
</ng-template>
<ng-template #accountGraph>
	<div id="charts">
	    <div id="chart1" class="chartdiv"  [style.width.%]="100" [style.height.px]="500"></div>  
	    <div id="chart2" class="chartdiv"  [style.width.%]="100" [style.height.px]="500"></div>  
	    <div class="app">
			<span class="acc-act-dot" [style.background-color]="colors.BROWSER"></span>
			<span class="data">Browser {{DATA_PERC.BROWSER.TOTAL}}%</span>
			<span class="acc-act-dot" [style.background-color]="colors.MOBILE"></span>
			<span class="data">Mobile {{DATA_PERC.MOBILE.TOTAL}}%</span>
		</div>
		 <div class="device">
			<span class="acc-act-dot" [style.background-color]="colors.CHROME"></span><span class="data">Chrome</span>
			<span class="acc-act-dot" [style.background-color]="colors.MOZILLA"></span><span class="data">Mozilla</span>
			<span class="acc-act-dot" [style.background-color]="colors.INTEXP"></span><span class="data">Internet Explorer</span>
			<span class="acc-act-dot" [style.background-color]="colors.ANDROID"></span><span class="data">Android</span>
			<span class="acc-act-dot" [style.background-color]="colors.IOS"></span><span class="data">IOS</span>
			<span class="acc-act-dot" [style.background-color]="colors.OTHER"></span><span class="data">Other</span>
		</div>
	</div>
<!-- <div id="lengend2" ></div>  -->
<!-- <div id="lengend1" ></div>   -->


</ng-template>

<!--
<bb-battery [current]='batteryPerc' [size]="'small'" [min]='15' [mid]='65'></bb-battery>
<bb-battery [current]='batteryPerc' [size]="'medium'" [min]='15' [mid]='65'></bb-battery>
<bb-battery [current]='batteryPerc' [min]='15' [mid]='65'></bb-battery>

<input type="number" min="0" max="100" [(ngModel)]="batteryPerc" />
-->