Perspective component building: horizontal git branch

Hi all,

I'm having to need to track the current progress of my product when they move through the production process.
The idea was to have some sort of horizontal GIT branch visual, where the dots would have a checkmark when done, and else empty. A bit like this image:

Would any of you have done something like this before? If not, does any of you have any tips on getting started on building my own component?
For example, a question I have for building modules is, how can you test your code really quickly without having it to import allot in your gateway?

This would be possible without making a module. You could create a script that parses some input to make a graph like this into the svg component.
That will require some "logical coding" ect.

Or if you want a module you can easily import one of the many librabrys from npm like react-flow or gitgraph which do things like that.(many many more libraries). Then you'll have to do some "techinal coding" to make everything work in ignition.

The easiest is to make a react component first and test that out with all the tools in node.
Then once that works you can import the component into the igntion bit where you link all the props and events.
I believe i read somewhere you could directly build your module into the right folders so you didnt need to import it, but i never tried that

1 Like

Thanks Victor!

The SVG way seems a bit limited to me, because each dot will probably has to be hovereable/clickeable (I assume that makes it much harder). Would your SVG approach be maintainable?

I recently made an js inject svg clicker (for version 8.1.22)

You can also easily add classes to the groups to create hover effects.

This would be a nice project to make a module about though.

I saw your post indeed.

Ok, so a module would be better suited for this use case you think?

Idk, both seem viable to me.
Being able to make a perspective module is definitly nice. So for that alone it would be great:p
Importing the drawing logic from one of the libraries would also be really easy.

But if you have no experience with js/module building. And no time to figure it out. Than svg is just as good, and might be easier to edit to your needs than using a library and having to change a module.

Thanks for the advice. I'm going to try building the module.

1 Like

Consider this as a possible starting point:

For the ones bumping onto this, I've posted the finishing of the component in a new topic: