Fishbone Diagram Angular With TypeScript

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

You can just use:
https://gojs.net/latest/extensionsTS/FishboneLayout.ts
(GoJS/FishboneLayout.ts at master Ā· NorthwoodsSoftware/GoJS Ā· GitHub)
and adapt the code from:
Fishbone Layout

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

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. GoJS Item Arrays-- Northwoods Software

Youā€™ll want to leave the default node template alone and define a separate node template that is only used by the root node. GoJS Template Maps -- Northwoods Software

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

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

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

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.

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

One problem is that the TreeModel class does not support groups. GoJS Using Models -- Northwoods Software

You have to use a GraphLinksModel. Look at the models used by any of the samples that use groups: GoJS Sample Diagrams for JavaScript and HTML, by Northwoods Software. For example: Rounded Groups With a Header and a Footer

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.

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

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

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.

1 Like

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

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.

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

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.

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

OK. But you have already seen Scrolling Table and GoJS/ScrollingTableScript.ts at master Ā· NorthwoodsSoftware/GoJS Ā· GitHub. How is that different from what you want?

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