diff --git a/apps/studio/components/interfaces/Reports/ReportBlock/ChartBlock.tsx b/apps/studio/components/interfaces/Reports/ReportBlock/ChartBlock.tsx index b8bf0c518bb..1e6ea533305 100644 --- a/apps/studio/components/interfaces/Reports/ReportBlock/ChartBlock.tsx +++ b/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' } ) diff --git a/apps/studio/components/interfaces/Reports/v2/ReportChartUpsell.tsx b/apps/studio/components/interfaces/Reports/v2/ReportChartUpsell.tsx index 779aa17ee33..d5bd366bf00 100644 --- a/apps/studio/components/interfaces/Reports/v2/ReportChartUpsell.tsx +++ b/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} diff --git a/apps/studio/components/ui/Charts/ChartHandler.tsx b/apps/studio/components/ui/Charts/ChartHandler.tsx index 90193372084..09c292813ec 100644 --- a/apps/studio/components/ui/Charts/ChartHandler.tsx +++ b/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 } ) diff --git a/apps/studio/components/ui/Charts/ComposedChartHandler.tsx b/apps/studio/components/ui/Charts/ComposedChartHandler.tsx index 10a87c65c56..e931c7ec848 100644 --- a/apps/studio/components/ui/Charts/ComposedChartHandler.tsx +++ b/apps/studio/components/ui/Charts/ComposedChartHandler.tsx @@ -343,8 +343,6 @@ const useAttributeQueries = ( ref, startDate, endDate, - interval, - databaseIdentifier, data, isVisible ) diff --git a/apps/studio/components/ui/Charts/LogChartHandler.tsx b/apps/studio/components/ui/Charts/LogChartHandler.tsx index 8802c780dc3..6a8e4569def 100644 --- a/apps/studio/components/ui/Charts/LogChartHandler.tsx +++ b/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 ) diff --git a/apps/studio/data/analytics/project-daily-stats-queries.ts b/apps/studio/data/analytics/project-daily-stats-queries.ts index b3737885793..92e29be93f8 100644 --- a/apps/studio/data/analytics/project-daily-stats-queries.ts +++ b/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 } ) diff --git a/apps/studio/data/analytics/project-daily-stats-query.ts b/apps/studio/data/analytics/project-daily-stats-query.ts index 98f31af2419..f8bda24d301 100644 --- a/apps/studio/data/analytics/project-daily-stats-query.ts +++ b/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( - { - 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 = ( 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 = ( 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, } )