Daily transaction chart

oasisprotocol · Mar 10, 2023 · c9ff474 · c9ff474
1 parent 121fee9
commit c9ff474
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 4 deletions.
diff --git a/src/app/pages/DashboardPage/TransactionsChartCard.tsx b/src/app/pages/DashboardPage/TransactionsChartCard.tsx
@@ -1,6 +1,11 @@
 import { useTranslation } from 'react-i18next'
 import { Layer, useGetLayerStatsTxVolume } from '../../../oasis-indexer/api'
-import { ChartDuration, chartUseQueryStaleTimeMs, durationToQueryParams } from '../../utils/chart-utils'
+import {
+  ChartDuration,
+  chartUseQueryStaleTimeMs,
+  durationToQueryParams,
+  sumBucketsByChucks,
+} from '../../utils/chart-utils'
 import { LineChart } from '../../components/charts/LineChart'
 import { useTheme } from '@mui/material/styles'
 import useMediaQuery from '@mui/material/useMediaQuery'
@@ -17,19 +22,36 @@ const TransactionsChartCardCmp: FC<TransactionsChartCardProps> = ({ chartDuratio
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
   const statsParams = durationToQueryParams[chartDuration]
-  const { data } = useGetLayerStatsTxVolume(Layer.emerald, statsParams, {
+  const { data, isFetched } = useGetLayerStatsTxVolume(Layer.emerald, statsParams, {
     query: { staleTime: chartUseQueryStaleTimeMs },
   })
 
-  const lineChartData = data?.data.buckets.map(bucket => {
+  const isDailyChart = isFetched && chartDuration === ChartDuration.TODAY
+
+  const buckets = data?.data.buckets.map(bucket => {
     return {
       bucket_start: bucket.bucket_start,
       volume_per_second: bucket.tx_volume / statsParams.bucket_size_seconds,
     }
   })
-
   const totalTransactions = data?.data.buckets.reduce((acc, curr) => acc + curr.tx_volume, 0) ?? 0
 
+  const lineChartData = isDailyChart
+    ? sumBucketsByChucks(buckets, 'volume_per_second', 'bucket_start', 12)
+    : buckets
+
+  const formatParams = isDailyChart
+    ? {
+        timestamp: {
+          year: 'numeric',
+          month: 'numeric',
+          day: 'numeric',
+          hour: 'numeric',
+          minute: 'numeric',
+        } satisfies Intl.DateTimeFormatOptions,
+      }
+    : undefined
+
   return (
     <SnapshotCard
       title={t('common.transactions')}
@@ -55,6 +77,7 @@ const TransactionsChartCardCmp: FC<TransactionsChartCardProps> = ({ chartDuratio
             label: (value: string) =>
               t('common.formattedDateTime', {
                 timestamp: new Date(value),
+                formatParams,
               }),
           }}
         />

diff --git a/src/app/utils/chart-utils.ts b/src/app/utils/chart-utils.ts
@@ -69,3 +69,38 @@ export const filterHourlyActiveAccounts = (
 ): ActiveAccounts[] | undefined => {
   return windows?.filter((value, index) => index % 12 === 0)
 }
+
+export const sumBucketsByChucks = <T>(
+  buckets: T[] | undefined,
+  sumKey: keyof T,
+  dateKey: keyof T,
+  numOfChunks: number,
+) => {
+  if (!buckets) {
+    return []
+  }
+
+  const chunkArray = buckets.reduce(
+    (accArray, item, index) => {
+      const chunkIndex = Math.floor(index / numOfChunks)
+
+      if (!accArray[chunkIndex]) {
+        accArray[chunkIndex] = []
+      }
+
+      accArray[chunkIndex].push(item)
+
+      return accArray
+    },
+    [[] as T[]],
+  )
+
+  return chunkArray
+    .map(groupedBy => {
+      return {
+        [sumKey]: groupedBy.reduce((acc, curr) => acc + (curr[sumKey] as number), 0),
+        [dateKey]: groupedBy[0][dateKey],
+      }
+    })
+    .flat()
+}