Fishbone Diagram Angular With TypeScript


#1

Hi
We need Fishbone Diagram need to be constructed with customizations, Can you please share any sample project for Angular With TypeScript base.

Regards
Nageswar


#2

You can just use:
https://gojs.net/latest/extensionsTS/FishboneLayout.ts
(https://github.com/NorthwoodsSoftware/GoJS/blob/master/extensionsTS/FishboneLayout.ts)
and adapt the code from:
https://gojs.net/latest/extensionsTS/Fishbone.html


#3

Hi,
Thanks for the reply, with the given reference files we are able to draw diagram(attached screen shot). In the head parameter(Node), we required to have multiple parameters(Nodes) with click, focus kind of events. so we need nodes inside a node to do specific actions. Inner Nodes can be any number , which are dynamically added(need to be done with the help of template). Can you please help us on this.
Regards
Nageswar


#4

I suppose you could make the root Node actually be a Group. But do you really need to be able to have separate Links connecting those items within the root node?

If not, those items can just be separate objects within a simple root node. https://gojs.net/latest/intro/itemArrays.html

You’ll want to leave the default node template alone and define a separate node template that is only used by the root node. https://gojs.net/latest/intro/templateMaps.html


#5

Hi,
Thank you for the reply,I understand the ItemArray but i could not able get only the head node alone to set the isgroup property and adding the children node, can you please help us on this.

Regards
Nageswar


#6

Why do you want those items within the root to be separate Nodes?


#7

It’s a requirement, the fish bone head need to have multiple nodes(parameters), which are with relevant events.


#8

In the model data, set the root data’s isGroup: true, and for each member node data object, set its group to the root node’s key.

Later you can style the Group by assigning Diagram.groupTemplate so that you can make it look and behave how you want, including setting its Group.layout.


#9

Fishbone%20group%20with%20children

In the attached snippet, i tried by updating the isGroup property to the root node and by added child (not sure where to add)node by referring the group key, still its not working.

this is one issue and other ones:
adding and removal of the nodes from the diagram and head(with context menu).
Exporting diagram in high resolutions.
Regards
Nageswar


#10

One problem is that the TreeModel class does not support groups. https://gojs.net/latest/intro/usingModels.html#KindsOfModels

You have to use a GraphLinksModel. Look at the models used by any of the samples that use groups: https://gojs.net/latest/samples/index.html#groups. For example: https://gojs.net/latest/samples/roundedGroups.html

Of course, if you do not really need to use a group and its member nodes as the root node, you would not need to redesign and reimplement how the model is made.

I do not know how you want organize your data, but notice how in the Fishbone sample that the only reason a nested JavaScript structure works is because the walkJson function transforms the structure into a flattened Array of Objects.


#11

Okay, thanks.
please let us know the Scrollable group node for structuring Head with the child nodes , in the below link :https://gojs.net/latest/extensionsTS/ScrollingTable.js. but we required in .TS format as like FishboneLayout.ts file. Please let us know as soon as possible.

Regards
Nageswar


#12

That file already exists as a TS file. https://gojs.net/latest/extensionsTS/ScrollingTable.ts


#13

The extensions directory holds *.JS files that can be loaded in <script> tags.

The extensionsTS directory holds *.JS modules in UMD format, compiled from *.TS TypeScript source files.

If you change the extensionsTS/tsconfig.json file, you can recompile those *.TS files to produce ES6 modules.


#14

As like FishboneLayout.ts i cant use ScrollingTable.ts becuse “ScrollingTable”’ has no exported member ‘ScrollingTable’. so is there any possiblity to get it done. I’m not sure what need to be changed in tsconfig.app.json file!. If this is also not available we cant proceed further.

And

In the following image we need to bring the decorated small icons into the node image not on the edges(thos should be inside node image and very next to edge), is this possible? and the node text can be moded individually?
diagram%20node

and need to know how to export fish bone/process in high resolution images. When i tried exporting the above mentioned node, the following only i got as output.
download

Please reply as soon as possible.

Regards
Nageswar


#15

That is correct – extensionsTS/ScrollingTable.ts does not export any symbol. It defines some panel builders by calling GraphObject.defineBuilder, only for side-effect.

Note that “ScrollingTable” is a Panel, so it can only hold and scroll elements within that Panel. It has nothing to do with member Nodes within a Group. So I take your interest in “ScrollingTable” to mean that you are no longer interested in Groups and member Nodes to implement your root node. And thus you can continue using a TreeModel instead of a GraphLinksModel.

Regarding your node design, I don’t understand what you mean and what you want. Could you please start a different topic for each different subject about which you have questions? Your node implementation has nothing to do with fishbone layout.


#16

There are two diagram representations “fishone” and “process diagram” in our project , for these both we are doing the POC, so only i am asking about both here. So for fishbone i need construct the diagram with head bone as below.

fb%20d

and for the process diagram, i asked below query
In the following image we need to bring the decorated small icons into the node image not on the edges(thos should be inside node image and very next to edge), is this possible? and the node text can be moded individually?
diagram%20node

and need to know how to export fish bone/process in high resolution images. When i tried exporting the above mentioned node, the following only i got as output.
download
Still if needed i will create new topic for diagram,

Thanks & Regards
Nageswar


#17

Yes, please start a new topic for the process node design. I see a lot of shapes there and I have no idea what you have implemented and what you want instead.


#18

okay, for fish bone alone here you can help us for constructing the head node as below.
fb%20d
Thanks & Regards
Nageswar


#19

OK. But you have already seen https://gojs.net/latest/extensionsTS/ScrollingTable.html and https://github.com/NorthwoodsSoftware/GoJS/blob/master/extensionsTS/ScrollingTableScript.ts. How is that different from what you want?


#20

Not sure, how to make use of the FishboneLayout.ts file to construct the expected output.