From 96551fa354144641deaa217349ef6a0b0847b7e4 Mon Sep 17 00:00:00 2001
From: Satont <satontworldwide@gmail.com>
Date: Sun, 5 May 2024 15:00:26 +0300
Subject: [PATCH] feat(dashboard): small improvements on emotes statistic

---
 .../community-emotes-details-content.vue           | 14 +-------------
 .../components/community-emotes-details.vue        | 12 ++++++------
 .../community-emotes-table-column-chart.vue        |  2 ++
 ...vue => community-emotes-table-column-emote.vue} |  9 +++++----
 .../use-community-emotes-statistic-table.ts        | 14 +++-----------
 5 files changed, 17 insertions(+), 34 deletions(-)
 rename frontend/dashboard/src/features/community-emotes-statistic/components/{community-emotes-table-column-actions.vue => community-emotes-table-column-emote.vue} (74%)

diff --git a/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-details-content.vue b/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-details-content.vue
index 5600fd65a..84eb2f358 100644
--- a/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-details-content.vue
+++ b/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-details-content.vue
@@ -34,24 +34,12 @@ onMounted(() => {
 	if (!chartContainer.value) return
 	chart = createChart(chartContainer.value, {
 		height: 240,
-		handleScroll: {
-			horzTouchDrag: false,
-			mouseWheel: false,
-			pressedMouseMove: false,
-			vertTouchDrag: false,
-		},
 		autoSize: true,
 		layout: {
 			textColor: 'white',
 			fontFamily: 'Inter',
 			background: { type: ColorType.Solid, color: 'transparent' },
 		},
-		handleScale: {
-			pinch: false,
-			mouseWheel: false,
-			axisDoubleClickReset: false,
-			axisPressedMouseMove: false,
-		},
 		rightPriceScale: {
 			borderColor: '#454545',
 		},
@@ -124,7 +112,7 @@ const tableTab = ref<'top' | 'history'>('top')
 </script>
 
 <template>
-	<div class="flex flex-col divide-y divide-white/30">
+	<div class="flex flex-col divide-y divide-white/10">
 		<h1 class="text-4xl font-medium px-6 py-6">
 			{{ emoteName }}
 		</h1>
diff --git a/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-details.vue b/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-details.vue
index 975bb2d74..8d0986c0b 100644
--- a/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-details.vue
+++ b/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-details.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { InfoIcon } from 'lucide-vue-next'
-import { NScrollbar } from 'naive-ui'
+import { BarChart } from 'lucide-vue-next'
+import { NA, NScrollbar } from 'naive-ui'
 
 import DialogOrSheet from '@/components/dialog-or-sheet.vue'
-import { Button } from '@/components/ui/button'
 import {
 	Dialog,
 	DialogTrigger,
@@ -18,9 +17,10 @@ defineEmits<{
 <template>
 	<Dialog>
 		<DialogTrigger as-child>
-			<Button variant="secondary" size="icon" @click="$emit('select')">
-				<InfoIcon class="size-4" />
-			</Button>
+			<NA class="flex text-xs cursor-pointer items-center" @click="$emit('select')">
+				<span>Usage Stats</span>
+				<BarChart class="size-4 ml-1" />
+			</NA>
 		</DialogTrigger>
 		<DialogOrSheet class="p-0">
 			<NScrollbar style="max-height: 85vh" trigger="none">
diff --git a/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-table-column-chart.vue b/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-table-column-chart.vue
index 7ca374387..ef40a40f4 100644
--- a/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-table-column-chart.vue
+++ b/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-table-column-chart.vue
@@ -57,6 +57,8 @@ const chartOptions = computed<DeepPartial<TimeChartOptions>>(() => ({
 	handleScale: {
 		axisDoubleClickReset: false,
 		axisPressedMouseMove: false,
+		mouseWheel: false,
+		pinch: false,
 	},
 }))
 
diff --git a/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-table-column-actions.vue b/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-table-column-emote.vue
similarity index 74%
rename from frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-table-column-actions.vue
rename to frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-table-column-emote.vue
index 784478606..0f0a51ae5 100644
--- a/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-table-column-actions.vue
+++ b/frontend/dashboard/src/features/community-emotes-statistic/components/community-emotes-table-column-emote.vue
@@ -5,9 +5,7 @@ import {
 	useCommunityEmotesDetailsName,
 } from '@/features/community-emotes-statistic/composables/use-community-emotes-details'
 
-const props = defineProps<{
-	emoteName: string
-}>()
+const props = defineProps<{ emoteName: string }>()
 
 const nameStore = useCommunityEmotesDetailsName()
 function setDetailsName() {
@@ -16,7 +14,10 @@ function setDetailsName() {
 </script>
 
 <template>
-	<div class="flex gap-2">
+	<div class="flex flex-col gap-0.5 break-words max-w-[450px]">
+		<h1 class="text-xl">
+			{{ emoteName }}
+		</h1>
 		<CommunityEmotesDetails @select="setDetailsName" />
 	</div>
 </template>
diff --git a/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-statistic-table.ts b/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-statistic-table.ts
index c17caf19d..458a812b2 100644
--- a/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-statistic-table.ts
+++ b/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-statistic-table.ts
@@ -19,8 +19,8 @@ import CommunityEmotesTableColumn from '../components/community-emotes-table-col
 
 import { type EmotesStatistics, useEmotesStatisticQuery } from '@/api/emotes-statistic.js'
 import { usePagination } from '@/composables/use-pagination.js'
-import CommunityEmotesTableColumnActions
-	from '@/features/community-emotes-statistic/components/community-emotes-table-column-actions.vue'
+import CommunityEmotesTableColumnEmote
+	from '@/features/community-emotes-statistic/components/community-emotes-table-column-emote.vue'
 import { EmoteStatisticRange, type EmotesStatisticsOpts } from '@/gql/graphql'
 import { valueUpdater } from '@/helpers/value-updater.js'
 
@@ -64,7 +64,7 @@ export const useCommunityEmotesStatisticTable = defineStore('features/community-
 			size: 5,
 			header: () => h('div', {}, t('community.emotesStatistic.table.emote')),
 			cell: ({ row }) => {
-				return h('div', { class: 'break-words max-w-[450px]', innerHTML: row.original.emoteName })
+				return h(CommunityEmotesTableColumnEmote, { emoteName: row.original.emoteName })
 			},
 		},
 		{
@@ -91,14 +91,6 @@ export const useCommunityEmotesStatisticTable = defineStore('features/community-
 				})
 			},
 		},
-		{
-			accessorKey: 'actions',
-			size: 10,
-			header: () => '',
-			cell: ({ row }) => {
-				return h(CommunityEmotesTableColumnActions, { emoteName: row.original.emoteName })
-			},
-		},
 	])
 
 	const table = useVueTable({