feat(retention): graph UX updates (#29270)

PostHog · Feb 28, 2025 · 2f19e74 · 2f19e74
1 parent 616c2bb
commit 2f19e74
Show file tree

Hide file tree

Showing 55 changed files with 559 additions and 820 deletions.
diff --git a/frontend/__snapshots__/components-cards-insight-card--insight-card--dark.png b/frontend/__snapshots__/components-cards-insight-card--insight-card--dark.png
diff --git a/frontend/__snapshots__/components-cards-insight-card--insight-card--light.png b/frontend/__snapshots__/components-cards-insight-card--insight-card--light.png
diff --git a/frontend/__snapshots__/exporter-exporter--dashboard--dark.png b/frontend/__snapshots__/exporter-exporter--dashboard--dark.png
diff --git a/frontend/__snapshots__/exporter-exporter--retention-breakdown-insight--dark.png b/frontend/__snapshots__/exporter-exporter--retention-breakdown-insight--dark.png
diff --git a/frontend/__snapshots__/exporter-exporter--retention-breakdown-insight--light.png b/frontend/__snapshots__/exporter-exporter--retention-breakdown-insight--light.png
diff --git a/frontend/__snapshots__/exporter-exporter--retention-insight--dark.png b/frontend/__snapshots__/exporter-exporter--retention-insight--dark.png
diff --git a/frontend/__snapshots__/exporter-exporter--retention-insight--light.png b/frontend/__snapshots__/exporter-exporter--retention-insight--light.png
diff --git a/frontend/__snapshots__/scenes-app-insights--retention--dark--webkit.png b/frontend/__snapshots__/scenes-app-insights--retention--dark--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--retention--dark.png b/frontend/__snapshots__/scenes-app-insights--retention--dark.png
diff --git a/frontend/__snapshots__/scenes-app-insights--retention--light--webkit.png b/frontend/__snapshots__/scenes-app-insights--retention--light--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--retention--light.png b/frontend/__snapshots__/scenes-app-insights--retention--light.png
diff --git a/frontend/__snapshots__/scenes-app-insights--retention-breakdown--dark--webkit.png b/frontend/__snapshots__/scenes-app-insights--retention-breakdown--dark--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--retention-breakdown--dark.png b/frontend/__snapshots__/scenes-app-insights--retention-breakdown--dark.png
diff --git a/frontend/__snapshots__/scenes-app-insights--retention-breakdown--light--webkit.png b/frontend/__snapshots__/scenes-app-insights--retention-breakdown--light--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--retention-breakdown--light.png b/frontend/__snapshots__/scenes-app-insights--retention-breakdown--light.png
diff --git a/...d/__snapshots__/scenes-app-insights--retention-breakdown-edit--dark--webkit.png b/...d/__snapshots__/scenes-app-insights--retention-breakdown-edit--dark--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit--dark.png b/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit--dark.png
diff --git a/.../__snapshots__/scenes-app-insights--retention-breakdown-edit--light--webkit.png b/.../__snapshots__/scenes-app-insights--retention-breakdown-edit--light--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit--light.png b/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit--light.png
diff --git a/frontend/__snapshots__/scenes-app-insights--retention-edit--dark--webkit.png b/frontend/__snapshots__/scenes-app-insights--retention-edit--dark--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--retention-edit--dark.png b/frontend/__snapshots__/scenes-app-insights--retention-edit--dark.png
diff --git a/frontend/__snapshots__/scenes-app-insights--retention-edit--light--webkit.png b/frontend/__snapshots__/scenes-app-insights--retention-edit--light--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--retention-edit--light.png b/frontend/__snapshots__/scenes-app-insights--retention-edit--light.png
diff --git a/frontend/src/exporter/Exporter.stories.tsx b/frontend/src/exporter/Exporter.stories.tsx
@@ -189,11 +189,6 @@ FunnelTimeToConvertInsight.args = {
 export const RetentionInsight: Story = Template.bind({})
 RetentionInsight.args = { insight: require('../mocks/fixtures/api/projects/team_id/insights/retention.json') }
 
-export const RetentionBreakdownInsight: Story = Template.bind({})
-RetentionBreakdownInsight.args = {
-    insight: require('../mocks/fixtures/api/projects/team_id/insights/retentionBreakdown.json'),
-}
-
 export const LifecycleInsight: Story = Template.bind({})
 LifecycleInsight.args = { insight: require('../mocks/fixtures/api/projects/team_id/insights/lifecycle.json') }
 LifecycleInsight.tags = ['test-skip'] // doesn't produce a helpful reference image, as canvas can't be captured

diff --git a/frontend/src/mocks/fixtures/api/projects/team_id/insights/retention.json b/frontend/src/mocks/fixtures/api/projects/team_id/insights/retention.json
@@ -80,7 +80,7 @@
                 }
             ],
             "label": "Day 0",
