display all stETH deposit chart data

Nounspace · Jul 3, 2024 · d2cfe74 · d2cfe74
1 parent 8e3137e
commit d2cfe74
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 75 deletions.
diff --git a/src/common/InfoDashboard/helpers.ts b/src/common/InfoDashboard/helpers.ts
@@ -10,15 +10,12 @@ const ONE_DAY_TIMESTAMP = 24 * 60 * 60
 export async function getChartData(
   poolId: number,
   poolStartedAt: BigNumber,
-  month: number,
 ): Promise<ChartData> {
   type QueryData = Record<`d${number}`, { totalStaked: string }[]>
   const { data } = await config.apolloClient.query<QueryData>({
-    query: _generateTotalStakedPerDayGraphqlQuery(poolId, poolStartedAt, month),
+    query: _generateTotalStakedPerDayGraphqlQuery(poolId, poolStartedAt),
   })
 
-  console.log('GraphQL response data:', data)
-
   return mapValues(
     mapKeys(data, (_, key) => key.slice(1)),
     value => BigNumber.from(value[0]?.totalStaked || 0),
@@ -28,61 +25,38 @@ export async function getChartData(
 function _generateTotalStakedPerDayGraphqlQuery(
   poolId: number,
   poolStartedAt: BigNumber,
-  month: number,
 ) {
-  const REQUEST_PATTERN = (date: number, timestamp: number) => `
-    d${date}: poolInteractions(
-        first: 1,
-        orderDirection: desc,
-        where: { timestamp_lte: ${timestamp}, pool: "${hexlify(poolId)}" },
+  const REQUEST_PATTERN = `d{{date}}:
+    poolInteractions(
+        first: 1
+        orderDirection: desc
+        where: {timestamp_lte: "{{timestamp}}", pool: "${hexlify(poolId)}"}
         orderBy: timestamp
       ) {
         totalStaked
       }`
 
-  const monthTime = new Time(String(month), 'M')
   const currentTime = new Time()
   const poolStartedAtTime = new Time(poolStartedAt.toNumber())
 
-  let startDate: number
-  let endDate: number
-
-  if (currentTime.isBefore(poolStartedAtTime)) {
-    // If the current time is before the pool start date
-    startDate = monthTime.isSame(poolStartedAtTime, 'month') ? poolStartedAtTime.get('date') : 1
-    endDate = monthTime.isSame(poolStartedAtTime, 'month') ? poolStartedAtTime.get('date') : monthTime.dayjs.daysInMonth()
-  } else {
-    // If the pool has already started
-    startDate = monthTime.isSame(poolStartedAtTime, 'month') ? poolStartedAtTime.get('date') : 1
-    endDate = monthTime.isSame(currentTime, 'month') ? currentTime.get('date') : monthTime.dayjs.daysInMonth()
-  }
-
-  console.log('startDate:', startDate)
-  console.log('endDate:', endDate)
+  let startDateTimestamp = poolStartedAtTime.timestamp
+  const endDateTimestamp = currentTime.timestamp
 
   const requests = []
-  for (let date = startDate; date <= endDate; date++) {
-    let timestamp
-    if (date === startDate) {
-      // For the first day, set timestamp to the end of the day (12:00 AM GMT next day)
-      timestamp = poolStartedAtTime.timestamp + (24 * 60 * 60) - (poolStartedAtTime.timestamp % ONE_DAY_TIMESTAMP)
-    } else {
-      // For subsequent days, use 12:00 AM GMT
-      timestamp = poolStartedAtTime.timestamp + (date - startDate) * ONE_DAY_TIMESTAMP
-    }
 
-    console.log(`Generating request for date ${date} with timestamp ${timestamp}`)
+  while (startDateTimestamp <= endDateTimestamp) {
+    const date = Math.floor(startDateTimestamp / ONE_DAY_TIMESTAMP)
+    const timestamp = startDateTimestamp + ONE_DAY_TIMESTAMP - (startDateTimestamp % ONE_DAY_TIMESTAMP)
+
+    const request = REQUEST_PATTERN
+      .replace('{{date}}', date.toString())
+      .replace('{{timestamp}}', timestamp.toString())
 
-    const request = REQUEST_PATTERN(date, timestamp)
     requests.push(request)
-    console.log('Request added:', request)
+    startDateTimestamp += ONE_DAY_TIMESTAMP
   }
 
-  const query = gql`
+  return gql`
     ${'{\n' + requests.join('\n') + '\n}'}
   `
-
-  console.log('Generated GraphQL query:', query)
-
-  return query
 }
diff --git a/src/common/InfoDashboard/index.vue b/src/common/InfoDashboard/index.vue
@@ -13,7 +13,6 @@
               {{ $t('info-dashboard.header-subtitle') }}
             </p>
           </div>
-          <select-field v-model="selectedMonth" :value-options="monthOptions" />
         </div>
         <div class="info-dashboard__app-chart-wrp">
           <app-chart
@@ -63,15 +62,9 @@
 
 <script lang="ts" setup>
 import { useI18n } from '@/composables'
-import { SelectField } from '@/fields'
 import { ErrorHandler } from '@/helpers'
 import { useWeb3ProvidersStore } from '@/store'
-import type {
-  ChartConfig,
-  Erc1967ProxyType,
-  FieldOption,
-  InfoDashboardType,
-} from '@/types'
+import type { ChartConfig, Erc1967ProxyType, InfoDashboardType } from '@/types'
 import { Time, formatEther } from '@/utils'
 import { onMounted, reactive, ref, watch } from 'vue'
 import { CHART_CONFIG } from './const'
@@ -97,36 +90,26 @@ const { t } = useI18n()
 
 const web3ProvidersStore = useWeb3ProvidersStore()
 
-const monthOptions: FieldOption<number>[] = [
-  {
-    title: t('months.june'),
-    value: 6,
-  },
-]
-
-const selectedMonth = ref(monthOptions[monthOptions.length - 1])
-
 const isChartDataUpdating = ref(false)
 
 const chartConfig = reactive<ChartConfig>({ ...CHART_CONFIG })
 
-const updateChartData = async (month: number) => {
-  if (!props.poolData) throw new Error('poolData unavailable')
+const ONE_DAY_TIMESTAMP = 24 * 60 * 60
 
+const updateChartData = async () => {
   isChartDataUpdating.value = true
 
   try {
-    const chartData = await getChartData(
-      props.poolId,
-      props.poolData.payoutStart,
-      month,
-    )
+    if (!props.poolData) throw new Error('poolData unavailable')
 
-    const monthTime = new Time(month.toString(), 'M')
+    const chartData = await getChartData(props.poolId, props.poolData.payoutStart)
+
+    chartConfig.data.labels = Object.keys(chartData).map(key => {
+      const timestamp = (Number(key) + 1) * ONE_DAY_TIMESTAMP
+      const date = new Date(timestamp * 1000)
+      return new Time(date).format('MMMM DD')
+    })
 
-    chartConfig.data.labels = Object.keys(chartData).map(
-      day => `${monthTime.format('MMMM')} ${day}`,
-    )
     chartConfig.data.datasets[0].data = Object.values(chartData).map(amount =>
       Math.ceil(Number(formatEther(amount))),
     )
@@ -138,14 +121,23 @@ const updateChartData = async (month: number) => {
 }
 
 onMounted(() => {
-  if (props.poolData) updateChartData(selectedMonth.value.value)
+  if (props.poolData) {
+    updateChartData()
+  }
 })
 
-watch([selectedMonth, () => props.poolData], async ([newSelectedMonth]) => {
-  await updateChartData(newSelectedMonth.value)
-})
+watch(
+  () => props.poolData,
+  (newPoolData) => {
+    if (newPoolData) {
+      updateChartData()
+    }
+  }
+)
 </script>
 
+
+
 <style lang="scss" scoped>
 .info-dashboard {
   padding: toRem(24) toRem(20) toRem(30);