gitscope
/
← marzneshin / dashboard/src/modules/nodes/nodes-usage-widget/index.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/modules/nodes/nodes-usage-widget/index.tsx · v0.6.2
Source
1 78a3e64 Dawsh 2y ago import { useState, FC } from 'react';
2 78a3e64 Dawsh 2y ago import { useTranslation } from 'react-i18next';
3 78a3e64 Dawsh 2y ago import {
4 78a3e64 Dawsh 2y ago SectionWidget,
5 78a3e64 Dawsh 2y ago ChartContainer,
6 78a3e64 Dawsh 2y ago Awaiting,
7 78a3e64 Dawsh 2y ago ChartTooltip,
8 78a3e64 Dawsh 2y ago ChartTooltipContent,
9 78a3e64 Dawsh 2y ago ChartConfig,
10 78a3e64 Dawsh 2y ago } from "@marzneshin/components";
11 78a3e64 Dawsh 2y ago import { XAxis, BarChart, YAxis, CartesianGrid, Bar } from "recharts"
12 78a3e64 Dawsh 2y ago import { format as formatByte } from '@chbphone55/pretty-bytes';
13 78a3e64 Dawsh 2y ago import { useNodesUsageQuery, NodeType } from "@marzneshin/modules/nodes";
14 78a3e64 Dawsh 2y ago import {
15 78a3e64 Dawsh 2y ago useTransformDateUsageData,
16 78a3e64 Dawsh 2y ago ChartDateInterval,
17 78a3e64 Dawsh 2y ago SelectDateView,
18 78a3e64 Dawsh 2y ago dateXAxisTicks,
19 78a3e64 Dawsh 2y ago useFromNowInterval
20 78a3e64 Dawsh 2y ago } from "@marzneshin/common/stats-charts";
21 78a3e64 Dawsh 2y ago
22 78a3e64 Dawsh 2y ago const chartConfig = {
23 78a3e64 Dawsh 2y ago traffic: {
24 78a3e64 Dawsh 2y ago label: "Traffic",
25 78a3e64 Dawsh 2y ago color: "hsl(var(--chart-1))",
26 78a3e64 Dawsh 2y ago },
27 78a3e64 Dawsh 2y ago } satisfies ChartConfig
28 78a3e64 Dawsh 2y ago
29 78a3e64 Dawsh 2y ago export const NodesUsageWidget: FC<{ node: NodeType }> = ({ node }) => {
30 78a3e64 Dawsh 2y ago const { t } = useTranslation();
31 78a3e64 Dawsh 2y ago const [timeRange, setTimeRange] = useState("1d")
32 78a3e64 Dawsh 2y ago const { start, end } = useFromNowInterval(timeRange as ChartDateInterval);
33 78a3e64 Dawsh 2y ago const { data } = useNodesUsageQuery({ nodeId: node.id, start, end })
34 78a3e64 Dawsh 2y ago const chartData = useTransformDateUsageData(data.usages);
35 78a3e64 Dawsh 2y ago const [totalAmount, totalMetric] = formatByte(data.total);
36 78a3e64 Dawsh 2y ago
37 78a3e64 Dawsh 2y ago return (
38 78a3e64 Dawsh 2y ago <Awaiting
39 78a3e64 Dawsh 2y ago Component={
40 78a3e64 Dawsh 2y ago <SectionWidget
41 78a3e64 Dawsh 2y ago title={
42 78a3e64 Dawsh 2y ago <div className="hstack justify-between w-full">
43 78a3e64 Dawsh 2y ago {t("page.nodes.nodes-usage-widget.title")}
44 78a3e64 Dawsh 2y ago </div>
45 78a3e64 Dawsh 2y ago }
46 78a3e64 Dawsh 2y ago description={t("page.nodes.nodes-usage-widget.desc")}
47 78a3e64 Dawsh 2y ago options={
48 78a3e64 Dawsh 2y ago <div className="vstack justify-end w-full">
49 78a3e64 Dawsh 2y ago <span className="text-lg leading-none sm:text-2xl w-full">
50 78a3e64 Dawsh 2y ago {totalAmount} {totalMetric}
51 78a3e64 Dawsh 2y ago </span>
52 78a3e64 Dawsh 2y ago <span className="text-sm flex justify-end text-muted-foreground w-full">
53 78a3e64 Dawsh 2y ago Total
54 78a3e64 Dawsh 2y ago </span>
55 78a3e64 Dawsh 2y ago </div>
56 78a3e64 Dawsh 2y ago }
57 78a3e64 Dawsh 2y ago footer={
58 78a3e64 Dawsh 2y ago <SelectDateView timeRange={timeRange} setTimeRange={setTimeRange} />
59 78a3e64 Dawsh 2y ago }
60 78a3e64 Dawsh 2y ago >
61 78a3e64 Dawsh 2y ago <ChartContainer
62 78a3e64 Dawsh 2y ago config={chartConfig}
63 78a3e64 Dawsh 2y ago className="aspect-auto h-[320px] w-full"
64 78a3e64 Dawsh 2y ago >
65 78a3e64 Dawsh 2y ago <BarChart
66 78a3e64 Dawsh 2y ago accessibilityLayer
67 78a3e64 Dawsh 2y ago data={chartData}
68 78a3e64 Dawsh 2y ago margin={{
69 78a3e64 Dawsh 2y ago left: 12,
70 78a3e64 Dawsh 2y ago top: 13,
71 78a3e64 Dawsh 2y ago right: 12,
72 78a3e64 Dawsh 2y ago }}
73 78a3e64 Dawsh 2y ago >
74 78a3e64 Dawsh 2y ago <CartesianGrid vertical={false} />
75 78a3e64 Dawsh 2y ago <YAxis
76 78a3e64 Dawsh 2y ago tickLine={false}
77 78a3e64 Dawsh 2y ago axisLine={false}
78 78a3e64 Dawsh 2y ago tickMargin={8}
79 78a3e64 Dawsh 2y ago tickFormatter={(value) => {
80 78a3e64 Dawsh 2y ago const [amount, metric] = formatByte(value)
81 78a3e64 Dawsh 2y ago return `${amount} ${metric}`
82 78a3e64 Dawsh 2y ago }}
83 78a3e64 Dawsh 2y ago />
84 78a3e64 Dawsh 2y ago <XAxis
85 78a3e64 Dawsh 2y ago dataKey="datetime"
86 78a3e64 Dawsh 2y ago tickLine={false}
87 78a3e64 Dawsh 2y ago axisLine={false}
88 78a3e64 Dawsh 2y ago tickMargin={8}
89 78a3e64 Dawsh 2y ago tickFormatter={(value) => dateXAxisTicks(value, timeRange as ChartDateInterval)}
90 78a3e64 Dawsh 2y ago />
91 78a3e64 Dawsh 2y ago <ChartTooltip
92 78a3e64 Dawsh 2y ago content={
93 78a3e64 Dawsh 2y ago <ChartTooltipContent
94 78a3e64 Dawsh 2y ago indicator='line'
95 78a3e64 Dawsh 2y ago labelFormatter={(value) => {
96 78a3e64 Dawsh 2y ago return new Date(value).toLocaleDateString("en-US", {
97 78a3e64 Dawsh 2y ago month: "short",
98 78a3e64 Dawsh 2y ago day: "numeric",
99 78a3e64 Dawsh 2y ago year: "numeric",
100 78a3e64 Dawsh 2y ago hour: "numeric"
101 78a3e64 Dawsh 2y ago })
102 78a3e64 Dawsh 2y ago }}
103 78a3e64 Dawsh 2y ago valueFormatter={(value) => {
104 78a3e64 Dawsh 2y ago const [amount, metric] = formatByte(value as number)
105 78a3e64 Dawsh 2y ago return `${amount} ${metric}`
106 78a3e64 Dawsh 2y ago }}
107 78a3e64 Dawsh 2y ago />
108 78a3e64 Dawsh 2y ago }
109 78a3e64 Dawsh 2y ago />
110 78a3e64 Dawsh 2y ago <Bar dataKey="traffic" fill={`var(--color-traffic)`} />
111 78a3e64 Dawsh 2y ago </BarChart>
112 78a3e64 Dawsh 2y ago </ChartContainer>
113 78a3e64 Dawsh 2y ago </SectionWidget>
114 78a3e64 Dawsh 2y ago }
115 78a3e64 Dawsh 2y ago />
116 78a3e64 Dawsh 2y ago );
117 78a3e64 Dawsh 2y ago };