Show Full Title in Pie Chart SVG

[yari-dewalt]

:bookmark_tabs: Summary

Aims to fix the title of a pie chart overflowing outside the bounds of the rendered SVG.

Resolves #5567

:straight_ruler: Design Decisions

The goal was to keep the rendering the same but to account for the title length if it surpasses the length of the overall diagram. If so, it will update the total width of the diagram and offset the chart so it remains centered under the title text. It also maintains the margin on both sides.

:clipboard: Tasks

Make sure you

• [x] :book: have read the contribution guidelines
• [ ] :computer: have added necessary unit/e2e tests.
• [ ] :notebook: have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
• [x] :bookmark: targeted develop branch

[netlify[bot]]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	a501a884ca909d42c8ee08eb5d9def27839134cc
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/6679cf1595ba0a0008b719ab
😎 Deploy Preview	https://deploy-preview-5595--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[bot]]

Codecov Report

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

Project coverage is 5.72%. Comparing base (0044aa3) to head (a501a88). Report is 68 commits behind head on develop.

Additional details and impacted files

[](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5595?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) ```diff @@ Coverage Diff @@ ## develop #5595 +/- ## ========================================== - Coverage 5.73% 5.72% -0.01% ========================================== Files 277 279 +2 Lines 41988 42044 +56 Branches 515 491 -24 ========================================== Hits 2409 2409 - Misses 39579 39635 +56 ``` | [Flag](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5595/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | Coverage Δ | | |---|---|---| | [unit](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5595/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | `5.72% <0.00%> (-0.01%)` | :arrow_down: | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#carryforward-flags-in-the-pull-request-comment) to find out more. | [Files](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5595?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | Coverage Δ | | |---|---|---| | [packages/mermaid/src/diagrams/pie/pieRenderer.ts](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5595?src=pr&el=tree&filepath=packages%2Fmermaid%2Fsrc%2Fdiagrams%2Fpie%2FpieRenderer.ts&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#diff-cGFja2FnZXMvbWVybWFpZC9zcmMvZGlhZ3JhbXMvcGllL3BpZVJlbmRlcmVyLnRz) | `0.00% <0.00%> (ø)` | | ... and [4 files with indirect coverage changes](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5595/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js)

[argos-ci[bot]]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	⚠️ Changes detected (Review)	11 changed, 2 failures	Jun 24, 2024, 8:06 PM