Hugging Face's logo

Spaces:
awesome-panel
/
bootstrap_dashboard
Running

App Files Community
MarcSkovMadsen commited on
Commit
63f8219
·
1 Parent(s): 3d45a11

Upload 2 files

Browse files
Files changed (2) hide show
  1. index.html +359 -18
  2. index.js +176 -0
index.html CHANGED
@@ -1,19 +1,360 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
+ <html lang="en" >
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Bootstrap Dashboard</title>
6
+ <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.holoviz.org/panel/1.3.6/dist/images/apple-touch-icon.png">
7
+ <link rel="icon" href="https://cdn.holoviz.org/panel/1.3.6/dist/images/favicon.ico" type=""><meta name="name" content="Bootstrap Dashboard"> <style>
8
+ html, body {
9
+ display: flow-root;
10
+ box-sizing: border-box;
11
+ height: 100%;
12
+ margin: 0;
13
+ padding: 0;
14
+ }
15
+ </style>
16
+ <link rel="stylesheet" href="https://cdn.holoviz.org/panel/1.3.6/dist/bundled/datatabulator/tabulator-tables@5.5.0/dist/css/tabulator_fast.min.css" type="text/css" />
17
+
18
+ <style type="text/css">
19
+ :host(.pn-loading),
20
+ .pn-loading {
21
+ overflow: hidden;
22
+ }
23
+
24
+ :host(.pn-loading):before,
25
+ .pn-loading:before {
26
+ position: absolute;
27
+ height: 100%;
28
+ width: 100%;
29
+ content: '';
30
+ z-index: 1000;
31
+ background-color: rgb(255, 255, 255, 0.5);
32
+ border-color: lightgray;
33
+ background-repeat: no-repeat;
34
+ background-position: center;
35
+ background-size: auto 50%;
36
+ border-width: 1px;
37
+ cursor: progress;
38
+ }
39
+
40
+ :host(.pn-loading) .pn-loading-msg,
41
+ .pn-loading .pn-loading-msg {
42
+ position: absolute;
43
+ top: 72%;
44
+ font-size: 2em;
45
+ color: black;
46
+ width: 100%;
47
+ text-align: center;
48
+ }
49
+
50
+
51
+ :host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {
52
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=");
53
+ background-size: auto calc(min(50%, 400px));
54
+ }
55
+ </style><script type="text/javascript" src="https://cdn.holoviz.org/panel/1.3.6/dist/bundled/datatabulator/tabulator-tables@5.5.0/dist/js/tabulator.min.js"></script>
56
+ <script type="text/javascript" src="https://cdn.holoviz.org/panel/1.3.6/dist/bundled/datatabulator/luxon/build/global/luxon.min.js"></script>
57
+ <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-3.3.2.min.js"></script>
58
+ <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-3.3.2.min.js"></script>
59
+ <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.3.2.min.js"></script>
60
+ <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-3.3.2.min.js"></script>
61
+ <script type="text/javascript" src="https://cdn.holoviz.org/panel/1.3.6/dist/panel.min.js"></script>
62
+
63
+ <script type="text/javascript">
64
+ Bokeh.set_log_level("info");
65
+ </script><!-- Template CSS -->
66
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
67
+ <link rel="stylesheet" href="https://cdn.holoviz.org/panel/1.3.6/dist/bundled/theme/default.css">
68
+ <link rel="stylesheet" href="https://cdn.holoviz.org/panel/1.3.6/dist/bundled/fastbasetemplate/fast.css">
69
+ <link rel="stylesheet" href="https://cdn.holoviz.org/panel/1.3.6/dist/bundled/fastlisttemplate/fast_list_template.css">
70
+ <style type="text/css">
71
+
72
+ :host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {
73
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=");
74
+ background-size: auto calc(min(50%, 400px));
75
+ }
76
+ </style>
77
+ <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
78
+
79
+ <style>
80
+ :root {
81
+ --background-color: #ffffff;
82
+ --body-font: Open Sans, sans-serif;
83
+ --corner-radius: 3;
84
+ --header-background: #0072B5;
85
+ --header-color: #ffffff;
86
+ --sidebar-width: 330px;
87
+ }
88
+ body {
89
+ color: #2B2B2B;
90
+ background-color: var(--background-color);
91
+ font-family: var(--body-font);
92
+ }
93
+ #header a {
94
+ color: currentColor;
95
+ }
96
+ #header-design-provider {
97
+ --neutral-fill-hover: var(--header-background);
98
+ --neutral-fill-rest: var(--header-background);
99
+ --neutral-foreground-rest: var(--header-color);
100
+ background: var(--header-background);
101
+ color: var(--header-color);
102
+ }
103
+ #sidebar {
104
+ min-width: var(--sidebar-width);
105
+ max-width: var(--sidebar-width);
106
+ background-color: var(--panel-surface-color);
107
+ }
108
+ </style>
109
+
110
+ <!-- Template JS -->
111
+ <script src="https://cdn.holoviz.org/panel/1.3.6/dist/bundled/fastbasetemplate/fast_template.js"></script>
112
+ <script src="https://cdn.holoviz.org/panel/1.3.6/dist/bundled/@microsoft/fast-components@2.30.6/dist/fast-components.js" type="module"></script>
113
+ <script src="https://cdn.holoviz.org/panel/1.3.6/dist/bundled/fast/js/fast_design.js" type="module"></script>
114
+
115
+ <!-- Fast Script -->
116
+ <script type="text/javascript">
117
+ document.addEventListener('DOMContentLoaded', (event) => {
118
+ const header_design = new window.fastDesignProvider("#header-design-provider");
119
+ const body_design = window.bodyDesign = new window.fastDesignProvider("#body-design-provider");
120
+ body_design.setLuminance(1.0);
121
+ body_design.setAccentColor("#0072B5")
122
+ body_design.setNeutralColor("#000000");
123
+ header_design.setLuminance(1.0);
124
+ header_design.setAccentColor("#ffffff");
125
+ header_design.setNeutralColor("#ffffff");
126
+ });
127
+ </script>
128
+ </head>
129
+ <body class="pn-loading pn-arc">
130
+ <fast-design-system-provider id="body-design-provider" use-defaults>
131
+ <div id="container">
132
+ <fast-design-system-provider id="header-design-provider">
133
+ <nav id="header" class="shadow" >
134
+ <div class="app-header">
135
+ <a class="title" href="https://awesome-panel.org" >&nbsp;Awesome Panel</a>
136
+ <span class="title">-</span>
137
+ <a class="title" href="" >Bootstrap Dashboard</a>
138
+ </div>
139
+ <div id="header-items">
140
+ </div>
141
+ <div class="pn-toggle-theme">
142
+ <fast-switch id="theme-switch" style="float: right;" onChange="toggleLightDarkTheme('default')" checked>
143
+ <span slot="checked-message">
144
+ <svg class="theme-toggle-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"/></svg>
145
+ </span>
146
+ <span slot="unchecked-message">
147
+ <svg class="theme-toggle-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 2c-1.82 0-3.53.5-5 1.35C7.99 5.08 10 8.3 10 12s-2.01 6.92-5 8.65C6.47 21.5 8.18 22 10 22c5.52 0 10-4.48 10-10S15.52 2 10 2z"/></svg>
148
+ </span>
149
+ </fast-switch>
150
+ <fast-tooltip anchor="theme-switch" position="bottom">
151
+ Toggle the Theme
152
+ </fast-tooltip>
153
+ </div>
154
+ <div class="pn-busy-container" id="busy-container">
155
+ <div id="fcd5a91b-233b-4bc2-a546-c692edf0e0d6" data-root-id="p1016" style="display: contents;"></div>
156
+ </div>
157
+ <fast-tooltip anchor="busy-container" position="left">
158
+ Busy Indicator
159
+ </fast-tooltip>
160
+ </nav>
161
+ </fast-design-system-provider>
162
+
163
+ <div class="row" id="content">
164
+
165
+ <div class="main" id="main">
166
+ <div class="main-margin" style="max-width: 800px;">
167
+ <div class="card-margin stretch_width">
168
+ <div class="pn-wrapper">
169
+ <span class="fullscreen-button" onclick="toggleFullScreen(this)">
170
+ <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
171
+ <path d="M4.5 11H3v4h4v-1.5H4.5V11zM3 7h1.5V4.5H7V3H3v4zm10.5 6.5H11V15h4v-4h-1.5v2.5zM11 3v1.5h2.5V7H15V3h-4z"/>
172
+ </svg>
173
+ </span>
174
+ <div id="e156abca-04d1-404e-8382-9625f25f55b6" data-root-id="p1017" style="display: contents;"></div>
175
+ </div>
176
+ </div>
177
+ <div class="card-margin stretch_width">
178
+ <div class="pn-wrapper">
179
+ <span class="fullscreen-button" onclick="toggleFullScreen(this)">
180
+ <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
181
+ <path d="M4.5 11H3v4h4v-1.5H4.5V11zM3 7h1.5V4.5H7V3H3v4zm10.5 6.5H11V15h4v-4h-1.5v2.5zM11 3v1.5h2.5V7H15V3h-4z"/>
182
+ </svg>
183
+ </span>
184
+ <div id="c38a18a4-c4d7-4c76-a09c-cab4cd25d51b" data-root-id="p1091" style="display: contents;"></div>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ <fast-dialog id="pn-Modal" hidden>
190
+ <fast-button class="pn-modal-close" id="pn-closeModal">&times;</fast-button>
191
+ <div>
192
+ </div>
193
+ </fast-dialog>
194
+ </div>
195
+ </div>
196
+ </fast-design-system-provider>
197
+
198
+ <script type="text/javascript">
199
+
200
+ </script>
201
+
202
+ <script type="text/javascript">
203
+ function openNav() {
204
+ document.getElementById("sidebar").classList.remove("hidden");
205
+ document.getElementById("sidebar-button").onclick = closeNav;
206
+ }
207
+
208
+ function closeNav() {
209
+ document.getElementById("sidebar").classList.add("hidden");
210
+ document.getElementById("sidebar-button").onclick = openNav;
211
+ }
212
+
213
+ var modal = document.getElementById("pn-Modal");
214
+ var span = document.getElementById("pn-closeModal");
215
+
216
+ span.onclick = function() {
217
+ modal.style.display = "none";
218
+ }
219
+
220
+ window.onclick = function(event) {
221
+ if (event.target == modal) {
222
+ modal.style.display = "none";
223
+ }
224
+ }
225
+ </script>
226
+
227
+ <div id="ffbbecec-c524-426b-92a9-a41a9c848b4b" data-root-id="p1009" style="display: contents;"></div>
228
+ <div id="aaeb1216-8532-41c1-83cb-0942f199daac" data-root-id="p1012" style="display: contents;"></div>
229
+ <div id="ecd46395-4582-4930-ba31-0dc0b10adb40" data-root-id="p1002" style="display: contents;"></div>
230
+ <div id="b964325d-ed82-411b-8756-473dceb6aabb" data-root-id="p1013" style="display: contents;"></div>
231
+
232
+
233
+ <script type="text/javascript">
234
+ const pyodideWorker = new Worker("./index.js");
235
+ pyodideWorker.busy = false
236
+ pyodideWorker.queue = []
237
+
238
+ function send_change(jsdoc, event) {
239
+ if (event.setter_id != null && event.setter_id == 'py') {
240
+ return
241
+ } else if (pyodideWorker.busy && event.model && event.attr) {
242
+ let events = []
243
+ for (const old_event of pyodideWorker.queue) {
244
+ if (!(old_event.model === event.model && old_event.attr === event.attr)) {
245
+ events.push(old_event)
246
+ }
247
+ }
248
+ events.push(event)
249
+ pyodideWorker.queue = events
250
+ return
251
+ }
252
+ const patch = jsdoc.create_json_patch([event])
253
+ pyodideWorker.busy = true
254
+ pyodideWorker.postMessage({type: 'patch', patch: patch})
255
+ }
256
+
257
+ pyodideWorker.onmessage = async (event) => {
258
+ const msg = event.data
259
+
260
+ const body = document.getElementsByTagName('body')[0]
261
+ const loading_msgs = document.getElementsByClassName('pn-loading-msg')
262
+ if (msg.type === 'idle') {
263
+ if (pyodideWorker.queue.length) {
264
+ const patch = pyodideWorker.jsdoc.create_json_patch(pyodideWorker.queue)
265
+ pyodideWorker.busy = true
266
+ pyodideWorker.queue = []
267
+ pyodideWorker.postMessage({type: 'patch', patch: patch})
268
+ } else {
269
+ pyodideWorker.busy = false
270
+ }
271
+ } else if (msg.type === 'status') {
272
+ let loading_msg
273
+ if (loading_msgs.length) {
274
+ loading_msg = loading_msgs[0]
275
+ } else if (body.classList.contains('pn-loading')) {
276
+ loading_msg = document.createElement('div')
277
+ loading_msg.classList.add('pn-loading-msg')
278
+ body.appendChild(loading_msg)
279
+ }
280
+ if (loading_msg != null) {
281
+ loading_msg.innerHTML = msg.msg
282
+ }
283
+ } else if (msg.type === 'render') {
284
+ const docs_json = JSON.parse(msg.docs_json)
285
+ const render_items = JSON.parse(msg.render_items)
286
+ const root_ids = JSON.parse(msg.root_ids)
287
+
288
+ // Remap roots in message to element IDs
289
+ const root_els = document.querySelectorAll('[data-root-id]')
290
+ const data_roots = []
291
+ for (const el of root_els) {
292
+ el.innerHTML = ''
293
+ data_roots.push([el.getAttribute('data-root-id'), el.id])
294
+ }
295
+ data_roots.sort((a, b) => a[0]<b[0] ? -1: 1)
296
+ const roots = {}
297
+ for (let i=0; i<data_roots.length; i++) {
298
+ roots[root_ids[i]] = data_roots[i][1]
299
+ }
300
+ render_items[0]['roots'] = roots
301
+ render_items[0]['root_ids'] = root_ids
302
+
303
+ // Embed content
304
+ const [views] = await Bokeh.embed.embed_items(docs_json, render_items)
305
+
306
+ // Remove loading spinner and message
307
+ body.classList.remove("pn-loading", "arc")
308
+ for (const loading_msg of loading_msgs) {
309
+ loading_msg.remove()
310
+ }
311
+
312
+ // Setup bi-directional syncing
313
+ pyodideWorker.jsdoc = jsdoc = [...views.roots.values()][0].model.document
314
+ jsdoc.on_change(send_change.bind(null, jsdoc), false)
315
+ pyodideWorker.postMessage({'type': 'rendered'})
316
+ pyodideWorker.postMessage({'type': 'location', location: JSON.stringify(window.location)})
317
+ } else if (msg.type === 'patch') {
318
+ pyodideWorker.jsdoc.apply_json_patch(msg.patch, msg.buffers, setter_id='py')
319
+ }
320
+ };
321
+ </script>
322
+ <script type="application/json" id="p1174">
323
+ {"226180fe-a52f-44c3-b35a-c5515dc94d77":{"version":"3.3.2","title":"Bootstrap Dashboard","roots":[{"type":"object","name":"panel.models.location.Location","id":"p1002","attributes":{"name":"location","reload":false}},{"type":"object","name":"panel.models.markup.HTML","id":"p1009","attributes":{"name":"js_area","stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1140","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},{"type":"object","name":"ImportedStyleSheet","id":"p1137","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/bundled/theme/fast.css"}}],"width":0,"height":0,"margin":0,"sizing_mode":"fixed","align":"start","disable_math":true}},{"type":"object","name":"panel.models.reactive_html.ReactiveHTML","id":"p1012","attributes":{"name":"actions","subscribed_events":{"type":"set","entries":["dom_event"]},"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1141","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},{"id":"p1137"}],"margin":0,"align":"start","data":{"type":"object","name":"TemplateActions1","id":"p1010","attributes":{"name":"TemplateActions01100"}},"scripts":{"type":"map","entries":[["open_modal",["document.getElementById(&amp;#x27;pn-Modal&amp;#x27;).style.display = &amp;#x27;block&amp;#x27;"]],["close_modal",["document.getElementById(&amp;#x27;pn-Modal&amp;#x27;).style.display = &amp;#x27;none&amp;#x27;"]]]}}},{"type":"object","name":"panel.models.browser.BrowserInfo","id":"p1013","attributes":{"name":"browser_info"}},{"type":"object","name":"panel.models.markup.HTML","id":"p1016","attributes":{"name":"busy_indicator","css_classes":["loader","light"],"stylesheets":[":host { --loading-spinner-size: 20px; }","\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1142","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},{"type":"object","name":"ImportedStyleSheet","id":"p1143","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loadingspinner.css"}},{"id":"p1137"}],"min_width":20,"min_height":20,"margin":[5,10],"align":"start"}},{"type":"object","name":"panel.models.layout.Column","id":"p1017","attributes":{"name":"main-140462799328784","tags":["main"],"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1144","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},{"type":"object","name":"ImportedStyleSheet","id":"p1145","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/listpanel.css"}},{"id":"p1137"}],"min_width":700,"margin":0,"sizing_mode":"stretch_width","align":"start","children":[{"type":"object","name":"panel.models.markup.HTML","id":"p1020","attributes":{"css_classes":["markdown"],"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1146","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},{"type":"object","name":"ImportedStyleSheet","id":"p1147","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/markdown.css"}},{"id":"p1137"}],"margin":[5,10],"sizing_mode":"stretch_width","align":"start","text":"&amp;lt;h2 id=&amp;quot;dashboard&amp;quot;&amp;gt;Dashboard &amp;lt;a class=&amp;quot;header-anchor&amp;quot; href=&amp;quot;#dashboard&amp;quot;&amp;gt;\u00b6&amp;lt;/a&amp;gt;&amp;lt;/h2&amp;gt;\n"}},{"type":"object","name":"Figure","id":"p1031","attributes":{"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1148","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},{"id":"p1137"}],"width":700,"height":500,"margin":[5,10],"sizing_mode":"fixed","align":"start","x_range":{"type":"object","name":"FactorRange","id":"p1021","attributes":{"tags":[[["Day","Day",null]],[]],"factors":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]}},"y_range":{"type":"object","name":"Range1d","id":"p1022","attributes":{"tags":[[["Orders","Orders",null]],{"type":"map","entries":[["invert_yaxis",false],["autorange",false]]}],"start":12000,"end":26000,"reset_start":12000,"reset_end":26000}},"x_scale":{"type":"object","name":"CategoricalScale","id":"p1041"},"y_scale":{"type":"object","name":"LinearScale","id":"p1042"},"title":{"type":"object","name":"Title","id":"p1034","attributes":{"text_color":"#2B2B2B","text_font":"Open Sans, sans-serif","text_font_size":"1.15em"}},"outline_line_color":"#888888","outline_line_alpha":0.5,"outline_line_width":1,"renderers":[{"type":"object","name":"GlyphRenderer","id":"p1072","attributes":{"data_source":{"type":"object","name":"ColumnDataSource","id":"p1063","attributes":{"selected":{"type":"object","name":"Selection","id":"p1064","attributes":{"indices":[],"line_indices":[]}},"selection_policy":{"type":"object","name":"UnionRenderers","id":"p1065"},"data":{"type":"map","entries":[["Day",["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]],["Orders",{"type":"ndarray","array":{"type":"bytes","data":"szwAAGFTAAAzSAAAw10AAMFbAAAcXgAAAi8AAA=="},"shape":[7],"dtype":"int32","order":"little"}]]}}},"view":{"type":"object","name":"CDSView","id":"p1073","attributes":{"filter":{"type":"object","name":"AllIndices","id":"p1074"}}},"glyph":{"type":"object","name":"Line","id":"p1069","attributes":{"tags":["apply_ranges"],"x":{"type":"field","field":"Day"},"y":{"type":"field","field":"Orders"},"line_color":"#0072B5","line_width":6}},"selection_glyph":{"type":"object","name":"Line","id":"p1075","attributes":{"tags":["apply_ranges"],"x":{"type":"field","field":"Day"},"y":{"type":"field","field":"Orders"},"line_color":"#0072B5","line_width":6}},"nonselection_glyph":{"type":"object","name":"Line","id":"p1070","attributes":{"tags":["apply_ranges"],"x":{"type":"field","field":"Day"},"y":{"type":"field","field":"Orders"},"line_color":"#0072B5","line_alpha":0.1,"line_width":6}},"muted_glyph":{"type":"object","name":"Line","id":"p1071","attributes":{"tags":["apply_ranges"],"x":{"type":"field","field":"Day"},"y":{"type":"field","field":"Orders"},"line_color":"#0072B5","line_alpha":0.2,"line_width":6}}}},{"type":"object","name":"GlyphRenderer","id":"p1085","attributes":{"data_source":{"type":"object","name":"ColumnDataSource","id":"p1076","attributes":{"selected":{"type":"object","name":"Selection","id":"p1077","attributes":{"indices":[],"line_indices":[]}},"selection_policy":{"type":"object","name":"UnionRenderers","id":"p1078"},"data":{"type":"map","entries":[["Day",["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]],["Orders",{"type":"ndarray","array":{"type":"bytes","data":"szwAAGFTAAAzSAAAw10AAMFbAAAcXgAAAi8AAA=="},"shape":[7],"dtype":"int32","order":"little"}]]}}},"view":{"type":"object","name":"CDSView","id":"p1086","attributes":{"filter":{"type":"object","name":"AllIndices","id":"p1087"}}},"glyph":{"type":"object","name":"Scatter","id":"p1082","attributes":{"tags":["apply_ranges"],"x":{"type":"field","field":"Day"},"y":{"type":"field","field":"Orders"},"size":{"type":"value","value":10},"line_color":{"type":"value","value":"#0072B5"},"fill_color":{"type":"value","value":"#0072B5"},"hatch_color":{"type":"value","value":"#0072B5"}}},"selection_glyph":{"type":"object","name":"Scatter","id":"p1088","attributes":{"tags":["apply_ranges"],"x":{"type":"field","field":"Day"},"y":{"type":"field","field":"Orders"},"size":{"type":"value","value":10},"angle":{"type":"value","value":0.0},"line_color":{"type":"value","value":"#0072B5"},"line_alpha":{"type":"value","value":1.0},"line_width":{"type":"value","value":1},"line_join":{"type":"value","value":"bevel"},"line_cap":{"type":"value","value":"butt"},"line_dash":{"type":"value","value":[]},"line_dash_offset":{"type":"value","value":0},"fill_color":{"type":"value","value":"#0072B5"},"fill_alpha":{"type":"value","value":1.0},"hatch_color":{"type":"value","value":"#0072B5"},"hatch_alpha":{"type":"value","value":1.0},"hatch_scale":{"type":"value","value":12.0},"hatch_pattern":{"type":"value","value":null},"hatch_weight":{"type":"value","value":1.0},"marker":{"type":"value","value":"circle"}}},"nonselection_glyph":{"type":"object","name":"Scatter","id":"p1083","attributes":{"tags":["apply_ranges"],"x":{"type":"field","field":"Day"},"y":{"type":"field","field":"Orders"},"size":{"type":"value","value":10},"line_color":{"type":"value","value":"#0072B5"},"line_alpha":{"type":"value","value":0.1},"fill_color":{"type":"value","value":"#0072B5"},"fill_alpha":{"type":"value","value":0.1},"hatch_color":{"type":"value","value":"#0072B5"},"hatch_alpha":{"type":"value","value":0.1}}},"muted_glyph":{"type":"object","name":"Scatter","id":"p1084","attributes":{"tags":["apply_ranges"],"x":{"type":"field","field":"Day"},"y":{"type":"field","field":"Orders"},"size":{"type":"value","value":10},"line_color":{"type":"value","value":"#0072B5"},"line_alpha":{"type":"value","value":0.2},"fill_color":{"type":"value","value":"#0072B5"},"fill_alpha":{"type":"value","value":0.2},"hatch_color":{"type":"value","value":"#0072B5"},"hatch_alpha":{"type":"value","value":0.2}}}}}],"toolbar":{"type":"object","name":"Toolbar","id":"p1040","attributes":{"tools":[{"type":"object","name":"WheelZoomTool","id":"p1026","attributes":{"tags":["hv_created"],"renderers":"auto","zoom_together":"none"}},{"type":"object","name":"HoverTool","id":"p1027","attributes":{"tags":["hv_created"],"renderers":[{"id":"p1072"},{"id":"p1085"}],"tooltips":[["Day","@{Day}"],["Orders","@{Orders}"]]}},{"type":"object","name":"SaveTool","id":"p1053"},{"type":"object","name":"PanTool","id":"p1054"},{"type":"object","name":"BoxZoomTool","id":"p1055","attributes":{"overlay":{"type":"object","name":"BoxAnnotation","id":"p1056","attributes":{"syncable":false,"level":"overlay","visible":false,"left":{"type":"number","value":"nan"},"right":{"type":"number","value":"nan"},"top":{"type":"number","value":"nan"},"bottom":{"type":"number","value":"nan"},"left_units":"canvas","right_units":"canvas","top_units":"canvas","bottom_units":"canvas","line_color":"black","line_alpha":1.0,"line_width":2,"line_dash":[4,4],"fill_color":"lightgrey","fill_alpha":0.5}}}},{"type":"object","name":"ResetTool","id":"p1061"}],"active_drag":{"id":"p1054"},"active_scroll":{"id":"p1026"}}},"toolbar_location":null,"left":[{"type":"object","name":"LinearAxis","id":"p1048","attributes":{"ticker":{"type":"object","name":"FixedTicker","id":"p1062","attributes":{"ticks":[12000,14000,16000,18000,20000,22000,24000],"minor_ticks":[]}},"formatter":{"type":"object","name":"BasicTickFormatter","id":"p1050"},"axis_label":"Orders","axis_label_standoff":10,"axis_label_text_color":"#2B2B2B","axis_label_text_font":"Open Sans, sans-serif","axis_label_text_font_size":"1.25em","axis_label_text_font_style":"normal","major_label_policy":{"type":"object","name":"AllLabels","id":"p1051"},"major_label_text_color":"#2B2B2B","major_label_text_font":"Open Sans, sans-serif","major_label_text_font_size":"1.025em","axis_line_color":"#2B2B2B","axis_line_alpha":0.1,"major_tick_line_color":"#2B2B2B","major_tick_line_alpha":0.5,"minor_tick_line_color":"#2B2B2B","minor_tick_line_alpha":0.25}}],"below":[{"type":"object","name":"CategoricalAxis","id":"p1043","attributes":{"ticker":{"type":"object","name":"CategoricalTicker","id":"p1044"},"formatter":{"type":"object","name":"CategoricalTickFormatter","id":"p1045"},"axis_label":"Day","axis_label_standoff":10,"axis_label_text_color":"#2B2B2B","axis_label_text_font":"Open Sans, sans-serif","axis_label_text_font_size":"1.25em","axis_label_text_font_style":"normal","major_label_policy":{"type":"object","name":"AllLabels","id":"p1046"},"major_label_text_color":"#2B2B2B","major_label_text_font":"Open Sans, sans-serif","major_label_text_font_size":"1.025em","axis_line_color":"#2B2B2B","axis_line_alpha":0.1,"major_tick_line_color":"#2B2B2B","major_tick_line_alpha":0.5,"minor_tick_line_color":"#2B2B2B","minor_tick_line_alpha":0.25}}],"center":[{"type":"object","name":"Grid","id":"p1047","attributes":{"axis":{"id":"p1043"},"ticker":{"id":"p1044"},"grid_line_color":"black","grid_line_alpha":0.25,"grid_line_width":0.1}},{"type":"object","name":"Grid","id":"p1052","attributes":{"dimension":1,"axis":{"id":"p1048"},"ticker":{"id":"p1062"},"grid_line_color":"black","grid_line_alpha":0.25,"grid_line_width":0.1}}],"background_fill_color":"#ffffff","border_fill_color":"#F7F7F7","border_fill_alpha":0,"min_border_top":10,"min_border_bottom":10,"min_border_left":10,"min_border_right":10,"output_backend":"webgl"}}]}},{"type":"object","name":"panel.models.layout.Column","id":"p1091","attributes":{"name":"main-140462751290832","tags":["main"],"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1149","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},{"type":"object","name":"ImportedStyleSheet","id":"p1150","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/listpanel.css"}},{"id":"p1137"}],"margin":0,"sizing_mode":"stretch_width","align":"start","children":[{"type":"object","name":"panel.models.markup.HTML","id":"p1094","attributes":{"css_classes":["markdown"],"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1151","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},{"type":"object","name":"ImportedStyleSheet","id":"p1152","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/markdown.css"}},{"id":"p1137"}],"margin":[5,10],"sizing_mode":"stretch_width","align":"start","text":"&amp;lt;h2 id=&amp;quot;section-title&amp;quot;&amp;gt;Section Title &amp;lt;a class=&amp;quot;header-anchor&amp;quot; href=&amp;quot;#section-title&amp;quot;&amp;gt;\u00b6&amp;lt;/a&amp;gt;&amp;lt;/h2&amp;gt;\n"}},{"type":"object","name":"panel.models.tabulator.DataTabulator","id":"p1132","attributes":{"subscribed_events":{"type":"set","entries":["table-edit","selection-change","cell-click"]},"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1154","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},{"type":"object","name":"ImportedStyleSheet","id":"p1155","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/bundled/font-awesome/css/all.min.css"}},{"id":"p1137"},{"type":"object","name":"ImportedStyleSheet","id":"p1153","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/bundled/datatabulator/tabulator-tables@5.5.0/dist/css/tabulator_fast.min.css"}}],"margin":[5,10],"sizing_mode":"stretch_width","align":"start","configuration":{"type":"map","entries":[["selectable",true],["columns",[{"type":"map","entries":[["field","index"],["sorter","number"]]},{"type":"map","entries":[["field","Header0"],["sorter","number"]]},{"type":"map","entries":[["field","Header1"]]},{"type":"map","entries":[["field","Header2"]]},{"type":"map","entries":[["field","Header3"]]},{"type":"map","entries":[["field","Header4"]]}]],["dataTree",false]]},"columns":[{"type":"object","name":"TableColumn","id":"p1101","attributes":{"field":"index","title":"index","width":0,"formatter":{"type":"object","name":"NumberFormatter","id":"p1100","attributes":{"text_align":"left"}},"editor":{"type":"object","name":"CellEditor","id":"p1099"}}},{"type":"object","name":"TableColumn","id":"p1106","attributes":{"field":"Header0","title":"Header0","width":0,"formatter":{"type":"object","name":"NumberFormatter","id":"p1105","attributes":{"text_align":"right"}},"editor":{"type":"object","name":"IntEditor","id":"p1104"}}},{"type":"object","name":"TableColumn","id":"p1111","attributes":{"field":"Header1","title":"Header1","width":0,"formatter":{"type":"object","name":"StringFormatter","id":"p1110"},"editor":{"type":"object","name":"StringEditor","id":"p1109"}}},{"type":"object","name":"TableColumn","id":"p1116","attributes":{"field":"Header2","title":"Header2","width":0,"formatter":{"type":"object","name":"StringFormatter","id":"p1115"},"editor":{"type":"object","name":"StringEditor","id":"p1114"}}},{"type":"object","name":"TableColumn","id":"p1121","attributes":{"field":"Header3","title":"Header3","width":0,"formatter":{"type":"object","name":"StringFormatter","id":"p1120"},"editor":{"type":"object","name":"StringEditor","id":"p1119"}}},{"type":"object","name":"TableColumn","id":"p1126","attributes":{"field":"Header4","title":"Header4","width":0,"formatter":{"type":"object","name":"StringFormatter","id":"p1125"},"editor":{"type":"object","name":"StringEditor","id":"p1124"}}}],"indexes":["index"],"layout":"fit_data_stretch","source":{"type":"object","name":"ColumnDataSource","id":"p1129","attributes":{"selected":{"type":"object","name":"Selection","id":"p1130","attributes":{"indices":[],"line_indices":[]}},"selection_policy":{"type":"object","name":"UnionRenderers","id":"p1131"},"data":{"type":"map","entries":[["index",{"type":"ndarray","array":{"type":"bytes","data":"AAAAAAEAAAACAAAAAwAAAAQAAAAFAAAABgAAAAcAAAAIAAAACQAAAAoAAAALAAAADAAAAA0AAAAOAAAADwAAAA=="},"shape":[16],"dtype":"int32","order":"little"}],["Header0",{"type":"ndarray","array":{"type":"bytes","data":"6QMAAOoDAADrAwAA6wMAAOwDAADtAwAA7gMAAO8DAADwAwAA8QMAAPIDAADzAwAA9AMAAPUDAAD2AwAA9wMAAA=="},"shape":[16],"dtype":"int32","order":"little"}],["Header1",{"type":"ndarray","array":["Lorem","amet","Integer","libero","dapibus","Nulla","nibh","sagittis","Fusce","augue","massa","eget","taciti","torquent","per","sodales"],"shape":[16],"dtype":"object","order":"little"}],["Header2",{"type":"ndarray","array":["ipsum","consectetur","nec","Sed","diam","quis","elementum","ipsum","nec","semper","Vestibulum","nulla","sociosqu","per","inceptos","ligula"],"shape":[16],"dtype":"object","order":"little"}],["Header3",{"type":"ndarray","array":["dolor","adipiscing","odio","cursus","Sed","sem","imperdiet","Praesent","tellus","porta","lacinia","Class","ad","conubia","himenaeos","in"],"shape":[16],"dtype":"object","order":"little"}],["Header4",{"type":"ndarray","array":["sit","elit","Praesent","ante","nisi","at","Duis","mauris","sed","Mauris","arcu","aptent","litora","nostra","Curabitur","libero"],"shape":[16],"dtype":"object","order":"little"}]]}}},"cell_styles":{"type":"map","entries":[["id","4774172b4cad44ada3564f5ae163a55b"],["data",{"type":"map"}]]},"page":1,"page_size":20,"select_mode":true,"selectable_rows":null}}]}}],"defs":[{"type":"model","name":"ReactiveHTML1"},{"type":"model","name":"FlexBox1","properties":[{"name":"align_content","kind":"Any","default":"flex-start"},{"name":"align_items","kind":"Any","default":"flex-start"},{"name":"flex_direction","kind":"Any","default":"row"},{"name":"flex_wrap","kind":"Any","default":"wrap"},{"name":"justify_content","kind":"Any","default":"flex-start"}]},{"type":"model","name":"FloatPanel1","properties":[{"name":"config","kind":"Any","default":{"type":"map"}},{"name":"contained","kind":"Any","default":true},{"name":"position","kind":"Any","default":"right-top"},{"name":"offsetx","kind":"Any","default":null},{"name":"offsety","kind":"Any","default":null},{"name":"theme","kind":"Any","default":"primary"},{"name":"status","kind":"Any","default":"normalized"}]},{"type":"model","name":"GridStack1","properties":[{"name":"mode","kind":"Any","default":"warn"},{"name":"ncols","kind":"Any","default":null},{"name":"nrows","kind":"Any","default":null},{"name":"allow_resize","kind":"Any","default":true},{"name":"allow_drag","kind":"Any","default":true},{"name":"state","kind":"Any","default":[]}]},{"type":"model","name":"drag1","properties":[{"name":"slider_width","kind":"Any","default":5},{"name":"slider_color","kind":"Any","default":"black"},{"name":"value","kind":"Any","default":50}]},{"type":"model","name":"click1","properties":[{"name":"terminal_output","kind":"Any","default":""},{"name":"debug_name","kind":"Any","default":""},{"name":"clears","kind":"Any","default":0}]},{"type":"model","name":"copy_to_clipboard1","properties":[{"name":"fill","kind":"Any","default":"none"},{"name":"value","kind":"Any","default":null}]},{"type":"model","name":"FastWrapper1","properties":[{"name":"object","kind":"Any","default":null},{"name":"style","kind":"Any","default":null}]},{"type":"model","name":"NotificationAreaBase1","properties":[{"name":"js_events","kind":"Any","default":{"type":"map"}},{"name":"position","kind":"Any","default":"bottom-right"},{"name":"_clear","kind":"Any","default":0}]},{"type":"model","name":"NotificationArea1","properties":[{"name":"js_events","kind":"Any","default":{"type":"map"}},{"name":"notifications","kind":"Any","default":[]},{"name":"position","kind":"Any","default":"bottom-right"},{"name":"_clear","kind":"Any","default":0},{"name":"types","kind":"Any","default":[{"type":"map","entries":[["type","warning"],["background","#ffc107"],["icon",{"type":"map","entries":[["className","fas fa-exclamation-triangle"],["tagName","i"],["color","white"]]}]]},{"type":"map","entries":[["type","info"],["background","#007bff"],["icon",{"type":"map","entries":[["className","fas fa-info-circle"],["tagName","i"],["color","white"]]}]]}]}]},{"type":"model","name":"Notification","properties":[{"name":"background","kind":"Any","default":null},{"name":"duration","kind":"Any","default":3000},{"name":"icon","kind":"Any","default":null},{"name":"message","kind":"Any","default":""},{"name":"notification_type","kind":"Any","default":null},{"name":"_destroyed","kind":"Any","default":false}]},{"type":"model","name":"TemplateActions1","properties":[{"name":"open_modal","kind":"Any","default":0},{"name":"close_modal","kind":"Any","default":0}]},{"type":"model","name":"BootstrapTemplateActions1","properties":[{"name":"open_modal","kind":"Any","default":0},{"name":"close_modal","kind":"Any","default":0}]},{"type":"model","name":"MaterialTemplateActions1","properties":[{"name":"open_modal","kind":"Any","default":0},{"name":"close_modal","kind":"Any","default":0}]}]}}
324
+ </script>
325
+ <script type="text/javascript">
326
+ (function() {
327
+ const fn = function() {
328
+ Bokeh.safely(function() {
329
+ (function(root) {
330
+ function embed_document(root) {
331
+ const docs_json = document.getElementById('p1174').textContent;
332
+ const render_items = [{"docid":"226180fe-a52f-44c3-b35a-c5515dc94d77","roots":{"p1002":"ecd46395-4582-4930-ba31-0dc0b10adb40","p1009":"ffbbecec-c524-426b-92a9-a41a9c848b4b","p1012":"aaeb1216-8532-41c1-83cb-0942f199daac","p1013":"b964325d-ed82-411b-8756-473dceb6aabb","p1016":"fcd5a91b-233b-4bc2-a546-c692edf0e0d6","p1017":"e156abca-04d1-404e-8382-9625f25f55b6","p1091":"c38a18a4-c4d7-4c76-a09c-cab4cd25d51b"},"root_ids":["p1002","p1009","p1012","p1013","p1016","p1017","p1091"]}];
333
+ root.Bokeh.embed.embed_items(docs_json, render_items);
334
+ }
335
+ if (root.Bokeh !== undefined) {
336
+ embed_document(root);
337
+ } else {
338
+ let attempts = 0;
339
+ const timer = setInterval(function(root) {
340
+ if (root.Bokeh !== undefined) {
341
+ clearInterval(timer);
342
+ embed_document(root);
343
+ } else {
344
+ attempts++;
345
+ if (attempts > 100) {
346
+ clearInterval(timer);
347
+ console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing");
348
+ }
349
+ }
350
+ }, 10, root)
351
+ }
352
+ })(window);
353
+ });
354
+ };
355
+ if (document.readyState != "loading") fn();
356
+ else document.addEventListener("DOMContentLoaded", fn);
357
+ })();
358
+ </script>
359
+ </body>
360
+ </html>
index.js ADDED
@@ -0,0 +1,176 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ importScripts("https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js");
2
+
3
+ function sendPatch(patch, buffers, msg_id) {
4
+ self.postMessage({
5
+ type: 'patch',
6
+ patch: patch,
7
+ buffers: buffers
8
+ })
9
+ }
10
+
11
+ async function startApplication() {
12
+ console.log("Loading pyodide!");
13
+ self.postMessage({type: 'status', msg: 'Loading pyodide'})
14
+ self.pyodide = await loadPyodide();
15
+ self.pyodide.globals.set("sendPatch", sendPatch);
16
+ console.log("Loaded!");
17
+ await self.pyodide.loadPackage("micropip");
18
+ const env_spec = ['https://cdn.holoviz.org/panel/wheels/bokeh-3.3.2-py3-none-any.whl', 'https://cdn.holoviz.org/panel/1.3.6/dist/wheels/panel-1.3.6-py3-none-any.whl', 'pyodide-http==0.2.1', 'hvplot', 'pandas']
19
+ for (const pkg of env_spec) {
20
+ let pkg_name;
21
+ if (pkg.endsWith('.whl')) {
22
+ pkg_name = pkg.split('/').slice(-1)[0].split('-')[0]
23
+ } else {
24
+ pkg_name = pkg
25
+ }
26
+ self.postMessage({type: 'status', msg: `Installing ${pkg_name}`})
27
+ try {
28
+ await self.pyodide.runPythonAsync(`
29
+ import micropip
30
+ await micropip.install('${pkg}');
31
+ `);
32
+ } catch(e) {
33
+ console.log(e)
34
+ self.postMessage({
35
+ type: 'status',
36
+ msg: `Error while installing ${pkg_name}`
37
+ });
38
+ }
39
+ }
40
+ console.log("Packages loaded!");
41
+ self.postMessage({type: 'status', msg: 'Executing code'})
42
+ const code = `
43
+
44
+ import asyncio
45
+
46
+ from panel.io.pyodide import init_doc, write_doc
47
+
48
+ init_doc()
49
+
50
+ """The purpose of this app is to test that a **multi-page Dashboard Layout** similar to the
51
+ [bootstrap dashboard template](https://getbootstrap.com/docs/4.3/examples/dashboard/)
52
+ from [getboostrap.com](https://getbootstrap.com/) can be implemented in
53
+ [Panel](https://panel.pyviz.org/).
54
+ """
55
+ import hvplot.pandas # pylint: disable=unused-import
56
+ import pandas as pd
57
+ import panel as pn
58
+
59
+ BOOTSTRAP_DASHBOARD_CHART_URL="https://awesomepanel.blob.core.windows.net/resources/bootstrap_dashboard/bootstrap_dashboard_chart.csv"
60
+ BOOTSTRAP_DASHBOARD_TABLE_URL="https://awesomepanel.blob.core.windows.net/resources/bootstrap_dashboard/bootstrap_dashboard_table.csv"
61
+
62
+ COLOR="#0072B5"
63
+
64
+ @pn.cache
65
+ def _get_chart_data():
66
+ return pd.read_csv(BOOTSTRAP_DASHBOARD_CHART_URL)
67
+
68
+ @pn.cache
69
+ def _get_table_data():
70
+ return pd.read_csv(BOOTSTRAP_DASHBOARD_TABLE_URL)
71
+
72
+ def _holoviews_chart():
73
+ """## Dashboard Orders Chart generated by HoloViews"""
74
+ data = _get_chart_data()
75
+ line_plot = data.hvplot.line(
76
+ x="Day",
77
+ y="Orders",
78
+ height=500,
79
+ line_color=COLOR,
80
+ line_width=6,
81
+ )
82
+ scatter_plot = data.hvplot.scatter(x="Day", y="Orders", height=300,).opts(
83
+ marker="o",
84
+ size=10,
85
+ color=COLOR,
86
+ )
87
+ fig = line_plot * scatter_plot
88
+ gridstyle = {
89
+ "grid_line_color": "black",
90
+ "grid_line_width": 0.1,
91
+ }
92
+ fig = fig.opts(
93
+ responsive=True,
94
+ toolbar=None,
95
+ yticks=list(
96
+ range(
97
+ 12000,
98
+ 26000,
99
+ 2000,
100
+ )
101
+ ),
102
+ ylim=(
103
+ 12000,
104
+ 26000,
105
+ ),
106
+ gridstyle=gridstyle,
107
+ show_grid=True,
108
+ )
109
+ return fig
110
+
111
+ app = pn.extension("tabulator", sizing_mode="stretch_width")
112
+
113
+ pn.template.FastListTemplate(
114
+ site="Awesome Panel", site_url="https://awesome-panel.org", title="Bootstrap Dashboard",
115
+ main=[
116
+ pn.Column(pn.pane.Markdown("## Dashboard"), _holoviews_chart()),
117
+ pn.Column(pn.pane.Markdown("## Section Title"), pn.widgets.Tabulator(_get_table_data(), layout='fit_data_stretch')),
118
+ ], main_max_width="800px", main_layout=None,
119
+ ).servable("bootstrap_dashboard.html")
120
+
121
+
122
+
123
+ await write_doc()
124
+ `
125
+
126
+ try {
127
+ const [docs_json, render_items, root_ids] = await self.pyodide.runPythonAsync(code)
128
+ self.postMessage({
129
+ type: 'render',
130
+ docs_json: docs_json,
131
+ render_items: render_items,
132
+ root_ids: root_ids
133
+ })
134
+ } catch(e) {
135
+ const traceback = `${e}`
136
+ const tblines = traceback.split('\n')
137
+ self.postMessage({
138
+ type: 'status',
139
+ msg: tblines[tblines.length-2]
140
+ });
141
+ throw e
142
+ }
143
+ }
144
+
145
+ self.onmessage = async (event) => {
146
+ const msg = event.data
147
+ if (msg.type === 'rendered') {
148
+ self.pyodide.runPythonAsync(`
149
+ from panel.io.state import state
150
+ from panel.io.pyodide import _link_docs_worker
151
+
152
+ _link_docs_worker(state.curdoc, sendPatch, setter='js')
153
+ `)
154
+ } else if (msg.type === 'patch') {
155
+ self.pyodide.globals.set('patch', msg.patch)
156
+ self.pyodide.runPythonAsync(`
157
+ state.curdoc.apply_json_patch(patch.to_py(), setter='js')
158
+ `)
159
+ self.postMessage({type: 'idle'})
160
+ } else if (msg.type === 'location') {
161
+ self.pyodide.globals.set('location', msg.location)
162
+ self.pyodide.runPythonAsync(`
163
+ import json
164
+ from panel.io.state import state
165
+ from panel.util import edit_readonly
166
+ if state.location:
167
+ loc_data = json.loads(location)
168
+ with edit_readonly(state.location):
169
+ state.location.param.update({
170
+ k: v for k, v in loc_data.items() if k in state.location.param
171
+ })
172
+ `)
173
+ }
174
+ }
175
+
176
+ startApplication()