feat: transaction trend in the last 24 hours (#673)

aeternity · Mar 12, 2024 · 8a0f329 · 8a0f329
1 parent 432dd45
commit 8a0f329
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/components/TransactionsStatistics.vue b/src/components/TransactionsStatistics.vue
@@ -10,6 +10,9 @@
       <h5>TRANSACTIONS IN LAST 24H</h5>
       <div class="transaction-statistics__value">
         {{ formatNumber(last24hsTransactionsCount) }}
+        <app-chip :variant="chipVariant">
+          {{ last24hsTransactionsTrend }} %
+        </app-chip>
       </div>
     </app-panel>
   </div>
@@ -24,11 +27,13 @@ const { fetchTotalTransactionsCount } = useBlockchainStatsStore()
 const { fetchLast24hsTransactionsCount } = useTransactionsStore()
 
 const { transactionsCount } = storeToRefs(useBlockchainStatsStore())
-const { last24hsTransactionsCount } = storeToRefs(useTransactionsStore())
+const { last24hsTransactionsCount, last24hsTransactionsTrend } = storeToRefs(useTransactionsStore())
 
 await fetchTotalTransactionsCount()
 await fetchLast24hsTransactionsCount()
 
+const chipVariant = computed(() => last24hsTransactionsTrend.value > 0 ? 'success' : 'error')
+
 </script>
 
 <style scoped>

diff --git a/src/stores/transactions.js b/src/stores/transactions.js
@@ -11,6 +11,7 @@ export const useTransactionsStore = defineStore('transactions', () => {
   const transactionsCount = ref(null)
   const transactionsStatistics = ref(null)
   const last24hsTransactionsCount = ref(null)
+  const last24hsTransactionsTrend = ref(null)
 
   const transactions = computed(() =>
     rawTransactions.value
@@ -35,6 +36,9 @@ export const useTransactionsStore = defineStore('transactions', () => {
     last24hsTransactionsCount.value = null
     const { data } = await axios.get(`${MIDDLEWARE_URL}/v2/stats`)
     last24hsTransactionsCount.value = data.last24hsTransactions
+    last24hsTransactionsTrend.value = data.last24hsTransactions !== 0
+      ? formatNumber((100 * data.transactionsTrend / data.last24hsTransactions), 0, 2)
+      : '---'
   }
 
   async function fetchTransactionsStatistics(interval = 'day', limit = 7, range) {
@@ -59,5 +63,6 @@ export const useTransactionsStore = defineStore('transactions', () => {
     fetchTransactionsStatistics,
     fetchLast24hsTransactionsCount,
     last24hsTransactionsCount,
+    last24hsTransactionsTrend,
   }
 })