use data from mdw to chart

Author: janmichek

src/components/MinersStatistics.vue

@@ -131,7 +131,8 @@
           {{ miningHints.mining }}
         </hint-tooltip>
       </h2>
-      <pie-chart/>
+
+      <pie-chart :top-miners="topMiners"/>
       <!--      todo chart abstraction-->
       <!--      todo add legend-->
     </app-panel>
@@ -142,17 +143,19 @@ import { miningHints } from '@/utils/hints/miningHints'
 import { useMinersStore } from '@/composables/miners'
 import { formatAettosToAe } from '@/utils/format'
 
-const { fetchMining } = useMinersStore()
+const { fetchMining, fetchTopMiners } = useMinersStore()
 const {
   minersCount,
   blockReward,
   status,
   blocksPerMinute,
   maxTPS,
+  topMiners,
 } = storeToRefs(useMinersStore())
 
 if (process.client) {
   await fetchMining()
+  await fetchTopMiners()
 }
 </script>
 

src/components/PieChart.vue

@@ -24,30 +24,32 @@ import {
   Tooltip,
 } from 'chart.js'
 import { Doughnut } from 'vue-chartjs'
+import { formatKnownAddress } from '~/utils/format'
 
-// const hasChart = computed(() => props.data?.length > 0)
 const isEmpty = computed(() => props.data?.length === 0)
 const isLoading = computed(() => props.data === null)
 
 const props = defineProps({
-  // data: {
-  //   type: Array,
-  //   default: null,
-  // },
   interval: {
     type: String,
     required: true,
   },
+  topMiners: {
+    type: Array,
+    required: true,
+  },
+})
+const stats = computed(() => {
+  return props.topMiners.map(item => item.blocksMined)
+})
+const legend = computed(() => {
+  return props.topMiners.map(item => formatKnownAddress(item.miner))
 })
 const data = {
-  labels: [
-    '2miners',
-    '2miners.solo',
-    'WoolyPooly',
-  ],
+  labels: legend.value,
   datasets: [{
     label: 'My First Dataset',
-    data: [48, 2, 50],
+    data: stats.value,
     backgroundColor: [
       'rgb(255, 99, 132)',
       'rgb(54, 162, 235)',
@@ -57,11 +59,6 @@ const data = {
   }],
 }
 
-// const stats = computed(() => {
-//   return props.data.map(stat => {
-//     return stat.count
-//   })
-// })
 //
 // const labels = computed(() => {
 //   return props.data.map(stat => {

src/composables/miners.js

@@ -14,6 +14,7 @@ export const useMinersStore = defineStore('miners', () => {
   const status = ref(null)
   const maxTPS = ref(null)
   const blocksPerMinute = ref(null)
+  const topMiners = ref(null)
 
   function fetchMining() {
     return Promise.all([
@@ -27,30 +28,37 @@ export const useMinersStore = defineStore('miners', () => {
     minersCount.value = null
     blocksPerMinute.value = null
     maxTPS.value = null
-    const { data } = await axios.get(`${MIDDLEWARE_URL}/v3/stats`)
+    const { data } = await axios.get(`${MIDDLEWARE_URL}/stats`)
     minersCount.value = data.minersCount
     blocksPerMinute.value = data.millisecondsPerBlock / 1000 / 60
     maxTPS.value = data.maxTransactionsPerSecond
   }
 
   async function fetchBlockReward() {
-    const { data } = await axios.get(`${MIDDLEWARE_URL}/v3/stats/delta?limit=1`)
+    const { data } = await axios.get(`${MIDDLEWARE_URL}/stats/delta?limit=1`)
     blockReward.value = data.data[0].blockReward
   }
 
   async function fetchStatus() {
     status.value = null
-    const { data } = await axios.get(`${NODE_URL}/v3/status`)
+    const { data } = await axios.get(`${NODE_URL}/status`)
     status.value = data
   }
 
   async function fetchMiners({ queryParameters, limit } = {}) {
     miners.value = null
-    const defaultParameters = `/v3/stats/miners?limit=${limit ?? 10}`
+    const defaultParameters = `/stats/miners?limit=${limit ?? 10}`
     const { data } = await axios.get(`${MIDDLEWARE_URL}${queryParameters || defaultParameters}`)
     miners.value = data
   }
 
+  async function fetchTopMiners({ queryParameters, limit } = {}) {
+    topMiners.value = null
+    const defaultParameters = '/stats/miners/top?interval_by=day&min_start_date=2025-02-11&max_start_date=2025-02-11&limit=10&direction=forward'
+    const { data } = await axios.get(`${MIDDLEWARE_URL}${queryParameters || defaultParameters}`)
+    topMiners.value = data.data
+  }
+
   return {
     miners,
     minersCount,
@@ -60,5 +68,7 @@ export const useMinersStore = defineStore('miners', () => {
     maxTPS,
     fetchMining,
     fetchMiners,
+    fetchTopMiners,
+    topMiners,
   }
 })

src/pages/mining-pools/index.vue

@@ -27,10 +27,7 @@
 </template>
 
 <script setup>
-import { miningHints } from '../../utils/hints/miningHints'
-import PageHeader from '~/components/PageHeader.vue'
-import AppTab from '~/components/AppTab.vue'
-import AppTabs from '~/components/AppTabs.vue'
+import { miningHints } from '@/utils/hints/miningHints'
 
 const route = useRoute()
 const { push, replace } = useRouter()