Merge branch 'main' of https://github.com/mckinsey/vizro into qa/move…

…_integration_tests_to_vizro

.github/workflows/checks-vizro-core.yml

@@ -44,6 +44,9 @@ jobs:
       - name: Check schema is up to date
         run: hatch run schema-check
 
+      - name: Check plotly template is up to date
+        run: hatch run templates-check
+
       - name: Find changed files to see if changelog fragment needed
         id: changed-files
         if: ${{ github.event_name == 'pull_request' }}

README.md

@@ -5,7 +5,7 @@
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/Vizro_Github_Banner_Dark_Mode.png">
   <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/Vizro_Github_Banner_Light_Mode.png">
-  <img alt="Vizro logo" src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/Vizro_Github_Banner_Dark_Mode.png" width="250">
+  <img alt="Vizro logo" src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/Vizro_Github_Banner_Light_Mode.png" width="250">
 </picture>
 
 #### Vizro is a low-code toolkit for building high-quality data visualization apps
@@ -14,7 +14,10 @@
 
 [Documentation](https://vizro.readthedocs.io/en/stable/) | [Get Started](https://vizro.readthedocs.io/en/stable/pages/tutorials/first_dashboard/) | [Vizro examples gallery](http://vizro.mckinsey.com/)
 
-<img src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/vizro_spash_teaser.gif" width="600"/>
+<picture>
+  <source srcset="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/vizro_spash_teaser.gif">
+  <img alt="Gif to demonstrate Vizro features" src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/vizro_spash_teaser_fallback.png" width="600">
+</picture>
 <br>
 <br>
 <img src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/logo_watermarks.svg" width="300">
@@ -120,7 +123,10 @@ Vizro-AI is a separate package (called `vizro_ai`) that extends Vizro to incorpo
 
 Visit the [Vizro-AI documentation](https://vizro.readthedocs.io/projects/vizro-ai/) for more details.
 
-<img width="600" src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/toolkit_vizro_ai.gif">
+<picture>
+  <source srcset="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/toolkit_vizro_ai.gif">
+  <img alt="Gif to demonstrate Vizro-AI" src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/toolkit_vizro_ai_fallback.png" width="600">
+</picture>
 
 ## Installation and first steps
 

vizro-ai/README.md

@@ -4,7 +4,10 @@
 
 [![Python version](https://img.shields.io/badge/python-3.9%20%7C%203.10%20%7C%203.11%20%7C%203.12-blue.svg)](https://pypi.org/project/vizro/) [![PyPI version](https://badge.fury.io/py/vizro_ai.svg)](https://badge.fury.io/py/vizro_ai) [![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/mckinsey/vizro/blob/main/LICENSE.md) [![Documentation](https://readthedocs.org/projects/vizro-ai/badge/?version=latest)](https://vizro-ai.readthedocs.io/) [![OpenSSF Best Practices](https://www.bestpractices.dev/projects/7858/badge)](https://www.bestpractices.dev/projects/7858)
 
-<img src="./docs/assets/readme/readme_animation.gif" alt="Gif to demonstrate vizro-ai">
+<picture>
+  <source srcset="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/toolkit_vizro_ai.gif">
+  <img alt="Gif to demonstrate Vizro-AI" src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/toolkit_vizro_ai_fallback.png" width="600">
+</picture>
 
 <p>
 <font size="+1">

vizro-ai/docs/index.md

@@ -6,7 +6,7 @@ By using Vizro's themes, you can incorporate design best practices by default. I
 
 Even if you are an experienced data practitioner, Vizro-AI optimizes how you create visually appealing layouts to present detailed insights about your data.
 
-<img src=".//assets/readme/readme_animation.gif" alt="Gif to demonstrate vizro-ai">
+<img src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/toolkit_vizro_ai.gif" alt="Gif to demonstrate vizro-ai">
 
 <div class="grid cards" markdown>
 

vizro-ai/pyproject.toml

@@ -70,7 +70,10 @@ filterwarnings = [
   # Ignore deprecation warning until this is solved: https://github.com/plotly/dash/issues/2590:
   "ignore:HTTPResponse.getheader():DeprecationWarning",
   # Happens during dash_duo teardown in vizro_ai_ui tests. Not affecting functionality:
-  "ignore:Exception in thread"
+  "ignore:Exception in thread",
+  # Ignore deprecation warning as it comes from the plotly default template. In our templates `vizro_dark` and
+  # `vizro_light`, we do not use mapbox anymore, see: https://github.com/mckinsey/vizro/pull/974
+  "ignore:.*scattermapbox.*is deprecated.*Use.*scattermap.*instead:DeprecationWarning"
 ]
 pythonpath = ["../tools/tests"]
 

vizro-core/README.md

@@ -5,7 +5,7 @@
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/Vizro_Github_Banner_Dark_Mode.png">
   <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/Vizro_Github_Banner_Light_Mode.png">
-  <img alt="Vizro logo" src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/Vizro_Github_Banner_Dark_Mode.png" width="250">
+  <img alt="Vizro logo" src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/Vizro_Github_Banner_Light_Mode.png" width="250">
 </picture>
 
 #### Vizro is a low-code toolkit for building high-quality data visualization apps
@@ -14,7 +14,10 @@
 
 [Documentation](https://vizro.readthedocs.io/en/stable/) | [Get Started](https://vizro.readthedocs.io/en/stable/pages/tutorials/first_dashboard/) | [Vizro examples gallery](http://vizro.mckinsey.com/)
 
-<img src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/vizro_spash_teaser.gif" width="600"/>
+<picture>
+  <source srcset="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/vizro_spash_teaser.gif">
+  <img alt="Gif to demonstrate Vizro features" src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/vizro_spash_teaser_fallback.png" width="600">
+</picture>
 <br>
 <br>
 <img src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/logo_watermarks.svg" width="300">
@@ -120,7 +123,10 @@ Vizro-AI is a separate package (called `vizro_ai`) that extends Vizro to incorpo
 
 Visit the [Vizro-AI documentation](https://vizro.readthedocs.io/projects/vizro-ai/) for more details.
 
-<img width="600" src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/toolkit_vizro_ai.gif">
+<picture>
+  <source srcset="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/toolkit_vizro_ai.gif">
+  <img alt="Gif to demonstrate Vizro-AI" src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/toolkit_vizro_ai_fallback.png" width="600">
+</picture>
 
 ## Installation and first steps
 

vizro-core/changelog.d/20250123_140015_huong_li_nguyen_refactor_template_generation.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/20250128_164637_huong_li_nguyen_update_material_font.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
+
+- Update `material-symbols-outlined.wolff2` to include the latest icons. ([#972](https://github.com/mckinsey/vizro/pull/972))
+
+
+<!--
+### 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/20250129_112526_huong_li_nguyen_check_plotly_update.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/docs/pages/user-guides/themes.md

@@ -73,8 +73,16 @@ To change the theme to `vizro_light` for all charts, run:
 
 ```python
 import plotly.io as pio
+import vizro.plotly.express as px
 
 pio.templates.default = "vizro_light"
+
+df = px.data.iris()
+px.scatter_matrix(
+    df,
+    dimensions=["sepal_length", "sepal_width", "petal_length", "petal_width"],
+    color="species",
+)
 ```
 
 ### Set themes for selected charts

vizro-core/examples/scratch_dev/app.py

@@ -1,26 +1,28 @@
 """Dev app to try things out."""
 
-from vizro import Vizro
 import vizro.models as vm
 import vizro.plotly.express as px
+from vizro import Vizro
+from vizro.figures import kpi_card
 
-from vizro.tables import dash_data_table
-
-gapminder = px.data.gapminder()
+tips = px.data.tips
 
+# Create a layout with five rows and four columns. The KPI card is positioned in the first cell, while the remaining cells are empty.
 page = vm.Page(
-    title="Page",
+    title="KPI card",
+    layout=vm.Layout(grid=[[0, 0, -1, -1]] + [[-1, -1, -1, -1]] * 2),
     components=[
-        vm.Table(
-            figure=dash_data_table(data_frame=gapminder),
-            title="Gapminder Data Insights",
+        vm.Figure(
+            figure=kpi_card(  # For more information, refer to the API reference for kpi_card
+                data_frame=tips,
+                value_column="tip",
+                value_format="${value:.2f}",
+                icon="folder_check",
+                title="KPI card I",
+            )
         )
     ],
-    controls=[
-        vm.Filter(column="continent", selector=vm.Dropdown(value=["Europe"])),
-        vm.Filter(column="continent", selector=vm.Dropdown(value="Europe", multi=False)),
-        vm.Filter(column="continent", selector=vm.Checklist()),
-    ],
+    controls=[vm.Filter(column="day", selector=vm.RadioItems())],
 )
 
 dashboard = vm.Dashboard(pages=[page])

vizro-core/hatch.toml

@@ -58,6 +58,11 @@ pypath = "python -c 'import sys; print(sys.executable)'"
 # Only run pre-commit hooks when schema is generated, not when it's checked. This keeps the check fast in CI.
 schema = ["python schemas/generate.py", '- pre-commit run --files="schemas/$(hatch version).json" > /dev/null']
 schema-check = ["python schemas/generate.py --check"]
+templates = [
+  "python src/vizro/_themes/generate_plotly_templates.py",
+  '- pre-commit run --files src/vizro/_themes/vizro_dark.json src/vizro/_themes/vizro_light.json > /dev/null'
+]
+templates-check = ["python src/vizro/_themes/generate_plotly_templates.py --check"]
 # Note `hatch run test` currently fails due to interference between integration tests and unit tests. Ideally we would
 # fix this, but we don't actually use `hatch run test` anywhere right now.
 # See comments added in https://github.com/mckinsey/vizro/pull/444.

vizro-core/pyproject.toml

@@ -54,7 +54,7 @@ exclude_lines = [
   "if __name__ == .__main__.:",
   "if TYPE_CHECKING:"
 ]
-fail_under = 92
+fail_under = 90
 show_missing = true
 skip_covered = true
 
@@ -81,7 +81,10 @@ filterwarnings = [
   # Ignore warning for Pydantic v1 API and Python 3.13:
   "ignore:Failing to pass a value to the 'type_params' parameter of 'typing.ForwardRef._evaluate' is deprecated:DeprecationWarning",
   # Ignore deprecation warning until this is solved: https://github.com/plotly/dash/issues/2590:
-  "ignore:HTTPResponse.getheader():DeprecationWarning"
+  "ignore:HTTPResponse.getheader():DeprecationWarning",
+  # Ignore deprecation warning as it comes from the plotly default template. In our templates `vizro_dark` and
+  # `vizro_light`, we do not use mapbox anymore, see: https://github.com/mckinsey/vizro/pull/974
+  "ignore:.*scattermapbox.*is deprecated.*Use.*scattermap.*instead:DeprecationWarning"
 ]
 norecursedirs = ["tests/tests_utils", "tests/js"]
 pythonpath = ["tests/tests_utils"]

vizro-core/src/vizro/__init__.py

@@ -1,16 +1,19 @@
+import json
 import logging
 import os
+from pathlib import Path
 
 import plotly.io as pio
 from dash.development.base_component import ComponentRegistry
 
 from ._constants import VIZRO_ASSETS_PATH
-from ._themes import dark, light
 from ._vizro import Vizro, _make_resource_spec
 
 logging.basicConfig(level=os.getenv("VIZRO_LOG_LEVEL", "WARNING"))
-pio.templates["vizro_dark"] = dark
-pio.templates["vizro_light"] = light
+
+base_path = Path(__file__).parent / "_themes"
+pio.templates["vizro_dark"] = json.loads((base_path / "vizro_dark.json").read_text())
+pio.templates["vizro_light"] = json.loads((base_path / "vizro_light.json").read_text())
 
 __all__ = ["Vizro"]