Merge branch 'main' into docs/add-dash-enterprise

.pre-commit-config.yaml

@@ -45,7 +45,7 @@ repos:
         args: [--autofix]
 
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: v0.8.1
+    rev: v0.8.6
     hooks:
       - id: ruff
         args: [--fix]
@@ -85,7 +85,7 @@ repos:
         args: ["--fix"]
 
   - repo: https://github.com/executablebooks/mdformat
-    rev: 0.7.18
+    rev: 0.7.21
     hooks:
       - id: mdformat
         args:

vizro-core/changelog.d/20250106_205004_84141230+manuelkonrad_fix_parcoord_margins.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
+
+- Fix hidden axis and tick labels for Graph components using `px.parallel_coordinates`. ([#941](https://github.com/mckinsey/vizro/pull/941))
+
+
+<!--
+### 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/changelog.d/20250109_152222_huong_li_nguyen_update_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/changelog.d/20250114_130329_huong_li_nguyen_update_kpi_font_size.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/changelog.d/20250115_123645_huong_li_nguyen_fix_removal_of_number_input.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
+
+- Enable visibility of the spinner buttons in number inputs. ([#954](https://github.com/mckinsey/vizro/pull/954))
+
+
+<!--
+### 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/docs/pages/explanation/faq.md

@@ -82,11 +82,11 @@ Potential users sometimes request comparisons between Vizro and similar tools su
 Any attempt at a high-level explanation must rely on an oversimplification that misses many important nuances. With the caveat that it's not possible to "compare apples with pears", and that any comparison will have a different conclusion for different users, an oversimplified view could be:
 
 ??? details "Streamlit is great for rapid prototyping"
-    - **rapid prototyping** - Streamlit's architecture allows you to write apps the same way you write plain Python scripts. To unlock this, Streamlit apps have a unique data flow: any time something must be updated on the screen, Streamlit reruns your entire Python script from top to bottom. [\[1\]](https://docs.streamlit.io/library/get-started/main-concepts) This turns data scripts into sharable web apps in minutes. [\[2\]](https://streamlit.io/) Adding a widget is the same as declaring a variable. (No need to write a backend, define routes, handle HTTP requests, connect a frontend, write HTML, CSS, JavaScript, etc. [\[3\]](https://streamlit.io/))
+    - **rapid prototyping** - Streamlit's architecture allows you to write apps the same way you write plain Python scripts. To unlock this, Streamlit apps have a unique data flow: any time something must be updated on the screen, Streamlit reruns your entire Python script from top to bottom. [[1]](https://docs.streamlit.io/library/get-started/main-concepts) This turns data scripts into sharable web apps in minutes. [[2]](https://streamlit.io/) Adding a widget is the same as declaring a variable. (No need to write a backend, define routes, handle HTTP requests, connect a frontend, write HTML, CSS, JavaScript, etc. [[3]](https://streamlit.io/))
 
 ??? details "Dash is great for customization and scalability"
-    - **customization** - one of the great things about Dash is that it is built on top of React.js, a JavaScript library for building web components. Thousands of components have been built and released with open source licenses by the React community, any of which could be adapted into a Dash component. [\[4\]](https://dash.plotly.com/plugins) Dash supports adding custom CSS [\[5\]](https://dash.plotly.com/external-resources) and HTML, callbacks for custom behavior, and many component libraries such as Dash Bootstrap components [\[6\]](https://dash-bootstrap-components.opensource.faculty.ai/)
-    - **scalability** - based on Flask which is widely adopted by the Python community and deployed in production environments everywhere [\[7\]](https://medium.com/plotly/introducing-dash-5ecf7191b503) Dash was designed to be a stateless framework. Stateless frameworks are more scalable and robust [\[8\]](https://dash.plotly.com/sharing-data-between-callbacks#why-share-state?)
+    - **customization** - one of the great things about Dash is that it is built on top of React.js, a JavaScript library for building web components. Thousands of components have been built and released with open source licenses by the React community, any of which could be adapted into a Dash component. [[4]](https://dash.plotly.com/plugins) Dash supports adding custom CSS [[5]](https://dash.plotly.com/external-resources) and HTML, callbacks for custom behavior, and many component libraries such as Dash Bootstrap components [[6]](https://dash-bootstrap-components.opensource.faculty.ai/)
+    - **scalability** - based on Flask which is widely adopted by the Python community and deployed in production environments everywhere [[7]](https://medium.com/plotly/introducing-dash-5ecf7191b503) Dash was designed to be a stateless framework. Stateless frameworks are more scalable and robust [[8]](https://dash.plotly.com/sharing-data-between-callbacks#why-share-state?)
 
 ??? details "Vizro is great for combining rapid prototyping with customization and scalability"
     - **rapid prototyping** - since Vizro is a high-level framework providing declarative configuration, it is quick and easy to create powerful interactive apps in minutes, without needing to write callbacks, HTML, CSS, or JavaScript. Key topics such as applying state management, application architecture, and testing are done automatically by Vizro.

vizro-core/docs/pages/user-guides/run.md

@@ -162,6 +162,19 @@ Internally, `app = Vizro()` contains a Flask app in `app.dash.server`. However,
 
 ### Dash Enterprise
 
-Since Vizro is built on Dash and creates Dash app objects, Vizro dashboards can be deployed to [Dash Enterprise](https://plotly.com/dash/) and accessed in the same way as other Dash apps.
+Since Vizro creates data visualization apps as Dash app objects, they can be deployed to [Dash Enterprise](https://plotly.com/dash/) and accessed in the same way as other Dash apps.
 
 Dash Enterprise helps to deploy and scale production-grade data apps and integrate them with IT infrastructure such as authentication and VPC services. Vizro users may find it suitable for deployment, rapid development environments, and authentication.
+
+Vizro is compatible with the following functionality within Dash Enterprise:
+
+- [App Portal](https://dash.plotly.com/dash-enterprise/portal?de-version=5.5)
+- [App Manager](https://plotly.com/dash/app-manager/)
+- [Dash App Workspaces](https://plotly.com/dash/workspaces/)
+- [App logs and viewer statistics](https://dash.plotly.com/dash-enterprise/logs?de-version=5.5)
+- [Centralized data app management](https://plotly.com/dash/centralized-data-app-management/)
+- [CI/CD](https://plotly.com/dash/continuous-integration/)
+- [Redis](https://plotly.com/dash/big-data-for-python/)
+- [Dash Enterprise Authentication](https://plotly.com/dash/authentication/)
+
+Note that Vizro is not currently compatible with certain Dash Enterprise functionality such as the [Dashboard Engine](https://plotly.com/dash/snapshot-engine/) or [Dash Design Kit](https://plotly.com/dash/design-kit/), and cannot produce static reports accessed via the [Snapshot Engine](https://plotly.com/dash/snapshot-engine/).

vizro-core/examples/scratch_dev/app.py

@@ -1,26 +1,46 @@
 """Dev app to try things out."""
 
+import dash_bootstrap_components as dbc
+
+import vizro.models as vm
 from vizro import Vizro
 import vizro.plotly.express as px
-import vizro.models as vm
-from vizro.tables import dash_data_table
+
+
+from typing import Literal
 
 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**""",
+
+class NumberInput(vm.VizroBaseModel):
+    type: Literal["number_input"] = "number_input"
+
+    def build(self):
+        return (
+            dbc.Input(
+                id="number-input",
+                type="number",
+                min=0,
+                max=10,
+                step=1,
+                value=5,
+                debounce=True,
+            ),
         )
+
+
+vm.Page.add_type("components", NumberInput)
+
+page = vm.Page(
+    title="Charts UI",
+    components=[
+        NumberInput(),
+        vm.Graph(figure=px.box(gapminder, x="year", y="gdpPercap", color="continent")),
     ],
+    controls=[vm.Filter(column="year")],
 )
 
-
-dashboard = vm.Dashboard(pages=[table])
+dashboard = vm.Dashboard(pages=[page])
 
 if __name__ == "__main__":
     Vizro().build(dashboard).run()

vizro-core/src/vizro/models/_components/graph.py

@@ -140,10 +140,23 @@ def _filter_interaction(
     @staticmethod
     def _optimise_fig_layout_for_dashboard(fig):
         """Post layout updates to visually enhance charts used inside dashboard."""
-        if fig.layout.title.text:
-            if fig.layout.margin.t is None:
-                # Reduce `margin_t` if not explicitly set.
-                fig.update_layout(margin_t=64)
+        # Determine if a title is present
+        has_title = bool(fig.layout.title.text)
+
+        # TODO: Check whether we should increase margins for all chart types in template_dashboard_overrides.py instead
+        if any(isinstance(plotly_obj, go.Parcoords) for plotly_obj in fig.data):
+            # Avoid hidden labels in Parcoords figures by increasing margins compared to dashboard defaults
+            fig.update_layout(
+                margin={
+                    "t": fig.layout.margin.t or (92 if has_title else 40),
+                    "l": fig.layout.margin.l or 36,
+                    "b": fig.layout.margin.b or 24,
+                },
+            )
+
+        if has_title and fig.layout.margin.t is None:
+            # Reduce `margin_t` if not explicitly set.
+            fig.update_layout(margin_t=64)
 
         return fig
 

vizro-core/src/vizro/static/css/figures.css

@@ -16,6 +16,7 @@ Note the relative url works with both serve_locally=True and serve_locally=False
   src: url("./fonts/material-symbols-outlined.woff2") format("woff2");
 }
 
+/* This applies to all icons inside vizro */
 .material-symbols-outlined {
   direction: ltr;
   display: inline-block;
@@ -39,14 +40,14 @@ Note the relative url works with both serve_locally=True and serve_locally=False
 /* This should be replaced, when the bootstrap theme is finalized. Currently our font tokens don't match with the
  bootstrap font tokens, leading to deviations which we need to overwrite. */
 .card-kpi-title {
-  font-size: 1.2rem;
-  line-height: normal;
+  font-size: 1rem;
   margin: 0;
 }
 
 .card-kpi .card-header,
 .card-kpi .card-footer,
 .card-kpi .card-body {
+  align-items: center;
   background: none;
   border: none;
   margin: 0;
@@ -64,9 +65,8 @@ Note the relative url works with both serve_locally=True and serve_locally=False
   color: var(--bs-secondary);
   display: flex;
   flex-grow: 1;
-  font-size: 3.6vh;
+  font-size: 2rem;
   font-weight: 600;
-  padding: 1rem 0;
 }
 
 .card-kpi .card-footer {

vizro-core/src/vizro/static/css/slider.css

@@ -128,8 +128,8 @@ input.dash-input:invalid {
 }
 
 /* To remove number input spin box */
-.slider-text-input-container input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
+.slider-text-input-container input[type="number"]::-webkit-outer-spin-button,
+.slider-text-input-container input[type="number"]::-webkit-inner-spin-button {
   appearance: none;
   margin: 0;
 }

vizro-core/src/vizro/static/css/table.css

@@ -4,11 +4,13 @@
 
 #dashboard-container .dash-spreadsheet-inner th {
   background-color: inherit;
+  color: var(--text-primary);
   padding: 10px 0;
 }
 
 #dashboard-container .dash-spreadsheet-inner td {
   background-color: inherit;
+  color: var(--text-primary);
 }
 
 #dashboard-container .dash-spreadsheet-inner table {