Bring over latest changes

README.md

@@ -13,14 +13,11 @@ short_description: Vizro - Visual vocabulary
 
 ### Welcome to our visual vocabulary dashboard! 🎨
 
-This dashboard serves as a comprehensive guide for selecting and creating various types of charts. It helps you decide
-when to use each chart type, and offers sample Python code using [Plotly](https://plotly.com/python/), and
-instructions for embedding these charts into a [Vizro](https://github.com/mckinsey/vizro) dashboard.
+This dashboard serves as a comprehensive guide for selecting and creating various types of charts. It helps you decide when to use each chart type, and offers sample Python code using [Plotly](https://plotly.com/python/), and instructions for embedding these charts into a [Vizro](https://github.com/mckinsey/vizro) dashboard.
 
 The charts in this dashboard are designed to make it easy for anyone to create beautiful and sophisticated visuals.
 
-Our goal is to help you understand best practices in data visualization, ensure your charts effectively communicate
-your message, and streamline the creation of high-quality, interactive visualizations.
+Our goal is to help you understand best practices in data visualization, ensure your charts effectively communicate your message, and streamline the creation of high-quality, interactive visualizations.
 
 Created by:
 
@@ -30,12 +27,9 @@ Created by:
 
 Inspired by:
 
-- [The FT Visual Vocabulary](https://github.com/Financial-Times/chart-doctor/blob/main/visual-vocabulary/README.md):
-  [Alan Smith](https://github.com/alansmithy), [Chris Campbell](https://github.com/digitalcampbell), Ian Bott,
-  Liz Faunce, Graham Parrish, Billy Ehrenberg, Paul McCallum, [Martin Stabe](https://github.com/martinstabe).
+- [The FT Visual Vocabulary](https://github.com/Financial-Times/chart-doctor/blob/main/visual-vocabulary/README.md): [Alan Smith](https://github.com/alansmithy), [Chris Campbell](https://github.com/digitalcampbell), Ian Bott, Liz Faunce, Graham Parrish, Billy Ehrenberg, Paul McCallum, [Martin Stabe](https://github.com/martinstabe).
 
-- [The Graphic Continuum](https://www.informationisbeautifulawards.com/showcase/611-the-graphic-continuum):
-  Jon Swabish and Severino Ribecca
+- [The Graphic Continuum](https://www.informationisbeautifulawards.com/showcase/611-the-graphic-continuum): Jon Swabish and Severino Ribecca
 
 Credits and sources:
 
@@ -113,13 +107,12 @@ The dashboard is still in development. Below is an overview of the chart types f
 Contributions are welcome! To contribute a chart, follow the steps below:
 
 1. Check that a `svg` file named after the chart type is contained in the [assets](https://github.com/mckinsey/vizro/tree/main/vizro-core/examples/visual-vocabulary/assets/images/charts) folder. If not, [raise an issue](https://github.com/mckinsey/vizro/issues) in the repository.
-2. Add a `.py` file containing a code example of the chart type in the `pages/examples` folder, for instance, `area.py`. Take a look at existing examples.
-3. Create a new page for the chart type and add it to the relevant category `.py` file such as `correlation.py`,
-   `deviation.py`, `distribution.py`, etc. Ensure you add the page to the list of `pages` at the end of the `.py` file.
-4. Remove the `IncompletePage(..)` entry for that chart type in `chart_groups.py`.
-5. Update this `README.md` with the new chart type, its status, category, and API links.
+1. Add a `.py` file containing a code example of the chart type in the `pages/examples` folder, for instance, `area.py`. Take a look at existing examples.
+1. Create a new page for the chart type and add it to the relevant category `.py` file such as `correlation.py`, `deviation.py`, `distribution.py`, etc. Ensure you add the page to the list of `pages` at the end of the `.py` file.
+1. Remove the `IncompletePage(..)` entry for that chart type in `chart_groups.py`.
+1. Update this `README.md` with the new chart type, its status, category, and API links.
 
 ## How to run the example locally
 
 1. Run the example with the command `hatch run example visual-vocabulary`.
-2. You should now be able to access the app locally via http://127.0.0.1:8051/.
+1. You should now be able to access the app locally via http://127.0.0.1:8051/.

assets/css/custom.css

@@ -94,7 +94,7 @@ img[src*="#chart-icon"] {
   background: var(--text-primary);
   border-top-left-radius: 8px;
   bottom: 0;
-  color: var(--text-primary-inverted);
+  color: var(--text-primary-inverted) !important;
   display: flex;
   font-size: 0.8rem;
   font-weight: 500;

custom_components.py

@@ -1,17 +1,12 @@
 """Contains custom components used inside the dashboard."""
 
 from typing import Literal
+from urllib.parse import quote
 
 import dash_bootstrap_components as dbc
 import vizro.models as vm
 from dash import dcc, html
-
-try:
-    from pydantic.v1 import Field
-except ImportError:  # pragma: no cov
-    from pydantic import Field
-
-from urllib.parse import quote
+from pydantic import Field
 
 
 class CodeClipboard(vm.VizroBaseModel):

requirements.in

@@ -2,6 +2,6 @@
 autoflake==2.3.1
 black==24.4.2
 isort==5.13.2
-plotly==5.24.1
+plotly==6.0.0
 vizro==0.1.28
 gunicorn

requirements.txt

@@ -50,9 +50,7 @@ gunicorn==23.0.0
 idna==3.10
     # via requests
 importlib-metadata==8.5.0
-    # via
-    #   dash
-    #   flask
+    # via dash
 isort==5.13.2
     # via -r requirements.in
 itsdangerous==2.2.0
@@ -65,6 +63,8 @@ markupsafe==3.0.2
     #   werkzeug
 mypy-extensions==1.0.0
     # via black
+narwhals==1.25.0
+    # via plotly
 nest-asyncio==1.6.0
     # via dash
 numpy==2.0.2
@@ -80,7 +80,7 @@ pathspec==0.12.1
     # via black
 platformdirs==4.2.2
     # via black
-plotly==5.24.1
+plotly==6.0.0
     # via
     #   -r requirements.in
     #   dash
@@ -105,15 +105,8 @@ six==1.16.0
     # via
     #   python-dateutil
     #   retrying
-tenacity==9.0.0
-    # via plotly
-tomli==2.1.0
-    # via
-    #   autoflake
-    #   black
 typing-extensions==4.12.2
     # via
-    #   black
     #   dash
     #   pydantic
     #   pydantic-core