mirror of
https://github.com/pyscript/pyscript.git
synced 2025-12-23 12:12:59 -05:00
Update panel examples to panel 0.13.1 (#458)
* Update panel examples to panel 0.13.1 * More indent
This commit is contained in:
Philipp Rudiger
@@ -6,20 +6,19 @@
|
||||
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@holoviz/panel@0.13.0-rc.10/dist/panel.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@holoviz/panel@0.13.1/dist/panel.min.js"></script>
|
||||
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
|
||||
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<py-env>
|
||||
- bokeh
|
||||
- numpy
|
||||
- panel==0.13.1a2
|
||||
- panel==0.13.1
|
||||
</py-env>
|
||||
<body>
|
||||
<h1>Panel Example</h1>
|
||||
<div id="myplot"></div>
|
||||
<div id="simple_app"></div>
|
||||
<py-script>
|
||||
import asyncio
|
||||
import panel as pn
|
||||
|
||||
slider = pn.widgets.FloatSlider(start=0, end=10, name='Amplitude')
|
||||
@@ -27,9 +26,7 @@ slider = pn.widgets.FloatSlider(start=0, end=10, name='Amplitude')
|
||||
def callback(new):
|
||||
return f'Amplitude is: {new}'
|
||||
|
||||
row = pn.Row(slider, pn.bind(callback, slider))
|
||||
|
||||
await pn.io.pyodide.show(row, 'myplot')
|
||||
pn.Row(slider, pn.bind(callback, slider)).servable(target='simple_app');
|
||||
</py-script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -12,8 +12,8 @@
|
||||
<link rel="icon" type="image/x-icon" href="./favicon.png">
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" type="text/css" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/widgets.css" type="text/css" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/markdown.css" type="text/css" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.1/dist/css/widgets.css" type="text/css" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.1/dist/css/markdown.css" type="text/css" />
|
||||
|
||||
<script type="text/javascript" src="https://unpkg.com/h3-js@3.7.2/dist/h3-js.umd.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/deck.gl@8.6.7/dist.min.js"></script>
|
||||
@@ -25,30 +25,32 @@
|
||||
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/@holoviz/panel@0.13.0/dist/panel.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/@holoviz/panel@0.13.1/dist/panel.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/bundled/bootstraptemplate/bootstrap.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/bundled/defaulttheme/default.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.1/dist/bundled/bootstraptemplate/bootstrap.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.1/dist/bundled/defaulttheme/default.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<style>
|
||||
#sidebar {
|
||||
width: 400px;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
|
||||
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<py-env>
|
||||
- bokeh
|
||||
- numpy
|
||||
- pandas
|
||||
- panel==0.13.1a2
|
||||
- panel==0.13.1
|
||||
</py-env>
|
||||
|
||||
<body>
|
||||
<div class="container-fluid d-flex flex-column vh-100 overflow-hidden" id="container">
|
||||
<nav class="navbar navbar-expand-md navbar-dark sticky-top shadow" id="header" style="background-color: #000000;">
|
||||
<button type="button" class="navbar-toggle collapsed" id="sidebarCollapse">
|
||||
@@ -62,31 +64,29 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="row overflow-hidden" id="content">
|
||||
<div class="d-flex flex-nowrap" id="content">
|
||||
<div class="sidenav" id="sidebar">
|
||||
<ul class="nav flex-column" >
|
||||
<div class="bk-root" id="widgets"></div>
|
||||
<py-repl id="my-repl" auto-generate="true"> </py-repl>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col mh-100 float-left" style="padding: 0;">
|
||||
<div class="col mh-100" style="padding: 0">
|
||||
<div class="bk-root" id="plot"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<py-script>
|
||||
import asyncio
|
||||
|
||||
import panel as pn
|
||||
import param
|
||||
import pandas as pd
|
||||
import param
|
||||
|
||||
from panel.io.pyodide import show
|
||||
from pyodide.http import open_url
|
||||
|
||||
MAPBOX_KEY = "pk.eyJ1IjoicGFuZWxvcmciLCJhIjoiY2s1enA3ejhyMWhmZjNobjM1NXhtbWRrMyJ9.B_frQsAVepGIe-HiOJeqvQ"
|
||||
|
||||
class App(pn.viewable.Viewer):
|
||||
class App(param.Parameterized):
|
||||
|
||||
data = param.DataFrame(precedence=-1)
|
||||
|
||||
@@ -120,9 +120,6 @@ class App(pn.viewable.Viewer):
|
||||
self._update_hour, 1000//self.speed, start=False
|
||||
)
|
||||
|
||||
def __panel__(self):
|
||||
return self.deck_gl
|
||||
|
||||
@property
|
||||
def spec(self):
|
||||
return {
|
||||
@@ -179,7 +176,7 @@ class App(pn.viewable.Viewer):
|
||||
data = self.data if self.view is None else self.view
|
||||
if not self.deck_gl or not self.deck_gl.click_state:
|
||||
self.arc_view = data.iloc[:0]
|
||||
else:
|
||||
return
|
||||
lon, lat = self.deck_gl.click_state['coordinate']
|
||||
tol = 0.001
|
||||
self.arc_view = data[
|
||||
@@ -218,8 +215,8 @@ df = pd.read_csv(open_url(url))
|
||||
app = App(data=df)
|
||||
controls = pn.Param(app.param, sizing_mode='stretch_width', show_name=False)
|
||||
|
||||
await show(controls, 'widgets')
|
||||
await show(app, 'plot')
|
||||
app.deck_gl.servable(target='plot')
|
||||
controls.servable(target='widgets');
|
||||
</py-script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -12,8 +12,8 @@
|
||||
<link rel="icon" type="image/x-icon" href="./favicon.png">
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" type="text/css" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/widgets.css" type="text/css" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/markdown.css" type="text/css" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.1/dist/css/widgets.css" type="text/css" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.1/dist/css/markdown.css" type="text/css" />
|
||||
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega@5"></script>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
|
||||
@@ -22,14 +22,14 @@
|
||||
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/@holoviz/panel@0.13.0/dist/panel.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/@holoviz/panel@0.13.1/dist/panel.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
Bokeh.set_log_level("info");
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/bundled/bootstraptemplate/bootstrap.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/bundled/defaulttheme/default.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.1/dist/bundled/bootstraptemplate/bootstrap.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.1/dist/bundled/defaulttheme/default.css">
|
||||
|
||||
<style>
|
||||
#sidebar {
|
||||
@@ -49,7 +49,7 @@
|
||||
- numpy
|
||||
- pandas
|
||||
- scikit-learn
|
||||
- panel==0.13.1a2
|
||||
- panel==0.13.1
|
||||
</py-env>
|
||||
|
||||
<body>
|
||||
@@ -81,14 +81,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<py-script>
|
||||
import asyncio
|
||||
|
||||
<py-script>
|
||||
import altair as alt
|
||||
import panel as pn
|
||||
import pandas as pd
|
||||
|
||||
from panel.io.pyodide import show
|
||||
from sklearn.cluster import KMeans
|
||||
from pyodide.http import open_url
|
||||
|
||||
@@ -98,9 +96,9 @@ url = 'https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data
|
||||
penguins = pd.read_csv(open_url(url)).dropna()
|
||||
cols = list(penguins.columns)[2:6]
|
||||
|
||||
x = pn.widgets.Select(name='x', options=cols, value='bill_depth_mm')
|
||||
y = pn.widgets.Select(name='y', options=cols, value='bill_length_mm')
|
||||
n_clusters = pn.widgets.IntSlider(name='n_clusters', start=1, end=5, value=3)
|
||||
x = pn.widgets.Select(name='x', options=cols, value='bill_depth_mm').servable(target='x-widget')
|
||||
y = pn.widgets.Select(name='y', options=cols, value='bill_length_mm').servable(target='y-widget')
|
||||
n_clusters = pn.widgets.IntSlider(name='n_clusters', start=1, end=5, value=3).servable(target='n-widget')
|
||||
|
||||
brush = alt.selection_interval(name='brush') # selection of type "interval"
|
||||
|
||||
@@ -113,7 +111,8 @@ def get_clusters(n_clusters):
|
||||
|
||||
def get_chart(x, y, df):
|
||||
centers = df.groupby('labels').mean()
|
||||
return (alt.Chart(df)
|
||||
return (
|
||||
alt.Chart(df)
|
||||
.mark_point(size=100)
|
||||
.encode(
|
||||
x=alt.X(x, scale=alt.Scale(zero=False)),
|
||||
@@ -126,8 +125,18 @@ def get_chart(x, y, df):
|
||||
.encode(x=x+':Q', y=y+':Q')
|
||||
)
|
||||
|
||||
chart = pn.pane.Vega()
|
||||
table = pn.widgets.Tabulator(pagination='remote', page_size=10)
|
||||
intro = pn.pane.Markdown("""
|
||||
This app provides an example of **building a simple dashboard using
|
||||
Panel**.\n\nIt demonstrates how to take the output of **k-means
|
||||
clustering on the Penguins dataset** using scikit-learn,
|
||||
parameterizing the number of clusters and the variables to
|
||||
plot.\n\nThe plot and the table are linked, i.e. selecting on the plot
|
||||
will filter the data in the table.\n\n The **`x` marks the center** of
|
||||
the cluster.
|
||||
""").servable(target='intro')
|
||||
|
||||
chart = pn.pane.Vega().servable(target='cluster-plot')
|
||||
table = pn.widgets.Tabulator(pagination='remote', page_size=10).servable(target='table')
|
||||
|
||||
def update_table(event=None):
|
||||
table.value = get_clusters(n_clusters.value)
|
||||
@@ -148,24 +157,8 @@ def update_filters(event=None):
|
||||
|
||||
update_table()
|
||||
update_chart()
|
||||
|
||||
intro = """
|
||||
This app provides an example of **building a simple dashboard using
|
||||
Panel**.\n\nIt demonstrates how to take the output of **k-means
|
||||
clustering on the Penguins dataset** using scikit-learn,
|
||||
parameterizing the number of clusters and the variables to
|
||||
plot.\n\nThe plot and the table are linked, i.e. selecting on the plot
|
||||
will filter the data in the table.\n\n The **`x` marks the center** of
|
||||
the cluster.
|
||||
"""
|
||||
|
||||
await show(x, 'x-widget')
|
||||
await show(y, 'y-widget')
|
||||
await show(n_clusters, 'n-widget')
|
||||
await show(intro, 'intro')
|
||||
await show(chart, 'cluster-plot')
|
||||
await show(table, 'table')
|
||||
</py-script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('#sidebarCollapse').on('click', function () {
|
||||
|
||||
@@ -12,21 +12,21 @@
|
||||
<link rel="icon" type="image/x-icon" href="./favicon.ico">
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" type="text/css" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/widgets.css" type="text/css" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/markdown.css" type="text/css" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.1/dist/css/widgets.css" type="text/css" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.1/dist/css/markdown.css" type="text/css" />
|
||||
|
||||
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/@holoviz/panel@0.13.0/dist/panel.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/@holoviz/panel@0.13.1/dist/panel.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
Bokeh.set_log_level("info");
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/bundled/bootstraptemplate/bootstrap.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/bundled/defaulttheme/default.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.1/dist/bundled/bootstraptemplate/bootstrap.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.1/dist/bundled/defaulttheme/default.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
|
||||
@@ -39,7 +39,7 @@
|
||||
- bokeh
|
||||
- numpy
|
||||
- pandas
|
||||
- panel
|
||||
- panel==0.13.1
|
||||
</py-env>
|
||||
|
||||
<body>
|
||||
@@ -66,23 +66,21 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<py-script>
|
||||
import asyncio
|
||||
|
||||
<py-script>
|
||||
import panel as pn
|
||||
import numpy as np
|
||||
import pandas as pd
|
||||
|
||||
from bokeh.models import ColumnDataSource
|
||||
from bokeh.plotting import figure
|
||||
from panel.io.pyodide import show
|
||||
|
||||
df = pd.DataFrame(np.random.randn(10, 4), columns=list('ABCD')).cumsum()
|
||||
|
||||
rollover = pn.widgets.IntInput(name='Rollover', value=15)
|
||||
follow = pn.widgets.Checkbox(name='Follow', value=True, align='end')
|
||||
|
||||
tabulator = pn.widgets.Tabulator(df, height=450, width=400)
|
||||
tabulator = pn.widgets.Tabulator(df, height=450, width=400).servable(target='table')
|
||||
|
||||
def color_negative_red(val):
|
||||
"""
|
||||
@@ -113,11 +111,8 @@ def stream():
|
||||
|
||||
cb = pn.state.add_periodic_callback(stream, 200)
|
||||
|
||||
controls = pn.Row(cb.param.period, rollover, follow, width=400)
|
||||
|
||||
await show(controls, 'controls')
|
||||
await show(tabulator, 'table')
|
||||
await show(p, 'plot')
|
||||
pn.pane.Bokeh(p).servable(target='plot')
|
||||
pn.Row(cb.param.period, rollover, follow, width=400).servable(target='controls')
|
||||
</py-script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user