From ba1f59eef7c902d8d8be650642752053a3771466 Mon Sep 17 00:00:00 2001
From: Jan Michek <15363559+janmichek@users.noreply.github.com>
Date: Mon, 6 May 2024 15:26:48 +0200
Subject: [PATCH] feat: Transactions chart page (#719)

---
 src/components/AppSelect.vue              | 56 +++++++++------
 src/components/ChartControls.vue          | 62 ++++++++---------
 src/components/ContractsChartPanel.vue    | 30 ++++----
 src/components/LineChart.vue              | 45 +++++++++---
 src/components/NamesChartPanel.vue        | 32 +++++----
 src/components/RangePicker.vue            | 10 +--
 src/components/TheNavigation.vue          | 10 +++
 src/components/TransactionsChartPanel.vue | 84 +++++++++++++++--------
 src/components/TransactionsSelect.vue     |  5 ++
 src/pages/charts/index.vue                | 54 +++++++++++++++
 src/pages/names/index.vue                 |  4 +-
 src/pages/transactions/index.vue          |  4 +-
 src/stores/charts.js                      | 30 ++++++++
 src/stores/contracts.js                   |  8 +--
 src/stores/names.js                       |  8 +--
 src/stores/status.js                      |  2 +-
 src/stores/transactions.js                | 13 ----
 src/utils/constants.js                    |  7 ++
 src/utils/hints/chartsHints.js            |  3 +
 19 files changed, 321 insertions(+), 146 deletions(-)
 create mode 100644 src/pages/charts/index.vue
 create mode 100644 src/stores/charts.js
 create mode 100644 src/utils/hints/chartsHints.js

diff --git a/src/components/AppSelect.vue b/src/components/AppSelect.vue
index c17a5e19f..1ba761896 100644
--- a/src/components/AppSelect.vue
+++ b/src/components/AppSelect.vue
@@ -9,7 +9,10 @@
     :disabled="disabled"
     :searchable="searchable"
     :hide-selected="hideSelected"
-    :preselect-first="preselectFirst">
+    :preselect-first="preselectFirst"
+    :class="[
+      size ? `multiselect--${size}` : null,
+    ]">
     <template
       v-for="(_, slot) of $slots"
       #[slot]="scope">
@@ -63,6 +66,11 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  size: {
+    type: String,
+    default: null,
+    validator: val => ['sm'].includes(val),
+  },
   modelValue: undefined,
 })
 const emit = defineEmits(['update:modelValue'])
