Simple Overall Details
  • 20 Sep 2024
  • 1 Minute to read
  • PDF

Simple Overall Details

  • PDF

Article summary

Overall Score

image.png

Use below snippet to achieve above result:

<div class="card-progress-stat"><div class="card-progress"><ul class="progress-bar-list"><li><div class="progress-title gcf-label">Your Score </div><div class="progress"><div aria-valuemax="10" aria-valuemin="0" class="progress-bar gcf-lightblue" role="progressbar" [attr.aria-valuenow]="dashboard.data['Overall_Score']" [style.width]="dashboard.data['Overall_Score']*10+'%'">{{dashboard.data['Overall_Score']}}/{{dashboard.data['Overall_out_of']}} </div></div></li><li><div class="progress-title gcf-label">Sector Average </div><div class="progress"><div aria-valuemax="10" aria-valuemin="0" class="progress-bar gcf-lightblue" role="progressbar" [attr.aria-valuenow]="dashboard.data['Overall_Sector_Average']" [style.width]="dashboard.data['Overall_Sector_Average']*10+'%'">{{dashboard.data['Overall_Sector_Average']}}/ {{dashboard.data['Overall_out_of']}}  </div></div></li><li><div class="progress-title gcf-label">Regional average </div><div class="progress"><div aria-valuemax="10" aria-valuemin="0" class="progress-bar gcf-lightblue" role="progressbar" [attr.aria-valuenow]="dashboard.data['Overall_Region_Average']" [style.width]="dashboard.data['Overall_Region_Average']*10+'%'">{{dashboard.data['Overall_Region_Average']}}/{{dashboard.data['Overall_out_of']}} </div></div></li><li><div class="progress-title gcf-label">Average all companies </div><div class="progress"><div aria-valuemax="10" aria-valuemin="0" class="progress-bar gcf-lightblue" role="progressbar" [attr.aria-valuenow]="dashboard.data['Overall_Average']" [style.width]="dashboard.data['Overall_Average']*10+'%'"> {{dashboard.data['Overall_Average']}}/{{dashboard.data['Overall_out_of']}} </div></div></li></ul></div><div class="card-stat"><div class="card-stat-wrap gcf-lightblue"><div class="card-stat-row"><h3>{{dashboard.data["Overall_Score"]}} / {{dashboard.data['Overall_out_of']}}</h3><h4>{{dashboard.data["Overall_Score_Roadmap_Stage"]}}</h4></div></div></div></div>
  • above we added placeholders like this ex. dashboard.data{{dashboard.data["Overall_score"]}} here you need to check the your dataset field name is proper or not

Was this article helpful?