diff --git a/src/app/pages/ParatimeDashboardPage/ActiveAccounts.tsx b/src/app/pages/ParatimeDashboardPage/ActiveAccounts.tsx index 8b7b7db99..a9918b230 100644 --- a/src/app/pages/ParatimeDashboardPage/ActiveAccounts.tsx +++ b/src/app/pages/ParatimeDashboardPage/ActiveAccounts.tsx @@ -12,7 +12,7 @@ import { dailyLimitWithoutBuffer, durationToQueryParams, filterHourlyActiveAccounts, - sumBucketsByStartDuration, + sumWindowsByStartDuration, } from '../../utils/chart-utils' import { SearchScope } from '../../../types/searchScope' @@ -21,7 +21,7 @@ export const getActiveAccountsWindows = (duration: ChartDuration, windows: Windo case ChartDuration.TODAY: return filterHourlyActiveAccounts(windows) case ChartDuration.ALL_TIME: - return sumBucketsByStartDuration(windows, 'active_accounts', 'window_end', startOfMonth) + return sumWindowsByStartDuration(windows, 'active_accounts', 'window_end', startOfMonth) default: return windows } @@ -68,8 +68,8 @@ export const ActiveAccounts: FC = ({ scope, chartDuration } const labels = getLabels(t) const { limit, window_step_seconds } = { ...durationToQueryParams[chartDuration], - // By default we fetch data with additional buckets buffer, but it does not apply to active accounts. - // Active accounts daily buckets are overlapping, so we cannot sum buckets like in other daily charts. + // By default we fetch data with additional buffer, but it does not apply to active accounts. + // Active accounts daily windows are overlapping, so we cannot sum windows like in other daily charts. limit: chartDuration === ChartDuration.TODAY ? dailyLimitWithoutBuffer diff --git a/src/app/pages/ParatimeDashboardPage/TotalTransactions.tsx b/src/app/pages/ParatimeDashboardPage/TotalTransactions.tsx index 2da02578a..14ef2f364 100644 --- a/src/app/pages/ParatimeDashboardPage/TotalTransactions.tsx +++ b/src/app/pages/ParatimeDashboardPage/TotalTransactions.tsx @@ -27,7 +27,7 @@ export const TotalTransactions: FC<{ scope: SearchScope }> = ({ scope }) => { }, }) - const buckets = dailyVolumeQuery.data?.data.windows + const windows = dailyVolumeQuery.data?.data.windows ? cumulativeSum(dailyVolumeQuery.data?.data.windows.slice().reverse(), 'tx_volume') : undefined @@ -40,13 +40,13 @@ export const TotalTransactions: FC<{ scope: SearchScope }> = ({ scope }) => { title={t('totalTransactions.header')} /> - {buckets && ( + {windows && ( = ({ scope, chart }) const isDailyChart = isFetched && chartDuration === ChartDuration.TODAY - const buckets = data?.data?.windows + const windows = data?.data?.windows const lineChartData = isDailyChart - ? sumBucketsByStartDuration(buckets, 'tx_volume', 'window_end', startOfHour) - : buckets + ? sumWindowsByStartDuration(windows, 'tx_volume', 'window_end', startOfHour) + : windows const formatParams = isDailyChart ? { timestamp: { diff --git a/src/app/pages/ParatimeDashboardPage/TransactionsStats.tsx b/src/app/pages/ParatimeDashboardPage/TransactionsStats.tsx index 3e743f811..92e917280 100644 --- a/src/app/pages/ParatimeDashboardPage/TransactionsStats.tsx +++ b/src/app/pages/ParatimeDashboardPage/TransactionsStats.tsx @@ -7,7 +7,7 @@ import { useGetLayerStatsTxVolume } from '../../../oasis-nexus/api' import { chartUseQueryStaleTimeMs, durationToQueryParams, - getMonthlyBucketsDailyAverage, + getMonthlyWindowsDailyAverage, } from '../../utils/chart-utils' import { DurationPills } from './DurationPills' import { CardHeaderWithResponsiveActions } from './CardHeaderWithResponsiveActions' @@ -28,8 +28,8 @@ export const TransactionsStats: FC<{ scope: SearchScope }> = ({ scope }) => { }, }) const allTime = dailyVolumeQuery.isFetched && chartDuration === ChartDuration.ALL_TIME - const buckets = allTime - ? getMonthlyBucketsDailyAverage(dailyVolumeQuery.data?.data.windows) + const windows = allTime + ? getMonthlyWindowsDailyAverage(dailyVolumeQuery.data?.data.windows) : dailyVolumeQuery.data?.data.windows const formatParams = allTime ? { @@ -49,12 +49,12 @@ export const TransactionsStats: FC<{ scope: SearchScope }> = ({ scope }) => { title={t('transactionStats.header')} /> - {buckets && ( + {windows && ( t('transactionStats.perDay', { value: value.toLocaleString() }), diff --git a/src/app/utils/chart-utils.ts b/src/app/utils/chart-utils.ts index 439ccbca7..02aa67943 100644 --- a/src/app/utils/chart-utils.ts +++ b/src/app/utils/chart-utils.ts @@ -14,7 +14,7 @@ export enum ChartDuration { ALL_TIME = 'ALL_TIME', } -export const dailyLimitWithoutBuffer = (60 / 5) * 24 // full day for 5 minutes buckets, +export const dailyLimitWithoutBuffer = (60 / 5) * 24 // full day for 5 minutes windows /* window_size_seconds refers to the number of data points in one chunk @@ -28,7 +28,7 @@ export const durationToQueryParams = { window_step_seconds: fiveMinutesWindowSize, limit: dailyLimitWithoutBuffer + - // daily data needs additional 2 buckets to make sure we have at least full 24 buckets + // daily data needs additional 2 windows to make sure we have at least full 24 windows (60 / 5) * 2, }, [ChartDuration.WEEK]: { @@ -60,11 +60,11 @@ export const chartDurationToDaysMap = { export const chartUseQueryStaleTimeMs = durationToQueryParams[ChartDuration.TODAY].window_size_seconds * 1000 -type Buckets = TxVolume[] | undefined +type Windows = TxVolume[] | undefined type MonthlyTxVolume = TxVolume & { numberOfItemsInGroup: number } -const groupWindowsByMonth = (buckets: Buckets) => { - return buckets?.reduce((acc: MonthlyTxVolume[], cur, index, arr) => { +const groupWindowsByMonth = (windows: Windows) => { + return windows?.reduce((acc: MonthlyTxVolume[], cur, index, arr) => { if (index > 0 && isSameMonth(new Date(cur.window_end), new Date(arr[index - 1].window_end))) { acc[acc.length - 1].tx_volume += cur.tx_volume acc[acc.length - 1].numberOfItemsInGroup += 1 @@ -79,10 +79,10 @@ const groupWindowsByMonth = (buckets: Buckets) => { }, []) } -export const getMonthlyBucketsDailyAverage = (buckets: Buckets): Buckets => { - const monthlyBuckets = groupWindowsByMonth(buckets) +export const getMonthlyWindowsDailyAverage = (windows: Windows): Windows => { + const monthlyWindows = groupWindowsByMonth(windows) - return monthlyBuckets?.map(item => ({ + return monthlyWindows?.map(item => ({ ...item, tx_volume: Math.round((item.tx_volume / item.numberOfItemsInGroup) * 100) / 100, })) @@ -113,21 +113,21 @@ type StringOnly = { [key in keyof T as T[key] extends string | undefined ? key : never]: T[key] } -export const sumBucketsByStartDuration = < +export const sumWindowsByStartDuration = < T extends NumberOnly & StringOnly, N extends keyof NumberOnly, S extends keyof StringOnly, >( - buckets: T[] | undefined, + windows: T[] | undefined, sumKey: N, dateKey: S, startDurationFn: typeof startOfHour | typeof startOfDay | typeof startOfMonth, ) => { - if (!buckets) { + if (!windows) { return [] } - const durationMap = buckets.reduce( + const durationMap = windows.reduce( (accMap, item) => { const key = startDurationFn(new Date(item[dateKey])).toISOString() @@ -139,7 +139,7 @@ export const sumBucketsByStartDuration = < {} as { [key: string]: number }, ) - // For daily charts we want to skip the first and last buckets. + // For daily charts we want to skip the first and last windows. // They are not full and we want to avoid chart drop. const filteredDurationMap = startDurationFn === startOfHour