Merge pull request #1154 from oasisprotocol/mz/consensusTransactionsS…

…tats

Add transaction charts cards to Consensus dashboard

.changelog/1154.trivial.md

@@ -0,0 +1 @@
+Add transaction charts to Consensus dashboard

src/app/pages/ParatimeDashboardPage/DurationPills.tsx → src/app/components/DurationPills/index.tsx

@@ -32,8 +32,8 @@ export const DurationPills: FC<DurationPillsProps> = ({ handleChange, value }) =
       value: ChartDuration.MONTH,
     },
     {
-      label: t('chartDuration.allTime'),
-      value: ChartDuration.ALL_TIME,
+      label: t('chartDuration.year'),
+      value: ChartDuration.YEAR,
     },
   ]
 

src/app/components/Snapshots/DurationSelect/index.tsx

@@ -30,8 +30,8 @@ const DurationSelectCmp: FC<DurationSelectProps> = ({ defaultValue = ChartDurati
       value: ChartDuration.MONTH,
     },
     {
-      label: t('chartDuration.allTime'),
-      value: ChartDuration.ALL_TIME,
+      label: t('chartDuration.pastYear'),
+      value: ChartDuration.YEAR,
     },
   ]
 

src/app/pages/ParatimeDashboardPage/TransactionsStats.tsx → src/app/components/TransactionsStats/index.tsx

@@ -9,8 +9,8 @@ import {
   durationToQueryParams,
   getMonthlyWindowsDailyAverage,
 } from '../../utils/chart-utils'
-import { DurationPills } from './DurationPills'
-import { CardHeaderWithResponsiveActions } from './CardHeaderWithResponsiveActions'
+import { DurationPills } from '../../components/DurationPills'
+import { CardHeaderWithResponsiveActions } from '../../components/CardHeaderWithResponsiveActions'
 import { ChartDuration } from '../../utils/chart-utils'
 import { useScreenSize } from '../../hooks/useScreensize'
 import { SearchScope } from '../../../types/searchScope'
@@ -27,7 +27,7 @@ export const TransactionsStats: FC<{ scope: SearchScope }> = ({ scope }) => {
       staleTime: chartUseQueryStaleTimeMs,
     },
   })
-  const allTime = dailyVolumeQuery.isFetched && chartDuration === ChartDuration.ALL_TIME
+  const allTime = dailyVolumeQuery.isFetched && chartDuration === ChartDuration.YEAR
   const windows = allTime
     ? getMonthlyWindowsDailyAverage(dailyVolumeQuery.data?.data.windows)
     : dailyVolumeQuery.data?.data.windows

src/app/pages/ConsensusDashboardPage/index.tsx

@@ -1,15 +1,26 @@
 import { FC } from 'react'
+import Grid from '@mui/material/Grid'
 import Divider from '@mui/material/Divider'
 import { PageLayout } from '../../components/PageLayout'
 import { useScreenSize } from '../../hooks/useScreensize'
+import { TotalTransactions } from '../ParatimeDashboardPage/TotalTransactions'
+import { TransactionsStats } from '../../components/TransactionsStats'
 import { Social } from '../../components/Social'
