opensourcecode/Hyper-M_UserPortal/src/app/common/dashboard-dse-details/dashboard-dse-details.component.html

<app-dashboard-popup></app-dashboard-popup>
<div class="bottom_content">
  <div class="row align-items-center">
    <div class="col point"   >
        <h6 class="title" (click)="showDetails(1)">SALES</h6>
      <div class="box_left" *ngIf="user_dashboard!=undefined" (click)="showDetails(1)">
        <circle-progress
          [percent]="percentage"
          [radius]="60"
          [space]="-10" 
          [outerStrokeWidth]="10" 
          [outerStrokeColor]="'#00AFD7'"
          [innerStrokeColor]="'#e7e8ea'"
          [innerStrokeWidth]="10"
          [title]="title"
          [showSubtitle]="false"
          [animateTitle]="false"
          [animationDuration]="1500"
          [showUnits]="false"
          [showBackground]="false" 
        ></circle-progress>
          
        <!-- <div class="timer" *ngIf="user_dashboard!=undefined"> {{user_dashboard.sales.achieved}}</div> -->
        <div class="load_content" (click)="showDetails(1)">
          <h6>MY SALES PERFORMANCE</h6>
          <p *ngIf="user_dashboard!=undefined">{{user_dashboard.sales.achieved}} / {{user_dashboard.sales.target}} TARGETED SALES</p>
        </div>
      </div>
      <div class="box_right">
        <img src="assets/img/up_arrow.svg " (click)="decreasMonth()" />
        <p>{{sales_date}}</p>
        <img src="assets/img/down_arrow.svg"  [ngClass]="sales_date!=date_now?'':'disable_arrow'" (click)="increasMonth()" />
      </div>
    </div>
    <div class="col point" (click)="showDetails(2)" *ngIf="user_dashboard!=undefined">
      <h6 class="title">MY LEARNING PATH</h6>
      <div class="path">
        <div class="pointer" [ngClass]="{'fullred': user_dashboard.learning.basic==2,'orange':user_dashboard.learning.basic==3, 'grey':user_dashboard.learning.basic==0 || user_dashboard.learning.basic==7 || user_dashboard.learning.basic==4 || user_dashboard.learning.basic==1 || user_dashboard.learning.basic==6}">
          <div class="poly">
            <p class="types">B</p>
            <svg>
              <!-- <polygon points="50,10 75,25 75,50 50,65 25,50 25,25 " style="fill:rgba(255, 0, 0, 0);stroke:#ccc;stroke-width:2;" /> -->
              <polygon points="25,0 50,15 50,35 25,50 0,35 0,15" style="fill:rgba(255, 0, 0, 0);stroke:#ccc;stroke-width:2;" />
            </svg>
          </div>
        </div>

        <div class="pointer" [ngClass]="{'fullred':  user_dashboard.learning.bronze==2, 'orange':user_dashboard.learning.bronze==3, 'grey':user_dashboard.learning.bronze==0 || user_dashboard.learning.bronze==7 || user_dashboard.learning.bronze==1 || user_dashboard.learning.bronze==4 || user_dashboard.learning.bronze==6 }">
            <div class="poly">
              <p class="types">B</p>
              <svg>
                <!-- <polygon points="50,10 75,25 75,50 50,65 25,50 25,25 " style="fill:rgba(255, 0, 0, 0);stroke:#ccc;stroke-width:2;" /> -->
                <polygon points="25,0 50,15 50,35 25,50 0,35 0,15" style="fill:rgba(255, 0, 0, 0);stroke:#ccc;stroke-width:2;" />
              </svg>
            </div>
          </div>

          <div class="pointer" [ngClass]="{'grey' : user_dashboard.learning.silver==0 || user_dashboard.learning.silver==1,'greenred': user_dashboard.learning.silver==2, 'orange':user_dashboard.learning.silver==3,'redgrey':user_dashboard.learning.silver==6,'greengrey': user_dashboard.learning.silver==7 || user_dashboard.learning.silver==4}">
            <div class="poly">
              <p class="types">S</p>
              <svg>
                <!-- <polygon points="50,10 75,25 75,50 50,65 25,50 25,25 " style="fill:rgba(255, 0, 0, 0);stroke:#ccc;stroke-width:2;" /> -->
                <polygon points="25,0 50,15 50,35 25,50 0,35 0,15" style="fill:rgba(255, 0, 0, 0);stroke:#ccc;stroke-width:2;" />
              </svg>
            </div>
          </div>
          
          <div class="pointer" [ngClass]="{'grey' : user_dashboard.learning.gold==0 || user_dashboard.learning.gold==1,'greenred': user_dashboard.learning.gold==2, 'orange':user_dashboard.learning.gold==3,'redgrey':user_dashboard.learning.gold==6,'greengrey': user_dashboard.learning.gold==7 || user_dashboard.learning.gold==4}">
            <div class="poly">
              <p class="types">G</p>
              <svg>
                <!-- <polygon points="50,10 75,25 75,50 50,65 25,50 25,25 " style="fill:rgba(255, 0, 0, 0);stroke:#ccc;stroke-width:2;" /> -->
                <polygon points="25,0 50,15 50,35 25,50 0,35 0,15" style="fill:rgba(255, 0, 0, 0);stroke:#ccc;stroke-width:2;" />
              </svg>
            </div>
          </div>
          <div class="type_name">
            <p>BASE</p>
            <p>BRONZE</p>
            <p>SILVER</p>
            <p>GOLD</p>
          </div>
      </div>
    </div>
    <div class="col learning"   (click)="showDetails(3)" style="cursor:pointer"> 
        <h6 class="title">MY REWARD POINTS</h6>
      <div class="box_left">
        <div class="load_content">
          <h1  *ngIf="user_dashboard!=undefined">{{user_dashboard.earning}}<span> POINTS</span></h1>
          <h6 > Minimum {{min_point}} points required for redemption</h6>
        </div>
      </div>
      <div class="box_right">
        <img src="assets/img/rewards.png " />
      </div>
    </div>
  </div>
</div>