Tidy/add bs theme

.pre-commit-config.yaml

@@ -49,7 +49,7 @@ repos:
     hooks:
       - id: ruff
         args: [--fix]
-        exclude: "vizro-core/examples/scratch_dev/app.py"
+        exclude: "vizro-core/examples/scratch_dev/app_themes.py"
       - id: ruff-format
 
   - repo: https://github.com/PyCQA/bandit

tools/pycafe/create_pycafe_links.py

@@ -63,7 +63,7 @@ def generate_link(directory: str, extra_requirements: Optional[list[str]] = None
     )
 
     # App file - get current commit, and modify to remove if clause
-    app_content = requests.get(f"{base_url}/app.py", timeout=10).text
+    app_content = requests.get(f"{base_url}/app_themes.py", timeout=10).text
     app_content_split = app_content.split('if __name__ == "__main__":')
     if len(app_content_split) > 1:
         app_content = app_content_split[0] + textwrap.dedent(app_content_split[1])
@@ -93,8 +93,9 @@ def generate_link(directory: str, extra_requirements: Optional[list[str]] = None
                 "url": f"{base_url}{file['path'].removeprefix(f'{directory}')}",
             }
             for file in folder_files
-            # Filter out app.py and requirements.txt (as already added above)
-            if file["type"] == "blob" and file["path"] not in {f"{directory}/app.py", f"{directory}/requirements.txt"}
+            # Filter out app_themes.py and requirements.txt (as already added above)
+            if file["type"] == "blob"
+            and file["path"] not in {f"{directory}/app_themes.py", f"{directory}/requirements.txt"}
         ]
     else:
         raise Exception(f"Failed to fetch file tree from GitHub API: {response.status_code} {response.text}")

vizro-core/changelog.d/20250106_133428_huong_li_nguyen_add_bs_theme.md

@@ -0,0 +1,48 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->

vizro-core/examples/scratch_dev/app.py

