feat: Add Storybook snapshots for Web Analytics and Web Vitals (#27709)

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

frontend/src/lib/utils/apiHost.ts

@@ -16,6 +16,9 @@ export function liveEventsHostOrigin(): string | null {
         return 'https://live.eu.posthog.com'
     } else if (appOrigin === 'https://app.dev.posthog.dev') {
         return 'https://live.dev.posthog.dev'
+    } else if (process.env.STORYBOOK) {
+        return 'http://localhost:6006'
     }
+
     return 'http://localhost:8666'
 }

frontend/src/queries/examples.ts

@@ -1,4 +1,7 @@
 // This file contains example queries, used in storybook and in the /query interface.
+import { RETENTION_FIRST_TIME } from 'lib/constants'
+import { WEB_VITALS_THRESHOLDS } from 'scenes/web-analytics/webAnalyticsLogic'
+
 import { defaultDataTableColumns } from '~/queries/nodes/DataTable/utils'
 import {
     ActionsNode,
@@ -18,13 +21,22 @@ import {
     RetentionQuery,
     StickinessQuery,
     TrendsQuery,
+    WebStatsBreakdown,
+    WebVitalsMetric,
+    WebVitalsPathBreakdownQuery,
+    WebVitalsPercentile,
+    WebVitalsQuery,
 } from '~/queries/schema/schema-general'
 import {
+    BaseMathType,
     ChartDisplayType,
     FilterLogicalOperator,
+    InsightType,
     PropertyFilterType,
     PropertyGroupFilter,
+    PropertyMathType,
     PropertyOperator,
+    RetentionPeriod,
     StepOrderValue,
 } from '~/types'
 
@@ -352,6 +364,150 @@ const Hoggonacci: HogQuery = {
 }
 return fibonacci(16);`,
 }
+
+const WebVitals: WebVitalsQuery = {
+    kind: NodeKind.WebVitalsQuery,
+    properties: [],
+    dateRange: {
+        date_from: '-7d',
+    },
+    source: {
+        kind: NodeKind.TrendsQuery,
+        dateRange: {
+            date_from: '-7d',
+        },
+        interval: 'day',
+        series: (['INP', 'LCP', 'CLS', 'FCP'] as WebVitalsMetric[]).flatMap((name) =>
+            [PropertyMathType.P75, PropertyMathType.P90, PropertyMathType.P99].map((math) => ({
+                kind: NodeKind.EventsNode,
+                event: '$web_vitals',
+                name: '$web_vitals',
+                custom_name: name,
+                math: math,
+                math_property: `$web_vitals_${name}_value`,
+            }))
+        ),
+        trendsFilter: { display: ChartDisplayType.ActionsLineGraph },
+        filterTestAccounts,
+    },
+}
+
+const WebVitalsPathBreakdown: WebVitalsPathBreakdownQuery = {
+    kind: NodeKind.WebVitalsPathBreakdownQuery,
+    properties: [],
+    dateRange: {
+        date_from: '-7d',
+    },
+    filterTestAccounts,
+    percentile: 'p90' as WebVitalsPercentile,
+    metric: 'CLS' as WebVitalsMetric,
+    doPathCleaning: true,
+    thresholds: [WEB_VITALS_THRESHOLDS['CLS'].good, WEB_VITALS_THRESHOLDS['CLS'].poor],
+}
+
+const WebAnalyticsReferrerDomain: DataTableNode = {
+    kind: NodeKind.DataTableNode,
+    source: {
+        kind: NodeKind.WebStatsTableQuery,
+        properties: [],
+        breakdownBy: WebStatsBreakdown.InitialReferringDomain,
+        dateRange: {
+            date_from: '-14d',
+            date_to: null,
+        },
+        compareFilter: { compare: false },
+        limit: 10,
+        filterTestAccounts: false,
+        conversionGoal: null,
+    },
+}
+
+const WebAnalyticsPath: DataTableNode = {
+    kind: NodeKind.DataTableNode,
+    source: {
+        kind: NodeKind.WebStatsTableQuery,
+        properties: [],
+        breakdownBy: WebStatsBreakdown.Page,
+        dateRange: {
+            date_from: '-14d',
+            date_to: null,
+        },
+        compareFilter: { compare: false },
+        limit: 10,
+        filterTestAccounts: false,
+        conversionGoal: null,
+    },
+}
+
+const WebAnalyticsBrowser: DataTableNode = {
+    kind: NodeKind.DataTableNode,
+    source: {
+        kind: NodeKind.WebStatsTableQuery,
+        properties: [],
+        breakdownBy: WebStatsBreakdown.Browser,
+        dateRange: {
+            date_from: '-14d',
+            date_to: null,
+        },
+        compareFilter: { compare: false },
+        limit: 10,
+        filterTestAccounts: false,
+        conversionGoal: null,
+    },
+}
+
+const WebAnalyticsWorldMap: InsightVizNode<TrendsQuery> = {
+    kind: NodeKind.InsightVizNode,
+    source: {
+        kind: NodeKind.TrendsQuery,
+        breakdownFilter: {
+            breakdown: '$geoip_country_code',
+            breakdown_type: 'event',
+        },
+        dateRange: {
+            date_from: '-14d',
+            date_to: null,
+        },
+        series: [
+            {
+                event: '$pageview',
+                name: 'Pageview',
+                kind: NodeKind.EventsNode,
+                math: BaseMathType.MonthlyActiveUsers, // Should be DAU, but it's not supported yet
+            },
+        ],
+        trendsFilter: { display: ChartDisplayType.WorldMap },
+        filterTestAccounts: false,
+        properties: [],
+    },
+}
+
+const WebAnalyticsRetention: InsightVizNode<RetentionQuery> = {
+    kind: NodeKind.InsightVizNode,
+    source: {
+        kind: NodeKind.RetentionQuery,
+        properties: [],
+        dateRange: {
+            date_from: '-14d',
+            date_to: null,
+        },
+        filterTestAccounts: false,
+        retentionFilter: {
+            retentionType: RETENTION_FIRST_TIME,
+            retentionReference: 'total',
+            totalIntervals: 8,
+            period: RetentionPeriod.Week,
+        },
+    },
+    vizSpecificOptions: {
+        [InsightType.RETENTION]: {
+            hideLineGraph: true,
+            hideSizeColumn: false,
+            useSmallLayout: false,
+        },
+    },
+}
+
 /* a subset of examples including only those we can show all users and that don't use HogQL */
 export const queryExamples: Record<string, Node> = {
     Events,
@@ -384,6 +540,13 @@ export const queryExamples: Record<string, Node> = {
         kind: NodeKind.InsightVizNode,
         source: InsightLifecycleQuery,
     } as InsightVizNode<LifecycleQuery>,
+    WebVitals,
+    WebVitalsPathBreakdown,
+    WebAnalyticsWorldMap,
+    WebAnalyticsReferrerDomain,
+    WebAnalyticsPath,
+    WebAnalyticsBrowser,
+    WebAnalyticsRetention,
 }
 
 export const stringifiedQueryExamples: Record<string, string> = Object.fromEntries(

frontend/src/queries/nodes/WebVitals/WebVitals.stories.tsx

@@ -0,0 +1,50 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react'
+
+import { mswDecorator } from '~/mocks/browser'
+import { examples } from '~/queries/examples'
+import { Query } from '~/queries/Query/Query'
+
+import webVitals from './__mocks__/WebVitals.json'
+import webVitalsTrends from './__mocks__/WebVitalsTrends.json'
+
+type Story = StoryObj<typeof Query>
+const meta: Meta<typeof Query> = {
+    title: 'Queries/WebVitals',
+    component: Query,
+    parameters: {
+        layout: 'fullscreen',
+        viewMode: 'story',
+        testOptions: {
+            waitForLoadersToDisappear: true,
+            waitForSelector: '[data-attr=trend-line-graph] > canvas',
+        },
+    },
+    decorators: [
+        mswDecorator({
+            post: {
+                '/api/environments/:team_id/query/': (req) => {
+                    if ((req.body as any).query.kind === 'WebVitalsQuery') {
+                        return [200, webVitals]
+                    } else if ((req.body as any).query.kind === 'TrendsQuery') {
+                        return [200, webVitalsTrends]
+                    }
+                },
+            },
+        }),
+    ],
+}
+export default meta
+
+// NOTE: See InsightCard.scss to see why we need this wrapper
+const QueryTemplate: StoryFn<typeof Query> = (args) => {
+    return (
+        <div className="WebAnalyticsDashboard">
+            <div className="InsightVizDisplay">
+                <Query {...args} />
+            </div>
+        </div>
+    )
+}
+
+export const WebVitals: Story = QueryTemplate.bind({})
+WebVitals.args = { query: examples['WebVitals'] }

frontend/src/queries/nodes/WebVitals/WebVitalsPathBreakdown.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react'
+
+import { mswDecorator } from '~/mocks/browser'
+import { examples } from '~/queries/examples'
+import { Query } from '~/queries/Query/Query'
+
+import webVitalsPathBreakdown from './__mocks__/WebVitalsPathBreakdown.json'
+
+type Story = StoryObj<typeof Query>
+const meta: Meta<typeof Query> = {
+    title: 'Queries/WebVitalsPathBreakdown',
+    component: Query,
+    parameters: {
+        layout: 'fullscreen',
+        viewMode: 'story',
+    },
+    decorators: [
+        mswDecorator({
+            post: {
+                '/api/environments/:team_id/query/': (req) => {
+                    if ((req.body as any).query.kind === 'WebVitalsPathBreakdownQuery') {
+                        return [200, webVitalsPathBreakdown]
+                    }
+                },
+            },
+        }),
+    ],
+}
+export default meta
+
+const QueryTemplate: StoryFn<typeof Query> = (args) => <Query {...args} />
+
+export const WebVitalsPathBreakdown: Story = QueryTemplate.bind({})
+WebVitalsPathBreakdown.args = { query: examples['WebVitalsPathBreakdown'] }

frontend/src/queries/nodes/WebVitals/WebVitalsPathBreakdown.tsx

@@ -39,24 +39,22 @@ export function WebVitalsPathBreakdown(props: {
     const webVitalsQueryResponse = response as WebVitalsPathBreakdownQueryResponse | undefined
 
     return (
-        <div className="border rounded bg-bg-muted flex-1 flex flex-col min-h-60 h-full">
-            <div className="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x h-full">
-                <div className="p-4">
-                    <Header band="good" label="Good" />
-                    <Content band="good" response={webVitalsQueryResponse} responseLoading={responseLoading} />
-                </div>
-                <div className="p-4">
-                    <Header band="needs_improvements" label="Needs Improvements" />
-                    <Content
-                        band="needs_improvements"
-                        response={webVitalsQueryResponse}
-                        responseLoading={responseLoading}
-                    />
-                </div>
-                <div className="p-4">
-                    <Header band="poor" label="Poor" />
-                    <Content band="poor" response={webVitalsQueryResponse} responseLoading={responseLoading} />
-                </div>
+        <div className="border rounded bg-bg-muted grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x min-h-60 h-full">
+            <div className="p-4">
+                <Header band="good" label="Good" />
+                <Content band="good" response={webVitalsQueryResponse} responseLoading={responseLoading} />
+            </div>
+            <div className="p-4">
+                <Header band="needs_improvements" label="Needs Improvements" />
+                <Content
+                    band="needs_improvements"
+                    response={webVitalsQueryResponse}
+                    responseLoading={responseLoading}
+                />
+            </div>
+            <div className="p-4">
+                <Header band="poor" label="Poor" />
+                <Content band="poor" response={webVitalsQueryResponse} responseLoading={responseLoading} />
             </div>
         </div>
     )
@@ -157,7 +155,7 @@ const Content = ({
                                 <div
                                     className="absolute top-0 left-0 h-full"
                                     // eslint-disable-next-line react/forbid-dom-props
-                                    style={{ width, backgroundColor: 'var(--neutral-250)', opacity: 0.5 }}
+                                    style={{ width, backgroundColor: 'var(--muted)', opacity: 0.5 }}
                                 />
                                 <span title={path} className="relative z-10 truncate mr-2 flex-1">
                                     {path}