feat: hashrate chart (#975)

cypress/e2e/app/charts.cy.js

@@ -24,4 +24,8 @@ describe('charts', () => {
     cy.visit('/charts/difficulty')
     cy.get('.line-chart canvas').should('be.visible')
   })
+  it('should display hashrate', () => {
+    cy.visit('/charts/hashrate')
+    cy.get('.line-chart canvas').should('be.visible')
+  })
 })

src/components/ChartsNavigation.vue

@@ -32,8 +32,13 @@ const menuOptions = ref([{
 {
   name: 'Difficulty',
   path: 'difficulty',
+},
+{
+  name: 'Hashrate',
+  path: 'hashrate',
 }])
 </script>
+
 <style scoped>
 .charts-navigation {
   width: 100%;

src/components/ContractsChartPanel.vue

@@ -9,11 +9,9 @@
         class="u-hidden-mobile"/>
     </template>
 
-    <div class="contracts-chart-panel__container">
-      <line-chart
-        :data="contractsStatistics"
-        :interval="selectedRange.interval"/>
-    </div>
+    <line-chart
+      :data="contractsStatistics"
+      :interval="selectedRange.interval"/>
 
     <chart-controls
       v-model="selectedRange"
@@ -39,13 +37,13 @@ const props = defineProps({
 
 const selectedRange = ref(props.range)
 
-await useAsyncData(async() => {
+await useAsyncData(async () => {
   await loadContractsStatistics()
   return true
 })
 
 if (process.client) {
-  watch(selectedRange, async() => {
+  watch(selectedRange, async () => {
     await loadContractsStatistics()
   })
 }
@@ -60,14 +58,7 @@ async function loadContractsStatistics() {
 </script>
 
 <style scoped>
-.contracts-chart-panel {
-  &__container {
-    position: relative;
-    height: 250px;
-  }
-
-  &__controls {
-    margin-top: var(--space-4);
-  }
+.contracts-chart-panel__controls {
+  margin-top: var(--space-4);
 }
 </style>

src/components/DifficultyChartPanel.vue

@@ -61,14 +61,7 @@ async function loadDifficultytatistics() {
 </script>
 
 <style scoped>
-.difficulty-chart-panel {
-  &__controls {
-    margin-top: var(--space-4);
-    margin-bottom: var(--space-2);
-
-    &--desktop {
-      margin-bottom: 0;
-    }
-  }
+.difficulty-chart-panel__controls {
+  margin-top: var(--space-4);
 }
 </style>

src/components/HashrateChartPanel.vue

@@ -0,0 +1,67 @@
+<template>
+  <app-panel>
+    <template #title>
+      HASHRATE
+    </template>
+    <template #end>
+      <chart-controls
+        v-model="selectedRange"
+        class="u-hidden-mobile"/>
+    </template>
+
+    <line-chart
+      :data="hashrateStatistics"
+      :interval="selectedRange.interval"/>
+
+    <chart-controls
+      v-model="selectedRange"
+      class="hashrate-chart-panel__controls u-hidden-desktop"/>
+  </app-panel>
+</template>
+
+<script setup>
+import { storeToRefs } from 'pinia'
+import { useChartsStore } from '@/stores/charts'
+
+const chartsStore = useChartsStore()
+const { hashrateStatistics } = storeToRefs(chartsStore)
+const { fetchHashrateStatistics } = chartsStore
+
+const props = defineProps({
+  hasSelect: {
+    required: true,
+    type: Boolean,
+  },
+  range: {
+    required: true,
+    type: Object,
+  },
+})
+
+const selectedRange = ref(props.range)
+const selectedTxType = ref(TX_TYPES_OPTIONS[0])
+
+await useAsyncData(async() => {
+  await loadHashratetatistics()
+  return true
+})
+
+if (process.client) {
+  watch([selectedRange, selectedTxType], async() => {
+    await loadHashratetatistics()
+  })
+}
+
+async function loadHashratetatistics() {
+  await fetchHashrateStatistics(
+    selectedRange.value.interval,
+    selectedRange.value.limit,
+    selectedRange.value.customInterval)
+}
+</script>
+
+<style scoped>
+.hashrate-chart-pane__controls {
+  margin-top: var(--space-4);
+}
+</style>

src/components/KeyblocksChartPanel.vue

@@ -50,14 +50,7 @@ async function loadKeyblockStatistics() {
 </script>
 
 <style scoped>
-.keyblocks-chart-panel {
-  &__controls {
-    margin-top: var(--space-4);
-    margin-bottom: var(--space-2);
-
-    &--desktop {
-      margin-bottom: 0;
-    }
-  }
+.keyblocks-chart-pane__controls {
+  margin-top: var(--space-4);
 }
 </style>

src/components/NamesChartPanel.vue

@@ -9,11 +9,9 @@
         class="u-hidden-mobile"/>
     </template>
 
-    <div class="names-chart-panel__container">
-      <line-chart
-        :data="namesStatistics"
-        :interval="selectedRange.interval"/>
-    </div>
+    <line-chart
+      :data="namesStatistics"
+      :interval="selectedRange.interval"/>
 
     <chart-controls
       v-model="selectedRange"
@@ -58,14 +56,7 @@ async function loadNamesStatistics() {
 </script>
 
 <style scoped>
-.names-chart-panel {
-  &__container {
-    position: relative;
-    height: 250px;
-  }
-
-  &__controls {
-    margin-top: var(--space-4);
-  }
+.names-chart-panel__controls {
+  margin-top: var(--space-4);
 }
 </style>

src/components/TheNavigation.vue

@@ -116,6 +116,10 @@ const menuOptions = ref([{
       name: 'Difficulty',
       path: '/charts/difficulty',
     },
+    {
+      name: 'Hashrate',
+      path: '/charts/hashrate',
+    },
   ],
 }])
 

src/components/TransactionsChartPanel.vue

@@ -79,7 +79,6 @@ async function loadTransactionStatistics() {
 .transactions-chart-panel {
   &__controls {
     margin-top: var(--space-4);
-    margin-bottom: var(--space-2);
 
     &--desktop {
       margin-bottom: 0;
@@ -88,6 +87,7 @@ async function loadTransactionStatistics() {
 
   &__select {
     width: 230px;
+    min-height: 28px;
   }
 }
 </style>

src/pages/charts/difficulty.vue

@@ -15,9 +15,7 @@
       <charts-navigation/>
     </template>
     <template #detail>
-      <difficulty-chart-panel
-        :has-select="true"
-        :range="CHART_INTERVALS_OPTIONS[4]"/>
+      <difficulty-chart-panel :range="CHART_INTERVALS_OPTIONS[4]"/>
     </template>
   </NuxtLayout>
 </template>

src/pages/charts/hashrate.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>
+      <hashrate-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/stores/charts.js

@@ -11,6 +11,7 @@ export const useChartsStore = defineStore('charts', () => {
   const contractsStatistics = ref(null)
   const namesStatistics = ref(null)
   const difficultyStatistics = ref(null)
+  const hashrateStatistics = ref(null)
 
   async function fetchTransactionsStatistics(interval, limit, customInterval, txType) {
     transactionsStatistics.value = null
@@ -78,16 +79,31 @@ export const useChartsStore = defineStore('charts', () => {
     difficultyStatistics.value = customInterval ? data.data.reverse() : data.data.slice(1).reverse()
   }
 
+  async function fetchHashrateStatistics(interval, limit, customInterval) {
+    hashrateStatistics.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/stats/hashrate${intervalSlug}`)
+
+    // remove last interval from the response not to show current interval that is being built
+    hashrateStatistics.value = customInterval ? data.data.reverse() : data.data.slice(1).reverse()
+  }
+
   return {
     keyblocksStatistics,
     transactionsStatistics,
     contractsStatistics,
     namesStatistics,
     difficultyStatistics,
+    hashrateStatistics,
     fetchKeyblocksStatistics,
     fetchTransactionsStatistics,
     fetchContractsStatistics,
     fetchNamesStatistics,
     fetchDifficultyStatistics,
+    fetchHashrateStatistics,
   }
 })