Integrate Bokeh visualizations in NiceGUI

[rodja]

Originally requested in #335.

https://bokeh.org/

[HerrFrutti]

Because of the tag, it seems this is not resolved yet.

After a little playing around. I think this is already possible.

from bokeh.plotting import figure
from bokeh.resources import CDN
from bokeh.embed import file_html
from nicegui import ui

p = figure(width=400, height=400)

# add a line renderer
p.line([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], line_width=2)

html = file_html(p, CDN, "my plot")

ui.add_body_html(html)

ui.run(native=True, window_size=(400, 400), fullscreen=False)

Also Matplotlib can be used with mpld3

from nicegui import ui
import matplotlib.pyplot as plt, mpld3
import numpy as np

# Fixing random state for reproducibility
np.random.seed(19680801)

dt = 0.01
t = np.arange(0, 30, dt)
nse1 = np.random.randn(len(t))                 # white noise 1
nse2 = np.random.randn(len(t))                 # white noise 2

# Two signals with a coherent part at 10 Hz and a random part
s1 = np.sin(2 * np.pi * 10 * t) + nse1
s2 = np.sin(2 * np.pi * 10 * t) + nse2

fig, axs = plt.subplots(2, 1)
axs[0].plot(t, s1, t, s2)
axs[0].set_xlim(0, 2)
axs[0].set_xlabel('Time')
axs[0].set_ylabel('s1 and s2')
axs[0].grid(True)

cxy, f = axs[1].cohere(s1, s2, 256, 1. / dt)
axs[1].set_ylabel('Coherence')

fig.tight_layout()
html_fig = mpld3.fig_to_html(fig)

ui.add_body_html(html_fig)

ui.run(native=True, window_size=(400, 300), fullscreen=False)

I've just played around with nice gui for around 20 mins. And this interactive plots is very important for me. I think this is working, but I will test this further.

Let me know your thoughts :)

[falkoschindler]

Thanks for the proof-of-concept, @HerrFrutti! It's always great to see how NiceGUI's low-level HTML capabilities allow embedding other libraries so easily.
For an integration like a ui.bokeh element the bokeh HTML seems to be a bit tricky to handle, since it includes a whole page with html, head and body tags, downloads a JavaScript file and registers a document event handler. But it's certainly possible.

[devturner]

In a bit of testing, I am able to add the bokeh html_doc to a ui.card element in an iframe - the bokeh page is dynamically generated in a standalone page after clicking a link
@ui.page("/plot/{plot_name:path}")