From f923ea6da186ddbafd99e8cd03fbf3e768ecda62 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Tue, 9 May 2023 21:10:47 +0900
Subject: [PATCH] fix: chart timestamp filling and data truncation

---
 .../interfaces/Reports/Reports.constants.ts   |  1 +
 .../interfaces/Settings/Logs/Logs.utils.ts    |  2 ++
 .../[ref]/functions/[functionSlug]/index.tsx  | 22 +++++++++++++++----
 studio/types/ui.ts                            |  4 ++--
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/studio/components/interfaces/Reports/Reports.constants.ts b/studio/components/interfaces/Reports/Reports.constants.ts
index 718250d0cc4..914c8a068ae 100644
--- a/studio/components/interfaces/Reports/Reports.constants.ts
+++ b/studio/components/interfaces/Reports/Reports.constants.ts
@@ -278,3 +278,4 @@ select
 }
 
 export const DATETIME_FORMAT = 'MMM D, ha'
+export const DATETIME_SECOND_FORMAT = 'MMM D, ha'
diff --git a/studio/components/interfaces/Settings/Logs/Logs.utils.ts b/studio/components/interfaces/Settings/Logs/Logs.utils.ts
index 0759259ff80..a2f60548bcf 100644
--- a/studio/components/interfaces/Settings/Logs/Logs.utils.ts
+++ b/studio/components/interfaces/Settings/Logs/Logs.utils.ts
@@ -389,6 +389,7 @@ export const fillTimeseries = (
   })
 
   const diff = maxDate.diff(minDate, truncation as dayjs.UnitType)
+  console.log({diff})
   for (let i = 0; i <= diff; i++) {
     const dateToMaybeAdd = minDate.add(i, truncation as dayjs.ManipulateType)
 
@@ -429,5 +430,6 @@ export const getTimestampTruncation = (datetime: string): 'second' | 'minute' |
     2: 'hour' as const,
     3: 'day' as const,
   }[zeroCount]!
+  console.log({truncation})
   return truncation
 }
diff --git a/studio/pages/project/[ref]/functions/[functionSlug]/index.tsx b/studio/pages/project/[ref]/functions/[functionSlug]/index.tsx
index 7e03f65d572..2e677cc2f81 100644
--- a/studio/pages/project/[ref]/functions/[functionSlug]/index.tsx
+++ b/studio/pages/project/[ref]/functions/[functionSlug]/index.tsx
@@ -17,15 +17,17 @@ import AreaChart from 'components/ui/Charts/AreaChart'
 import { isUnixMicro, unixMicroToIsoTimestamp } from 'components/interfaces/Settings/Logs'
 import meanBy from 'lodash/meanBy'
 import sumBy from 'lodash/sumBy'
+import useFillTimeseriesSorted from 'hooks/analytics/useFillTimeseriesSorted'
 
 const CHART_INTERVALS: ChartIntervals[] = [
   {
     key: '5min',
     label: '5 min',
-    startValue: 1,
-    startUnit: 'hour',
+    startValue: 5,
+    startUnit: 'minute',
+    format: 'MMM D, h:mm:ssa',
   },
-  { key: '15min', label: '15 min', startValue: 15, startUnit: 'min' },
+  { key: '15min', label: '15 min', startValue: 15, startUnit: 'minute' },
   { key: '1hr', label: '1 hour', startValue: 1, startUnit: 'hour' },
   { key: '1day', label: '1 day', startValue: 1, startUnit: 'day' },
   { key: '7day', label: '7 days', startValue: 7, startUnit: 'day' },
@@ -45,7 +47,7 @@ const PageLayout: NextPageWithLayout = () => {
     interval: selectedInterval.key,
   })
   const isChartLoading = !data?.result && !error ? true : false
-  const chartData = useMemo(() => {
+  const normalizedData = useMemo(() => {
     return (data?.result || []).map((d: any) => ({
       ...d,
       timestamp: isUnixMicro(d.timestamp) ? unixMicroToIsoTimestamp(d.timestamp) : d.timestamp,
@@ -56,6 +58,16 @@ const PageLayout: NextPageWithLayout = () => {
     selectedInterval.startValue,
     selectedInterval.startUnit as dayjs.ManipulateType
   )
+
+  const chartData = useFillTimeseriesSorted(
+    normalizedData,
+    'timestamp',
+    ['avg_execution_time', 'count'],
+    0,
+    startDate.toISOString(),
+    dayjs().toISOString()
+  )
+
   const canReadFunction = checkPermissions(PermissionAction.FUNCTIONS_READ, functionSlug as string)
   if (!canReadFunction) {
     return <NoPermission isFullPage resourceText="access this edge function" />
@@ -103,6 +115,7 @@ const PageLayout: NextPageWithLayout = () => {
               <AreaChart
                 className="w-full"
                 xAxisKey="timestamp"
+                customDateFormat={selectedInterval.format}
                 yAxisKey="avg_execution_time"
                 data={props.data}
                 format="ms"
@@ -121,6 +134,7 @@ const PageLayout: NextPageWithLayout = () => {
                 yAxisKey="count"
                 data={props.data}
                 highlightedValue={sumBy(props.data, 'count')}
+                customDateFormat={selectedInterval.format}
                 onBarClick={(v) => {
                   router.push(
                     `/project/${projectRef}/functions/${functionSlug}/invocations?its=${startDate.toISOString()}&ite=${
diff --git a/studio/types/ui.ts b/studio/types/ui.ts
index 114f8bac3cb..7ed014c462c 100644
--- a/studio/types/ui.ts
+++ b/studio/types/ui.ts
@@ -19,8 +19,8 @@ export interface ChartIntervals {
   key: 'minutely' | 'hourly' | 'daily' | '5min' | '15min' | '1hr' | '1day' | '7day'
   label: string
   startValue: number
-  startUnit: 'min' | 'hour' | 'day'
-  format?: 'MMM D, h:mma' | 'MMM D, ha' | 'MMM D'
+  startUnit: 'minute' | 'hour' | 'day'
+  format?: 'MMM D, h:mm:ssa' | 'MMM D, h:mma' | 'MMM D, ha' | 'MMM D'
 }
 
 export interface VaultSecret {