
<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>