bumbeishvili / org-chart

Highly customizable org chart. Integrations available for Angular, React, Vue
https://stackblitz.com/edit/web-platform-o5t1ha
MIT License
928 stars 330 forks source link

How to set initial focused node #276

Closed jptheripper closed 1 year ago

jptheripper commented 1 year ago

Is there a way via url parameters to set the initial focused node? if I have 1 -

If I wanted to load this graph with 5 as the centered/selected node, 7&8 expanded below, and 1&2 (parent and grandparent) collapsed above, is that possible

bumbeishvili commented 1 year ago

The org chart is separate from the URL configuration, so I believe it can easily be achieved:

Steps:

  1. When page loads, check if there are query string parameters loaded (node id or something)
  2. If there is, then set _centered and _expanded property to true to corresponding org chart data item and that's it. When rendered, org chart will focus on that specific node
jptheripper commented 1 year ago

Is there also a _filtered property that can, for example, select a department or another attribute such as office location?

bumbeishvili commented 1 year ago

Not exactly sure what you mean, data is entirely independent in the org chart and the org chart does not know about it (you just need to specify id and parentId), it's up to you how you will generate the content based on your data or how you will filter them

jptheripper commented 1 year ago

Looking at the example, i think i can implement

      .render()
      .setCentered("O-6067")
      .setExpanded("O-6067")
      .render();

setCentered works, setExpanded does not seem to do anything. I would like the result to be similar to how the chart looks after clicking the expand button at the bottom of the card.

jptheripper commented 1 year ago

is this possible?

jptheripper commented 1 year ago

Thank you for the clarification. I replied to the issue. I do not believe .setExpanded("O-6067").render() is working, or I am not understanding what it should do. I think it should expand as if you clicked the arrow at the bottom of the node, but it does not, in the sample or my code.

Any advice is appreciated. I have integrated this into a GIS Operations Dashboard. Its amazing

[image: image]

On Thu, May 18, 2023 at 11:19 AM David Bumbeishvili < @.***> wrote:

Not exactly sure what you mean, data is entirely independent in the org chart and the org chart does not know about it (you just need to specify id and parentId), it's up to you how you will generate the content based on your data or how you will filter them

— Reply to this email directly, view it on GitHub https://github.com/bumbeishvili/org-chart/issues/276#issuecomment-1553221461, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACQSXIHDP7NVXOCIUICWCWLXGY4XHANCNFSM6AAAAAAYGLIATI . You are receiving this because you authored the thread.Message ID: @.***>

jptheripper commented 1 year ago

Hello, just seeing if this is a bug or if i am doing something incorrectly

bumbeishvili commented 1 year ago

Hi, if you can prepare an online sample highlighting the issue you are having, I might be able to check it out

jptheripper commented 1 year ago

Sure

https://www.mymanatee.org/gisapps/gis/hr/org.html?emp=M001346

Code correctly zooms to node. But i would like node expanded automatically, and it is collapsed..

In the below code snippet, empCenter is from the URL, id = 'M001346'

  .render()

.compact(!!(compact++%2)).render().fit() .setCentered(empCenter).render() //works .setExpanded(empCenter).render(); //not working

On Wed, Aug 2, 2023 at 2:57 AM David Bumbeishvili @.***> wrote:

Hi, if you can prepare an online sample highlighting the issue you are having, I might be able to check it out

— Reply to this email directly, view it on GitHub https://github.com/bumbeishvili/org-chart/issues/276#issuecomment-1661609131, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACQSXIC3LAQ6FGZRMMRRHFDXTH243ANCNFSM6AAAAAAYGLIATI . You are receiving this because you authored the thread.Message ID: @.***>

bumbeishvili commented 1 year ago

@jptheripper if you want children of those nodes to be expanded, you'll need to add _expanded property to all its children.