mirror of
https://github.com/pyscript/pyscript.git
synced 2022-05-01 19:47:48 +03:00
Merge branch 'main' into mattpap/allow_pyscript_block_offset
This commit is contained in:
Fabio Pliger
169
pyscriptjs/examples/d3.html
Normal file
169
pyscriptjs/examples/d3.html
Normal file
@@ -0,0 +1,169 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>d3: JavaScript & PyScript visualizations side-by-side</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../build/pyscript.css" />
|
||||||
|
<script defer src="../build/pyscript.js"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.loading {
|
||||||
|
display: inline-block;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border: 3px solid rgba(255, 255, 255, 0.3);
|
||||||
|
border-radius: 50%;
|
||||||
|
border-top-color: black;
|
||||||
|
animation: spin 1s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<b>
|
||||||
|
Based on <i><a href="https://observablehq.com/@d3/learn-d3-shapes?collection=@d3/learn-d3>">Learn D3: Shapes</a></i> tutorial.
|
||||||
|
</b>
|
||||||
|
<div style="display: flex; flex-direction: row">
|
||||||
|
<div>
|
||||||
|
<div style="text-align: center">JavaScript version</div>
|
||||||
|
<div id="js" style="width: 400px; height: 400px">
|
||||||
|
<div class="loading"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div style="text-align: center">PyScript version</div>
|
||||||
|
<div id="py" style="width: 400px; height: 400px">
|
||||||
|
<div class="loading"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="importmap">
|
||||||
|
{
|
||||||
|
"imports": {
|
||||||
|
"d3": "https://cdn.skypack.dev/d3@7"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
import * as d3 from "d3"
|
||||||
|
|
||||||
|
const fruits = [
|
||||||
|
{name: "🍊", count: 21},
|
||||||
|
{name: "🍇", count: 13},
|
||||||
|
{name: "🍏", count: 8},
|
||||||
|
{name: "🍌", count: 5},
|
||||||
|
{name: "🍐", count: 3},
|
||||||
|
{name: "🍋", count: 2},
|
||||||
|
{name: "🍎", count: 1},
|
||||||
|
{name: "🍉", count: 1},
|
||||||
|
]
|
||||||
|
|
||||||
|
const fn = (d) => d.count
|
||||||
|
const data = d3.pie().value(fn)(fruits)
|
||||||
|
|
||||||
|
const arc = d3.arc()
|
||||||
|
.innerRadius(210)
|
||||||
|
.outerRadius(310)
|
||||||
|
.padRadius(300)
|
||||||
|
.padAngle(2 / 300)
|
||||||
|
.cornerRadius(8)
|
||||||
|
|
||||||
|
const js = d3.select("#js")
|
||||||
|
js.select(".loading").remove()
|
||||||
|
|
||||||
|
const svg = js
|
||||||
|
.append("svg")
|
||||||
|
.attr("viewBox", "-320 -320 640 640")
|
||||||
|
.attr("width", "400")
|
||||||
|
.attr("height", "400")
|
||||||
|
|
||||||
|
for (const d of data) {
|
||||||
|
svg.append("path")
|
||||||
|
.style("fill", "steelblue")
|
||||||
|
.attr("d", arc(d))
|
||||||
|
|
||||||
|
const text = svg.append("text")
|
||||||
|
.style("fill", "white")
|
||||||
|
.attr("transform", `translate(${arc.centroid(d).join(",")})`)
|
||||||
|
.attr("text-anchor", "middle")
|
||||||
|
|
||||||
|
text.append("tspan")
|
||||||
|
.style("font-size", "24")
|
||||||
|
.attr("x", "0").text(d.data.name)
|
||||||
|
|
||||||
|
text.append("tspan")
|
||||||
|
.style("font-size", "18")
|
||||||
|
.attr("x", "0")
|
||||||
|
.attr("dy", "1.3em")
|
||||||
|
.text(d.value)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<py-script>
|
||||||
|
from pyodide import create_proxy, to_js
|
||||||
|
from esm import d3
|
||||||
|
|
||||||
|
fruits = [
|
||||||
|
dict(name="🍊", count=21),
|
||||||
|
dict(name="🍇", count=13),
|
||||||
|
dict(name="🍏", count=8),
|
||||||
|
dict(name="🍌", count=5),
|
||||||
|
dict(name="🍐", count=3),
|
||||||
|
dict(name="🍋", count=2),
|
||||||
|
dict(name="🍎", count=1),
|
||||||
|
dict(name="🍉", count=1),
|
||||||
|
]
|
||||||
|
|
||||||
|
fn = create_proxy(lambda d, *_: d["count"])
|
||||||
|
data = d3.pie().value(fn)(to_js(fruits))
|
||||||
|
|
||||||
|
arc = (d3.arc()
|
||||||
|
.innerRadius(210)
|
||||||
|
.outerRadius(310)
|
||||||
|
.padRadius(300)
|
||||||
|
.padAngle(2 / 300)
|
||||||
|
.cornerRadius(8))
|
||||||
|
|
||||||
|
py = d3.select("#py")
|
||||||
|
py.select(".loading").remove()
|
||||||
|
|
||||||
|
svg = (py
|
||||||
|
.append("svg")
|
||||||
|
.attr("viewBox", "-320 -320 640 640")
|
||||||
|
.attr("width", "400")
|
||||||
|
.attr("height", "400"))
|
||||||
|
|
||||||
|
for d in data:
|
||||||
|
d_py = d.to_py()
|
||||||
|
|
||||||
|
(svg.append("path")
|
||||||
|
.style("fill", "steelblue")
|
||||||
|
.attr("d", arc(d)))
|
||||||
|
|
||||||
|
text = (svg.append("text")
|
||||||
|
.style("fill", "white")
|
||||||
|
.attr("transform", f"translate({arc.centroid(d).join(',')})")
|
||||||
|
.attr("text-anchor", "middle"))
|
||||||
|
|
||||||
|
(text.append("tspan")
|
||||||
|
.style("font-size", "24")
|
||||||
|
.attr("x", "0")
|
||||||
|
.text(d_py["data"]["name"]))
|
||||||
|
|
||||||
|
(text.append("tspan")
|
||||||
|
.style("font-size", "18")
|
||||||
|
.attr("x", "0")
|
||||||
|
.attr("dy", "1.3em")
|
||||||
|
.text(d_py["value"]))
|
||||||
|
</py-script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -30,22 +30,31 @@
|
|||||||
WARNING: This examples takes a little longer to load. So be patient :)
|
WARNING: This examples takes a little longer to load. So be patient :)
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<h2 class="text-2xl font-bold text-blue-600"><a href="./panel_stream.html" target=”_blank”>Streaming Demo in Panel</a></h2>
|
||||||
|
<p>Interactive Streaming Table and Bokeh plot using Panel
|
||||||
|
|
||||||
|
WARNING: This examples takes a little longer to load. So be patient :)
|
||||||
|
</p>
|
||||||
|
|
||||||
<h2 class="text-2xl font-bold text-blue-600"><a href="./panel.html" target=”_blank”>Simple Panel Demo</a></h2>
|
<h2 class="text-2xl font-bold text-blue-600"><a href="./panel.html" target=”_blank”>Simple Panel Demo</a></h2>
|
||||||
<p>Simple demo showing Panel widgets interating with parts of the page
|
<p>Simple demo showing Panel widgets interating with parts of the page
|
||||||
|
|
||||||
WARNING: This examples takes a little longer to load. So be patient :)
|
WARNING: This examples takes a little longer to load. So be patient :)
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<h2 class="text-2xl font-bold text-blue-600"><a href="./d3.html" target=”_blank”>Simple d3 visualization</a></h2>
|
||||||
|
<p>Minimal d3 demo demonstrating how to create a visualization</p>
|
||||||
|
|
||||||
|
|
||||||
<h2 class="text-2xl font-bold text-blue-600"><a href="./repl.html" target=”_blank”>REPL</a></h2>
|
<h2 class="text-2xl font-bold text-blue-600"><a href="./repl.html" target=”_blank”>REPL</a></h2>
|
||||||
<p>A Python REPL (Read Eval Print Loop). </p>
|
<p>A Python REPL (Read Eval Print Loop). </p>
|
||||||
|
|
||||||
<h2 class="text-2xl font-bold text-blue-600"><a href="./repl2.html" target=”_blank”>REPL2</a></h2>
|
<h2 class="text-2xl font-bold text-blue-600"><a href="./repl2.html" target=”_blank”>REPL2</a></h2>
|
||||||
<p>A Python REPL (Read Eval Print Loop) with slightly better formatting.</p>
|
<p>A Python REPL (Read Eval Print Loop) with slightly better formatting.</p>
|
||||||
|
|
||||||
<h2 class="text-2xl font-bold text-blue-600"><a href="./simple_script.html" target=”_blank”>Simple script</a></h2>
|
<h2 class="text-2xl font-bold text-blue-600"><a href="./simple_script.html" target=”_blank”>Simple script</a></h2>
|
||||||
<p>A static demo of the <code><py-script></code> tag</p>
|
<p>A static demo of the <code><py-script></code> tag</p>
|
||||||
|
|
||||||
<h2 class="text-2xl font-bold text-blue-600"><a href="./simple_script2.html" target=”_blank”>Simple script 2</a></h2>
|
<h2 class="text-2xl font-bold text-blue-600"><a href="./simple_script2.html" target=”_blank”>Simple script 2</a></h2>
|
||||||
<p>A dynamic demo of the <code><py-script></code> tag</p>
|
<p>A dynamic demo of the <code><py-script></code> tag</p>
|
||||||
|
|
||||||
|
|||||||
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>
|
||||||
@@ -39,7 +39,11 @@ export class PyEnv extends HTMLElement {
|
|||||||
|
|
||||||
let env = [];
|
let env = [];
|
||||||
let paths = [];
|
let paths = [];
|
||||||
|
|
||||||
this.environment = jsyaml.load(this.code);
|
this.environment = jsyaml.load(this.code);
|
||||||
|
if (this.environment === undefined)
|
||||||
|
return
|
||||||
|
|
||||||
for (let entry of this.environment) {
|
for (let entry of this.environment) {
|
||||||
if (typeof entry == "string" ){
|
if (typeof entry == "string" ){
|
||||||
env.push(entry);
|
env.push(entry);
|
||||||
|
|||||||
@@ -45,6 +45,11 @@ function htmlDecode(input) {
|
|||||||
return doc.documentElement.textContent;
|
return doc.documentElement.textContent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// TODO: use type declaractions
|
||||||
|
type PyodideInterface = {
|
||||||
|
registerJsModule(name: string, module: object): void
|
||||||
|
}
|
||||||
|
|
||||||
class Script {
|
class Script {
|
||||||
source: string;
|
source: string;
|
||||||
state: string;
|
state: string;
|
||||||
@@ -241,13 +246,46 @@ export class PyScript extends HTMLElement {
|
|||||||
// pkg.do_something();
|
// pkg.do_something();
|
||||||
}
|
}
|
||||||
|
|
||||||
async evaluate() {
|
protected async _register_esm(pyodide: PyodideInterface): Promise<void> {
|
||||||
|
const imports: {[key: string]: unknown} = {}
|
||||||
|
|
||||||
|
for (const node of document.querySelectorAll("script[type='importmap']")) {
|
||||||
|
const importmap = (() => {
|
||||||
|
try {
|
||||||
|
return JSON.parse(node.textContent)
|
||||||
|
} catch {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
})()
|
||||||
|
|
||||||
|
if (importmap?.imports == null)
|
||||||
|
continue
|
||||||
|
|
||||||
|
for (const [name, url] of Object.entries(importmap.imports)) {
|
||||||
|
if (typeof name != "string" || typeof url != "string")
|
||||||
|
continue
|
||||||
|
|
||||||
|
try {
|
||||||
|
// XXX: pyodide doesn't like Module(), failing with
|
||||||
|
// "can't read 'name' of undefined" at import time
|
||||||
|
imports[name] = {...await import(url)}
|
||||||
|
} catch {
|
||||||
|
console.error(`failed to fetch '${url}' for '${name}'`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pyodide.registerJsModule("esm", imports)
|
||||||
|
}
|
||||||
|
|
||||||
|
async evaluate(): Promise<void> {
|
||||||
console.log('evaluate');
|
console.log('evaluate');
|
||||||
|
|
||||||
if (this.source){
|
if (this.source){
|
||||||
this.loadFromFile(this.source)
|
this.loadFromFile(this.source)
|
||||||
}else{
|
}else{
|
||||||
let pyodide = await pyodideReadyPromise;
|
const pyodide = await pyodideReadyPromise;
|
||||||
|
await this._register_esm(pyodide)
|
||||||
// debugger
|
// debugger
|
||||||
try {
|
try {
|
||||||
function ltrim(code: string): string {
|
function ltrim(code: string): string {
|
||||||
|
|||||||
Reference in New Issue
Block a user