Rails draw progress bar instead of integer value

Question

I'm now using ActiveAdmin as the admin panel for Rails website. On index page of Teams, it shows team's score as integer.

Instead of showing the integer, is there any way to show the static progress bar, scale of 100?

Sorry for my poor english. Thanks for your help.

Answer 1

Just need to add static integer and it will dynamically show your progress bar.

You need to customized a bit something like like this, also loop it

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">"#{score}"</span>
  </div>
</div>

Bootstrap provides several types of progress bars

https://v4-alpha.getbootstrap.com/components/progress/

basic progress bar

You can check this out for more customized : http://jasontruluck.org/blog/bootstrap/refile/images/ui/2015/04/07/Adding-Bootstrap-Progress-Bars-for-Refile.html

Answer 2

I've solved it. So here is what I did :

Include bootstrap gem in my Gemfile

gem 'bootstrap', '~> 4.0.0.alpha6'

Restart the server and then import bootstrap to /app/assets/active_admin.scss

@import "bootstrap";

Now you can add progress bar or other components to any page of ActiveAdmin. For example for dashboard page, add the following code to the /app/admin/dashboard.rb

render html: "<div class='progress'><div class='progress-bar' role='progressbar' style='width: 25%;' aria-valuenow='25' aria-valuemax='100' aria-valuemin='0'>25%</div></div>".html_safe