Average Scroll Depth Metric: dashboard sorting (plausible#4887)

* allow scroll_depth sort

* test order by scroll_depth in dashboard controller action too

assets/js/dashboard/stats/reports/metrics.js

@@ -220,6 +220,6 @@ export const createScrollDepth = (props) => {
     ...props,
     key: 'scroll_depth',
     renderLabel,
-    sortable: false
+    sortable: true
   })
 }

test/plausible_web/controllers/api/external_stats_controller/query_test.exs

@@ -3858,6 +3858,40 @@ defmodule PlausibleWeb.Api.ExternalStatsController.QueryTest do
              ]
     end
 
+    test "can sort by scroll_depth in event:page breakdown", %{conn: conn, site: site} do
+      t0 = ~N[2020-01-01 00:00:00]
+      [t1, t2, t3] = for i <- 1..3, do: NaiveDateTime.add(t0, i, :minute)
+
+      populate_stats(site, [
+        build(:pageview, user_id: 12, pathname: "/blog", timestamp: t0),
+        build(:pageleave, user_id: 12, pathname: "/blog", timestamp: t1, scroll_depth: 20),
+        build(:pageview, user_id: 12, pathname: "/another", timestamp: t1),
+        build(:pageleave, user_id: 12, pathname: "/another", timestamp: t2, scroll_depth: 24),
+        build(:pageview, user_id: 34, pathname: "/blog", timestamp: t0),
+        build(:pageleave, user_id: 34, pathname: "/blog", timestamp: t1, scroll_depth: 17),
+        build(:pageview, user_id: 34, pathname: "/another", timestamp: t1),
+        build(:pageleave, user_id: 34, pathname: "/another", timestamp: t2, scroll_depth: 26),
+        build(:pageview, user_id: 34, pathname: "/blog", timestamp: t2),
+        build(:pageleave, user_id: 34, pathname: "/blog", timestamp: t3, scroll_depth: 60),
+        build(:pageview, user_id: 56, pathname: "/blog", timestamp: t0),
+        build(:pageleave, user_id: 56, pathname: "/blog", timestamp: t1, scroll_depth: 100)
+      ])
+
+      conn =
+        post(conn, "/api/v2/query-internal-test", %{
+          "site_id" => site.domain,
+          "metrics" => ["scroll_depth"],
+          "date_range" => "all",
+          "order_by" => [["scroll_depth", "asc"]],
+          "dimensions" => ["event:page"]
+        })
+
+      assert json_response(conn, 200)["results"] == [
+               %{"dimensions" => ["/another"], "metrics" => [25]},
+               %{"dimensions" => ["/blog"], "metrics" => [60]}
+             ]
+    end
+
     test "breakdown by event:page + visit:source with scroll_depth metric", %{
       conn: conn,
       site: site
@@ -3934,14 +3968,15 @@ defmodule PlausibleWeb.Api.ExternalStatsController.QueryTest do
         post(conn, "/api/v2/query-internal-test", %{
           "site_id" => site.domain,
           "metrics" => ["scroll_depth"],
+          "order_by" => [["scroll_depth", "asc"]],
           "date_range" => "all",
           "dimensions" => ["event:page", "visit:source"]
         })
 
       assert json_response(conn, 200)["results"] == [
-               %{"dimensions" => ["/blog", "Google"], "metrics" => [40]},
+               %{"dimensions" => ["/blog", "Twitter"], "metrics" => [20]},
                %{"dimensions" => ["/another", "Twitter"], "metrics" => [24]},
-               %{"dimensions" => ["/blog", "Twitter"], "metrics" => [20]}
+               %{"dimensions" => ["/blog", "Google"], "metrics" => [40]}
              ]
     end
 

test/plausible_web/controllers/api/stats_controller/pages_test.exs

@@ -622,24 +622,28 @@ defmodule PlausibleWeb.Api.StatsController.PagesTest do
         build(:pageleave, user_id: 56, pathname: "/blog", timestamp: t1, scroll_depth: 100)
       ])
 
-      conn = get(conn, "/api/stats/#{site.domain}/pages?period=day&date=2020-01-01&detailed=true")
+      conn =
+        get(
+          conn,
+          "/api/stats/#{site.domain}/pages?period=day&date=2020-01-01&detailed=true&order_by=#{Jason.encode!([["scroll_depth", "asc"]])}"
+        )
 
       assert json_response(conn, 200)["results"] == [
-               %{
-                 "name" => "/blog",
-                 "visitors" => 3,
-                 "pageviews" => 4,
-                 "bounce_rate" => 33,
-                 "time_on_page" => 60,
-                 "scroll_depth" => 60
-               },
                %{
                  "name" => "/another",
                  "visitors" => 2,
                  "pageviews" => 2,
                  "bounce_rate" => 0,
                  "time_on_page" => 60,
                  "scroll_depth" => 25
+               },
+               %{
+                 "name" => "/blog",
+                 "visitors" => 3,
+                 "pageviews" => 4,
+                 "bounce_rate" => 33,
+                 "time_on_page" => 60,
+                 "scroll_depth" => 60
                }
              ]
     end