@@ -1,26 +1,165 @@
-"""Dev app to try things out."""
-
-from vizro import Vizro
-import vizro.plotly.express as px
-import vizro.models as vm
-from vizro.tables import dash_data_table
-
-gapminder = px.data.gapminder()
-
-table = vm.Page(
-    title="Table",
-    components=[
-        vm.Table(
-            figure=dash_data_table(data_frame=gapminder, page_size=5),
-            title="Gapminder Data Insights",
-            header="""#### An Interactive Exploration of Global Health, Wealth, and Population""",
-            footer="""SOURCE: **Plotly gapminder data set, 2024**""",
-        )
+"""****** Important! *******
+If you run this app locally, un-comment line 127 to add the theme change components to the layout
+"""
+
+import dash_ag_grid as dag
+import dash_bootstrap_components as dbc
+import plotly.express as px
+from dash import Dash, Input, Output, callback, clientside_callback, dcc, html
+
+df = px.data.gapminder()
+years = df.year.unique()
+continents = df.continent.unique()
+
+# Test out local vizro-bootstrap file. Note: It takes a while after a commit for the updated file to be available
+base = "https://cdn.jsdelivr.net/gh/mckinsey/vizro@tidy/add-bs-theme/vizro-core/src/vizro/static/css/"
+vizro_bootstrap = base + "vizro-bootstrap.min.css"
+
+app = Dash(
+    __name__,
+    external_stylesheets=[
+        #  dbc.themes.BOOTSTRAP,
+        vizro_bootstrap,
+        dbc.icons.FONT_AWESOME,
+    ],
+)
+
+header = html.H3("Theme Explorer Sample App", className="bg-primary p-2 mt-4")
+
+grid = dag.AgGrid(
+    id="grid",
+    columnDefs=[{"field": i} for i in df.columns],
+    rowData=df.to_dict("records"),
+    defaultColDef={"flex": 1, "minWidth": 120, "sortable": True, "resizable": True, "filter": True},
+    dashGridOptions={"rowSelection": "multiple"},
+)
+
+dropdown = html.Div(
+    [
+        dbc.Label("Select indicator (y-axis)"),
+        dcc.Dropdown(
+            ["gdpPercap", "lifeExp", "pop"],
+            "pop",
+            id="indicator",
+            clearable=False,
+        ),
+    ],
+    className="mb-4",
+)
+
+checklist = html.Div(
+    [
+        dbc.Label("Select Continents"),
+        dbc.Checklist(
+            id="continents",
+            options=continents,
+            value=continents,
+            inline=True,
+        ),
+    ],
+    className="mb-4",
+)
+
+slider = html.Div(
+    [
+        dbc.Label("Select Years"),
+        dcc.RangeSlider(
+            years[0],
+            years[-1],
+            5,
+            id="years",
+            marks=None,
+            tooltip={"placement": "bottom", "always_visible": True},
+            value=[years[2], years[-2]],
+            className="p-0",
+        ),
     ],
+    className="mb-5",
 )
 
+toggle = dbc.Switch(id="switch", value=False, persistence=True, persistence_type="session")
+
+theme_colors = [
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "light",
+    "dark",
+    "link",
+]
+
+colors = html.Div([dbc.Button(f"{color}", color=f"{color}", size="sm") for color in theme_colors])
+colors = html.Div(["Theme Colors:", colors], className="mt-2")
+
+controls = dbc.Card([dropdown, checklist, slider, toggle])
+tab1 = dbc.Tab([dcc.Graph(id="line-chart", figure=px.line())], label="Line Chart", className="p-4")
+tab2 = dbc.Tab([dcc.Graph(id="scatter-chart", figure=px.scatter())], label="Scatter Chart", className="p-4")
+tab3 = dbc.Tab([grid], label="Grid", className="p-4")
+tabs = dbc.Card(dbc.Tabs([tab1, tab2, tab3]))
+
+app.layout = html.Div(
+    children=[header, dbc.Row([dbc.Col(controls, width=4), dbc.Col([tabs, colors], width=8)])],
+)
+
+
+@callback(
+    Output("line-chart", "figure"),
+    Output("scatter-chart", "figure"),
+    Output("grid", "dashGridOptions"),
+    Input("indicator", "value"),
+    Input("continents", "value"),
+    Input("years", "value"),
+)
+def update(indicator, continent, yrs):
+    if continent == [] or indicator is None:
+        return {}, {}, {}
+
+    dff = df[df.year.between(yrs[0], yrs[1])]
+    dff = dff[dff.continent.isin(continent)]
+
+    fig = px.line(
+        dff,
+        x="year",
+        y=indicator,
+        color="continent",
+        line_group="country",
+    )
+
+    fig_scatter = px.scatter(
+        dff[dff.year == yrs[0]],
+        x="gdpPercap",
+        y="lifeExp",
+        size="pop",
+        color="continent",
+        log_x=True,
+        size_max=60,
+    )
+
+    grid_filter = (
+        f"{continent}.includes(params.data.continent) && params.data.year >= {yrs[0]} && params.data.year <= {yrs[1]}"
+    )
+    dashGridOptions = {
+        "isExternalFilterPresent": {"function": "true"},
+        "doesExternalFilterPass": {"function": grid_filter},
+    }
+    return fig, fig_scatter, dashGridOptions
+
+
+# updates the Bootstrap global light/dark color mode
+clientside_callback(
+    """
+    switchOn => {
+       document.documentElement.setAttribute('data-bs-theme', switchOn ? 'light' : 'dark');
+       return window.dash_clientside.no_update
+    }
+    """,
+    Output("switch", "id"),
+    Input("switch", "value"),
+)
 
-dashboard = vm.Dashboard(pages=[table])
 
 if __name__ == "__main__":
-    Vizro().build(dashboard).run()
+    app.run_server(debug=True)