@@ -89,13 +97,9 @@ const selectedValue = useVModel(props, 'modelValue', emit)
 
   &__single {
     color: var(--color-midnight);
-    font-size: 16px;
+    font-size: 14px;
     line-height: 20px;
     padding-left: var(--space-0);
-
-    @media (--desktop) {
-      font-size: 14px;
-    }
   }
 
   &__content-wrapper {
@@ -110,19 +114,14 @@ const selectedValue = useVModel(props, 'modelValue', emit)
   }
 
   &__option {
-    height: 36px;
     display: flex;
     align-items: center;
     border: solid var(--color-midnight-35);
     border-width: 1px 0;
     color: solid var(--color-midnight);
-    font-size: 12px;
+    font-size: 14px;
     line-height: 20px;
 
-    @media (--desktop) {
-      font-size: 14px;
-    }
-
     &:last-child {
       border-width: 1px 0 0;
     }
@@ -142,15 +141,12 @@ const selectedValue = useVModel(props, 'modelValue', emit)
   }
 
   &__input {
-    font-size: 16px;
+    font-size: 14px;
     line-height: 20px;
-
-    @media (--desktop) {
-      font-size: 14px;
-    }
   }
 
   &__select {
+    height: 36px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -178,13 +174,31 @@ const selectedValue = useVModel(props, 'modelValue', emit)
 
   &__placeholder {
     color: var(--color-midnight-35);
-    font-size: 16px;
+    font-size: 14px;
     line-height: 20px;
-    padding-top: 0;
     padding-left: var(--space-0);
+    padding-top: var(--space-0);
+    margin-bottom: var(--space-0);
+  }
+
+  &--sm {
+    .multiselect__tags {
+      min-height: 28px;
+      padding: 0 40px 0 8px;
+    }
 
-    @media (--desktop) {
-      font-size: 14px;
+    .multiselect__single {
+      padding-top: var(--space-0);
+      margin-bottom: var(--space-0);
+    }
+
+    .multiselect__input {
+      padding-top: var(--space-0);
+      margin-bottom: var(--space-0);
+    }
+
+    .multiselect__select {
+      height: 29px;
     }
   }
 }
diff --git a/src/components/ChartControls.vue b/src/components/ChartControls.vue
index af2766df1..34329aa31 100644
--- a/src/components/ChartControls.vue
+++ b/src/components/ChartControls.vue
@@ -2,55 +2,55 @@
   <div>
     <div class="chart-controls__container">
       <app-chip
-        v-for="(button, index) in buttons"
-        :key="index"
+        v-for="option in CHART_INTERVALS_OPTIONS"
+        :key="option.label"
         class="chart-controls__button"
-        :variant="selectedIndex === index ? 'error' : 'secondary'"
-        @click="selectInterval(index)">
-        {{ button.label }}
+        :variant="isIntervalSelected(option) ? 'error' : 'secondary'"
+        @click="selectInterval(option)">
+        {{ option.label }}
       </app-chip>
       <range-picker
-        :is-active="selectedIndex === 'custom'"
-        :is-range-set="hasCustomDate"
-        @updated="selectRange"/>
+        :is-range-selected="isCustomIntervalSelected"
+        @updated="selectCustomInterval"/>
     </div>
   </div>
 </template>
 
 <script setup>
-import RangePicker from '@/components/RangePicker'
+import { useVModel } from '@vueuse/core'
 
-const buttons = [
-  { interval: 'day', limit: '7', label: '1W' },
-  { interval: 'day', limit: '30', label: '1M' },
-  { interval: 'day', limit: '90', label: '3M' },
-  { interval: 'month', limit: '12', label: '1Y' },
-  { interval: 'month', limit: '100', label: 'ALL' },
-]
+const emit = defineEmits(['update:modelValue'])
 
-const selectedIndex = ref(0)
-
-const hasCustomDate = computed(() => {
-  return selectedIndex.value === 'custom'
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 0,
+  },
 })
 
