Support funnel trends conversion window (#4618)

* added conversion window in days to funnel trends * convert floats to ints so that the query doesn't break * use kea breakpoints instead of debouncing lib * put conversion input behind ee check
PostHog · Jun 8, 2021 · bdc1ab6 · bdc1ab6
1 parent 8212825
commit bdc1ab6
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 3 deletions.
diff --git a/frontend/src/scenes/funnels/FunnelViz.js b/frontend/src/scenes/funnels/FunnelViz.js
@@ -8,6 +8,8 @@ import { ACTIONS_LINE_GRAPH_LINEAR } from 'lib/constants'
 import { LineGraph } from 'scenes/insights/LineGraph'
 import { router } from 'kea-router'
 import { IllustrationDanger } from 'lib/components/icons'
+import { InputNumber } from 'antd'
+import { preflightLogic } from 'scenes/PreflightCheck/logic'
 
 export function FunnelViz({
     steps: stepsParam,
@@ -20,9 +22,10 @@ export function FunnelViz({
     const container = useRef(null)
     const [steps, setSteps] = useState(stepsParam)
     const logic = funnelLogic({ dashboardItemId, cachedResults, filters: defaultFilters })
-    const { results: stepsResult, resultsLoading: funnelLoading, filters } = useValues(logic)
-    const { loadResults: loadFunnel } = useActions(logic)
+    const { results: stepsResult, resultsLoading: funnelLoading, filters, conversionWindowInDays } = useValues(logic)
+    const { loadResults: loadFunnel, loadConversionWindow } = useActions(logic)
     const [{ fromItem }] = useState(router.values.hashParams)
+    const { preflight } = useValues(preflightLogic)
 
     function buildChart() {
         if (!steps || steps.length === 0) {
@@ -96,7 +99,20 @@ export function FunnelViz({
         return steps && steps.length > 0 && steps[0].labels ? (
             <>
                 <div style={{ position: 'absolute', marginTop: -20, textAlign: 'center', width: '90%' }}>
-                    % of users converted between first and last step
+                    {preflight?.is_clickhouse_enabled && (
+                        <>
+                            converted within&nbsp;
+                            <InputNumber
+                                size="small"
+                                min={1}
+                                max={365}
+                                defaultValue={conversionWindowInDays}
+                                onChange={(days) => loadConversionWindow(days)}
+                            />
+                            &nbsp;days =&nbsp;
+                        </>
+                    )}
+                    % converted from first to last step
                 </div>
                 <LineGraph
                     pageKey="trends-annotations"

diff --git a/frontend/src/scenes/funnels/funnelLogic.js b/frontend/src/scenes/funnels/funnelLogic.js
@@ -58,6 +58,8 @@ export const funnelLogic = kea({
         setFilters: (filters, refresh = false) => ({ filters, refresh }),
         saveFunnelInsight: (name) => ({ name }),
         setStepsWithCountLoading: (stepsWithCountLoading) => ({ stepsWithCountLoading }),
+        loadConversionWindow: (days) => ({ days }),
+        setConversionWindowInDays: (days) => ({ days }),
     }),
 
     connect: {
@@ -78,6 +80,7 @@ export const funnelLogic = kea({
                     ...(refresh ? { refresh: true } : {}),
                     ...(from_dashboard ? { from_dashboard } : {}),
                     ...cleanedParams,
+                    funnel_window_days: values.conversionWindowInDays,
                 }
 
                 let result
@@ -135,6 +138,14 @@ export const funnelLogic = kea({
         people: {
             clearFunnel: () => null,
         },
+        conversionWindowInDays: [
+            14,
+            {
+                setConversionWindowInDays: (state, { days }) => {
+                    return days >= 1 && days <= 365 ? Math.round(days) : state.conversionWindowInDays
+                },
+            },
+        ],
     }),
 
     selectors: ({ selectors }) => ({
@@ -205,6 +216,11 @@ export const funnelLogic = kea({
                 actions.setFilters(filters, true)
             }
         },
+        loadConversionWindow: async ({ days }, breakpoint) => {
+            await breakpoint(1000)
+            actions.setConversionWindowInDays(days)
+            actions.loadResults()
+        },
     }),
     actionToUrl: ({ actions, values, props }) => ({
         [actions.setSteps]: () => {