diff --git a/src/common/InfoDashboard/helpers.ts b/src/common/InfoDashboard/helpers.ts index 3e29a60..8f12c81 100644 --- 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 { type QueryData = Record<`d${number}`, { totalStaked: string }[]> const { data } = await config.apolloClient.query({ - 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 index 2aba340..9f29f55 100644 --- a/src/common/InfoDashboard/index.vue +++ b/src/common/InfoDashboard/index.vue @@ -13,7 +13,6 @@ {{ $t('info-dashboard.header-subtitle') }}

-
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[] = [ - { - title: t('months.june'), - value: 6, - }, -] - -const selectedMonth = ref(monthOptions[monthOptions.length - 1]) - const isChartDataUpdating = ref(false) const chartConfig = reactive({ ...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() + } + } +) + +