Refactor stats page with semantic components to experiment with alternative layouts
This commit is contained in:
Claudio Ortolina
@@ -16,93 +16,212 @@ defmodule MusicLibraryWeb.StatsLive.Index do
|
||||
def render(assigns) do
|
||||
~H"""
|
||||
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
||||
<div>
|
||||
<h1 class="mt-5 text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
||||
{gettext("Records")}
|
||||
</h1>
|
||||
<dl class="mt-5 grid grid-cols-3 gap-5 sm:grid-cols-5">
|
||||
<.album_preview
|
||||
record={@latest_record}
|
||||
title={gettext("Latest purchase")}
|
||||
class="col-span-3 sm:col-span-2"
|
||||
<.record_stats
|
||||
latest_record={@latest_record}
|
||||
collection_count={@collection_count}
|
||||
wishlist_count={@wishlist_count}
|
||||
scrobble_count={@scrobble_count}
|
||||
/>
|
||||
<.counter
|
||||
title={gettext("Collection")}
|
||||
count={@collection_count}
|
||||
path={~p"/collection"}
|
||||
/>
|
||||
<.counter title={gettext("Wishlist")} count={@wishlist_count} path={~p"/wishlist"} />
|
||||
<.counter
|
||||
title={gettext("Scrobbles")}
|
||||
count={to_compact(@scrobble_count)}
|
||||
tooltip={@scrobble_count}
|
||||
path={~p"/scrobbled-tracks"}
|
||||
/>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-5 lg:grid-cols-2">
|
||||
<div>
|
||||
<h1 class="mt-5 text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
||||
{gettext("Formats")}
|
||||
</h1>
|
||||
<.counters_by_category
|
||||
categories_with_counts={@collection_count_by_format}
|
||||
category_format_fn={&format_label/1}
|
||||
category_path_fn={fn format -> ~p"/collection?query=format:#{format}" end}
|
||||
/>
|
||||
<.formats_stats collection_count_by_format={@collection_count_by_format} />
|
||||
<.types_stats collection_count_by_type={@collection_count_by_type} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="mt-5 text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
||||
{gettext("Types")}
|
||||
</h1>
|
||||
<.counters_by_category
|
||||
categories_with_counts={@collection_count_by_type}
|
||||
category_format_fn={&type_label/1}
|
||||
category_path_fn={fn type -> ~p"/collection?query=type:#{type}" end}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-5 lg:grid-cols-3 mt-5">
|
||||
<TopArtists.live id="top-artists" timezone={@timezone} last_updated_uts={@last_updated_uts} />
|
||||
<TopAlbums.live id="top-albums" timezone={@timezone} last_updated_uts={@last_updated_uts} />
|
||||
<div class="order-first lg:order-last">
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
||||
{gettext("On This day")}
|
||||
</h1>
|
||||
<.form
|
||||
:let={f}
|
||||
for={to_form(%{"current_date" => @current_date})}
|
||||
phx-change="set_current_date"
|
||||
>
|
||||
<.date_picker size="xs" field={f[:current_date]}>
|
||||
<:outer_suffix>
|
||||
<.button
|
||||
size="xs"
|
||||
type="button"
|
||||
phx-click={
|
||||
JS.push("set_current_date", value: %{"current_date" => Date.utc_today()})
|
||||
}
|
||||
>
|
||||
Today
|
||||
</.button>
|
||||
</:outer_suffix>
|
||||
</.date_picker>
|
||||
</.form>
|
||||
<.on_this_day current_date={@current_date} records_on_this_day={@records_on_this_day} />
|
||||
</div>
|
||||
<div class="rounded-md bg-white shadow-sm dark:bg-zinc-800">
|
||||
<.records_on_this_day
|
||||
current_date={@current_date}
|
||||
records={@records_on_this_day}
|
||||
record_show_path={fn record -> ~p"/collection/#{record}" end}
|
||||
|
||||
<.scrobble_activity
|
||||
scrobble_activity_mode={@scrobble_activity_mode}
|
||||
streams={@streams}
|
||||
/>
|
||||
|
||||
<div class="mt-5 grid grid-cols-1 gap-5 lg:grid-cols-3">
|
||||
<.top_collection_artists records_by_artist={@records_by_artist} />
|
||||
<.top_collection_genres records_by_genre={@records_by_genre} />
|
||||
<.top_release_years records_by_release_year={@records_by_release_year} />
|
||||
</div>
|
||||
</Layouts.app>
|
||||
"""
|
||||
end
|
||||
|
||||
@impl true
|
||||
def mount(_params, _session, socket) do
|
||||
current_date = DateTime.now!(socket.assigns.timezone) |> DateTime.to_date()
|
||||
latest_record = Collection.get_latest_record()
|
||||
records_by_artists = Collection.count_records_by_artist(limit: 20)
|
||||
records_by_genre = Collection.count_records_by_genre(limit: 20)
|
||||
records_by_release_year = Collection.count_records_by_release_year(limit: 20)
|
||||
|
||||
records_on_this_day =
|
||||
current_date
|
||||
|> Collection.get_records_on_this_day()
|
||||
|> Collection.group_records_by_release_group()
|
||||
|
||||
if connected?(socket) do
|
||||
LastFm.subscribe_to_feed()
|
||||
end
|
||||
|
||||
{:ok,
|
||||
socket
|
||||
|> stream_configure(:recent_tracks,
|
||||
dom_id: fn %{track: track} -> "track-#{track.scrobbled_at_uts}" end
|
||||
)
|
||||
|> stream_configure(:recent_albums,
|
||||
dom_id: fn %{album: album} -> "album-#{album.scrobbled_at_uts}" end
|
||||
)
|
||||
|> assign_counts()
|
||||
|> assign_scrobble_activity()
|
||||
|> assign(
|
||||
current_date: current_date,
|
||||
scrobble_activity_mode: "albums",
|
||||
latest_record: latest_record,
|
||||
page_title: gettext("Stats"),
|
||||
current_section: :stats,
|
||||
records_by_artist: records_by_artists,
|
||||
records_by_genre: records_by_genre,
|
||||
records_by_release_year: records_by_release_year,
|
||||
records_on_this_day: records_on_this_day
|
||||
)}
|
||||
end
|
||||
|
||||
@impl true
|
||||
def handle_event("refresh_lastfm_feed", _, socket) do
|
||||
LastFm.refresh_scrobbled_tracks()
|
||||
{:noreply, socket}
|
||||
end
|
||||
|
||||
def handle_event("import", %{"id" => musicbrainz_id, "format" => format}, socket) do
|
||||
case Records.import_from_musicbrainz_release(musicbrainz_id,
|
||||
format: format,
|
||||
purchased_at: nil
|
||||
) do
|
||||
{:ok, record} ->
|
||||
{:noreply,
|
||||
socket
|
||||
|> put_toast(:info, gettext("Record wishlisted successfully"))
|
||||
|> push_navigate(to: ~p"/wishlist/#{record.id}")}
|
||||
|
||||
{:error, reason} ->
|
||||
{:noreply,
|
||||
socket
|
||||
|> put_toast(
|
||||
:error,
|
||||
gettext("Error wishlisting record") <> ": " <> ErrorMessages.friendly_message(reason)
|
||||
)}
|
||||
end
|
||||
end
|
||||
|
||||
def handle_event("set_scrobble_activity_mode", %{"mode" => mode}, socket)
|
||||
when mode in ["tracks", "albums"] do
|
||||
{:noreply,
|
||||
socket
|
||||
|> assign(scrobble_activity_mode: mode)}
|
||||
end
|
||||
|
||||
def handle_event("set_current_date", %{"current_date" => current_date}, socket) do
|
||||
case Date.from_iso8601(current_date) do
|
||||
{:ok, date} ->
|
||||
records_on_this_day =
|
||||
date
|
||||
|> Collection.get_records_on_this_day()
|
||||
|> Collection.group_records_by_release_group()
|
||||
|
||||
{:noreply,
|
||||
socket
|
||||
|> assign(%{current_date: date, records_on_this_day: records_on_this_day})}
|
||||
|
||||
{:error, _reason} ->
|
||||
{:noreply, socket}
|
||||
end
|
||||
end
|
||||
|
||||
@impl true
|
||||
def handle_info(%{track_count: 0}, socket) do
|
||||
{:noreply, socket}
|
||||
end
|
||||
|
||||
def handle_info(%{track_count: _count}, socket) do
|
||||
{:noreply,
|
||||
socket
|
||||
|> assign_scrobble_activity()}
|
||||
end
|
||||
|
||||
defp top_release_years(assigns) do
|
||||
~H"""
|
||||
<div>
|
||||
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
||||
{gettext("Top 20 Release Years")}
|
||||
</h1>
|
||||
<div class="mt-5 rounded-md bg-white shadow-sm dark:bg-zinc-800">
|
||||
<.vertical_bar_chart
|
||||
data={@records_by_release_year}
|
||||
color_class="bg-zinc-800 dark:bg-zinc-300"
|
||||
label_fn={fn {year, _count} -> year end}
|
||||
value_fn={fn {_year, count} -> count end}
|
||||
datum_click={
|
||||
fn {year, _count} ->
|
||||
JS.navigate(~p"/collection?#{%{query: "release_year:#{year}"}}")
|
||||
end
|
||||
}
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
defp top_collection_genres(assigns) do
|
||||
~H"""
|
||||
<div>
|
||||
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
||||
{gettext("Top %{n} Collection Genres", %{n: length(@records_by_genre)})}
|
||||
</h1>
|
||||
<div class="mt-5 rounded-md bg-white shadow-sm dark:bg-zinc-800">
|
||||
<.vertical_bar_chart
|
||||
data={@records_by_genre}
|
||||
color_class="bg-zinc-500"
|
||||
label_fn={fn {genre, _count} -> genre end}
|
||||
value_fn={fn {_genre, count} -> count end}
|
||||
datum_click={
|
||||
fn {genre, _count} ->
|
||||
JS.navigate(~p"/collection?#{%{query: ~s(genre:"#{genre}")}}")
|
||||
end
|
||||
}
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
defp top_collection_artists(assigns) do
|
||||
~H"""
|
||||
<div>
|
||||
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
||||
{gettext("Top %{n} Collection Artists", %{n: length(@records_by_artist)})}
|
||||
</h1>
|
||||
<div class="mt-5 rounded-md bg-white shadow-sm dark:bg-zinc-800">
|
||||
<.vertical_bar_chart
|
||||
data={@records_by_artist}
|
||||
color_class="bg-red-500"
|
||||
label_fn={fn datum -> datum.name end}
|
||||
value_fn={fn datum -> datum.count end}
|
||||
datum_click={
|
||||
fn datum ->
|
||||
JS.navigate(~p"/artists/#{datum.id}")
|
||||
end
|
||||
}
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
defp scrobble_activity(assigns) do
|
||||
~H"""
|
||||
<div class="flow-root">
|
||||
<div class="mt-5 flex items-center justify-between">
|
||||
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
||||
@@ -291,172 +410,102 @@ defmodule MusicLibraryWeb.StatsLive.Index do
|
||||
</.tabs_panel>
|
||||
</.tabs>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 grid grid-cols-1 gap-5 lg:grid-cols-3">
|
||||
<div>
|
||||
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
||||
{gettext("Top %{n} Collection Artists", %{n: length(@records_by_artist)})}
|
||||
</h1>
|
||||
<div class="mt-5 rounded-md bg-white shadow-sm dark:bg-zinc-800">
|
||||
<.vertical_bar_chart
|
||||
data={@records_by_artist}
|
||||
color_class="bg-red-500"
|
||||
label_fn={fn datum -> datum.name end}
|
||||
value_fn={fn datum -> datum.count end}
|
||||
datum_click={
|
||||
fn datum ->
|
||||
JS.navigate(~p"/artists/#{datum.id}")
|
||||
end
|
||||
}
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
||||
{gettext("Top %{n} Collection Genres", %{n: length(@records_by_genre)})}
|
||||
</h1>
|
||||
<div class="mt-5 rounded-md bg-white shadow-sm dark:bg-zinc-800">
|
||||
<.vertical_bar_chart
|
||||
data={@records_by_genre}
|
||||
color_class="bg-zinc-500"
|
||||
label_fn={fn {genre, _count} -> genre end}
|
||||
value_fn={fn {_genre, count} -> count end}
|
||||
datum_click={
|
||||
fn {genre, _count} ->
|
||||
JS.navigate(~p"/collection?#{%{query: ~s(genre:"#{genre}")}}")
|
||||
end
|
||||
}
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
||||
{gettext("Top 20 Release Years")}
|
||||
</h1>
|
||||
<div class="mt-5 rounded-md bg-white shadow-sm dark:bg-zinc-800">
|
||||
<.vertical_bar_chart
|
||||
data={@records_by_release_year}
|
||||
color_class="bg-zinc-800 dark:bg-zinc-300"
|
||||
label_fn={fn {year, _count} -> year end}
|
||||
value_fn={fn {_year, count} -> count end}
|
||||
datum_click={
|
||||
fn {year, _count} ->
|
||||
JS.navigate(~p"/collection?#{%{query: "release_year:#{year}"}}")
|
||||
end
|
||||
}
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layouts.app>
|
||||
"""
|
||||
end
|
||||
|
||||
@impl true
|
||||
def mount(_params, _session, socket) do
|
||||
current_date = DateTime.now!(socket.assigns.timezone) |> DateTime.to_date()
|
||||
latest_record = Collection.get_latest_record()
|
||||
records_by_artists = Collection.count_records_by_artist(limit: 20)
|
||||
records_by_genre = Collection.count_records_by_genre(limit: 20)
|
||||
records_by_release_year = Collection.count_records_by_release_year(limit: 20)
|
||||
|
||||
records_on_this_day =
|
||||
current_date
|
||||
|> Collection.get_records_on_this_day()
|
||||
|> Collection.group_records_by_release_group()
|
||||
|
||||
if connected?(socket) do
|
||||
LastFm.subscribe_to_feed()
|
||||
defp on_this_day(assigns) do
|
||||
~H"""
|
||||
<div class="order-first lg:order-last">
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
||||
{gettext("On This day")}
|
||||
</h1>
|
||||
<.form
|
||||
:let={f}
|
||||
for={to_form(%{"current_date" => @current_date})}
|
||||
phx-change="set_current_date"
|
||||
>
|
||||
<.date_picker size="xs" field={f[:current_date]}>
|
||||
<:outer_suffix>
|
||||
<.button
|
||||
size="xs"
|
||||
type="button"
|
||||
phx-click={JS.push("set_current_date", value: %{"current_date" => Date.utc_today()})}
|
||||
>
|
||||
Today
|
||||
</.button>
|
||||
</:outer_suffix>
|
||||
</.date_picker>
|
||||
</.form>
|
||||
</div>
|
||||
<div class="rounded-md bg-white shadow-sm dark:bg-zinc-800">
|
||||
<.records_on_this_day
|
||||
current_date={@current_date}
|
||||
records={@records_on_this_day}
|
||||
record_show_path={fn record -> ~p"/collection/#{record}" end}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
{:ok,
|
||||
socket
|
||||
|> stream_configure(:recent_tracks,
|
||||
dom_id: fn %{track: track} -> "track-#{track.scrobbled_at_uts}" end
|
||||
)
|
||||
|> stream_configure(:recent_albums,
|
||||
dom_id: fn %{album: album} -> "album-#{album.scrobbled_at_uts}" end
|
||||
)
|
||||
|> assign_counts()
|
||||
|> assign_scrobble_activity()
|
||||
|> assign(
|
||||
current_date: current_date,
|
||||
scrobble_activity_mode: "albums",
|
||||
latest_record: latest_record,
|
||||
page_title: gettext("Stats"),
|
||||
current_section: :stats,
|
||||
records_by_artist: records_by_artists,
|
||||
records_by_genre: records_by_genre,
|
||||
records_by_release_year: records_by_release_year,
|
||||
records_on_this_day: records_on_this_day
|
||||
)}
|
||||
defp types_stats(assigns) do
|
||||
~H"""
|
||||
<div>
|
||||
<h1 class="mt-5 text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
||||
{gettext("Types")}
|
||||
</h1>
|
||||
<.counters_by_category
|
||||
categories_with_counts={@collection_count_by_type}
|
||||
category_format_fn={&type_label/1}
|
||||
category_path_fn={fn type -> ~p"/collection?query=type:#{type}" end}
|
||||
/>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
@impl true
|
||||
def handle_event("refresh_lastfm_feed", _, socket) do
|
||||
LastFm.refresh_scrobbled_tracks()
|
||||
{:noreply, socket}
|
||||
defp formats_stats(assigns) do
|
||||
~H"""
|
||||
<div>
|
||||
<h1 class="mt-5 text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
||||
{gettext("Formats")}
|
||||
</h1>
|
||||
<.counters_by_category
|
||||
categories_with_counts={@collection_count_by_format}
|
||||
category_format_fn={&format_label/1}
|
||||
category_path_fn={fn format -> ~p"/collection?query=format:#{format}" end}
|
||||
/>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
def handle_event("import", %{"id" => musicbrainz_id, "format" => format}, socket) do
|
||||
case Records.import_from_musicbrainz_release(musicbrainz_id,
|
||||
format: format,
|
||||
purchased_at: nil
|
||||
) do
|
||||
{:ok, record} ->
|
||||
{:noreply,
|
||||
socket
|
||||
|> put_toast(:info, gettext("Record wishlisted successfully"))
|
||||
|> push_navigate(to: ~p"/wishlist/#{record.id}")}
|
||||
|
||||
{:error, reason} ->
|
||||
{:noreply,
|
||||
socket
|
||||
|> put_toast(
|
||||
:error,
|
||||
gettext("Error wishlisting record") <> ": " <> ErrorMessages.friendly_message(reason)
|
||||
)}
|
||||
end
|
||||
end
|
||||
|
||||
def handle_event("set_scrobble_activity_mode", %{"mode" => mode}, socket)
|
||||
when mode in ["tracks", "albums"] do
|
||||
{:noreply,
|
||||
socket
|
||||
|> assign(scrobble_activity_mode: mode)}
|
||||
end
|
||||
|
||||
def handle_event("set_current_date", %{"current_date" => current_date}, socket) do
|
||||
case Date.from_iso8601(current_date) do
|
||||
{:ok, date} ->
|
||||
records_on_this_day =
|
||||
date
|
||||
|> Collection.get_records_on_this_day()
|
||||
|> Collection.group_records_by_release_group()
|
||||
|
||||
{:noreply,
|
||||
socket
|
||||
|> assign(%{current_date: date, records_on_this_day: records_on_this_day})}
|
||||
|
||||
{:error, _reason} ->
|
||||
{:noreply, socket}
|
||||
end
|
||||
end
|
||||
|
||||
@impl true
|
||||
def handle_info(%{track_count: 0}, socket) do
|
||||
{:noreply, socket}
|
||||
end
|
||||
|
||||
def handle_info(%{track_count: _count}, socket) do
|
||||
{:noreply,
|
||||
socket
|
||||
|> assign_scrobble_activity()}
|
||||
defp record_stats(assigns) do
|
||||
~H"""
|
||||
<div>
|
||||
<h1 class="mt-5 text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
||||
{gettext("Records")}
|
||||
</h1>
|
||||
<dl class="mt-5 grid grid-cols-3 gap-5 sm:grid-cols-5">
|
||||
<.album_preview
|
||||
record={@latest_record}
|
||||
title={gettext("Latest purchase")}
|
||||
class="col-span-3 sm:col-span-2"
|
||||
/>
|
||||
<.counter
|
||||
title={gettext("Collection")}
|
||||
count={@collection_count}
|
||||
path={~p"/collection"}
|
||||
/>
|
||||
<.counter title={gettext("Wishlist")} count={@wishlist_count} path={~p"/wishlist"} />
|
||||
<.counter
|
||||
title={gettext("Scrobbles")}
|
||||
count={to_compact(@scrobble_count)}
|
||||
tooltip={@scrobble_count}
|
||||
path={~p"/scrobbled-tracks"}
|
||||
/>
|
||||
</dl>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
defp assign_counts(socket) do
|
||||
|
||||
Reference in New Issue
Block a user