mirror of
https://github.com/Freika/dawarich.git
synced 2026-01-11 17:51:39 -05:00
Make year page more colorful and add month page
This commit is contained in:
Eugene Burmakin
parent
e8c5b3dfdc
commit
d3bbd08890
6 changed files with 61 additions and 125 deletions
File diff suppressed because one or more lines are too long
|
|
@ -127,4 +127,21 @@ module StatsHelper
|
|||
when 9..11 then 'leaf'
|
||||
end
|
||||
end
|
||||
|
||||
def month_color(stat)
|
||||
case stat.month
|
||||
when 1 then '#397bb5'
|
||||
when 2 then '#5A4E9D'
|
||||
when 3 then '#3B945E'
|
||||
when 4 then '#7BC96F'
|
||||
when 5 then '#FFD54F'
|
||||
when 6 then '#FFA94D'
|
||||
when 7 then '#FF6B6B'
|
||||
when 8 then '#FF8C42'
|
||||
when 9 then '#C97E4F'
|
||||
when 10 then '#8B4513'
|
||||
when 11 then '#5A2E2E'
|
||||
when 12 then '#265d7d'
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -127,7 +127,9 @@
|
|||
<span class="indicator-item badge badge-secondary badge-xs"></span>
|
||||
<% end %>
|
||||
<% if current_user.admin? %>
|
||||
<span class='tooltip tooltip-bottom' data-tip="You're an admin, Harry!">⭐️</span>
|
||||
<span class='tooltip tooltip-bottom' data-tip="You're an admin, Harry!">
|
||||
<%= icon 'star' %>
|
||||
</span>
|
||||
<% end %>
|
||||
</summary>
|
||||
<ul class="p-2 bg-base-100 rounded-t-none z-10">
|
||||
|
|
|
|||
|
|
@ -1,121 +1,32 @@
|
|||
<div class="card bg-base-100 shadow-lg hover:shadow-xl transition-shadow duration-300 border border-base-300">
|
||||
<div class="card-body p-6">
|
||||
<!-- Header with Title and Details Link -->
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="avatar placeholder">
|
||||
<div class="bg-primary text-primary-content rounded-full w-12 h-12">
|
||||
<span class="text-sm font-bold"><%= stat.month %></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="card-title text-xl font-bold">
|
||||
<%= link_to "#{Date::MONTHNAMES[stat.month]} #{stat.year}",
|
||||
"#{stat.year}/#{stat.month}",
|
||||
class: "hover:text-primary transition-colors" %>
|
||||
</h3>
|
||||
<div class="text-base-content opacity-60 text-sm">Monthly Statistics</div>
|
||||
</div>
|
||||
</div>
|
||||
<%= link_to "#{stat.year}/#{stat.month}",
|
||||
class: "group block p-6 bg-base-100 hover:bg-base-200/50 rounded-xl border border-base-300 hover:border-primary/40 hover:shadow-lg transition-all duration-200 hover:scale-[1.02]" do %>
|
||||
|
||||
<div class="dropdown dropdown-end">
|
||||
<div tabindex="0" role="button" class="btn btn-ghost btn-sm">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 stroke-current">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
|
||||
<li>
|
||||
<%= link_to points_path(year: stat.year, month: stat.month) do %>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 stroke-current">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
View Details
|
||||
<% end %>
|
||||
</li>
|
||||
<li>
|
||||
<%= link_to "stats/#{stat.year}/#{stat.month}" do %>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 stroke-current">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
|
||||
</svg>
|
||||
Monthly Digest
|
||||
<% end %>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Distance Stats -->
|
||||
<div class="stats stats-vertical lg:stats-horizontal shadow-inner bg-base-200 mb-6">
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-primary">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-title">Total Distance</div>
|
||||
<div class="stat-value text-primary text-2xl">
|
||||
<%= number_with_delimiter stat.distance_in_unit(current_user.safe_settings.distance_unit).round %>
|
||||
</div>
|
||||
<div class="stat-desc font-semibold text-primary">
|
||||
<%= current_user.safe_settings.distance_unit %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Countries and Cities Info -->
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center space-x-2 mb-3">
|
||||
<div class="badge badge-outline badge-primary">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 stroke-current mr-1">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
Locations
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-sm leading-relaxed bg-base-200 p-3 rounded-lg">
|
||||
<%= countries_and_cities_stat_for_month(stat) %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Daily Distance Chart -->
|
||||
<div class="mb-2">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h4 class="text-lg font-semibold flex items-center space-x-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-5 h-5 stroke-current text-secondary">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
|
||||
</svg>
|
||||
<span>Daily Activity</span>
|
||||
</h4>
|
||||
<div class="text-xs text-base-content opacity-60 font-medium">
|
||||
<%= current_user.safe_settings.distance_unit %> per day
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-base-200 p-3 rounded-lg">
|
||||
<%= area_chart(
|
||||
stat.daily_distance.map { |day, distance_meters|
|
||||
[day, Stat.convert_distance(distance_meters, current_user.safe_settings.distance_unit).round]
|
||||
},
|
||||
height: '200px',
|
||||
suffix: " #{current_user.safe_settings.distance_unit}",
|
||||
xtitle: 'Day',
|
||||
ytitle: 'Distance',
|
||||
colors: ['#570df8'],
|
||||
library: {
|
||||
plugins: {
|
||||
legend: { display: false }
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: { color: 'rgba(0,0,0,0.1)' }
|
||||
},
|
||||
y: {
|
||||
grid: { color: 'rgba(0,0,0,0.1)' }
|
||||
}
|
||||
}
|
||||
}
|
||||
) %>
|
||||
</div>
|
||||
<!-- Month and Year -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-lg font-medium text-base-content group-hover:text-primary transition-colors flex items-center gap-2" style="color: <%= month_color(stat) %>;">
|
||||
<%= "#{icon month_icon(stat)} #{Date::MONTHNAMES[stat.month]} #{stat.year}".html_safe %>
|
||||
</h3>
|
||||
<div class="opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Stats -->
|
||||
<div class="space-y-3">
|
||||
<!-- Distance -->
|
||||
<div>
|
||||
<div class="text-2xl font-semibold text-base-content" style="color: <%= month_color(stat) %>;">
|
||||
<%= number_with_delimiter stat.distance_in_unit(current_user.safe_settings.distance_unit).round %>
|
||||
<span class="text-sm font-normal text-base-content/60 ml-1"><%= current_user.safe_settings.distance_unit %></span>
|
||||
</div>
|
||||
<div class="text-sm text-base-content/60">Total distance</div>
|
||||
</div>
|
||||
|
||||
<!-- Location Summary -->
|
||||
<div class="text-sm text-gray-600">
|
||||
<%= countries_and_cities_stat_for_month(stat) %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -12,10 +12,10 @@
|
|||
xtitle: 'Days',
|
||||
ytitle: 'Distance',
|
||||
colors: [
|
||||
'#1C3D5A', '#5A4E9D', '#3B945E',
|
||||
'#397bb5', '#5A4E9D', '#3B945E',
|
||||
'#7BC96F', '#FFD54F', '#FFA94D',
|
||||
'#FF6B6B', '#FF8C42', '#C97E4F',
|
||||
'#8B4513', '#5A2E2E', '#153243'
|
||||
'#8B4513', '#5A2E2E', '#265d7d'
|
||||
]
|
||||
) %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -90,7 +90,13 @@
|
|||
height: '200px',
|
||||
suffix: " #{current_user.safe_settings.distance_unit}",
|
||||
xtitle: 'Days',
|
||||
ytitle: 'Distance'
|
||||
ytitle: 'Distance',
|
||||
colors: [
|
||||
'#397bb5', '#5A4E9D', '#3B945E',
|
||||
'#7BC96F', '#FFD54F', '#FFA94D',
|
||||
'#FF6B6B', '#FF8C42', '#C97E4F',
|
||||
'#8B4513', '#5A2E2E', '#265d7d'
|
||||
]
|
||||
) %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue