Skip to content

Commit 3c85920

Browse files
jourdainjourdain
committed
fix(vue3): add support for vue3
1 parent e30b847 commit 3c85920

File tree

8 files changed

+383
-9
lines changed

8 files changed

+383
-9
lines changed

‎examples/requirements.txt‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
trame>3
2+
trame-vuetify
3+
trame-components
4+
trame-matplotlib
5+
numpy

‎examples/vue2.py‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
import numpy as np
2+
import matplotlib.pyplot as plt
3+
4+
from trame.app import get_server
5+
from trame.ui.vuetify import SinglePageLayout
6+
from trame.widgets import vuetify, trame, matplotlib
7+
8+
# -----------------------------------------------------------------------------
9+
# Trame setup
10+
# -----------------------------------------------------------------------------
11+
12+
server = get_server(client_type="vue2")
13+
state, ctrl = server.state, server.controller
14+
15+
# -----------------------------------------------------------------------------
16+
# Chart examples from:
17+
# - http://jakevdp.github.io/blog/2013/12/19/a-d3-viewer-for-matplotlib/
18+
# -----------------------------------------------------------------------------
19+
20+
21+
def figure_size():
22+
if state.figure_size is None:
23+
return {}
24+
25+
dpi = state.figure_size.get("dpi")
26+
rect = state.figure_size.get("size")
27+
w_inch = rect.get("width") / dpi / 2
28+
h_inch = rect.get("height") / dpi / 2
29+
30+
return {
31+
"figsize": (w_inch, h_inch),
32+
"dpi": dpi,
33+
}
34+
35+
36+
def FirstDemo():
37+
plt.close("all")
38+
fig, ax = plt.subplots(**figure_size())
39+
np.random.seed(0)
40+
ax.plot(
41+
np.random.normal(size=100), np.random.normal(size=100), "or", ms=10, alpha=0.3
42+
)
43+
ax.plot(
44+
np.random.normal(size=100), np.random.normal(size=100), "ob", ms=20, alpha=0.1
45+
)
46+
47+
ax.set_xlabel("this is x")
48+
ax.set_ylabel("this is y")
49+
ax.set_title("Matplotlib Plot Rendered in D3!", size=14)
50+
ax.grid(color="lightgray", alpha=0.7)
51+
52+
return fig
53+
54+
55+
# -----------------------------------------------------------------------------
56+
57+
58+
def MultiLines():
59+
plt.close("all")
60+
fig, ax = plt.subplots(**figure_size())
61+
x = np.linspace(0, 10, 1000)
62+
for offset in np.linspace(0, 3, 7):
63+
ax.plot(x, 0.9 * np.sin(x - offset), lw=5, alpha=0.4)
64+
ax.set_ylim(-1.2, 1.0)
65+
ax.text(5, -1.1, "Here are some curves", size=18)
66+
ax.grid(color="lightgray", alpha=0.7)
67+
68+
return fig
69+
70+
71+
# -----------------------------------------------------------------------------
72+
73+
74+
def DotsandPoints():
75+
plt.close("all")
76+
fig, ax = plt.subplots(**figure_size())
77+
ax.plot(
78+
np.random.rand(20),
79+
"-o",
80+
alpha=0.5,
81+
color="black",
82+
linewidth=5,
83+
markerfacecolor="green",
84+
markeredgecolor="lightgreen",
85+
markersize=20,
86+
markeredgewidth=10,
87+
)
88+
ax.grid(True, color="#EEEEEE", linestyle="solid")
89+
ax.set_xlim(-2, 22)
90+
ax.set_ylim(-0.1, 1.1)
91+
92+
return fig
93+
94+
95+
# -----------------------------------------------------------------------------
96+
97+
98+
def MovingWindowAverage():
99+
np.random.seed(0)
100+
t = np.linspace(0, 10, 300)
101+
x = np.sin(t)
102+
dx = np.random.normal(0, 0.3, 300)
103+
104+
kernel = np.ones(25) / 25.0
105+
x_smooth = np.convolve(x + dx, kernel, mode="same")
106+
plt.close("all")
107+
fig, ax = plt.subplots(**figure_size())
108+
ax.plot(t, x + dx, linestyle="", marker="o", color="black", markersize=3, alpha=0.3)
109+
ax.plot(t, x_smooth, "-k", lw=3)
110+
ax.plot(t, x, "--", lw=3, color="blue")
111+
112+
return fig
113+
114+
115+
# -----------------------------------------------------------------------------
116+
117+
118+
def Subplots():
119+
plt.close("all")
120+
fig = plt.figure(**figure_size())
121+
fig.subplots_adjust(hspace=0.3)
122+
123+
np.random.seed(0)
124+
125+
for i in range(1, 5):
126+
ax = fig.add_subplot(2, 2, i)
127+
color = np.random.random(3)
128+
ax.plot(np.random.random(30), lw=2, c=color)
129+
ax.set_title("RGB = ({0:.2f}, {1:.2f}, {2:.2f})".format(*color), size=14)
130+
ax.grid(color="lightgray", alpha=0.7)
131+
132+
return fig
133+
134+
135+
# -----------------------------------------------------------------------------
136+
# Callbacks
137+
# -----------------------------------------------------------------------------
138+
139+
140+
@state.change("active_figure", "figure_size")
141+
def update_chart(active_figure, **kwargs):
142+
ctrl.update_figure(globals()[active_figure]())
143+
144+
145+
# -----------------------------------------------------------------------------
146+
# UI
147+
# -----------------------------------------------------------------------------
148+
149+
state.trame__title = "Matplotly"
150+
151+
with SinglePageLayout(server) as layout:
152+
layout.title.set_text("trame ❤️ matplotlib")
153+
154+
with layout.toolbar:
155+
vuetify.VSpacer()
156+
vuetify.VSelect(
157+
v_model=("active_figure", "FirstDemo"),
158+
items=(
159+
"figures",
160+
[
161+
{"text": "First Demo", "value": "FirstDemo"},
162+
{"text": "Multi Lines", "value": "MultiLines"},
163+
{"text": "Dots and Points", "value": "DotsandPoints"},
164+
{"text": "Moving Window Average", "value": "MovingWindowAverage"},
165+
{"text": "Subplots", "value": "Subplots"},
166+
],
167+
),
168+
hide_details=True,
169+
dense=True,
170+
)
171+
172+
with layout.content:
173+
with vuetify.VContainer(fluid=True, classes="fill-height pa-0 ma-0"):
174+
with trame.SizeObserver("figure_size"):
175+
html_figure = matplotlib.Figure(style="position: absolute")
176+
ctrl.update_figure = html_figure.update
177+
178+
# -----------------------------------------------------------------------------
179+
# Main
180+
# -----------------------------------------------------------------------------
181+
182+
if __name__ == "__main__":
183+
server.start()