-            "date": "2022-03-04T00:00:00Z",
+            "date": "2022-03-01T00:00:00Z",
             "people_url": "/api/person/retention/?breakdown_values=%5B0%5D&display=ActionsTable&insight=RETENTION&period=Day&retention_type=retention_first_time&returning_entity=%7B%22id%22%3A+%22%24pageview%22%2C+%22type%22%3A+%22events%22%2C+%22order%22%3A+null%2C+%22name%22%3A+%22%24pageview%22%2C+%22custom_name%22%3A+null%2C+%22math%22%3A+null%2C+%22math_property%22%3A+null%2C+%22math_group_type_index%22%3A+null%2C+%22properties%22%3A+%7B%7D%7D&target_entity=%7B%22id%22%3A+%22%24pageview%22%2C+%22type%22%3A+%22events%22%2C+%22order%22%3A+null%2C+%22name%22%3A+%22%24pageview%22%2C+%22custom_name%22%3A+null%2C+%22math%22%3A+null%2C+%22math_property%22%3A+null%2C+%22math_group_type_index%22%3A+null%2C+%22properties%22%3A+%7B%7D%7D&total_intervals=11"
         },
         {
@@ -127,7 +127,7 @@
                 }
             ],
             "label": "Day 1",
-            "date": "2022-03-05T00:00:00Z",
+            "date": "2022-03-02T00:00:00Z",
             "people_url": "/api/person/retention/?breakdown_values=%5B1%5D&display=ActionsTable&insight=RETENTION&period=Day&retention_type=retention_first_time&returning_entity=%7B%22id%22%3A+%22%24pageview%22%2C+%22type%22%3A+%22events%22%2C+%22order%22%3A+null%2C+%22name%22%3A+%22%24pageview%22%2C+%22custom_name%22%3A+null%2C+%22math%22%3A+null%2C+%22math_property%22%3A+null%2C+%22math_group_type_index%22%3A+null%2C+%22properties%22%3A+%7B%7D%7D&target_entity=%7B%22id%22%3A+%22%24pageview%22%2C+%22type%22%3A+%22events%22%2C+%22order%22%3A+null%2C+%22name%22%3A+%22%24pageview%22%2C+%22custom_name%22%3A+null%2C+%22math%22%3A+null%2C+%22math_property%22%3A+null%2C+%22math_group_type_index%22%3A+null%2C+%22properties%22%3A+%7B%7D%7D&total_intervals=11"
         },
         {
@@ -170,7 +170,7 @@
                 }
             ],
             "label": "Day 2",
-            "date": "2022-03-06T00:00:00Z",
+            "date": "2022-03-03T00:00:00Z",
             "people_url": "/api/person/retention/?breakdown_values=%5B2%5D&display=ActionsTable&insight=RETENTION&period=Day&retention_type=retention_first_time&returning_entity=%7B%22id%22%3A+%22%24pageview%22%2C+%22type%22%3A+%22events%22%2C+%22order%22%3A+null%2C+%22name%22%3A+%22%24pageview%22%2C+%22custom_name%22%3A+null%2C+%22math%22%3A+null%2C+%22math_property%22%3A+null%2C+%22math_group_type_index%22%3A+null%2C+%22properties%22%3A+%7B%7D%7D&target_entity=%7B%22id%22%3A+%22%24pageview%22%2C+%22type%22%3A+%22events%22%2C+%22order%22%3A+null%2C+%22name%22%3A+%22%24pageview%22%2C+%22custom_name%22%3A+null%2C+%22math%22%3A+null%2C+%22math_property%22%3A+null%2C+%22math_group_type_index%22%3A+null%2C+%22properties%22%3A+%7B%7D%7D&total_intervals=11"
         },
         {
@@ -213,7 +213,7 @@
                 }
             ],
             "label": "Day 3",
-            "date": "2022-03-07T00:00:00Z",
+            "date": "2022-03-04T00:00:00Z",
             "people_url": "/api/person/retention/?breakdown_values=%5B3%5D&display=ActionsTable&insight=RETENTION&period=Day&retention_type=retention_first_time&returning_entity=%7B%22id%22%3A+%22%24pageview%22%2C+%22type%22%3A+%22events%22%2C+%22order%22%3A+null%2C+%22name%22%3A+%22%24pageview%22%2C+%22custom_name%22%3A+null%2C+%22math%22%3A+null%2C+%22math_property%22%3A+null%2C+%22math_group_type_index%22%3A+null%2C+%22properties%22%3A+%7B%7D%7D&target_entity=%7B%22id%22%3A+%22%24pageview%22%2C+%22type%22%3A+%22events%22%2C+%22order%22%3A+null%2C+%22name%22%3A+%22%24pageview%22%2C+%22custom_name%22%3A+null%2C+%22math%22%3A+null%2C+%22math_property%22%3A+null%2C+%22math_group_type_index%22%3A+null%2C+%22properties%22%3A+%7B%7D%7D&total_intervals=11"
         },
         {
@@ -252,7 +252,7 @@
                 }
             ],
             "label": "Day 4",
