feat: Adjust dates display on the graph x-axis

frontend/src/lib/utils.tsx

@@ -553,6 +553,76 @@ export function humanFriendlyDetailedTime(
     return parsedDate.format(formatString)
 }
 
+export function cleanupDateList(dateTimeList: string[]): string[] {
+    const date1 = dayjs(dateTimeList[0])
+    const date2 = dayjs(dateTimeList[1])
+    const diffInHours = date2.diff(date1, 'hour')
+    const diffInDays = date2.diff(date1, 'day')
+    const diffInWeeks = date2.diff(date1, 'week')
+    const diffInMonths = date2.diff(date1, 'month')
+
+    let previousDate: dayjs.Dayjs | null = null
+
+    if (diffInHours === 1) {
+        return dateTimeList.map((dateTimeString) => {
+            const dateTime = new Date(dateTimeString)
+            const currentDate = dayjs(dateTime)
+            const time = currentDate.format('HH:mm')
+            let formattedDate = ''
+
+            if (!currentDate.isSame(previousDate, 'day')) {
+                formattedDate = currentDate.format('YYYY-MM-DD')
+                previousDate = currentDate
+            }
+
+            return [time, formattedDate]
+        })
+    } else if (diffInDays === 1) {
+        return dateTimeList.map((dateTimeString) => {
+            const dateTime = new Date(dateTimeString)
+            const currentDate = dayjs(dateTime)
+            const time = currentDate.format('HH:mm')
+            let formattedDate = currentDate.format('DD-MMM')
+
+            if (!currentDate.isSame(previousDate, 'month')) {
+                formattedDate = currentDate.format('DD-MMM-YYYY')
+                previousDate = currentDate
+            }
+
+            return [time, formattedDate]
+        })
+    } else if (diffInWeeks === 1) {
+        return dateTimeList.map((dateTimeString) => {
+            const dateTime = new Date(dateTimeString)
+            const currentDate = dayjs(dateTime)
+            const time = currentDate.format('HH:mm')
+            let formattedDate = currentDate.format('DD-MMM')
+
+            if (!currentDate.isSame(previousDate, 'year')) {
+                formattedDate = currentDate.format('DD-MMM-YYYY')
+                previousDate = currentDate
+            }
+
+            return [time, formattedDate]
+        })
+    } else if (diffInMonths === 1) {
+        return dateTimeList.map((dateTimeString) => {
+            const dateTime = new Date(dateTimeString)
+            const currentDate = dayjs(dateTime)
+            const time = currentDate.format('HH:mm')
+            let formattedDate = currentDate.format('DD-MMM')
+
+            if (!currentDate.isSame(previousDate, 'year')) {
+                formattedDate = currentDate.format('DD-MMM-YYYY')
+                previousDate = currentDate
+            }
+
+            return [time, formattedDate]
+        })
+    }
+    return dateTimeList
+}
+
 // Pad numbers with leading zeros
 export const zeroPad = (num: number, places: number): string => String(num).padStart(places, '0')
 

frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx

@@ -38,7 +38,7 @@ import { createTooltipData } from 'scenes/insights/views/LineGraph/tooltip-data'
 
 import { ErrorBoundary } from '~/layout/ErrorBoundary'
 import { themeLogic } from '~/layout/navigation-3000/themeLogic'
-import { hexToRGBA, lightenDarkenColor } from '~/lib/utils'
+import { cleanupDateList, hexToRGBA, lightenDarkenColor } from '~/lib/utils'
 import { groupsModel } from '~/models/groupsModel'
 import { TrendsFilter } from '~/queries/schema'
 import { GraphDataset, GraphPoint, GraphPointPayload, GraphType } from '~/types'
@@ -767,10 +767,21 @@ export function LineGraph_({
             options.indexAxis = 'y'
         }
         Chart.register(ChartjsPluginStacked100)
+        labels = cleanupDateList(labels)
         const newChart = new Chart(canvasRef.current?.getContext('2d') as ChartItem, {
             type: (isBar ? GraphType.Bar : type) as ChartType,
             data: { labels, datasets },
-            options,
+            options: {
+                ...options,
+                scales: {
+                    x: {
+                        ticks: {
+                            maxRotation: 0,
+                            minRotation: 0,
+                        },
+                    },
+                },
+            },
             plugins: [ChartDataLabels],
         })
         setMyLineChart(newChart)

frontend/src/scenes/web-analytics/request.json

@@ -0,0 +1,29 @@
+{
+    "query": {
+        "kind": "TrendsQuery",
+        "dateRange": {
+            "date_from": "-7d",
+            "date_to": ""
+        },
+        "interval": "hour",
+        "series": [
+            {
+                "event": "$pageview",
+                "kind": "EventsNode",
+                "math": "dau",
+                "name": "Pageview",
+                "custom_name": "2Unique visitors"
+            }
+        ],
+        "trendsFilter": {
+            "display": "ActionsLineGraph"
+        },
+        "compareFilter": {
+            "compare": true
+        },
+        "filterTestAccounts": false,
+        "properties": []
+    },
+    "client_query_id": "c65c7683-af09-426d-b37b-d2486b6a4c28",
+    "refresh": "async"
+}