feat: Names chart page

src/components/ChartsNavigation.vue

@@ -11,6 +11,16 @@
         class="charts-navigation__link">
         Keyblocks
       </app-link>
+      <app-link
+        to="/charts/contracts"
+        class="charts-navigation__link">
+        Smart Contracts
+      </app-link>
+      <app-link
+        to="/charts/names"
+        class="charts-navigation__link">
+        Names
+      </app-link>
     </app-panel>
   </nav>
 </template>

src/components/ContractsChartPanel.vue

@@ -1,7 +1,7 @@
 <template>
   <app-panel>
     <template #heading>
-      CONTRACT CALLS
+      SMART CONTRACT CALLS
     </template>
     <template #header>
       <chart-controls
@@ -23,24 +23,32 @@
 
 <script setup>
 import { storeToRefs } from 'pinia'
-import { useContractsStore } from '@/stores/contracts'
+import { useChartsStore } from '@/stores/charts'
 import LineChart from '@/components/LineChart'
-import { CHART_INTERVALS_OPTIONS } from '@/utils/constants'
 
-const contractsStore = useContractsStore()
-const { contractsStatistics } = storeToRefs(contractsStore)
-const { fetchContractsStatistics } = contractsStore
+const chartsStore = useChartsStore()
+const { contractsStatistics } = storeToRefs(chartsStore)
+const { fetchContractsStatistics } = 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 loadContractsStatistics()
   return true
 })
 
-watch(selectedRange, async() => {
-  await loadContractsStatistics()
-})
+if (process.client) {
+  watch(selectedRange, async() => {
+    await loadContractsStatistics()
+  })
+}
 
 async function loadContractsStatistics() {
   await fetchContractsStatistics(

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(

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()

src/components/TheNavigation.vue

@@ -84,6 +84,14 @@ const menuOptions = ref([{
       name: 'Keyblocks',
       path: '/charts/keyblocks',
     },
+    {
+      name: 'Smart Contracts',
+      path: '/charts/contracts',
+    },
+    {
+      name: 'Names',
+      path: '/charts/names',
+    },
   ],
 }])
 

src/components/TransactionsChartPanel.vue

@@ -8,8 +8,8 @@
         v-if="hasSelect"
         v-model="selectedTxType"
         size="sm"
-        class="charts-transactions-chart-panel__select
-        charts-transactions-chart-panel__select--desktop
+        class="transactions-chart-panel__select
+        transactions-chart-panel__select--desktop
         u-hidden-mobile"/>
 
       <chart-controls
@@ -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(

src/pages/charts/contracts.vue

@@ -0,0 +1,27 @@
+<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>
+      <contracts-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>

src/pages/charts/keyblocks.vue

@@ -15,14 +15,12 @@
       <charts-navigation/>
     </template>
     <template #detail>
-      <keyblocks-chart-panel v-if="!isLoading"/>
-      <loader-panel v-else/>
+      <keyblocks-chart-panel/>
     </template>
   </NuxtLayout>
 </template>
 
 <script setup>
 import { chartsHints } from '@/utils/hints/chartsHints'
 
-const { isLoading } = useLoading()
 </script>

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>

src/pages/charts/transactions.vue

@@ -16,17 +16,13 @@
     </template>
     <template #detail>
       <transactions-chart-panel
-        v-if="!isLoading"
         :has-select="true"
         :range="CHART_INTERVALS_OPTIONS[4]"/>
-      <loader-panel v-else/>
     </template>
   </NuxtLayout>
 </template>
 
 <script setup>
 import { chartsHints } from '@/utils/hints/chartsHints'
-import { CHART_INTERVALS_OPTIONS } from '~/utils/constants'
-
-const { isLoading } = useLoading()
+import { CHART_INTERVALS_OPTIONS } from '@/utils/constants'
 </script>

src/pages/contracts/index.vue

@@ -16,7 +16,9 @@
   </page-header>
 
   <template v-if="!isLoading">
-    <contracts-chart-panel class="contracts-panel"/>
+    <contracts-chart-panel
+      class="contracts-panel"
+      :range="CHART_INTERVALS_OPTIONS[0]"/>
     <contracts-panel class="contracts-panel"/>
   </template>
   <loader-panel v-else/>
@@ -26,6 +28,7 @@
 import ContractsPanel from '@/components/ContractsPanel'
 import PageHeader from '@/components/PageHeader'
 import { contractsHints } from '@/utils/hints/contractsHints'
+import { CHART_INTERVALS_OPTIONS } from '@/utils/constants'
 
 const { isLoading } = useLoading()
 </script>

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']
 

src/stores/charts.js

@@ -8,6 +8,8 @@ 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
@@ -37,10 +39,40 @@ export const useChartsStore = defineStore('charts', () => {
     keyblocksStatistics.value = customInterval ? data.data.reverse() : data.data.slice(1).reverse()
   }
 
+  async function fetchContractsStatistics(interval, limit, customInterval) {
+    contractsStatistics.value = null
+
+    const intervalSlug = customInterval
+      ? `&min_start_date=${customInterval.minStart}&max_start_date=${customInterval.maxStart}&limit=1000`
+      : `&interval_by=${interval}&limit=${parseInt(limit) + 1}`
+
+    const { data } = await axios.get(`${MIDDLEWARE_URL}/v3/statistics/transactions?tx_type=contract_call${intervalSlug}`)
+
+    // remove last interval from the response not to show current interval that is being built
+    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,
   }
 })

src/stores/contracts.js

@@ -29,19 +29,6 @@ export const useContractsStore = defineStore('contracts', () => {
     rawContracts.value = data
   }
 
-  async function fetchContractsStatistics(interval, limit, customInterval) {
-    contractsStatistics.value = null
-
-    const slug = customInterval
-      ? `&min_start_date=${customInterval.minStart}&max_start_date=${customInterval.maxStart}&limit=1000`
-      : `&interval_by=${interval}&limit=${limit}`
-
-    const { data } = await axios.get(`${MIDDLEWARE_URL}/v3/statistics/transactions?tx_type=contract_call${slug}`)
-
-    // remove last interval from the response not to show current interval that is being built
-    contractsStatistics.value = customInterval ? data.data.reverse() : data.data.slice(1).reverse()
-  }
-
   async function fetchContractsCount() {
     contractsCount.value = null
     const { data } = await axios.get(`${MIDDLEWARE_URL}/v3/transactions/count?type=contract_create`)
@@ -65,6 +52,5 @@ export const useContractsStore = defineStore('contracts', () => {
     contractsStatistics,
     fetchContracts,
     fetchContractsCount,
-    fetchContractsStatistics,
   }
 })

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,
   }
 })