[Tidy] Refactor Vizro chart template generation

[huong-li-nguyen]

Description

• Add script to read in bootstrap variables and automatically create chart templates in json format
• Remove unit tests for theme and replace with schema check whether Plotly figure templates are up-to-date
• Remove template_dark.py and template_light.py
• Output vizro_dark.json and vizro_light.json
• Tidy and remove color variables

Visually, nothing has changed. Under the hood, a few things have changed that make our Plotly template generation a lot more stable:

• The Plotly templates are now generated via a script that pulls the variables automatically from the bootstrap theme. This ensures that it's always up-to-date with new token values.
• Added a CI step to check for changes in the Plotly template (this is a lot stronger than the unit tests we had for the theme previously, as it checks for the actual json schema)
• Previously, we generated the themes on the run, so everytime a dashboard was run. This was quite inefficient actually, given that our Plotly templates do not change. Now, the Plotly templates are static and stored inside vizro_dark.json and vizro_light.json and these will be read in at run-time. To update them, one would have to run hatch run templates
• These vizro_light.json and vizro_dark.json will also be re-used for better integration of our bootstrap theme as soon as it's published (more on that later)

Screenshot

Notice

• I acknowledge and agree that, by checking this box and clicking "Submit Pull Request":

  • I submit this contribution under the Apache 2.0 license and represent that I am entitled to do so on behalf of myself, my employer, or relevant third parties, as applicable.
  • I certify that (a) this contribution is my original creation and / or (b) to the extent it is not my original creation, I am authorized to submit this contribution on behalf of the original creator(s) or their licensees.
  • I certify that the use of this contribution as authorized by the Apache 2.0 license does not violate the intellectual property rights of anyone else.
  • I have not referenced individuals, products or companies in any commits, directly or indirectly.
  • I have not added data or restricted code in any commits, directly or indirectly.

[github-actions]

View the example dashboards of the current commit live on PyCafe ☕ 🚀

Updated on: 2025-01-27 15:23:16 UTC
Commit: 100765a

Link: vizro-core/examples/dev/

Link: vizro-core/examples/scratch_dev

Link: vizro-core/examples/visual-vocabulary/

Link: vizro-ai/examples/dashboard_ui/

[antonymilne]

Looks awesome 🙌 Lots of small comments but definitely it's pretty much as I was expecting so happy to approve in advance and feel free to merge when it's done as far as I'm concerned.

[antonymilne]

If this makes vizro.boostrap available then that is definitely worth mentioning in the changelog.

[huong-li-nguyen]

No, I didn't add that change in this PR yet. I wan't to wait for the next token update before we make this public 👍

[lingyielia]

LGTM!

[lingyielia]

Does this function only works with vizro-bootstrap.min.css? Wondering how general this could be and how does it work if users like to try with other bootstrap. Could a user fork the repo and link to other bootstrap css, and generate_json_template helps generate the *_dark.json and *_light.json?

[huong-li-nguyen]

This depends on the customizations, whether they offer both dark and light themes, and what their default theme is. We needed a custom script because we have many custom changes. In our CSS file, the default Bootstrap theme loads first, followed by our custom changes. This causes elements like [data-bs-theme=light] to appear twice. If they have minimal customization and only change some variables, the logic will be different.

Our default theme is dark, which is different from most other Bootstrap themes. So, if someone else has a different default (like light), they'll need to adjust the function to output the light theme first, as the order in the CSS file changes.

For those with a custom Bootstrap theme that only has a few changes (like just some variables), AM script is better suited for this! It's built on Bootswatch themes and handles generic color calculations and assignments: https://github.com/AnnMarieW/dash-bootstrap-templates/blob/1feb51177d72048f5448925c870a94d44e596409/_create_templates.py#L262