Improves the Stats Page

BUILDIT.md

@@ -4255,7 +4255,7 @@ We will do this shortly!
 But first, let's implement `Item.person_with_item_and_timer_count()`.
 
 
-In `lib/app/item.ex`,
+In `lib/app/stats.ex`,
 add the following function.
 
 ```elixir
@@ -4272,7 +4272,6 @@ add the following function.
 
  Ecto.Adapters.SQL.query!(Repo, sql)
  |> map_columns_to_values()
-
  end
 ```
 
@@ -4573,7 +4572,7 @@ The *last* thing we need to do
 is to add a test for the `person_with_item_and_timer_count/0`
 function that was implemented inside `lib/app/item.ex`.
 
-Open `test/app/item_test.exs`
+Open `test/app/stats_test.exs`
 and add this test.
 
 ```elixir
@@ -4615,6 +4614,10 @@ when creating `timers` or `items`.
 
 ![stats_final](https://user-images.githubusercontent.com/17494745/211345854-c541d21c-4289-4576-8fcf-c3b89251ed02.gif)
 
+
+> **Note**: more stats docs in: 
+[dwyl.github.io/book/mvp/stats](https://dwyl.github.io/book/mvp/20-stats.html)
+
 # 13. Tracking changes of `items` in database
 
 Tracking changes that each `item` is subjected to
@@ -4884,6 +4887,12 @@ in a simple table.
 Let's roll!
 
 
+> ![NOTE]
+> If you want to see an upgraded version with more columns and sortable columns,
+> do check our [`dwyl/book`](https://dwyl.github.io/book/mvp/20-stats.html).
+> It has a run-through of a different stats page that might interest you 😊.
+
+
 ## 14.1 Adding new `LiveView` page in `/stats`
 
 

lib/app/date_time_helper.ex

@@ -0,0 +1,18 @@
+defmodule App.DateTimeHelper do
+ require Decimal
+ alias Timex.{Duration}
+
+ def format_date(date) do
+ Calendar.strftime(date, "%m/%d/%Y %H:%M:%S")
+ end
+
+ def format_duration(nil), do: ""
+
+ def format_duration(seconds) when Decimal.is_decimal(seconds) do
+ duration = seconds |> Decimal.to_integer() |> Duration.from_seconds()
+
+ Timex.format_duration(duration, :humanized)
+ end
+
+ def format_duration(_seconds), do: ""
+end

lib/app/item.ex

@@ -224,33 +224,6 @@ defmodule App.Item do
  end)
  end
 
- @doc """
- `person_with_item_and_timer_count/0` returns a list of number of timers and items per person.
- Used mainly for metric-tracking purposes.
-
- ## Examples
-
- iex> person_with_item_and_timer_count()
- [
- %{name: nil, num_items: 3, num_timers: 8, person_id: 0}
- %{name: username, num_items: 1, num_timers: 3, person_id: 1}
- ]
- """
- def person_with_item_and_timer_count() do
- sql = """
- SELECT i.person_id,
- COUNT(distinct i.id) AS "num_items",
- COUNT(distinct t.id) AS "num_timers"
- FROM items i
- LEFT JOIN timers t ON t.item_id = i.id
- GROUP BY i.person_id
- ORDER BY i.person_id
- """
-
- Ecto.Adapters.SQL.query!(Repo, sql)
- |> map_columns_to_values()
- end
-
  @doc """
  `map_columns_to_values/1` takes an Ecto SQL query result
  which has the List of columns and rows separate

lib/app/stats.ex

@@ -0,0 +1,113 @@
+defmodule App.Stats do
+ alias App.Repo
+ require Logger
+
+ @doc """
+ `person_with_item_and_timer_count/2` returns a list of number of timers and items per person
+ sorted by column and order
+ Used mainly for metric-tracking purposes.
+
+ ## Sample:
+
+ App.Stats.person_with_item_and_timer_count()
+ [
+ %{name: nil, num_items: 3, num_timers: 8, person_id: 0},
+ %{name: "username", num_items: 1, num_timers: 3, person_id: 1}
+ ]
+
+ App.Stats.person_with_item_and_timer_count(:person_id, :desc)
+ [
+ %{name: "username", num_items: 1, num_timers: 3, person_id: 1},
+ %{name: nil, num_items: 3, num_timers: 8, person_id: 0}
+ ]
+ """
+ def person_with_item_and_timer_count(
+ sort_column \\ :person_id,
+ sort_order \\ :asc
+ ) do
+ sort_column = to_string(sort_column)
+ sort_order = to_string(sort_order)
+
+ sort_column =
+ if validate_sort_column(sort_column), do: sort_column, else: "person_id"
+
+ sort_order = if validate_order(sort_order), do: sort_order, else: "asc"
+
+ sql = """
+ SELECT i.person_id,
+ COUNT(distinct i.id) AS "num_items",
+ COUNT(distinct t.id) AS "num_timers",
+ MIN(i.inserted_at) AS "first_inserted_at",
+ MAX(i.inserted_at) AS "last_inserted_at",
+ SUM(EXTRACT(EPOCH FROM (t.stop - t.start))) AS "total_timers_in_seconds"
+ FROM items i
+ LEFT JOIN timers t ON t.item_id = i.id
+ GROUP BY i.person_id
+ ORDER BY #{sort_column} #{sort_order}
+ """
+
+ Ecto.Adapters.SQL.query!(Repo, sql)
+ |> map_columns_to_values()
+ end
+
+ @doc """
+ `map_columns_to_values/1` takes an Ecto SQL query result
+ which has the List of columns and rows separate
+ and returns a List of Maps where the keys are the column names and values the data.
+
+ Sadly, Ecto returns rows without column keys so we have to map them manually:
+ ref: https://groups.google.com/g/elixir-ecto/c/0cubhSd3QS0/m/DLdQsFrcBAAJ
+ """
+ def map_columns_to_values(res) do
+ Enum.map(res.rows, fn row ->
+ Enum.zip(res.columns, row)
+ |> Map.new()
+ |> AtomicMap.convert(safe: false)
+ end)
+ end
+
+ @doc """
+ `validate_sort_column/1` validates the column name is in items columns
+ to make sure it's a valid column passed.
+
+ ## Examples
+
+ iex> App.Stats.validate_sort_column("person_id")
+ true
+
+ iex> App.Stats.validate_sort_column(:invalid)
+ false
+
+ # Avoid ";" character used SQL Injection: e.g: "; DROP TABLE items"
+ iex> App.Stats.validate_sort_column(";")
+ false
+ """
+ def validate_sort_column(column) do
+ Enum.member?(
+ ~w(person_id num_items num_timers first_inserted_at last_inserted_at total_timers_in_seconds),
+ column
+ )
+ end
+
+ @doc """
+ `validate_order/1` validates the ordering is one of `asc` or `desc`
+
+ ## Examples
+
+ iex> App.Stats.validate_order("asc")
+ true
+
+ iex> App.Stats.validate_order(:invalid)
+ false
+
+ # Avoid common SQL injection attacks:
+ iex> App.Stats.validate_order("OR 1=1")
+ false
+ """
+ def validate_order(order) do
+ Enum.member?(
+ ~w(asc desc),
+ order
+ )
+ end
+end

lib/app_web/live/components/table_component.ex

@@ -0,0 +1,11 @@
+defmodule AppWeb.TableComponent do
+ use Phoenix.LiveComponent
+
+ def render(assigns) do
+ Phoenix.View.render(
+ AppWeb.TableComponentView,
+ "table_component.html",
+ assigns
+ )
+ end
+end

lib/app_web/live/stats_live.ex

@@ -1,24 +1,30 @@
 defmodule AppWeb.StatsLive do
  require Logger
  use AppWeb, :live_view
- alias App.Item
+ alias App.{Stats, DateTimeHelper}
  alias Phoenix.Socket.Broadcast
 
  # run authentication on mount
  on_mount(AppWeb.AuthController)
 
  @stats_topic "stats"
 
+ defp get_person_id(assigns), do: assigns[:person][:id] || 0
+
  @impl true
  def mount(_params, _session, socket) do
  # subscribe to the channel
  if connected?(socket), do: AppWeb.Endpoint.subscribe(@stats_topic)
 
- metrics = Item.person_with_item_and_timer_count()
+ person_id = get_person_id(socket.assigns)
+ metrics = Stats.person_with_item_and_timer_count()
 
  {:ok,
  assign(socket,
- metrics: metrics
+ person_id: person_id,
+ metrics: metrics,
+ sort_column: :person_id,
+ sort_order: :asc
  )}
  end
 
@@ -60,6 +66,29 @@ defmodule AppWeb.StatsLive do
  end
  end
 
+ @impl true
+ def handle_event("sort", %{"key" => key}, socket) do
+ sort_column =
+ key
+ |> String.to_atom()
+
+ sort_order =
+ if socket.assigns.sort_column == sort_column do
+ toggle_sort_order(socket.assigns.sort_order)
+ else
+ :asc
+ end
+
+ metrics = Stats.person_with_item_and_timer_count(sort_column, sort_order)
+
+ {:noreply,
+ assign(socket,
+ metrics: metrics,
+ sort_column: sort_column,
+ sort_order: sort_order
+ )}
+ end
+
  def add_row(row, payload, key) do
  row =
  if row.person_id == payload.person_id do
@@ -74,4 +103,18 @@ defmodule AppWeb.StatsLive do
  def person_link(person_id) do
  "https://auth.dwyl.com/people/#{person_id}"
  end
+
+ def format_date(date) do
+ DateTimeHelper.format_date(date)
+ end
+
+ def format_seconds(seconds) do
+ DateTimeHelper.format_duration(seconds)
+ end
+
+ def is_highlighted_person?(metric, person_id),
+ do: metric.person_id == person_id
+
+ defp toggle_sort_order(:asc), do: :desc
+ defp toggle_sort_order(:desc), do: :asc
 end