Skip to content

Commit 454e0c7

Browse files
mois-ilyamois-ilya
committed
feat: add mock statistics data generation for development mode
- Introduced mock statistics data generation in development mode to enhance testing and UI visualization. - Updated environment configuration to enable mock statistics with a new variable `VITE_MOCK_STATS`. - Integrated mock data usage in REST API statistics queries for Liteproxy and Webhooks, allowing for realistic data patterns during development. - Enhanced dashboard components to support new `childrenDirection` prop for flexible layout arrangements. These changes improve the development experience by providing realistic data for testing and visualization without relying on live data.
1 parent 0521bf6 commit 454e0c7

File tree

5 files changed

+61
-35
lines changed

5 files changed

+61
-35
lines changed

‎src/features/tonapi/statistics/ui/DashboardLiteproxyChart.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@ import MetricChartModal from './MetricChartModal';
88

99
interface DashboardLiteproxyChartProps extends BoxProps {
1010
period: TimePeriod;
11+
childrenDirection?: 'row' | 'column';
1112
}
1213

13-
const DashboardLiteproxyChart: FC<DashboardLiteproxyChartProps> = ({ period, ...props }) => {
14+
const DashboardLiteproxyChart: FC<DashboardLiteproxyChartProps> = ({ period, childrenDirection, ...props }) => {
1415
const { colors } = useTheme();
1516
const { data, isLoading, error } = useLiteproxyStats(period);
1617
const { data: selectedLiteproxyTier } = useSelectedLiteproxyTier();
@@ -52,6 +53,7 @@ const DashboardLiteproxyChart: FC<DashboardLiteproxyChartProps> = ({ period, ...
5253
title="Liteproxy Statistics"
5354
onExpand={onOpen}
5455
hasData={hasData}
56+
childrenDirection={childrenDirection}
5557
{...props}
5658
>
5759
<MetricChartContent
@@ -71,8 +73,6 @@ const DashboardLiteproxyChart: FC<DashboardLiteproxyChartProps> = ({ period, ...
7173
error={error}
7274
color={colors.accent.green}
7375
compact={!hasData}
74-
limit={selectedLiteproxyTier?.rps}
75-
limitLabel="Limit"
7676
/>
7777
</MetricGroupCard>
7878
<MetricChartModal
@@ -90,9 +90,7 @@ const DashboardLiteproxyChart: FC<DashboardLiteproxyChartProps> = ({ period, ...
9090
{
9191
title: 'Liteproxy Connections',
9292
data: connectionsData || [],
93-
color: colors.accent.green,
94-
limit: selectedLiteproxyTier?.rps,
95-
limitLabel: 'Limit'
93+
color: colors.accent.green
9694
}
9795
]}
9896
/>

‎src/features/tonapi/statistics/ui/DashboardWebhooksChart.tsx‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { FC } from 'react';
22
import { useDisclosure, BoxProps, useTheme, Center, Text } from '@chakra-ui/react';
3-
import { useWebhooksStatsQuery, mapWebhooksStatsToChartPoints } from 'src/features/tonapi/webhooks/model/queries';
3+
import {
4+
useWebhooksStatsQuery,
5+
mapWebhooksStatsToChartPoints
6+
} from 'src/features/tonapi/webhooks/model/queries';
47
import { useSelectedLiteproxyTier } from 'src/features/tonapi/liteproxy/model/queries';
58
import { TimePeriod } from '../model/queries';
69
import MetricGroupCard from './MetricGroupCard';
@@ -9,17 +12,23 @@ import MetricChartModal from './MetricChartModal';
912

1013
interface DashboardWebhooksChartProps extends BoxProps {
1114
period: TimePeriod;
15+
childrenDirection?: 'row' | 'column';
1216
}
1317

14-
const DashboardWebhooksChart: FC<DashboardWebhooksChartProps> = ({ period, ...props }) => {
18+
const DashboardWebhooksChart: FC<DashboardWebhooksChartProps> = ({
19+
period,
20+
childrenDirection,
21+
...props
22+
}) => {
1523
const { colors } = useTheme();
1624
const { data, isLoading, error } = useWebhooksStatsQuery(period);
1725
const { data: selectedLiteproxyTier } = useSelectedLiteproxyTier();
1826
const { isOpen, onOpen, onClose } = useDisclosure();
1927

2028
const failedData = data ? mapWebhooksStatsToChartPoints(data, 'failed') : null;
2129
const deliveredData = data ? mapWebhooksStatsToChartPoints(data, 'delivered') : null;
22-
const hasData = (failedData && failedData.length > 0) || (deliveredData && deliveredData.length > 0);
30+
const hasData =
31+
(failedData && failedData.length > 0) || (deliveredData && deliveredData.length > 0);
2332
const isServiceActive = !!selectedLiteproxyTier;
2433

2534
// c. If no data at all (never used), don't render - even if tier is active
@@ -50,32 +59,33 @@ const DashboardWebhooksChart: FC<DashboardWebhooksChartProps> = ({ period, ...pr
5059
return (
5160
<>
5261
<MetricGroupCard
53-
title="Webhook Statistics"
62+
title="Webhook"
5463
onExpand={onOpen}
5564
hasData={hasData}
65+
childrenDirection={childrenDirection}
5666
{...props}
5767
>
5868
<MetricChartContent
59-
title="Failed"
60-
data={failedData && failedData.length > 0 ? failedData : null}
69+
title="Delivered"
70+
data={deliveredData && deliveredData.length > 0 ? deliveredData : null}
6171
isLoading={isLoading}
6272
error={error}
63-
color={colors.accent.red}
73+
color={colors.accent.blue}
6474
compact={!hasData}
6575
/>
6676
<MetricChartContent
67-
title="Delivered"
68-
data={deliveredData && deliveredData.length > 0 ? deliveredData : null}
77+
title="Failed"
78+
data={failedData && failedData.length > 0 ? failedData : null}
6979
isLoading={isLoading}
7080
error={error}
71-
color={colors.accent.blue}
81+
color={colors.accent.red}
7282
compact={!hasData}
7383
/>
7484
</MetricGroupCard>
7585
<MetricChartModal
7686
isOpen={isOpen}
7787
onClose={onClose}
78-
title="Webhook Statistics"
88+
title="Webhook"
7989
charts={[
8090
{
8191
title: 'Failed webhook requests',

‎src/features/tonapi/statistics/ui/MetricChartContent.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const MetricChartContent: FC<MetricChartContentProps> = ({
3030

3131
if (isLoading) {
3232
return (
33-
<Box {...props}>
33+
<Box w="100%" {...props}>
3434
<Text textStyle="body2" mb="2" color="text.secondary">
3535
{title}
3636
</Text>
@@ -43,7 +43,7 @@ const MetricChartContent: FC<MetricChartContentProps> = ({
4343

4444
if (error) {
4545
return (
46-
<Box {...props}>
46+
<Box w="100%" {...props}>
4747
<Text textStyle="body2" mb="2" color="text.secondary">
4848
{title}
4949
</Text>
@@ -58,7 +58,7 @@ const MetricChartContent: FC<MetricChartContentProps> = ({
5858

5959
if (!data || data.length === 0) {
6060
return (
61-
<Box {...props}>
61+
<Box w="100%" {...props}>
6262
<Text textStyle="body2" mb="2" color="text.secondary">
6363
{title}
6464
</Text>
@@ -72,11 +72,11 @@ const MetricChartContent: FC<MetricChartContentProps> = ({
7272
}
7373

7474
return (
75-
<Box {...props}>
75+
<Box w="100%" {...props}>
7676
<Text textStyle="body2" mb="2" color="text.secondary">
7777
{title}
7878
</Text>
79-
<Box h={dataHeight}>
79+
<Box w="100%" h={dataHeight}>
8080
<MetricChart
8181
data={data}
8282
title={title}

‎src/features/tonapi/statistics/ui/MetricGroupCard.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ interface MetricGroupCardProps extends BoxProps {
77
onExpand?: () => void;
88
children: ReactNode;
99
hasData?: boolean;
10+
childrenDirection?: 'row' | 'column';
1011
}
1112

12-
const MetricGroupCard: FC<MetricGroupCardProps> = ({ title, onExpand, children, hasData, ...rest }) => {
13+
const MetricGroupCard: FC<MetricGroupCardProps> = ({ title, onExpand, children, hasData, childrenDirection = 'column', ...rest }) => {
1314
return (
1415
<Box p="4" borderWidth="1px" borderColor="border.primary" borderRadius="12px" {...rest}>
1516
<Flex align="center" justify="space-between" mb="4">
@@ -26,7 +27,7 @@ const MetricGroupCard: FC<MetricGroupCardProps> = ({ title, onExpand, children,
2627
/>
2728
)}
2829
</Flex>
29-
<Flex direction="column" gap="4">
30+
<Flex direction={childrenDirection} gap="4">
3031
{children}
3132
</Flex>
3233
</Box>

‎src/pages/dashboard/index.tsx‎

Lines changed: 28 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -67,19 +67,36 @@ const DashboardPage: FC = () => {
6767
</Text>
6868
<PeriodSelector value={period} onChange={setPeriod} />
6969
</Flex>
70-
<Grid gap="4" templateColumns="repeat(auto-fit, minmax(400px, 1fr))" mb="6">
71-
<GridItem>
70+
<Grid gap="4" mb="6">
71+
<GridItem colSpan={{ base: 1, lg: 1 }}>
7272
<DashboardChart period={period} />
7373
</GridItem>
74-
{shouldShowLiteproxy && (
75-
<GridItem colSpan={{ base: 1, lg: 1 }}>
76-
<DashboardLiteproxyChart period={period} />
77-
</GridItem>
78-
)}
79-
{shouldShowWebhooks && (
80-
<GridItem colSpan={{ base: 1, lg: 1 }}>
81-
<DashboardWebhooksChart period={period} />
82-
</GridItem>
74+
{(shouldShowLiteproxy || shouldShowWebhooks) && (
75+
<Grid
76+
gap="4"
77+
templateColumns={{
78+
base: '1fr',
79+
lg: shouldShowLiteproxy && shouldShowWebhooks ? 'repeat(2, 1fr)' : '1fr'
80+
}}
81+
w="100%"
82+
>
83+
{shouldShowLiteproxy && (
84+
<GridItem>
85+
<DashboardLiteproxyChart
86+
period={period}
87+
childrenDirection={shouldShowLiteproxy && shouldShowWebhooks ? 'column' : 'row'}
88+
/>
89+
</GridItem>
90+
)}
91+
{shouldShowWebhooks && (
92+
<GridItem>
93+
<DashboardWebhooksChart
94+
period={period}
95+
childrenDirection={shouldShowLiteproxy && shouldShowWebhooks ? 'column' : 'row'}
96+
/>
97+
</GridItem>
98+
)}
99+
</Grid>
83100
)}
84101
</Grid>
85102
</>

0 commit comments

Comments
 (0)