[Demo] Replace KPI cards with dynamic figure functions

[huong-li-nguyen]

Description

• Replace static KPI cards with KPI card functions
• Introduce FlexContainer and optimise layout
• Update README and list out all resources
• Reduce font-size for KPI card functions
• Replace area chart with unstacked area chart incl. two traces

After this PR is merged, I will remove the entire demo in a separate PR (so we have the full commit history in this repository) and then the demo will only live in huggingface afterwards.

TO DO:

• Update screenshots in QA repo

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.

[nadijagraca]

This looks amazing. Great job. 🙌

@lingyielia should we advise CNX team to use new KPI cards instead of the hack with bar chart and traces?

[petar-qb]

Awesome work as usual! 👍