diff --git a/assets/css/app.css b/assets/css/app.css index d55345e46a1b..da50dcce33a2 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -105,6 +105,22 @@ --default-ring-color: var(--color-indigo-500); } +@layer utilities { + .animate-pulse { + animation: pulse 1.25s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; + } + + [class*='group/report']:has(.tile-tabs.phx-hook-loading) + [class*='group-has-[.tile-tabs.phx-hook-loading]/report:animate-pulse'] { + animation: pulse 1.25s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; + } + + [class*='group/dashboard'].phx-navigation-loading + [class*='group-[.phx-navigation-loading]/dashboard:animate-pulse'] { + animation: pulse 1.25s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; + } +} + @media print { canvas { width: 100% !important; diff --git a/assets/js/dashboard/index.tsx b/assets/js/dashboard/index.tsx index baeb20130f71..f68dabc9cac7 100644 --- a/assets/js/dashboard/index.tsx +++ b/assets/js/dashboard/index.tsx @@ -1,5 +1,4 @@ import React, { useMemo, useState, useEffect, useCallback } from 'react' -import { LiveViewPortal } from './components/liveview-portal' import VisitorGraph from './stats/graph/visitor-graph' import Sources from './stats/sources' import Pages from './stats/pages' @@ -8,11 +7,9 @@ import Devices from './stats/devices' import { TopBar } from './nav-menu/top-bar' import Behaviours from './stats/behaviours' import { useQueryContext } from './query-context' -import { useSiteContext } from './site-context' -import { hasConversionGoalFilter, isRealTimeDashboard } from './util/filters' +import { isRealTimeDashboard } from './util/filters' import { useAppNavigate } from './navigation/use-app-navigate' import { parseSearch } from './util/url-search-params' -import { getDomainScopedStorageKey } from './util/storage' function DashboardStats({ importedDataInView, @@ -22,8 +19,6 @@ function DashboardStats({ updateImportedDataInView?: (v: boolean) => void }) { const navigate = useAppNavigate() - const site = useSiteContext() - const { query } = useQueryContext() // Handler for navigation events delegated from LiveView dashboard. // Necessary to emulate navigation events in LiveView with pushState diff --git a/assets/js/liveview/datepicker.js b/assets/js/liveview/datepicker.js index 26f18ad95a77..009df572ddd3 100644 --- a/assets/js/liveview/datepicker.js +++ b/assets/js/liveview/datepicker.js @@ -55,13 +55,13 @@ export default buildHook({ this.addListener('click', this.el, (e) => { if (this.dates.length) { const button = e.target.closest('button') - + let updated = false if (button === this.prevPeriodButton) { updated = prevPeriod.bind(this)() } - + if (button === this.nextPeriodButton) { nextPeriod.bind(this)() updated = nextPeriod.bind(this)() @@ -70,7 +70,7 @@ export default buildHook({ if (updated) { this.debouncedPushEvent() } - + this.periodLabel.innerText = this.labels[this.currentIndex] this.prevPeriodButton.dataset.disabled = `${this.currentIndex == 0}` this.nextPeriodButton.dataset.disabled = `${this.currentIndex == this.dates.length - 1}` diff --git a/assets/js/liveview/live_socket.js b/assets/js/liveview/live_socket.js index f5fa9e46d68d..3b92b1b208ad 100644 --- a/assets/js/liveview/live_socket.js +++ b/assets/js/liveview/live_socket.js @@ -104,6 +104,18 @@ if (csrfToken && websocketUrl) { window.addEventListener('phx:page-loading-start', (_info) => topbar.show()) window.addEventListener('phx:page-loading-stop', (_info) => topbar.hide()) + const dashboardContainer = document.getElementById('live-dashboard-container') + if (dashboardContainer) { + window.addEventListener('phx:page-loading-start', (info) => { + if (info.detail?.kind === 'patch') { + dashboardContainer.classList.add('phx-navigation-loading') + } + }) + window.addEventListener('phx:page-loading-stop', () => { + dashboardContainer.classList.remove('phx-navigation-loading') + }) + } + liveSocket.connect() window.liveSocket = liveSocket } diff --git a/lib/plausible_web/live/components/dashboard/base.ex b/lib/plausible_web/live/components/dashboard/base.ex index 096654daf98c..5c809566826a 100644 --- a/lib/plausible_web/live/components/dashboard/base.ex +++ b/lib/plausible_web/live/components/dashboard/base.ex @@ -39,7 +39,7 @@ defmodule PlausibleWeb.Components.Dashboard.Base do ~H"""
diff --git a/lib/plausible_web/live/components/dashboard/report_list.ex b/lib/plausible_web/live/components/dashboard/report_list.ex index 81a1f3948e1a..c064f87af799 100644 --- a/lib/plausible_web/live/components/dashboard/report_list.ex +++ b/lib/plausible_web/live/components/dashboard/report_list.ex @@ -5,9 +5,8 @@ defmodule PlausibleWeb.Components.Dashboard.ReportList do use PlausibleWeb, :component - alias PlausibleWeb.Components.Dashboard.Base - alias PlausibleWeb.Components.Dashboard.Metric - alias Plausible.Stats.QueryResult + alias PlausibleWeb.Components.Dashboard.{Base, Metric} + alias Plausible.Stats.{QueryResult, ParsedQueryParams} alias Plausible.Stats.Dashboard.Utils @max_items 9 @@ -19,6 +18,15 @@ defmodule PlausibleWeb.Components.Dashboard.ReportList do def height, do: @min_height + attr :site, Plausible.Site, required: true + attr :id, :string, required: true + attr :params, ParsedQueryParams, required: true + attr :connected?, :boolean, required: true + attr :dimension, :string, required: true + attr :key_label, :string, required: true + attr :query_result, QueryResult, required: true + attr :external_link_fn, :any, default: nil + def report(assigns) do assigns = assign(assigns, @@ -30,44 +38,120 @@ defmodule PlausibleWeb.Components.Dashboard.ReportList do col_min_width: @col_min_width ) - %QueryResult{results: results, meta: meta, query: query} = assigns.query_result + if !assigns.connected? do + ~H""" + <.skeleton + id={"#{@id}-skeleton"} + min_height={@min_height} + row_height={@row_height} + row_gap_height={@row_gap_height} + data_container_height={@data_container_height} + col_min_width={@col_min_width} + max_items={@max_items} + /> + """ + else + %QueryResult{results: results, meta: meta, query: query} = assigns.query_result + + assigns = + assign(assigns, + results: results, + metric_keys: query[:metrics], + metric_labels: meta[:metric_labels], + empty?: Enum.empty?(results) + ) + + ~H""" + <.no_data :if={@empty?} min_height={@min_height} id={"#{@id}-no-data"} /> + +
+
+ <.report_header + key_label={@key_label} + metric_labels={@metric_labels} + col_min_width={@col_min_width} + /> +
+
+ <.report_row + :for={{item, item_index} <- Enum.with_index(@results)} + link_fn={assigns[:external_link_fn]} + item={item} + item_index={item_index} + item_name={List.first(item.dimensions)} + metrics={Enum.zip(@metric_keys, item.metrics)} + bar_max_value={bar_max_value(@results, @metric_keys)} + site={@site} + params={@params} + dimension={@dimension} + row_height={@row_height} + row_gap_height={@row_gap_height} + col_min_width={@col_min_width} + /> +
+
+ """ + end + end + + defp skeleton(assigns) do assigns = - assign(assigns, - results: results, - metric_keys: query[:metrics], - metric_labels: meta[:metric_labels], - empty?: Enum.empty?(results) - ) + assigns + |> assign(:bar_widths, [100, 45, 25, 14, 10, 7, 5, 4, 3]) + |> assign(:number_widths, [9, 8, 7, 8, 9, 7, 9, 7, 8]) + |> assign(:value_widths, [22, 16, 20, 14, 19, 15, 21, 13, 17]) ~H""" - <.no_data :if={@empty?} min_height={@min_height} data_test_id={@data_test_id} /> - -
-
- <.report_header - key_label={@key_label} - metric_labels={@metric_labels} - col_min_width={@col_min_width} - /> +
+
+
- -
- <.report_row - :for={{item, item_index} <- Enum.with_index(@results)} - link_fn={assigns[:external_link_fn]} - item={item} - item_index={item_index} - item_name={List.first(item.dimensions)} - metrics={Enum.zip(@metric_keys, item.metrics)} - bar_max_value={bar_max_value(@results, @metric_keys)} - site={@site} - params={@params} - dimension={@dimension} - row_height={@row_height} - row_gap_height={@row_gap_height} - col_min_width={@col_min_width} - /> +
+
+
+
+
+
+
+
+
""" @@ -76,8 +160,8 @@ defmodule PlausibleWeb.Components.Dashboard.ReportList do defp no_data(assigns) do ~H"""
@@ -149,7 +233,7 @@ defmodule PlausibleWeb.Components.Dashboard.ReportList do >
{trim_name(@item_name, @col_min_width)} diff --git a/lib/plausible_web/live/components/dashboard/tile.ex b/lib/plausible_web/live/components/dashboard/tile.ex index 7268df71621e..0b1aa36da589 100644 --- a/lib/plausible_web/live/components/dashboard/tile.ex +++ b/lib/plausible_web/live/components/dashboard/tile.ex @@ -23,7 +23,7 @@ defmodule PlausibleWeb.Components.Dashboard.Tile do
<%!-- reportheader --%>
@@ -37,28 +37,14 @@ defmodule PlausibleWeb.Components.Dashboard.Tile do > {render_slot(@tabs)}
-
+
{render_slot(@warnings)}
- <.details_link details_route={@details_route} path="/pages" /> + <.details_link :if={@connected?} details_route={@details_route} path="/pages" />
<%!-- reportbody --%> -
-
-
-
-
- -
- {render_slot(@inner_block)} -
+ {render_slot(@inner_block)}
""" end @@ -68,6 +54,7 @@ defmodule PlausibleWeb.Components.Dashboard.Tile do attr :active_tab, :string, required: true attr :storage_key, :string, required: true attr :target, :any, required: true + attr :connected?, :boolean, default: true def tab(assigns) do assigns = @@ -83,9 +70,10 @@ defmodule PlausibleWeb.Components.Dashboard.Tile do ~H"""
+
+
""" end diff --git a/lib/plausible_web/live/dashboard.ex b/lib/plausible_web/live/dashboard.ex index e8bcc5bf4249..24bb2d67bb22 100644 --- a/lib/plausible_web/live/dashboard.ex +++ b/lib/plausible_web/live/dashboard.ex @@ -69,17 +69,22 @@ defmodule PlausibleWeb.Live.Dashboard do
- <.live_component - module={PlausibleWeb.Live.Dashboard.DatePicker} - id="datepicker-component" - site={@site} - user_prefs={@user_prefs} - connected?={@connected?} - params={@params} - /> +
+ <.live_component + module={PlausibleWeb.Live.Dashboard.DatePicker} + id="datepicker-component" + site={@site} + user_prefs={@user_prefs} + connected?={@connected?} + params={@params} + /> +
+
+
+
<.live_component module={PlausibleWeb.Live.Dashboard.Sources} diff --git a/lib/plausible_web/live/dashboard/datepicker.ex b/lib/plausible_web/live/dashboard/datepicker.ex index 6fbd1608e3d2..774de1662018 100644 --- a/lib/plausible_web/live/dashboard/datepicker.ex +++ b/lib/plausible_web/live/dashboard/datepicker.ex @@ -50,7 +50,7 @@ defmodule PlausibleWeb.Live.Dashboard.DatePicker do data-current-index={@current_date_index} data-dates={JSON.encode!(@quick_navigation_dates)} data-labels={JSON.encode!(@quick_navigation_labels)} - class="flex shrink-0" + class="group flex shrink-0" >
- + {@selected_label} diff --git a/lib/plausible_web/live/dashboard/pages.ex b/lib/plausible_web/live/dashboard/pages.ex index fa8ebad7cc30..5f78644ee8ae 100644 --- a/lib/plausible_web/live/dashboard/pages.ex +++ b/lib/plausible_web/live/dashboard/pages.ex @@ -53,7 +53,7 @@ defmodule PlausibleWeb.Live.Dashboard.Pages do def render(assigns) do ~H""" -
+
diff --git a/lib/plausible_web/live/dashboard/sources.ex b/lib/plausible_web/live/dashboard/sources.ex index bd76e333e213..8128c02108d4 100644 --- a/lib/plausible_web/live/dashboard/sources.ex +++ b/lib/plausible_web/live/dashboard/sources.ex @@ -57,7 +57,7 @@ defmodule PlausibleWeb.Live.Dashboard.Sources do def render(assigns) do ~H""" -
+
diff --git a/test/plausible_web/live/components/dashboard/report_list_test.exs b/test/plausible_web/live/components/dashboard/report_list_test.exs index 84e5e381d1d8..f6d68695effb 100644 --- a/test/plausible_web/live/components/dashboard/report_list_test.exs +++ b/test/plausible_web/live/components/dashboard/report_list_test.exs @@ -6,13 +6,14 @@ defmodule PlausibleWeb.Components.Dashboard.ReportListTest do alias Plausible.Stats.{ParsedQueryParams, QueryResult} import Plausible.DashboardTestUtils - @report_list_selector ~s|[data-test-id="pages-report-list"]| + @report_list_selector "#pages-report-list" @bar_indicator_selector ~s|[data-test-id="bar-indicator"]| setup do assigns = [ site: build(:site), - data_test_id: "pages-report-list", + id: "pages-report-list", + connected?: true, key_label: "Page", dimension: "event:page", params: %ParsedQueryParams{}, diff --git a/test/plausible_web/live/dashboard/pages_test.exs b/test/plausible_web/live/dashboard/pages_test.exs index 09ba90600199..7add543dbfa0 100644 --- a/test/plausible_web/live/dashboard/pages_test.exs +++ b/test/plausible_web/live/dashboard/pages_test.exs @@ -6,9 +6,9 @@ defmodule PlausibleWeb.Live.Dashboard.PagesTest do setup [:create_user, :log_in, :create_site] - @top_pages_report_list ~s|[data-test-id="pages-report-list"]| - @entry_pages_report_list ~s|[data-test-id="entry-pages-report-list"]| - @exit_pages_report_list ~s|[data-test-id="exit-pages-report-list"]| + @top_pages_report_list "#pages-report-list" + @entry_pages_report_list "#entry-pages-report-list" + @exit_pages_report_list "#exit-pages-report-list" @unsupported_filters_warning ~s|#breakdown-tile-pages [data-test-id="unsupported-filters-warning"]| describe "Top Pages" do