Accessing State/Vuex Data to Generate Diagrams

[Steve Gumlaw]

Hello, 

I have an application that takes user inputs and computes material lists based on these inputs. The user inputs and computed data are stored in Vuex. The computed material lists are then provided as output to the user in a text/list format. I would like to add functionality that renders a diagram of the finished product for the user, as well. My goal is to access the data from the Vuex store and dynamically output these drawings. I have been able to get the program to work using static data that I store locally within my output component. However, I cannot determine how to access the state data to build the diagrams so that it will be responsive to the user input. Please advise. 

Thank you. 

[Aravind Ravi]

Hi Steve, 

Could you please confirm us whether you get the data and convert that to nodes in the diagram. If yes, then by using the diagram dataSource property we can able to map the id and parentId for the data. In the diagram dataSource map the proper Id and parentId from data. The ID property is used to define the unique field of each JSON data. The parentId property is used to defines the parent field which builds the relationship between ID and parent field.  

By using the diagram’s doBinding we can able to populated the diagram with the nodes and connectors based on the information provided from an external data source Set the data for the organizational chart , and bind that data through diagram’s doBinding feature. Similarly,  you can able to bind the data in doBinding in your sample and create layout.     

We have attached a sample for your reference. Please find the sample in below link    

   

Sample: https://ej2.syncfusion.com/vue/demos/#/material/diagram/organization-model.html 

  

For more information about diagram’s databinding and how to use in layout, please refer to below UG documentation link  

  

UG link: https://ej2.syncfusion.com/vue/documentation/diagram/data-binding/ 

   

Note: The layout gets arranged if the data contains parent-child relationship. If it does not have any parent-child relationship means then layout does not arranged.    

   

Regards    

Aravind Ravi    

[Steve Gumlaw]

Thank you for the response. The data actually comes from the user inputs and doesn't fall into a hierarchical structure. The inputs and subsequent computations dictate the height, and width, as well as some other characteristics of the output. I ended up using the beforeMount hook to call a function which sets the nodes array equal to the getters array. I did the same thing for the connectors array. 

beforeMount: function(e) {

this.nodes = this.$store.getters.nodesList;

this.connectors = this.$store.getters.connectorsList;

[Aravind Ravi]

Hi Steve, 

 

We are unable to process with the reported query. Could you please confirm us whether in the mounted function, nodes and connectors does not return properly or the return nodes does not properly render in the diagram. So please share us your requirements in detail or any simple sample illustrating issue. This would help us to serve you better. 

 

Regards 

Aravind Ravi