Introduce LV version of pages breakdown (#5953)

* Adjust defaults in `DashboardQueryParser`

* Add dedicated link and bar components in `Base`

* Introduce `Metric.value` component

* Implement basic `ReportList` component

* Use `ReportList` component in LV pages breakdown

* Make tile styling more in line with react one

* Fix Phoenix/LV spinner opacity

* Prevent repeat tab opening

* Implement optimistic load state for tile on tab switch

* Add custom variant for phx-hook-loading

* Make tabs use data attribute and reliably set state

* Use native hook API for setting data attributes

* Drop default adjustments from DashboardQueryParser

* Handle filters with ParsedQueryParams API and fix param defaults

* Fix fetching max visitors for empty report list

* Handle poorly formed URIs sent to dashboard gracefully

* Defer query building until all parameters are known

* Get rid of whitespace

* Drop unnecessary phx-update=ignore from tabs component

* Implement loading state for navigation events

Author: zoldar

assets/css/app.css

@@ -115,6 +115,7 @@
 
 @custom-variant dark (&:where(.dark, .dark *));
 @custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &);
+@custom-variant phx-hook-loading (.phx-hook-loading&, .phx-hook-loading &);
 @custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &);
 @custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &);
 

assets/js/liveview/dashboard_root.js

@@ -6,10 +6,26 @@
 
 import { buildHook } from './hook_builder'
 
