Click on chart labels to navigate

lib/music_library_web/components/chart_components.ex

@@ -17,6 +17,7 @@ defmodule MusicLibraryWeb.ChartComponents do
   attr :height, :integer, default: 300
   attr :bar_color, :string, default: "rgb(79, 70, 229)"
   attr :class, :string, default: ""
+  attr :label_click, :any, default: nil, doc: "the function for handling phx-click on each label"
 
   def vertical_bar_chart(assigns) do
     assigns =
@@ -62,7 +63,8 @@ defmodule MusicLibraryWeb.ChartComponents do
           x="140"
           y={y + @bar_height / 2 + 4}
           text-anchor="end"
-          class="text-xs fill-zinc-500 dark:fill-zinc-400"
+          class={["text-xs fill-zinc-500 dark:fill-zinc-400", @label_click && "cursor-pointer"]}
+          phx-click={@label_click && @label_click.(label)}
         >
           {truncate_label(label, 20)}
         </text>

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

@@ -79,6 +79,9 @@
         width={600}
         height={35 * length(@records_by_artist)}
         bar_color="rgb(79, 70, 229)"
+        label_click={
+          fn label -> JS.navigate(~p"/collection?#{%{query: ~s(artist:"#{label}")}}") end
+        }
         class="w-full"
       />
     </div>
@@ -94,6 +97,9 @@
         width={600}
         height={35 * length(@records_by_genre)}
         bar_color="rgb(244, 63, 94)"
+        label_click={
+          fn label -> JS.navigate(~p"/collection?#{%{query: ~s(genre:"#{label}")}}") end
+        }
         class="w-full"
       />
     </div>