Charts: count by artists and count by genre

Generated via Cursor and Claude 3.5 - initial version

lib/music_library_web/live/stats_live/index.ex

@@ -3,6 +3,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
 
   import MusicLibraryWeb.DataComponents
   import MusicLibraryWeb.RecordComponents, only: [format_label: 1, type_label: 1]
+  import MusicLibraryWeb.ChartComponents
 
   alias MusicLibrary.{Artists, Collection, Records, Wishlist}
 
@@ -28,7 +29,9 @@ defmodule MusicLibraryWeb.StatsLive.Index do
        scrobble_activity_mode: :albums,
        latest_record: latest_record,
        page_title: gettext("Stats"),
-       nav_section: :stats
+       nav_section: :stats,
+       records_by_artist: Records.count_records_by_artist(),
+       records_by_genre: Records.count_records_by_genre()
      )}
   end
 

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

@@ -68,6 +68,38 @@
   </dl>
 </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("Records by Artist")}
+    </h1>
+    <div class="mt-5 bg-white dark:bg-zinc-800 rounded-md shadow-sm p-4">
+      <.vertical_bar_chart
+        data={@records_by_artist}
+        width={600}
+        height={600}
+        bar_color="rgb(79, 70, 229)"
+        class="w-full"
+      />
+    </div>
+  </div>
+
+  <div>
+    <h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
+      {gettext("Records by Genre")}
+    </h1>
+    <div class="mt-5 bg-white dark:bg-zinc-800 rounded-md shadow-sm p-4">
+      <.vertical_bar_chart
+        data={@records_by_genre}
+        width={600}
+        height={600}
+        bar_color="rgb(244, 63, 94)"
+        class="w-full"
+      />
+    </div>
+  </div>
+</div>
+
 <div class="flow-root">
   <div class="mt-5 flex justify-between items-center">
     <h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">