nadavrot/layout

[Feature Request] Color Gradient support

Opened this issue · 4 comments

vpochapuis commented

Hello!
Thank you for this crate! I needed a quick way to draw graph in the browser and update it in real-time (I am using Yew as the frontend Framework), and it works great!

It would be nice to have a way to support something similar to the ColorList feature of graphivz:
https://graphviz.org/docs/attr-types/colorList/

In my specific use case I would like to represent the State of Charge of a battery as the fill color gradient. A bit like so as showed in the previous link:
image

If there is already another existing way to do so please let me know!
Thank you for your time

nadavrot commented

Thanks for the feedback. It should be easy to implement this feature, but I am not sure if I have time in the near future. I am curious about your use of the library. Do you have a demo that I can look at?

vpochapuis commented

Thanks for the feedback. It should be easy to implement this feature, but I am not sure if I have time in the near future. I am curious about your use of the library. Do you have a demo that I can look at?

Thanks for the quick reply!
I will ask whether its ok or not for me to show the actual usage of it as for now, and in the worst case i will try to make a small POC to reproduce a similar use case using yew and some dummy data.

I also use plotters extensively for things like charts. (on a Canvas backend though).

  • ❤️1
vpochapuis commented

I have asked.

So here is 2 little video demo of how it works.

The first one shows an update of a graph generated using the library, based on the location of the cursor on a plotters chart.

2024-03-07_CursorControlSnpashotDiagramInstantView.mp4

The second one shows an automatic update of the generated graph based on the latest data received by the UI State.

2024-03-07_LiveSnpashotDiagramInstantViewUpdate.mp4

The graph is a representation of the prototype battery system that we are developing.

(All visuals are under development).

Notes

  • So in this use case, i wanted to try displaying the remaining capacity of the battery as a background colorList in order to easily/quickly show to the user the state. (as another note: the color of the nodes that are used now are for displaying another kind of information: whether the battery is in use or not).

  • It would also be great if there was a easy way to get a callback on mouse move/enter/leave/click over the nodes. But I am not sure at all how we could implement this as for now. I didn't use SVG in Web applications before. For plotters, as they use a canvas there is a need for a conversion function. But as SVG nodes are independent, it seems at the same time, more interesting (could directly get the node) and more complex (how to have callbacks for individual nodes when they are created in the library or even after parsing the result?). There must be some great solutions out there for this kind of questions, but i didn't have the time to search yet.

  • ❤️1
nadavrot commented

Very cool!

  • ❤️1