activeadmin dashboard with table rows count graph

dashboard.rb

ActiveAdmin.register_page "Dashboard" do

  menu :priority => 1, :label => proc{ I18n.t("active_admin.dashboard") }

  content :title => proc{ I18n.t("active_admin.dashboard") } do
    #    div :class => "blank_slate_container", :id => "dashboard_default_message" do
    #      span :class => "blank_slate" do
    #        span "Welcome to Active Admin. This is the default dashboard page."
    #        small "To add dashboard sections, checkout 'app/admin/dashboards.rb'"
    #      end
    #    end
    
    columns do
      column do

        records = ActiveRecord::Base.connection.execute(" 
          SELECT TABLE_NAME, TABLE_ROWS 
          FROM INFORMATION_SCHEMA.TABLES 
          WHERE TABLE_SCHEMA = '#{Rails.configuration.database_configuration[Rails.env]['database']}' 
          order by TABLE_ROWS DESC;")

        all_models_count = records.collect{ |row| [row[0], row[1].to_i]}
        
        max = all_models_count.first[1].to_f
        percent = 100.00/max

        panel "Database Records" do
          recs = ''
          all_models_count.each do |model_name, count|
            bar_size = percent*count
            bar_size = 2 if bar_size < 2 and bar_size > 0
            
            recs << "<div width='100px'>"
            recs << link_to("#{model_name.tableize} - #{count}", "/admin/#{model_name.tableize}") rescue nil
            recs << "<div class=\"progress progress-info\">"
            recs << "<div class=\"bar\" style=\"width: #{bar_size}%\">"
            recs << "</div>"
            recs << "</div>"
            recs << "</div>"
          end
          recs.html_safe
        end
      end

      column do
        panel "Info" do
          para "Welcome to ActiveAdmin."
        end 

      end
    end
  end
end

# and adding following to the css

#body.active_admin .progress{
#  -webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 2px 0px inset;
#  background-color: #F7F7F7;
#  background-image: -webkit-linear-gradient(top, whiteSmoke, #F9F9F9);
#  background-repeat: repeat-x;
#  border-bottom-left-radius: 4px;
#  border-bottom-right-radius: 4px;
#  border-top-left-radius: 4px;
#  border-top-right-radius: 4px;
#  box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 2px 0px inset;
#  color: #333;
#  display: block;
#  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
#  font-size: 14px;
#  height: 10px;
#  line-height: 20px;
#  margin-bottom: 9px;
#  margin-left: 0px;
#  margin-right: 0px;
#  margin-top: 0px;
#  overflow-x: hidden;
#  overflow-y: hidden;
#  width: 100%;
#}
#
#body.active_admin .progress .bar{
#  -webkit-box-shadow: rgba(0, 0, 0, 0.14902) 0px -1px 0px 0px inset;
#  -webkit-transition-delay: 0s;
#  -webkit-transition-duration: 0.6000000238418579s;
#  -webkit-transition-property: width;
#  -webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
#  background-color: #4BB1CF;
#  background-image: -webkit-linear-gradient(top, #5BC0DE, #339BB9);
#  background-repeat: repeat-x;
#  box-shadow: rgba(0, 0, 0, 0.14902) 0px -1px 0px 0px inset;
#  box-sizing: border-box;
#  color: white;
#  display: block;
#  float: left;
#  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
#  font-size: 12px;
#  height: 20px;
#  line-height: 20px;
#  margin-bottom: 0px;
#  margin-left: 0px;
#  margin-right: 0px;
#  margin-top: 0px;
#  text-align: center;
#  text-shadow: rgba(0, 0, 0, 0.247059) 0px -1px 0px;
#}
#