feat: Names chart page (#784)

Co-authored-by: Michele F. <michele-franchi@users.noreply.github.com>
aeternity · May 21, 2024 · 42d931c · 42d931c
1 parent 2f8969f
commit 42d931c
Show file tree

Hide file tree

Showing 10 changed files with 83 additions and 32 deletions.
diff --git a/src/components/ChartsNavigation.vue b/src/components/ChartsNavigation.vue
@@ -16,6 +16,11 @@
         class="charts-navigation__link">
         Smart Contracts
       </app-link>
+      <app-link
+        to="/charts/names"
+        class="charts-navigation__link">
+        Names
+      </app-link>
     </app-panel>
   </nav>
 </template>

diff --git a/src/components/ContractsChartPanel.vue b/src/components/ContractsChartPanel.vue
@@ -44,9 +44,11 @@ await useAsyncData(async() => {
   return true
 })
 
-watch(selectedRange, async() => {
-  await loadContractsStatistics()
-})
+if (process.client) {
+  watch(selectedRange, async() => {
+    await loadContractsStatistics()
+  })
+}
 
 async function loadContractsStatistics() {
   await fetchContractsStatistics(

diff --git a/src/components/KeyblocksChartPanel.vue b/src/components/KeyblocksChartPanel.vue
@@ -35,9 +35,11 @@ await useAsyncData(async() => {
   return true
 })
 
-watch(selectedRange, async() => {
-  await loadKeyblockStatistics()
-})
+if (process.client) {
+  watch(selectedRange, async() => {
+    await loadKeyblockStatistics()
+  })
+}
 
 async function loadKeyblockStatistics() {
   await fetchKeyblocksStatistics(

diff --git a/src/components/NamesChartPanel.vue b/src/components/NamesChartPanel.vue
@@ -22,14 +22,21 @@
 </template>
 
 <script setup>
-import { useNamesStore } from '@/stores/names'
-import { CHART_INTERVALS_OPTIONS } from '@/utils/constants'
+import { storeToRefs } from 'pinia'
+import { useChartsStore } from '@/stores/charts'
 
-const namesStore = useNamesStore()
-const { namesStatistics } = storeToRefs(namesStore)
-const { fetchNamesStatistics } = namesStore
+const chartsStore = useChartsStore()
+const { namesStatistics } = storeToRefs(chartsStore)
+const { fetchNamesStatistics } = chartsStore
 
-const selectedRange = ref(CHART_INTERVALS_OPTIONS[0])
+const props = defineProps({
+  range: {
+    required: true,
+    type: Object,
+  },
+})
+
+const selectedRange = ref(props.range)
 
 await useAsyncData(async() => {
   await loadNamesStatistics()

diff --git a/src/components/TheNavigation.vue b/src/components/TheNavigation.vue
@@ -88,6 +88,10 @@ const menuOptions = ref([{
       name: 'Smart Contracts',
       path: '/charts/contracts',
     },
+    {
+      name: 'Names',
+      path: '/charts/names',
+    },
   ],
 }])
 

diff --git a/src/components/TransactionsChartPanel.vue b/src/components/TransactionsChartPanel.vue
@@ -59,9 +59,11 @@ await useAsyncData(async() => {
   return true
 })
 
-watch([selectedRange, selectedTxType], async() => {
-  await loadTransactionStatistics()
-})
+if (process.client) {
+  watch([selectedRange, selectedTxType], async() => {
+    await loadTransactionStatistics()
+  })
+}
 
 async function loadTransactionStatistics() {
   await fetchTransactionsStatistics(

diff --git a/src/pages/charts/names.vue b/src/pages/charts/names.vue
@@ -0,0 +1,26 @@
+<template>
+  <Head>
+    <Title>Charts</Title>
+  </Head>
+
+  <page-header>
+    Charts
+    <template #tooltip>
+      {{ chartsHints.charts }}
+    </template>
+  </page-header>
+
+  <NuxtLayout name="master-detail">
+    <template #master>
+      <charts-navigation/>
+    </template>
+    <template #detail>
+      <names-chart-panel :range="CHART_INTERVALS_OPTIONS[4]"/>
+    </template>
+  </NuxtLayout>
+</template>
+
+<script setup>
+import { chartsHints } from '@/utils/hints/chartsHints'
+import { CHART_INTERVALS_OPTIONS } from '@/utils/constants'
+</script>
diff --git a/src/pages/names/index.vue b/src/pages/names/index.vue
@@ -15,7 +15,9 @@
     </template>
   </page-header>
   <template v-if="!isLoading">
-    <names-chart-panel class="names__names-panel"/>
+    <names-chart-panel
+      class="names__names-panel"
+      :range="CHART_INTERVALS_OPTIONS[0]"/>
     <app-tabs v-model="activeTabIndex">
       <app-tab title="Active">
         <names-active-panel/>
@@ -42,6 +44,7 @@ import { useNamesStore } from '@/stores/names'
 import PageHeader from '@/components/PageHeader'
 import { namesHints } from '@/utils/hints/namesHints'
 import { isDesktop } from '@/utils/screen'
+import { CHART_INTERVALS_OPTIONS } from '@/utils/constants'
 
 const TAB_KEYS = ['active', 'in-auction', 'expired']
 

diff --git a/src/stores/charts.js b/src/stores/charts.js
@@ -9,6 +9,7 @@ export const useChartsStore = defineStore('charts', () => {
   const transactionsStatistics = ref(null)
   const keyblocksStatistics = ref(null)
   const contractsStatistics = ref(null)
+  const namesStatistics = ref(null)
 
   async function fetchTransactionsStatistics(interval, limit, customInterval, txType) {
     transactionsStatistics.value = null
@@ -51,12 +52,27 @@ export const useChartsStore = defineStore('charts', () => {
     contractsStatistics.value = customInterval ? data.data.reverse() : data.data.slice(1).reverse()
   }
 
+  async function fetchNamesStatistics(interval, limit, customInterval) {
+    namesStatistics.value = null
+
+    const intervalSlug = customInterval
+      ? `?min_start_date=${customInterval.minStart}&max_start_date=${customInterval.maxStart}&limit=100`
+      : `?interval_by=${interval}&limit=${limit}`
+
+    const { data } = await axios.get(`${MIDDLEWARE_URL}/v3/statistics/names${intervalSlug}`)
+
+    // remove last interval from the response not to show current interval that is being built
+    namesStatistics.value = customInterval ? data.data.reverse() : data.data.slice(1).reverse()
+  }
+
   return {
     keyblocksStatistics,
     transactionsStatistics,
     contractsStatistics,
+    namesStatistics,
     fetchKeyblocksStatistics,
     fetchTransactionsStatistics,
     fetchContractsStatistics,
+    fetchNamesStatistics,
   }
 })
diff --git a/src/stores/names.js b/src/stores/names.js
@@ -13,7 +13,6 @@ export const useNamesStore = defineStore('names', () => {
   const rawInAuctionNames = ref(null)
   const rawExpiredNames = ref(null)
   const rawRecentlyActivatedNames = ref(null)
-  const namesStatistics = ref(null)
 
   const activeNames = computed(() => {
     return rawActiveNames.value
@@ -74,19 +73,6 @@ export const useNamesStore = defineStore('names', () => {
     rawRecentlyActivatedNames.value = data.data
   }
 
-  async function fetchNamesStatistics(interval, limit, customInterval) {
-    namesStatistics.value = null
-
-    const slug = customInterval
-      ? `?min_start_date=${customInterval.minStart}&max_start_date=${customInterval.maxStart}&limit=100`
-      : `?interval_by=${interval}&limit=${limit}`
-
-    const { data } = await axios.get(`${MIDDLEWARE_URL}/v3/statistics/names${slug}`)
-
-    // remove last interval from the response not to show current interval that is being built
-    namesStatistics.value = customInterval ? data.data.reverse() : data.data.slice(1).reverse()
-  }
-
   return {
     rawActiveNames,
     rawInAuctionNames,
@@ -97,12 +83,10 @@ export const useNamesStore = defineStore('names', () => {
     auctionsEndingSoon,
     expiredNames,
     recentlyActivatedNames,
-    namesStatistics,
     fetchNamesDetails,
     fetchActiveNames,
     fetchInAuctionNames,
     fetchExpiredNames,
     fetchRecentlyActivatedNames,
-    fetchNamesStatistics,
   }
 })