Implement conversion rate and rate step calculation in exploration funnel API (#6250)

* Implement conversion rate and rate step calculation in exploration funnel API

* Use conversion rate for bar graphs and make next step relative to funnel

* Compute bar graph relative to max visitors in suggestions in backwards dir

Author: zoldar

assets/js/dashboard/stats/exploration.js

@@ -54,8 +54,10 @@ function fetchFunnelData(site, dashboardState, steps, direction) {
 function ExplorationColumn({
   header,
   steps,
+  maxVisitors,
   selected,
   selectedVisitors,
+  selectedConversionRate,
   onSelect,
   dashboardState,
   direction
@@ -113,7 +115,10 @@ function ExplorationColumn({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dashboardState, stepsFingerprint, filter, direction, site, selected])
 
-  const maxVisitors = results.length > 0 ? results[0].visitors : 1
+  const stepMaxVisitors =
+    direction === EXPLORATION_DIRECTIONS.BACKWARD
+      ? results[0]?.visitors
+      : maxVisitors || results[0]?.visitors
 
   return (
     <div className="flex-1 min-w-0 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
@@ -170,7 +175,10 @@ function ExplorationColumn({
               isSelected && selectedVisitors !== null
                 ? selectedVisitors
                 : visitors
-            const pct = Math.round((visitorsToShow / maxVisitors) * 100)
+            const conversionRateToShow =
+              isSelected && selectedConversionRate !== null
+                ? selectedConversionRate
+                : Math.round((visitors / stepMaxVisitors) * 100)
 
             return (
               <li key={label}>
@@ -204,7 +212,7 @@ function ExplorationColumn({
                           ? 'bg-indigo-500'
                           : 'bg-indigo-300 dark:bg-indigo-600'
                       }`}
-                      style={{ width: `${pct}%` }}
+                      style={{ width: `${conversionRateToShow}%` }}
                     />
                   </div>
                 </button>
@@ -319,6 +327,8 @@ export function FunnelExploration() {
             steps={steps.length >= i ? steps.slice(0, i) : null}
             selected={steps[i] || null}
             selectedVisitors={funnel[i]?.visitors ?? null}
+            selectedConversionRate={funnel[i]?.conversion_rate ?? null}
+            maxVisitors={funnel[0]?.visitors ?? null}
             onSelect={(selected) => handleSelect(i, selected)}
             dashboardState={dashboardState}
             direction={direction}

lib/plausible/stats/exploration.ex

@@ -34,7 +34,9 @@ defmodule Plausible.Stats.Exploration do
           step: Journey.Step.t(),
           visitors: non_neg_integer(),
           dropoff: non_neg_integer(),
-          dropoff_percentage: String.t()
+          dropoff_percentage: String.t(),
+          conversion_rate: String.t(),
+          conversion_rate_step: String.t()
         }
 
   @spec next_steps(Query.t(), journey(), String.t(), direction()) ::
@@ -219,25 +221,36 @@ defmodule Plausible.Stats.Exploration do
   defp to_funnel([result], journey) do
     journey
     |> Enum.with_index()
-    |> Enum.reduce(%{funnel: [], visitors_at_previous: nil}, fn {step, idx}, acc ->
+    |> Enum.reduce(%{funnel: [], visitors_at_previous: nil, total_visitors: nil}, fn {step, idx},
+                                                                                     acc ->
       current_visitors = Map.get(result, idx + 1, 0)
+      total_visitors = acc.total_visitors || current_visitors
 
       dropoff =
         if acc.visitors_at_previous, do: acc.visitors_at_previous - current_visitors, else: 0
 
       dropoff_percentage = percentage(dropoff, acc.visitors_at_previous)
+      conversion_rate = percentage(current_visitors, total_visitors)
+      conversion_rate_step = percentage(current_visitors, acc.visitors_at_previous)
 
       funnel = [
         %{
           step: step,
           visitors: current_visitors,
           dropoff: dropoff,
-          dropoff_percentage: dropoff_percentage
+          dropoff_percentage: dropoff_percentage,
+          conversion_rate: conversion_rate,
+          conversion_rate_step: conversion_rate_step
         }
         | acc.funnel
       ]
 
-      %{acc | funnel: funnel, visitors_at_previous: current_visitors}
+      %{
+        acc
+        | funnel: funnel,
+          visitors_at_previous: current_visitors,
+          total_visitors: total_visitors
+      }
     end)
     |> Map.fetch!(:funnel)
     |> Enum.reverse()

test/plausible/stats/exploration_test.exs

@@ -85,14 +85,20 @@ defmodule Plausible.Stats.ExplorationTest do
       assert step1.visitors == 2
       assert step1.dropoff == 0
       assert step1.dropoff_percentage == "0"
+      assert step1.conversion_rate == "100"
+      assert step1.conversion_rate_step == "0"
       assert step2.step.pathname == "/login"
       assert step2.visitors == 2
       assert step2.dropoff == 0
       assert step2.dropoff_percentage == "0"
+      assert step2.conversion_rate == "100"
+      assert step2.conversion_rate_step == "100"
       assert step3.step.pathname == "/logout"
       assert step3.visitors == 1
       assert step3.dropoff == 1
       assert step3.dropoff_percentage == "50"
+      assert step3.conversion_rate == "50"
+      assert step3.conversion_rate_step == "50"
     end
 
     test "respects filters in the query", %{site: site} do
@@ -114,14 +120,20 @@ defmodule Plausible.Stats.ExplorationTest do
       assert step1.visitors == 1
       assert step1.dropoff == 0
       assert step1.dropoff_percentage == "0"
+      assert step1.conversion_rate == "100"
+      assert step1.conversion_rate_step == "0"
       assert step2.step.pathname == "/login"
       assert step2.visitors == 1
       assert step2.dropoff == 0
       assert step2.dropoff_percentage == "0"
+      assert step2.conversion_rate == "100"
+      assert step2.conversion_rate_step == "100"
       assert step3.step.pathname == "/logout"
       assert step3.visitors == 0
       assert step3.dropoff == 1
       assert step3.dropoff_percentage == "100"
+      assert step3.conversion_rate == "0"
+      assert step3.conversion_rate_step == "0"
     end
 
     test "returns error on empty journey", %{site: site} do
@@ -146,14 +158,20 @@ defmodule Plausible.Stats.ExplorationTest do
       assert step1.visitors == 1
       assert step1.dropoff == 1
       assert step1.dropoff_percentage == "50"
+      assert step1.conversion_rate == "50"
+      assert step1.conversion_rate_step == "50"
       assert step2.step.pathname == "/login"
       assert step2.visitors == 2
       assert step2.dropoff == 0
       assert step2.dropoff_percentage == "0"
+      assert step2.conversion_rate == "100"
+      assert step2.conversion_rate_step == "100"
       assert step3.step.pathname == "/home"
       assert step3.visitors == 2
       assert step3.dropoff == 0
       assert step3.dropoff_percentage == "0"
+      assert step3.conversion_rate == "100"
+      assert step3.conversion_rate_step == "0"
     end
   end
 

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

@@ -150,14 +150,20 @@ defmodule PlausibleWeb.Api.StatsController.ExplorationTest do
         assert step1["visitors"] == 2
         assert step1["dropoff"] == 0
         assert step1["dropoff_percentage"] == "0"
+        assert step1["conversion_rate"] == "100"
+        assert step1["conversion_rate_step"] == "0"
         assert step2["step"]["pathname"] == "/login"
         assert step2["visitors"] == 2
         assert step2["dropoff"] == 0
         assert step2["dropoff_percentage"] == "0"
+        assert step2["conversion_rate"] == "100"
+        assert step2["conversion_rate_step"] == "100"
         assert step3["step"]["pathname"] == "/logout"
         assert step3["visitors"] == 1
         assert step3["dropoff"] == 1
         assert step3["dropoff_percentage"] == "50"
+        assert step3["conversion_rate"] == "50"
+        assert step3["conversion_rate_step"] == "50"
       end
 
       test "it supports backward direction", %{conn: conn, site: site} do
@@ -183,14 +189,20 @@ defmodule PlausibleWeb.Api.StatsController.ExplorationTest do
         assert step1["visitors"] == 1
         assert step1["dropoff"] == 1
         assert step1["dropoff_percentage"] == "50"
+        assert step1["conversion_rate"] == "50"
+        assert step1["conversion_rate_step"] == "50"
         assert step2["step"]["pathname"] == "/login"
         assert step2["visitors"] == 2
         assert step2["dropoff"] == 0
         assert step2["dropoff_percentage"] == "0"
+        assert step2["conversion_rate"] == "100"
+        assert step2["conversion_rate_step"] == "100"
         assert step3["step"]["pathname"] == "/home"
         assert step3["visitors"] == 2
         assert step3["dropoff"] == 0
         assert step3["dropoff_percentage"] == "0"
+        assert step3["conversion_rate"] == "100"
+        assert step3["conversion_rate_step"] == "0"
       end
     end
   end