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

<% content_for :title, 'Statistics' %>

<div class="w-full my-5">
  <div class="stats stats-vertical lg:stats-horizontal shadow w-full bg-base-200 relative">
    <div class="stat text-center">
      <div class="stat-value text-primary">
        <%= number_with_delimiter(current_user.total_distance.round) %> <%= current_user.safe_settings.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 @points_total %>
      </div>
      <div class="stat-title">Geopoints tracked</div>
    </div>

    <% if DawarichSettings.reverse_geocoding_enabled? %>
      <%= render 'stats/reverse_geocoding_stats' %>
    <% end %>
  </div>

  <div class='text-xs text-gray-500 text-center mt-5'>
    All stats data above except for total distance and number of geopoints tracked is being updated daily
  </div>

  <% if current_user.active? %>
    <%= link_to 'Update stats', update_all_stats_path, data: { turbo_method: :put }, class: 'btn btn-primary mt-5' %>
  <% end %>

  <div class="mt-6 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
    <% @stats.each do |year, stats| %>
      <div class="card w-full bg-base-200 shadow-xl">
        <div class="card-body">
          <h2 class="card-title justify-between text-<%= header_colors.sample %>">
            <div>
              <%= link_to year, "/stats/#{year}", class: 'underline hover:no-underline' %>
              <%= link_to '[Map]', map_url(year_timespan(year)), class: 'underline hover:no-underline' %>
            </div>
            <div class="flex items-center gap-2">
              <span class='text-xs text-gray-500'>Last update: <%= human_date(stats.first.updated_at) %></span>
              <%= link_to icon('refresh-ccw'), update_year_month_stats_path(year, :all), data: { turbo_method: :put }, class: 'text-sm text-gray-500 hover:text-primary' %>
            </div>
          </h2>
          <p>
            <%= number_with_delimiter year_distance_stat(@year_distances[year], current_user).round %> <%= current_user.safe_settings.distance_unit %>
          </p>
          <% if DawarichSettings.reverse_geocoding_enabled? %>
            <div class="card-actions justify-end">
              <% location_data = countries_and_cities_stat_for_year(year, stats) %>
              <%= link_to "#{location_data[:countries_count]} countries, #{location_data[:cities_count]} cities",
                         "##{location_data[:modal_id]}",
                         class: "link link-primary",
                         onclick: "document.getElementById('#{location_data[:modal_id]}').checked = true" %>

              <!-- Modal structure -->
              <div>
                <input type="checkbox" id="<%= location_data[:modal_id] %>" class="modal-toggle" />
                <div class="modal" role="dialog">
                  <div class="modal-box max-w-3xl">
                    <h3 class="text-lg font-bold mb-4">Countries and Cities visited in <%= location_data[:year] %></h3>
                    <div class="max-h-96 overflow-y-auto">
                      <% location_data[:grouped_by_country].each do |country, cities| %>
                        <div class="mb-4">
                          <h4 class="font-bold">
                            <span class="mr-2"><%= country_flag(country) %></span>
                            <%= country %>
                          </h4>
                          <% if cities.any? %>
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 pl-4">
                              <% cities.each do |city| %>
                                <div class="text-sm"><%= city %></div>
                              <% end %>
                            </div>
                          <% else %>
                            <p class="text-sm text-gray-500 italic pl-4">No specific cities recorded</p>
                          <% end %>
                        </div>
                      <% end %>
                    </div>
                  </div>
                  <label class="modal-backdrop" for="<%= location_data[:modal_id] %>"></label>
                </div>
              </div>
            </div>
          <% end %>
          <%= column_chart(
            @year_distances[year].map { |month_name, distance_meters|
              [month_name, Stat.convert_distance(distance_meters, current_user.safe_settings.distance_unit).round]
            },
            height: '200px',
            suffix: " #{current_user.safe_settings.distance_unit}",
            xtitle: 'Days',
            ytitle: 'Distance',
            colors: [
              '#397bb5', '#5A4E9D', '#3B945E',
              '#7BC96F', '#FFD54F', '#FFA94D',
              '#FF6B6B', '#FF8C42', '#C97E4F',
              '#8B4513', '#5A2E2E', '#265d7d'
            ]
          ) %>
        </div>
      </div>
    <% end %>
  </div>
</div>