mirror of
https://github.com/pyscript/pyscript.git
synced 2022-05-01 19:47:48 +03:00
Merge pull request #22 from anaconda/panel_stream
Add Panel streaming example
This commit is contained in:
Fabio Pliger
128
pyscriptjs/examples/panel_stream.html
Normal file
128
pyscriptjs/examples/panel_stream.html
Normal file
@@ -0,0 +1,128 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>PyScript/Panel Streaming Demo</title>
|
||||
|
||||
<link rel="icon" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.11/dist/icons/favicon.ico" type="">
|
||||
<meta name="name" content="PyScript/Panel Streaming Demo">
|
||||
|
||||
<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-rc.11/dist/css/widgets.css" type="text/css" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.11/dist/css/markdown.css" type="text/css" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.11/dist/css/loading.css" type="text/css" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.11/dist/css/dataframe.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-rc.11/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-rc.11/dist/bundled/bootstraptemplate/bootstrap.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.11/dist/bundled/defaulttheme/default.css">
|
||||
|
||||
<style>
|
||||
#sidebar {
|
||||
width: 350px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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>
|
||||
|
||||
<link rel="stylesheet" href="build/pyscript.css" />
|
||||
<script defer src="build/pyscript.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<py-env>
|
||||
- bokeh
|
||||
- numpy
|
||||
- pandas
|
||||
- scikit-learn
|
||||
</py-env>
|
||||
|
||||
<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" style="" id="header">
|
||||
<button type="button" class="navbar-toggle collapsed" id="sidebarCollapse">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="app-header">
|
||||
<a class="title" href="/" > Panel</a>
|
||||
<span class="title"> -</span>
|
||||
<a class="title" href="" > Pyscript Streaming Demo</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="row overflow-hidden" id="content">
|
||||
<div class="col mh-100 float-left" id="main">
|
||||
<div class="bk-root" id="controls" data-root-id="1009"></div>
|
||||
<div class="row">
|
||||
<div class="bk-root" id="table" data-root-id="1010"></div>
|
||||
<div class="bk-root" id="plot" data-root-id="1011"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<py-script>
|
||||
import asyncio
|
||||
import micropip
|
||||
|
||||
await micropip.install(['panel==0.13.0rc11', 'altair'])
|
||||
|
||||
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)
|
||||
|
||||
def color_negative_red(val):
|
||||
"""
|
||||
Takes a scalar and returns a string with
|
||||
the css property `'color: red'` for negative
|
||||
strings, black otherwise.
|
||||
"""
|
||||
color = 'red' if val < 0 else 'green'
|
||||
return 'color: %s' % color
|
||||
|
||||
tabulator.style.applymap(color_negative_red)
|
||||
|
||||
p = figure(height=450, width=600)
|
||||
|
||||
cds = ColumnDataSource(data=ColumnDataSource.from_df(df))
|
||||
|
||||
p.line('index', 'A', source=cds, line_color='red')
|
||||
p.line('index', 'B', source=cds, line_color='green')
|
||||
p.line('index', 'C', source=cds, line_color='blue')
|
||||
p.line('index', 'D', source=cds, line_color='purple')
|
||||
|
||||
def stream():
|
||||
data = df.iloc[-1] + np.random.randn(4)
|
||||
tabulator.stream(data, rollover=rollover.value, follow=follow.value)
|
||||
value = {k: [v] for k, v in tabulator.value.iloc[-1].to_dict().items()}
|
||||
value['index'] = [tabulator.value.index[-1]]
|
||||
cds.stream(value)
|
||||
|
||||
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')
|
||||
</py-script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user