Blame: dashboard/src/modules/users/components/widgets/users-stats-widget/index.tsx

← marzneshin / dashboard/src/modules/users/components/widgets/users-stats-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/users/components/widgets/users-stats-widget/index.tsx · v0.6.1

1	e5dcd82	Dawsh	2y ago	`import { FC } from 'react';`
2	44d5623	Mardin	2y ago	`import { UsersIcon } from 'lucide-react';`
3	e5dcd82	Dawsh	2y ago	`import { useTranslation } from 'react-i18next';`
4	44d5623	Mardin	2y ago	`import {`
5	6a4fee1	Dawsh	2y ago	`SectionWidget,`
6	6a4fee1	Dawsh	2y ago	`ChartConfig,`
7	6a4fee1	Dawsh	2y ago	`ChartContainer,`
8	6a4fee1	Dawsh	2y ago	`ChartTooltip,`
9	6a4fee1	Dawsh	2y ago	`ChartTooltipContent,`
10	6a4fee1	Dawsh	2y ago	`ChartLegend,`
11	6a4fee1	Dawsh	2y ago	`ChartLegendContent,`
12	44d5623	Mardin	2y ago	`} from "@marzneshin/components";`
13	6a4fee1	Dawsh	2y ago	`import { Label, Pie, PieChart } from "recharts"`
14	e5dcd82	Dawsh	2y ago
15	6a4fee1	Dawsh	2y ago	`const chartConfig = {`
16	6a4fee1	Dawsh	2y ago	`active: {`
17	6a4fee1	Dawsh	2y ago	`label: "Active",`
18	6a4fee1	Dawsh	2y ago	`color: "#3b82f6",`
19	6a4fee1	Dawsh	2y ago	`},`
20	6a4fee1	Dawsh	2y ago	`online: {`
21	6a4fee1	Dawsh	2y ago	`label: "Online",`
22	6a4fee1	Dawsh	2y ago	`color: "#10b981",`
23	6a4fee1	Dawsh	2y ago	`},`
24	6a4fee1	Dawsh	2y ago	`expired: {`
25	6a4fee1	Dawsh	2y ago	`label: "Expired",`
26	6a4fee1	Dawsh	2y ago	`color: "#4b5563",`
27	6a4fee1	Dawsh	2y ago	`},`
28	6a4fee1	Dawsh	2y ago	`onHold: {`
29	6a4fee1	Dawsh	2y ago	`label: "On Hold",`
30	6a4fee1	Dawsh	2y ago	`color: "#A855F7",`
31	6a4fee1	Dawsh	2y ago	`},`
32	6a4fee1	Dawsh	2y ago	`limited: {`
33	6a4fee1	Dawsh	2y ago	`label: "Limited",`
34	6a4fee1	Dawsh	2y ago	`color: "#ef4444",`
35	6a4fee1	Dawsh	2y ago	`},`
36	6a4fee1	Dawsh	2y ago	`} satisfies ChartConfig;`
37	6a4fee1	Dawsh	2y ago
38	6a4fee1	Dawsh	2y ago	`interface UsersStatsProps {`
39	6a4fee1	Dawsh	2y ago	`limited: number;`
40	44d5623	Mardin	2y ago	`active: number;`
41	44d5623	Mardin	2y ago	`expired: number;`
42	44d5623	Mardin	2y ago	`on_hold: number;`
43	6a4fee1	Dawsh	2y ago	`online: number;`
44	a681493	Mardin	2y ago	`total: number;`
45	e5dcd82	Dawsh	2y ago	`}`
46	e5dcd82	Dawsh	2y ago
47	6a4fee1	Dawsh	2y ago	`export const UsersStatsWidget: FC<UsersStatsProps> = ({ total, limited, active, expired, on_hold, online }) => {`
48	44d5623	Mardin	2y ago	`const { t } = useTranslation();`
49	e5dcd82	Dawsh	2y ago
50	6a4fee1	Dawsh	2y ago	`const stats = [`
51	6a4fee1	Dawsh	2y ago	`{ type: "limited", total: limited, fill: "var(--color-limited)" },`
52	6a4fee1	Dawsh	2y ago	`{ type: "active", total: active, fill: "var(--color-active)" },`
53	6a4fee1	Dawsh	2y ago	`{ type: "expired", total: expired, fill: "var(--color-expired)" },`
54	6a4fee1	Dawsh	2y ago	`{ type: "onHold", total: on_hold, fill: "var(--color-onHold)" },`
55	6a4fee1	Dawsh	2y ago	`{ type: "online", total: online, fill: "var(--color-online)" },`
56	6a4fee1	Dawsh	2y ago	`]`
57	e5dcd82	Dawsh	2y ago
58	e5dcd82	Dawsh	2y ago	`return (`
59	6a4fee1	Dawsh	2y ago	`<SectionWidget`
60	44d5623	Mardin	2y ago	`title={<> <UsersIcon /> {t('users')} </>}`
61	6a4fee1	Dawsh	2y ago	`description={t('page.home.users-stats.desc')}`
62	6a4fee1	Dawsh	2y ago	`className="h-full"`
63	44d5623	Mardin	2y ago	`>`
64	6a4fee1	Dawsh	2y ago	`<ChartContainer`
65	6a4fee1	Dawsh	2y ago	`config={chartConfig}`
66	6a4fee1	Dawsh	2y ago	`className="mx-auto aspect-square min-h-[300px] w-full"`
67	6a4fee1	Dawsh	2y ago	`>`
68	6a4fee1	Dawsh	2y ago	`<PieChart>`
69	6a4fee1	Dawsh	2y ago	`<ChartTooltip`
70	6a4fee1	Dawsh	2y ago	`cursor={false}`
71	6a4fee1	Dawsh	2y ago	`content={<ChartTooltipContent hideLabel />}`
72	6a4fee1	Dawsh	2y ago	`/>`
73	6a4fee1	Dawsh	2y ago	`<Pie`
74	6a4fee1	Dawsh	2y ago	`data={stats}`
75	6a4fee1	Dawsh	2y ago	`dataKey="total"`
76	6a4fee1	Dawsh	2y ago	`nameKey="type"`
77	6a4fee1	Dawsh	2y ago	`innerRadius={60}`
78	6a4fee1	Dawsh	2y ago	`strokeWidth={5}`
79	6a4fee1	Dawsh	2y ago	`>`
80	6a4fee1	Dawsh	2y ago	`<Label`
81	6a4fee1	Dawsh	2y ago	`content={({ viewBox }) => {`
82	6a4fee1	Dawsh	2y ago	`if (viewBox && "cx" in viewBox && "cy" in viewBox) {`
83	6a4fee1	Dawsh	2y ago	`return (`
84	6a4fee1	Dawsh	2y ago	`<text`
85	6a4fee1	Dawsh	2y ago	`x={viewBox.cx}`
86	6a4fee1	Dawsh	2y ago	`y={viewBox.cy}`
87	6a4fee1	Dawsh	2y ago	`textAnchor="middle"`
88	6a4fee1	Dawsh	2y ago	`dominantBaseline="middle"`
89	6a4fee1	Dawsh	2y ago	`>`
90	6a4fee1	Dawsh	2y ago	`<tspan`
91	6a4fee1	Dawsh	2y ago	`x={viewBox.cx}`
92	6a4fee1	Dawsh	2y ago	`y={viewBox.cy}`
93	6a4fee1	Dawsh	2y ago	`className="fill-foreground text-3xl font-bold"`
94	6a4fee1	Dawsh	2y ago	`>`
95	6a4fee1	Dawsh	2y ago	`{total \|\| 0}`
96	6a4fee1	Dawsh	2y ago	`</tspan>`
97	6a4fee1	Dawsh	2y ago	`<tspan`
98	6a4fee1	Dawsh	2y ago	`x={viewBox.cx}`
99	6a4fee1	Dawsh	2y ago	`y={(viewBox.cy \|\| 0) + 24}`
100	6a4fee1	Dawsh	2y ago	`className="fill-muted-foreground"`
101	6a4fee1	Dawsh	2y ago	`>`
102	6a4fee1	Dawsh	2y ago	`{t('users')}`
103	6a4fee1	Dawsh	2y ago	`</tspan>`
104	6a4fee1	Dawsh	2y ago	`</text>`
105	6a4fee1	Dawsh	2y ago	`)`
106	6a4fee1	Dawsh	2y ago	`}`
107	6a4fee1	Dawsh	2y ago	`}}`
108	6a4fee1	Dawsh	2y ago	`/>`
109	6a4fee1	Dawsh	2y ago	`</Pie>`
110	6a4fee1	Dawsh	2y ago	`<ChartLegend className="flex -translate-y-2 flex-wrap gap-2 [&>]:basis-1/5 [&>]:justify-center text-md" content={<ChartLegendContent />} />`
111	6a4fee1	Dawsh	2y ago	`</PieChart>`
112	6a4fee1	Dawsh	2y ago	`</ChartContainer>`
113	6a4fee1	Dawsh	2y ago	`</SectionWidget>`
114	44d5623	Mardin	2y ago	`);`
115	44d5623	Mardin	2y ago	`};`
116	e5dcd82	Dawsh	2y ago