+import { useRequiredScopeParam } from '../../hooks/useScopeParam'
 
 export const ConsensusDashboardPage: FC = () => {
   const { isMobile } = useScreenSize()
+  const scope = useRequiredScopeParam()
 
   return (
     <PageLayout>
       <Divider variant="layout" sx={{ mt: isMobile ? 4 : 0 }} />
+      <Grid container spacing={4}>
+        <Grid item xs={12} md={6}>
+          <TotalTransactions scope={scope} />
+        </Grid>
+      </Grid>
+      <TransactionsStats scope={scope} />
       <Social />
     </PageLayout>
   )

src/app/pages/ParatimeDashboardPage/ActiveAccounts.tsx

@@ -20,7 +20,7 @@ export const getActiveAccountsWindows = (duration: ChartDuration, windows: Windo
   switch (duration) {
     case ChartDuration.TODAY:
       return filterHourlyActiveAccounts(windows)
-    case ChartDuration.ALL_TIME:
+    case ChartDuration.YEAR:
       return sumWindowsByStartDuration(windows, 'active_accounts', 'window_end', startOfMonth)
     default:
       return windows
@@ -39,7 +39,7 @@ export const getChartLabelFormatParams = (duration: ChartDuration) => {
           minute: 'numeric',
         } satisfies Intl.DateTimeFormatOptions,
       }
-    case ChartDuration.ALL_TIME:
+    case ChartDuration.YEAR:
       return {
         timestamp: {
           year: 'numeric',
@@ -60,7 +60,7 @@ const getLabels = (t: TFunction): Record<ChartDuration, string> => ({
   [ChartDuration.TODAY]: t('chartDuration.lastHour'),
   [ChartDuration.WEEK]: t('chartDuration.lastDay'),
   [ChartDuration.MONTH]: t('chartDuration.lastDay'),
-  [ChartDuration.ALL_TIME]: t('chartDuration.lastMonth'),
+  [ChartDuration.YEAR]: t('chartDuration.lastMonth'),
 })
 
 export const ActiveAccounts: FC<ActiveAccountsProps> = ({ scope, chartDuration }) => {

src/app/pages/ParatimeDashboardPage/TotalTransactions.tsx

@@ -5,8 +5,8 @@ import CardContent from '@mui/material/CardContent'
 import { LineChart } from '../../components/charts/LineChart'
 import { useGetLayerStatsTxVolume } from '../../../oasis-nexus/api'
 import { chartUseQueryStaleTimeMs, durationToQueryParams } from '../../utils/chart-utils'
-import { DurationPills } from './DurationPills'
-import { CardHeaderWithResponsiveActions } from './CardHeaderWithResponsiveActions'
+import { DurationPills } from '../../components/DurationPills'
+import { CardHeaderWithResponsiveActions } from '..//../components/CardHeaderWithResponsiveActions'
 import { ChartDuration, cumulativeSum } from '../../utils/chart-utils'
 import { useScreenSize } from '../../hooks/useScreensize'
 import { SearchScope } from '../../../types/searchScope'

src/app/pages/ParatimeDashboardPage/TransactionsChartCard.tsx

@@ -20,7 +20,7 @@ const getLabels = (t: TFunction): Record<ChartDuration, string> => ({
   [ChartDuration.TODAY]: t('chartDuration.lastHour'),
   [ChartDuration.WEEK]: t('chartDuration.lastDay'),
   [ChartDuration.MONTH]: t('chartDuration.lastDay'),
-  [ChartDuration.ALL_TIME]: t('chartDuration.lastDay'),
+  [ChartDuration.YEAR]: t('chartDuration.lastDay'),
 })
 
 interface TransactionsChartCardProps {

src/app/pages/ParatimeDashboardPage/index.tsx

@@ -6,7 +6,7 @@ import { Social } from '../../components/Social'
 import { LearningMaterials } from './LearningMaterials'
 import { LatestBlocks } from './LatestBlocks'
 import { LatestTransactions } from './LatestTransactions'
-import { TransactionsStats } from './TransactionsStats'
+import { TransactionsStats } from '../../components/TransactionsStats'
 import { TotalTransactions } from './TotalTransactions'
 import { PageLayout } from '../../components/PageLayout'
 import { ParaTimeSnapshot } from './ParaTimeSnapshot'

src/app/utils/chart-utils.ts

@@ -11,7 +11,7 @@ export enum ChartDuration {
   TODAY = 'TODAY',
   WEEK = 'WEEK',
   MONTH = 'MONTH',
-  ALL_TIME = 'ALL_TIME',
+  YEAR = 'YEAR',
 }
 
 export const dailyLimitWithoutBuffer = (60 / 5) * 24 // full day for 5 minutes windows
@@ -43,7 +43,7 @@ export const durationToQueryParams = {
     limit: 30, // Defined as 30 days, should be more dynamic depending on the month
     offset: 1, // offset to skip the first day
   },
-  [ChartDuration.ALL_TIME]: {
+  [ChartDuration.YEAR]: {
     window_size_seconds: oneDayWindowSize,
     window_step_seconds: oneDayWindowSize,
     limit: 365, // Defined as a full year
@@ -55,7 +55,7 @@ export const chartDurationToDaysMap = {
   [ChartDuration.TODAY]: 1,
   [ChartDuration.WEEK]: 7,
   [ChartDuration.MONTH]: 30,
-  [ChartDuration.ALL_TIME]: 365,
+  [ChartDuration.YEAR]: 365,
 }
 
 export const chartUseQueryStaleTimeMs = durationToQueryParams[ChartDuration.TODAY].window_size_seconds * 1000

src/locales/en/translation.json

@@ -348,7 +348,8 @@
     "pastDay": "Past day",
     "pastWeek": "Past week",
     "pastMonth": "Past month",
-    "allTime": "All time",
+    "pastYear": "Past year",
+    "year": "Year",
     "week": "Week",
     "month": "Month",
     "lastHour": "Last hour",