feat: add top users to emote statistic

twirapp · May 5, 2024 · 96e5d55 · 96e5d55
1 parent d4a5f6b
commit 96e5d55
Show file tree

Hide file tree

Showing 10 changed files with 276 additions and 49 deletions.
diff --git a/apps/api-gql/internal/gql/resolvers/emotes-statistic.resolver.go b/apps/api-gql/internal/gql/resolvers/emotes-statistic.resolver.go
diff --git a/apps/api-gql/schema/emotes-statistic.graphqls b/apps/api-gql/schema/emotes-statistic.graphqls
@@ -41,15 +41,19 @@ input EmotesStatisticEmoteDetailedOpts {
 	range: EmoteStatisticRange!
 	usagesByUsersPage: Int
 	usagesByUsersPerPage: Int
+	topUsersPage: Int
+	topUsersPerPage: Int
 }
 
 type EmotesStatisticEmoteDetailedResponse {
 	emoteName: String!
 	totalUsages: Int!
 	lastUsedTimestamp: Int!
 	graphicUsages: [EmoteStatisticUsage!]!
-	usagesByUsers: [EmoteStatisticUserUsage!]!
+	usagesHistory: [EmoteStatisticUserUsage!]!
 	usagesByUsersTotal: Int!
+	topUsers: [EmoteStatisticTopUser!]!
+	topUsersTotal: Int!
 }
 
 type EmoteStatisticUsage {
@@ -62,3 +66,9 @@ type EmoteStatisticUserUsage {
 	twitchProfile: TwirUserTwitchInfo! @goField(forceResolver: true)
 	date: Time!
 }
+
+type EmoteStatisticTopUser {
+	userId: String!
+	twitchProfile: TwirUserTwitchInfo! @goField(forceResolver: true)
+	count: Int!
+}
diff --git a/frontend/dashboard/src/api/emotes-statistic.ts b/frontend/dashboard/src/api/emotes-statistic.ts
@@ -54,7 +54,7 @@ export function useEmotesStatisticDetailsQuery(opts: Ref<EmotesStatisticEmoteDet
 						count
 						timestamp
 					}
-					usagesByUsers {
+					usagesHistory {
 						date
 						userId
 						twitchProfile {
@@ -63,7 +63,17 @@ export function useEmotesStatisticDetailsQuery(opts: Ref<EmotesStatisticEmoteDet
 							profileImageUrl
 						}
 					}
+					topUsers {
+						userId
+						count
+						twitchProfile {
+							login
+							displayName
+							profileImageUrl
+						}
+					}
 					usagesByUsersTotal
+					topUsersTotal
 				}
 			}
 		`),

diff --git a/.../community-emotes-statistic/components/community-emotes-details-content-users-history.vue b/.../community-emotes-statistic/components/community-emotes-details-content-users-history.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { NScrollbar } from 'naive-ui'
+import { storeToRefs } from 'pinia'
+
+import Pagination from '@/components/pagination.vue'
+import Table from '@/components/table.vue'
+import {
+	useCommunityEmotesDetails,
+} from '@/features/community-emotes-statistic/composables/use-community-emotes-details'
+import {
+	useCommunityEmotesDetailsUsersHistory,
+} from '@/features/community-emotes-statistic/composables/use-community-emotes-details-users-history'
+
+const { isLoading, usagesPagination } = storeToRefs(useCommunityEmotesDetails())
+const users = useCommunityEmotesDetailsUsersHistory()
+</script>
+
+<template>
+	<div class="flex flex-col w-full gap-4">
+		<Pagination
+			:total="users.total"
+			:table="users.table"
+			:pagination="usagesPagination"
+			@update:page="(page) => usagesPagination.pageIndex = page"
+			@update:page-size="(pageSize) => usagesPagination.pageSize = pageSize"
+		/>
+
+		<NScrollbar style="max-height: 400px;" trigger="none">
+			<Table :table="users.table" :is-loading="isLoading" hide-header>
+				<template #empty-message>
+					Empty
+				</template>
+			</Table>
+		</NScrollbar>
+	</div>
+</template>
diff --git a/...ommunity-emotes-details-content-users.vue → ...nity-emotes-details-content-users-top.vue b/...ommunity-emotes-details-content-users.vue → ...nity-emotes-details-content-users-top.vue
@@ -8,21 +8,21 @@ import {
 	useCommunityEmotesDetails,
 } from '@/features/community-emotes-statistic/composables/use-community-emotes-details'
 import {
-	useCommunityEmotesDetailsUsers,
-} from '@/features/community-emotes-statistic/composables/use-community-emotes-details-users'
+	useCommunityEmotesDetailsUsersTop,
+} from '@/features/community-emotes-statistic/composables/use-community-emotes-details-users-top'
 
-const { isLoading } = storeToRefs(useCommunityEmotesDetails())
-const users = useCommunityEmotesDetailsUsers()
+const { isLoading, topPagination } = storeToRefs(useCommunityEmotesDetails())
+const users = useCommunityEmotesDetailsUsersTop()
 </script>
 
 <template>
 	<div class="flex flex-col w-full gap-4">
 		<Pagination
 			:total="users.total"
 			:table="users.table"
-			:pagination="users.pagination"
-			@update:page="(page) => users.pagination.pageIndex = page"
-			@update:page-size="(pageSize) => users.pagination.pageSize = pageSize"
+			:pagination="topPagination"
+			@update:page="(page) => topPagination.pageIndex = page"
+			@update:page-size="(pageSize) => topPagination.pageSize = pageSize"
 		/>
 
 		<NScrollbar style="max-height: 400px;" trigger="none">

diff --git a/...d/src/features/community-emotes-statistic/components/community-emotes-details-content.vue b/...d/src/features/community-emotes-statistic/components/community-emotes-details-content.vue
@@ -7,8 +7,10 @@ import { useI18n } from 'vue-i18n'
 
 import type { AutoscaleInfo, IChartApi , ISeriesApi, UTCTimestamp } from 'lightweight-charts'
 
-import CommunityEmotesDetailsContentUsers
-	from '@/features/community-emotes-statistic/components/community-emotes-details-content-users.vue'
+import CommunityEmotesDetailsContentUsersHistory
+	from '@/features/community-emotes-statistic/components/community-emotes-details-content-users-history.vue'
+import CommunityEmotesDetailsContentUsersTop
+	from '@/features/community-emotes-statistic/components/community-emotes-details-content-users-top.vue'
 import {
 	useCommunityEmotesDetails,
 	useCommunityEmotesDetailsName,
@@ -112,6 +114,13 @@ function setData() {
 watch(details, () => {
 	setData()
 })
+
+const tableTabs = [
+	{ key: 'top', text: t('community.emotesStatistic.details.usersTabs.top') },
+	{ key: 'history', text: t('community.emotesStatistic.details.usersTabs.history') },
+]
+
+const tableTab = ref<'top' | 'history'>('top')
 </script>
 
 <template>
@@ -141,8 +150,24 @@ watch(details, () => {
 				class="relative h-[240px]"
 			></div>
 		</div>
-		<div class="px-6 py-6">
-			<CommunityEmotesDetailsContentUsers />
+		<div class="flex flex-col gap-6 px-6 py-7">
+			<div class="flex justify-between flex-wrap">
+				<h1 class="text-2xl font-medium">
+					{{ t('community.emotesStatistic.details.users') }}
+				</h1>
+				<RadioGroupRoot v-model="tableTab" class="inline-flex w-full rounded-[7px] bg-zinc-800 p-px md:w-auto">
+					<RadioGroupItem
+						v-for="tab of tableTabs"
+						:key="tab.key"
+						:value="tab.key"
+						class="h-8 flex-1 rounded-md px-3 text-[13px] text-white/75 transition-colors hover:bg-white/5 data-[active=true]:bg-white/20 data-[active=true]:text-white data-[active=true]:shadow-md md:flex-auto whitespace-nowrap"
+					>
+						{{ tab.text }}
+					</RadioGroupItem>
+				</RadioGroupRoot>
+			</div>
+			<CommunityEmotesDetailsContentUsersTop v-if="tableTab === 'top'" />
+			<CommunityEmotesDetailsContentUsersHistory v-else />
 		</div>
 	</div>
 </template>
diff --git a/...les/use-community-emotes-details-users.ts → ...community-emotes-details-users-history.ts b/...les/use-community-emotes-details-users.ts → ...community-emotes-details-users-history.ts
@@ -19,19 +19,19 @@ import UsersTableCellUser
 import { resolveUserName } from '@/helpers'
 import { valueUpdater } from '@/helpers/value-updater'
 
-type UserUsage = NonNullable<EmotesStatisticsDetail['emotesStatisticEmoteDetailedInformation']>['usagesByUsers'][number]
+type UserUsage = NonNullable<EmotesStatisticsDetail['emotesStatisticEmoteDetailedInformation']>['usagesHistory'][number]
 
-export const useCommunityEmotesDetailsUsers = defineStore(
-	'features/community-emotes-statistic-table/details-users',
+export const useCommunityEmotesDetailsUsersHistory = defineStore(
+	'features/community-emotes-statistic-table/details-users-history',
 	() => {
-		const { details, pagination } = storeToRefs(useCommunityEmotesDetails())
+		const { details, usagesPagination } = storeToRefs(useCommunityEmotesDetails())
 
 		const data = computed<UserUsage[]>(() => {
-			return details.value?.emotesStatisticEmoteDetailedInformation?.usagesByUsers ?? []
+			return details.value?.emotesStatisticEmoteDetailedInformation?.usagesHistory ?? []
 		})
 		const total = computed(() => details.value?.emotesStatisticEmoteDetailedInformation?.usagesByUsersTotal ?? 0)
 		const pageCount = computed(() => {
-			return Math.ceil(total.value / pagination.value.pageSize)
+			return Math.ceil(total.value / usagesPagination.value.pageSize)
 		})
 
 		const columns = computed<ColumnDef<UserUsage>[]>(() => [
@@ -74,11 +74,11 @@ export const useCommunityEmotesDetailsUsers = defineStore(
 			},
 			state: {
 				get pagination() {
-					return pagination.value
+					return usagesPagination.value
 				},
 			},
 			manualPagination: true,
-			onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, pagination),
+			onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, usagesPagination),
 			getCoreRowModel: getCoreRowModel(),
 			getPaginationRowModel: getPaginationRowModel(),
 			getFacetedRowModel: getFacetedRowModel(),
@@ -87,7 +87,7 @@ export const useCommunityEmotesDetailsUsers = defineStore(
 
 		return {
 			table,
-			pagination,
+			usagesPagination,
 			total,
 			pageCount,
 		}