diff --git a/vizro-core/examples/_chart-gallery/README.md b/vizro-core/examples/_chart-gallery/README.md index 232ff58e8..f2f92920c 100644 --- a/vizro-core/examples/_chart-gallery/README.md +++ b/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,7 +57,7 @@ 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 | @@ -65,14 +65,13 @@ The dashboard is still in development. Below is an overview of the chart types f 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/. diff --git a/vizro-core/examples/_chart-gallery/requirements.txt b/vizro-core/examples/_chart-gallery/requirements.txt new file mode 100644 index 000000000..f8c2b9078 --- /dev/null +++ b/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 diff --git a/vizro-core/examples/kpi/utils/_charts.py b/vizro-core/examples/kpi/utils/_charts.py index d6ffd5147..f084f4cee 100644 --- a/vizro-core/examples/kpi/utils/_charts.py +++ b/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 diff --git a/vizro-core/hatch.toml b/vizro-core/hatch.toml index 2389bb56c..ced279b35 100644 --- a/vizro-core/hatch.toml +++ b/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"