Update stats page

app/controllers/stats_controller.rb

@@ -21,7 +21,7 @@ class StatsController < ApplicationController
     @month = params[:month].to_i
     @stat = current_user.stats.find_by(year: @year, month: @month)
     @previous_stat = current_user.stats.find_by(year: @year, month: @month - 1) if @month > 1
-    @average_distance = current_user.stats.average(:distance) / 1000
+    @average_distance_this_year = current_user.stats.where(year: @year).average(:distance) / 1000
   end
 
   def update

app/helpers/stats_helper.rb

@@ -14,14 +14,14 @@ module StatsHelper
     "#{number_with_delimiter(value)} #{distance_unit}"
   end
 
-  def x_than_average_distance(stat, average_distance)
-    return '' if average_distance.zero?
+  def x_than_average_distance(stat, average_distance_this_year)
+    return '' if average_distance_this_year.zero?
 
-    difference = stat.distance / 1000 - average_distance
-    percentage = ((difference / average_distance) * 100).round
+    difference = stat.distance / 1000 - average_distance_this_year
+    percentage = ((difference / average_distance_this_year) * 100).round
 
-    sign = difference.positive? ? '+' : '-'
-    "#{sign} #{difference.abs.round} (#{percentage.abs}% of your average (#{average_distance.round} km))"
+    more_or_less = difference.positive? ? 'more' : 'less'
+    "#{percentage.abs}% #{more_or_less} than your average this year"
   end
 
   def x_than_previous_active_days(stat, previous_stat)
@@ -118,4 +118,13 @@ module StatsHelper
 
     "#{start_str} - #{end_str}"
   end
+
+  def month_icon(stat)
+    case stat.month
+    when 1..2, 12 then 'snowflake'
+    when 3..5 then 'flower'
+    when 6..8 then 'tree-palm'
+    when 9..11 then 'leaf'
+    end
+  end
 end

app/javascript/controllers/sharing_modal_controller.js

@@ -128,5 +128,4 @@ export default class extends Controller {
       toast.remove()
     }, 3000)
   }
-
-}
+}

app/javascript/controllers/stat_page_controller.js

@@ -37,9 +37,9 @@ export default class extends Controller {
     try {
       // Initialize Leaflet map
       this.map = L.map(this.mapTarget, {
-        zoomControl: false,
+        zoomControl: true,
         scrollWheelZoom: true,
-        doubleClickZoom: false,
+        doubleClickZoom: true,
         boxZoom: false,
         keyboard: false,
         dragging: true,
@@ -54,7 +54,7 @@ export default class extends Controller {
 
       // Add small scale control
       L.control.scale({
-        position: 'bottomleft',
+        position: 'bottomright',
         maxWidth: 100,
         imperial: true,
         metric: true

app/views/stats/_month.html.erb

@@ -2,7 +2,9 @@
 <div class="hero bg-gradient-to-r from-primary to-secondary text-primary-content rounded-lg shadow-lg mb-8">
   <div class="hero-content text-center relative w-full">
     <div class="max-w-md mt-5">
-      <h1 class="text-4xl font-bold">📍 <%= Date::MONTHNAMES[month] %> <%= year %></h1>
+      <h1 class="text-4xl font-bold flex items-center justify-center gap-2">
+        <%= "#{icon month_icon(stat)} #{Date::MONTHNAMES[month]} #{year}".html_safe %>
+      </h1>
       <p class="py-4">Monthly Digest</p>
       <button class="btn btn-outline btn-sm text-neutral border-neutral hover:bg-white hover:text-primary"
               onclick="sharing_modal.showModal()">
@@ -17,8 +19,8 @@
     <div class="stat-title flex items-center justify-center gap-1">
       <%= icon 'map-plus' %> Distance traveled
     </div>
-    <div class="stat-value text-success"><%= distance_traveled(current_user, stat) %></div>
-    <div class="stat-desc"><%= x_than_average_distance(stat, @average_distance) %></div>
+    <div class="stat-value text-success">~<%= distance_traveled(current_user, stat) %></div>
+    <div class="stat-desc"><%= x_than_average_distance(stat, @average_distance_this_year) %></div>
   </div>
 
   <div class="stat place-items-center text-center">
@@ -79,7 +81,7 @@
     </div>
 
     <!-- Map Stats -->
-    <div class="stats grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
+    <!--div class="stats grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
       <div class="stat">
         <div class="stat-title text-xs">Most visited</div>
         <div class="stat-value text-sm">Downtown Area</div>
@@ -100,7 +102,7 @@
         <div class="stat-value text-sm">45km²</div>
         <div class="stat-desc text-xs">explored</div>
       </div>
-    </div>
+    </div-->
   </div>
 </div>