Enable persons modal on funnel trends

frontend/src/scenes/funnels/FunnelViz.tsx

@@ -8,11 +8,12 @@ import { ACTIONS_LINE_GRAPH_LINEAR, FEATURE_FLAGS } from 'lib/constants'
 import { LineGraph } from 'scenes/insights/LineGraph'
 import { FunnelBarGraph } from './FunnelBarGraph'
 import { router } from 'kea-router'
-import { InputNumber } from 'antd'
+import { InputNumber, Row } from 'antd'
 import { preflightLogic } from 'scenes/PreflightCheck/logic'
 import { ChartDisplayType, ChartParams, FunnelStep } from '~/types'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { FunnelHistogram } from './FunnelHistogram'
+import { personsModalLogic } from 'scenes/trends/personsModalLogic'
 import { FunnelEmptyState } from 'scenes/insights/EmptyStates'
 
 import './FunnelViz.scss'
@@ -42,6 +43,7 @@ export function FunnelViz({
         areFiltersValid,
     } = useValues(logic)
     const { loadResults: loadFunnel, loadConversionWindow } = useActions(logic)
+    const { loadPeople } = useActions(personsModalLogic)
     const [{ fromItem }] = useState(router.values.hashParams)
     const { preflight } = useValues(preflightLogic)
     const { featureFlags } = useValues(featureFlagLogic)
@@ -125,7 +127,7 @@ export function FunnelViz({
     if (filters.display === ACTIONS_LINE_GRAPH_LINEAR) {
         return steps && steps.length > 0 && steps[0].labels ? (
             <>
-                <div style={{ position: 'absolute', marginTop: -20, textAlign: 'center', width: '90%' }}>
+                <Row style={{ marginTop: -16, justifyContent: 'center' }}>
                     {preflight?.is_clickhouse_enabled && (
                         <>
                             converted within&nbsp;
@@ -140,7 +142,7 @@ export function FunnelViz({
                         </>
                     )}
                     % converted from first to last step
-                </div>
+                </Row>
                 <LineGraph
                     data-attr="trend-line-graph-funnel"
                     type="line"
@@ -151,6 +153,22 @@ export function FunnelViz({
                     dashboardItemId={dashboardItemId || fromItem}
                     inSharedMode={inSharedMode}
                     percentage={true}
+                    onClick={
+                        dashboardItemId
+                            ? null
+                            : (point) => {
+                                  const { dataset, day } = point
+                                  loadPeople({
+                                      action: { id: point.index, name: point.label, properties: [], type: 'actions' },
+                                      label: point.label,
+                                      date_from: day,
+                                      date_to: day,
+                                      filters: filters,
+                                      breakdown_value: dataset.breakdown_value || dataset.status,
+                                      saveOriginal: true,
+                                  })
+                              }
+                    }
                 />
             </>
         ) : null

frontend/src/scenes/funnels/funnelLogic.ts

@@ -70,6 +70,8 @@ export const cleanFunnelParams = (filters: FilterType): FilterType => {
         ...(filters.funnel_step ? { funnel_step: filters.funnel_step } : {}),
         ...(filters.funnel_viz_type ? { funnel_viz_type: filters.funnel_viz_type } : {}),
         ...(filters.funnel_step ? { funnel_to_step: filters.funnel_step } : {}),
+        ...(filters.entrance_period_start ? { entrance_period_start: filters.entrance_period_start } : {}),
+        ...(filters.drop_off ? { drop_off: filters.drop_off } : {}),
         interval: autocorrectInterval(filters),
         insight: ViewType.FUNNELS,
     }

frontend/src/scenes/insights/InsightTabs/InsightDisplayConfig.tsx

@@ -8,7 +8,7 @@ import {
     ACTIONS_PIE_CHART,
     ACTIONS_TABLE,
     FEATURE_FLAGS,
-    FUNNELS_TIME_TO_CONVERT,
+    FUNNEL_VIZ,
 } from 'lib/constants'
 import React from 'react'
 import { ChartDisplayType, FilterType, ViewType } from '~/types'
@@ -116,7 +116,7 @@ export function InsightDisplayConfig({
 
                 {activeView === ViewType.RETENTION && <RetentionDatePicker />}
 
-                {showFunnelBarOptions && allFilters.display !== FUNNELS_TIME_TO_CONVERT && (
+                {showFunnelBarOptions && allFilters.display === FUNNEL_VIZ && (
                     <>
                         <FunnelDisplayLayoutPicker />
                         <FunnelStepReferencePicker />

frontend/src/scenes/insights/LineGraph/LineGraph.js

@@ -262,7 +262,6 @@ export function LineGraph({
 
                     // This could either be a color or an array of colors (`horizontalBar`)
                     const colorSet = entityData.backgroundColor || entityData.borderColor
-
                     return (
                         <InsightLabel
                             action={action}

frontend/src/scenes/trends/personsModalLogic.ts

@@ -1,5 +1,7 @@
+import dayjs from 'dayjs'
 import { kea } from 'kea'
 import api from 'lib/api'
+import { ACTIONS_LINE_GRAPH_LINEAR } from 'lib/constants'
 import { errorToast, toParams } from 'lib/utils'
 import { cleanFunnelParams, funnelLogic } from 'scenes/funnels/funnelLogic'
 import { cohortLogic } from 'scenes/persons/cohortLogic'
@@ -145,8 +147,16 @@ export const personsModalLogic = kea<personsModalLogicType<PersonModalParams>>({
                 const filterParams = parsePeopleParams({ label, action, date_from, date_to, breakdown_value }, filters)
                 actions.setPeople(tempPeople)
                 people = await api.get(`api/person/stickiness/?${filterParams}${searchTermParam}`)
-            } else if (funnelStep) {
-                const params = { ...funnelLogic().values.filters, funnel_step: funnelStep }
+            } else if (funnelStep || filters.display === ACTIONS_LINE_GRAPH_LINEAR) {
+                let params
+                if (filters.display === ACTIONS_LINE_GRAPH_LINEAR) {
+                    // funnel trends
+                    const entrance_period_start = dayjs(date_from).format('YYYY-MM-DD HH:mm:ss')
+                    params = { ...funnelLogic().values.filters, entrance_period_start, drop_off: false }
+                } else {
+                    // regular funnel steps
+                    params = { ...funnelLogic().values.filters, funnel_step: funnelStep }
+                }
                 const cleanedParams = cleanFunnelParams(params)
                 const funnelParams = toParams(cleanedParams)
                 people = await api.create(`api/person/funnel/?${funnelParams}${searchTermParam}`)

frontend/src/types.ts

@@ -618,6 +618,8 @@ export interface FilterType {
     funnel_step?: number
     funnel_viz_type?: string // this and the below param is used for funnels time to convert, it'll be updated soon
     funnel_to_step?: number
+    entrance_period_start?: string
+    drop_off?: boolean
     compare?: boolean
 }