nowthis / sankeymatic

Make Beautiful Flow Diagrams
http://sankeymatic.com/build/
ISC License
841 stars 122 forks source link

Percentages and calculated values #32

Open Isaacntk opened 6 years ago

Isaacntk commented 6 years ago

Firstly, thanks for creating such a useful project!

It would be great to be able to use percentages of either the parent or child nodes instead of absolute values.

Could probably be indicated by the syntax Source [10%<] Destination where the arrow denotes which node the percentage is calculated on.

Also, adding onto issue #21 allow a node be the remainder of a parent or child node. i.e.

A [5] Sum
B [5] Sum
Sum [2] Out
Sum [-] Remainder

Where Remainder would be 8. Probably not the best syntax here, but just a suggestion

jsstylos commented 5 years ago

After adding the logic for [ ], I wasn't certain what options would be best for percentages. Like [ ], I think that direction is not necessary, though maybe of some use as documentation and for warning checks. I can imagine sometimes wanting the percentage to be calculated on the total of the source node and sometimes as a percentage of the unallocated remainder. The syntax could potentially support both, at the expense of some additional complexity.

For example:

Work [2000] Paycheck
Paycheck [25%] Taxes
Paycheck [1000] Rent
Paycheck [75%*] Savings
Paycheck [25%*] Play

where taxes are calculated off the total paycheck and savings and play are a weighted split of what's left. The "what's left" percentages would have to add up to 100 or be considered an error. [ ] could also be used to fill in any remaining, so that just [ ] would be [ 100% ] but [ 75% ] and [ ] would make the star function as [ 25% ]. The percentage-of-total [ 25% ] would likely be paired with a * to avoid having to make all the other numbers add up perfectly.

I'd be interested in hearing other people's thoughts and use cases.

smil2k commented 3 years ago

I also think supporting percentages based on input and remainder would be useful.

I'm not using sankey for budgets, but for information flow. It is a hurdle to rewrite the entire diagram to "align" the nodes.

Would you be open for a pull request to support the above syntax?

jsstylos commented 3 years ago

Wow, I haven't thought of this in years! I don't have time to work on this currently, but it would be great if someone could at least merge the old [*] PR from 2019, and adding the percentages would be even better. The [*] PR should demonstrate the basic constraint solving necessary to be a basis for the percentages logic.

smil2k commented 3 years ago

As @nowthis is kind of absent from his homepage, twitter I think it is fair to assume that this project is not maintained.

Let's see what happens, if we can at least reach him.

nowthis commented 3 years ago

Hi folks. i do have some bandwidth to look at this now; sorry about the prolonged absence.

I think I have a clue where to go with a syntax now. Thanks for the pull request, @jsstylos. I'll use that as a starting point.


One consideration: in the % example above, I'll need to have some specific response from the script when you run into an unworkable combination such as:

Work [1000] Paycheck Paycheck [25%] Taxes Paycheck [900] Rent

dossy commented 2 months ago

I just discovered this project and want to also say: thank you for making this available.

I also need to display percentages in my diagrams, so I implemented the version that I needed, in this branch.

I'd be happy to submit a pull request if @nowthis is interested in merging my change, but in the meantime, folks can play around with it here:

https://dossy.github.io/sankeymatic/build/index.html

I added three new settings to control the display of percentages:

image

The "calculate percentages based on [parent, total]" either calculates the percentage based on the node's immediate parents or the total inputs of the entire diagram, depending on the chosen option.

Here is what the "Job Search" sample diagram looks like with each setting, first with the percentages set to "parent":

image

And, set to "total":

image

I haven't tested this thoroughly with all permutations of the many settings and input diagrams, but this works exactly as I needed and I figured it would be good to share in case others need this as well.