Claudio Ortolina
611 lines
25 KiB
Plaintext
611 lines
25 KiB
Plaintext
<div>
|
|
<h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
|
{gettext("Records")}
|
|
</h1>
|
|
<%!-- TODO: replace with OSS version --%>
|
|
<dl class="mt-5 grid grid-cols-2 gap-5 sm:grid-cols-5">
|
|
<.album_preview
|
|
record={@latest_record}
|
|
title={gettext("Latest purchase")}
|
|
class="col-span-2 sm:col-span-3"
|
|
/>
|
|
<.counter
|
|
title={gettext("Total collection")}
|
|
count={@collection_count}
|
|
path={~p"/collection"}
|
|
/>
|
|
<.counter title={gettext("Total wishlist")} count={@wishlist_count} path={~p"/wishlist"} />
|
|
</dl>
|
|
</div>
|
|
|
|
<div>
|
|
<h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
|
{gettext("Formats")}
|
|
</h1>
|
|
<%!-- TODO: replace with OSS version --%>
|
|
<dl class={[
|
|
"mt-5 grid divide-zinc-200 dark:divide-zinc-900 overflow-hidden rounded-md bg-white dark:bg-zinc-800 shadow-sm divide-x-2",
|
|
stats_class(@collection_count_by_format)
|
|
]}>
|
|
<div :for={{format, count} <- @collection_count_by_format} class="px-2 py-5 sm:px-4">
|
|
<dt class="text-sm font-medium text-zinc-500 dark:text-zinc-400 text-center max-sm:text-xs break-keep">
|
|
{format_label(format)}
|
|
</dt>
|
|
<dd class="mt-1 text-center">
|
|
<.link
|
|
class="text-xl lg:text-2xl font-semibold hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
|
|
navigate={~p"/collection?query=format:#{format}"}
|
|
>
|
|
{count}
|
|
</.link>
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
|
|
<div>
|
|
<h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
|
{gettext("Types")}
|
|
</h1>
|
|
<%!-- TODO: replace with OSS version --%>
|
|
<dl class={[
|
|
"mt-5 grid divide-zinc-200 dark:divide-zinc-900 overflow-hidden rounded-md bg-white dark:bg-zinc-800 shadow-sm divide-x-2",
|
|
stats_class(@collection_count_by_type)
|
|
]}>
|
|
<div :for={{type, count} <- @collection_count_by_type} class="px-2 py-5 sm:px-4">
|
|
<dt class="text-sm font-medium text-zinc-500 dark:text-zinc-400 text-center max-sm:text-xs break-keep">
|
|
{type_label(type)}
|
|
</dt>
|
|
<dd class="mt-1 text-center">
|
|
<.link
|
|
class="text-xl lg:text-2xl font-semibold hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
|
|
navigate={~p"/collection?query=type:#{type}"}
|
|
>
|
|
{count}
|
|
</.link>
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
|
|
<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("Top Artists")}
|
|
</h1>
|
|
<.async_result :let={top_artists} assign={@top_artists}>
|
|
<:loading>
|
|
<div class="h-192 flex items-center justify-center">
|
|
<.loading />
|
|
</div>
|
|
</:loading>
|
|
<.tabs class="mt-4">
|
|
<.tabs_list active_tab="top_artists_last_30_days" variant="segmented">
|
|
<:tab class="flex-1" name="top_artists_last_30_days">{gettext("Last 30 days")}</:tab>
|
|
<:tab class="flex-1" name="top_artists_last_90_days">{gettext("Last 90 days")}</:tab>
|
|
<:tab class="flex-1" name="top_artists_last_365_days">{gettext("Last year")}</:tab>
|
|
<:tab class="flex-1" name="top_artists_all_time">{gettext("All time")}</:tab>
|
|
</.tabs_list>
|
|
<.tabs_panel active name="top_artists_last_30_days">
|
|
<.top_artists_by_period artists={top_artists.last_30_days} />
|
|
</.tabs_panel>
|
|
<.tabs_panel name="top_artists_last_90_days">
|
|
<.top_artists_by_period artists={top_artists.last_90_days} />
|
|
</.tabs_panel>
|
|
<.tabs_panel name="top_artists_last_365_days">
|
|
<.top_artists_by_period artists={top_artists.last_365_days} />
|
|
</.tabs_panel>
|
|
<.tabs_panel name="top_artists_all_time">
|
|
<.top_artists_by_period artists={top_artists.all_time} />
|
|
</.tabs_panel>
|
|
</.tabs>
|
|
</.async_result>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
|
{gettext("Top Albums")}
|
|
</h1>
|
|
<.async_result :let={top_albums} assign={@top_albums}>
|
|
<:loading>
|
|
<div class="h-192 flex items-center justify-center">
|
|
<.loading />
|
|
</div>
|
|
</:loading>
|
|
<.tabs class="mt-4">
|
|
<.tabs_list active_tab="top_albums_last_30_days" variant="segmented">
|
|
<:tab class="flex-1" name="top_albums_last_30_days">{gettext("Last 30 days")}</:tab>
|
|
<:tab class="flex-1" name="top_albums_last_90_days">{gettext("Last 90 days")}</:tab>
|
|
<:tab class="flex-1" name="top_albums_last_365_days">{gettext("Last year")}</:tab>
|
|
<:tab class="flex-1" name="top_albums_all_time">{gettext("All time")}</:tab>
|
|
</.tabs_list>
|
|
<.tabs_panel active name="top_albums_last_30_days">
|
|
<.top_albums_by_period
|
|
albums={top_albums.last_30_days}
|
|
collected_releases={top_albums.collected_releases}
|
|
wishlisted_releases={top_albums.wishlisted_releases}
|
|
/>
|
|
</.tabs_panel>
|
|
<.tabs_panel name="top_albums_last_90_days">
|
|
<.top_albums_by_period
|
|
albums={top_albums.last_90_days}
|
|
collected_releases={top_albums.collected_releases}
|
|
wishlisted_releases={top_albums.wishlisted_releases}
|
|
/>
|
|
</.tabs_panel>
|
|
<.tabs_panel name="top_albums_last_365_days">
|
|
<.top_albums_by_period
|
|
albums={top_albums.last_365_days}
|
|
collected_releases={top_albums.collected_releases}
|
|
wishlisted_releases={top_albums.wishlisted_releases}
|
|
/>
|
|
</.tabs_panel>
|
|
<.tabs_panel name="top_albums_all_time">
|
|
<.top_albums_by_period
|
|
albums={top_albums.all_time}
|
|
collected_releases={top_albums.collected_releases}
|
|
wishlisted_releases={top_albums.wishlisted_releases}
|
|
/>
|
|
</.tabs_panel>
|
|
</.tabs>
|
|
</.async_result>
|
|
</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">
|
|
{gettext("Scrobble activity")}
|
|
</h1>
|
|
<.refresh_lastfm_feed_button />
|
|
</div>
|
|
<.tabs id="scrobble-activity" class="mt-4">
|
|
<.tabs_list active_tab={@scrobble_activity_mode} variant="segmented" class="w-48">
|
|
<:tab
|
|
name="albums"
|
|
phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "albums"})}
|
|
>
|
|
{gettext("Albums")}
|
|
</:tab>
|
|
<:tab
|
|
name="tracks"
|
|
phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "tracks"})}
|
|
>
|
|
{gettext("Tracks")}
|
|
</:tab>
|
|
</.tabs_list>
|
|
|
|
<.tabs_panel name="albums" active={@scrobble_activity_mode == "albums"}>
|
|
<ul
|
|
id="scrobble-activity-albums"
|
|
role="list"
|
|
class="rounded-md px-4 py-5 shadow-sm"
|
|
phx-update="stream"
|
|
>
|
|
<li :for={{id, album} <- @streams.recent_albums} id={id} class="group">
|
|
<div class="relative pb-8 group-last:pb-0">
|
|
<span
|
|
class="group-last:hidden absolute left-6 top-6 -ml-px h-full w-0.5 bg-zinc-200"
|
|
aria-hidden="true"
|
|
>
|
|
</span>
|
|
<div class="relative flex space-x-3 items-center justify-between">
|
|
<div class="flex min-w-0 justify-between space-x-4 items-center">
|
|
<img
|
|
class="h-12 w-12 rounded-md shadow-sm"
|
|
src={album.cover_url}
|
|
alt={album.metadata.title}
|
|
/>
|
|
<div>
|
|
<p
|
|
:if={album.artist.musicbrainz_id not in @artist_ids}
|
|
class="font-semibold text-sm block text-zinc-500 dark:text-zinc-400"
|
|
>
|
|
{album.artist.name}
|
|
</p>
|
|
<.link
|
|
:if={album.artist.musicbrainz_id in @artist_ids}
|
|
class="font-semibold text-sm block text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
|
|
navigate={~p"/artists/#{album.artist.musicbrainz_id}"}
|
|
>
|
|
{album.artist.name}
|
|
</.link>
|
|
<p class="font-semibold text-sm md:text-base text-zinc-700 dark:text-zinc-300">
|
|
{album.metadata.title}
|
|
</p>
|
|
<time
|
|
datetime={format_scrobbled_at_uts(album.scrobbled_at_uts)}
|
|
class="whitespace-nowrap text-right text-xs sm:text-sm text-zinc-500 dark:text-zinc-400"
|
|
>
|
|
{album.scrobbled_at_label}
|
|
<.tooltip>
|
|
<.icon
|
|
name="hero-information-circle"
|
|
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
<:content>
|
|
<dl class="p-2">
|
|
<div class="flex gap-2 w-full">
|
|
<dt>{gettext("Album ID:")}</dt>
|
|
<dd class="font-mono">
|
|
<code id={"tooltip-album-#{album.scrobbled_at_uts}"}>
|
|
{album.metadata.musicbrainz_id || gettext("Unknown")}
|
|
</code>
|
|
<button
|
|
:if={album.metadata.musicbrainz_id not in ["", nil]}
|
|
phx-click={
|
|
JS.dispatch("music_library:clipcopy",
|
|
to: "#tooltip-album-#{album.scrobbled_at_uts}"
|
|
)
|
|
|> JS.transition("animate-shake")
|
|
}
|
|
>
|
|
<span class="sr-only">
|
|
{gettext("Copy album MusicBrainz ID to clipboard")}
|
|
</span>
|
|
<.icon
|
|
name="hero-clipboard-document"
|
|
class="-mt-1 h-5 w-5"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
</button>
|
|
</dd>
|
|
</div>
|
|
<div class="flex gap-2 w-full mt-2">
|
|
<dt>{gettext("Artist ID:")}</dt>
|
|
<dd class="font-mono">
|
|
<code id={"tooltip-artist-#{album.scrobbled_at_uts}"}>
|
|
{album.artist.musicbrainz_id || gettext("Unknown")}
|
|
</code>
|
|
<button
|
|
:if={album.artist.musicbrainz_id not in ["", nil]}
|
|
phx-click={
|
|
JS.dispatch("music_library:clipcopy",
|
|
to: "#tooltip-artist-#{album.scrobbled_at_uts}"
|
|
)
|
|
|> JS.transition("animate-shake")
|
|
}
|
|
>
|
|
<span class="sr-only">
|
|
{gettext("Copy artist MusicBrainz ID to clipboard")}
|
|
</span>
|
|
<.icon
|
|
name="hero-clipboard-document"
|
|
class="-mt-1 h-5 w-5"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
</button>
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</:content>
|
|
</.tooltip>
|
|
</time>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-1 flex-col text-right">
|
|
<.badge :if={album.metadata.musicbrainz_id == ""}>
|
|
{gettext("No MB ID")}
|
|
</.badge>
|
|
<.link
|
|
:if={
|
|
record_id =
|
|
tracked_record?(@collected_releases, album.metadata.musicbrainz_id)
|
|
}
|
|
navigate={~p"/collection/#{record_id}"}
|
|
>
|
|
<.badge color="green">
|
|
{gettext("Collected")}
|
|
</.badge>
|
|
</.link>
|
|
<.link
|
|
:if={
|
|
record_id =
|
|
tracked_record?(@wishlisted_releases, album.metadata.musicbrainz_id)
|
|
}
|
|
navigate={~p"/wishlist/#{record_id}"}
|
|
>
|
|
<.badge color="yellow">
|
|
{gettext("Wishlisted")}
|
|
</.badge>
|
|
</.link>
|
|
</div>
|
|
|
|
<.dropdown
|
|
:if={
|
|
album.metadata.musicbrainz_id !== "" and
|
|
!tracked_record?(
|
|
@collected_releases ++ @wishlisted_releases,
|
|
album.metadata.musicbrainz_id
|
|
)
|
|
}
|
|
id={"actions-#{album.scrobbled_at_uts}-albums"}
|
|
placement="bottom-end"
|
|
>
|
|
<:toggle>
|
|
<span class="sr-only">{gettext("Choose which format to import")}</span>
|
|
<.icon
|
|
name="hero-star"
|
|
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
</:toggle>
|
|
<.focus_wrap id={"actions-#{album.scrobbled_at_uts}-albums-focus-wrap"}>
|
|
<.dropdown_link
|
|
:for={format <- Records.Record.formats()}
|
|
id={"actions-#{album.scrobbled_at_uts}-#{format}-import"}
|
|
phx-click={
|
|
JS.push("import",
|
|
value: %{id: album.metadata.musicbrainz_id, format: format},
|
|
page_loading: true
|
|
)
|
|
}
|
|
>
|
|
{format_label(format)}
|
|
</.dropdown_link>
|
|
</.focus_wrap>
|
|
</.dropdown>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</.tabs_panel>
|
|
<.tabs_panel name="tracks" active={@scrobble_activity_mode == "tracks"}>
|
|
<ul
|
|
id="scrobble-activity-tracks"
|
|
role="list"
|
|
class="rounded-md px-4 py-5 shadow-sm"
|
|
phx-update="stream"
|
|
>
|
|
<li :for={{id, track} <- @streams.recent_tracks} id={id} class="group">
|
|
<div class="relative pb-8 group-last:pb-0">
|
|
<span
|
|
class="group-last:hidden absolute left-6 top-6 -ml-px h-full w-0.5 bg-zinc-200"
|
|
aria-hidden="true"
|
|
>
|
|
</span>
|
|
<div class="relative flex space-x-3 items-center justify-between">
|
|
<div class="flex min-w-0 justify-between space-x-4 items-center">
|
|
<img
|
|
class="h-12 w-12 rounded-md shadow-sm"
|
|
src={track.cover_url}
|
|
alt={track.title}
|
|
/>
|
|
<div>
|
|
<p
|
|
:if={track.artist.musicbrainz_id not in @artist_ids}
|
|
class="font-semibold text-sm block text-zinc-500 dark:text-zinc-400"
|
|
>
|
|
{track.artist.name}
|
|
</p>
|
|
<.link
|
|
:if={track.artist.musicbrainz_id in @artist_ids}
|
|
class="font-semibold text-sm block text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
|
|
navigate={~p"/artists/#{track.artist.musicbrainz_id}"}
|
|
>
|
|
{track.artist.name}
|
|
</.link>
|
|
<p class="font-semibold text-sm md:text-base text-zinc-700 dark:text-zinc-300">
|
|
{track.title}
|
|
</p>
|
|
<p class="font-semibold text-sm text-zinc-500 dark:text-zinc-400">
|
|
{track.album.title}
|
|
</p>
|
|
<time
|
|
datetime={format_scrobbled_at_uts(track.scrobbled_at_uts)}
|
|
class="whitespace-nowrap text-right text-xs sm:text-sm text-zinc-500 dark:text-zinc-400"
|
|
>
|
|
{track.scrobbled_at_label}
|
|
</time>
|
|
<.tooltip>
|
|
<.icon
|
|
name="hero-information-circle"
|
|
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
<:content>
|
|
<dl class="p-2">
|
|
<div class="flex gap-2 w-full">
|
|
<dt>{gettext("Track ID:")}</dt>
|
|
<dd class="font-mono">
|
|
<code id={"tooltip-track-#{track.scrobbled_at_uts}"}>
|
|
{track.musicbrainz_id || gettext("Unknown")}
|
|
</code>
|
|
<button
|
|
:if={track.musicbrainz_id not in ["", nil]}
|
|
phx-click={
|
|
JS.dispatch("music_library:clipcopy",
|
|
to: "#tooltip-track-#{track.scrobbled_at_uts}"
|
|
)
|
|
|> JS.transition("animate-shake")
|
|
}
|
|
>
|
|
<span class="sr-only">
|
|
{gettext("Copy track MusicBrainz ID to clipboard")}
|
|
</span>
|
|
<.icon
|
|
name="hero-clipboard-document"
|
|
class="-mt-1 h-5 w-5"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
</button>
|
|
</dd>
|
|
</div>
|
|
<div class="flex gap-2 w-full mt-2">
|
|
<dt>{gettext("Album ID:")}</dt>
|
|
<dd class="font-mono">
|
|
<code id={"tooltip-track-album-#{track.scrobbled_at_uts}"}>
|
|
{track.album.musicbrainz_id || gettext("Unknown")}
|
|
</code>
|
|
<button
|
|
:if={track.album.musicbrainz_id not in ["", nil]}
|
|
phx-click={
|
|
JS.dispatch("music_library:clipcopy",
|
|
to: "#tooltip-track-album-#{track.scrobbled_at_uts}"
|
|
)
|
|
|> JS.transition("animate-shake")
|
|
}
|
|
>
|
|
<span class="sr-only">
|
|
{gettext("Copy album MusicBrainz ID to clipboard")}
|
|
</span>
|
|
<.icon
|
|
name="hero-clipboard-document"
|
|
class="-mt-1 h-5 w-5"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
</button>
|
|
</dd>
|
|
</div>
|
|
<div class="flex gap-2 w-full mt-2">
|
|
<dt>{gettext("Artist ID:")}</dt>
|
|
<dd class="font-mono">
|
|
<code id={"tooltip-track-artist-#{track.scrobbled_at_uts}"}>
|
|
{track.artist.musicbrainz_id || gettext("Unknown")}
|
|
</code>
|
|
<button
|
|
:if={track.artist.musicbrainz_id not in ["", nil]}
|
|
phx-click={
|
|
JS.dispatch("music_library:clipcopy",
|
|
to: "#tooltip-track-artist-#{track.scrobbled_at_uts}"
|
|
)
|
|
|> JS.transition("animate-shake")
|
|
}
|
|
>
|
|
<span class="sr-only">
|
|
{gettext("Copy artist MusicBrainz ID to clipboard")}
|
|
</span>
|
|
<.icon
|
|
name="hero-clipboard-document"
|
|
class="-mt-1 h-5 w-5"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
</button>
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</:content>
|
|
</.tooltip>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-1 flex-col text-right">
|
|
<.badge :if={track.album.musicbrainz_id == ""}>
|
|
{gettext("No MB ID")}
|
|
</.badge>
|
|
<.link
|
|
:if={
|
|
record_id = tracked_record?(@collected_releases, track.album.musicbrainz_id)
|
|
}
|
|
navigate={~p"/collection/#{record_id}"}
|
|
>
|
|
<.badge color="green">{gettext("Collected")}</.badge>
|
|
</.link>
|
|
<.link
|
|
:if={
|
|
record_id = tracked_record?(@wishlisted_releases, track.album.musicbrainz_id)
|
|
}
|
|
navigate={~p"/wishlist/#{record_id}"}
|
|
>
|
|
<.badge color="yellow">{gettext("Wishlisted")}</.badge>
|
|
</.link>
|
|
</div>
|
|
|
|
<.dropdown
|
|
:if={
|
|
track.album.musicbrainz_id !== "" and
|
|
!tracked_record?(
|
|
@collected_releases ++ @wishlisted_releases,
|
|
track.album.musicbrainz_id
|
|
)
|
|
}
|
|
id={"actions-#{track.scrobbled_at_uts}-tracks"}
|
|
placement="bottom-end"
|
|
>
|
|
<:toggle>
|
|
<span class="sr-only">{gettext("Choose which format to import")}</span>
|
|
<.icon
|
|
name="hero-star"
|
|
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
</:toggle>
|
|
<.focus_wrap id={"actions-#{track.scrobbled_at_uts}-tracks-focus-wrap"}>
|
|
<.dropdown_link
|
|
:for={format <- Records.Record.formats()}
|
|
id={"actions-#{track.scrobbled_at_uts}-#{format}-import"}
|
|
phx-click={
|
|
JS.push("import",
|
|
value: %{id: track.album.musicbrainz_id, format: format},
|
|
page_loading: true
|
|
)
|
|
}
|
|
>
|
|
{format_label(format)}
|
|
</.dropdown_link>
|
|
</.focus_wrap>
|
|
</.dropdown>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</.tabs_panel>
|
|
</.tabs>
|
|
</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("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)}
|
|
color_class="fill-red-500"
|
|
label_fn={fn datum -> datum.name end}
|
|
value_fn={fn datum -> datum.count end}
|
|
label_click={
|
|
fn datum ->
|
|
JS.navigate(~p"/artists/#{datum.id}")
|
|
end
|
|
}
|
|
class="w-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
|
{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)}
|
|
color_class="fill-zinc-500"
|
|
label_fn={fn {genre, _count} -> genre end}
|
|
value_fn={fn {_genre, count} -> count end}
|
|
label_click={
|
|
fn {genre, _count} -> JS.navigate(~p"/collection?#{%{query: ~s(genre:"#{genre}")}}") end
|
|
}
|
|
class="w-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|