-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3 from Kitware/vue3
feat(vue23): Support vue2 and vue3 with latest plotly lib
- Loading branch information
Showing
26 changed files
with
14,610 additions
and
25,843 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
trame | ||
plotly | ||
pandas |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,236 @@ | ||
import plotly.graph_objects as go | ||
import plotly.figure_factory as ff | ||
|
||
from trame.app import get_server | ||
from trame.ui.vuetify import SinglePageLayout | ||
from trame.widgets import vuetify, plotly | ||
|
||
import numpy as np | ||
import pandas as pd | ||
|
||
# ----------------------------------------------------------------------------- | ||
# Trame setup | ||
# ----------------------------------------------------------------------------- | ||
|
||
server = get_server() | ||
server.client_type = "vue2" | ||
state, ctrl = server.state, server.controller | ||
|
||
# ----------------------------------------------------------------------------- | ||
# Charts handling | ||
# ----------------------------------------------------------------------------- | ||
|
||
contour_raw_data = pd.read_json( | ||
"https://raw.githubusercontent.com/plotly/datasets/master/contour_data.json" | ||
) | ||
scatter_raw_data = pd.read_json( | ||
"https://raw.githubusercontent.com/plotly/datasets/master/scatter_data.json" | ||
) | ||
polar_data = pd.read_csv( | ||
"https://raw.githubusercontent.com/plotly/datasets/master/polar_dataset.csv" | ||
) | ||
|
||
scatter_data = scatter_raw_data["Data"] | ||
|
||
|
||
def clean_data(data_in): | ||
""" | ||
Cleans data in a format which can be conveniently | ||
used for drawing traces. Takes a dictionary as the | ||
input, and returns a list in the following format: | ||
input = {'key': ['a b c']} | ||
output = [key, [a, b, c]] | ||
""" | ||
key = list(data_in.keys())[0] | ||
data_out = [key] | ||
for i in data_in[key]: | ||
data_out.append(list(map(float, i.split(" ")))) | ||
|
||
return data_out | ||
|
||
|
||
def create_ternary_fig(**kwargs): | ||
contour_dict = contour_raw_data["Data"] | ||
|
||
# Defining a colormap: | ||
colors = [ | ||
"#8dd3c7", | ||
"#ffffb3", | ||
"#bebada", | ||
"#fb8072", | ||
"#80b1d3", | ||
"#fdb462", | ||
"#b3de69", | ||
"#fccde5", | ||
"#d9d9d9", | ||
"#bc80bd", | ||
] | ||
colors_iterator = iter(colors) | ||
|
||
fig = go.Figure() | ||
|
||
for raw_data in contour_dict: | ||
data = clean_data(raw_data) | ||
|
||
a = [inner_data[0] for inner_data in data[1:]] | ||
a.append(data[1][0]) # Closing the loop | ||
|
||
b = [inner_data[1] for inner_data in data[1:]] | ||
b.append(data[1][1]) # Closing the loop | ||
|
||
c = [inner_data[2] for inner_data in data[1:]] | ||
c.append(data[1][2]) # Closing the loop | ||
|
||
fig.add_trace( | ||
go.Scatterternary( | ||
text=data[0], | ||
a=a, | ||
b=b, | ||
c=c, | ||
mode="lines", | ||
line=dict(color="#444", shape="spline"), | ||
fill="toself", | ||
fillcolor=colors_iterator.__next__(), | ||
) | ||
) | ||
|
||
fig.update_layout( | ||
margin=dict(l=50, r=50, t=50, b=50), | ||
) | ||
return fig | ||
|
||
|
||
def create_polar_fig(**kwargs): | ||
fig = go.Figure() | ||
fig.add_trace( | ||
go.Scatterpolar( | ||
r=polar_data["x1"].tolist(), | ||
theta=polar_data["y"].tolist(), | ||
mode="lines", | ||
name="Figure 8", | ||
line_color="peru", | ||
) | ||
) | ||
fig.add_trace( | ||
go.Scatterpolar( | ||
r=polar_data["x2"].tolist(), | ||
theta=polar_data["y"].tolist(), | ||
mode="lines", | ||
name="Cardioid", | ||
line_color="darkviolet", | ||
) | ||
) | ||
fig.add_trace( | ||
go.Scatterpolar( | ||
r=polar_data["x3"].tolist(), | ||
theta=polar_data["y"].tolist(), | ||
mode="lines", | ||
name="Hypercardioid", | ||
line_color="deepskyblue", | ||
) | ||
) | ||
|
||
fig.update_layout( | ||
# title = 'Mic Patterns', | ||
margin=dict(l=20, r=20, t=20, b=20), | ||
showlegend=False, | ||
) | ||
return fig | ||
|
||
|
||
def create_streamline_fig(**kwargs): | ||
x = np.linspace(-3, 3, 100) | ||
y = np.linspace(-3, 3, 100) | ||
Y, X = np.meshgrid(x, y) | ||
u = -1 - X**2 + Y | ||
v = 1 + X - Y**2 | ||
|
||
# Create streamline figure | ||
fig = ff.create_streamline( | ||
x.tolist(), | ||
y.tolist(), | ||
u.tolist(), | ||
v.tolist(), | ||
arrow_scale=0.1, | ||
) | ||
fig.update_layout( | ||
# title = 'Mic Patterns', | ||
margin=dict(l=20, r=20, t=10, b=10), | ||
showlegend=False, | ||
) | ||
return fig | ||
|
||
|
||
def create_contour_fig(**kwargs): | ||
fig = go.Figure( | ||
data=go.Contour( | ||
z=[ | ||
[2, 4, 7, 12, 13, 14, 15, 16], | ||
[3, 1, 6, 11, 12, 13, 16, 17], | ||
[4, 2, 7, 7, 11, 14, 17, 18], | ||
[5, 3, 8, 8, 13, 15, 18, 19], | ||
[7, 4, 10, 9, 16, 18, 20, 19], | ||
[9, 10, 5, 27, 23, 21, 21, 21], | ||
[11, 14, 17, 26, 25, 24, 23, 22], | ||
], | ||
contours={ | ||
"coloring": "heatmap", | ||
"showlabels": True, | ||
"labelfont": { | ||
"size": 12, | ||
"color": "black", | ||
}, | ||
}, | ||
line_smoothing=1, | ||
) | ||
) | ||
fig.update_layout( | ||
# title = 'Mic Patterns', | ||
margin=dict(l=20, r=20, t=10, b=10), | ||
showlegend=False, | ||
) | ||
return fig | ||
|
||
|
||
# ----------------------------------------------------------------------------- | ||
# GUI | ||
# ----------------------------------------------------------------------------- | ||
|
||
|
||
state.trame__title = "Charts" | ||
|
||
with SinglePageLayout(server) as layout: | ||
layout.title.set_text("Many charts") | ||
|
||
with layout.content: | ||
with vuetify.VContainer(fluid=True, classes="fill-height"): | ||
with vuetify.VRow(style="height: 50%;"): | ||
with vuetify.VCol(): | ||
plotly.Figure( | ||
create_polar_fig(), | ||
display_mode_bar=("false",), | ||
) | ||
with vuetify.VCol(): | ||
plotly.Figure( | ||
create_ternary_fig(), | ||
display_mode_bar=("false",), | ||
) | ||
with vuetify.VRow(style="height: 50%;"): | ||
with vuetify.VCol(): | ||
plotly.Figure( | ||
create_contour_fig(), | ||
display_mode_bar=("false",), | ||
) | ||
with vuetify.VCol(): | ||
plotly.Figure( | ||
create_streamline_fig(), | ||
display_mode_bar=("false",), | ||
) | ||
|
||
# ----------------------------------------------------------------------------- | ||
# Main | ||
# ----------------------------------------------------------------------------- | ||
|
||
if __name__ == "__main__": | ||
server.start() |
Oops, something went wrong.