Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Sankey diagrams are missing viewBox SVG attribute #5100

Closed
alex-titarenko opened this issue Dec 4, 2023 · 0 comments · Fixed by #5102
Closed

Sankey diagrams are missing viewBox SVG attribute #5100

alex-titarenko opened this issue Dec 4, 2023 · 0 comments · Fixed by #5102
Labels
Graph: Sankey Internals: Renderer Type: Bug / Error Something isn't working or is incorrect

Comments

@alex-titarenko
Copy link
Contributor

alex-titarenko commented Dec 4, 2023 •
edited

Description

Looks like Sankey diagrams the only one with missing viewBox SVG attribute. Without this attribute you can't properly scale diagram down to fit the width of the page.

Steps to reproduce

  1. Write the following diagram
sankey-beta
Bio-conversion,Losses,26.862
Bio-conversion,Solid,280.322
Bio-conversion,Gas,81.144
  1. Shrink page to less than 400px in width
  2. Set style for SVG max-width: 100%
    see the result from screenshot.

Please note that to reproduce this you can't use Mermaid Live Editor since it uses svg-pan-zoom library which applies transformation to the image, and most people don't do this.

All other diagrams are working fine except Sankey.

Screenshots

Without viewBox attribute
image

When I try to add viewBox attribute manually via Chrome DevTools I can see the correct result
image

Code Sample

No response

Setup

  • Mermaid version: 10.6.1
  • Browser and Version: Chrome, Safari

Suggested Solutions

Add viewBox attribute to SVG element of Sankey diagrams

Additional Context

No response
@alex-titarenko alex-titarenko added Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect labels Dec 4, 2023
sidharthv96 added a commit that referenced this issue Dec 4, 2023
@sidharthv96
fix: #5100 Add viewbox to sankey
160c7d3
This was referenced Dec 4, 2023
Merged
Open
@sidharthv96 sidharthv96 added Internals: Renderer Graph: Sankey and removed Status: Triage Needs to be verified, categorized, etc labels Dec 4, 2023
github-merge-queue bot pushed a commit that referenced this issue Dec 5, 2023
@nirname
Merge pull request #5102 from mermaid-js/5100_SankeyViewbox
fe07e9d 
fix: #5100 Add viewbox to sankey
sidharthv96 added a commit that referenced this issue Dec 6, 2023
@sidharthv96
Merge branch 'develop' into next
000b432 
* develop: (70 commits)
  build(deps-dev): bump vite from 4.4.9 to 4.4.12
  Changes to .prettierignore 1. Added 'demos/dev/**' to be ignored by Prettier. 2. Added '!/demos/dev/example.html' so that Prettier ensures no one changes the example.html in a way that doesn't obey the Prettier code formatting rules.
  build: use `tsx` instead of `ts-node-esm`
  chore: Downgrade node to 18.18.2
  fix: #5100 Add viewbox to sankey
  chore(deps): update all minor dependencies
  chore: Rename test
  test: Add unit test for generic classname and namespace
  fix: Check if parentCommit is provided
  Split type from generic class name
  Condition of Parent Id Without Merge Commit Added
  Referenced the PmWiki's Cookbook recipe enabling MermaidJs schematics in wiki pages
  test(e2e): fix pie chart E2E tests for PR #4288
  Add dummy commit to trigger GH checks
  chore: Revert unnecessary export
  refactor: Remove unnecessary calculations
  chore: Fix computeWidth function
  chore: Cleanup setupGraphViewbox
  Update docs
  update mermaidAPI to cleanup the text before passing to getDiagramFromText
  ...
sidharthv96 added a commit to NicolasNewman/mermaid that referenced this issue Dec 6, 2023
@sidharthv96
Merge branch 'develop' into pr/NicolasNewman/2885
8d90815 
* develop: (192 commits)
  build(deps-dev): bump vite from 4.4.9 to 4.4.12
  Changes to .prettierignore 1. Added 'demos/dev/**' to be ignored by Prettier. 2. Added '!/demos/dev/example.html' so that Prettier ensures no one changes the example.html in a way that doesn't obey the Prettier code formatting rules.
  build: use `tsx` instead of `ts-node-esm`
  chore: Downgrade node to 18.18.2
  fix: mermaid-js#5100 Add viewbox to sankey
  chore(deps): update all minor dependencies
  chore: Rename test
  test: Add unit test for generic classname and namespace
  fix: Check if parentCommit is provided
  Split type from generic class name
  Condition of Parent Id Without Merge Commit Added
  Referenced the PmWiki's Cookbook recipe enabling MermaidJs schematics in wiki pages
  test(e2e): fix pie chart E2E tests for PR mermaid-js#4288
  Add dummy commit to trigger GH checks
  chore: Revert unnecessary export
  refactor: Remove unnecessary calculations
  chore: Fix computeWidth function
  chore: Cleanup setupGraphViewbox
  Update docs
  update mermaidAPI to cleanup the text before passing to getDiagramFromText
  ...
sidharthv96 added a commit that referenced this issue Dec 7, 2023
@sidharthv96
Merge branch 'next' into sidv/deprecateMermaidAPI
4fe2f31 
* next: (387 commits)
  build(deps-dev): bump vite from 4.4.9 to 4.4.12
  Changes to .prettierignore 1. Added 'demos/dev/**' to be ignored by Prettier. 2. Added '!/demos/dev/example.html' so that Prettier ensures no one changes the example.html in a way that doesn't obey the Prettier code formatting rules.
  build: use `tsx` instead of `ts-node-esm`
  chore: Downgrade node to 18.18.2
  fix: #5100 Add viewbox to sankey
  chore(deps): update all minor dependencies
  chore: Rename test
  test: Add unit test for generic classname and namespace
  fix: Check if parentCommit is provided
  Split type from generic class name
  Condition of Parent Id Without Merge Commit Added
  Referenced the PmWiki's Cookbook recipe enabling MermaidJs schematics in wiki pages
  test(e2e): fix pie chart E2E tests for PR #4288
  Add dummy commit to trigger GH checks
  chore: Revert unnecessary export
  refactor: Remove unnecessary calculations
  chore: Fix computeWidth function
  chore: Cleanup setupGraphViewbox
  Update docs
  update mermaidAPI to cleanup the text before passing to getDiagramFromText
  ...
sidharthv96 added a commit that referenced this issue Dec 7, 2023
@sidharthv96
Merge branch 'develop' into release/10.6.2
7c3bd9a 
* develop:
  Update docs
  Update NiceGuy.io links in integrations-community.md
  build(deps-dev): bump vite from 4.4.9 to 4.4.12
  Changes to .prettierignore 1. Added 'demos/dev/**' to be ignored by Prettier. 2. Added '!/demos/dev/example.html' so that Prettier ensures no one changes the example.html in a way that doesn't obey the Prettier code formatting rules.
  build: use `tsx` instead of `ts-node-esm`
  fix: #5100 Add viewbox to sankey
  fix: Check if parentCommit is provided
  Condition of Parent Id Without Merge Commit Added
  Error Hash Removed
  Linting Issue Fixed
  Updated gitgraph.md
  Linting Issue Fixed
  Documentation Modified New Ex Added
  e2e test case added
  Merge Conflict Resolved
  Suggested Changes FOR PR DONE
  documentation added, Tests Fixed
  All Unit Tests Passing
  Unit Test Cases Added
  Parser and Logic For Parent Commit Added
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Graph: Sankey Internals: Renderer Type: Bug / Error Something isn't working or is incorrect
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: #5100 Add viewbox to sankey mermaid-js/mermaid
2 participants
@alex-titarenko @sidharthv96