Create index.py

index.py

@@ -0,0 +1,73 @@
+"""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  # 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()