- Make separate environment for examples with black as requirement

- Update README

vizro-core/examples/_chart-gallery/README.md

@@ -1,10 +1,10 @@
 # Chart gallery dashboard
 
-This demo dashboard provides a gallery of charts. It includes guidance on when to use each chart type and sample code
-to create them using Plotly and Vizro.
+This dashboard shows a gallery of charts. It includes guidance on when to use each chart type and sample Python code
+to create them using [Plotly](https://plotly.com/python/) and [Vizro](https://vizro.mckinsey.com/).
 
 Inspired by the [FT Visual Vocabulary](https://github.com/Financial-Times/chart-doctor/blob/main/visual-vocabulary/README.md):
-FT Graphics: Alan Smith, Chris Campbell, Ian Bott, Liz Faunce, Graham Parrish, Billy Ehrenberg, Paul McCallum, Martin Stabe
+FT Graphics: Alan Smith, Chris Campbell, Ian Bott, Liz Faunce, Graham Parrish, Billy Ehrenberg, Paul McCallum, Martin Stabe.
 
 ## Chart types
 
@@ -57,22 +57,21 @@ The dashboard is still in development. Below is an overview of the chart types f
 | Stacked Column       | ❌     | Part-to-whole            |
 | Stepped Line         | ❌     | Ranking                  |
 | Surplus-Deficit-Line | ❌     | Deviation                |
-| Treemap              | ✅     | Part-to-whole            |
+| Treemap              | ✅     | Magnitude, Part-to-whole |
 | Venn                 | ❌     | Part-to-whole            |
 | Violin               | ✅     | Distribution             |
 | Waterfall            | ❌     | Part-to-whole, Flow      |
 
 To contribute a chart, follow the steps below:
 
 1. Place an `svg` file named after the chart type in the `assets` folder if not already available.
-2. Create a new page for the chart type in `chart_pages.py`. Refer to existing pages for guidance.
-3. Add any new datasets to the `DATA_DICT` in `_page_utils.py`.
-4. Uncomment the completed chart in the `COMPLETED_CHARTS` list in `tab_containers.py` to enable navigation.
-5. Add the new chart page to the appropriate category in the navigation within `app.py`.
-6. Update the `README.md` with the new chart type.
+2. Create a new page for the chart type in `pages.py` and a code sample in `pages/examples`. Refer to existing pages for guidance.
+3. Add any new datasets to `pages/_page_utils.py`.
+4. Remove the page from `incomplete_pages` in the relevant `ChartGroup`(s) in `chart_groups.py`.
+5. Update this `README.md` with the new chart type.
 
 ## How to run the example locally
 
 1. If you have `hatch` set up, run the example with the command `hatch run example _chart-gallery`.
-   Otherwise, run `python app.py` with your Python environment activated where `vizro` is installed.
+   Otherwise, with a virtual Python environment activated, run `pip install -r requirements.txt` and then `python app.py`.
 2. You should now be able to access the app locally via http://127.0.0.1:8050/.

vizro-core/examples/_chart-gallery/requirements.txt

@@ -0,0 +1,4 @@
+# This file is only used if you don't have hatch installed.
+# It should be fully generated and used when the demo moves to huggingface.
+black==24.4.2
+vizro

vizro-core/examples/kpi/utils/_charts.py

@@ -60,7 +60,7 @@ def bar(
         color_discrete_sequence=["#1A85FF"],
         custom_data=custom_data,
     )
-    fig.update_layout(xaxis_title="# of Complaints", yaxis=dict(title="", autorange="reversed"))  # noqa: C408
+    fig.update_layout(xaxis_title="# of Complaints", yaxis={"title": "", "autorange": "reversed"})
     return fig
 
 
@@ -101,7 +101,7 @@ def pie(
         hole=0.4,
     )
 
-    fig.update_layout(legend_x=1, legend_y=1, title_pad_t=2, margin=dict(l=0, r=0, t=60, b=0))  # noqa: C408
+    fig.update_layout(legend_x=1, legend_y=1, title_pad_t=2, margin={"l": 0, "r": 0, "t": 60, "b": 0})
     fig.update_traces(sort=False)
     return fig
 

vizro-core/hatch.toml

@@ -26,17 +26,12 @@ dependencies = [
   "chromedriver-autoinstaller>=0.6.4",
   "toml",
   "pyyaml",
-  "openpyxl",
-  "black", # TODO COMMENT: Not for linting, just for example. Should really be in different environment (on HF). Maybe make new environment for examples anyway
+  "openpyxl"
 ]
 
-[envs.default.env-vars]
-DASH_DEBUG = "true"
-VIZRO_LOG_LEVEL = "DEBUG"
-
 [envs.default.scripts]
-example = "cd examples/{args:scratch_dev}; python app.py"
-lint = "hatch run lint:lint {args:--all-files}"
+example = "hatch run examples:example {args:scratch_dev}"  # shortcut script to underlying example environment script.
+lint = "hatch run lint:lint {args:--all-files}"  # shortcut script to underlying lint environment script.
 prep-release = [
   "hatch version release",
   "hatch run changelog:collect",
@@ -80,6 +75,21 @@ build = "mkdocs build --strict"
 link-check = "linkchecker site --check-extern --no-warnings --ignore=404.html --ignore-url=127.0.0.1 --ignore-url=https://vizro.readthedocs.io/"
 serve = "mkdocs serve --open"
 
+[envs.examples]
+dependencies = [
+  "pyyaml",
+  # black is required to run the example _chart-gallery. This is completely independent of the black used in linting
+  # our code. When this moves to HuggingFace we can remove the requirement from here.
+  "black==24.4.2"
+]
+scripts = {example = "cd examples/{args:scratch_dev}; python app.py"}
+# This environment doesn't inherit from default but does install Vizro.
+template = "examples"
+
+[envs.examples.env-vars]
+DASH_DEBUG = "true"
+VIZRO_LOG_LEVEL = "DEBUG"
+
 [envs.lint]
 dependencies = [
   "pre-commit"