[Demo] Add sparkline to ViViVo

[huong-li-nguyen]

Description

Based on https://github.com/mckinsey/vizro/pull/793 - thank you again ataraexia! ⭐

• Adds code for sparkline chart based on px.line

Screenshot

Notice

• [x] 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[bot]]

View the example dashboards of the current commit live on PyCafe :coffee: :rocket:

Updated on: 2024-11-19 09:06:25 UTC Commit: a4584e0871e62f724b18ef9122b606b18107f490

Link: vizro-core/examples/dev/

Link: vizro-core/examples/scratch_dev

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

Link: vizro-ai/examples/dashboard_ui/

[huong-li-nguyen]

Looks nice, although actually I found having three charts with facet_row kind of confusing:

• are they the same y-axis scale?
• are they on a shared y axis or separate? Like without any context I think from glancing at the graph you could easily misunderstand the plot to be showing that Google stock is always above Amazon which is above Apple

So tbh I'm not sure how "best practice" this is. Maybe we should just show one stock instead of comparing three? Or maybe separate the graphs horizontally with a thin grey line?

No strong feelings though, so if this is commonly how sparklines are done then that's ok.

Typically, sparklines display multiple traces, so having just a single trace wouldn't be effective in this context. It's not necessary for them to share the same y-axis scale, but they should use the same unit. The focus is less on comparing their magnitudes and more on observing the overall trend across all traces simultaneously.

I like your idea of adding more separation though, I've now added grey lines to better distinguish between them. 👍