|
"""The purpose of this app is to test that a **multi-page Dashboard Layout** similar to the |
|
[bootstrap dashboard template](https://getbootstrap.com/docs/4.3/examples/dashboard/) |
|
from [getboostrap.com](https://getbootstrap.com/) can be implemented in |
|
[Panel](https://panel.pyviz.org/). |
|
""" |
|
import hvplot.pandas |
|
import pandas as pd |
|
import panel as pn |
|
|
|
BOOTSTRAP_DASHBOARD_CHART_URL="https://awesomepanel.blob.core.windows.net/resources/bootstrap_dashboard/bootstrap_dashboard_chart.csv" |
|
BOOTSTRAP_DASHBOARD_TABLE_URL="https://awesomepanel.blob.core.windows.net/resources/bootstrap_dashboard/bootstrap_dashboard_table.csv" |
|
|
|
COLOR="#0072B5" |
|
|
|
@pn.cache |
|
def _get_chart_data(): |
|
return pd.read_csv(BOOTSTRAP_DASHBOARD_CHART_URL) |
|
|
|
@pn.cache |
|
def _get_table_data(): |
|
return pd.read_csv(BOOTSTRAP_DASHBOARD_TABLE_URL) |
|
|
|
def _holoviews_chart(): |
|
"""## Dashboard Orders Chart generated by HoloViews""" |
|
data = _get_chart_data() |
|
line_plot = data.hvplot.line( |
|
x="Day", |
|
y="Orders", |
|
height=500, |
|
line_color=COLOR, |
|
line_width=6, |
|
) |
|
scatter_plot = data.hvplot.scatter(x="Day", y="Orders", height=300,).opts( |
|
marker="o", |
|
size=10, |
|
color=COLOR, |
|
) |
|
fig = line_plot * scatter_plot |
|
gridstyle = { |
|
"grid_line_color": "black", |
|
"grid_line_width": 0.1, |
|
} |
|
fig = fig.opts( |
|
responsive=True, |
|
toolbar=None, |
|
yticks=list( |
|
range( |
|
12000, |
|
26000, |
|
2000, |
|
) |
|
), |
|
ylim=( |
|
12000, |
|
26000, |
|
), |
|
gridstyle=gridstyle, |
|
show_grid=True, |
|
) |
|
return fig |
|
|
|
app = pn.extension("tabulator", sizing_mode="stretch_width") |
|
|
|
pn.template.FastListTemplate( |
|
site="Awesome Panel", site_url="https://awesome-panel.org", title="Bootstrap Dashboard", |
|
main=[ |
|
pn.Column( |
|
pn.pane.Markdown("## Dashboard"), |
|
_holoviews_chart()), |
|
pn.Column(pn.pane.Markdown("## Section Title"), |
|
pn.widgets.Tabulator(_get_table_data(), layout='fit_data_stretch')), |
|
], main_max_width="800px", main_layout=None, |
|
).servable() |
