Bootstrap Dashboard
dashboard
hugging face
hvplot
pyodide
A Bootstrap like dashboard
Introduction
This dashboard demonstrates that a dashboard layout similar to the Bootstrap dashboard template can be implemented in Panel.
App
This app runs entirely in the browser via Pyodide and panel convert.
Code
Show
"""
See https://awesome-panel.org/resources/bootstrap_dashboard/
"""
import hvplot.pandas # pylint: disable=unused-import
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()
Social
Please share on social media. Thanks.