+function navigateWithLoader(url) {
+  this.portalTargets.map((target) => {
+    this.js().addClass(document.querySelector(target), 'phx-navigation-loading')
+
+    this.pushEvent('handle_dashboard_params', { url: url }, () => {
+      this.js().removeClass(
+        document.querySelector(target),
+        'phx-navigation-loading'
+      )
+    })
+  })
+}
+
 export default buildHook({
   initialize() {
     this.url = window.location.href
 
+    const portals = document.querySelectorAll('[data-phx-portal]')
+    this.portalTargets = Array.from(portals, (p) => p.dataset.phxPortal)
+
     this.addListener('click', document.body, (e) => {
       const type = e.target.dataset.type || null
 
@@ -26,7 +42,7 @@ export default buildHook({
           })
         )
 
-        this.pushEvent('handle_dashboard_params', { url: this.url })
+        navigateWithLoader.bind(this)(this.url)
 
         e.preventDefault()
       }
@@ -35,9 +51,7 @@ export default buildHook({
     // Browser back and forward navigation triggers that event.
     this.addListener('popstate', window, () => {
       if (this.url !== window.location.href) {
-        this.pushEvent('handle_dashboard_params', {
-          url: window.location.href
-        })
+        navigateWithLoader.bind(this)(window.location.href)
       }
     })
 
@@ -48,9 +62,7 @@ export default buildHook({
         typeof e.detail.search === 'string' &&
         this.url !== window.location.href
       ) {
-        this.pushEvent('handle_dashboard_params', {
-          url: window.location.href
-        })
+        navigateWithLoader.bind(this)(window.location.href)
       }
     })
   }

assets/js/liveview/dashboard_tabs.js

@@ -17,27 +17,32 @@ export default buildHook({
     this.addListener('click', this.el, (e) => {
       const button = e.target.closest('button')
       const tab = button && button.dataset.tab
+      const span = button && button.querySelector('span')
 
-      if (tab) {
+      if (span && span.dataset.active === 'false') {
         const label = button.dataset.label
         const storageKey = button.dataset.storageKey
-        const activeClasses = button.dataset.activeClasses
-        const inactiveClasses = button.dataset.inactiveClasses
-        const title = this.el
-          .closest('[data-tile]')
-          .querySelector('[data-title]')
+        const target = button.dataset.target
+        const tile = this.el.closest('[data-tile]')
+        const title = tile.querySelector('[data-title]')
 
         title.innerText = label
 
         this.el.querySelectorAll(`button[data-tab] span`).forEach((s) => {
-          s.className = inactiveClasses
+          this.js().setAttribute(s, 'data-active', 'false')
         })
 
-        button.querySelector('span').className = activeClasses
+        this.js().setAttribute(
+          button.querySelector('span'),
+          'data-active',
+          'true'
+        )
 
         if (storageKey) {
           localStorage.setItem(`${storageKey}__${domain}`, tab)
         }
+
+        this.pushEventTo(target, 'set-tab', { tab: tab })
       }
     })
   }

lib/plausible/stats/dashboard_query_parser.ex

@@ -28,9 +28,9 @@ defmodule Plausible.Stats.DashboardQueryParser do
 
   def default_pagination(), do: @default_pagination
 
-  def parse(query_string) when is_binary(query_string) do
+  def parse(query_string, defaults \\ %{}) when is_binary(query_string) do
     query_string = String.trim_leading(query_string, "?")
-    params_map = URI.decode_query(query_string)
+    params_map = Map.merge(defaults, URI.decode_query(query_string))
 
     with {:ok, filters} <- parse_filters(query_string),
          {:ok, relative_date} <- parse_relative_date(params_map) do

lib/plausible/stats/parsed_query_params.ex

@@ -19,6 +19,14 @@ defmodule Plausible.Stats.ParsedQueryParams do
     struct!(__MODULE__, Map.to_list(params))
   end
 
+  def set(params, keywords) do
+    struct!(params, keywords)
+  end
+
+  def set_include(params, key, value) do
+    struct!(params, include: struct!(params.include, [{key, value}]))
+  end
+
   @props_prefix "event:props:"
 
   def add_or_replace_filter(%__MODULE__{filters: filters} = parsed_query_params, new_filter) do

lib/plausible_web/components/generic.ex

@@ -425,10 +425,10 @@ defmodule PlausibleWeb.Components.Generic do
       viewBox="0 0 24 24"
       {@rest}
     >
-      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4">
+      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4">
       </circle>
       <path
-        className="opacity-75"
+        class="opacity-75"
         fill="currentColor"
         d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
       >

lib/plausible_web/live/components/dashboard/base.ex

@@ -5,25 +5,83 @@ defmodule PlausibleWeb.Components.Dashboard.Base do
 
   use PlausibleWeb, :component
 
-  attr :href, :string, required: true
+  alias Plausible.Stats.DashboardQuerySerializer
+  alias Plausible.Stats.ParsedQueryParams
+
   attr :site, Plausible.Site, required: true
+  attr :params, :map, required: true
+  attr :path, :string, default: ""
   attr :class, :string, default: ""
   attr :rest, :global
+
   slot :inner_block, required: true
 
   def dashboard_link(assigns) do
-    url = "/" <> assigns.site.domain <> assigns.href
+    query_string = DashboardQuerySerializer.serialize(assigns.params)
+    url = "/" <> assigns.site.domain <> assigns.path
+
+    url =
+      if query_string != "" do
+        url <> "?" <> query_string
+      else
+        url
+      end
 
     assigns = assign(assigns, :url, url)
 
     ~H"""
     <.link
       data-type="dashboard-link"
       patch={@url}
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
     </.link>
     """
   end
+
+  attr :site, Plausible.Site, required: true
+  attr :params, :map, required: true
+  attr :filter, :list, required: true
+  attr :class, :string, default: ""
+  attr :rest, :global
+
+  slot :inner_block, required: true
+
+  def filter_link(assigns) do
+    params = ParsedQueryParams.add_or_replace_filter(assigns.params, assigns.filter)
+
+    assigns = assign(assigns, :params, params)
+
+    ~H"""
+    <.dashboard_link site={@site} params={@params} class={@class} {@rest}>
+      {render_slot(@inner_block)}
+    </.dashboard_link>
+    """
+  end
+
+  attr :style, :string, default: ""
+  attr :background_class, :string, default: ""
+  attr :width, :integer, required: true
+  attr :max_width, :integer, required: true
+
+  slot :inner_block, required: true
+
+  def bar(assigns) do
+    width_percent = assigns.width / assigns.max_width * 100
+
+    assigns = assign(assigns, :width_percent, width_percent)
+
+    ~H"""
+    <div class="w-full h-full relative" style={@style}>
+      <div
+        class={"absolute top-0 left-0 h-full rounded-sm transition-colors duration-150 #{@background_class || ""}"}
+        style={"width: #{@width_percent}%"}
+      >
+      </div>
+      {render_slot(@inner_block)}
+    </div>
+    """
+  end
 end

lib/plausible_web/live/components/dashboard/metric.ex

@@ -0,0 +1,60 @@
+defmodule PlausibleWeb.Components.Dashboard.Metric do
+  @moduledoc """
+  Components for rendering metric data.
+  """
+
+  use PlausibleWeb, :component
+
+  @formatters %{
+    visitors: :number_short,
+    conversion_rate: :percentage
+  }
+
+  attr :name, :atom, required: true
+  attr :value, :any
+
+  def value(assigns) do
+    ~H"""
+    <div class="cursor-default">
+      {format_value(@name, @value)}
+    </div>
+    """
+  end
+
+  defp format_value(name, value) do
+    apply_format(@formatters[name], value)
+  end
+
+  @hundred_billion :math.pow(10, 11)
+  @billion :math.pow(10, 9)
+  @hundred_million :math.pow(10, 8)
+  @million :math.pow(10, 6)
+  @hundred_thousand :math.pow(10, 5)
+  @thousand :math.pow(10, 3)
+
+  defp apply_format(:number_short, value) when is_number(value) do
+    cond do
+      value >= @hundred_billion -> divided(value, @billion)
+      value >= @billion -> divided(value, @billion, 2)
+      value >= @hundred_million -> divided(value, @million)
+      value >= @million -> divided(value, @million, 2)
+      value >= @hundred_thousand -> divided(value, @thousand)
+      value >= @thousand -> divided(value, @thousand, 2)
+      true -> value
+    end
+  end
+
+  defp apply_format(:number_short, _), do: "-"
+
+  defp apply_format(:percentage, value) do
+    if value do
+      :erlang.float_to_binary(value, decimals: 2) <> "%"
+    else
+      "-"
+    end
+  end
+
+  defp divided(value, divisor, precision \\ 0) do
+    :erlang.float_to_binary(value / divisor, decimals: precision)
+  end
+end