Visualization

d3-crms

componentDidMount

In first render, allocate key data, and visual data to draw visualization.

getKeyData

get key data in aws and setitem to localstorage

getVisualdata

get visualdata using log file or getting data in aws

drawchart

Data from getVisualData refine to drawchart (Use resource). And that data refine use function make_dataset to make tree architecture and refine one more time to divide node and link. After that make svg to draw grapth, and make marker. Main svg append function zoomed to use zoom and fade and dragstarted,dragged,dragended to use when move main svg

and run update function.

Update function first make node and link to use refine data. And update connect each other if node have a connection.

First time in node, append to node about mouseover func to highlight node. Second, append to node about mouseout to recovery to fisrt status. Third, append to node about contextmenu that mouse right click to collapse node. (Use Summary function) Forth, append to node about circle and image and text to distinguish node.

On the contrary in link, Use divide node type to allocate link distance.

click function is use to open modal about instance information.

Create

getDynamicOption

Use to get option when you need the instance you want to create

Each Component

If you want create instance, provide the data you need when creating the instance you want to create.

Resource

Refine the data to make it easier to visualize.

summary

Show data of clicked instance. Displays the instance button differently depending on the instance state. If click on&off button, that instance will be on or off. If click detail button, redirect to detail page of clicked instance.