feat(insights): multiple breakdowns in trends (#23158)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

frontend/src/lib/components/PropertyFilters/utils.ts

@@ -273,7 +273,7 @@ const propertyFilterMapping: Partial<Record<PropertyFilterType, TaxonomicFilterG
     [PropertyFilterType.HogQL]: TaxonomicFilterGroupType.HogQLExpression,
 }
 
-const filterToTaxonomicFilterType = (
+export const filterToTaxonomicFilterType = (
     type?: string | null,
     group_type_index?: number | null,
     value?: (string | number)[] | string | number | null

frontend/src/lib/constants.tsx

@@ -209,6 +209,7 @@ export const FEATURE_FLAGS = {
     ERROR_TRACKING: 'error-tracking', // owner: #team-replay
     SETTINGS_BOUNCE_RATE_PAGE_VIEW_MODE: 'settings-bounce-rate-page-view-mode', // owner: @robbie-c
     SURVEYS_BRANCHING_LOGIC: 'surveys-branching-logic', // owner: @jurajmajerik #team-feature-success
+    MULTIPLE_BREAKDOWNS: 'multiple-breakdowns', // owner: @skoob13 #team-product-analytics
     WEB_ANALYTICS_LIVE_USER_COUNT: 'web-analytics-live-user-count', // owner: @robbie-c
     SETTINGS_SESSION_TABLE_VERSION: 'settings-session-table-version', // owner: @robbie-c
 } as const

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

@@ -11,18 +11,20 @@ export function Breakdown({ insightProps }: EditorFilterProps): JSX.Element {
     const { updateBreakdownFilter, updateDisplay } = useActions(insightVizDataLogic(insightProps))
 
     return (
-        <TaxonomicBreakdownFilter
-            insightProps={insightProps}
-            breakdownFilter={breakdownFilter}
-            display={display}
-            isTrends={isTrends}
-            updateBreakdownFilter={updateBreakdownFilter}
-            updateDisplay={updateDisplay}
-            disabledReason={
-                !isSingleSeries && isDataWarehouseSeries
-                    ? 'Breakdowns are not allowed for multiple series types'
-                    : undefined
-            }
-        />
+        <>
+            <TaxonomicBreakdownFilter
+                insightProps={insightProps}
+                breakdownFilter={breakdownFilter}
+                display={display}
+                isTrends={isTrends}
+                updateBreakdownFilter={updateBreakdownFilter}
+                updateDisplay={updateDisplay}
+                disabledReason={
+                    !isSingleSeries && isDataWarehouseSeries
+                        ? 'Breakdowns are not allowed for multiple series types'
+                        : undefined
+                }
+            />
+        </>
     )
 }

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

@@ -177,15 +177,7 @@ export function EditorFilters({ query, showing, embedded }: EditorFiltersProps):
                 hasBreakdown
                     ? {
                           key: 'breakdown',
-                          label: 'Breakdown by',
                           position: 'right',
-                          tooltip: (
-                              <>
-                                  Use breakdown to see the aggregation (total volume, active users, etc.) for each value
-                                  of that property. For example, breaking down by Current URL with total volume will
-                                  give you the event volume for each URL your users have visited.
-                              </>
-                          ),
                           component: Breakdown,
                       }
                     : null,

frontend/src/queries/schema.json

@@ -401,17 +401,37 @@
         "Breakdown": {
             "additionalProperties": false,
             "properties": {
+                "group_type_index": {
+                    "anyOf": [
+                        {
+                            "type": "integer"
+                        },
+                        {
+                            "type": "null"
+                        }
+                    ]
+                },
+                "histogram_bin_count": {
+                    "type": "integer"
+                },
                 "normalize_url": {
                     "type": "boolean"
                 },
-                "property": {
-                    "type": ["string", "number"]
-                },
                 "type": {
-                    "$ref": "#/definitions/BreakdownType"
+                    "anyOf": [
+                        {
+                            "$ref": "#/definitions/MultipleBreakdownType"
+                        },
+                        {
+                            "type": "null"
+                        }
+                    ]
+                },
+                "value": {
+                    "type": "string"
                 }
             },
-            "required": ["property", "type"],
+            "required": ["value"],
             "type": "object"
         },
         "BreakdownAttributionType": {
@@ -422,7 +442,30 @@
             "additionalProperties": false,
             "properties": {
                 "breakdown": {
-                    "$ref": "#/definitions/BreakdownKeyType"
+                    "anyOf": [
+                        {
+                            "type": "string"
+                        },
+                        {
+                            "type": "integer"
+                        },
+                        {
+                            "items": {
+                                "anyOf": [
+                                    {
+                                        "type": "string"
+                                    },
+                                    {
+                                        "type": "integer"
+                                    }
+                                ]
+                            },
+                            "type": "array"
+                        },
+                        {
+                            "type": "null"
+                        }
+                    ]
                 },
                 "breakdown_group_type_index": {
                     "anyOf": [
@@ -461,11 +504,32 @@
                     "items": {
                         "$ref": "#/definitions/Breakdown"
                     },
+                    "maxLength": 3,
                     "type": "array"
                 }
             },
             "type": "object"
         },
+        "BreakdownItem": {
+            "additionalProperties": false,
+            "properties": {
+                "label": {
+                    "type": "string"
+                },
+                "value": {
+                    "anyOf": [
+                        {
+                            "type": "string"
+                        },
+                        {
+                            "$ref": "#/definitions/BreakdownValueInt"
+                        }
+                    ]
+                }
+            },
+            "required": ["label", "value"],
+            "type": "object"
+        },
         "BreakdownKeyType": {
             "anyOf": [
                 {
@@ -970,24 +1034,13 @@
             "properties": {
                 "breakdown": {
                     "items": {
-                        "additionalProperties": false,
-                        "properties": {
-                            "label": {
-                                "type": "string"
-                            },
-                            "value": {
-                                "anyOf": [
-                                    {
-                                        "type": "string"
-                                    },
-                                    {
-                                        "$ref": "#/definitions/BreakdownValueInt"
-                                    }
-                                ]
-                            }
-                        },
-                        "required": ["label", "value"],
-                        "type": "object"
+                        "$ref": "#/definitions/BreakdownItem"
+                    },
+                    "type": "array"
+                },
+                "breakdowns": {
+                    "items": {
+                        "$ref": "#/definitions/MultipleBreakdownOptions"
                     },
                     "type": "array"
                 },
@@ -4524,6 +4577,12 @@
                         },
                         {
                             "$ref": "#/definitions/BreakdownValueInt"
+                        },
+                        {
+                            "items": {
+                                "type": "string"
+                            },
+                            "type": "array"
                         }
                     ]
                 },
@@ -4624,24 +4683,13 @@
             "properties": {
                 "breakdown": {
                     "items": {
-                        "additionalProperties": false,
-                        "properties": {
-                            "label": {
-                                "type": "string"
-                            },
-                            "value": {
-                                "anyOf": [
-                                    {
-                                        "type": "string"
-                                    },
-                                    {
-                                        "$ref": "#/definitions/BreakdownValueInt"
-                                    }
-                                ]
-                            }
-                        },
-                        "required": ["label", "value"],
-                        "type": "object"
+                        "$ref": "#/definitions/BreakdownItem"
+                    },
+                    "type": "array"
+                },
+                "breakdowns": {
+                    "items": {
+                        "$ref": "#/definitions/MultipleBreakdownOptions"
                     },
                     "type": "array"
                 },
@@ -5299,6 +5347,23 @@
                 }
             ]
         },
+        "MultipleBreakdownOptions": {
+            "additionalProperties": false,
+            "properties": {
+                "values": {
+                    "items": {
+                        "$ref": "#/definitions/BreakdownItem"
+                    },
+                    "type": "array"
+                }
+            },
+            "required": ["values"],
+            "type": "object"
+        },
+        "MultipleBreakdownType": {
+            "enum": ["person", "event", "group", "session", "hogql"],
+            "type": "string"
+        },
         "NodeKind": {
             "description": "PostHog Query Schema definition.\n\nThis file acts as the source of truth for:\n\n- frontend/src/queries/schema.json   - generated from typescript via \"pnpm run schema:build:json\"\n\n- posthog/schema.py   - generated from json the above json via \"pnpm run schema:build:python\"",
             "enum": [
@@ -5890,24 +5955,13 @@
                     "properties": {
                         "breakdown": {
                             "items": {
-                                "additionalProperties": false,
-                                "properties": {
-                                    "label": {
-                                        "type": "string"
-                                    },
-                                    "value": {
-                                        "anyOf": [
-                                            {
-                                                "type": "string"
-                                            },
-                                            {
-                                                "$ref": "#/definitions/BreakdownValueInt"
-                                            }
-                                        ]
-                                    }
-                                },
-                                "required": ["label", "value"],
-                                "type": "object"
+                                "$ref": "#/definitions/BreakdownItem"
+                            },
+                            "type": "array"
+                        },
+                        "breakdowns": {
+                            "items": {
+                                "$ref": "#/definitions/MultipleBreakdownOptions"
                             },
                             "type": "array"
                         },

frontend/src/queries/schema.ts

@@ -4,7 +4,6 @@ import {
     AnyPersonScopeFilter,
     AnyPropertyFilter,
     BaseMathType,
-    Breakdown,
     BreakdownKeyType,
     BreakdownType,
     ChartDisplayCategory,
@@ -1274,7 +1273,7 @@ export interface InsightActorsQuery<S extends InsightsQueryBase<AnalyticsQueryRe
     /** An interval selected out of available intervals in source query. */
     interval?: integer
     series?: integer
-    breakdown?: string | BreakdownValueInt
+    breakdown?: string | BreakdownValueInt | string[]
     compare?: 'current' | 'previous'
 }
 
@@ -1357,6 +1356,14 @@ export interface FunnelCorrelationQuery extends Node<FunnelCorrelationResponse>
 export type DatetimeDay = string
 
 export type BreakdownValueInt = integer
+export interface BreakdownItem {
+    label: string
+    value: string | BreakdownValueInt
+}
+export interface MultipleBreakdownOptions {
+    values: BreakdownItem[]
+}
+
 export interface InsightActorsQueryOptionsResponse {
     // eslint-disable-next-line @typescript-eslint/no-duplicate-type-constituents
     day?: { label: string; value: string | DatetimeDay | Day }[]
@@ -1369,10 +1376,8 @@ export interface InsightActorsQueryOptionsResponse {
          */
         value: integer
     }[]
-    breakdown?: {
-        label: string
-        value: string | BreakdownValueInt
-    }[]
+    breakdown?: BreakdownItem[]
+    breakdowns?: MultipleBreakdownOptions[]
     series?: {
         label: string
         value: integer
@@ -1387,6 +1392,7 @@ export const insightActorsQueryOptionsResponseKeys: string[] = [
     'status',
     'interval',
     'breakdown',
+    'breakdowns',
     'series',
     'compare',
 ]
@@ -1507,14 +1513,27 @@ export interface InsightDateRange {
     explicitDate?: boolean | null
 }
 
+export type MultipleBreakdownType = Extract<BreakdownType, 'person' | 'event' | 'group' | 'session' | 'hogql'>
+
+export interface Breakdown {
+    type?: MultipleBreakdownType | null
+    value: string
+    normalize_url?: boolean
+    group_type_index?: integer | null
+    histogram_bin_count?: integer // trends breakdown histogram bin
+}
+
 export interface BreakdownFilter {
     // TODO: unclutter
     /** @default event */
     breakdown_type?: BreakdownType | null
     breakdown_limit?: integer
-    breakdown?: BreakdownKeyType
+    breakdown?: string | integer | (string | integer)[] | null
     breakdown_normalize_url?: boolean
-    breakdowns?: Breakdown[]
+    /**
+     * @maxLength 3
+     */
+    breakdowns?: Breakdown[] // We want to limit maximum count of breakdowns avoiding overloading.
     breakdown_group_type_index?: integer | null
     breakdown_histogram_bin_count?: integer // trends breakdown histogram bin
     breakdown_hide_other_aggregation?: boolean | null // hides the "other" field for trends

frontend/src/scenes/funnels/funnelDataLogic.ts

@@ -179,7 +179,7 @@ export const funnelDataLogic = kea<funnelDataLogicType>([
                 if (!isTimeToConvertFunnel && Array.isArray(results)) {
                     if (isBreakdownFunnelResults(results)) {
                         const breakdownProperty = breakdownFilter?.breakdowns
-                            ? breakdownFilter?.breakdowns.map((b: { property: any }) => b.property).join('::')
+                            ? breakdownFilter?.breakdowns.map((b) => b.value).join('::')
                             : breakdownFilter?.breakdown ?? undefined
                         return aggregateBreakdownResult(results, breakdownProperty).sort((a, b) => a.order - b.order)
                     }