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	010a93ad81392117b917a4e7f62d8c8808f0049e
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/6679d214bcbe67000808dfe5
😎 Deploy Preview	https://deploy-preview-5596--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.73%. Comparing base (0044aa3) to head (010a93a). Report is 68 commits behind head on develop.

Additional details and impacted files

[](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5596?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 #5596 +/- ## ========================================== - Coverage 5.73% 5.73% -0.01% ========================================== Files 277 278 +1 Lines 41988 42033 +45 Branches 515 516 +1 ========================================== Hits 2409 2409 - Misses 39579 39624 +45 ``` | [Flag](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5596/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/5596/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | `5.73% <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/5596?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/5596?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 [3 files with indirect coverage changes](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5596/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:19 PM

[sidharthv96]

@yari-dewalt can you add some tests in cypress/integration/rendering/pie.spec.ts which covers the long title case?