fix(ui): resolve reports page display issues in sample mode (#4041)

Author: liangfung

Diff for: ee/tabby-ui/app/(dashboard)/reports/components/annual-activity.tsx

@@ -1,15 +1,9 @@
 'use client'
 
 import { useWindowSize } from '@uidotdev/usehooks'
-import moment from 'moment'
 import ReactActivityCalendar from 'react-activity-calendar'
 
-import {
-  ChatDailyStatsInPastYearQuery,
-  DailyStatsInPastYearQuery
-} from '@/lib/gql/generates/graphql'
 import { useCurrentTheme } from '@/lib/hooks/use-current-theme'
-import { ArrayElementType } from '@/lib/types'
 
 function ActivityCalendar({
   data
@@ -41,60 +35,23 @@ function ActivityCalendar({
 }
 
 export function AnnualActivity({
-  yearlyStats
+  totalCount,
+  dailyData
 }: {
-  yearlyStats:
-    | Array<
-        | ArrayElementType<DailyStatsInPastYearQuery['dailyStatsInPastYear']>
-        | ArrayElementType<
-            ChatDailyStatsInPastYearQuery['chatDailyStatsInPastYear']
-          >
-      >
-    | undefined
+  totalCount: number
+  dailyData: Array<{
+    date: string
+    count: number
+    level: number
+  }>
 }) {
-  let lastYearActivities = 0
-  const dailyViewMap: Record<string, number> =
-    yearlyStats?.reduce((acc, cur) => {
-      const date = moment.utc(cur.start).format('YYYY-MM-DD')
-      if (cur.__typename === 'CompletionStats') {
-        lastYearActivities += cur.views
-        lastYearActivities += cur.selects
-        return {
-          ...acc,
-          [date]: (acc[date] ?? 0) + cur.views
-        }
-      } else if (cur.__typename === 'ChatCompletionStats') {
-        lastYearActivities += cur.chats
-        return {
-          ...acc,
-          [date]: (acc[date] ?? 0) + cur.chats
-        }
-      } else {
-        return acc
-      }
-    }, {} as Record<string, number>) || {}
-
-  const data = new Array(365)
-    .fill('')
-    .map((_, idx) => {
-      const date = moment().subtract(idx, 'days').format('YYYY-MM-DD')
-      const count = dailyViewMap[date] || 0
-      const level = Math.min(4, Math.ceil(count / 5))
-      return {
-        date: date,
-        count,
-        level
-      }
-    })
-    .reverse()
-
   return (
     <div className="flex h-full flex-col rounded-lg border bg-primary-foreground/30 px-6 py-4">
       <h3 className="mb-5 text-sm font-medium tracking-tight">
-        <b>{lastYearActivities}</b> activities in the last year
+        <b>{totalCount}</b> activities in the last year
       </h3>
       <div className="flex flex-1 items-center justify-center">
-        <ActivityCalendar data={data} />
+        <ActivityCalendar data={dailyData} />
       </div>
     </div>
   )

Diff for: ee/tabby-ui/app/(dashboard)/reports/components/completion-daily-activity.tsx

@@ -107,14 +107,15 @@ export function CompletionDailyActivity({
   } = useCompletionDailyStats({
     selectedMember,
     dateRange,
-    sample
+    sample,
+    languages: selectedLanguage
   })
 
   return (
     <LoadingWrapper
       loading={fetchingCompletionDailyStats}
       fallback={
-        <div className="flex flex-col gap-5">
+        <div className="mb-10 flex flex-col gap-5">
           <div className="flex justify-between gap-5">
             <Skeleton className="h-32 flex-1" />
             <Skeleton className="h-32 flex-1" />

Diff for: ee/tabby-ui/app/(dashboard)/reports/components/report.tsx

@@ -31,8 +31,13 @@ export function Report() {
   const [selectedMember, setSelectedMember] = useState(KEY_SELECT_ALL)
   const sample = isDemoMode || searchParams.get('sample') === 'true'
 
-  const { yearlyStats, fetching: fetchingYearlyStats } = useYearlyStats({
-    selectedMember
+  const {
+    dailyData,
+    fetching: fetchingYearlyStats,
+    totalCount
+  } = useYearlyStats({
+    selectedMember,
+    sample
   })
 
   return (
@@ -81,7 +86,7 @@ export function Report() {
           <h1 className="mb-2 text-center text-xl font-semibold md:text-start">
             Activity
           </h1>
-          <AnnualActivity yearlyStats={yearlyStats} />
+          <AnnualActivity totalCount={totalCount} dailyData={dailyData} />
         </div>
       </LoadingWrapper>
 

Diff for: ee/tabby-ui/lib/hooks/use-statistics.ts

@@ -171,7 +171,8 @@ export function useCompletionDailyStats({
         users:
           selectedMember === KEY_SELECT_ALL
             ? undefined
-            : compact([selectedMember])
+            : compact([selectedMember]),
+        languages
       }
     })