[Docs] Update vizro user tutorial

[huong-li-nguyen]

Description

• Completely revised the tutorial utilizing the tips dataset to enhance the user dashboard workflow.
• Included new sections to address features introduced post-original tutorial, such as new components and custom navigation.
• Integrated connections to the visual vocabulary, allowing direct copying and pasting of charts as suggested by @stichbury 🥳
• Added code highlighting to easily identify changed code snippets

Code for final tutorial: https://py.cafe/vizro-official/vizro-tips-analysis-tutorial
Built docs: https://vizro--1041.org.readthedocs.build/en/1041/

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-03-04 11:04:57 UTC
Commit: 40c04b5

Compare the examples using the commit's wheel file vs the latest released version:

vizro-core/examples/scratch_dev

View with commit's wheel vs View with latest release

vizro-core/examples/dev/

View with commit's wheel vs View with latest release

vizro-core/examples/visual-vocabulary/

View with commit's wheel vs View with latest release

vizro-ai/examples/dashboard_ui/

View with commit's wheel vs View with latest release

[stichbury]

This is amazing, thanks @huong-li-nguyen it's a huge improvement and a massive chunk of work. 🏆 🌟

I've made a few changes to language but almost nothing else to code (for obvious reasons). I tested each link to make sure PyCafe worked OK and fixed a few code font omissions.

The only thing I can think of is to add a sentence at the start to say something like "this tutorial will take 1 hour to work through" or however long you think a new start would do. Could we guide them through particular pathways say if they just want to learn how to add a control you could say, check out section X, and if they just want to work on a layout we'd say "check out section Y" ? That may be something we put elsewhere (say link back to the appropriate section in the tutorial from relevant pages in the guides). Let me do that in a separate PR rather than have it included here.

Next steps, besides additional team review, would be to merge and consider what else we add for this tutorial. For example, video and conversion to blog post.

[Joseph-Perkins]

I really love it! ❤️ great work @huong-li-nguyen! 😁

[stichbury]

Is the tutorial code part of the set "View the example dashboards of the current commit live on PyCafe"?

[huong-li-nguyen]

Is the tutorial code part of the set "View the example dashboards of the current commit live on PyCafe"?

@stichbury - I am not entirely sure what you refer to, but I added the tutorial here: https://py.cafe/vizro-official/vizro-tips-analysis-tutorial

However, I don't think it can be completely replicated live because of the assets folder? I use a logo.svg for the dashboard

[maxschulz-COL]

⭐ Absolutely phenomenal ⭐

I really liked reading it, it's super clear and concise, and it created a beautiful dashboard on top.

Maybe just one additional idea? Do we really need to delete the old tutorial? I mean we could, but there is nothing wrong about it, just a thought! More content might help more people?

[stichbury]

Is the tutorial code part of the set "View the example dashboards of the current commit live on PyCafe"?

@stichbury - I am not entirely sure what you refer to, but I added the tutorial here: https://py.cafe/vizro-official/vizro-tips-analysis-tutorial

Hi @huong-li-nguyen sorry, I wasn't clear -- you know the GitHub tool that comments to every PR so you can compare the dashboards against the PR to make sure they're OK. The first comment above ⬆️

[stichbury]

Maybe just one additional idea? Do we really need to delete the old tutorial? I mean we could, but there is nothing wrong about it, just a thought! More content might help more people?

Yes, why didn't I think about that? I'll take a branch now and move the old tutorial into a separate page (that we don't list for now) while I think about what we should do with it. It could make a quick and easy blog post for somewhere.

[huong-li-nguyen]

Is the tutorial code part of the set "View the example dashboards of the current commit live on PyCafe"?

@maxschulz-COL - could you add it in? :)

[maxschulz-COL]

Is the tutorial code part of the set "View the example dashboards of the current commit live on PyCafe"?

@maxschulz-COL - could you add it in? :)

Ah I just tried but I realised that we do not have the tutorial in our repo! @stichbury @huong-li-nguyen in order for me to add it, we would need the code in our repository. Wdyt?

[huong-li-nguyen]

Is the tutorial code part of the set "View the example dashboards of the current commit live on PyCafe"?

@maxschulz-COL - could you add it in? :)

Ah I just tried but I realised that we do not have the tutorial in our repo! @stichbury @huong-li-nguyen in order for me to add it, we would need the code in our repository. Wdyt?

I'll add it to the examples folder and it should be available after merge then :)