feat(web-analytics): Allow customers to compare against a different p…

…eriod Right now, we'd always compare our data against the last period, i.e. if we're looking at the data from the last 14 days, then you'd always compare it against the previous 14 days. This is not always ideal, as someone might want to compare against numbers from the same time last year. We've added the comparator component in a previous commit (hidden behind a FF) and we're now actually using that data in the backend.
PostHog · Dec 11, 2024 · 5eee1ba · 5eee1ba
1 parent 67b8765
commit 5eee1ba
Show file tree

Hide file tree

Showing 8 changed files with 195 additions and 150 deletions.
diff --git a/frontend/src/queries/schema.json b/frontend/src/queries/schema.json
@@ -546,22 +546,6 @@
             },
             "type": "object"
         },
-        "AssistantCompareFilter": {
-            "additionalProperties": false,
-            "properties": {
-                "compare": {
-                    "default": false,
-                    "description": "Whether to compare the current date range to a previous date range.",
-                    "type": "boolean"
-                },
-                "compare_to": {
-                    "default": "-7d",
-                    "description": "The date range to compare to. The value is a relative date. Examples of relative dates are: `-1y` for 1 year ago, `-14m` for 14 months ago, `-100w` for 100 weeks ago, `-14d` for 14 days ago, `-30h` for 30 hours ago.",
-                    "type": "string"
-                }
-            },
-            "type": "object"
-        },
         "AssistantDateTimePropertyFilter": {
             "additionalProperties": false,
             "properties": {
@@ -3792,9 +3776,13 @@
             "additionalProperties": false,
             "properties": {
                 "compare": {
+                    "default": false,
+                    "description": "Whether to compare the current date range to a previous date range.",
                     "type": "boolean"
                 },
                 "compare_to": {
+                    "default": "-7d",
+                    "description": "The date range to compare to. The value is a relative date. Examples of relative dates are: `-1y` for 1 year ago, `-14m` for 14 months ago, `-100w` for 100 weeks ago, `-14d` for 14 days ago, `-30h` for 30 hours ago.",
                     "type": "string"
                 }
             },
@@ -12869,6 +12857,9 @@
         "WebExternalClicksTableQuery": {
             "additionalProperties": false,
             "properties": {
+                "compareFilter": {
+                    "$ref": "#/definitions/CompareFilter"
+                },
                 "conversionGoal": {
                     "anyOf": [
                         {
@@ -12982,6 +12973,9 @@
         "WebGoalsQuery": {
             "additionalProperties": false,
             "properties": {
+                "compareFilter": {
+                    "$ref": "#/definitions/CompareFilter"
+                },
                 "conversionGoal": {
                     "anyOf": [
                         {
@@ -13122,14 +13116,7 @@
             "additionalProperties": false,
             "properties": {
                 "compareFilter": {
-                    "anyOf": [
-                        {
-                            "$ref": "#/definitions/CompareFilter"
-                        },
-                        {
-                            "type": "null"
-                        }
-                    ]
+                    "$ref": "#/definitions/CompareFilter"
                 },
                 "conversionGoal": {
                     "anyOf": [
@@ -13261,14 +13248,7 @@
                     "$ref": "#/definitions/WebStatsBreakdown"
                 },
                 "compareFilter": {
-                    "anyOf": [
-                        {
-                            "$ref": "#/definitions/CompareFilter"
-                        },
-                        {
-                            "type": "null"
-                        }
-                    ]
+                    "$ref": "#/definitions/CompareFilter"
                 },
                 "conversionGoal": {
                     "anyOf": [

diff --git a/frontend/src/queries/schema.ts b/frontend/src/queries/schema.ts
@@ -1171,7 +1171,7 @@ export interface AssistantTrendsFilter {
     yAxisScaleType?: TrendsFilterLegacy['y_axis_scale_type']
 }
 
-export interface AssistantCompareFilter {
+export interface CompareFilter {
     /**
      * Whether to compare the current date range to a previous date range.
      * @default false
@@ -1789,6 +1789,7 @@ interface WebAnalyticsQueryBase<R extends Record<string, any>> extends DataNode<
     dateRange?: DateRange
     properties: WebAnalyticsPropertyFilters
     conversionGoal?: WebAnalyticsConversionGoal | null
+    compareFilter?: CompareFilter
     sampling?: {
         enabled?: boolean
         forceSamplingRate?: SamplingRate
@@ -1800,7 +1801,6 @@ interface WebAnalyticsQueryBase<R extends Record<string, any>> extends DataNode<
 
 export interface WebOverviewQuery extends WebAnalyticsQueryBase<WebOverviewQueryResponse> {
     kind: NodeKind.WebOverviewQuery
-    compareFilter?: CompareFilter | null
     includeLCPScore?: boolean
 }
 
@@ -1852,7 +1852,6 @@ export enum WebStatsBreakdown {
 export interface WebStatsTableQuery extends WebAnalyticsQueryBase<WebStatsTableQueryResponse> {
     kind: NodeKind.WebStatsTableQuery
     breakdownBy: WebStatsBreakdown
-    compareFilter?: CompareFilter | null
     includeScrollDepth?: boolean // automatically sets includeBounceRate to true
     includeBounceRate?: boolean
     doPathCleaning?: boolean
@@ -2356,11 +2355,6 @@ export interface BreakdownFilter {
     breakdown_hide_other_aggregation?: boolean | null // hides the "other" field for trends
 }
 
-export interface CompareFilter {
-    compare?: boolean
-    compare_to?: string
-}
-
 // TODO: Rename to `DashboardFilters` for consistency with `HogQLFilters`
 export interface DashboardFilter {
     date_from?: string | null

diff --git a/frontend/src/scenes/web-analytics/tiles/WebAnalyticsTile.tsx b/frontend/src/scenes/web-analytics/tiles/WebAnalyticsTile.tsx
@@ -48,6 +48,8 @@ const VariationCell = (
         isPercentage ? `${(value * 100).toFixed(1)}%` : value.toLocaleString()
 
     return function Cell({ value }) {
+        const { compareFilter } = useValues(webAnalyticsLogic)
+
         if (!value) {
             return null
         }
@@ -57,10 +59,11 @@ const VariationCell = (
         }
 
         const [current, previous] = value as [number, number]
+
         const pctChangeFromPrevious =
             previous === 0 && current === 0 // Special case, render as flatline
                 ? 0
-                : current === null
+                : current === null || !compareFilter || compareFilter.compare === false
                 ? null
                 : previous === null || previous === 0
                 ? Infinity

diff --git a/frontend/src/scenes/web-analytics/webAnalyticsLogic.tsx b/frontend/src/scenes/web-analytics/webAnalyticsLogic.tsx
@@ -281,7 +281,7 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
             return { tileId, tabId }
         },
         setConversionGoalWarning: (warning: ConversionGoalWarning | null) => ({ warning }),
-        setCompareFilter: (compareFilter: CompareFilter | null) => ({ compareFilter }),
+        setCompareFilter: (compareFilter: CompareFilter) => ({ compareFilter }),
     }),
     reducers({
         webAnalyticsFilters: [
@@ -475,7 +475,7 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
             },
         ],
         compareFilter: [
-            { compare: true } as CompareFilter | null,
+            { compare: true } as CompareFilter,
             persistConfig,
             {
                 setCompareFilter: (_, { compareFilter }) => compareFilter,
@@ -621,7 +621,7 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                                 display: ChartDisplayType.ActionsLineGraph,
                                 ...trendsFilter,
                             },
-                            compareFilter: compareFilter || { compare: false },
+                            compareFilter,
                             filterTestAccounts,
                             conversionGoal: featureFlags[FEATURE_FLAGS.WEB_ANALYTICS_CONVERSION_GOAL_FILTERS]
                                 ? conversionGoal
@@ -882,6 +882,7 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                                                   kind: NodeKind.WebExternalClicksTableQuery,
                                                   properties: webAnalyticsFilters,
                                                   dateRange,
+                                                  compareFilter, // NOTE: Backend is not using this yet
                                                   sampling,
                                                   limit: 10,
                                                   filterTestAccounts,
@@ -1290,6 +1291,7 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                                       kind: NodeKind.WebGoalsQuery,
                                       properties: webAnalyticsFilters,
                                       dateRange,
+                                      compareFilter,
                                       sampling,
                                       limit: 10,
                                       filterTestAccounts,