feat(web-analytics): Add mini-version of the retention cohort analysis

frontend/src/queries/nodes/InsightViz/InsightVizDisplay.tsx

@@ -74,6 +74,7 @@ export function InsightVizDisplay({
         insightDataLoading,
         erroredQueryId,
         timedOutQueryId,
+        vizSpecificOptions,
     } = useValues(insightVizDataLogic(insightProps))
     const { exportContext } = useValues(insightDataLogic(insightProps))
 
@@ -131,7 +132,12 @@ export function InsightVizDisplay({
             case InsightType.FUNNELS:
                 return <Funnel />
             case InsightType.RETENTION:
-                return <RetentionContainer />
+                return (
+                    <RetentionContainer
+                        context={context}
+                        vizSpecificOptions={vizSpecificOptions?.[InsightType.RETENTION]}
+                    />
+                )
             case InsightType.PATHS:
                 return <Paths />
             default:

frontend/src/queries/schema.json

@@ -1732,6 +1732,9 @@
                 },
                 "suppressSessionAnalysisWarning": {
                     "type": "boolean"
+                },
+                "vizSpecificOptions": {
+                    "$ref": "#/definitions/VizSpecificOptions"
                 }
             },
             "required": ["kind", "source"],
@@ -2644,6 +2647,9 @@
                 },
                 "suppressSessionAnalysisWarning": {
                     "type": "boolean"
+                },
+                "vizSpecificOptions": {
+                    "$ref": "#/definitions/VizSpecificOptions"
                 }
             },
             "required": ["kind", "shortId"],
@@ -3089,6 +3095,28 @@
             "required": ["results"],
             "type": "object"
         },
