From 233f023698b93177cd063ecd1e90ad2c034fbcb9 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Mon, 12 Dec 2022 20:54:42 +0800
Subject: [PATCH] feat: fixed auth daily active users query

---
 studio/components/interfaces/Reports/ReportWidget.tsx |  2 +-
 .../interfaces/Reports/Reports.constants.ts           |  9 ++++-----
 .../interfaces/Reports/renderers/AuthRenderers.tsx    |  7 +++++--
 studio/pages/project/[ref]/reports/api-bots.tsx       | 11 ++++++-----
 studio/pages/project/[ref]/reports/api-overview.tsx   |  2 +-
 5 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/studio/components/interfaces/Reports/ReportWidget.tsx b/studio/components/interfaces/Reports/ReportWidget.tsx
index 84d54267af2..09e03029f59 100644
--- a/studio/components/interfaces/Reports/ReportWidget.tsx
+++ b/studio/components/interfaces/Reports/ReportWidget.tsx
@@ -19,7 +19,7 @@ const ReportWidget: React.FC<ReportWidgetProps> = (props) => {
   const router = useRouter()
   const { ref } = router.query
   return (
-    <Panel className={'pb-0 ' + props.className} bodyClassName="h-full" wrapWithLoading={false}>
+    <Panel noMargin className={'pb-0 ' + props.className} bodyClassName="h-full" wrapWithLoading={false}>
       <Panel.Content className="space-y-4">
         <div className="flex flex-row items-start justify-between">
           <div className="gap-2">
diff --git a/studio/components/interfaces/Reports/Reports.constants.ts b/studio/components/interfaces/Reports/Reports.constants.ts
index 59ef87fd261..f4811451e16 100644
--- a/studio/components/interfaces/Reports/Reports.constants.ts
+++ b/studio/components/interfaces/Reports/Reports.constants.ts
@@ -167,14 +167,13 @@ export const PRESET_CONFIG: Record<Presets, PresetConfig> = {
         sql: `
 select 
   timestamp_trunc(timestamp, day) as timestamp,
-  count(distinct json_extract(f.event_message, "$.user_id")) as count
-from gotrue_logs f
-cross join unnest(f.metadata) as m
-where json_extract(f.event_message, "$.user_id") is not null
+  count(distinct json_value(f.event_message, "$.user_id")) as count
+from auth_logs f
+where json_value(f.event_message, "$.action") = "login"
 group by 
   timestamp
 order by
-  timestamp
+  timestamp desc
 `,
       },
       cumulativeUsers: {
diff --git a/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx b/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
index f85ddabeece..7fe04969540 100644
--- a/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
+++ b/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
@@ -14,7 +14,7 @@ export const renderCumulativeUsers = (
       <BarChart
         data={props.data}
         attribute="count"
-        label="Total users"
+        label=""
         highlightedValue={total}
         customDateFormat={DATETIME_FORMAT}
         noDataMessage={'No confirmed users yet'}
@@ -35,7 +35,7 @@ export const renderNewUsers = (
       <BarChart
         data={props.data}
         attribute="count"
-        label="New users"
+        label=""
         highlightedValue={sum}
         customDateFormat={DATETIME_FORMAT}
         noDataMessage={'No new user signups during this time period'}
@@ -50,6 +50,8 @@ export const renderDailyActiveUsers = (
     timestamp: string
   }>
 ) => {
+  const last = props.data?.[props.data.length - 1]?.count
+
   return (
     <div className="flex w-full flex-col">
       <BarChart
@@ -57,6 +59,7 @@ export const renderDailyActiveUsers = (
         attribute="count"
         label=""
         minimalHeader
+        highlightedValue={last}
         customDateFormat={DATETIME_FORMAT}
         noDataMessage={'No authenticated users during this time period'}
       />
diff --git a/studio/pages/project/[ref]/reports/api-bots.tsx b/studio/pages/project/[ref]/reports/api-bots.tsx
index 5da674c7a09..3df85b74abf 100644
--- a/studio/pages/project/[ref]/reports/api-bots.tsx
+++ b/studio/pages/project/[ref]/reports/api-bots.tsx
@@ -6,7 +6,10 @@ import { Presets } from 'components/interfaces/Reports/Reports.types'
 import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
 import { hooksFactory, usePresetReport } from 'components/interfaces/Reports/Reports.utils'
 import { PRESET_CONFIG } from 'components/interfaces/Reports/Reports.constants'
-import { renderBotScores, renderUserAgents } from 'components/interfaces/Reports/renderers/ApiBotsRenderers'
+import {
+  renderBotScores,
+  renderUserAgents,
+} from 'components/interfaces/Reports/renderers/ApiBotsRenderers'
 import ReportWidget from 'components/interfaces/Reports/ReportWidget'
 
 export const ApiBotsReport: NextPageWithLayout = () => {
@@ -16,12 +19,10 @@ export const ApiBotsReport: NextPageWithLayout = () => {
   const hooks = hooksFactory(ref as string, config)
   const userAgents = hooks.userAgents()
   const botScores = hooks.botScores()
-  const { isLoading, Layout } = usePresetReport(
-    [userAgents, botScores],
-  )
+  const { isLoading, Layout } = usePresetReport([userAgents, botScores])
   return (
     <Layout title={config.title}>
-      <div className="grid  lg:grid-cols-4">
+      <div className="grid lg:grid-cols-4 gap-4">
         <ReportWidget
           isLoading={isLoading}
           params={userAgents[0].params}
diff --git a/studio/pages/project/[ref]/reports/api-overview.tsx b/studio/pages/project/[ref]/reports/api-overview.tsx
index ad9c4d2ecdc..2d266dabeaf 100644
--- a/studio/pages/project/[ref]/reports/api-overview.tsx
+++ b/studio/pages/project/[ref]/reports/api-overview.tsx
@@ -24,7 +24,7 @@ export const ApiOverviewReport: NextPageWithLayout = () => {
   const { isLoading, Layout } = usePresetReport([statusCodes, errorRates, requestPaths])
   return (
     <Layout title={config.title}>
-      <div className="grid  lg:grid-cols-4">
+      <div className="grid lg:grid-cols-4 gap-4">
         <ReportWidget
           isLoading={isLoading}
           params={statusCodes[0].params}