Skip to content

Commit b5366a3

Browse files
anubraganubrag
committed
added charting examples
1 parent ad2728e commit b5366a3

File tree

6 files changed

+306
-1
lines changed

6 files changed

+306
-1
lines changed

‎app-examples/charting-examples/.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
*.db
2+
*.py[cod]
3+
.web
4+
__pycache__/

‎app-examples/charting-examples/assets/favicon.ico

15 KB
Binary file not shown.

‎app-examples/charting-examples/charting_examples/charting_examples.py

Lines changed: 286 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,286 @@
1+
# This file has been modified by the Nextpy Team in 2023 using AI tools and automation scripts.
2+
# We have rigorously tested these modifications to ensure reliability and performance. Based on successful test results, we are confident in the quality and stability of these changes.
3+
4+
import nextpy as xt
5+
6+
data = [
7+
{"name": "Mon", "uv": 3000, "pv": 4000, "amt": 2400},
8+
{"name": "Tue", "uv": 4500, "pv": 3000, "amt": 2210},
9+
{"name": "Wed", "uv": 3200, "pv": 4500, "amt": 2290},
10+
{"name": "Thu", "uv": 5000, "pv": 3900, "amt": 2000},
11+
{"name": "Fri", "uv": 4000, "pv": 4800, "amt": 2181},
12+
{"name": "Sat", "uv": 3500, "pv": 3800, "amt": 2500},
13+
{"name": "Sun", "uv": 3000, "pv": 4300, "amt": 2100},
14+
]
15+
16+
17+
class AreaState(xt.State):
18+
data = data
19+
20+
def randomize_data(self):
21+
for i in range(len(self.data)):
22+
self.data[i]["uv"] = random.randint(0, 10000)
23+
self.data[i]["pv"] = random.randint(0, 10000)
24+
self.data[i]["amt"] = random.randint(0, 10000)
25+
26+
27+
bar_chart_example = xt.bar_chart(
28+
xt.bar(
29+
xt.label_list(data_key="uv", position="top"),
30+
data_key="uv",
31+
stroke="#ff9999", # Light red
32+
fill="#ff9999",
33+
),
34+
xt.bar(
35+
xt.label_list(data_key="pv", position="top"),
36+
data_key="pv",
37+
stroke="#99ccff", # Light blue
38+
fill="#99ccff",
39+
),
40+
xt.x_axis(data_key="name"),
41+
xt.y_axis(),
42+
margin={
43+
"left": 10,
44+
"right": 0,
45+
"top": 20,
46+
"bottom": 10,
47+
},
48+
data=data,
49+
height=400,
50+
)
51+
52+
area_chart_example = xt.area_chart(
53+
xt.area(
54+
data_key="uv",
55+
stroke="#EC7495",
56+
fill="#EC7495",
57+
type_="natural",
58+
on_click=AreaState.randomize_data,
59+
),
60+
xt.area(
61+
data_key="pv",
62+
stroke="#F4C278",
63+
fill="#F4C278",
64+
type_="natural",
65+
),
66+
xt.x_axis(
67+
data_key="name",
68+
),
69+
xt.y_axis(),
70+
xt.legend(),
71+
xt.cartesian_grid(
72+
stroke_dasharray="3 3",
73+
),
74+
data=AreaState.data,
75+
width="100%",
76+
height=400,
77+
)
78+
79+
composed_chart_example = xt.composed_chart(
80+
xt.area(
81+
data_key="uv",
82+
stroke="#875AD1",
83+
fill="#875AD1",
84+
),
85+
xt.bar(
86+
data_key="amt",
87+
bar_size=80,
88+
fill="#78ffd6",
89+
),
90+
xt.line(
91+
data_key="pv",
92+
type_="monotone",
93+
stroke="#fbd786",
94+
),
95+
xt.x_axis(data_key="name"),
96+
xt.y_axis(),
97+
xt.cartesian_grid(stroke_dasharray="3 3"),
98+
xt.graphing_tooltip(),
99+
data=data,
100+
height=400,
101+
)
102+
103+
104+
funnel_data = [
105+
{"value": 120, "name": "Leads Generated", "fill": "#a3c1ad"}, # Soft green
106+
{"value": 100, "name": "Initial Contact", "fill": "#68a357"}, # Medium green
107+
{"value": 80, "name": "Follow-Up Meeting", "fill": "#317c42"}, # Rich green
108+
{"value": 50, "name": "Proposal Sent", "fill": "#1d5a2c"}, # Dark green
109+
{"value": 30, "name": "Deal Closed", "fill": "#083c15"}, # Deepest green
110+
]
111+
112+
113+
funnel_chart_example = xt.funnel_chart(
114+
xt.funnel(
115+
xt.label_list(
116+
position="right",
117+
data_key="name",
118+
fill="#000",
119+
stroke="none",
120+
),
121+
xt.label_list(
122+
position="right",
123+
data_key="name",
124+
fill="#000",
125+
stroke="none",
126+
),
127+
data_key="value",
128+
data=funnel_data,
129+
),
130+
xt.graphing_tooltip(),
131+
width=730,
132+
height=250,
133+
)
134+
135+
136+
line_chart_example = xt.line_chart(
137+
xt.line(
138+
data_key="pv",
139+
stroke="#ff6666",
140+
),
141+
xt.line(
142+
data_key="uv",
143+
stroke="#66ccff",
144+
),
145+
xt.x_axis(data_key="name"),
146+
xt.y_axis(),
147+
data=data,
148+
height=400,
149+
)
150+
151+
152+
pie_data01 = [
153+
{"name": "R&D", "value": 400},
154+
{"name": "Marketing", "value": 500},
155+
{"name": "Sales", "value": 300},
156+
{"name": "IT", "value": 250},
157+
{"name": "Support", "value": 350},
158+
{"name": "HR", "value": 200},
159+
]
160+
161+
pie_data02 = [
162+
{"name": "North Region", "value": 2400},
163+
{"name": "South Region", "value": 1567},
164+
{"name": "East Region", "value": 1898},
165+
{"name": "West Region", "value": 9800},
166+
]
167+
168+
169+
pie_chart_example = xt.pie_chart(
170+
xt.pie(
171+
data=pie_data01,
172+
data_key="value",
173+
name_key="name",
174+
cx="50%",
175+
cy="50%",
176+
fill="#82ca9d",
177+
inner_radius="60%",
178+
),
179+
xt.pie(
180+
data=pie_data02,
181+
data_key="value",
182+
name_key="name",
183+
cx="50%",
184+
cy="50%",
185+
fill="#8884d8",
186+
outer_radius="50%",
187+
),
188+
xt.graphing_tooltip(),
189+
height=400,
190+
)
191+
192+
193+
radar_data = [
194+
{"subject": "Communication", "Candidate A": 95, "Candidate B": 85, "fullMark": 100},
195+
{
196+
"subject": "Technical Knowledge",
197+
"Candidate A": 85,
198+
"Candidate B": 90,
199+
"fullMark": 100,
200+
},
201+
{"subject": "Teamwork", "Candidate A": 75, "Candidate B": 92, "fullMark": 100},
202+
{
203+
"subject": "Problem-Solving",
204+
"Candidate A": 80,
205+
"Candidate B": 88,
206+
"fullMark": 100,
207+
},
208+
{"subject": "Leadership", "Candidate A": 70, "Candidate B": 80, "fullMark": 100},
209+
{"subject": "Creativity", "Candidate A": 90, "Candidate B": 78, "fullMark": 100},
210+
]
211+
212+
radar_chart_example = xt.radar_chart(
213+
xt.radar(
214+
data_key="Candidate A",
215+
stroke="#66ccff", # Light blue
216+
fill="#66ccff",
217+
),
218+
xt.radar(
219+
data_key="Candidate B",
220+
stroke="#ff6666", # Light red
221+
fill="#ff6666",
222+
fill_opacity=0.6,
223+
),
224+
xt.polar_grid(),
225+
xt.polar_angle_axis(data_key="subject"),
226+
xt.legend(),
227+
data=radar_data,
228+
height=400,
229+
)
230+
231+
232+
scatter_data = [
233+
{"x": 50, "y": 150, "z": 180},
234+
{"x": 65, "y": 120, "z": 100},
235+
{"x": 80, "y": 200, "z": 220},
236+
{"x": 90, "y": 210, "z": 230},
237+
{"x": 120, "y": 300, "z": 310},
238+
{"x": 140, "y": 250, "z": 280},
239+
{"x": 30, "y": 80, "z": 90},
240+
{"x": 200, "y": 320, "z": 350},
241+
{"x": 110, "y": 280, "z": 300},
242+
{"x": 75, "y": 190, "z": 210},
243+
]
244+
245+
scatter_chart_example = xt.scatter_chart(
246+
xt.scatter(
247+
data=scatter_data,
248+
fill="#ffcc99",
249+
),
250+
xt.x_axis(data_key="x", type_="number"),
251+
xt.y_axis(data_key="y"),
252+
height=400,
253+
)
254+
255+
256+
def index():
257+
return xt.vstack(
258+
xt.heading("Area Chart Example"),
259+
area_chart_example,
260+
xt.heading("Bar Chart Example"),
261+
bar_chart_example,
262+
xt.heading("Composed Chart Example"),
263+
composed_chart_example,
264+
xt.heading("Funnel Chart Example"),
265+
funnel_chart_example,
266+
xt.heading("Line Chart Example"),
267+
line_chart_example,
268+
xt.heading("Pie Chart Example"),
269+
pie_chart_example,
270+
xt.heading("Radar Chart Example"),
271+
radar_chart_example,
272+
xt.heading("Scatter Chart Example"),
273+
scatter_chart_example,
274+
padding="80px",
275+
bg="#232136",
276+
)
277+
278+
279+
# Global styles defined as a Python dictionary
280+
style = {
281+
"text_align": "center",
282+
}
283+
284+
285+
app = xt.App()
286+
app.add_page(index)

