Skip to content

Commit 0245da0

Browse files
LineIndentLineIndent
committed
new dashboard for the templates project
1 parent d98d2df commit 0245da0

File tree

17 files changed

+959
-0
lines changed

17 files changed

+959
-0
lines changed

‎.github/workflows/deploy.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,9 @@ jobs:
3535
ai_image_gen)
3636
echo "EXTRA_ARGS=--env REPLICATE_API_TOKEN=${{ secrets.REPLICATE_API_TOKEN }}" >> $GITHUB_ENV
3737
;;
38+
futuristic_dashboard)
39+
echo "EXTRA_ARGS=" >> $GITHUB_ENV
40+
;;
3841
retention_dashboard)
3942
echo "EXTRA_ARGS=" >> $GITHUB_ENV
4043
;;

‎futuristic_dashboard/.gitignore‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.states
2+
assets/external/
3+
*.db
4+
*.py[cod]
5+
.web
6+
__pycache__/
7+
.DS_Store
8+
.idea/

‎futuristic_dashboard/assets/favicon.ico‎

4.19 KB
Binary file not shown.

‎futuristic_dashboard/futuristic_dashboard/__init__.py‎

Whitespace-only changes.

‎futuristic_dashboard/futuristic_dashboard/components/__init__.py‎

Whitespace-only changes.

‎futuristic_dashboard/futuristic_dashboard/components/charts.py‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
import reflex as rx
2+
from futuristic_dashboard.states.dashboard_state import (
3+
DashboardState,
4+
PerformanceChartData,
5+
)
6+
from typing import List, Dict
7+
8+
TOOLTIP_PROPS = {
9+
"cursor": {"fill": "rgba(200, 200, 200, 0.1)"},
10+
"content_style": {
11+
"backgroundColor": "rgba(30, 41, 59, 0.9)",
12+
"borderColor": "rgba(51, 65, 85, 0.5)",
13+
"borderRadius": "8px",
14+
"boxShadow": "0 2px 10px rgba(0,0,0,0.2)",
15+
"padding": "8px 12px",
16+
},
17+
"label_style": {
18+
"color": "#cbd5e1",
19+
"fontSize": "12px",
20+
"fontWeight": "bold",
21+
},
22+
"item_style": {"color": "#94a3b8", "fontSize": "12px"},
23+
}
24+
RECHART_WRAPPER_CLASS = "[&_.recharts-tooltip-cursor]:fill-zinc-500/10 [&_.recharts-tooltip-item]:!text-gray-300 [&_.recharts-tooltip-item-name]:!text-gray-400 [&_.recharts-tooltip-item-separator]:!text-gray-400 [&_.recharts-label]:!fill-gray-400 [&_.recharts-cartesian-axis-tick-value]:!fill-gray-400 [&_.recharts-legend-item-text]:!text-gray-300"
25+
26+
27+
def stat_card_chart(
28+
data: rx.Var[List[Dict[str, int]]], color: rx.Var[str]
29+
) -> rx.Component:
30+
return rx.recharts.area_chart(
31+
rx.recharts.area(
32+
data_key="v",
33+
type_="natural",
34+
fill=rx.match(
35+
color,
36+
("cyan", "url(#cyanGradient)"),
37+
("purple", "url(#purpleGradient)"),
38+
("teal", "url(#tealGradient)"),
39+
"url(#defaultGradient)",
40+
),
41+
stroke=rx.match(
42+
color,
43+
("cyan", "#22d3ee"),
44+
("purple", "#a855f7"),
45+
("teal", "#2dd4bf"),
46+
"#8884d8",
47+
),
48+
stroke_width=2,
49+
dot=False,
50+
fill_opacity=0.3,
51+
),
52+
rx.el.defs(
53+
rx.el.linear_gradient(
54+
rx.el.stop(
55+
offset="5%",
56+
stop_color="#22d3ee",
57+
stop_opacity=0.8,
58+
),
59+
rx.el.stop(
60+
offset="95%",
61+
stop_color="#22d3ee",
62+
stop_opacity=0,
63+
),
64+
id="cyanGradient",
65+
x1="0",
66+
y1="0",
67+
x2="0",
68+
y2="1",
69+
),
70+
rx.el.linear_gradient(
71+
rx.el.stop(
72+
offset="5%",
73+
stop_color="#a855f7",
74+
stop_opacity=0.8,
75+
),
76+
rx.el.stop(
77+
offset="95%",
78+
stop_color="#a855f7",
79+
stop_opacity=0,
80+
),
81+
id="purpleGradient",
82+
x1="0",
83+
y1="0",
84+
x2="0",
85+
y2="1",
86+
),
87+
rx.el.linear_gradient(
88+
rx.el.stop(
89+
offset="5%",
90+
stop_color="#2dd4bf",
91+
stop_opacity=0.8,
92+
),
93+
rx.el.stop(
94+
offset="95%",
95+
stop_color="#2dd4bf",
96+
stop_opacity=0,
97+
),
98+
id="tealGradient",
99+
x1="0",
100+
y1="0",
101+
x2="0",
102+
y2="1",
103+
),
104+
rx.el.linear_gradient(
105+
rx.el.stop(
106+
offset="5%",
107+
stop_color="#8884d8",
108+
stop_opacity=0.8,
109+
),
110+
rx.el.stop(
111+
offset="95%",
112+
stop_color="#8884d8",
113+
stop_opacity=0,
114+
),
115+
id="defaultGradient",
116+
x1="0",
117+
y1="0",
118+
x2="0",
119+
y2="1",
120+
),
121+
),
122+
data=data,
123+
width="100%",
124+
height=50,
125+
margin={
126+
"top": 5,
127+
"right": 0,
128+
"left": 0,
129+
"bottom": 0,
130+
},
131+
)
132+
133+
134+
def performance_line_chart(
135+
data: rx.Var[List[PerformanceChartData]],
136+
) -> rx.Component:
137+
return rx.recharts.line_chart(
138+
rx.recharts.cartesian_grid(
139+
stroke_dasharray="3 3",
140+
stroke="#374151",
141+
vertical=False,
142+
),
143+
rx.recharts.graphing_tooltip(**TOOLTIP_PROPS),
144+
rx.recharts.x_axis(
145+
data_key="time",
146+
axis_line=False,
147+
tick_line=False,
148+
tick_margin=10,
149+
style={"fontSize": "12px"},
150+
),
151+
rx.recharts.y_axis(
152+
axis_line=False,
153+
tick_line=False,
154+
tick_margin=10,
155+
domain=[0, 100],
156+
style={"fontSize": "12px"},
157+
),
158+
rx.recharts.line(
159+
data_key="CPU",
160+
type_="monotone",
161+
stroke="#22d3ee",
162+
stroke_width=2,
163+
dot=False,
164+
name="CPU",
165+
),
166+
rx.recharts.line(
167+
data_key="Memory",
168+
type_="monotone",
169+
stroke="#a855f7",
170+
stroke_width=2,
171+
dot=False,
172+
name="Memory",
173+
),
174+
rx.recharts.line(
175+
data_key="Network",
176+
type_="monotone",
177+
stroke="#14b8a6",
178+
stroke_width=2,
179+
dot=False,
180+
name="Network",
181+
),
182+
rx.recharts.legend(
183+
icon_type="circle",
184+
icon_size=10,
185+
wrapper_style={"paddingTop": "20px"},
186+
),
187+
data=data,
188+
width="100%",
189+
height=300,
190+
margin={
191+
"top": 5,
192+
"right": 20,
193+
"left": -10,
194+
"bottom": 5,
195+
},
196+
class_name=RECHART_WRAPPER_CLASS,
197+
)