-            "date": "2022-03-08T00:00:00Z",
+            "date": "2022-03-05T00:00:00Z",
             "people_url": "/api/person/retention/?breakdown_values=%5B4%5D&display=ActionsTable&insight=RETENTION&period=Day&retention_type=retention_first_time&returning_entity=%7B%22id%22%3A+%22%24pageview%22%2C+%22type%22%3A+%22events%22%2C+%22order%22%3A+null%2C+%22name%22%3A+%22%24pageview%22%2C+%22custom_name%22%3A+null%2C+%22math%22%3A+null%2C+%22math_property%22%3A+null%2C+%22math_group_type_index%22%3A+null%2C+%22properties%22%3A+%7B%7D%7D&target_entity=%7B%22id%22%3A+%22%24pageview%22%2C+%22type%22%3A+%22events%22%2C+%22order%22%3A+null%2C+%22name%22%3A+%22%24pageview%22%2C+%22custom_name%22%3A+null%2C+%22math%22%3A+null%2C+%22math_property%22%3A+null%2C+%22math_group_type_index%22%3A+null%2C+%22properties%22%3A+%7B%7D%7D&total_intervals=11"
         },
         {
@@ -285,7 +285,7 @@
                 }
             ],
             "label": "Day 5",
-            "date": "2022-03-09T00:00:00Z",
+            "date": "2022-03-06T00:00:00Z",
             "people_url": "/api/person/retention/?breakdown_values=%5B5%5D&display=ActionsTable&insight=RETENTION&period=Day&retention_type=retention_first_time&returning_entity=%7B%22id%22%3A+%22%24pageview%22%2C+%22type%22%3A+%22events%22%2C+%22order%22%3A+null%2C+%22name%22%3A+%22%24pageview%22%2C+%22custom_name%22%3A+null%2C+%22math%22%3A+null%2C+%22math_property%22%3A+null%2C+%22math_group_type_index%22%3A+null%2C+%22properties%22%3A+%7B%7D%7D&target_entity=%7B%22id%22%3A+%22%24pageview%22%2C+%22type%22%3A+%22events%22%2C+%22order%22%3A+null%2C+%22name%22%3A+%22%24pageview%22%2C+%22custom_name%22%3A+null%2C+%22math%22%3A+null%2C+%22math_property%22%3A+null%2C+%22math_group_type_index%22%3A+null%2C+%22properties%22%3A+%7B%7D%7D&total_intervals=11"
         },
         {
@@ -314,7 +314,7 @@
                 }
             ],
             "label": "Day 6",
-            "date": "2022-03-10T00:00:00Z",
+            "date": "2022-03-07T00:00:00Z",
             "people_url": "/api/person/retention/?breakdown_values=%5B6%5D&display=ActionsTable&insight=RETENTION&period=Day&retention_type=retention_first_time&returning_entity=%7B%22id%22%3A+%22%24pageview%22%2C+%22type%22%3A+%22events%22%2C+%22order%22%3A+null%2C+%22name%22%3A+%22%24pageview%22%2C+%22custom_name%22%3A+null%2C+%22math%22%3A+null%2C+%22math_property%22%3A+null%2C+%22math_group_type_index%22%3A+null%2C+%22properties%22%3A+%7B%7D%7D&target_entity=%7B%22id%22%3A+%22%24pageview%22%2C+%22type%22%3A+%22events%22%2C+%22order%22%3A+null%2C+%22name%22%3A+%22%24pageview%22%2C+%22custom_name%22%3A+null%2C+%22math%22%3A+null%2C+%22math_property%22%3A+null%2C+%22math_group_type_index%22%3A+null%2C+%22properties%22%3A+%7B%7D%7D&total_intervals=11"
         },
         {
@@ -339,7 +339,7 @@
                 }
             ],
             "label": "Day 7",
