Migrate to dashboard-tips example

app.py

@@ -1,151 +1,162 @@
-from pathlib import Path
-from typing import List, Dict, Tuple
-import matplotlib.colors as mpl_colors
-
-import pandas as pd
-import seaborn as sns
-import shinyswatch
-
-from shiny import App, Inputs, Outputs, Session, reactive, render, req, ui
-
-sns.set_theme()
-
-www_dir = Path(__file__).parent.resolve() / "www"
-
-df = pd.read_csv(Path(__file__).parent / "penguins.csv", na_values="NA")
-numeric_cols: List[str] = df.select_dtypes(include=["float64"]).columns.tolist()
-species: List[str] = df["Species"].unique().tolist()
-species.sort()
-
-app_ui = ui.page_fillable(
-    shinyswatch.theme.minty(),
-    ui.layout_sidebar(
-        ui.sidebar(
-            # Artwork by @allison_horst
-            ui.input_selectize(
-                "xvar",
-                "X variable",
-                numeric_cols,
-                selected="Bill Length (mm)",
-            ),
-            ui.input_selectize(
-                "yvar",
-                "Y variable",
-                numeric_cols,
-                selected="Bill Depth (mm)",
-            ),
-            ui.input_checkbox_group(
-                "species", "Filter by species", species, selected=species
-            ),
-            ui.hr(),
-            ui.input_switch("by_species", "Show species", value=True),
-            ui.input_switch("show_margins", "Show marginal plots", value=True),
-        ),
-        ui.output_ui("value_boxes"),
-        ui.output_plot("scatter", fill=True),
-        ui.help_text(
-            "Artwork by ",
-            ui.a("@allison_horst", href="https://twitter.com/allison_horst"),
-            class_="text-end",
-        ),
-    ),
-)
-
-
-def server(input: Inputs, output: Outputs, session: Session):
-    @reactive.Calc
-    def filtered_df() -> pd.DataFrame:
-        """Returns a Pandas data frame that includes only the desired rows"""
-
-        # This calculation "req"uires that at least one species is selected
-        req(len(input.species()) > 0)
-
-        # Filter the rows so we only include the desired species
-        return df[df["Species"].isin(input.species())]
-
-    @output
-    @render.plot
-    def scatter():
-        """Generates a plot for Shiny to display to the user"""
-
-        # The plotting function to use depends on whether margins are desired
-        plotfunc = sns.jointplot if input.show_margins() else sns.scatterplot
-
-        plotfunc(
-            data=filtered_df(),
-            x=input.xvar(),
-            y=input.yvar(),
-            palette=palette,
-            hue="Species" if input.by_species() else None,
-            hue_order=species,
-            legend=False,
-        )
-
-    @output
-    @render.ui
-    def value_boxes():
-        df = filtered_df()
-
-        def penguin_value_box(title: str, count: int, bgcol: str, showcase_img: str):
-            return ui.value_box(
-                title,
-                count,
-                {"class_": "pt-1 pb-0"},
-                showcase=ui.fill.as_fill_item(
-                    ui.tags.img(
-                        {"style": "object-fit:contain;"},
-                        src=showcase_img,
-                    )
-                ),
-                theme_color=None,
-                style=f"background-color: {bgcol};",
+import faicons as fa
+import plotly.express as px
+
+# Load data and compute static values
+from shared import app_dir, tips
+from shinywidgets import render_plotly
+
+from shiny import reactive, render
+from shiny.express import input, ui
+
+bill_rng = (min(tips.total_bill), max(tips.total_bill))
+
+# Add page title and sidebar
+ui.page_opts(title="Restaurant tipping", fillable=True)
+
+with ui.sidebar(open="desktop"):
+    ui.input_slider(
+        "total_bill",
+        "Bill amount",
+        min=bill_rng[0],
+        max=bill_rng[1],
+        value=bill_rng,
+        pre="$",
+    )
+    ui.input_checkbox_group(
+        "time",
+        "Food service",
+        ["Lunch", "Dinner"],
+        selected=["Lunch", "Dinner"],
+        inline=True,
+    )
+    ui.input_action_button("reset", "Reset filter")
+
+# Add main content
+ICONS = {
+    "user": fa.icon_svg("user", "regular"),
+    "wallet": fa.icon_svg("wallet"),
+    "currency-dollar": fa.icon_svg("dollar-sign"),
+    "ellipsis": fa.icon_svg("ellipsis"),
+}
+
+with ui.layout_columns(fill=False):
+    with ui.value_box(showcase=ICONS["user"]):
+        "Total tippers"
+
+        @render.express
+        def total_tippers():
+            tips_data().shape[0]
+
+    with ui.value_box(showcase=ICONS["wallet"]):
+        "Average tip"
+
+        @render.express
+        def average_tip():
+            d = tips_data()
+            if d.shape[0] > 0:
+                perc = d.tip / d.total_bill
+                f"{perc.mean():.1%}"
+
+    with ui.value_box(showcase=ICONS["currency-dollar"]):
+        "Average bill"
+
+        @render.express
+        def average_bill():
+            d = tips_data()
+            if d.shape[0] > 0:
+                bill = d.total_bill.mean()
+                f"${bill:.2f}"
+
+
+with ui.layout_columns(col_widths=[6, 6, 12]):
+    with ui.card(full_screen=True):
+        ui.card_header("Tips data")
+
+        @render.data_frame
+        def table():
+            return render.DataGrid(tips_data())
+
+    with ui.card(full_screen=True):
+        with ui.card_header(class_="d-flex justify-content-between align-items-center"):
+            "Total bill vs tip"
+            with ui.popover(title="Add a color variable", placement="top"):
+                ICONS["ellipsis"]
+                ui.input_radio_buttons(
+                    "scatter_color",
+                    None,
+                    ["none", "sex", "smoker", "day", "time"],
+                    inline=True,
+                )
+
+        @render_plotly
+        def scatterplot():
+            color = input.scatter_color()
+            return px.scatter(
+                tips_data(),
+                x="total_bill",
+                y="tip",
+                color=None if color == "none" else color,
+                trendline="lowess",
             )
 
-        if not input.by_species():
-            return penguin_value_box(
-                "Penguins",
-                len(df.index),
-                bg_palette["default"],
-                # Artwork by @allison_horst
-                showcase_img="penguins.png",
+    with ui.card(full_screen=True):
+        with ui.card_header(class_="d-flex justify-content-between align-items-center"):
+            "Tip percentages"
+            with ui.popover(title="Add a color variable"):
+                ICONS["ellipsis"]
+                ui.input_radio_buttons(
+                    "tip_perc_y",
+                    "Split by:",
+                    ["sex", "smoker", "day", "time"],
+                    selected="day",
+                    inline=True,
+                )
+
+        @render_plotly
+        def tip_perc():
+            from ridgeplot import ridgeplot
+
+            dat = tips_data()
+            dat["percent"] = dat.tip / dat.total_bill
+            yvar = input.tip_perc_y()
+            uvals = dat[yvar].unique()
+
+            samples = [[dat.percent[dat[yvar] == val]] for val in uvals]
+
+            plt = ridgeplot(
+                samples=samples,
+                labels=uvals,
+                bandwidth=0.01,
+                colorscale="viridis",
+                colormode="row-index",
             )
 
-        value_boxes = [
-            penguin_value_box(
-                name,
-                len(df[df["Species"] == name]),
-                bg_palette[name],
-                # Artwork by @allison_horst
-                showcase_img=f"{name}.png",
+            plt.update_layout(
+                legend=dict(
+                    orientation="h", yanchor="bottom", y=1.02, xanchor="center", x=0.5
+                )
             )
-            for name in species
-            # Only include boxes for _selected_ species
-            if name in input.species()
-        ]
 
-        return ui.layout_column_wrap(*value_boxes, width = 1 / len(value_boxes))
+            return plt
 
 
-# "darkorange", "purple", "cyan4"
-colors = [[255, 140, 0], [160, 32, 240], [0, 139, 139]]
-colors = [(r / 255.0, g / 255.0, b / 255.0) for r, g, b in colors]
+ui.include_css(app_dir / "styles.css")
+
+# --------------------------------------------------------
+# Reactive calculations and effects
+# --------------------------------------------------------
 
-palette: Dict[str, Tuple[float, float, float]] = {
-    "Adelie": colors[0],
-    "Chinstrap": colors[1],
-    "Gentoo": colors[2],
-    "default": sns.color_palette()[0],  # type: ignore
-}
 
-bg_palette = {}
-# Use `sns.set_style("whitegrid")` to help find approx alpha value
-for name, col in palette.items():
-    # Adjusted n_colors until `axe` accessibility did not complain about color contrast
-    bg_palette[name] = mpl_colors.to_hex(sns.light_palette(col, n_colors=7)[1])  # type: ignore
+@reactive.calc
+def tips_data():
+    bill = input.total_bill()
+    idx1 = tips.total_bill.between(bill[0], bill[1])
+    idx2 = tips.time.isin(input.time())
+    return tips[idx1 & idx2]
 
 
-app = App(
-    app_ui,
-    server,
-    static_assets=str(www_dir),
-)
+@reactive.effect
+@reactive.event(input.reset)
+def _():
+    ui.update_slider("total_bill", value=bill_rng)
+    ui.update_checkbox_group("time", selected=["Lunch", "Dinner"])