Liveview dashboard details modals

assets/js/liveview/dashboard_root.js

@@ -6,17 +6,25 @@
 
 import { buildHook } from './hook_builder'
 
-function navigateWithLoader(url) {
-  this.portalTargets.map((target) => {
-    this.js().addClass(document.querySelector(target), 'phx-navigation-loading')
+const MODAL_ROUTES = {
+  '/pages': '#pages-breakdown-details-modal',
+  '/entry-pages': '#entry-pages-breakdown-details-modal',
+  '/exit-pages': '#exit-pages-breakdown-details-modal',
+  '/sources': '#sources-breakdown-details-modal',
+  '/channels': '#channels-breakdown-details-modal',
+  '/utm_medium': '#utm-mediums-breakdown-details-modal'
+}
 
-    this.pushEvent('handle_dashboard_params', { url: url }, () => {
-      this.js().removeClass(
-        document.querySelector(target),
-        'phx-navigation-loading'
-      )
-    })
-  })
+function routeModal(path) {
+  const modalId = MODAL_ROUTES[path]
+
+  if (modalId) {
+    const modal = document.querySelector(modalId)
+
+    if (modal) {
+      modal.dispatchEvent(new Event('prima:modal:open'))
+    }
+  }
 }
 
 export default buildHook({
@@ -26,39 +34,16 @@ export default buildHook({
     this.url = window.location.href
 
     this.addListener('click', document.body, (e) => {
-      const type = e.target.dataset.type || null
+      const link = e.target.closest('[data-phx-link]')
+      const type = link && (link.dataset.type || null)
 
       if (type === 'dashboard-link') {
-        const uri = new URL(e.target.href)
+        const uri = new URL(link.href)
         // Domain is dropped from URL prefix, because that's what react-dom-router
         // expects.
         const path = '/' + uri.pathname.split('/').slice(2).join('/')
-        this.el.dispatchEvent(
-          new CustomEvent('dashboard:live-navigate', {
-            bubbles: true,
-            detail: { path: path, search: uri.search }
-          })
-        )
-
-        e.preventDefault()
-      }
-    })
-
-    // Browser back and forward navigation triggers that event.
-    this.addListener('popstate', window, () => {
-      if (this.url !== window.location.href) {
-        navigateWithLoader.bind(this)(window.location.href)
-      }
-    })
 
-    // Navigation events triggered from liveview are propagated via this
-    // handler.
-    this.addListener('dashboard:live-navigate-back', window, (e) => {
-      if (
-        typeof e.detail.search === 'string' &&
-        this.url !== window.location.href
-      ) {
-        navigateWithLoader.bind(this)(window.location.href)
+        routeModal(path)
       }
     })
   }

lib/plausible/stats/dashboard/utils.ex

@@ -19,7 +19,7 @@ defmodule Plausible.Stats.Dashboard.Utils do
     end
   end
 
-  def dashboard_route(%Site{} = site, %ParsedQueryParams{} = params, opts) do
+  def dashboard_route(%Site{} = site, %ParsedQueryParams{} = params, opts \\ []) do
     path = Keyword.get(opts, :path, "")
 
     params =

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

@@ -5,6 +5,8 @@ defmodule PlausibleWeb.Components.Dashboard.Base do
 
   use PlausibleWeb, :component
 
+  alias Prima.Modal
+
   attr :to, :string, required: true
   attr :class, :string, default: ""
   attr :rest, :global
@@ -48,4 +50,73 @@ defmodule PlausibleWeb.Components.Dashboard.Base do
     </div>
     """
   end
+
+  attr :id, :string, required: true
+  attr :on_close, JS, default: %JS{}
+  attr :show, :boolean, default: false
+  attr :ready, :boolean, default: true
+  slot :inner_block, required: true
+
+  def modal(assigns) do
+    ~H"""
+    <div
+      :if={@show and not @ready}
+      transition_enter={JS.show(transition: {"ease-out duration-300", "opacity-0", "opacity-100"})}
+      class="fixed inset-0 z-[9999] bg-gray-500/75 dark:bg-gray-800/75"
+    >
+    </div>
+    <div
+      :if={@show and not @ready}
+      class="fixed inset-0 z-[9999] w-screen overflow-y-auto sm:pt-[10vmin]"
+    >
+      <div class="flex min-h-full items-end justify-center p-4 sm:items-start sm:p-0">
+        <div class="mx-auto loading">
+          <div></div>
+        </div>
+      </div>
+    </div>
+    <Modal.modal id={@id} on_close={@on_close} show={@show}>
+      <Modal.modal_overlay
+        transition_enter={{"ease-out duration-300", "opacity-0", "opacity-100"}}
+        transition_leave={{"ease-in duration-200", "opacity-100", "opacity-0"}}
+        class="fixed inset-0 z-[9999] bg-gray-500/75 dark:bg-gray-800/75"
+      />
+
+      <div class="fixed inset-0 z-[9999] w-screen overflow-y-auto sm:pt-[10vmin]">
+        <div class="flex min-h-full items-end justify-center p-4 sm:items-start sm:p-0">
+          <Modal.modal_loader>
+            <div :if={not @ready} class="mx-auto loading">
+              <div></div>
+            </div>
+          </Modal.modal_loader>
+          <Modal.modal_panel
+            :if={@ready}
+            id={@id <> "-panel"}
+            class="relative overflow-hidden rounded-lg bg-white dark:bg-gray-900 text-left shadow-xl sm:w-full sm:max-w-lg"
+            transition_enter={
+              {"ease-out duration-300", "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+               "opacity-100 translate-y-0 sm:scale-100"}
+            }
+            transition_leave={
+              {"ease-in duration-200", "opacity-100 translate-y-0 sm:scale-100",
+               "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"}
+            }
+          >
+            {render_slot(@inner_block)}
+          </Modal.modal_panel>
+        </div>
+      </div>
+    </Modal.modal>
+    """
+  end
+
+  slot :inner_block, required: true
+
+  def modal_title(assigns) do
+    ~H"""
+    <Modal.modal_title as={&h2/1} class="text-lg font-semibold text-gray-900 dark:text-gray-100">
+      {render_slot(@inner_block)}
+    </Modal.modal_title>
+    """
+  end
 end

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

@@ -37,15 +37,15 @@ defmodule PlausibleWeb.Components.Dashboard.Tile do
           >
             {render_slot(@tabs)}
           </div>
-          <div class="group-[.phx-navigation-loading]:hidden group-has-[.tile-tabs.phx-hook-loading]:hidden">
+          <div class="group-has-[.phx-click-loading]:hidden group-has-[.tile-tabs.phx-hook-loading]:hidden">
             {render_slot(@warnings)}
           </div>
         </div>
         <.details_link details_route={@details_route} path="/pages" />
       </div>
       <%!-- reportbody --%>
       <div
-        class={"w-full flex-col justify-center #{if @connected?, do: "group-[.phx-navigation-loading]:flex group-has-[.tile-tabs.phx-hook-loading]:flex hidden", else: "flex"}"}
+        class={"w-full flex-col justify-center #{if @connected?, do: "group-has-[.phx-click-loading]:flex group-has-[.tile-tabs.phx-hook-loading]:flex hidden", else: "flex"}"}
         style={"min-height: #{@height}px;"}
       >
         <div class="mx-auto loading">
@@ -55,7 +55,7 @@ defmodule PlausibleWeb.Components.Dashboard.Tile do
 
       <div
         :if={@connected?}
-        class="group-[.phx-navigation-loading]:hidden group-has-[.tile-tabs.phx-hook-loading]:hidden"
+        class="group-has-[.phx-click-loading]:hidden group-has-[.tile-tabs.phx-hook-loading]:hidden"
       >
         {render_slot(@inner_block)}
       </div>
@@ -113,8 +113,10 @@ defmodule PlausibleWeb.Components.Dashboard.Tile do
 
   defp details_link(assigns) do
     ~H"""
+    <.spinner data-details-link-spinner class="w-4 h-4" class="hidden" />
+
     <Base.dashboard_link
-      class="flex mt-px text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-150"
+      class="details-link flex mt-px text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-150"
       to={@details_route}
     >
       <svg

lib/plausible_web/live/dashboard.ex

@@ -97,6 +97,61 @@ defmodule PlausibleWeb.Live.Dashboard do
         connected?={@connected?}
         params={@params}
       />
+      <.live_component
+        module={PlausibleWeb.Live.Dashboard.PagesDetails}
+        id="pages-breakdown-details-component"
+        site={@site}
+        user_prefs={@user_prefs}
+        connected?={@connected?}
+        params={@params}
+        open?={@path == ["pages"]}
+      />
+      <.live_component
+        module={PlausibleWeb.Live.Dashboard.EntryPagesDetails}
+        id="entry-pages-breakdown-details-component"
+        site={@site}
+        user_prefs={@user_prefs}
+        connected?={@connected?}
+        params={@params}
+        open?={@path == ["entry-pages"]}
+      />
+      <.live_component
+        module={PlausibleWeb.Live.Dashboard.ExitPagesDetails}
+        id="exit-pages-breakdown-details-component"
+        site={@site}
+        user_prefs={@user_prefs}
+        connected?={@connected?}
+        params={@params}
+        open?={@path == ["exit-pages"]}
+      />
+      <.live_component
+        module={PlausibleWeb.Live.Dashboard.SourcesDetails}
+        id="sources-breakdown-details-component"
+        site={@site}
+        user_prefs={@user_prefs}
+        connected?={@connected?}
+        params={@params}
+        open?={@path == ["sources"]}
+      />
+      <.live_component
+        module={PlausibleWeb.Live.Dashboard.ChannelsDetails}
+        id="channels-breakdown-details-component"
+        site={@site}
+        user_prefs={@user_prefs}
+        connected?={@connected?}
+        params={@params}
+        open?={@path == ["channels"]}
+      />
+      <.live_component
+        module={PlausibleWeb.Live.Dashboard.UtmMediumsDetails}
+        id="utm-mediums-breakdown-details-component"
+        site={@site}
+        user_prefs={@user_prefs}
+        connected?={@connected?}
+        params={@params}
+        open?={@path == ["utm_medium"]}
+      />
+
     </div>
     """
   end

lib/plausible_web/live/dashboard/channels_details.ex

@@ -0,0 +1,91 @@
+defmodule PlausibleWeb.Live.Dashboard.ChannelsDetails do
+  @moduledoc """
+  Channels details modal breakdown component.
+  """
+
+  use PlausibleWeb, :live_component
+
+  alias Plausible.Stats
+  alias Plausible.Stats.Dashboard.Utils
+  alias Plausible.Stats.ParsedQueryParams
+  alias Plausible.Stats.QueryBuilder
+  alias Plausible.Stats.QueryResult
+  alias PlausibleWeb.Components.Dashboard.ReportList
+
+  import PlausibleWeb.Components.Dashboard.Base
+
+  @pagination %{limit: 50, offset: 0}
+
+  def update(assigns, socket) do
+    close_url = Utils.dashboard_route(assigns.site, assigns.params)
+
+    socket =
+      assign(socket,
+        site: assigns.site,
+        params: assigns.params,
+        open?: assigns.open?,
+        connected?: assigns.connected?,
+        close_url: close_url
+      )
+      |> load_stats()
+
+    {:ok, socket}
+  end
+
+  def render(assigns) do
+    ~H"""
+    <div>
+      <.modal
+        id="channels-breakdown-details-modal"
+        on_close={JS.patch(@close_url)}
+        show={@open?}
+        ready={@connected?}
+      >
+        <.modal_title>
+          Channels
+        </.modal_title>
+
+        <div class="group w-full h-full border-0 overflow-hidden">
+          <ReportList.report
+            site={@site}
+            data_test_id="channels-detailed-list"
+            key_label="Channel"
+            dimension="visit:channel"
+            params={@params}
+            query_result={@query_result}
+            external_link_fn={Utils.page_external_link_fn_for(@site)}
+          />
+        </div>
+      </.modal>
+    </div>
+    """
+  end
+
+  defp load_stats(socket) do
+    %{site: site, params: params} = socket.assigns
+
+    metrics = choose_metrics(params)
+
+    params =
+      params
+      |> ParsedQueryParams.set(
+        metrics: metrics,
+        dimensions: ["visit:channel"],
+        pagination: @pagination
+      )
+
+    query = QueryBuilder.build!(site, params)
+
+    %QueryResult{} = query_result = Stats.query(site, query)
+
+    assign(socket, :query_result, query_result)
+  end
+
+  defp choose_metrics(%ParsedQueryParams{} = params) do
+    if ParsedQueryParams.conversion_goal_filter?(params) do
+      [:visitors, :group_conversion_rate]
+    else
+      [:visitors]
+    end
+  end
+end