feat: Contract calls chart page (#782)

aeternity · May 16, 2024 · a1ddc72 · a1ddc72
1 parent ef48878
commit a1ddc72
Show file tree

Hide file tree

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

diff --git a/src/components/ContractsChartPanel.vue b/src/components/ContractsChartPanel.vue
@@ -1,7 +1,7 @@
 <template>
   <app-panel>
     <template #heading>
-      CONTRACT CALLS
+      SMART CONTRACT CALLS
     </template>
     <template #header>
       <chart-controls
@@ -23,15 +23,21 @@
 
 <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()

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

diff --git a/src/components/TransactionsChartPanel.vue b/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

diff --git a/src/pages/charts/contracts.vue b/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>
diff --git a/src/pages/charts/keyblocks.vue b/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>
diff --git a/src/pages/charts/transactions.vue b/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>
diff --git a/src/pages/contracts/index.vue b/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>

diff --git a/src/stores/charts.js b/src/stores/charts.js
@@ -8,6 +8,7 @@ export const useChartsStore = defineStore('charts', () => {
 
   const transactionsStatistics = ref(null)
   const keyblocksStatistics = ref(null)
+  const contractsStatistics = ref(null)
 
   async function fetchTransactionsStatistics(interval, limit, customInterval, txType) {
     transactionsStatistics.value = null
@@ -37,10 +38,25 @@ 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()
+  }
+
   return {
     keyblocksStatistics,
     transactionsStatistics,
+    contractsStatistics,
     fetchKeyblocksStatistics,
     fetchTransactionsStatistics,
+    fetchContractsStatistics,
   }
 })
diff --git a/src/stores/contracts.js b/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,
   }
 })