feat: fixed auth daily active users query

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">

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: {

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'}
       />

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}

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}