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

<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_km) %> km
      </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.points.without_raw_data.count(:id) %>
      </div>
      <div class="stat-title">Geopoints tracked</div>
    </div>

    <% if REVERSE_GEOCODING_ENABLED %>
      <div class="stat text-center">
        <div class="stat-value text-secondary">
          <%= number_with_delimiter current_user.total_reverse_geocoded %>
        </div>
        <div class="stat-title">Reverse geocoded points</div>
      </div>

      <div class="stat text-center">
        <div class="stat-value text-warning underline hover:no-underline  hover:cursor-pointer" onclick="countries_visited.showModal()">
          <%= number_with_delimiter current_user.total_countries %>
        </div>
        <div class="stat-title">Countries visited</div>

        <dialog id="countries_visited" class="modal">
          <div class="modal-box">
            <h3 class="font-bold text-lg">Countries visited</h3>
            <p class="py-4">
              <% current_user.countries_visited.each do |country| %>
                <p><%= country %></p>
              <% end %>
            </p>
          </div>
          <form method="dialog" class="modal-backdrop">
            <button>close</button>
          </form>
        </dialog>
      </div>

      <div class="stat text-center">
        <div class="stat-value hover:cursor-pointer hover:no-underline underline" onclick="cities_visited.showModal()">
          <%= current_user.total_cities %>
        </div>
        <div class="stat-title">Cities visited</div>
                <dialog id="cities_visited" class="modal">
          <div class="modal-box">
            <h3 class="font-bold text-lg">Cities visited</h3>
            <p class="py-4">
              <% current_user.cities_visited.each do |city| %>
                <p><%= city %></p>
              <% end %>
            </p>
          </div>
          <form method="dialog" class="modal-backdrop">
            <button>close</button>
          </form>
        </dialog>
      </div>
    <% 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_in_km', year], skip_digest: true do %>
              <%= number_with_delimiter year_distance_stat_in_km(year) %>km
              <% end %>
          </p>
          <% if REVERSE_GEOCODING_ENABLED %>
            <div class="card-actions justify-end">
              <% cache [current_user, 'countries_and_cities_stat', year], skip_digest: true do %>
                <%= countries_and_cities_stat(year, current_user) %>
              <% end %>
            </div>
          <% end %>
          <%= column_chart(
            Stat.year_distance(year),
            height: '200px',
            suffix: ' km',
            xtitle: 'Days',
            ytitle: 'Distance'
          ) %>
        </div>
      </div>
    <% end %>
  </div>
</div>