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

Improve style and interactions in vertical bar charts

Browse Source
This commit is contained in:
Claudio Ortolina
2025-09-22 12:48:20 +03:00
parent 4e24bfe966
commit a9355b72da
2 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/chart_components.ex
+17 -5
View File
@@ -21,7 +21,7 @@ defmodule MusicLibraryWeb.ChartComponents do
attr :height, :integer, default: 300 attr :height, :integer, default: 300
attr :color_class, :string, required: true 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 :datum_click, :any, default: nil, doc: "the function for handling phx-click on each datum"
def vertical_bar_chart(assigns) do def vertical_bar_chart(assigns) do
assigns = assigns =
@@ -51,8 +51,11 @@ defmodule MusicLibraryWeb.ChartComponents do
x="140" x="140"
y={y + @bar_height / 2 + 4} y={y + @bar_height / 2 + 4}
text-anchor="end" text-anchor="end"
class={["text-xs fill-zinc-500 dark:fill-zinc-400", @label_click && "cursor-pointer"]} class={[
phx-click={@label_click && @label_click.(datum)} "text-xs font-medium fill-zinc-500 hover:fill-zinc-700 dark:fill-zinc-400 dark:hover:fill-zinc-200",
@datum_click && "cursor-pointer"
]}
phx-click={@datum_click && @datum_click.(datum)}
> >
{truncate_label(@label_fn.(datum), 20)} {truncate_label(@label_fn.(datum), 20)}
</text> </text>
@@ -63,7 +66,12 @@ defmodule MusicLibraryWeb.ChartComponents do
y={y} y={y}
width={bar_width} width={bar_width}
height={@bar_height} height={@bar_height}
class={["opacity-80 hover:opacity-100 transition-opacity", @color_class]} class={[
"opacity-80 hover:opacity-100 transition-opacity",
@color_class,
@datum_click && "cursor-pointer"
]}
phx-click={@datum_click && @datum_click.(datum)}
> >
<title>{@label_fn.(datum)}: {@value_fn.(datum)}</title> <title>{@label_fn.(datum)}: {@value_fn.(datum)}</title>
</rect> </rect>
@@ -72,7 +80,11 @@ defmodule MusicLibraryWeb.ChartComponents do
<text <text
x={150 + bar_width + 5} x={150 + bar_width + 5}
y={y + @bar_height / 2 + 4} y={y + @bar_height / 2 + 4}
class="text-xs fill-zinc-500 dark:fill-zinc-400" class={[
"text-xs font-semibold fill-zinc-500 dark:fill-zinc-400",
@datum_click && "cursor-pointer"
]}
phx-click={@datum_click && @datum_click.(datum)}
> >
{@value_fn.(datum)} {@value_fn.(datum)}
</text> </text>
lib/music_library_web/live/stats_live/index.html.heex
+2 -2
View File
@@ -514,7 +514,7 @@
color_class="fill-red-500" 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={ datum_click={
fn datum -> fn datum ->
JS.navigate(~p"/artists/#{datum.id}") JS.navigate(~p"/artists/#{datum.id}")
end end
@@ -536,7 +536,7 @@
color_class="fill-zinc-500" 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={ datum_click={
fn {genre, _count} -> fn {genre, _count} ->
JS.navigate(~p"/collection?#{%{query: ~s(genre:"#{genre}")}}") JS.navigate(~p"/collection?#{%{query: ~s(genre:"#{genre}")}}")
end end