‎app-examples/charting-examples/xtconfig.py

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import nextpy as xt
2+
3+
config = xt.Config(
4+
app_name="charting_examples",
5+
)

‎nextpy/__init__.py

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -288,9 +288,17 @@
288288
"nextpy.frontend.components.component": ["memo"],
289289
"nextpy.frontend.components.el": ["el"],
290290
"nextpy.frontend.components.moment.moment": ["MomentDelta"],
291-
"nextpy.frontend.components.recharts": ["recharts"],
292291
"nextpy.frontend.page": ["page"],
293292
"nextpy.frontend.style": ["color_mode", "style", "toggle_color_mode"],
293+
"nextpy.frontend.components.recharts": [
294+
"area_chart", "bar_chart", "line_chart", "composed_chart", "pie_chart",
295+
"radar_chart", "radial_bar_chart", "scatter_chart", "funnel_chart", "treemap",
296+
"area", "bar", "line", "scatter", "x_axis", "y_axis", "z_axis", "brush",
297+
"cartesian_axis", "cartesian_grid", "reference_line", "reference_dot",
298+
"reference_area", "error_bar", "funnel", "responsive_container", "legend",
299+
"graphing_tooltip", "label", "label_list", "pie", "radar", "radial_bar",
300+
"polar_angle_axis", "polar_grid", "polar_radius_axis",
301+
],
294302
"nextpy.utils": ["utils"],
295303
"nextpy.frontend.components.proxy": ["animation"],
296304
}

‎nextpy/frontend/components/__init__.py

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,6 @@
1616
from .next import NextLink, next_link
1717
from .plotly import *
1818
from .react_player import *
19+
from .recharts import *
1920
from .suneditor import *
21+

0 commit comments

Comments
 (0)