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