educoder/app/views/admins/dashboards/index.html.erb

<% define_admin_breadcrumbs do %>
  <% add_admin_breadcrumb('概览', admins_path) %>
<% end %>

<div class="header bg-gradient-primary pb-8 pt-md-8">
  <div class="container-fluid">
    <div class="header-body">
      <!-- Card stats -->
      <div class="row">
        <div class="col-xl-3 col-lg-6">
          <div class="card card-stats mb-4 mb-xl-0">
            <div class="card-body">
              <div class="row">
                <div class="col">
                  <h5 class="card-title text-uppercase text-muted mb-0">当日活跃用户</h5>
                  <span class="h2 font-weight-bold mb-0"><%= @active_user_count %></span>
                </div>
                <div class="col-auto">
                  <div class="icon icon-shape rounded-circle shadow">
                    <i class="fa fa-users"></i>
                  </div>
                </div>
              </div>
<!--              <p class="mt-3 mb-0 text-muted text-sm">-->
<!--                <span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>-->
<!--                <span class="text-nowrap">Since last month</span>-->
<!--              </p>-->
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-lg-6">
          <div class="card card-stats mb-4 mb-xl-0">
            <div class="card-body">
              <div class="row">
                <div class="col">
                  <h5 class="card-title text-uppercase text-muted mb-0">7天内活跃用户数</h5>
                  <span class="h2 font-weight-bold mb-0"><%= @weekly_active_user_count %></span>
                </div>
                <div class="col-auto">
                  <div class="icon icon-shape rounded-circle shadow">
                    <i class="fa fa-users"></i>
                  </div>
                </div>
              </div>
<!--              <p class="mt-3 mb-0 text-muted text-sm">-->
<!--                <span class="text-danger mr-2"><i class="fas fa-arrow-down"></i> 3.48%</span>-->
<!--                <span class="text-nowrap">Since last week</span>-->
<!--              </p>-->
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-lg-6">
          <div class="card card-stats mb-4 mb-xl-0">
            <div class="card-body">
              <div class="row">
                <div class="col">
                  <h5 class="card-title text-uppercase text-muted mb-0">30天内活跃用户数</h5>
                  <span class="h2 font-weight-bold mb-0"><%= @month_active_user_count %></span>
                </div>
                <div class="col-auto">
                  <div class="icon icon-shape rounded-circle shadow">
                    <i class="fa fa-users"></i>
                  </div>
                </div>
              </div>
<!--              <p class="mt-3 mb-0 text-muted text-sm">-->
<!--                <span class="text-warning mr-2"><i class="fas fa-arrow-down"></i> 1.10%</span>-->
<!--                <span class="text-nowrap">Since yesterday</span>-->
<!--              </p>-->
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-lg-6">
          <div class="card card-stats mb-4 mb-xl-0">
            <div class="card-body">
              <div class="row">
                <div class="col">
                  <h5 class="card-title text-uppercase text-muted mb-0">30天内新增用户数</h5>
                  <span class="h2 font-weight-bold mb-0"><%= @new_user_count %></span>
                </div>
                <div class="col-auto">
                  <div class="icon icon-shape rounded-circle shadow">
                    <i class="fa fa-user-plus"></i>
                  </div>
                </div>
              </div>
<!--              <p class="mt-3 mb-0 text-muted text-sm">-->
<!--                <span class="text-success mr-2"><i class="fas fa-arrow-up"></i> 12%</span>-->
<!--                <span class="text-nowrap">Since last month</span>-->
<!--              </p>-->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid mt--7 pie-statistic">
  <div class="row mt-5">
    <div class="col-xl-8 mb-5 mb-xl-0">
      <div class="card shadow">
<!--        <div class="card-header border-0">-->
<!--          <div class="row align-items-center">-->
<!--            <h5 class="mb-0">近7天评测次数</h5>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="table-responsive">-->
<!--          <div id="evaluate-pie" class="pie"></div>-->
<!--        </div>-->
      </div>
    </div>

    <div class="col-xl-4">
      <div class="card shadow">
        <div class="card-header border-0">
          <div class="row align-items-center">
            <h5 class="mb-0">30天内新增用户</h5>
          </div>
        </div>
        <div class="table-responsive">
          <div id="month-active-user" class="pie"></div>
        </div>
      </div>
    </div>
  </div>
</div>


<!--<div class="container-fluid mt--7">-->
<!--  <div class="row mt-5">-->
<!--    <div class="col-xl-8 mb-5 mb-xl-0">-->
<!--      <div class="card shadow">-->
<!--        <div class="card-header border-0">-->
<!--          <div class="row align-items-center">-->
<!--            <div class="col">-->
<!--              <h3 class="mb-0">Page visits</h3>-->
<!--            </div>-->
<!--            <div class="col text-right">-->
<!--              <a href="#!" class="btn btn-sm btn-primary">Test</a>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="table-responsive">-->
<!--          <table class="table align-items-center table-flush">-->
<!--            <thead class="thead-light">-->
<!--            <tr>-->
<!--              <th scope="col">Test</th>-->
<!--              <th scope="col">Test</th>-->
<!--              <th scope="col">Test</th>-->
<!--              <th scope="col">Test</th>-->
<!--            </tr>-->
<!--            </thead>-->
<!--            <tbody>-->
              <%# 5.times do %>
<!--                <tr>-->
<!--                  <th scope="row">/test/</th>-->
<!--                  <td>4,569</td>-->
<!--                  <td>340</td>-->
<!--                  <td>-->
<!--                    <i class="fas fa-arrow-up text-success mr-3"></i> 46,53%-->
<!--                  </td>-->
<!--                </tr>-->
              <%# end %>
<!--            </tbody>-->
<!--          </table>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="col-xl-4">-->
<!--      <div class="card shadow">-->
<!--        <div class="card-header border-0">-->
<!--          <div class="row align-items-center">-->
<!--            <div class="col">-->
<!--              <h3 class="mb-0">Test</h3>-->
<!--            </div>-->
<!--            <div class="col text-right">-->
<!--              <a href="#!" class="btn btn-sm btn-primary">Test</a>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="table-responsive">-->
<!--          <table class="table align-items-center table-flush">-->
<!--            <thead class="thead-light">-->
<!--            <tr>-->
<!--              <th scope="col">Test</th>-->
<!--              <th scope="col">Test</th>-->
<!--              <th scope="col"></th>-->
<!--            </tr>-->
<!--            </thead>-->
<!--            <tbody>-->
              <%# 5.times do %>
<!--                <tr>-->
<!--                  <th scope="row">-->
<!--                    Test-->
<!--                  </th>-->
<!--                  <td>-->
<!--                    1,480-->
<!--                  </td>-->
<!--                  <td>-->
<!--                    <div class="d-flex align-items-center">-->
<!--                      <span class="mr-2">60%</span>-->
<!--                      <div>-->
<!--                        <div class="progress">-->
<!--                          <div class="progress-bar bg-gradient-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                  </td>-->
<!--                </tr>-->
              <%# end %>
<!--            </tbody>-->
<!--          </table>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</div>-->