guido/plays-hub
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add nice statistics

Browse Source
This commit is contained in:
Guido Schweizer
2025-06-21 09:38:22 +02:00
parent 99b0aaa72e
commit e79626972f
43 changed files with 1359 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/views/statistics/_activity_heatmap.html.erb Normal file
View File

@@ -0,0 +1,11 @@
<div style="background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); padding: 2em 2.5em; margin: 2em 0 2.5em 0; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto;">
<h2 style="margin-top:0; font-size: 1.4em; color: #0071e3;">Activity History</h2>
<div id="activity-heatmap" style="margin-top: 1em;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
if (window.ActivityHeatmap) {
ActivityHeatmap.render('activity-heatmap', <%= raw @activity_by_day.to_json %>);
}
});
</script>
</div>

3
app/views/statistics/_placeholder.html.erb Normal file
View File

@@ -0,0 +1,3 @@
<div style="background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); padding: 2em 2.5em; color: #888; display: flex; align-items: center; justify-content: center; min-height: 100px;">
<span>(Placeholder widget)</span>
</div>

72
app/views/statistics/_top_artists.html.erb Normal file
View File

@@ -0,0 +1,72 @@
<div style="background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); padding: 2em 2.5em; min-width: 340px; max-width: 600px; flex: 2 1 340px; display: flex; flex-direction: column; align-items: center; min-height: 340px;">
<h2 style="margin-top:0; font-size: 1.4em; color: #0071e3;">Top 5 Songs</h2>
<div id="artist-tabs" style="display: flex; gap: 0.5em; margin: 1em 0 1.5em 0;">
<button class="artist-tab" data-tab="upcoming" style="background: #e8f0fe; color: #0071e3; border: none; border-radius: 8px; padding: 0.4em 1em; font-weight: 500; cursor: pointer;">Upcoming</button>
<button class="artist-tab" data-tab="year" style="background: #f3f3f3; color: #222; border: none; border-radius: 8px; padding: 0.4em 1em; font-weight: 500; cursor: pointer;">This Year</button>
<button class="artist-tab" data-tab="all" style="background: #f3f3f3; color: #222; border: none; border-radius: 8px; padding: 0.4em 1em; font-weight: 500; cursor: pointer;">All Time</button>
</div>
<div id="artists-all" style="display:none;">
<% if @top_artists_all_time.present? %>
<ol style="padding-left: 1.2em; margin: 0; width: 100%;">
<% @top_artists_all_time.each do |artist, count| %>
<li style="margin-bottom: 0.8em; display: flex; justify-content: space-between; align-items: center;">
<span><%= artist %></span>
<span style="color: #888; font-size: 1em;">Plays: <%= count %></span>
</li>
<% end %>
</ol>
<% else %>
<div style="color: #888;">No data</div>
<% end %>
</div>
<div id="artists-year" style="display:none;">
<% if @top_artists_year.present? %>
<ol style="padding-left: 1.2em; margin: 0; width: 100%;">
<% @top_artists_year.each do |artist, count| %>
<li style="margin-bottom: 0.8em; display: flex; justify-content: space-between; align-items: center;">
<span><%= artist %></span>
<span style="color: #888; font-size: 1em;">Plays: <%= count %></span>
</li>
<% end %>
</ol>
<% else %>
<div style="color: #888;">No data</div>
<% end %>
</div>
<div id="artists-upcoming" style="padding-left: 1.2em; margin: 0; width: 100%;">
<% if @top_artists_upcoming.present? %>
<ol style="padding-left: 1.2em; margin: 0; width: 100%;">
<% @top_artists_upcoming.each do |artist, count| %>
<li style="margin-bottom: 0.8em; display: flex; justify-content: space-between; align-items: center;">
<span><%= artist %></span>
<span style="color: #888; font-size: 1em;">Plays: <%= count %></span>
</li>
<% end %>
</ol>
<% else %>
<div style="color: #888;">No data</div>
<% end %>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const tabs = document.querySelectorAll('.artist-tab');
const views = {
all: document.getElementById('artists-all'),
year: document.getElementById('artists-year'),
upcoming: document.getElementById('artists-upcoming'),
};
tabs.forEach(tab => {
tab.addEventListener('click', function() {
tabs.forEach(t => {
t.style.background = '#f3f3f3';
t.style.color = '#222';
});
this.style.background = '#e8f0fe';
this.style.color = '#0071e3';
Object.keys(views).forEach(k => views[k].style.display = 'none');
views[this.dataset.tab].style.display = '';
});
});
});
</script>
</div>

11
app/views/statistics/_total_plays.html.erb Normal file
View File

@@ -0,0 +1,11 @@
<div style="background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); padding: 2em 2.5em;">
<h2 style="margin-top:0; font-size: 1.4em; color: #0071e3;">Total Plays</h2>
<div style="font-size: 2.5em; font-weight: 700; margin-top: 0.5em; color: #222;">
<%= @total_plays %>
</div>
<% if defined?(@since_date) && @since_date.present? %>
<div style="margin-top: 0.8em; color: #888; font-size: 1em; font-weight: 400;">
since <%= @since_date.strftime('%b %-d, %Y') %>
</div>
<% end %>
</div>

20
app/views/statistics/index.html.erb Normal file
View File

@@ -0,0 +1,20 @@
<main>
<h1>Statistics Dashboard</h1>
<%= javascript_include_tag 'activity_heatmap', 'data-turbo-track': 'reload' %>
<!-- Activity Heatmap (full width) -->
<%= render partial: 'statistics/activity_heatmap', locals: { activity_by_day: @activity_by_day } %>
<!-- Widgets row: Top 5 Artists (left, half), Total Plays + Placeholder (right, stacked) -->
<div style="display: flex; flex-wrap: wrap; gap: 2em; justify-content: center; align-items: flex-start; max-width: 1200px; margin-left: auto; margin-right: auto;">
<!-- Top 5 Artists Widget -->
<%= render partial: 'statistics/top_artists', locals: { top_artists_all_time: @top_artists_all_time, top_artists_year: @top_artists_year, top_artists_upcoming: @top_artists_upcoming } %>
<!-- Right column: Total Plays + Placeholder stacked -->
<div style="display: flex; flex-direction: column; gap: 2em; flex: 1 1 220px; min-width: 220px; max-width: 320px; align-self: flex-start;">
<!-- Total Plays Widget -->
<%= render partial: 'statistics/total_plays', locals: { total_plays: @total_plays } %>
<!-- Placeholder Widget -->
<%= render partial: 'statistics/placeholder' %>
</div>
</div>
</main>