dawarich/app/views/stats/index.html.erb

<% content_for :title, 'Statistics' %>

<div class="w-full">
  <div class="stats stats-vertical lg:stats-horizontal shadow w-full bg-base-200">
    <div class="stat text-center">
      <div class="stat-value text-primary">
        <%= number_with_delimiter(current_user.total_distance) %> <%= DISTANCE_UNIT %>
      </div>
      <div class="stat-title">Total distance</div>
    </div>

    <div class="stat text-center">
      <div class="stat-value text-success">
        <%= number_with_delimiter current_user.tracked_points.count %>
      </div>
      <div class="stat-title">Geopoints tracked</div>
    </div>

    <% if REVERSE_GEOCODING_ENABLED %>
      <%= render 'stats/reverse_geocoding_stats' %>
    <% end %>
  </div>

  <%= link_to 'Update stats', stats_path, data: { 'turbo-method' => :post }, class: 'btn btn-primary mt-5' %>

  <div class="mt-5 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6 p-4">
    <% @stats.each do |year, stats| %>
      <div class="card w-full bg-base-200 shadow-xl">
        <div class="card-body">
          <h2 class="card-title text-<%= header_colors.sample %>">
            <%= link_to year, "/stats/#{year}", class: 'underline hover:no-underline' %>
            <%= link_to '[Map]', map_url(year_timespan(year)), class: 'underline hover:no-underline' %>
          </h2>
          <p>
            <% cache [current_user, 'year_distance_stat', year], skip_digest: true do %>
              <%= number_with_delimiter year_distance_stat(year, current_user) %><%= DISTANCE_UNIT %>
            <% end %>
          </p>
          <% if REVERSE_GEOCODING_ENABLED %>
            <div class="card-actions justify-end">
              <%= countries_and_cities_stat_for_year(year, stats) %>
            </div>
          <% end %>
          <%= column_chart(
            Stat.year_distance(year, current_user),
            height: '200px',
            suffix: " #{DISTANCE_UNIT}",
            xtitle: 'Days',
            ytitle: 'Distance'
          ) %>
        </div>
      </div>
    <% end %>
  </div>
</div>