‎examples/vue3.py‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
import numpy as np
2+
import matplotlib.pyplot as plt
3+
4+
from trame.app import get_server
5+
from trame.ui.vuetify3 import SinglePageLayout
6+
from trame.widgets import vuetify3 as vuetify, trame, matplotlib
7+
8+
# -----------------------------------------------------------------------------
9+
# Trame setup
10+
# -----------------------------------------------------------------------------
11+
12+
server = get_server(client_type="vue3")
13+
state, ctrl = server.state, server.controller
14+
15+
# -----------------------------------------------------------------------------
16+
# Chart examples from:
17+
# - http://jakevdp.github.io/blog/2013/12/19/a-d3-viewer-for-matplotlib/
18+
# -----------------------------------------------------------------------------
19+
20+
21+
def figure_size():
22+
if state.figure_size is None:
23+
return {}
24+
25+
dpi = state.figure_size.get("dpi")
26+
rect = state.figure_size.get("size")
27+
w_inch = rect.get("width") / dpi / 2
28+
h_inch = rect.get("height") / dpi / 2
29+
30+
return {
31+
"figsize": (w_inch, h_inch),
32+
"dpi": dpi,
33+
}
34+
35+
36+
def FirstDemo():
37+
plt.close("all")
38+
fig, ax = plt.subplots(**figure_size())
39+
np.random.seed(0)
40+
ax.plot(
41+
np.random.normal(size=100), np.random.normal(size=100), "or", ms=10, alpha=0.3
42+
)
43+
ax.plot(
44+
np.random.normal(size=100), np.random.normal(size=100), "ob", ms=20, alpha=0.1
45+
)
46+
47+
ax.set_xlabel("this is x")
48+
ax.set_ylabel("this is y")
49+
ax.set_title("Matplotlib Plot Rendered in D3!", size=14)
50+
ax.grid(color="lightgray", alpha=0.7)
51+
52+
return fig
53+
54+
55+
# -----------------------------------------------------------------------------
56+
57+
58+
def MultiLines():
59+
plt.close("all")
60+
fig, ax = plt.subplots(**figure_size())
61+
x = np.linspace(0, 10, 1000)
62+
for offset in np.linspace(0, 3, 7):
63+
ax.plot(x, 0.9 * np.sin(x - offset), lw=5, alpha=0.4)
64+
ax.set_ylim(-1.2, 1.0)
65+
ax.text(5, -1.1, "Here are some curves", size=18)
66+
ax.grid(color="lightgray", alpha=0.7)
67+
68+
return fig
69+
70+
71+
# -----------------------------------------------------------------------------
72+
73+
74+
def DotsandPoints():
75+
plt.close("all")
76+
fig, ax = plt.subplots(**figure_size())
77+
ax.plot(
78+
np.random.rand(20),
79+
"-o",
80+
alpha=0.5,
81+
color="black",
82+
linewidth=5,
83+
markerfacecolor="green",
84+
markeredgecolor="lightgreen",
85+
markersize=20,
86+
markeredgewidth=10,
87+
)
88+
ax.grid(True, color="#EEEEEE", linestyle="solid")
89+
ax.set_xlim(-2, 22)
90+
ax.set_ylim(-0.1, 1.1)
91+
92+
return fig
93+
94+
95+
# -----------------------------------------------------------------------------
96+
97+
98+
def MovingWindowAverage():
99+
np.random.seed(0)
100+
t = np.linspace(0, 10, 300)
101+
x = np.sin(t)
102+
dx = np.random.normal(0, 0.3, 300)
103+
104+
kernel = np.ones(25) / 25.0
105+
x_smooth = np.convolve(x + dx, kernel, mode="same")
106+
plt.close("all")
107+
fig, ax = plt.subplots(**figure_size())
108+
ax.plot(t, x + dx, linestyle="", marker="o", color="black", markersize=3, alpha=0.3)
109+
ax.plot(t, x_smooth, "-k", lw=3)
110+
ax.plot(t, x, "--", lw=3, color="blue")
111+
112+
return fig
113+
114+
115+
# -----------------------------------------------------------------------------
116+
117+
118+
def Subplots():
119+
plt.close("all")
120+
fig = plt.figure(**figure_size())
121+
fig.subplots_adjust(hspace=0.3)
122+
123+
np.random.seed(0)
124+
125+
for i in range(1, 5):
126+
ax = fig.add_subplot(2, 2, i)
127+
color = np.random.random(3)
128+
ax.plot(np.random.random(30), lw=2, c=color)
129+
ax.set_title("RGB = ({0:.2f}, {1:.2f}, {2:.2f})".format(*color), size=14)
130+
ax.grid(color="lightgray", alpha=0.7)
131+
132+
return fig
133+
134+
135+
# -----------------------------------------------------------------------------
136+
# Callbacks
137+
# -----------------------------------------------------------------------------
138+
139+
140+
@state.change("active_figure", "figure_size")
141+
def update_chart(active_figure, **kwargs):
142+
ctrl.update_figure(globals()[active_figure]())
143+
144+
145+
# -----------------------------------------------------------------------------
146+
# UI
147+
# -----------------------------------------------------------------------------
148+
149+
state.trame__title = "Matplotly"
150+
151+
with SinglePageLayout(server) as layout:
152+
layout.title.set_text("trame ❤️ matplotlib")
153+
154+
with layout.toolbar:
155+
vuetify.VSpacer()
156+
vuetify.VSelect(
157+
v_model=("active_figure", "FirstDemo"),
158+
items=(
159+
"figures",
160+
[
161+
{"title": "First Demo", "value": "FirstDemo"},
162+
{"title": "Multi Lines", "value": "MultiLines"},
163+
{"title": "Dots and Points", "value": "DotsandPoints"},
164+
{"title": "Moving Window Average", "value": "MovingWindowAverage"},
165+
{"title": "Subplots", "value": "Subplots"},
166+
],
167+
),
168+
hide_details=True,
169+
dense="compact",
170+
)
171+
172+
with layout.content:
173+
with vuetify.VContainer(fluid=True, classes="fill-height pa-0 ma-0"):
174+
with trame.SizeObserver("figure_size"):
175+
html_figure = matplotlib.Figure(style="position: absolute")
176+
ctrl.update_figure = html_figure.update
177+
178+
# -----------------------------------------------------------------------------
179+
# Main
180+
# -----------------------------------------------------------------------------
181+
182+
if __name__ == "__main__":
183+
server.start()

‎setup.cfg‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ packages = find:
2828
include_package_data = True
2929
install_requires =
3030
trame-client
31+
mpld3
3132

3233
[semantic_release]
3334
version_pattern = setup.cfg:version = (\d+\.\d+\.\d+)

0 commit comments

Comments
 (0)