Advanced Dashboard

The below will illustrate an advanced web page without server.

This will create the page object:

page = pk.Page()
#page.theme.color_palette("brewer.PuBu8")
template = page.body.add_template(defined_style="doc")
template.style.css.background = page.theme.greys[0]

Add UI components to the page:

page.ui.title("Pandas tutorial #5")
page.ui.texts.references.website(url="https://towardsdatascience.com/data-visualization-with-bokeh-in-python-part-ii-interactions-a4cf994e2512")
source_data = "https://raw.githubusercontent.com/WillKoehrsen/Bokeh-Python-Visualization/master/interactive/data/complete_flights.csv"

df = pd.DataFrame(page.py.requests.csv(source_data, store_location=r"C:\tmps"))
df["dep_delay"] = pd.to_numeric(df["dep_delay"], downcast="float")
df["distance"] = pd.to_numeric(df["distance"], downcast="float")
agg_df = df.groupby(["name", "month", "distance"])["dep_delay"].sum()
agg_df = agg_df.reset_index()

max_value = float(df["distance"].max())
checks = page.ui.lists.checks(list(df["name"].unique()))
dist = page.ui.fields.static("[0, %s]" % max_value, label="Min, Max distance")
slider = page.ui.sliders.range([0, max_value], maximum=max_value)

chart = page.ui.charts.chartJs.bar(y_columns=["dep_delay"], x_axis="month")
table = page.ui.table(rows=["name", "month", "distance"], cols=["dep_delay"])
table.config.pagination = "local"
table.config.paginationSize = 10

pie = page.ui.charts.chartJs.pie(y_columns=["dep_delay"], x_axis="name")
pie_count = page.ui.charts.chartJs.pie(y_columns=["count"], x_axis="name")

Create data transformation groups for the data loaded from dataframes:

grp = page.data.js.record(agg_df.to_dict(orient="records")).filterGroup("aggData")
grp2 = page.data.js.record(agg_df.to_dict(orient="records")).filterGroup("aggData2")

update_button = page.ui.buttons.colored("update")

row = page.ui.row([[checks, update_button], chart], position="top")
row.set_size_cols(4)

total_delay = page.ui.titles.subtitle("Total Delay")
count_delay = page.ui.titles.subtitle("Count Delay")
page.ui.row([[total_delay, pie], [count_delay, pie_count]], position="top")

toggle = page.ui.buttons.toggle({'on': "More than 3 hours", 'off': 'All delays'}, label="Delay Type",)

hamburger = page.ui.panels.hamburger([dist, slider, toggle], title="Details")
table.move()

Add an event to select the data to be used in the components:

toggle.input.click([
  page.js.if_(
    toggle.input.dom.content.isTrue(), [
      chart.build(grp.includes("name", checks.dom.content, empty_all=False).sup("dep_delay", 180).sup("distance", slider.dom.min_select).inf("distance", slider.dom.max_select).group().sumBy(["dep_delay"], ["month"], cast_vals=True)),
      table.build(grp.includes("name", checks.dom.content, empty_all=False).sup("dep_delay", 180).sup("distance", slider.dom.min_select).inf("distance", slider.dom.max_select)),
      pie.build(grp.includes("name", checks.dom.content, empty_all=False).sup("distance", slider.dom.min_select).inf("distance", slider.dom.max_select).group().sumBy(["dep_delay"], ["name"], cast_vals=True)),
      pie_count.build(grp.includes("name", checks.dom.content, empty_all=False).sup("distance", slider.dom.min_select).inf("distance", slider.dom.max_select).group().countBy(["name"]))
    ]).else_([
      chart.build(grp2.includes("name", checks.dom.content, empty_all=False).sup("distance", slider.dom.min_select).inf("distance", slider.dom.max_select).group().sumBy(["dep_delay"], ["month"], cast_vals=True)),
      table.build(grp2.includes("name", checks.dom.content, empty_all=False).sup("distance", slider.dom.min_select).inf("distance", slider.dom.max_select)),
      pie.build(grp2.includes("name", checks.dom.content, empty_all=False).sup("distance", slider.dom.min_select).inf("distance", slider.dom.max_select).group().sumBy(["dep_delay"], ["name"], cast_vals=True)),
      pie_count.build(grp2.includes("name", checks.dom.content, empty_all=False).sup("distance", slider.dom.min_select).inf("distance", slider.dom.max_select).group().countBy(["name"]))
  ]),
  dist.input.build(slider.dom.content)
])

# Reuse the code generated by the toggle click for the below components.
update_button.click(toggle.input.event_fnc("click"))
slider.change(toggle.input.event_fnc("click"))

Add extra components to the page:

page.ui.layouts.hr()
page.ui.titles.subtitle("Report powered by")
page.ui.rich.powered()

This example is available here

More example of the templates on Github