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.
87 lines
2.7 KiB
HTML
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>
|
|
|
|
<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> |