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

Improve stat charts

Browse Source 
- Use tw classes for color
- Better titles
- Limit to top 20
This commit is contained in:
Claudio Ortolina
2025-04-20 15:22:31 +01:00
parent 17c9098aba
commit 0532f661e9
4 changed files with 19 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/chart_components.ex
+3 -4
View File
@@ -11,7 +11,7 @@ defmodule MusicLibraryWeb.ChartComponents do
value_fn={&elem(&1, 1)} value_fn={&elem(&1, 1)}
width={400} width={400}
height={300} height={300}
bar_color="rgb(79, 70, 229)" color_class="fill-red-500"
/> />
""" """
attr :data, :list, required: true attr :data, :list, required: true
@@ -19,7 +19,7 @@ defmodule MusicLibraryWeb.ChartComponents do
attr :value_fn, :any, required: true attr :value_fn, :any, required: true
attr :width, :integer, default: 400 attr :width, :integer, default: 400
attr :height, :integer, default: 300 attr :height, :integer, default: 300
attr :bar_color, :string, default: "rgb(79, 70, 229)" attr :color_class, :string, required: true
attr :class, :string, default: "" attr :class, :string, default: ""
attr :label_click, :any, default: nil, doc: "the function for handling phx-click on each label" attr :label_click, :any, default: nil, doc: "the function for handling phx-click on each label"
@@ -84,8 +84,7 @@ defmodule MusicLibraryWeb.ChartComponents do
y={y} y={y}
width={bar_width} width={bar_width}
height={@bar_height} height={@bar_height}
fill={@bar_color} class={["opacity-80 hover:opacity-100 transition-opacity", @color_class]}
class="opacity-80 hover:opacity-100 transition-opacity"
> >
<title>{@label_fn.(datum)}: {@value_fn.(datum)}</title> <title>{@label_fn.(datum)}: {@value_fn.(datum)}</title>
</rect> </rect>
lib/music_library_web/live/stats_live/index.ex
+2 -2
View File
@@ -74,8 +74,8 @@ defmodule MusicLibraryWeb.StatsLive.Index do
def mount(_params, _session, socket) do def mount(_params, _session, socket) do
latest_record = Collection.get_latest_record!() latest_record = Collection.get_latest_record!()
recent_tracks = LastFm.get_scrobbled_tracks() recent_tracks = LastFm.get_scrobbled_tracks()
records_by_artists = Collection.count_records_by_artist(limit: 50) records_by_artists = Collection.count_records_by_artist(limit: 20)
records_by_genre = Collection.count_records_by_genre(limit: 50) records_by_genre = Collection.count_records_by_genre(limit: 20)
if connected?(socket) do if connected?(socket) do
LastFm.subscribe_to_feed() LastFm.subscribe_to_feed()
lib/music_library_web/live/stats_live/index.html.heex
+4 -4
View File
@@ -71,14 +71,14 @@
<div class="mt-5 grid grid-cols-1 lg:grid-cols-2 gap-5"> <div class="mt-5 grid grid-cols-1 lg:grid-cols-2 gap-5">
<div> <div>
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold"> <h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
{gettext("Collection records by Artist")} {gettext("Top %{n} Artists", %{n: length(@records_by_artist)})}
</h1> </h1>
<div class="mt-5 bg-white dark:bg-zinc-800 rounded-md shadow-sm"> <div class="mt-5 bg-white dark:bg-zinc-800 rounded-md shadow-sm">
<.vertical_bar_chart <.vertical_bar_chart
data={@records_by_artist} data={@records_by_artist}
width={600} width={600}
height={35 * length(@records_by_artist)} height={35 * length(@records_by_artist)}
bar_color="rgb(79, 70, 229)" color_class="fill-red-500"
label_fn={fn datum -> datum.name end} label_fn={fn datum -> datum.name end}
value_fn={fn datum -> datum.count end} value_fn={fn datum -> datum.count end}
label_click={ label_click={
@@ -93,14 +93,14 @@
<div> <div>
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold"> <h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
{gettext("Collection records by Genre")} {gettext("Top %{n} Genres", %{n: length(@records_by_genre)})}
</h1> </h1>
<div class="mt-5 bg-white dark:bg-zinc-800 rounded-md shadow-sm"> <div class="mt-5 bg-white dark:bg-zinc-800 rounded-md shadow-sm">
<.vertical_bar_chart <.vertical_bar_chart
data={@records_by_genre} data={@records_by_genre}
width={600} width={600}
height={35 * length(@records_by_genre)} height={35 * length(@records_by_genre)}
bar_color="rgb(244, 63, 94)" color_class="fill-zinc-500"
label_fn={fn {genre, _count} -> genre end} label_fn={fn {genre, _count} -> genre end}
value_fn={fn {_genre, count} -> count end} value_fn={fn {_genre, count} -> count end}
label_click={ label_click={
priv/gettext/default.pot
+10 -10
View File
@@ -688,16 +688,6 @@ msgstr ""
msgid "Tracks" msgid "Tracks"
msgstr "" msgstr ""
#: lib/music_library_web/live/stats_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Collection records by Artist"
msgstr ""
#: lib/music_library_web/live/stats_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Collection records by Genre"
msgstr ""
#: lib/music_library_web/live/artist_live/show.ex #: lib/music_library_web/live/artist_live/show.ex
#: lib/music_library_web/live/artist_live/show.html.heex #: lib/music_library_web/live/artist_live/show.html.heex
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
@@ -742,3 +732,13 @@ msgstr ""
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Oban" msgid "Oban"
msgstr "" msgstr ""
#: lib/music_library_web/live/stats_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Top %{n} Artists"
msgstr ""
#: lib/music_library_web/live/stats_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Top %{n} Genres"
msgstr ""