add statistics to top accounts

aeternity · Dec 12, 2024 · 84e12d6 · 84e12d6
1 parent af29581
commit 84e12d6
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 7 deletions.
diff --git a/src/components/AccountsStatistics.vue b/src/components/AccountsStatistics.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="transaction-statistics">
+    <app-panel class="transaction-statistics__panel">
+      <h5>TOTAL ACCOUNTS</h5>
+      <div class="transaction-statistics__value">
+        {{ formatNumber(totalAccountsCount) }}
+      </div>
+    </app-panel>
+    <app-panel class="transaction-statistics__panel">
+      <h5>ACTIVE ACCOUNTS (LAST 24H)</h5>
+      <div class="transaction-statistics__value">
+        {{ formatNumber(activeAccountsCount) }}
+      </div>
+    </app-panel>
+  </div>
+</template>
+<script setup>
+import { storeToRefs } from 'pinia'
+import { useTopAccountsStore } from '@/stores/topAccounts'
+import { formatNumber } from '@/utils/format'
+
+const { fetchTopAccounts } = useTopAccountsStore()
+
+const { totalAccountsCount, activeAccountsCount } = storeToRefs(useTopAccountsStore())
+
+if (process.client) {
+  await fetchTopAccounts()
+}
+</script>
+
+<style scoped>
+.transaction-statistics {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  width: 100%;
+  margin-bottom: var(--space-2);
+
+  @media (--desktop) {
+    flex-direction: row;
+  }
+
+  &__panel {
+    padding: var(--space-4);
+    width: 100%;
+
+    @media (--desktop) {
+      width: 50%;
+    }
+  }
+
+  &__value {
+    display: inline-flex;
+    justify-content: space-between;
+    width: 100%;
+    font-size: 36px;
+    font-family: var(--font-monospaced);
+    font-weight: 400;
+    margin-top: var(--space-3);
+  }
+}
+</style>
diff --git a/src/pages/accounts/index.vue b/src/pages/accounts/index.vue
@@ -9,13 +9,16 @@
       {{ topAccountsHints.topAccounts }}
     </template>
   </page-header>
+  <!--  todo accounts vs accounts-->
+  <accounts-statistics/>
   <top-accounts-panel v-if="!isLoading"/>
   <loader-panel v-else/>
 </template>
 
 <script setup>
 import PageHeader from '@/components/PageHeader'
 import { topAccountsHints } from '@/utils/hints/topAccountsHints'
+import AccountsStatistics from '~/components/AccountsStatistics.vue'
 
 const { isLoading } = useLoading()
 </script>
diff --git a/src/stores/charts.js b/src/stores/charts.js
@@ -58,7 +58,7 @@ export const useChartsStore = defineStore('charts', () => {
     namesStatistics.value = null
 
     const intervalSlug = customInterval
-      ? `?min_start_date=${customInterval.minStart}&max_start_date=${customInterval.maxStart}&limit=100`
+      ? `?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/stats/names${intervalSlug}`)
@@ -71,7 +71,7 @@ export const useChartsStore = defineStore('charts', () => {
     difficultyStatistics.value = null
 
     const intervalSlug = customInterval
-      ? `?min_start_date=${customInterval.minStart}&max_start_date=${customInterval.maxStart}&limit=100`
+      ? `?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/stats/difficulty${intervalSlug}`)
@@ -84,7 +84,7 @@ export const useChartsStore = defineStore('charts', () => {
     hashrateStatistics.value = null
 
     const intervalSlug = customInterval
-      ? `?min_start_date=${customInterval.minStart}&max_start_date=${customInterval.maxStart}&limit=100`
+      ? `?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/stats/hashrate${intervalSlug}`)
@@ -97,7 +97,7 @@ export const useChartsStore = defineStore('charts', () => {
     accountsStatistics.value = null
 
     const intervalSlug = customInterval
-      ? `?min_start_date=${customInterval.minStart}&max_start_date=${customInterval.maxStart}&limit=100`
+      ? `?min_start_date=${customInterval.minStart}&max_start_date=${customInterval.maxStart}&limit=1000`
       : `?interval_by=${interval}&limit=${limit}`
     // https://mainnet.aeternity.io/mdw/v3/stats/active-accounts?interval_by=week&limit=10
     const { data } = await axios.get(`${MIDDLEWARE_URL}/v3/stats/active-accounts${intervalSlug}`)

diff --git a/src/stores/topAccounts.js b/src/stores/topAccounts.js
@@ -1,8 +1,8 @@
-import { useBlockchainStatsStore } from '@/stores/blockchainStats'
-
 export const useTopAccountsStore = defineStore('topAccounts', () => {
   const axios = useAxios()
   const rawTopAccounts = ref(null)
+  const activeAccountsCount = ref(null)
+  const totalAccountsCount = ref(null)
   const { MIDDLEWARE_URL } = useRuntimeConfig().public
   const blockchainStatsStore = useBlockchainStatsStore()
   const { fetchTotalStats } = useBlockchainStatsStore()
@@ -17,6 +17,8 @@ export const useTopAccountsStore = defineStore('topAccounts', () => {
     return Promise.allSettled([
       fetchAccounts(),
       fetchTotalStats(),
+      fetchActiveAccountsCount(),
+      fetchTotalAccountsCount(),
     ])
   }
 
@@ -26,8 +28,35 @@ export const useTopAccountsStore = defineStore('topAccounts', () => {
     rawTopAccounts.value = data
   }
 
+  async function fetchActiveAccountsCount() {
+    activeAccountsCount.value = null
+    const { data } = await axios.get(`${MIDDLEWARE_URL}/v3/stats/active-accounts?limit=1`)
+    activeAccountsCount.value = data.data[0].count
+  }
+
+  async function fetchTotalAccountsCount() {
+    totalAccountsCount.value = null
+    const { data } = await axios.get(`${MIDDLEWARE_URL}/v3/stats/total-accounts?interval_by=month&limit=100`)
+    // todo ask mdw for endpoint
+    totalAccountsCount.value = data.data.reduce((total, item) => total + parseInt(item.count), 0)
+  }
+
+  function sumCounts(dataString) {
+    // Parse the input string into an array of objects
+
+    // Check if the parsing was successful
+    if (!Array.isArray(dataArray)) {
+      throw new TypeError('Invalid input: Expected a valid JSON array')
+    }
+
+    // Sum up all the counts using reduce()
+    return dataArray.reduce((total, item) => total + parseInt(item.count), 0)
+  }
+
   return {
-    topAccounts,
     fetchTopAccounts,
+    topAccounts,
+    activeAccountsCount,
+    totalAccountsCount,
   }
 })