Skip to content

Commit 6223f76

Browse files
kastovkastov
committed
refactor: statistic nodes components
1 parent fa3f257 commit 6223f76

File tree

8 files changed

+79
-175
lines changed

8 files changed

+79
-175
lines changed

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
"@monaco-editor/react": "^4.7.0",
6060
"@noble/post-quantum": "^0.5.2",
6161
"@paralleldrive/cuid2": "2.2.2",
62-
"@remnawave/backend-contract": "2.3.64",
62+
"@remnawave/backend-contract": "2.3.67",
6363
"@remnawave/subscription-page-types": "0.2.4",
6464
"@simplewebauthn/browser": "^13.2.2",
6565
"@stablelib/base64": "^2.0.1",

‎src/pages/dashboard/statistic-nodes/components/statistic-nodes.component.tsx‎

Lines changed: 24 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,18 @@ import { ActionIcon, SimpleGrid, Stack } from '@mantine/core'
33
import { TbCalendar, TbRefresh } from 'react-icons/tb'
44
import { useTranslation } from 'react-i18next'
55
import { HiChartPie } from 'react-icons/hi'
6-
import { useMemo, useState } from 'react'
6+
import { useState } from 'react'
77
import dayjs from 'dayjs'
88

99
import { NodesStatisticSparklineCardWidget } from '@widgets/dashboard/nodes-statistic/statistic-sparkline-card'
1010
import { NodesStatisticTopNodesCardWidget } from '@widgets/dashboard/nodes-statistic/statistic-top-card'
1111
import { NodesStatisticBarchartWidget } from '@widgets/dashboard/nodes-statistic/statistic-barchart'
12-
import { getColorPaletteItemByIndexUtil } from '@shared/utils/color-resolver'
1312
import { useGetNodesUsageByRangeCommand } from '@shared/api/hooks'
1413
import { Page, PageHeaderShared } from '@shared/ui'
1514

1615
const DEFAULT_DATE_RANGE = {
17-
start: dayjs().utc().subtract(7, 'day').startOf('day').toISOString(),
18-
end: dayjs().utc().endOf('day').toISOString()
16+
start: dayjs().subtract(6, 'day').format('YYYY-MM-DD'),
17+
end: dayjs().format('YYYY-MM-DD')
1918
}
2019

2120
export const StatisticNodesPage = () => {
@@ -47,46 +46,16 @@ export const StatisticNodesPage = () => {
4746
setRawRange(value)
4847
if (!value[0] || !value[1]) return
4948

50-
const start = value[0]
51-
const end = value[1]
49+
const startDate = value[0]
50+
const endDate = value[1]
5251

53-
if (!dayjs(start).isValid() || !dayjs(end).isValid()) return
52+
if (!dayjs(startDate).isValid() || !dayjs(endDate).isValid()) return
5453

55-
setQueryRange({
56-
start: dayjs(start).utc().startOf('day').toISOString(),
57-
end: dayjs(end).utc().endOf('day').toISOString()
58-
})
59-
}
60-
61-
const { categories, series, sparklineData, topNodes } = useMemo(() => {
62-
if (!nodesStats) {
63-
return {
64-
categories: [],
65-
series: [],
66-
sparklineData: [],
67-
topNodes: []
68-
}
69-
}
54+
const startISO = dayjs(startDate).format('YYYY-MM-DD')
55+
const endISO = dayjs(endDate).format('YYYY-MM-DD')
7056

71-
const seriesWithColors = nodesStats.series.map((s, index) => ({
72-
...s,
73-
color: getColorPaletteItemByIndexUtil(index).solid
74-
}))
75-
76-
const topNodesWithColors = nodesStats.topNodes.map((node, index) => ({
77-
...node,
78-
color: getColorPaletteItemByIndexUtil(
79-
nodesStats.series.findIndex((s) => s.uuid === node.uuid) ?? index
80-
).solid
81-
}))
82-
83-
return {
84-
categories: nodesStats.categories,
85-
series: seriesWithColors,
86-
sparklineData: nodesStats.sparklineData,
87-
topNodes: topNodesWithColors
88-
}
89-
}, [nodesStats])
57+
setQueryRange({ start: startISO, end: endISO })
58+
}
9059

9160
return (
9261
<Page title={t('constants.nodes-statistics')}>
@@ -103,49 +72,49 @@ export const StatisticNodesPage = () => {
10372
{
10473
label: t('statistic-nodes.component.3-days'),
10574
value: [
106-
dayjs().subtract(3, 'day').format('YYYY-MM-DD'),
75+
dayjs().subtract(2, 'day').format('YYYY-MM-DD'),
10776
dayjs().format('YYYY-MM-DD')
10877
]
10978
},
11079
{
11180
label: t('statistic-nodes.component.7-days'),
11281
value: [
113-
dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
82+
dayjs().subtract(6, 'day').format('YYYY-MM-DD'),
11483
dayjs().format('YYYY-MM-DD')
11584
]
11685
},
11786
{
11887
label: t('statistic-nodes.component.14-days'),
11988
value: [
120-
dayjs().subtract(14, 'day').format('YYYY-MM-DD'),
89+
dayjs().subtract(13, 'day').format('YYYY-MM-DD'),
12190
dayjs().format('YYYY-MM-DD')
12291
]
12392
},
12493
{
12594
label: t('statistic-nodes.component.30-days'),
12695
value: [
127-
dayjs().subtract(30, 'day').format('YYYY-MM-DD'),
96+
dayjs().subtract(29, 'day').format('YYYY-MM-DD'),
12897
dayjs().format('YYYY-MM-DD')
12998
]
13099
},
131100
{
132101
label: t('statistic-nodes.component.60-days'),
133102
value: [
134-
dayjs().subtract(60, 'day').format('YYYY-MM-DD'),
103+
dayjs().subtract(59, 'day').format('YYYY-MM-DD'),
135104
dayjs().format('YYYY-MM-DD')
136105
]
137106
},
138107
{
139108
label: t('statistic-nodes.component.90-days'),
140109
value: [
141-
dayjs().subtract(90, 'day').format('YYYY-MM-DD'),
110+
dayjs().subtract(89, 'day').format('YYYY-MM-DD'),
142111
dayjs().format('YYYY-MM-DD')
143112
]
144113
},
145114
{
146115
label: t('statistic-nodes.component.180-days'),
147116
value: [
148-
dayjs().subtract(180, 'day').format('YYYY-MM-DD'),
117+
dayjs().subtract(179, 'day').format('YYYY-MM-DD'),
149118
dayjs().format('YYYY-MM-DD')
150119
]
151120
}
@@ -182,16 +151,19 @@ export const StatisticNodesPage = () => {
182151
<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
183152
<NodesStatisticSparklineCardWidget
184153
isLoading={isLoading}
185-
sparklineData={sparklineData}
154+
sparklineData={nodesStats?.sparklineData}
186155
/>
187156

188-
<NodesStatisticTopNodesCardWidget isLoading={isLoading} topNodes={topNodes} />
157+
<NodesStatisticTopNodesCardWidget
158+
isLoading={isLoading}
159+
topNodes={nodesStats?.topNodes}
160+
/>
189161
</SimpleGrid>
190162

191163
<NodesStatisticBarchartWidget
192-
categories={categories}
164+
categories={nodesStats?.categories}
193165
isLoading={isLoading}
194-
series={series}
166+
series={nodesStats?.series}
195167
/>
196168
</Stack>
197169
</Page>

‎src/shared/utils/color-resolver/color-resolver.util.tsx‎

Lines changed: 0 additions & 66 deletions
This file was deleted.

‎src/shared/utils/color-resolver/index.ts‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)