You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
mohemm_srca/Mohem/src/app/profile/performance-evaluation/performance-evaluation.comp...

87 lines
2.7 KiB
HTML

<ion-header >
<ion-toolbar class="header-toolbar-new">
<ion-title color="light">{{ts.trPK('userProfile','performance')}}</ion-title>
<ion-buttons slot="start">
<nav-buttons></nav-buttons>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="colorBG">
<div class="header-div">
<!-- <ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
</ion-buttons>
<p class="proTitles">{{ts.trPK('userProfile','performance')}}</p> -->
<div class="profilediv">
<!-- <img class="profileImg" [src]="user_image"> -->
</div>
<!-- <ion-img class="profileImg" [src]="imageSrc"></ion-img> -->
<ion-grid>
<div class="grid">
<ion-row>
<p [ngClass]=" direction == 'ltr' ? 'Text' : 'Text-ar'">{{ts.trPK('userProfile','performance-evaluation')}}</p>
6 years ago
<div [ngClass]=" direction == 'ltr' ? 'gauge' : 'gauge-ar'" >
<!-- [showText]="showText" -->
<ngx-charts-gauge [view]="view" [scheme]="colorScheme" [results]="performanceData" [min]="0" [max]="100"
[angleSpan]="240" [startAngle]="-120" [bigSegments]="5"
[smallSegments]="10" (select)="onSelect($event)">
</ngx-charts-gauge>
</div>
</ion-row>
</div>
<!-- <div>
<div *ngFor="let data of performanceData">
<ion-row class="gridvalue">
<ion-col >
<div class="performancecolor" [style.background]="data.color"></div>
<br>
<label class="label"> Your Performance In </label>
<label class="labelvalue"> {{data.value}} </label>
<label class="label"> {{data.name}} </label>
</ion-col>
</ion-row>
</div>
</div> -->
<!-- class="gridvalue" -->
<!-- ///// -->
<div>
<div *ngIf="performanceData">
<div >
<ion-row >
<ion-col *ngFor="let data of performanceData ;let i = index" [ngClass]="length % 2 != 0 && i == length - 1 ? 'rightgrid' : 'leftgrid'" >
<div class="performancecolor" [style.background]="data.color"></div>
<br>
<label [ngClass]=" direction == 'ltr' ? 'label' : 'label-ar'"> {{ts.trPK('userProfile','your-performance')}} </label>
<label [ngClass]=" direction == 'ltr' ? 'label' : 'label-ar'"> {{data.name}} </label>
<br>
<label [ngClass]=" direction == 'ltr' ? 'labelvalue' : 'labelvalue-ar'"> {{data.value}} </label>
<label [ngClass]=" direction == 'ltr' ? 'percentage' : 'percentage-ar'"> %</label>
</ion-col>
</ion-row>
</div>
</div>
</div>
</ion-grid>
</div>
</ion-content>