<%= if @live_action == :top_list do %>
- <.top_list
+
<% else %>
@@ -251,74 +252,6 @@ defmodule MaveCoreWeb.Dashboard.Data.Index do
"""
end
- attr :top_videos, AsyncResult, required: true
- attr :current_space, :any, required: true
- attr :route_scope, :atom, required: true
-
- defp top_list(assigns) do
- ~H"""
-
- <.subtitle label={gettext("Most viewed this year")} icon="hero-trophy" />
-
-
- <.async_result :let={top_videos} assign={@top_videos}>
- <:loading>
-
- <.video_data_section>
- <%= for width <- [46, 38, 52, 30, 42, 35, 48, 33] do %>
-
- <% end %>
-
{gettext("Loading data")}
-
-
-
-
- <:failed>
- <.video_data_section>
-
- {gettext("Data is unavailable")}
-
-
-
-
- <.video_data_section>
-
- <.icon name="hero-trophy" class="h-6 w-6 mb-2 opacity-50" />
-
{gettext("No data yet")}
-
-
- <.link
- :for={{video, rank} <- Enum.with_index(top_videos, 1)}
- navigate={DashboardRoutes.video_path(@current_space, video.id, :all, scope: @route_scope)}
- class="flex items-center gap-4 px-3 py-2.5 border-b border-stone-100 last:border-none hover:bg-stone-50 active:bg-blue-50"
- >
-
{rank}
-
{video.name}
-
- {format_number(video.views)}
-
-
-
-
-
- """
- end
-
attr :title, :string, required: true
attr :assign, :any, required: true
attr :expanded, :boolean, required: true
@@ -437,6 +370,9 @@ defmodule MaveCoreWeb.Dashboard.Data.Index do
defp period(_params), do: Overview.default_period()
+ defp period_path(%{live_action: :top_list} = assigns, period),
+ do: top_list_path(assigns, period, assigns.sort)
+
defp period_path(assigns, period) do
DashboardRoutes.data_path(assigns.current_space,
scope: assigns.route_scope,
@@ -444,6 +380,20 @@ defmodule MaveCoreWeb.Dashboard.Data.Index do
)
end
+ defp top_list_path(assigns, period, sort) do
+ DashboardRoutes.data_top_list_path(assigns.current_space,
+ scope: assigns.route_scope,
+ period: period_param(period),
+ sort: if(sort != TopListComponents.default_sort(), do: sort)
+ )
+ end
+
+ defp sort(%{"sort" => sort}) do
+ if sort in TopListComponents.sorts(), do: sort, else: TopListComponents.default_sort()
+ end
+
+ defp sort(_params), do: TopListComponents.default_sort()
+
# Keeps URLs for the default period free of a query string.
defp period_param(period) do
if period == Overview.default_period(), do: nil, else: period
diff --git a/lib/mave_core_web/live/dashboard/data/top_list_components.ex b/lib/mave_core_web/live/dashboard/data/top_list_components.ex
new file mode 100644
index 0000000..db93b91
--- /dev/null
+++ b/lib/mave_core_web/live/dashboard/data/top_list_components.ex
@@ -0,0 +1,175 @@
+defmodule MaveCoreWeb.Dashboard.Data.TopListComponents do
+ @moduledoc false
+
+ use MaveCoreWeb, :html
+ import MaveCoreWeb.DashboardComponents, except: [icon: 1]
+
+ alias MaveCoreWeb.DashboardRoutes
+ alias MaveCoreWeb.Formatter
+ alias Phoenix.LiveView.AsyncResult
+
+ @sorts ~w(views watch_time completion)
+
+ def sorts, do: @sorts
+ def default_sort, do: "views"
+
+ @doc "Sorts top list rows by `sort`, highest first."
+ def sort(videos, "watch_time"), do: Enum.sort_by(videos, &{-&1.watch_ms, -&1.views})
+ def sort(videos, "completion"), do: Enum.sort_by(videos, &{-&1.avg_completion, -&1.views})
+ def sort(videos, _views), do: Enum.sort_by(videos, &(-&1.views))
+
+ attr :top_videos, AsyncResult, required: true
+ attr :current_space, :any, required: true
+ attr :route_scope, :atom, required: true
+ attr :sort, :string, required: true
+ attr :sort_path, :any, required: true, doc: "function that builds the path for a sort"
+
+ def top_list(assigns) do
+ ~H"""
+
+ <.subtitle label={gettext("Top videos")} icon="hero-trophy" />
+
+
+ <.async_result :let={top_videos} assign={@top_videos}>
+ <:loading>
+
+ <.video_data_section>
+ <%= for width <- [46, 38, 52, 30, 42, 35, 48, 33] do %>
+
+ <% end %>
+
{gettext("Loading data")}
+
+
+
+
+ <:failed>
+ <.video_data_section>
+
+ {gettext("Data is unavailable")}
+
+
+
+
+ <.video_data_section>
+
+ <.icon name="hero-trophy" class="h-6 w-6 mb-2 opacity-50" />
+
{gettext("No data yet")}
+
+
+
+
+
+ | # |
+ {gettext("Video")} |
+
+ <.link
+ patch={@sort_path.(sort)}
+ data-sort={sort}
+ aria-sort={if sort == @sort, do: "descending"}
+ class={[
+ "whitespace-nowrap hover:text-stone-600",
+ sort == @sort && "text-stone-600"
+ ]}
+ >
+ {label}{if sort == @sort, do: " ▾"}
+
+ |
+ {gettext("Trend")} |
+
+
+
+
+ | {rank} |
+
+ <.link
+ navigate={
+ DashboardRoutes.video_path(@current_space, video.id, :all, scope: @route_scope)
+ }
+ class="block truncate text-stone-500 hover:text-stone-700"
+ >
+ {video.name}
+
+ |
+
+ {format_number(video.views)}
+ |
+
+ {format_watch_time(video.watch_ms)}
+ |
+
+ {round(video.avg_completion * 100)}%
+ |
+
+ <.sparkline values={video.series} />
+ |
+
+
+
+
+
+
+ """
+ end
+
+ attr :values, :list, required: true
+
+ defp sparkline(assigns) do
+ max = Enum.max(assigns.values, fn -> 0 end)
+ step = 88 / max(length(assigns.values) - 1, 1)
+
+ points =
+ assigns.values
+ |> Enum.with_index()
+ |> Enum.map_join(" ", fn {value, index} ->
+ y = if max > 0, do: 15 - 13 * value / max, else: 15
+ "#{Float.round(index * step, 2)},#{Float.round(y, 2)}"
+ end)
+
+ assigns = assign(assigns, :points, points)
+
+ ~H"""
+
+ """
+ end
+
+ defp sort_columns do
+ [
+ {"views", gettext("Views")},
+ {"watch_time", gettext("Watch time")},
+ {"completion", gettext("Completion")}
+ ]
+ end
+
+ defp format_watch_time(ms) when ms >= 3_600_000,
+ do: "#{format_number(Float.round(ms / 3_600_000, 1))} h"
+
+ defp format_watch_time(ms), do: "#{format_number(round(ms / 60_000))} min"
+
+ defp format_number(number), do: Formatter.format_number(number)
+end
diff --git a/test/mave_core/analytics/overview_test.exs b/test/mave_core/analytics/overview_test.exs
index dda0979..dc3409c 100644
--- a/test/mave_core/analytics/overview_test.exs
+++ b/test/mave_core/analytics/overview_test.exs
@@ -86,8 +86,34 @@ defmodule MaveCore.Analytics.OverviewTest do
assert Enum.all?(Map.keys(overview.hours), fn {day, hour} -> day in 1..7 and hour in 0..23 end)
end
+ test "ranks videos with watch time, completion and views per bucket", %{db_name: db_name} do
+ now = DateTime.utc_now()
+
+ insert_events(db_name, [
+ {-3_600, "play", 1, "AAAAAAAAAA", 0.0},
+ {-3_540, "pause", 1, "AAAAAAAAAA", 60.0},
+ {-1_800, "play", 2, "BBBBBBBBBB", 0.0},
+ {-1_680, "pause", 2, "BBBBBBBBBB", 120.0},
+ {-600, "play", 3, "BBBBBBBBBB", 0.0},
+ {-570, "pause", 3, "BBBBBBBBBB", 30.0},
+ # Outside the 7-day period.
+ {-8 * 86_400, "play", 4, "AAAAAAAAAA", 0.0},
+ {-8 * 86_400 + 60, "pause", 4, "AAAAAAAAAA", 60.0}
+ ])
+
+ assert {:ok, [first, second]} = Overview.top_videos("space", "7d", 25, now)
+
+ assert %{embed_hash: "BBBBBBBBBB", views: 2, watch_ms: 150_000} = first
+ assert_in_delta first.avg_completion, (1.0 + 0.25) / 2, 0.001
+ assert length(first.series) == 7
+ assert Enum.sum(first.series) == 2
+
+ assert %{embed_hash: "AAAAAAAAAA", views: 1, watch_ms: 60_000} = second
+ end
+
test "rejects unknown periods" do
assert {:error, :invalid_request} = Overview.space_overview("space", "5y")
+ assert {:error, :invalid_request} = Overview.top_videos("space", "5y")
end
defp insert_events(db_name, events) do
diff --git a/test/mave_core_web/live/dashboard/data/index_test.exs b/test/mave_core_web/live/dashboard/data/index_test.exs
index 7f9c0c4..da5f493 100644
--- a/test/mave_core_web/live/dashboard/data/index_test.exs
+++ b/test/mave_core_web/live/dashboard/data/index_test.exs
@@ -230,7 +230,7 @@ defmodule MaveCoreWeb.Live.Dashboard.Data.IndexTest do
view
|> render()
|> LazyHTML.from_fragment()
- |> LazyHTML.query("#data-top-list a")
+ |> LazyHTML.query("#data-top-list tbody a")
|> Enum.map(&LazyHTML.attribute(&1, "href"))
|> List.flatten()
@@ -240,6 +240,55 @@ defmodule MaveCoreWeb.Live.Dashboard.Data.IndexTest do
]
end
+ test "/data/top-list sorts by watch time and keeps the period", %{
+ conn: conn,
+ db_name: db_name
+ } do
+ {conn, space} = authenticated_conn(conn)
+ {:ok, short} = Embeds.create_video_embed(space)
+ {:ok, long} = Embeds.create_video_embed(space)
+
+ # Two short views against one long view.
+ rows =
+ [{short.hash, 1, 3}, {short.hash, 2, 3}, {long.hash, 3, 9}]
+ |> Enum.map_join(",\n", fn {embed_hash, session, seconds} ->
+ session_id = "00000000-0000-0000-0000-00000000400#{session}"
+
+ """
+ (addSeconds(now64(6), -30), 'play', '#{session_id}', '#{space.hash}', '#{embed_hash}', 0.0, 10, 'https://example.com', 'Chrome', '100', 'Mac', '14', 'Desktop', 'Apple'),
+ (addSeconds(now64(6), #{seconds - 30}), 'pause', '#{session_id}', '#{space.hash}', '#{embed_hash}', #{seconds}.0, 10, 'https://example.com', 'Chrome', '100', 'Mac', '14', 'Desktop', 'Apple')
+ """
+ end)
+
+ {:ok, _} =
+ ClickHouseRepo.query("""
+ INSERT INTO #{db_name}.events
+ (timestamp, name, session_id, space_hash, embed_hash, video_time, duration, source_url, browser, browser_version, os, os_version, device, device_brand)
+ VALUES
+ #{rows}
+ """)
+
+ {:ok, view, _html} = live(conn, "/data/top-list?period=7d")
+ _ = render_async(view, 5_000)
+ assert top_list_links(view) == ["/videos/#{short.id}", "/videos/#{long.id}"]
+
+ view |> element(~s(#data-top-list a[data-sort="watch_time"])) |> render_click()
+ assert_patch(view, "/data/top-list?period=7d&sort=watch_time")
+ _ = render_async(view, 5_000)
+
+ assert top_list_links(view) == ["/videos/#{long.id}", "/videos/#{short.id}"]
+ assert has_element?(view, ~s(#data-top-list a[aria-sort="descending"]), "Watch time")
+ end
+
+ defp top_list_links(view) do
+ view
+ |> render()
+ |> LazyHTML.from_fragment()
+ |> LazyHTML.query("#data-top-list tbody a")
+ |> Enum.map(&LazyHTML.attribute(&1, "href"))
+ |> List.flatten()
+ end
+
defp authenticated_conn(conn, space_hash \\ nil) do
email = "data-index-#{System.unique_integer([:positive])}@example.com"
{:ok, user} = Accounts.create_user(email)