feat(git-graph): GitGraph Bottom-to-Top Orientation

[JingyuMarcelLee]

feat(git-graph): GitGraph BT feature:

📑 Summary

Added Bottom-to-Top orientation for the gitGraph. Added BT to gitGraph.jison under "DIR" token and tested this at gitGraphParser.spec.js. Made changes to the gitGraphRenderer.js to correctly render the bottom-to-top orientation of the gitGraph.
Resolves #5239

📏 Design Decisions

1. For gitGraphRenderer.js, I reversed the array that stored the commit nodes so they can be rendered from bottom to top.
2. Fixed the arrow and lines in the renderer so that they can be correctly generated.
3. Added a gitGraph BT: example under /demos/git.html
4. Added a new test case at gitGraphParser.spec.js to check if BT option can be correctly parsed.

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added necessary unit/e2e tests.
• 📓 have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
• 🔖 targeted develop branch

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	a2f54f7
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/65fec6b8250ce60008d388ce
😎 Deploy Preview	https://deploy-preview-5259--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 181 lines in your changes are missing coverage. Please review.

Project coverage is 5.72%. Comparing base (12bf139) to head (a2f54f7).

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #5259      +/-   ##
==========================================
- Coverage     5.74%   5.72%   -0.02%     
==========================================
  Files          277     277              
  Lines        41751   41896     +145     
  Branches        27      27              
==========================================
  Hits          2400    2400              
- Misses       39350   39495     +145     
  Partials         1       1              

Flag	Coverage Δ
unit	5.72% <0.00%> (-0.02%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files	Coverage Δ
...kages/mermaid/src/diagrams/git/gitGraphRenderer.js	0.00% <0.00%> (ø)

[JingyuMarcelLee]

If e2e tests are needed, I will work on them. I will also work on the documentation.

[sidharthv96]

Looks great, works well! Nice work 🚀
Only some minor comments.

We also need

• The documentation in mermaid/packages/mermaid/src/docs/syntax/gitgraph.md
• Rendering tests in cypress/integration/rendering/gitGraph.spec.js

[JingyuMarcelLee]

Updated Documentation. Currently working on the Cypress E2E. I found that the GitGraph: { parallelCommits: true } option in the config breaks the BT orientation. I found a way around it and will work on it

[JingyuMarcelLee]

Finished adding Cypress E2E test cases and logic for handling GitGraph: { parallelCommits: true } option in the config.

[JingyuMarcelLee]

I did make the requested changes, but please let me know if there are any other mistakes/errors. Sorry about the bad test/doc conventions. I should've read Contributing.md more carefully.

[sidharthv96]

Please resolve the conflicts.

[JingyuMarcelLee]

@sidharthv96 I am really sorry about this; I badly polluted the commits with some of the merge conflicts and had to hard reset to the up-to-date dev branch and recommit my feature. Some of the changes in the renderer had conflicts with my logic and I had to rewrite them. I added more examples on git.html to verify everything is working with the merge.

[mermaid-bot]

@JingyuMarcelLee, Thank you for the contribution!
You are now eligible for a year of Premium account on MermaidChart.
Sign up with your GitHub account to activate.