chore: project daily stats caching / deprecated props (#39277)

Remove deprecated props that have no effect on behaviour and fix the caching (based on date instead of timestamp)

apps/studio/components/interfaces/Reports/ReportBlock/ChartBlock.tsx

@@ -74,10 +74,8 @@ export const ChartBlock = ({
     {
       projectRef: ref as string,
       attribute: attribute as ProjectDailyStatsAttribute,
-      startDate,
-      endDate,
-      interval: interval as AnalyticsInterval,
-      databaseIdentifier,
+      startDate: dayjs(startDate).format('YYYY-MM-DD'),
+      endDate: dayjs(endDate).format('YYYY-MM-DD'),
     },
     { enabled: provider === 'daily-stats' }
   )

apps/studio/components/interfaces/Reports/v2/ReportChartUpsell.tsx

@@ -1,8 +1,7 @@
+import { LogChartHandler } from 'components/ui/Charts/LogChartHandler'
 import Link from 'next/link'
 import { useRef, useState } from 'react'
 
-import { LogChartHandler } from 'components/ui/Charts/LogChartHandler'
-import { ReportConfig } from 'data/reports/v2/reports.types'
 import { Button, Card, cn } from 'ui'
 
 export function ReportChartUpsell({
@@ -78,7 +77,6 @@ export function ReportChartUpsell({
           label={''}
           startDate={startDate}
           endDate={endDate}
-          interval={'1d'}
           data={demoData as any}
           isLoading={false}
           highlightedValue={0}

apps/studio/components/ui/Charts/ChartHandler.tsx

@@ -17,6 +17,7 @@ import { Activity, BarChartIcon, Loader2 } from 'lucide-react'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
 import { WarningIcon } from 'ui'
 import type { ChartData } from './Charts.types'
+import dayjs from 'dayjs'
 
 interface ChartHandlerProps {
   id?: string
@@ -75,10 +76,8 @@ const ChartHandler = ({
     {
       projectRef: ref as string,
       attribute: attribute as ProjectDailyStatsAttribute,
-      startDate,
-      endDate,
-      interval: interval as AnalyticsInterval,
-      databaseIdentifier,
+      startDate: dayjs(startDate).format('YYYY-MM-DD'),
+      endDate: dayjs(endDate).format('YYYY-MM-DD'),
     },
     { enabled: provider === 'daily-stats' && data === undefined }
   )

apps/studio/components/ui/Charts/ComposedChartHandler.tsx

@@ -343,8 +343,6 @@ const useAttributeQueries = (
     ref,
     startDate,
     endDate,
-    interval,
-    databaseIdentifier,
     data,
     isVisible
   )

apps/studio/components/ui/Charts/LogChartHandler.tsx

@@ -1,19 +1,19 @@
-import React, { PropsWithChildren, useState, useEffect, useRef } from 'react'
 import { Loader2 } from 'lucide-react'
+import React, { PropsWithChildren, useEffect, useRef, useState } from 'react'
 import { cn, WarningIcon } from 'ui'
 
 import Panel from 'components/ui/Panel'
 import { ComposedChart } from './ComposedChart'
 
-import { AnalyticsInterval, DataPoint } from 'data/analytics/constants'
-import { InfraMonitoringAttribute } from 'data/analytics/infra-monitoring-query'
+import { AnalyticsInterval } from 'data/analytics/constants'
 import { useInfraMonitoringQueries } from 'data/analytics/infra-monitoring-queries'
-import { ProjectDailyStatsAttribute } from 'data/analytics/project-daily-stats-query'
+import { InfraMonitoringAttribute } from 'data/analytics/infra-monitoring-query'
 import { useProjectDailyStatsQueries } from 'data/analytics/project-daily-stats-queries'
+import { ProjectDailyStatsAttribute } from 'data/analytics/project-daily-stats-query'
 import { useChartHighlight } from './useChartHighlight'
 
-import type { ChartData } from './Charts.types'
 import type { UpdateDateRange } from 'pages/project/[ref]/reports/database'
+import type { ChartData } from './Charts.types'
 import type { MultiAttribute } from './ComposedChart.utils'
 
 interface LogChartHandlerProps {
@@ -22,7 +22,6 @@ interface LogChartHandlerProps {
   attributes: MultiAttribute[]
   startDate: string
   endDate: string
-  interval: string
   customDateFormat?: string
   defaultChartStyle?: 'bar' | 'line' | 'stackedAreaLine'
   hideChartType?: boolean
@@ -196,8 +195,6 @@ export const useAttributeQueries = (
     ref,
     startDate,
     endDate,
-    interval,
-    databaseIdentifier,
     data,
     isVisible
   )

apps/studio/data/analytics/project-daily-stats-queries.ts

@@ -1,14 +1,11 @@
 import { useProjectDailyStatsQuery } from './project-daily-stats-query'
 import type { ProjectDailyStatsAttribute } from './project-daily-stats-query'
-import { AnalyticsInterval } from './constants'
 
 export function useProjectDailyStatsQueries(
   attributes: ProjectDailyStatsAttribute[],
   ref: string | string[] | undefined,
   startDate: string,
   endDate: string,
-  interval: AnalyticsInterval,
-  databaseIdentifier: string | undefined,
   data: any,
   isVisible: boolean
 ) {
@@ -19,8 +16,6 @@ export function useProjectDailyStatsQueries(
         attribute,
         startDate,
         endDate,
-        interval,
-        databaseIdentifier,
       },
       { enabled: data === undefined && isVisible }
     )

apps/studio/data/analytics/project-daily-stats-query.ts

@@ -1,9 +1,8 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
-import dayjs from 'dayjs'
 
 import { operations } from 'api-types'
 import { get, handleError } from 'data/fetchers'
-import type { AnalyticsData, AnalyticsInterval } from './constants'
+import type { AnalyticsData } from './constants'
 import { analyticsKeys } from './keys'
 
 export type ProjectDailyStatsAttribute =
@@ -14,21 +13,10 @@ export type ProjectDailyStatsVariables = {
   attribute: ProjectDailyStatsAttribute
   startDate?: string
   endDate?: string
-  interval?: AnalyticsInterval
-  dateFormat?: string
-  databaseIdentifier?: string
-  modifier?: (x: number) => number
 }
 
 export async function getProjectDailyStats(
-  {
-    projectRef,
-    attribute,
-    startDate,
-    endDate,
-    interval = '1d',
-    databaseIdentifier,
-  }: ProjectDailyStatsVariables,
+  { projectRef, attribute, startDate, endDate }: ProjectDailyStatsVariables,
   signal?: AbortSignal
 ) {
   if (!projectRef) throw new Error('Project ref is required')
@@ -43,9 +31,6 @@ export async function getProjectDailyStats(
         attribute,
         startDate,
         endDate,
-        interval,
-        // [Joshen] TODO: Once API support is ready
-        // databaseIdentifier,
       },
     },
     signal,
@@ -59,16 +44,7 @@ export type ProjectDailyStatsData = Awaited<ReturnType<typeof getProjectDailySta
 export type ProjectDailyStatsError = unknown
 
 export const useProjectDailyStatsQuery = <TData = ProjectDailyStatsData>(
-  {
-    projectRef,
-    attribute,
-    startDate,
-    endDate,
-    interval = '1d',
-    dateFormat = 'DD MMM',
-    databaseIdentifier,
-    modifier,
-  }: ProjectDailyStatsVariables,
+  { projectRef, attribute, startDate, endDate }: ProjectDailyStatsVariables,
   {
     enabled = true,
     ...options
@@ -79,14 +55,8 @@ export const useProjectDailyStatsQuery = <TData = ProjectDailyStatsData>(
       attribute,
       startDate,
       endDate,
-      interval,
-      databaseIdentifier,
     }),
-    ({ signal }) =>
-      getProjectDailyStats(
-        { projectRef, attribute, startDate, endDate, interval, databaseIdentifier },
-        signal
-      ),
+    ({ signal }) => getProjectDailyStats({ projectRef, attribute, startDate, endDate }, signal),
     {
       enabled:
         enabled &&
@@ -94,20 +64,7 @@ export const useProjectDailyStatsQuery = <TData = ProjectDailyStatsData>(
         typeof attribute !== 'undefined' &&
         typeof startDate !== 'undefined' &&
         typeof endDate !== 'undefined',
-      select(data) {
-        return {
-          ...data,
-          data: data.data.map((x) => {
-            return {
-              ...x,
-              [attribute]:
-                modifier !== undefined ? modifier(Number(x[attribute])) : Number(x[attribute]),
-              periodStartFormatted: dayjs(x.period_start).format(dateFormat),
-            }
-          }),
-        } as TData
-      },
-      staleTime: 1000 * 60, // default good for a minute
+      staleTime: 1000 * 60 * 30, // default good for 30m, stats only refresh once a day
       ...options,
     }
   )