sartography / spiff-arena

SpiffWorkflow is a software development platform for building, running, and monitoring executable diagrams
https://www.spiffworkflow.org/
GNU Lesser General Public License v2.1
66 stars 43 forks source link

Display a graph/image in a form #770

Open gecastro opened 10 months ago

gecastro commented 10 months ago

Hi there,

I'm looking if it is possible to load a graph in a form.

The idea is that the user would enter some parameters in the form and the graph would be updated based on the parameters. This way, the user is able to check out/simulate the results before submitting the data.

Any ideas on where to start?

burnettk commented 10 months ago

@gecastro thanks for raising this. so the process generates some data (either from users or via API, etc), and you would want to visualize that data in a graph (bar graph, pie chart, something) so the user could use it as input in a form? similar to the way we allow for presenting dynamic text above the form to give the user "instructions"? have you used a similar feature in another tool? if so, did you like it? if so, how did it work?

if i'm understanding correctly, one way this could potentially be implemented is using a mechanism like SPIFF_FORMAT:::convert_seconds_to_date_time_for_display, which takes:

SPIFF_FORMAT:::convert_seconds_to_date_time_for_display(1701314656) // seconds since epoch

and converts it to something like:

2023-11-29 22:24:16

the stuff in parentheses (the integer in this case) comes from the backend, but it is processed on the frontend. the code is here. we do this so we can use the browser's timezone. in a similar way, it might be possible to leverage a frontend graphing library by passing it json (this is not the right json, but just to show the idea):

SPIFF_FORMAT:::convert_data_to_graph({"graph_type": "line_graph", data: [{ x: 'January', y: 100 }, { x: 'February', y: 200 }, { x: 'March', y: 150 }]})

and then this would draw a pretty picture.

calexh-sar commented 9 months ago

@gecastro if you would like to work with us on this, please let us know. Otherwise, we won't be getting to this in the near future.

gecastro commented 9 months ago

Ok in case that it was not understood well.

Imagine that a user enters a parameter A and A in a form. The same form, would display a graph using the parameters A and B to help the user visualise/simulate the rest of the process based on those inputs.

The API above seems like a good starting point, so I may ask you for some help in the future. Right now I'm trying to get a proof of concept.

burnettk commented 9 months ago

oh, ok, so as you type stuff in the form, the visualization would be changing, rather than showing the visualization on the next page after you submit. this might be a little harder.