-            "date": "2022-03-11T00:00:00Z",
+            "date": "2022-03-08T00:00:00Z",
             "people_url": "/api/person/retention/?breakdown_values=%5B7%5D&display=ActionsTable&insight=RETENTION&period=Day&retention_type=retention_first_time&returning_entity=%7B%22id%22%3A+%22%24pageview%22%2C+%22type%22%3A+%22events%22%2C+%22order%22%3A+null%2C+%22name%22%3A+%22%24pageview%22%2C+%22custom_name%22%3A+null%2C+%22math%22%3A+null%2C+%22math_property%22%3A+null%2C+%22math_group_type_index%22%3A+null%2C+%22properties%22%3A+%7B%7D%7D&target_entity=%7B%22id%22%3A+%22%24pageview%22%2C+%22type%22%3A+%22events%22%2C+%22order%22%3A+null%2C+%22name%22%3A+%22%24pageview%22%2C+%22custom_name%22%3A+null%2C+%22math%22%3A+null%2C+%22math_property%22%3A+null%2C+%22math_group_type_index%22%3A+null%2C+%22properties%22%3A+%7B%7D%7D&total_intervals=11"
         },
         {
@@ -358,7 +358,7 @@
                 }
             ],
             "label": "Day 8",
-            "date": "2022-03-12T00:00:00Z",
+            "date": "2022-03-09T00:00:00Z",
             "people_url": "/api/person/retention/?breakdown_values=%5B8%5D&display=ActionsTable&insight=RETENTION&period=Day&retention_type=retention_first_time&returning_entity=%7B%22id%22%3A+%22%24pageview%22%2C+%22type%22%3A+%22events%22%2C+%22order%22%3A+null%2C+%22name%22%3A+%22%24pageview%22%2C+%22custom_name%22%3A+null%2C+%22math%22%3A+null%2C+%22math_property%22%3A+null%2C+%22math_group_type_index%22%3A+null%2C+%22properties%22%3A+%7B%7D%7D&target_entity=%7B%22id%22%3A+%22%24pageview%22%2C+%22type%22%3A+%22events%22%2C+%22order%22%3A+null%2C+%22name%22%3A+%22%24pageview%22%2C+%22custom_name%22%3A+null%2C+%22math%22%3A+null%2C+%22math_property%22%3A+null%2C+%22math_group_type_index%22%3A+null%2C+%22properties%22%3A+%7B%7D%7D&total_intervals=11"
         },
         {
@@ -373,7 +373,7 @@
                 }
             ],
             "label": "Day 9",
-            "date": "2022-03-13T00:00:00Z",
+            "date": "2022-03-10T00:00:00Z",
             "people_url": "/api/person/retention/?breakdown_values=%5B9%5D&display=ActionsTable&insight=RETENTION&period=Day&retention_type=retention_first_time&returning_entity=%7B%22id%22%3A+%22%24pageview%22%2C+%22type%22%3A+%22events%22%2C+%22order%22%3A+null%2C+%22name%22%3A+%22%24pageview%22%2C+%22custom_name%22%3A+null%2C+%22math%22%3A+null%2C+%22math_property%22%3A+null%2C+%22math_group_type_index%22%3A+null%2C+%22properties%22%3A+%7B%7D%7D&target_entity=%7B%22id%22%3A+%22%24pageview%22%2C+%22type%22%3A+%22events%22%2C+%22order%22%3A+null%2C+%22name%22%3A+%22%24pageview%22%2C+%22custom_name%22%3A+null%2C+%22math%22%3A+null%2C+%22math_property%22%3A+null%2C+%22math_group_type_index%22%3A+null%2C+%22properties%22%3A+%7B%7D%7D&total_intervals=11"
         },
         {
@@ -385,7 +385,7 @@
                 }
             ],
             "label": "Day 10",
-            "date": "2022-03-14T00:00:00Z",
+            "date": "2022-03-11T00:00:00Z",
             "people_url": "/api/person/retention/?breakdown_values=%5B10%5D&display=ActionsTable&insight=RETENTION&period=Day&retention_type=retention_first_time&returning_entity=%7B%22id%22%3A+%22%24pageview%22%2C+%22type%22%3A+%22events%22%2C+%22order%22%3A+null%2C+%22name%22%3A+%22%24pageview%22%2C+%22custom_name%22%3A+null%2C+%22math%22%3A+null%2C+%22math_property%22%3A+null%2C+%22math_group_type_index%22%3A+null%2C+%22properties%22%3A+%7B%7D%7D&target_entity=%7B%22id%22%3A+%22%24pageview%22%2C+%22type%22%3A+%22events%22%2C+%22order%22%3A+null%2C+%22name%22%3A+%22%24pageview%22%2C+%22custom_name%22%3A+null%2C+%22math%22%3A+null%2C+%22math_property%22%3A+null%2C+%22math_group_type_index%22%3A+null%2C+%22properties%22%3A+%7B%7D%7D&total_intervals=11"
         }
     ],