Liveview dashboard datepicker

assets/js/liveview/datepicker.js

@@ -0,0 +1,80 @@
+/**
+ * Hook widget for optimistic updates to the datepicker
+ * label when relative date is changed (prev/next period
+ * arrow keys).
+ */
+
+import { buildHook } from './hook_builder'
+
+function prevPeriod() {
+  if (this.currentIndex === 0) {
+    return false
+  } else {
+    this.currentIndex--
+    return true
+  }
+}
+
+function nextPeriod() {
+  if (this.currentIndex === this.dates.length - 1) {
+    return false
+  } else {
+    this.currentIndex++
+    return true
+  }
+}
+
+function debounce(fn, delay) {
+  let timer
+
+  return function (...args) {
+    clearTimeout(timer)
+
+    timer = setTimeout(() => {
+      fn.apply(this, args)
+    }, delay)
+  }
+}
+
+export default buildHook({
+  initialize() {
+    this.currentIndex = parseInt(this.el.dataset.currentIndex)
+    this.dates = JSON.parse(this.el.dataset.dates)
+    this.labels = JSON.parse(this.el.dataset.labels)
+
+    this.prevPeriodButton = this.el.querySelector('button#prev-period')
+    this.nextPeriodButton = this.el.querySelector('button#next-period')
+    this.periodLabel = this.el.querySelector('#period-label')
+
+    this.debouncedPushEvent = debounce(() => {
+      this.pushEventTo(this.el.dataset.target, 'set-relative-date', {
+        date: this.dates[this.currentIndex]
+      })
+    }, 500)
+
+    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)()
+        }
+
+        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}`
+      }
+    })
+  }
+})

assets/js/liveview/live_socket.js

@@ -10,6 +10,7 @@ import { LiveSocket } from 'phoenix_live_view'
 import { Modal, Dropdown } from 'prima'
 import DashboardRoot from './dashboard_root'
 import DashboardTabs from './dashboard_tabs.js'
+import DatePicker from './datepicker'
 import topbar from 'topbar'
 /* eslint-enable import/no-unresolved */
 
@@ -22,7 +23,7 @@ let disablePushStateFlag = document.querySelector(
 )
 let domain = document.querySelector("meta[name='dashboard-domain']")
 if (csrfToken && websocketUrl) {
-  let Hooks = { Modal, Dropdown, DashboardRoot, DashboardTabs }
+  let Hooks = { Modal, Dropdown, DashboardRoot, DashboardTabs, DatePicker }
   Hooks.Metrics = {
     mounted() {
       this.handleEvent('send-metrics', ({ event_name }) => {

extra/lib/plausible_web/live/customer_support/site/components/overview.ex

@@ -20,7 +20,7 @@ defmodule PlausibleWeb.CustomerSupport.Site.Components.Overview do
 
           <.styled_link
             new_tab={true}
-            href={Routes.stats_path(PlausibleWeb.Endpoint, :stats, @site.domain, [])}
+            href={Routes.stats_path(PlausibleWeb.Endpoint, :dashboard, @site.domain, [])}
           >
             Dashboard
           </.styled_link>

extra/lib/plausible_web/live/customer_support/team/components/consolidated_views.ex

@@ -58,7 +58,9 @@ defmodule PlausibleWeb.CustomerSupport.Team.Components.ConsolidatedViews do
             <.td>
               <.styled_link
                 new_tab={true}
-                href={Routes.stats_path(PlausibleWeb.Endpoint, :stats, consolidated_view.domain, [])}
+                href={
+                  Routes.stats_path(PlausibleWeb.Endpoint, :dashboard, consolidated_view.domain, [])
+                }
               >
                 Dashboard
               </.styled_link>

extra/lib/plausible_web/live/customer_support/team/components/sites.ex

@@ -65,7 +65,7 @@ defmodule PlausibleWeb.CustomerSupport.Team.Components.Sites do
           <.td>
             <.styled_link
               new_tab={true}
-              href={Routes.stats_path(PlausibleWeb.Endpoint, :stats, site.domain, [])}
+              href={Routes.stats_path(PlausibleWeb.Endpoint, :dashboard, site.domain, [])}
             >
               Dashboard
             </.styled_link>

extra/lib/plausible_web/live/verification.ex

@@ -213,7 +213,7 @@ defmodule PlausibleWeb.Live.Verification do
   end
 
   defp redirect_to_stats(socket) do
-    stats_url = Routes.stats_path(PlausibleWeb.Endpoint, :stats, socket.assigns.domain, [])
+    stats_url = Routes.stats_path(PlausibleWeb.Endpoint, :dashboard, socket.assigns.domain, [])
     redirect(socket, to: stats_url)
   end
 

lib/plausible/stats/dashboard/periods.ex

@@ -1,37 +1,53 @@
 defmodule Plausible.Stats.Dashboard.Periods do
+  @moduledoc false
+
   @all [
-    {"realtime", :realtime, "Realtime"},
-    {"day", :day, "Today"},
-    {"month", :month, "Month to date"},
-    {"year", :year, "Year to date"},
-    {"all", :all, "All"},
-    {"7d", {:last_n_days, 7}, "Last 7 days"},
-    {"28d", {:last_n_days, 28}, "Last 28 days"},
-    {"30d", {:last_n_days, 30}, "Last 30 days"},
-    {"91d", {:last_n_days, 91}, "Last 91 days"},
-    {"6mo", {:last_n_months, 6}, "Last 6 months"},
-    {"12mo", {:last_n_months, 12}, "Last 12 months"},
+    {"realtime", :realtime},
+    {"day", :day},
+    {"month", :month},
+    {"year", :year},
+    {"all", :all},
+    {"7d", {:last_n_days, 7}},
+    {"28d", {:last_n_days, 28}},
+    {"30d", {:last_n_days, 30}},
+    {"91d", {:last_n_days, 91}},
+    {"6mo", {:last_n_months, 6}},
+    {"12mo", {:last_n_months, 12}}
   ]
 
   def all(), do: @all
 
-  @shorthands Enum.map(@all, &(elem(&1, 0)))
+  @shorthands Enum.map(@all, &elem(&1, 0))
 
   def shorthands(), do: @shorthands
 
-  @input_date_ranges Map.new(@all, fn {shortcut, input_date_range, _label} ->
-    {shortcut, input_date_range}
-  end)
+  @input_date_ranges Map.new(@all)
 
   def input_date_ranges(), do: @input_date_ranges
 
   def input_date_range_for(period), do: @input_date_ranges[period]
 
-  @labels Map.new(@all, fn {shortcut, _input_date_range, label} ->
-    {shortcut, label}
-  end)
-
-  def labels(), do: @labels
-
-  def label_for(period), do: @labels[period]
+  def label_for(:day, %Date{} = date) do
+    Calendar.strftime(date, "%a, %-d %b")
+  end
+
+  def label_for(:month, %Date{} = date) do
+    Calendar.strftime(date, "%B %Y")
+  end
+
+  def label_for(:year, %Date{} = date) do
+    Calendar.strftime(date, "Year of %Y")
+  end
+
+  def label_for(:realtime, _date), do: "Realtime"
+  def label_for(:day, _date), do: "Today"
+  def label_for(:month, _date), do: "Month to date"
+  def label_for(:year, _date), do: "Year to date"
+  def label_for(:all, _date), do: "All"
+  def label_for({:last_n_days, 7}, _date), do: "Last 7 days"
+  def label_for({:last_n_days, 28}, _date), do: "Last 28 days"
+  def label_for({:last_n_days, 30}, _date), do: "Last 30 days"
+  def label_for({:last_n_days, 91}, _date), do: "Last 91 days"
+  def label_for({:last_n_months, 6}, _date), do: "Last 6 months"
+  def label_for({:last_n_months, 12}, _date), do: "Last 12 months"
 end

lib/plausible_web/controllers/invitation_controller.ex

@@ -31,7 +31,7 @@ defmodule PlausibleWeb.InvitationController do
         if site do
           conn
           |> put_flash(:success, "You now have access to #{site.domain}")
-          |> redirect(to: Routes.stats_path(conn, :stats, site.domain, []))
+          |> redirect(to: Routes.stats_path(conn, :dashboard, site.domain, []))
         else
           conn
           |> put_flash(:success, "You now have access to \"#{team.name}\" team")

lib/plausible_web/controllers/site/membership_controller.ex

@@ -233,7 +233,7 @@ defmodule PlausibleWeb.Site.MembershipController do
         redirect_target =
           if guest_membership.team_membership.user_id == current_user.id and
                guest_membership.role == :viewer do
-            Routes.stats_path(conn, :stats, site.domain, [])
+            Routes.stats_path(conn, :dashboard, site.domain, [])
           else
             Routes.site_path(conn, :settings_people, site.domain)
           end

lib/plausible_web/controllers/stats_controller.ex

@@ -283,7 +283,7 @@ defmodule PlausibleWeb.StatsController do
       )
 
     if shared_link do
-      new_link_format = Routes.stats_path(conn, :shared_link, shared_link.site.domain, auth: slug)
+      new_link_format = Routes.stats_path(conn, :dashboard, shared_link.site.domain, auth: slug)
       redirect(conn, to: new_link_format)
     else
       render_error(conn, 404)

lib/plausible_web/live/awaiting_pageviews.ex

@@ -89,7 +89,7 @@ defmodule PlausibleWeb.Live.AwaitingPageviews do
   end
 
   defp redirect_to_stats(socket) do
-    stats_url = Routes.stats_path(PlausibleWeb.Endpoint, :stats, socket.assigns.domain, [])
+    stats_url = Routes.stats_path(PlausibleWeb.Endpoint, :dashboard, socket.assigns.domain, [])
     redirect(socket, to: stats_url)
   end
 

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

@@ -53,7 +53,10 @@ defmodule PlausibleWeb.Components.Dashboard.Tile do
         </div>
       </div>
 
-      <div class="group-[.phx-navigation-loading]:hidden group-has-[.tile-tabs.phx-hook-loading]:hidden">
+      <div
+        :if={@connected?}
+        class="group-[.phx-navigation-loading]:hidden group-has-[.tile-tabs.phx-hook-loading]:hidden"
+      >
         {render_slot(@inner_block)}
       </div>
     </div>