From 4642e29afc4432b2f86a6c6cc0f8af23addf35e5 Mon Sep 17 00:00:00 2001 From: Michal Zielenkiewicz Date: Tue, 16 Jan 2024 12:54:35 +0100 Subject: [PATCH 1/4] Decouple TransactionStats components from ParaTimes --- .../CardHeaderWithResponsiveActions/index.tsx} | 0 .../DurationPills.tsx => components/DurationPills/index.tsx} | 0 .../TransactionsStats/index.tsx} | 4 ++-- src/app/pages/ParatimeDashboardPage/TotalTransactions.tsx | 4 ++-- src/app/pages/ParatimeDashboardPage/index.tsx | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) rename src/app/{pages/ParatimeDashboardPage/CardHeaderWithResponsiveActions.tsx => components/CardHeaderWithResponsiveActions/index.tsx} (100%) rename src/app/{pages/ParatimeDashboardPage/DurationPills.tsx => components/DurationPills/index.tsx} (100%) rename src/app/{pages/ParatimeDashboardPage/TransactionsStats.tsx => components/TransactionsStats/index.tsx} (94%) diff --git a/src/app/pages/ParatimeDashboardPage/CardHeaderWithResponsiveActions.tsx b/src/app/components/CardHeaderWithResponsiveActions/index.tsx similarity index 100% rename from src/app/pages/ParatimeDashboardPage/CardHeaderWithResponsiveActions.tsx rename to src/app/components/CardHeaderWithResponsiveActions/index.tsx diff --git a/src/app/pages/ParatimeDashboardPage/DurationPills.tsx b/src/app/components/DurationPills/index.tsx similarity index 100% rename from src/app/pages/ParatimeDashboardPage/DurationPills.tsx rename to src/app/components/DurationPills/index.tsx diff --git a/src/app/pages/ParatimeDashboardPage/TransactionsStats.tsx b/src/app/components/TransactionsStats/index.tsx similarity index 94% rename from src/app/pages/ParatimeDashboardPage/TransactionsStats.tsx rename to src/app/components/TransactionsStats/index.tsx index 92e917280..8825a5469 100644 --- a/src/app/pages/ParatimeDashboardPage/TransactionsStats.tsx +++ b/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' diff --git a/src/app/pages/ParatimeDashboardPage/TotalTransactions.tsx b/src/app/pages/ParatimeDashboardPage/TotalTransactions.tsx index 14ef2f364..b992bf79d 100644 --- a/src/app/pages/ParatimeDashboardPage/TotalTransactions.tsx +++ b/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' diff --git a/src/app/pages/ParatimeDashboardPage/index.tsx b/src/app/pages/ParatimeDashboardPage/index.tsx index fc419ac57..b99088f1c 100644 --- a/src/app/pages/ParatimeDashboardPage/index.tsx +++ b/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' From 017d59660990830e56103cdad1bec28123473162 Mon Sep 17 00:00:00 2001 From: Michal Zielenkiewicz Date: Tue, 16 Jan 2024 12:54:53 +0100 Subject: [PATCH 2/4] Add TransactionStats card to Consensus dashboard --- .changelog/1154.trivial.md | 1 + src/app/pages/ConsensusDashboardPage/index.tsx | 4 ++++ 2 files changed, 5 insertions(+) create mode 100644 .changelog/1154.trivial.md diff --git a/.changelog/1154.trivial.md b/.changelog/1154.trivial.md new file mode 100644 index 000000000..e7324a81a --- /dev/null +++ b/.changelog/1154.trivial.md @@ -0,0 +1 @@ +Add transaction charts to Consensus dashboard diff --git a/src/app/pages/ConsensusDashboardPage/index.tsx b/src/app/pages/ConsensusDashboardPage/index.tsx index c55330436..8d1a36e12 100644 --- a/src/app/pages/ConsensusDashboardPage/index.tsx +++ b/src/app/pages/ConsensusDashboardPage/index.tsx @@ -2,14 +2,18 @@ import { FC } from 'react' import Divider from '@mui/material/Divider' import { PageLayout } from '../../components/PageLayout' import { useScreenSize } from '../../hooks/useScreensize' +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 ( + ) From 236239dc507bde6aab3af1254a7545378ba9cb13 Mon Sep 17 00:00:00 2001 From: Michal Zielenkiewicz Date: Thu, 18 Jan 2024 09:37:18 +0100 Subject: [PATCH 3/4] Add TotalTransactions card to Consensus dashboard --- src/app/pages/ConsensusDashboardPage/index.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/app/pages/ConsensusDashboardPage/index.tsx b/src/app/pages/ConsensusDashboardPage/index.tsx index 8d1a36e12..a8d7a976b 100644 --- a/src/app/pages/ConsensusDashboardPage/index.tsx +++ b/src/app/pages/ConsensusDashboardPage/index.tsx @@ -1,7 +1,9 @@ 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' @@ -13,6 +15,11 @@ export const ConsensusDashboardPage: FC = () => { return ( + + + + + From 117d73e2fdca6836fcdec46fb459125ca6e92749 Mon Sep 17 00:00:00 2001 From: Michal Zielenkiewicz Date: Thu, 18 Jan 2024 09:40:15 +0100 Subject: [PATCH 4/4] Rename chart label from all time to year --- src/app/components/DurationPills/index.tsx | 4 ++-- src/app/components/Snapshots/DurationSelect/index.tsx | 4 ++-- src/app/components/TransactionsStats/index.tsx | 2 +- src/app/pages/ParatimeDashboardPage/ActiveAccounts.tsx | 6 +++--- .../pages/ParatimeDashboardPage/TransactionsChartCard.tsx | 2 +- src/app/utils/chart-utils.ts | 6 +++--- src/locales/en/translation.json | 3 ++- 7 files changed, 14 insertions(+), 13 deletions(-) diff --git a/src/app/components/DurationPills/index.tsx b/src/app/components/DurationPills/index.tsx index 65b4a7558..e0ec539e6 100644 --- a/src/app/components/DurationPills/index.tsx +++ b/src/app/components/DurationPills/index.tsx @@ -32,8 +32,8 @@ export const DurationPills: FC = ({ handleChange, value }) = value: ChartDuration.MONTH, }, { - label: t('chartDuration.allTime'), - value: ChartDuration.ALL_TIME, + label: t('chartDuration.year'), + value: ChartDuration.YEAR, }, ] diff --git a/src/app/components/Snapshots/DurationSelect/index.tsx b/src/app/components/Snapshots/DurationSelect/index.tsx index b3f5faecf..2ac3cb84b 100644 --- a/src/app/components/Snapshots/DurationSelect/index.tsx +++ b/src/app/components/Snapshots/DurationSelect/index.tsx @@ -30,8 +30,8 @@ const DurationSelectCmp: FC = ({ defaultValue = ChartDurati value: ChartDuration.MONTH, }, { - label: t('chartDuration.allTime'), - value: ChartDuration.ALL_TIME, + label: t('chartDuration.pastYear'), + value: ChartDuration.YEAR, }, ] diff --git a/src/app/components/TransactionsStats/index.tsx b/src/app/components/TransactionsStats/index.tsx index 8825a5469..5edb2dccd 100644 --- a/src/app/components/TransactionsStats/index.tsx +++ b/src/app/components/TransactionsStats/index.tsx @@ -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 diff --git a/src/app/pages/ParatimeDashboardPage/ActiveAccounts.tsx b/src/app/pages/ParatimeDashboardPage/ActiveAccounts.tsx index 51a2258cd..7170bc711 100644 --- a/src/app/pages/ParatimeDashboardPage/ActiveAccounts.tsx +++ b/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.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 = ({ scope, chartDuration }) => { diff --git a/src/app/pages/ParatimeDashboardPage/TransactionsChartCard.tsx b/src/app/pages/ParatimeDashboardPage/TransactionsChartCard.tsx index 787f9725f..9d262cac5 100644 --- a/src/app/pages/ParatimeDashboardPage/TransactionsChartCard.tsx +++ b/src/app/pages/ParatimeDashboardPage/TransactionsChartCard.tsx @@ -20,7 +20,7 @@ const getLabels = (t: TFunction): Record => ({ [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 { diff --git a/src/app/utils/chart-utils.ts b/src/app/utils/chart-utils.ts index 998ebc777..950dc6a4e 100644 --- a/src/app/utils/chart-utils.ts +++ b/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 diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 0e473d60d..10a820715 100644 --- a/src/locales/en/translation.json +++ b/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",