-
-
Notifications
You must be signed in to change notification settings - Fork 6.1k
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.
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
Sankey diagrams #4502
Sankey diagrams #4502
Conversation
c8b5d47
to
69897ac
Compare
Codecov Report
Additional details and impacted files@@ Coverage Diff @@
## develop #4502 +/- ##
============================================
- Coverage 79.71% 60.11% -19.60%
============================================
Files 137 53 -84
Lines 16296 9109 -7187
Branches 496 21 -475
============================================
- Hits 12990 5476 -7514
- Misses 3208 3633 +425
+ Partials 98 0 -98
Flags with carried forward coverage won't be shown. Click here to find out more.
|
a80e1c9
to
0520fdf
Compare
I'm not a member of the mermaid project, but just to put my two cents in:
I'm not really sure that this should be in this PR; it might be better to have it in a separate PR if necessary. Because adding Docker would mean it should be continuously updated and maintained, I'm not sure if that is a top priority. (correct if I'm wrong) It might be better to commit with a meaningful message for a better change log; if someone wants to see changes made in a commit, it would be hard with a I haven't seen the code yet, but you could follow new guidelines for diagram definitions in discussed in this PR #4499, info diagram is an example applying those rules. |
@Yokozuna59 thanks for reply. Have taken all you'd said into consideration |
@nirname I haven't been much active in Slack. Please try to leave questions and comments related to the PR here, so everyone following the PR has the complete view and can pitch in with suggestions. I'll also curate a list of new diagram PRs, so people who want to add new diagrams can refer to them, see discussions, and understand why we made some decisions. The current diagram looks good btw. 🚀 |
@sidharthv96 Thanks a lot |
SyntaxI have not received any feedback on syntax yet, there is a topic about that #4492, but it does not really matter for me where it is being discussed. As for the syntax there are several options (mainly 2). One inspired by Arrow style(which is the current one)
Pros:
Cons:
We can also take a step further and allow defining attributes in place:
ps
but that led to ambiguous behavior so I rejected this option CSV-stylethat is quite often used for that purposes, simply because data is stored that way:
Pros
Cons (well, I dont see any significant):
FusionI also think about something heterogeneous, comma based:
or arrow based:
Allows pretty much everything that 2 previous styles do, as well as grouping |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
2 more test cases and we're done!
Added cypress container (from their official image), may be reconsidered later to choose our own The only minor problem is node JS version mistmatch package.json 18.16.0 docker-compose mermaid 18.16.1 docker-compose cypress 18.16.0 Host option in cypress docker container must be removed in favor of possible configuration option. http://localhost:9000 are currently hard-coded, that is bad Updated ./run script with better documentation and added some styles too it as well Started sankey.spec.js as an example
This is last commit message: Added cypress container (from their official image), Host option in cypress docker container must be removed Updated ./run script with better documentation Started sankey.spec.js as an example (will be reworked) There was a discussion about the need of adding cypress docker support in this PR, firstly I agreed that it could be postponed but now I've reconsidered my views and would rather stick to my initial proposal. We need this, because it is impossible to write tests without running them locally, so that integration is tightly couple with this PR, because no one before me, obviously, was developing it in Docker |
@nirname can you add some more imgSnapshotTests in a different PR? |
Thanks for the great work @nirname ! Will try to get the release out ASAP. |
imgsnapshot is a visual test.
It'll compare the rendered image on every run with an approved base image.
So we don't have to write any validations manually, and it'll test the
entire parsing and rendering stack.
…On Mon, 3 Jul, 2023, 12:37 am Nikolay Rozhkov, ***@***.***> wrote:
***@***.**** commented on this pull request.
------------------------------
In cypress/integration/rendering/sankey.spec.ts
<#4502 (comment)>:
> + it('should render a simple example', () => {
+ imgSnapshotTest(
+ `
+ sankey-beta
+
+ sourceNode,targetNode,10
+ `,
+ {}
+ );
+ });
Could you explain how this test works? What is tested there exactly? What
is expected value?
—
Reply to this email directly, view it on GitHub
<#4502 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ACRVEVOZIV6AZNASM3OMXI3XOHBHFANCNFSM6AAAAAAZJZX6UY>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
@sidharthv96 I have noticed, that this ImgSnapshot test fails sometimes, because cypress discovers some differences in almost 2 identical images (and they really are). I don't know why, If I face the issue I'll attach screenshot. The diff is somewhere near texts, although texts aren't changed, but it still manages to find some imperfect pixels. By the way, thanks for explanation. |
export enum SankeyLinkColor { | ||
source = 'source', | ||
target = 'target', | ||
gradient = 'gradient', | ||
} | ||
|
||
export enum SankeyNodeAlignment { | ||
left = 'left', | ||
right = 'right', | ||
center = 'center', | ||
justify = 'justify', | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [mermaid](https://togithub.com/mermaid-js/mermaid) | [`10.2.4` -> `10.3.0`](https://renovatebot.com/diffs/npm/mermaid/10.2.4/10.3.0) | [![age](https://developer.mend.io/api/mc/badges/age/npm/mermaid/10.3.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/mermaid/10.3.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/mermaid/10.2.4/10.3.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/mermaid/10.2.4/10.3.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>mermaid-js/mermaid (mermaid)</summary> ### [`v10.3.0`](https://togithub.com/mermaid-js/mermaid/releases/tag/v10.3.0): 10.3.0 [Compare Source](https://togithub.com/mermaid-js/mermaid/compare/v10.2.4...v10.3.0) #### What's Changed ##### Features - Sankey diagrams by [@​nirname](https://togithub.com/nirname) in [mermaid-js/mermaid#4502 - Feature/1838 actor creation destruction by [@​Valentine14th](https://togithub.com/Valentine14th) in [mermaid-js/mermaid#4466 - Vertical branches in Git Diagram by [@​mastersibin](https://togithub.com/mastersibin) in [mermaid-js/mermaid#4639 - Use JSON Schema to define and document `MermaidConfig` by [@​aloisklink](https://togithub.com/aloisklink) in [mermaid-js/mermaid#4112 - Remove the test checking whether the JSON Schema default config matched the old default config by [@​aloisklink](https://togithub.com/aloisklink) in [mermaid-js/mermaid#4610 - Fixes support of the macro `ContainerQueue_Ext` for C4 diagrams definition. by [@​kislerdm](https://togithub.com/kislerdm) in [mermaid-js/mermaid#4577 ##### Bugfixes - Make quadrant chart options TypeScript types optional by [@​aloisklink](https://togithub.com/aloisklink) in [mermaid-js/mermaid#4602 - Remove double parsing by [@​nirname](https://togithub.com/nirname) in [mermaid-js/mermaid#4587 - Fix flowchart tooltip typing bug by [@​lishid](https://togithub.com/lishid) in [mermaid-js/mermaid#4562 - Bug/4590 allow notes identical to keywords by [@​ibrahimWassouf](https://togithub.com/ibrahimWassouf) in [mermaid-js/mermaid#4597 - feat: allow specifying on which weekday a tickInterval should start by [@​leinelissen](https://togithub.com/leinelissen) in [mermaid-js/mermaid#4634 - Split formatted markdown strings with unicode support. by [@​sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#4470 - fix: Mind maps handles `-` signs in node ids/text by [@​knsv](https://togithub.com/knsv) ##### Chores - Remove all TypeScript enums and forbid them in ESLint by [@​aloisklink](https://togithub.com/aloisklink) in [mermaid-js/mermaid#4580 - refactor accessibility by [@​Yokozuna59](https://togithub.com/Yokozuna59) in [mermaid-js/mermaid#4551 - chore: Reduce codecov pushes by [@​sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#4604 - Run PR-labeler-config-validator only if config changes by [@​sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#4607 - chore(deps): update all minor dependencies (minor) by [@​renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#4624 - Update all patch dependencies (patch) by [@​renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#4566 - Update all patch dependencies (patch) by [@​renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#4581 - Rename workflow jobs by [@​sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#4574 - Removed unused code in state diagrams by [@​nirname](https://togithub.com/nirname) in [mermaid-js/mermaid#4631 - chore(deps): update all patch dependencies (patch) by [@​renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#4623 - chore: remove unused `devDependency` on coveralls by [@​aloisklink](https://togithub.com/aloisklink) in [mermaid-js/mermaid#4641 - Allow entity diagram attribute names to start with asterisk by [@​ibrahimWassouf](https://togithub.com/ibrahimWassouf) in [mermaid-js/mermaid#4588 - Bug/4592 fix new line padding class diagram by [@​ibrahimWassouf](https://togithub.com/ibrahimWassouf) in [mermaid-js/mermaid#4633 - Fix graph not loading when the img loads too fast or fail to load by [@​pierrickouw](https://togithub.com/pierrickouw) in [mermaid-js/mermaid#4496 - convert `cypress/helpers/util.js` to ts by [@​Yokozuna59](https://togithub.com/Yokozuna59) in [mermaid-js/mermaid#4552 - build(deps-dev): bump word-wrap from 1.2.3 to 1.2.4 by [@​dependabot](https://togithub.com/dependabot) in [mermaid-js/mermaid#4652 - chore(deps): update all minor dependencies (minor) by [@​renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#4663 - chore(deps): update all patch dependencies (patch) by [@​renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#4662 ##### Documentation - Sankey: Remove duplicated examples by [@​nirname](https://togithub.com/nirname) in [mermaid-js/mermaid#4595 - Release docs by [@​sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#4493 - Update latest news section by [@​huynhicode](https://togithub.com/huynhicode) in [mermaid-js/mermaid#4495 - Fix Typo by [@​ryru](https://togithub.com/ryru) in [mermaid-js/mermaid#4567 - Docs: add ChatGPT plugin blog post by [@​huynhicode](https://togithub.com/huynhicode) in [mermaid-js/mermaid#4570 - Fix relative link to theme variables list by [@​ibrahimWassouf](https://togithub.com/ibrahimWassouf) in [mermaid-js/mermaid#4573 - Fix docs:dev by [@​sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#4598 - Docs: update link - "Join the Community" by [@​huynhicode](https://togithub.com/huynhicode) in [mermaid-js/mermaid#4601 - Support docs:dev in docker by [@​nirname](https://togithub.com/nirname) in [mermaid-js/mermaid#4599 - docs(flowchart): add documentation on multiple nodes style by [@​tomperr](https://togithub.com/tomperr) in [mermaid-js/mermaid#4600 - Avoid downloading avtars everytime on docs:dev by [@​sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#4603 - docs: Fix checkbox syntax by [@​guilhermgonzaga](https://togithub.com/guilhermgonzaga) in [mermaid-js/mermaid#4646 - Fix the "Edit this page on GitHub" link in Vitepress documentation for the Mermaid Config pages by [@​aloisklink](https://togithub.com/aloisklink) in [mermaid-js/mermaid#4640 - Support MERMAID_RELEASE_VERSION in docs. by [@​sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#4612 - Docs: update Latest News section by [@​huynhicode](https://togithub.com/huynhicode) in [mermaid-js/mermaid#4655 - added Typora to integrations list by [@​kgilbert78](https://togithub.com/kgilbert78) in [mermaid-js/mermaid#4666 - Docs: Corrects name of C4 link by [@​Incognito](https://togithub.com/Incognito) in [mermaid-js/mermaid#4660 - Fix a typo by [@​gjtorikian](https://togithub.com/gjtorikian) in [mermaid-js/mermaid#4396 #### New Contributors - [@​ryru](https://togithub.com/ryru) made their first contribution in [mermaid-js/mermaid#4567 - [@​ibrahimWassouf](https://togithub.com/ibrahimWassouf) made their first contribution in [mermaid-js/mermaid#4573 - [@​kislerdm](https://togithub.com/kislerdm) made their first contribution in [mermaid-js/mermaid#4577 - [@​leinelissen](https://togithub.com/leinelissen) made their first contribution in [mermaid-js/mermaid#4634 - [@​pierrickouw](https://togithub.com/pierrickouw) made their first contribution in [mermaid-js/mermaid#4496 - [@​mastersibin](https://togithub.com/mastersibin) made their first contribution in [mermaid-js/mermaid#4639 - [@​kgilbert78](https://togithub.com/kgilbert78) made their first contribution in [mermaid-js/mermaid#4666 - [@​Incognito](https://togithub.com/Incognito) made their first contribution in [mermaid-js/mermaid#4660 - [@​gjtorikian](https://togithub.com/gjtorikian) made their first contribution in [mermaid-js/mermaid#4396 **Full Changelog**: mermaid-js/mermaid@v10.2.4...v10.3.0 </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/levaintech/contented). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNi4xMS4wIiwidXBkYXRlZEluVmVyIjoiMzYuMTEuMCIsInRhcmdldEJyYW5jaCI6Im1haW4ifQ==--> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
📑 Summary
Adding new type of diagram - Sankey diagrams
Resolves #4492
I closed First PR in favor of this one, as latter has proper branch name and better description
📏 Design
Sankey diagram represents a flow from one object to another.
GoJS, as well as pages from D3 use
csv
for that:Instead of heading we expect keyword "sankey".
That is the basic idea.
Lets call these object 'nodes' and these transition 'links'/
We also need a possibility for tuning their attributes, and graph attributes as well, such as:
📋 To Do
That is what I plan to do, not everything will have been done at the first approach.
develop
branch