Choose sensible interval for graphs

PostHog · Nov 23, 2023 · a779d4c · a779d4c
1 parent 139da53
commit a779d4c
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 6 deletions.
diff --git a/frontend/src/lib/utils.test.ts b/frontend/src/lib/utils.test.ts
@@ -23,6 +23,7 @@ import {
     eventToDescription,
     floorMsToClosestSecond,
     genericOperatorMap,
+    getDefaultInterval,
     getFormattedLastWeekDate,
     hexToRGBA,
     humanFriendlyDuration,
@@ -382,6 +383,28 @@ describe('dateStringToDayJs', () => {
     })
 })
 
+describe('getDefaultInterval', () => {
+    it('should return days for last 7 days', () => {
+        expect(getDefaultInterval('-7d', null)).toEqual('day')
+    })
+
+    it('should return hours for last 24 hours', () => {
+        expect(getDefaultInterval('-24h', null)).toEqual('hour')
+    })
+
+    it('should return days for month to date', () => {
+        expect(getDefaultInterval('-mStart', null)).toEqual('day')
+    })
+
+    it('should return month for year to date', () => {
+        expect(getDefaultInterval('yStart', null)).toEqual('month')
+    })
+
+    it('should return month for all time', () => {
+        expect(getDefaultInterval('all', null)).toEqual('month')
+    })
+})
+
 describe('hexToRGBA()', () => {
     it('converts hex to RGBA correctly', () => {
         expect(hexToRGBA('#ff0000', 0.3)).toEqual('rgba(255,0,0,0.3)')

diff --git a/frontend/src/lib/utils.tsx b/frontend/src/lib/utils.tsx
@@ -12,6 +12,7 @@ import {
     DateMappingOption,
     EventType,
     GroupActorType,
+    IntervalType,
     PropertyOperator,
     PropertyType,
     TimeUnitType,
@@ -967,6 +968,54 @@ export function dateStringToDayJs(date: string | null): dayjs.Dayjs | null {
     return response
 }
 
+export const getDefaultInterval = (dateFrom: string | null, dateTo: string | null): IntervalType => {
+    // use the default mapping if we can
+    for (const mapping of dateMapping) {
+        const mappingFrom = mapping.values[0] ?? null
+        const mappingTo = mapping.values[1] ?? null
+        if (mappingFrom === dateFrom && mappingTo === dateTo && mapping.defaultInterval) {
+            return mapping.defaultInterval
+        }
+    }
+
+    if (dateFrom?.endsWith('h') || dateTo?.endsWith('h')) {
+        return 'hour'
+    }
+
+    if (
+        dateFrom === 'mStart' ||
+        dateFrom?.endsWith('d') ||
+        dateFrom?.endsWith('dStart') ||
+        dateFrom?.endsWith('dEnd') ||
+        dateTo?.endsWith('d') ||
+        dateTo?.endsWith('dStart') ||
+        dateTo?.endsWith('dEnd')
+    ) {
+        return 'day'
+    }
+
+    if (
+        dateFrom === 'all' ||
+        dateFrom === 'yStart' ||
+        dateFrom?.endsWith('m') ||
+        dateFrom?.endsWith('mStart') ||
+        dateFrom?.endsWith('mEnd') ||
+        dateFrom?.endsWith('y') ||
+        dateFrom?.endsWith('yStart') ||
+        dateFrom?.endsWith('yEnd') ||
+        dateTo?.endsWith('m') ||
+        dateTo?.endsWith('mStart') ||
+        dateTo?.endsWith('mEnd') ||
+        dateTo?.endsWith('y') ||
+        dateTo?.endsWith('yStart') ||
+        dateTo?.endsWith('yEnd')
+    ) {
+        return 'month'
+    }
+
+    return 'day'
+}
+
 export function clamp(value: number, min: number, max: number): number {
     return value > max ? max : value < min ? min : value
 }

diff --git a/frontend/src/scenes/web-analytics/webAnalyticsLogic.ts b/frontend/src/scenes/web-analytics/webAnalyticsLogic.ts
@@ -4,7 +4,7 @@ import { windowValues } from 'kea-window-values'
 import api from 'lib/api'
 import { RETENTION_FIRST_TIME, STALE_EVENT_SECONDS } from 'lib/constants'
 import { dayjs } from 'lib/dayjs'
-import { isNotNil } from 'lib/utils'
+import { getDefaultInterval, isNotNil } from 'lib/utils'
 
 import {
     NodeKind,
@@ -91,6 +91,9 @@ export interface WebAnalyticsStatusCheck {
 }
 
 export const initialWebAnalyticsFilter = [] as WebAnalyticsPropertyFilters
+const initialDateFrom = '-7d' as string | null
+const initialDateTo = null as string | null
+const initialInterval = getDefaultInterval(initialDateFrom, initialDateTo)
 
 export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
     path(['scenes', 'webAnalytics', 'webAnalyticsSceneLogic']),
@@ -202,17 +205,23 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
             },
         ],
         dateFrom: [
-            '-7d' as string | null,
+            initialDateFrom,
             {
                 setDates: (_, { dateFrom }) => dateFrom,
             },
         ],
         dateTo: [
-            null as string | null,
+            initialDateTo,
             {
                 setDates: (_, { dateTo }) => dateTo,
             },
         ],
+        interval: [
+            initialInterval,
+            {
+                setDates: (_, { dateTo, dateFrom }) => getDefaultInterval(dateFrom, dateTo),
+            },
+        ],
     }),
     selectors(({ actions, values }) => ({
         tiles: [
@@ -225,6 +234,7 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                 s.geographyTab,
                 s.dateFrom,
                 s.dateTo,
+                s.interval,
                 () => values.isGreaterThanMd,
                 () => values.shouldShowGeographyTile,
             ],
@@ -237,6 +247,7 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                 geographyTab,
                 dateFrom,
                 dateTo,
+                interval,
                 isGreaterThanMd: boolean,
                 shouldShowGeographyTile
             ): WebDashboardTile[] => {
@@ -271,7 +282,7 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                                     source: {
                                         kind: NodeKind.TrendsQuery,
                                         dateRange,
-                                        interval: 'day',
+                                        interval,
                                         series: [
                                             {
                                                 event: '$pageview',
@@ -299,7 +310,7 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                                     source: {
                                         kind: NodeKind.TrendsQuery,
                                         dateRange,
-                                        interval: 'day',
+                                        interval,
                                         series: [
                                             {
                                                 event: '$pageview',
@@ -327,7 +338,7 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
                                     source: {
                                         kind: NodeKind.TrendsQuery,
                                         dateRange,
-                                        interval: 'day',
+                                        interval,
                                         series: [
                                             {
                                                 event: '$pageview',