katanaml.github.io/index.html at main · katanaml/katanaml.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<html>

<head>
    <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">

    <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>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
    <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">
      Bokeh.set_log_level("info");
    </script>

    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <py-env>
        - altair
        - vega_datasets
        - numpy
        - pandas
        - panel==0.13.1a2
        - paths:
            - /chart.py
    </py-env>
</head>

<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: #0f54ea;">
            <div class="app-header">
                <a class="title" href="" style="color: #f7f6f3;">PyScript - Python in the Browser</a>
            </div>
        </nav>

        <div class="row overflow-hidden" id="content">
            <div class="col mh-100 float-left" id="main">
                <div id="search"></div>
                <div id="chart"></div>
                <div id="table"></div>
            </div>
        </div>
    </div>
    <py-script>
import asyncio
import panel as pn
import altair as alt
from vega_datasets import data
from panel.io.pyodide import show
from chart import get_chart

horse_power = pn.widgets.IntInput(value=230, step=1, start=0, end=230)
button = pn.widgets.Button(name='Filter', button_type='primary')
search = pn.Column('# Filter by Horsepower', horse_power, background='White')

cars = data.cars()
table = pn.widgets.Tabulator(pagination='remote', page_size=10)
table.value = cars

chart = pn.pane.Vega()
chart.object = get_chart(cars)

@pn.depends(horse_power, watch=True)
def update_ui(*events):
    chart.object = get_chart(cars[cars['Horsepower'] < horse_power.value])
    table.value = cars[cars['Horsepower'] < horse_power.value]

await show(search, 'search')
await show(chart, 'chart')
await show(table, 'table')
    </py-script>
</body>

</html>