Improve stat charts

- Use tw classes for color
- Better titles
- Limit to top 20

lib/music_library_web/components/chart_components.ex

@@ -11,7 +11,7 @@ defmodule MusicLibraryWeb.ChartComponents do
         value_fn={&elem(&1, 1)}
         width={400}
         height={300}
-        bar_color="rgb(79, 70, 229)"
+        color_class="fill-red-500"
       />
   """
   attr :data, :list, required: true
@@ -19,7 +19,7 @@ defmodule MusicLibraryWeb.ChartComponents do
   attr :value_fn, :any, required: true
   attr :width, :integer, default: 400
   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 :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}
             width={bar_width}
             height={@bar_height}
-            fill={@bar_color}
-            class="opacity-80 hover:opacity-100 transition-opacity"
+            class={["opacity-80 hover:opacity-100 transition-opacity", @color_class]}
           >
             <title>{@label_fn.(datum)}: {@value_fn.(datum)}</title>
           </rect>

lib/music_library_web/live/stats_live/index.ex

@@ -74,8 +74,8 @@ defmodule MusicLibraryWeb.StatsLive.Index do
   def mount(_params, _session, socket) do
     latest_record = Collection.get_latest_record!()
     recent_tracks = LastFm.get_scrobbled_tracks()
-    records_by_artists = Collection.count_records_by_artist(limit: 50)
-    records_by_genre = Collection.count_records_by_genre(limit: 50)
+    records_by_artists = Collection.count_records_by_artist(limit: 20)
+    records_by_genre = Collection.count_records_by_genre(limit: 20)
 
     if connected?(socket) do
       LastFm.subscribe_to_feed()

lib/music_library_web/live/stats_live/index.html.heex

@@ -71,14 +71,14 @@
 <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("Collection records by Artist")}
+      {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)}
-        bar_color="rgb(79, 70, 229)"
+        color_class="fill-red-500"
         label_fn={fn datum -> datum.name end}
         value_fn={fn datum -> datum.count end}
         label_click={
@@ -93,14 +93,14 @@
 
   <div>
     <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>
     <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)}
-        bar_color="rgb(244, 63, 94)"
+        color_class="fill-zinc-500"
         label_fn={fn {genre, _count} -> genre end}
         value_fn={fn {_genre, count} -> count end}
         label_click={

priv/gettext/default.pot

@@ -688,16 +688,6 @@ msgstr ""
 msgid "Tracks"
 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.html.heex
 #, elixir-autogen, elixir-format
@@ -742,3 +732,13 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Oban"
 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 ""