feat(overview): update chart titles and intervals for better data vis…

…ualization

app/overview/page.tsx

@@ -52,15 +52,19 @@ export default async function Overview() {
 
           <ServerComponentLazy>
             <ChartQueryCountByUser
-              title="Query Count"
+              title="Query Count last 24h"
+              lastHours={24}
+              interval="toStartOfHour"
               className="w-full p-5"
               chartClassName="h-72"
             />
           </ServerComponentLazy>
 
           <ServerComponentLazy>
             <ChartMergeCount
-              title="Merge and PartMutation (Avg)"
+              title="Merge and PartMutation last 24h (avg)"
+              lastHours={24}
+              interval="toStartOfHour"
               className="w-full p-5"
               chartClassName="h-72"
             />
@@ -73,9 +77,9 @@ export default async function Overview() {
           <ServerComponentLazy>
             <ChartNewPartsCreated
               className="w-full p-5"
-              title="New Parts Created over last 24 hours"
+              title="New Parts Created over last 7 days"
               interval="toStartOfHour"
-              lastHours={24}
+              lastHours={24 * 7}
             />
           </ServerComponentLazy>
         </div>

components/charts/disks-usage.tsx

@@ -2,6 +2,7 @@ import { type ChartProps } from '@/components/charts/chart-props'
 import { AreaChart } from '@/components/generic-charts/area'
 import { ChartCard } from '@/components/generic-charts/chart-card'
 import { fetchDataWithCache } from '@/lib/clickhouse-cache'
+import { applyInterval } from '@/lib/clickhouse-query'
 import { cn } from '@/lib/utils'
 
 export async function ChartDisksUsage({
@@ -15,7 +16,7 @@ export async function ChartDisksUsage({
   const query = `
     WITH CAST(sumMap(map(metric, value)), 'Map(LowCardinality(String), UInt32)') AS map
     SELECT
-        ${interval}(event_time) as event_time,
+        ${applyInterval(interval, 'event_time')},
         map['DiskAvailable_default'] as DiskAvailable_default,
         map['DiskUsed_default'] as DiskUsed_default,
         formatReadableSize(DiskAvailable_default) as readable_DiskAvailable_default,

components/charts/query-count-by-user.tsx

@@ -2,6 +2,7 @@ import { type ChartProps } from '@/components/charts/chart-props'
 import { BarChart } from '@/components/generic-charts/bar'
 import { ChartCard } from '@/components/generic-charts/chart-card'
 import { fetchDataWithCache } from '@/lib/clickhouse-cache'
+import { applyInterval } from '@/lib/clickhouse-query'
 
 export async function ChartQueryCountByUser({
   title,
@@ -12,7 +13,7 @@ export async function ChartQueryCountByUser({
   ...props
 }: ChartProps) {
   const query = `
-    SELECT toDate(${interval}(event_time)) AS event_time,
+    SELECT ${applyInterval(interval, 'event_time')},
            user,
            COUNT(*) AS count
     FROM merge(system, '^query_log')
@@ -21,7 +22,7 @@ export async function ChartQueryCountByUser({
           AND user != ''
     GROUP BY 1, 2
     ORDER BY
-      1 ASC WITH FILL STEP toIntervalDay(1),
+      1 ASC,
       3 DESC
   `
   const { data: raw } = await fetchDataWithCache<

lib/clickhouse-query.test.ts

@@ -0,0 +1,24 @@
+import { expect } from '@jest/globals'
+import { applyInterval } from './clickhouse-query'
+
+describe('applyInterval', () => {
+  it('should apply toStartOfDay for toStartOfDay interval', () => {
+    const result = applyInterval('toStartOfDay', 'myColumn', 'myAlias')
+    expect(result).toEqual('toDate(toStartOfDay(myColumn)) as myAlias') // Change to toEqual
+  })
+
+  it('should apply toStartOfWeek for toStartOfWeek interval', () => {
+    const result = applyInterval('toStartOfWeek', 'myColumn')
+    expect(result).toEqual('toDate(toStartOfDay(myColumn)) as myColumn') // Change to toEqual
+  })
+
+  it('should apply toStartOfMonth for toStartOfMonth interval', () => {
+    const result = applyInterval('toStartOfMonth', 'myColumn', 'myAlias')
+    expect(result).toEqual('toDate(toStartOfDay(myColumn)) as myAlias') // Change to toEqual
+  })
+
+  it('should apply toStartOfHour for other intervals', () => {
+    const result = applyInterval('toStartOfHour', 'myColumn', 'myAlias')
+    expect(result).toEqual('toStartOfHour(myColumn) as myAlias') // Change to toEqual
+  })
+})

lib/clickhouse-query.ts

@@ -0,0 +1,17 @@
+import type { ClickHouseInterval } from '@/types/clickhouse-interval'
+
+export function applyInterval(
+  interval: ClickHouseInterval,
+  column: string,
+  alias?: string
+) {
+  if (
+    interval === 'toStartOfMonth' ||
+    interval === 'toStartOfWeek' ||
+    interval === 'toStartOfDay'
+  ) {
+    return `toDate(toStartOfDay(${column})) as ${alias || column}`
+  }
+
+  return `toStartOfHour(${column}) as ${alias || column}`
+}