Skip to content

Commit

Permalink
Follow new API naming convension
Browse files Browse the repository at this point in the history
  • Loading branch information
buberdds committed Aug 23, 2023
1 parent 05105c8 commit cbf41c3
Show file tree
Hide file tree
Showing 5 changed files with 29 additions and 29 deletions.
8 changes: 4 additions & 4 deletions src/app/pages/ParatimeDashboardPage/ActiveAccounts.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
dailyLimitWithoutBuffer,
durationToQueryParams,
filterHourlyActiveAccounts,
sumBucketsByStartDuration,
sumWindowsByStartDuration,
} from '../../utils/chart-utils'
import { SearchScope } from '../../../types/searchScope'

Expand All @@ -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
}
Expand Down Expand Up @@ -68,8 +68,8 @@ export const ActiveAccounts: FC<ActiveAccountsProps> = ({ 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
Expand Down
6 changes: 3 additions & 3 deletions src/app/pages/ParatimeDashboardPage/TotalTransactions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -40,13 +40,13 @@ export const TotalTransactions: FC<{ scope: SearchScope }> = ({ scope }) => {
title={t('totalTransactions.header')}
/>
<CardContent sx={{ height: 450 }}>
{buckets && (
{windows && (
<LineChart
tooltipActiveDotRadius={9}
cartesianGrid
strokeWidth={3}
dataKey="tx_volume"
data={buckets}
data={windows}
margin={{ bottom: 16, top: isMobile ? 0 : 16 }}
tickMargin={16}
withLabels
Expand Down
8 changes: 4 additions & 4 deletions src/app/pages/ParatimeDashboardPage/TransactionsChartCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
ChartDuration,
chartUseQueryStaleTimeMs,
durationToQueryParams,
sumBucketsByStartDuration,
sumWindowsByStartDuration,
} from '../../utils/chart-utils'
import { LineChart } from '../../components/charts/LineChart'
import { useScreenSize } from '../../hooks/useScreensize'
Expand Down Expand Up @@ -38,10 +38,10 @@ const TransactionsChartCardCmp: FC<TransactionsChartCardProps> = ({ 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: {
Expand Down
10 changes: 5 additions & 5 deletions src/app/pages/ParatimeDashboardPage/TransactionsStats.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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
? {
Expand All @@ -49,12 +49,12 @@ export const TransactionsStats: FC<{ scope: SearchScope }> = ({ scope }) => {
title={t('transactionStats.header')}
/>
<CardContent sx={{ height: 450 }}>
{buckets && (
{windows && (
<BarChart
barSize={chartDuration === ChartDuration.WEEK ? 125 : undefined}
barRadius={chartDuration === ChartDuration.WEEK ? 20 : undefined}
cartesianGrid
data={buckets.slice().reverse()}
data={windows.slice().reverse()}
dataKey="tx_volume"
formatters={{
data: (value: number) => t('transactionStats.perDay', { value: value.toLocaleString() }),
Expand Down
26 changes: 13 additions & 13 deletions src/app/utils/chart-utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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]: {
Expand Down Expand Up @@ -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
Expand All @@ -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,
}))
Expand Down Expand Up @@ -113,21 +113,21 @@ type StringOnly<T> = {
[key in keyof T as T[key] extends string | undefined ? key : never]: T[key]
}

export const sumBucketsByStartDuration = <
export const sumWindowsByStartDuration = <
T extends NumberOnly<any> & StringOnly<any>,
N extends keyof NumberOnly<T>,
S extends keyof StringOnly<T>,
>(
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()

Expand All @@ -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
Expand Down

0 comments on commit cbf41c3

Please sign in to comment.