-function selectInterval(index) {
-  selectedIndex.value = index
-  emit('selected', buttons[index])
+const selectedRange = useVModel(props, 'modelValue', emit)
+
+const isCustomIntervalSelected = computed(() =>
+  Object.keys(selectedRange.value).includes('customInterval'))
+
+function isIntervalSelected(option) {
+  return selectedRange.value.label === option.label
+}
+
+function selectInterval(option) {
+  selectedRange.value = option
 }
 
-function selectRange(dateRange) {
-  selectedIndex.value = 'custom'
-  const range = {
-    range: {
-      minStart: dateRange[0].toISOString().split('T')[0],
-      maxStart: dateRange[1].toISOString().split('T')[0],
+function selectCustomInterval(dateCustomInterval) {
+  const customInterval = {
+    customInterval: {
+      minStart: dateCustomInterval[0].toISOString().split('T')[0],
+      maxStart: dateCustomInterval[1].toISOString().split('T')[0],
     },
   }
-  emit('selected', range)
+  selectedRange.value = customInterval
 }
 
-const emit = defineEmits(['selected'])
 </script>
 
 <style scoped>
diff --git a/src/components/ContractsChartPanel.vue b/src/components/ContractsChartPanel.vue
index 9fd29f808..a60a68075 100644
--- a/src/components/ContractsChartPanel.vue
+++ b/src/components/ContractsChartPanel.vue
@@ -5,20 +5,19 @@
     </template>
     <template #header>
       <chart-controls
-        class="u-hidden-mobile"
-        @selected="loadContractsStatistics"/>
+        v-model="selectedRange"
+        class="u-hidden-mobile"/>
     </template>
 
     <div class="contracts-chart-panel__container">
       <line-chart
-        v-if="contractsStatistics"
-        :statistics="contractsStatistics"
-        :selected-interval="selectedInterval"/>
+        :data="contractsStatistics"
+        :interval="selectedRange.interval"/>
     </div>
 
     <chart-controls
-      class="contracts-chart-panel__controls u-hidden-desktop"
-      @selected="loadContractsStatistics"/>
+      v-model="selectedRange"
+      class="contracts-chart-panel__controls u-hidden-desktop"/>
   </app-panel>
 </template>
 
@@ -26,21 +25,28 @@
 import { storeToRefs } from 'pinia'
 import { useContractsStore } from '@/stores/contracts'
 import LineChart from '@/components/LineChart'
+import { CHART_INTERVALS_OPTIONS } from '@/utils/constants'
 
 const contractsStore = useContractsStore()
 const { contractsStatistics } = storeToRefs(contractsStore)
 const { fetchContractsStatistics } = contractsStore
 
-const selectedInterval = ref('')
+const selectedRange = ref(CHART_INTERVALS_OPTIONS[0])
 
 await useAsyncData(async() => {
-  await fetchContractsStatistics()
+  await loadContractsStatistics()
   return true
 })
 
-async function loadContractsStatistics({ interval, limit, range }) {
-  selectedInterval.value = interval
-  await fetchContractsStatistics(interval, limit, range)
+watch(selectedRange, async() => {
+  await loadContractsStatistics()
+})
+
+async function loadContractsStatistics() {
+  await fetchContractsStatistics(
+    selectedRange.value.interval,
+    selectedRange.value.limit,
+    selectedRange.value.customInterval)
 }
 
 </script>
diff --git a/src/components/LineChart.vue b/src/components/LineChart.vue
index a9c29e6a6..e8e0faee3 100644
--- a/src/components/LineChart.vue
+++ b/src/components/LineChart.vue
@@ -1,7 +1,14 @@
 <template>
-  <Line
-    :options="chartOptions"
-    :data="chartData"/>
+  <div class="line-chart">
+    <Line
+      v-if="hasChart"
+      :options="chartOptions"
+      :data="chartData"/>
+    <blank-state
+      v-if="isEmpty"
+      class="line-chart__blank-state"/>
+    <loader-indicator v-if="isLoading"/>
+  </div>
 </template>
 
 <script setup>
@@ -19,33 +26,36 @@ import {
 import { DateTime } from 'luxon'
 import { Line } from 'vue-chartjs'
 
+const hasChart = computed(() => props.data?.length > 0)
+const isEmpty = computed(() => props.data?.length === 0)
+const isLoading = computed(() => props.data === null)
+
 const props = defineProps({
-  statistics: {
+  data: {
     type: Array,
-    required: true,
+    default: null,
   },
-  selectedInterval: {
+  interval: {
     type: String,
     required: true,
   },
 })
 
 const stats = computed(() => {
-  return props.statistics.map(stat => {
+  return props.data.map(stat => {
     return stat.count
   })
 })
 
 const labels = computed(() => {
-  return props.statistics.map(stat => {
+  return props.data.map(stat => {
     return formatDate(stat.startDate)
   })
 })
 
 function formatDate(label) {
   const date = DateTime.fromISO(label)
-
-  if (props.selectedInterval === 'month') {
+  if (props.interval === 'month') {
     return date.toFormat('yyyy/MM')
   }
 
@@ -128,3 +138,18 @@ ChartJS.register(
 
 ChartJS.defaults.font.family = 'Roboto Mono'
 </script>
+
+<style scoped>
+.line-chart {
+  height: 250px;
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &__blank-state {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/components/NamesChartPanel.vue b/src/components/NamesChartPanel.vue
index 09d509db4..9b9a463d2 100644
--- a/src/components/NamesChartPanel.vue
+++ b/src/components/NamesChartPanel.vue
@@ -5,40 +5,48 @@
     </template>
     <template #header>
       <chart-controls
-        class="u-hidden-mobile"
-        @selected="loadNamesStatistics"/>
+        v-model="selectedRange"
+        class="u-hidden-mobile"/>
     </template>
 
     <div class="names-chart-panel__container">
       <line-chart
-        v-if="namesStatistics"
-        :statistics="namesStatistics"
-        :selected-interval="selectedInterval"/>
+        :data="namesStatistics"
+        :interval="selectedRange.interval"/>
     </div>
 
     <chart-controls
-      class="names-chart-panel__chart__controls u-hidden-desktop"
-      @selected="loadNamesStatistics"/>
+      v-model="selectedRange"
+      class="names-chart-panel__chart__controls u-hidden-desktop"/>
   </app-panel>
 </template>
 
 <script setup>
 import { useNamesStore } from '@/stores/names'
+import { CHART_INTERVALS_OPTIONS } from '@/utils/constants'
 
 const namesStore = useNamesStore()
 const { namesStatistics } = storeToRefs(namesStore)
 const { fetchNamesStatistics } = namesStore
 
-const selectedInterval = ref('')
+const selectedRange = ref(CHART_INTERVALS_OPTIONS[0])
 
 await useAsyncData(async() => {
-  await fetchNamesStatistics()
+  await loadNamesStatistics()
   return true
 })
 
-async function loadNamesStatistics({ interval, limit, range }) {
-  selectedInterval.value = interval
-  await fetchNamesStatistics(interval, limit, range)
+if (process.client) {
+  watch(selectedRange, async() => {
+    await loadNamesStatistics()
+  })
+}
+
+async function loadNamesStatistics() {
+  await fetchNamesStatistics(
+    selectedRange.value.interval,
+    selectedRange.value.limit,
+    selectedRange.value.customInterval)
 }
 </script>
 
diff --git a/src/components/RangePicker.vue b/src/components/RangePicker.vue
index 1114a0345..0b5b12b0e 100644
--- a/src/components/RangePicker.vue
+++ b/src/components/RangePicker.vue
@@ -13,7 +13,7 @@
       :enable-time-picker="false"
       :prevent-min-max-navigation="true"
       placeholder="CUSTOM"
-      :input-class-name="`range-picker__input ${isActive ? 'range-picker__input--active' : ''}`"
+      :input-class-name="`range-picker__input ${isRangeSelected ? 'range-picker__input--active' : ''}`"
       @update:model-value="$emit('updated', date)"/>
   </div>
 </template>
@@ -27,11 +27,7 @@ import { STATISTICS_DATA_BEGINNING } from '@/utils/constants'
 const date = ref()
 const datepicker = ref(null)
 const props = defineProps({
-  isActive: {
-    type: String,
-    required: true,
-  },
-  isRangeSet: {
+  isRangeSelected: {
     type: Boolean,
     required: true,
   },
@@ -39,7 +35,7 @@ const props = defineProps({
 
 const today = DateTime.now().toFormat('yyyy-MM-dd')
 
-watch(() => props.isRangeSet, (newVal, oldVal) => {
+watch(() => props.isRangeSelected, (newVal, oldVal) => {
   if (!newVal && oldVal) {
     closeDatepicker()
   }
diff --git a/src/components/TheNavigation.vue b/src/components/TheNavigation.vue
index df92005c3..f9c719ff8 100644
--- a/src/components/TheNavigation.vue
+++ b/src/components/TheNavigation.vue
@@ -71,6 +71,16 @@ const menuOptions = ref([{
       path: '/contract-verification',
     },
   ],
+},
+{
+  name: 'Charts',
+  isActive: false,
+  submenu: [
+    {
+      name: 'Charts',
+      path: '/charts',
+    },
+  ],
 }])
 
 function open(name) {
diff --git a/src/components/TransactionsChartPanel.vue b/src/components/TransactionsChartPanel.vue
index 5cec3c72e..495733407 100644
--- a/src/components/TransactionsChartPanel.vue
+++ b/src/components/TransactionsChartPanel.vue
@@ -4,55 +4,83 @@
       TRANSACTIONS TREND
     </template>
     <template #header>
+      <transactions-select
+        v-if="hasSelect"
+        v-model="selectedTxType"
+        size="sm"
+        class="charts-transactions-chart-panel__select
+        charts-transactions-chart-panel__select--desktop
+        u-hidden-mobile"/>
+
       <chart-controls
-        class="u-hidden-mobile"
-        @selected="loadTransactionsStatistics"/>
+        v-model="selectedRange"
+        class="u-hidden-mobile"/>
     </template>
 
-    <div class="transactions-chart-panel__container">
-      <line-chart
-        v-if="transactionsStatistics"
-        :statistics="transactionsStatistics"
-        :selected-interval="selectedInterval"/>
-    </div>
+    <line-chart
+      :data="transactionsStatistics"
+      :interval="selectedRange.interval"/>
 
     <chart-controls
-      class="transactions-chart-panel__controls u-hidden-desktop"
-      @selected="loadTransactionsStatistics"/>
+      v-model="selectedRange"
+      class="transactions-chart-panel__controls u-hidden-desktop"/>
+    <transactions-select
+      v-if="hasSelect"
+      v-model="selectedTxType"
+      class="select u-hidden-desktop"/>
   </app-panel>
 </template>
 
 <script setup>
-
 import { storeToRefs } from 'pinia'
-import { useTransactionsStore } from '@/stores/transactions'
-import LineChart from '@/components/LineChart'
+import { useChartsStore } from '@/stores/charts'
+import { CHART_INTERVALS_OPTIONS } from '@/utils/constants'
 
-const transactionsStore = useTransactionsStore()
-const { transactionsStatistics } = storeToRefs(transactionsStore)
-const { fetchTransactionsStatistics } = transactionsStore
+const chartsStore = useChartsStore()
+const { transactionsStatistics } = storeToRefs(chartsStore)
+const { fetchTransactionsStatistics } = chartsStore
 
-const selectedInterval = ref('')
+const selectedRange = ref(CHART_INTERVALS_OPTIONS[4])
+const selectedTxType = ref(TX_TYPES_OPTIONS[0])
 
-if (process.client) {
-  await fetchTransactionsStatistics()
-}
+await useAsyncData(async() => {
+  await loadTransactionStatistics()
+  return true
+})
+
+const props = defineProps({
+  hasSelect: {
+    required: true,
+    type: Object,
+  },
+})
+
+watch([selectedRange, selectedTxType], async() => {
+  await loadTransactionStatistics()
+})
 
-async function loadTransactionsStatistics({ interval, limit, range }) {
-  selectedInterval.value = interval
-  await fetchTransactionsStatistics(interval, limit, range)
+async function loadTransactionStatistics() {
+  await fetchTransactionsStatistics(
+    selectedRange.value.interval,
+    selectedRange.value.limit,
+    selectedRange.value.customInterval,
+    props.hasSelect ? selectedTxType.value.typeQuery : null)
 }
 </script>
 
 <style scoped>
 .transactions-chart-panel {
-  &__container {
-    position: relative;
-    height: 250px;
-  }
-
   &__controls {
     margin-top: var(--space-4);
+    margin-bottom: var(--space-2);
+
+    &--desktop {
+      margin-bottom: 0;
+    }
+  }
+
+  &__select {
+    width: 230px;
   }
 }
 </style>
diff --git a/src/components/TransactionsSelect.vue b/src/components/TransactionsSelect.vue
index 50d9a34c5..889db8569 100644
--- a/src/components/TransactionsSelect.vue
+++ b/src/components/TransactionsSelect.vue
@@ -5,6 +5,7 @@
     track-by="typeQuery"
     label="label"
     placeholder="Select Tx Type"
+    :size="size"
     :hide-selected="true"/>
 </template>
 
@@ -18,6 +19,10 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  size: {
+    type: String,
+    default: null,
+  },
 })
 
 const emit = defineEmits(['update:modelValue'])
diff --git a/src/pages/charts/index.vue b/src/pages/charts/index.vue
new file mode 100644
index 000000000..5094ea879
--- /dev/null
+++ b/src/pages/charts/index.vue
@@ -0,0 +1,54 @@
+<template>
+  <Head>
+    <Title>Charts</Title>
+  </Head>
+
+  <page-header>
+    Charts
+    <template #tooltip>
+      {{ chartsHints.charts }}
+    </template>
+  </page-header>
+
+  <div class="charts">
+    <nav class="charts__navigation">
+      <app-panel>
+        <app-link to="/charts">
+          Transactions
+        </app-link>
+      </app-panel>
+    </nav>
+    <div class="charts__container">
+      <template v-if="!isLoading">
+        <charts-transactions-chart-panel/>
+      </template>
+      <loader-panel v-else/>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { chartsHints } from '@/utils/hints/chartsHints'
+
+const { isLoading } = useLoading()
+</script>
+
+<style scoped>
+.charts {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+
+  @media (--desktop) {
+    flex-direction: row;
+  }
+
+  &__container {
+    flex-grow: 1;
+  }
+
+  &__navigation {
+    width: 200px;
+  }
+}
+</style>
diff --git a/src/pages/names/index.vue b/src/pages/names/index.vue
index 8e47983ae..c6261acc8 100644
--- a/src/pages/names/index.vue
+++ b/src/pages/names/index.vue
@@ -15,7 +15,7 @@
     </template>
   </page-header>
   <template v-if="!isLoading">
-    <names-chart-panel class="names_names-panel"/>
+    <names-chart-panel class="names__names-panel"/>
     <app-tabs v-model="activeTabIndex">
       <app-tab title="Active">
         <names-active-panel/>
@@ -84,7 +84,7 @@ if (process.client) {
 </script>
 
 <style scoped>
-.names_names-panel {
+.names__names-panel {
   margin-bottom: var(--space-4);
 
   @media (--desktop) {
diff --git a/src/pages/transactions/index.vue b/src/pages/transactions/index.vue
index f49be546e..3bf57accb 100644
--- a/src/pages/transactions/index.vue
+++ b/src/pages/transactions/index.vue
@@ -11,7 +11,9 @@
   </page-header>
   <template v-if="!isLoading">
     <transactions-stats class="transactions-panel"/>
-    <transactions-chart-panel class="transactions-panel"/>
+    <transactions-chart-panel
+      :has-select="false"
+      class="transactions-panel"/>
     <transactions-panel class="transactions-panel"/>
   </template>
   <loader-panel v-else/>
diff --git a/src/stores/charts.js b/src/stores/charts.js
new file mode 100644
index 000000000..a3936a86d
--- /dev/null
+++ b/src/stores/charts.js
@@ -0,0 +1,30 @@
+import { defineStore } from 'pinia'
+import { useRuntimeConfig } from 'nuxt/app'
+import useAxios from '@/composables/useAxios'
+
+export const useChartsStore = defineStore('charts', () => {
+  const { MIDDLEWARE_URL } = useRuntimeConfig().public
+  const axios = useAxios()
+
+  const transactionsStatistics = ref(null)
+
+  async function fetchTransactionsStatistics(interval, limit, customInterval, txType) {
+    transactionsStatistics.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 typeSlug = txType ? '&tx_type=' + txType : ''
+
+    const { data } = await axios.get(`${MIDDLEWARE_URL}/v3/statistics/transactions${intervalSlug + typeSlug}`)
+
+    // remove last interval from the response not to show current interval that is being built
+    transactionsStatistics.value = customInterval ? data.data.reverse() : data.data.slice(1).reverse()
+  }
+
+  return {
+    transactionsStatistics,
+    fetchTransactionsStatistics,
+  }
+})
diff --git a/src/stores/contracts.js b/src/stores/contracts.js
index 25ec99898..15c2a47a9 100644
--- a/src/stores/contracts.js
+++ b/src/stores/contracts.js
@@ -29,17 +29,17 @@ export const useContractsStore = defineStore('contracts', () => {
     rawContracts.value = data
   }
 
-  async function fetchContractsStatistics(interval = 'day', limit = 7, range) {
+  async function fetchContractsStatistics(interval, limit, customInterval) {
     contractsStatistics.value = null
 
-    const slug = range
-      ? `&min_start_date=${range.minStart}&max_start_date=${range.maxStart}&limit=1000`
+    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 = range ? data.data.reverse() : data.data.slice(1).reverse()
+    contractsStatistics.value = customInterval ? data.data.reverse() : data.data.slice(1).reverse()
   }
 
   async function fetchContractsCount() {
diff --git a/src/stores/names.js b/src/stores/names.js
index 10bebb6d2..8619b125a 100644
--- a/src/stores/names.js
+++ b/src/stores/names.js
@@ -74,17 +74,17 @@ export const useNamesStore = defineStore('names', () => {
     rawRecentlyActivatedNames.value = data.data
   }
 
-  async function fetchNamesStatistics(interval = 'day', limit = 7, range) {
+  async function fetchNamesStatistics(interval, limit, customInterval) {
     namesStatistics.value = null
 
-    const slug = range
-      ? `?min_start_date=${range.minStart}&max_start_date=${range.maxStart}&limit=100`
+    const slug = 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/statistics/names${slug}`)
 
     // remove last interval from the response not to show current interval that is being built
-    namesStatistics.value = range ? data.data.reverse() : data.data.slice(1).reverse()
+    namesStatistics.value = customInterval ? data.data.reverse() : data.data.slice(1).reverse()
   }
 
   return {
diff --git a/src/stores/status.js b/src/stores/status.js
index a8e01de6d..ea0b2760c 100644
--- a/src/stores/status.js
+++ b/src/stores/status.js
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { useRuntimeConfig } from 'nuxt/app'
 import useAxios from '@/composables/useAxios'
-import { SYNCING_BLOCK_THRESHOLD } from '~/utils/constants'
+import { SYNCING_BLOCK_THRESHOLD } from '@/utils/constants'
 
 export const useStatus = defineStore('status', () => {
   const { MIDDLEWARE_URL, NODE_URL } = useRuntimeConfig().public
diff --git a/src/stores/transactions.js b/src/stores/transactions.js
index 44eaf0499..6aeef262c 100644
--- a/src/stores/transactions.js
+++ b/src/stores/transactions.js
@@ -39,19 +39,6 @@ export const useTransactionsStore = defineStore('transactions', () => {
     last24hsTransactionsTrend.value = data.transactionsTrend
   }
 
-  async function fetchTransactionsStatistics(interval = 'day', limit = 7, range) {
-    transactionsStatistics.value = null
-
-    const slug = range
-      ? `?min_start_date=${range.minStart}&max_start_date=${range.maxStart}&limit=1000`
-      : `?interval_by=${interval}&limit=${parseInt(limit) + 1}`
-
-    const { data } = await axios.get(`${MIDDLEWARE_URL}/v3/statistics/transactions${slug}`)
-
-    // remove last interval from the response not to show current interval that is being built
-    transactionsStatistics.value = range ? data.data.reverse() : data.data.slice(1).reverse()
-  }
-
   return {
     transactionsCount,
     transactions,
diff --git a/src/utils/constants.js b/src/utils/constants.js
index 0efd61c26..a01897a37 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -27,6 +27,13 @@ export const TX_TYPES_OPTIONS = [
   { typeQuery: 'ga_meta', label: 'GAMetaTx' },
   { typeQuery: 'paying_for', label: 'PayingForTx' },
 ]
+export const CHART_INTERVALS_OPTIONS = [
+  { interval: 'day', limit: '7', label: '1W' },
+  { interval: 'day', limit: '30', label: '1M' },
+  { interval: 'day', limit: '90', label: '3M' },
+  { interval: 'month', limit: '12', label: '1Y' },
+  { interval: 'month', limit: '100', label: 'ALL' },
+]
 export const ORACLE_STATES_OPTIONS = [
   { stateQuery: 'active', label: 'Active' },
   { stateQuery: 'inactive', label: 'Inactive' },
diff --git a/src/utils/hints/chartsHints.js b/src/utils/hints/chartsHints.js
new file mode 100644
index 000000000..d6408dace
--- /dev/null
+++ b/src/utils/hints/chartsHints.js
@@ -0,0 +1,3 @@
+export const chartsHints = {
+  charts: 'This page is dedicated to sum of all statistics data.',
+}