+        "VizSpecificOptions": {
+            "additionalProperties": false,
+            "description": "Chart specific rendering options. Use ChartRenderingMetadata for non-serializable values, e.g. onClick handlers",
+            "properties": {
+                "RETENTION": {
+                    "additionalProperties": false,
+                    "properties": {
+                        "hideLineGraph": {
+                            "type": "boolean"
+                        },
+                        "hideSizeColumn": {
+                            "type": "boolean"
+                        },
+                        "useSmallLayout": {
+                            "type": "boolean"
+                        }
+                    },
+                    "type": "object"
+                }
+            },
+            "type": "object"
+        },
         "WebAnalyticsPropertyFilter": {
             "anyOf": [
                 {

frontend/src/queries/schema.ts

@@ -12,6 +12,7 @@ import {
     GroupMathType,
     HogQLMathType,
     InsightShortId,
+    InsightType,
     IntervalType,
     LifecycleFilterType,
     LifecycleToggle,
@@ -391,6 +392,18 @@ export interface SavedInsightNode extends Node, InsightVizNodeViewProps, DataTab
 
 // Insight viz node
 
+/** Chart specific rendering options.
+ * Use ChartRenderingMetadata for non-serializable values, e.g. onClick handlers
+ * @see ChartRenderingMetadata
+ * **/
+export interface VizSpecificOptions {
+    [InsightType.RETENTION]?: {
+        hideLineGraph?: boolean
+        hideSizeColumn?: boolean
+        useSmallLayout?: boolean
+    }
+}
+
 export interface InsightVizNode extends Node, InsightVizNodeViewProps {
     kind: NodeKind.InsightVizNode
     source: InsightQueryNode
@@ -410,6 +423,8 @@ interface InsightVizNodeViewProps {
     embedded?: boolean
     suppressSessionAnalysisWarning?: boolean
     hidePersonsModal?: boolean
+
+    vizSpecificOptions?: VizSpecificOptions
 }
 
 /** Base class for insight query nodes. Should not be used directly. */

frontend/src/scenes/insights/insightVizDataLogic.ts

@@ -169,6 +169,7 @@ export const insightVizDataLogic = kea<insightVizDataLogicType>([
         showLegend: [(s) => [s.querySource], (q) => (q ? getShowLegend(q) : null)],
         showValueOnSeries: [(s) => [s.querySource], (q) => (q ? getShowValueOnSeries(q) : null)],
         showPercentStackView: [(s) => [s.querySource], (q) => (q ? getShowPercentStackView(q) : null)],
+        vizSpecificOptions: [(s) => [s.query], (q: Node) => (isInsightVizNode(q) ? q.vizSpecificOptions : null)],
 
         insightFilter: [(s) => [s.querySource], (q) => (q ? filterForQuery(q) : null)],
         trendsFilter: [(s) => [s.querySource], (q) => (isTrendsQuery(q) ? q.trendsFilter : null)],

frontend/src/scenes/retention/RetentionContainer.tsx

@@ -2,17 +2,24 @@ import { RetentionLineGraph } from './RetentionLineGraph'
 import { RetentionTable } from './RetentionTable'
 import { LemonDivider } from '@posthog/lemon-ui'
 import { RetentionModal } from './RetentionModal'
+import { QueryContext } from '~/queries/types'
+import { VizSpecificOptions } from '~/queries/schema'
+import { InsightType } from '~/types'
 
 export function RetentionContainer({
     inCardView,
     inSharedMode,
+    vizSpecificOptions,
 }: {
     inCardView?: boolean
     inSharedMode?: boolean
+    context?: QueryContext
+    vizSpecificOptions?: VizSpecificOptions[InsightType.RETENTION]
 }): JSX.Element {
+    const hideLineGraph = vizSpecificOptions?.hideLineGraph || inCardView
     return (
         <div className="RetentionContainer">
-            {inCardView ? (
+            {hideLineGraph ? (
                 <RetentionTable inCardView={inCardView} />
             ) : (
                 <>

frontend/src/scenes/retention/RetentionTable.scss

@@ -70,4 +70,24 @@
             }
         }
     }
+
+    &.RetentionTable--small-layout {
+        font-size: 0.75rem;
+        line-height: 1rem;
+
+        th {
+            padding-left: 0.25rem;
+            padding-right: 0.25rem;
+        }
+
+        .RetentionTable__TextTab {
+            padding-left: 0.25rem;
+            padding-right: 0.25rem;
+        }
+
+        .RetentionTable__Tab {
+            margin: 0;
+            padding: 0.5rem 0.25rem;
+        }
+    }
 }

frontend/src/scenes/retention/RetentionTable.tsx

@@ -1,4 +1,4 @@
-import { useValues, useActions } from 'kea'
+import { useActions, useValues } from 'kea'
 import clsx from 'clsx'
 
 import { insightLogic } from 'scenes/insights/insightLogic'
@@ -11,11 +11,16 @@ import { BRAND_BLUE_HSL, gradateColor } from 'lib/colors'
 
 export function RetentionTable({ inCardView = false }: { inCardView?: boolean }): JSX.Element | null {
     const { insightProps } = useValues(insightLogic)
-    const { tableHeaders, tableRows, isLatestPeriod } = useValues(retentionTableLogic(insightProps))
+    const { tableHeaders, tableRows, isLatestPeriod, hideSizeColumn, retentionVizOptions } = useValues(
+        retentionTableLogic(insightProps)
+    )
     const { openModal } = useActions(retentionModalLogic(insightProps))
 
     return (
-        <table className="RetentionTable" data-attr="retention-table">
+        <table
+            className={clsx('RetentionTable', { 'RetentionTable--small-layout': retentionVizOptions?.useSmallLayout })}
+            data-attr="retention-table"
+        >
             <tbody>
                 <tr>
                     {tableHeaders.map((heading) => (
@@ -34,7 +39,7 @@ export function RetentionTable({ inCardView = false }: { inCardView?: boolean })
                     >
                         {row.map((column, columnIndex) => (
                             <td key={columnIndex}>
-                                {columnIndex <= 1 ? (
+                                {columnIndex <= (hideSizeColumn ? 0 : 1) ? (
                                     <span className="RetentionTable__TextTab" key={'columnIndex'}>
                                         {column}
                                     </span>

frontend/src/scenes/retention/retentionTableLogic.ts

@@ -2,7 +2,7 @@ import { dayjs } from 'lib/dayjs'
 import { kea, props, key, path, connect, selectors } from 'kea'
 import { range } from 'lib/utils'
 import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
-import { InsightLogicProps } from '~/types'
+import { InsightLogicProps, InsightType } from '~/types'
 
 import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 import { retentionLogic } from './retentionLogic'
@@ -36,7 +36,7 @@ export const retentionTableLogic = kea<retentionTableLogicType>([
     connect((props: InsightLogicProps) => ({
         values: [
             insightVizDataLogic(props),
-            ['dateRange', 'retentionFilter', 'breakdown'],
+            ['dateRange', 'retentionFilter', 'breakdown', 'vizSpecificOptions'],
             retentionLogic(props),
             ['results'],
         ],
@@ -47,6 +47,12 @@ export const retentionTableLogic = kea<retentionTableLogicType>([
             (dateRange, retentionFilter) => periodIsLatest(dateRange?.date_to || null, retentionFilter?.period || null),
         ],
 
+        retentionVizOptions: [
+            (s) => [s.vizSpecificOptions],
+            (vizSpecificOptions) => vizSpecificOptions?.[InsightType.RETENTION],
+        ],
+        hideSizeColumn: [(s) => [s.retentionVizOptions], (retentionVizOptions) => retentionVizOptions?.hideSizeColumn],
+
         maxIntervalsCount: [
             (s) => [s.results],
             (results) => {
@@ -55,15 +61,15 @@ export const retentionTableLogic = kea<retentionTableLogicType>([
         ],
 
         tableHeaders: [
-            (s) => [s.results],
-            (results) => {
-                return ['Cohort', 'Size', ...results.map((x) => x.label)]
+            (s) => [s.results, s.hideSizeColumn],
+            (results, hideSizeColumn) => {
+                return ['Cohort', ...(hideSizeColumn ? [] : ['Size']), ...results.map((x) => x.label)]
             },
         ],
 
         tableRows: [
-            (s) => [s.results, s.maxIntervalsCount, s.retentionFilter, s.breakdown],
-            (results, maxIntervalsCount, retentionFilter, breakdown) => {
+            (s) => [s.results, s.maxIntervalsCount, s.retentionFilter, s.breakdown, s.hideSizeColumn],
+            (results, maxIntervalsCount, retentionFilter, breakdown, hideSizeColumn) => {
                 const { period } = retentionFilter || {}
                 const { breakdowns } = breakdown || {}
 
@@ -75,7 +81,7 @@ export const retentionTableLogic = kea<retentionTableLogicType>([
                         ? dayjs(results[rowIndex].date).format('MMM D, h A')
                         : dayjs(results[rowIndex].date).format('MMM D'),
                     // Second column is the first value (which is essentially the total)
-                    results[rowIndex].values[0].count,
+                    ...(hideSizeColumn ? [] : [results[rowIndex].values[0].count]),
                     // All other columns are rendered as percentage
                     ...results[rowIndex].values.map((row) => {
                         const percentage =

frontend/src/scenes/web-analytics/WebDashboard.tsx

@@ -97,9 +97,11 @@ const Tiles = (): JSX.Element => {
                     return (
                         <div
                             key={i}
-                            className={`col-span-1 row-span-1 md:col-span-${layout.colSpan ?? 6} md:row-span-${
-                                layout.rowSpan ?? 1
-                            }  flex flex-col`}
+                            className={clsx(
+                                'col-span-1 row-span-1 flex flex-col',
+                                `md:col-span-${layout.colSpan ?? 6} md:row-span-${layout.rowSpan ?? 1}`,
+                                layout.className
+                            )}
                         >
                             {title && <h2 className="m-0 mb-3">{title}</h2>}
                             <WebQuery query={query} />
@@ -120,7 +122,11 @@ const TabsTileItem = ({ tile }: { tile: TabsTile }): JSX.Element => {
 
     return (
         <WebTabs
-            className={`col-span-1 row-span-1 md:col-span-${layout.colSpan ?? 6} md:row-span-${layout.rowSpan ?? 1}`}
+            className={clsx(
+                'col-span-1 row-span-1',
+                `md:col-span-${layout.colSpan ?? 6} md:row-span-${layout.rowSpan ?? 1}`,
+                layout.className
+            )}
             activeTabId={tile.activeTabId}
             setActiveTabId={tile.setTabId}
             tabs={tile.tabs.map((tab) => ({

frontend/src/scenes/web-analytics/WebTabs.tsx

@@ -24,7 +24,7 @@ export const WebTabs = ({
         <div className={clsx(className, 'flex flex-col')}>
             <div className="flex flex-row items-center self-stretch mb-3">
                 {<h2 className="flex-1 m-0">{activeTab?.title}</h2>}
-                <div className="flex flex-col items-stretch">
+                <div className="flex flex-col items-stretch relative">
                     {tabs.length > 1 && (
                         // TODO switch to a select if more than 3
                         <ul className="flex flex-row items-center space-x-2" ref={containerRef}>

frontend/src/scenes/web-analytics/webAnalyticsLogic.ts

@@ -14,18 +14,22 @@ import {
     ChartDisplayType,
     EventDefinition,
     EventDefinitionType,
+    InsightType,
     PropertyFilterType,
     PropertyOperator,
+    RetentionPeriod,
 } from '~/types'
 import { isNotNil } from 'lib/utils'
 import { loaders } from 'kea-loaders'
 import api from 'lib/api'
 import { dayjs } from 'lib/dayjs'
-import { STALE_EVENT_SECONDS } from 'lib/constants'
+import { RETENTION_FIRST_TIME, STALE_EVENT_SECONDS } from 'lib/constants'
+import { windowValues } from 'kea-window-values'
 
 export interface WebTileLayout {
     colSpan?: number
     rowSpan?: number
+    className?: string
 }
 
 interface BaseTile {
@@ -209,7 +213,7 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
             },
         ],
     }),
-    selectors(({ actions }) => ({
+    selectors(({ actions, values }) => ({
         tiles: [
             (s) => [
                 s.webAnalyticsFilters,
@@ -220,6 +224,7 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                 s.geographyTab,
                 s.dateFrom,
                 s.dateTo,
+                () => values.isGreaterThanMd,
             ],
             (
                 webAnalyticsFilters,
@@ -229,7 +234,8 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                 sourceTab,
                 geographyTab,
                 dateFrom,
-                dateTo
+                dateTo,
+                isGreaterThanMd: boolean
             ): WebDashboardTile[] => {
                 const dateRange = {
                     date_from: dateFrom,
@@ -570,6 +576,34 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                             },
                         ],
                     },
+                    {
+                        title: 'Retention',
+                        layout: {
+                            colSpan: 12,
+                        },
+                        query: {
+                            kind: NodeKind.InsightVizNode,
+                            source: {
+                                kind: NodeKind.RetentionQuery,
+                                properties: webAnalyticsFilters,
+                                dateRange,
+                                filterTestAccounts: true,
+                                retentionFilter: {
+                                    retention_type: RETENTION_FIRST_TIME,
+                                    retention_reference: 'total',
+                                    total_intervals: isGreaterThanMd ? 8 : 5,
+                                    period: RetentionPeriod.Week,
+                                },
+                            },
+                            vizSpecificOptions: {
+                                [InsightType.RETENTION]: {
+                                    hideLineGraph: true,
+                                    hideSizeColumn: !isGreaterThanMd,
+                                    useSmallLayout: !isGreaterThanMd,
+                                },
+                            },
+                        },
+                    },
                 ]
             },
         ],
@@ -618,6 +652,9 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
     afterMount(({ actions }) => {
         actions.loadStatusCheck()
     }),
+    windowValues({
+        isGreaterThanMd: (window: Window) => window.innerWidth > 768,
+    }),
 ])
 
 const isEventDefinitionStale = (definition: EventDefinition): boolean => {