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