Show conversion rates in conversions report

assets/js/dashboard/stats/conversions/index.js

@@ -50,13 +50,14 @@ export default class Conversions extends React.Component {
     return (
       <div className="my-2 text-sm" key={goal.name}>
         <div className="flex items-center justify-between my-2">
-          <div className="w-full h-8 relative" style={{maxWidth: 'calc(100% - 10rem)'}}>
+          <div className="w-full h-8 relative" style={{maxWidth: 'calc(100% - 16rem)'}}>
             <Bar count={goal.count} all={this.state.goals} bg="bg-red-50" />
             {this.renderGoalText(goal.name)}
           </div>
           <div>
             <span className="font-medium inline-block w-20 text-right">{numberFormatter(goal.count)}</span>
             <span className="font-medium inline-block w-20 text-right">{numberFormatter(goal.total_count)}</span>
+            <span className="font-medium inline-block w-20 text-right">{goal.conversion_rate}%</span>
           </div>
         </div>
         { renderProps && <PropBreakdown site={this.props.site} query={this.props.query} goal={goal} /> }
@@ -80,6 +81,7 @@ export default class Conversions extends React.Component {
             <div className="text-right">
               <span className="inline-block w-20">Uniques</span>
               <span className="inline-block w-20">Total</span>
+              <span className="inline-block w-20">CR</span>
             </div>
           </div>
 

assets/js/dashboard/stats/conversions/prop-breakdown.js

@@ -41,7 +41,7 @@ export default class PropertyBreakdown extends React.Component {
 
     return (
       <div className="flex items-center justify-between my-2" key={value.name}>
-        <div className="w-full h-8 relative" style={{maxWidth: 'calc(100% - 10rem)'}}>
+        <div className="w-full h-8 relative" style={{maxWidth: 'calc(100% - 16rem)'}}>
           <Bar count={value.count} all={this.state.breakdown} bg="bg-red-50" />
           <Link to={{search: query.toString()}} style={{marginTop: '-26px'}} className="hover:underline block px-2">
             { value.name }
@@ -50,6 +50,7 @@ export default class PropertyBreakdown extends React.Component {
         <div>
           <span className="font-medium inline-block w-20 text-right">{numberFormatter(value.count)}</span>
           <span className="font-medium inline-block w-20 text-right">{numberFormatter(value.total_count)}</span>
+          <span className="font-medium inline-block w-20 text-right">{numberFormatter(value.conversion_rate)}%</span>
         </div>
       </div>
     )

lib/plausible/stats/query.ex

@@ -134,6 +134,8 @@ defmodule Plausible.Stats.Query do
   defp parse_filters(params) do
     if params["filters"] do
       Jason.decode!(params["filters"])
+    else
+      %{}
     end
   end
 end

lib/plausible_web/controllers/api/stats_controller.ex

@@ -45,15 +45,8 @@ defmodule PlausibleWeb.Api.StatsController do
     completions = Stats.total_events(site, query)
     prev_completions = Stats.total_events(site, prev_query)
 
-    conversion_rate =
-      if unique_visitors > 0,
-        do: Float.round(converted_visitors / unique_visitors * 100, 1),
-        else: 0.0
-
-    prev_conversion_rate =
-      if prev_unique_visitors > 0,
-        do: Float.round(prev_converted_visitors / prev_unique_visitors * 100, 1),
-        else: 0.0
+    conversion_rate = calculate_cr(unique_visitors, converted_visitors)
+    prev_conversion_rate = calculate_cr(prev_unique_visitors, prev_converted_visitors)
 
     [
       %{
@@ -257,21 +250,39 @@ defmodule PlausibleWeb.Api.StatsController do
     json(conn, Stats.top_screen_sizes(site, query))
   end
 
+  defp calculate_cr(unique_visitors, converted_visitors) do
+    if unique_visitors > 0,
+      do: Float.round(converted_visitors / unique_visitors * 100, 1),
+        else: 0.0
+  end
+
   def conversions(conn, params) do
     site = conn.assigns[:site]
     query = Query.from(site.timezone, params)
+    total_filter = Map.merge(query.filters, %{"goal" => nil, "props" => nil})
+    unique_visitors = Stats.unique_visitors(site, %{query | filters: total_filter})
     prop_names = Stats.all_props(site, query)
     conversions = Stats.goal_conversions(site, query)
-                  |> Enum.map(fn goal -> Map.put(goal, :prop_names, prop_names[goal[:name]]) end)
+                  |> Enum.map(fn goal ->
+                    goal
+                    |> Map.put(:prop_names, prop_names[goal[:name]])
+                    |> Map.put(:conversion_rate, calculate_cr(unique_visitors, goal[:count]))
+                  end)
 
     json(conn, conversions)
   end
 
   def prop_breakdown(conn, params) do
     site = conn.assigns[:site]
     query = Query.from(site.timezone, params)
+    total_filter = Map.merge(query.filters, %{"goal" => nil, "props" => nil})
+    unique_visitors = Stats.unique_visitors(site, %{query | filters: total_filter})
+    props = Stats.property_breakdown(site, query, params["prop_name"])
+            |> Enum.map(fn prop ->
+              Map.put(prop, :conversion_rate, calculate_cr(unique_visitors, prop[:count]))
+            end)
 
-    json(conn, Stats.property_breakdown(site, query, params["prop_name"]))
+    json(conn, props)
   end
 
   def current_visitors(conn, _) do

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

@@ -12,8 +12,8 @@ defmodule PlausibleWeb.Api.StatsController.ConversionsTest do
       conn = get(conn, "/api/stats/#{site.domain}/conversions?period=day&date=2019-01-01")
 
       assert json_response(conn, 200) == [
-               %{"name" => "Signup", "count" => 3, "total_count" => 3, "prop_names" => ["variant"]},
-               %{"name" => "Visit /register", "count" => 2, "total_count" => 2, "prop_names" => nil}
+               %{"name" => "Signup", "count" => 3, "total_count" => 3, "prop_names" => ["variant"], "conversion_rate" => 50.0},
+               %{"name" => "Visit /register", "count" => 2, "total_count" => 2, "prop_names" => nil, "conversion_rate" => 33.3}
              ]
     end
   end
@@ -34,8 +34,8 @@ defmodule PlausibleWeb.Api.StatsController.ConversionsTest do
         )
 
       assert json_response(conn, 200) == [
-               %{"name" => "Signup", "count" => 3, "total_count" => 3, "prop_names" => ["variant"]}
-             ]
+        %{"name" => "Signup", "count" => 3, "total_count" => 3, "prop_names" => ["variant"], "conversion_rate" => 50.0}
+      ]
     end
   end
 
@@ -54,8 +54,8 @@ defmodule PlausibleWeb.Api.StatsController.ConversionsTest do
         )
 
       assert json_response(conn, 200) == [
-        %{"count" => 2, "name" => "B", "total_count" => 2},
-        %{"count" => 1, "name" => "A", "total_count" => 1}
+        %{"count" => 2, "name" => "B", "total_count" => 2, "conversion_rate" => 33.3},
+        %{"count" => 1, "name" => "A", "total_count" => 1, "conversion_rate" => 16.7}
       ]
     end
   end