‎futuristic_dashboard/futuristic_dashboard/components/header.py‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import reflex as rx
2+
from futuristic_dashboard.states.dashboard_state import DashboardState
3+
4+
5+
def dashboard_header() -> rx.Component:
6+
return rx.el.header(
7+
rx.el.div(
8+
rx.el.button(
9+
rx.icon(tag="menu", class_name="size-6"),
10+
on_click=DashboardState.toggle_mobile_sidebar,
11+
class_name="p-2 text-gray-400 hover:text-gray-200 md:hidden mr-4",
12+
),
13+
rx.el.div(
14+
rx.icon(
15+
tag="search",
16+
class_name="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 pointer-events-none",
17+
),
18+
rx.el.input(
19+
placeholder="Search systems...",
20+
class_name="w-full pl-10 pr-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-gray-300 focus:outline-none focus:ring-1 focus:ring-cyan-500 focus:border-cyan-500 placeholder-gray-500",
21+
),
22+
class_name="relative flex-grow max-w-xs hidden sm:block",
23+
),
24+
class_name="flex items-center",
25+
),
26+
rx.el.div(
27+
rx.el.button(
28+
rx.icon(
29+
tag="bell",
30+
class_name="text-gray-400 hover:text-gray-200",
31+
),
32+
class_name="p-2 rounded-full hover:bg-gray-800",
33+
),
34+
rx.el.button(
35+
rx.icon(
36+
tag="moon",
37+
class_name="text-gray-400 hover:text-gray-200",
38+
),
39+
class_name="p-2 rounded-full hover:bg-gray-800",
40+
),
41+
rx.el.div(
42+
class_name="w-8 h-8 rounded-full bg-cyan-500 ml-3 hidden sm:block"
43+
),
44+
class_name="flex items-center space-x-1 sm:space-x-3",
45+
),
46+
class_name="sticky top-0 z-30 flex items-center justify-between p-4 border-b border-gray-700/50 bg-gray-950/80 backdrop-blur-md",
47+
)

0 commit comments

Comments
 (0)