cloud/music_library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move charts to the bottom of the stats page

Browse Source 
They change VERY slowly so there's no point in having them prominent.
This commit is contained in:
Claudio Ortolina
2025-06-14 10:50:55 +03:00
parent 945dc91887
commit fee172666a
1 changed files with 44 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/live/stats_live/index.html.heex
+44 -44
View File
@@ -68,50 +68,6 @@
</dl> </dl>
</div> </div>
<div class="mt-5 grid grid-cols-1 lg:grid-cols-2 gap-5">
<div>
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
{gettext("Top %{n} Artists", %{n: length(@records_by_artist)})}
</h1>
<div class="mt-5 bg-white dark:bg-zinc-800 rounded-md shadow-sm">
<.vertical_bar_chart
data={@records_by_artist}
width={600}
height={35 * length(@records_by_artist)}
color_class="fill-red-500"
label_fn={fn datum -> datum.name end}
value_fn={fn datum -> datum.count end}
label_click={
fn datum ->
JS.navigate(~p"/artists/#{datum.id}")
end
}
class="w-full"
/>
</div>
</div>
<div>
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
{gettext("Top %{n} Genres", %{n: length(@records_by_genre)})}
</h1>
<div class="mt-5 bg-white dark:bg-zinc-800 rounded-md shadow-sm">
<.vertical_bar_chart
data={@records_by_genre}
width={600}
height={35 * length(@records_by_genre)}
color_class="fill-zinc-500"
label_fn={fn {genre, _count} -> genre end}
value_fn={fn {_genre, count} -> count end}
label_click={
fn {genre, _count} -> JS.navigate(~p"/collection?#{%{query: ~s(genre:"#{genre}")}}") end
}
class="w-full"
/>
</div>
</div>
</div>
<div> <div>
<h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold"> <h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
{gettext("Top Albums")} {gettext("Top Albums")}
@@ -371,3 +327,47 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="mt-5 grid grid-cols-1 lg:grid-cols-2 gap-5">
<div>
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
{gettext("Top %{n} Artists", %{n: length(@records_by_artist)})}
</h1>
<div class="mt-5 bg-white dark:bg-zinc-800 rounded-md shadow-sm">
<.vertical_bar_chart
data={@records_by_artist}
width={600}
height={35 * length(@records_by_artist)}
color_class="fill-red-500"
label_fn={fn datum -> datum.name end}
value_fn={fn datum -> datum.count end}
label_click={
fn datum ->
JS.navigate(~p"/artists/#{datum.id}")
end
}
class="w-full"
/>
</div>
</div>
<div>
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
{gettext("Top %{n} Genres", %{n: length(@records_by_genre)})}
</h1>
<div class="mt-5 bg-white dark:bg-zinc-800 rounded-md shadow-sm">
<.vertical_bar_chart
data={@records_by_genre}
width={600}
height={35 * length(@records_by_genre)}
color_class="fill-zinc-500"
label_fn={fn {genre, _count} -> genre end}
value_fn={fn {_genre, count} -> count end}
label_click={
fn {genre, _count} -> JS.navigate(~p"/collection?#{%{query: ~s(genre:"#{genre}")}}") end
}
class="w-full"
/>
</div>
</div>
</div>