feat: Names charts (#641)

src/components/LineChart.vue

@@ -46,10 +46,10 @@ function formatDate(label) {
   const date = DateTime.fromISO(label)
 
   if (props.selectedInterval === 'month') {
-    return date.toFormat('yyyy-MM')
+    return date.toFormat('yyyy/MM')
   }
 
-  return date.toFormat('MM-dd')
+  return date.toFormat('MM/dd')
 }
 
 function formatNumberFractions(number) {
@@ -100,6 +100,7 @@ const chartOptions = {
         display: false,
       },
       ticks: {
+        precision: 0,
         callback: function(value) {
           return formatNumberFractions(value)
         },

src/components/NamesChartPanel.vue

@@ -0,0 +1,56 @@
+<template>
+  <app-panel>
+    <template #heading>
+      NAMES ACTIVATED TREND
+    </template>
+    <template #header>
+      <chart-controls
+        class="u-hidden-mobile"
+        @selected="loadNamesStatistics"/>
+    </template>
+
+    <div class="names-chart-panel__container">
+      <line-chart
+        v-if="namesStatistics"
+        :statistics="namesStatistics"
+        :selected-interval="selectedInterval"/>
+    </div>
+
+    <chart-controls
+      class="names-chart-panel__chart__controls u-hidden-desktop"
+      @selected="loadNamesStatistics"/>
+  </app-panel>
+</template>
+
+<script setup>
+import { useNamesStore } from '@/stores/names'
+
+const namesStore = useNamesStore()
+const { namesStatistics } = storeToRefs(namesStore)
+const { fetchNamesStatistics } = namesStore
+
+const selectedInterval = ref('')
+
+await useAsyncData(async() => {
+  await fetchNamesStatistics()
+  return true
+})
+
+async function loadNamesStatistics({ interval, limit, range }) {
+  selectedInterval.value = interval
+  await fetchNamesStatistics(interval, limit, range)
+}
+</script>
+
+<style scoped>
+.names-chart-panel {
+  &__container {
+    position: relative;
+    height: 250px;
+  }
+
+  &__controls {
+    margin-top: var(--space-4);
+  }
+}
+</style>

src/pages/names/index.vue

@@ -5,7 +5,6 @@
 
   <page-header>
     Names
-
     <template #tooltip>
       {{ namesHints.name }}
       <app-link
@@ -16,6 +15,7 @@
     </template>
   </page-header>
   <template v-if="!isLoading">
+    <names-chart-panel class="names_names-panel"/>
     <app-tabs v-model="activeTabIndex">
       <app-tab title="Active">
         <names-active-panel/>
@@ -82,3 +82,13 @@ if (process.client) {
   fetchNamesDetails({ limit })
 }
 </script>
+
+<style scoped>
+.names_names-panel {
+  margin-bottom: var(--space-4);
+
+  @media (--desktop) {
+    margin-bottom: var(--space-6);
+  }
+}
+</style>

src/stores/names.js

@@ -13,6 +13,7 @@ export const useNamesStore = defineStore('names', () => {
   const rawInAuctionNames = ref(null)
   const rawExpiredNames = ref(null)
   const rawRecentlyActivatedNames = ref(null)
+  const namesStatistics = ref(null)
 
   const activeNames = computed(() => {
     return rawActiveNames.value
@@ -73,6 +74,19 @@ export const useNamesStore = defineStore('names', () => {
     rawRecentlyActivatedNames.value = data.data
   }
 
+  async function fetchNamesStatistics(interval = 'day', limit = 7, range) {
+    namesStatistics.value = null
+
+    const slug = range
+      ? `?min_start_date=${range.minStart}&max_start_date=${range.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()
+  }
+
   return {
     rawActiveNames,
     rawInAuctionNames,
@@ -83,10 +97,12 @@ export const useNamesStore = defineStore('names', () => {
     auctionsEndingSoon,
     expiredNames,
     recentlyActivatedNames,
+    namesStatistics,
     fetchNamesDetails,
     fetchActiveNames,
     fetchInAuctionNames,
     fetchExpiredNames,
     fetchRecentlyActivatedNames,
+    fetchNamesStatistics,
   }
 })