bumbeishvili / org-chart

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

Multiple lines of responsibility #355

Open harinvp opened 9 months ago

harinvp commented 9 months ago

First, I want to express my sincere appreciation for this incredible work of yours!

Problem: Currently, the org chart system only supports single lines of reporting, which limits the ability to represent complex reporting structures where employees may have multiple supervisors for different contexts. For example "Ava John" reports to "Ian Devlings" normally, but for a specific running project "Ava John" reports to "Sophie Merchant". In this case, it will be great to show two lines (may be represented in different color or other style). One line connects Ava to Ian and other connects Ava to Sophie, both in same chart.

Solution: It would be great to include this feature in your organizational chart system to support dual lines of reporting, allowing us to accurately represent complex reporting relationships where employees report to multiple supervisors simultaneously.

Requested Features:

  1. Dual Reporting Representation: Enable the system to display dual lines connecting an employee node to multiple supervisor nodes, indicating that the employee reports to more than one supervisor.
  2. Adjustable Node Positioning: Provide options to adjust the positioning of nodes to accommodate dual lines of reporting, ensuring clear visualization of reporting relationships without overlap or clutter.
  3. Connection Customization: Allow customization of the appearance of dual reporting lines, such as color, thickness, and style, to distinguish them from single reporting lines.
  4. CSV Data Structure Support: Enhance the CSV data structure to include fields or a format that specifies multiple supervisors for each employee, facilitating the representation of dual reporting relationships in the organizational chart.
  5. Documentation and Guidance: Update documentation and provide guidance on how to utilize the new feature effectively, including best practices for representing dual reporting relationships and configuring node positioning.
bumbeishvili commented 9 months ago

Hi, you have the possibility to connect any node to any node

https://stackblitz.com/edit/js-tpbt7r?file=index.html

You also have the possibility to style it differently

https://github.com/bumbeishvili/org-chart/blob/0b70fef70f801855e335f7db061237491eaa31fd/src/d3-org-chart.js#L281-L289

1 - you can use connections to achieve something like that 2 - You can already adjust node positions artificially, but providing bigger width and height than it needs and then manipulating margins and padidngs inside 3 - You can customize it as you want in connectionsUpdate method 4 - You control the data, you are free to restructure it any way 5 - That is certainly weak area of the library - It would help to have documentation and examples highlighting what I wrote above

harinvp commented 9 months ago

Thank you so much for the quick response . What I mean is to have both lines in the same chart. For example if A is reporting to B and C, if we can show A to B in color blue and A to C in red. So in this case the chart shows two reporting lines , one is blue and other is red. And both lines can have multiple nodes

Thanks, Hari

On Tue, 6 Feb 2024 at 5:10 pm, David Bumbeishvili @.***> wrote:

Hi, you have the possibility to connect any node to any node

https://stackblitz.com/edit/js-tpbt7r?file=index.html

You also have the possibility to style it differently

https://github.com/bumbeishvili/org-chart/blob/0b70fef70f801855e335f7db061237491eaa31fd/src/d3-org-chart.js#L281-L289

1 https://github.com/bumbeishvili/org-chart/issues/1 - you can use

connections to achieve something like that

2 https://github.com/bumbeishvili/org-chart/issues/2 - You can already

adjust node positions artificially, but providing bigger width and height than it needs and then manipulating margins and padidngs inside

3 https://github.com/bumbeishvili/org-chart/issues/3 - You can

customize it as you want in connectionsUpdate method

4 https://github.com/bumbeishvili/org-chart/pull/4 - You control the

data, you are free to restructure it any way

5 https://github.com/bumbeishvili/org-chart/issues/5 - That is

certainly weak area of the library - It would help to have documentation and examples highlighting what I wrote above

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

harinvp commented 8 months ago

Hi @bumbeishvili Could you please throw some light on the above? Like how can I approach the code modifications if I want to achieve the above? Thank you!

bumbeishvili commented 8 months ago

@harinvp I could not understand the previous message exactly, can you draw the layout roughly and post it as an image ?

harinvp commented 8 months ago

IMG_1457 Thank you! Here is the image attached. In this example the primary reporting line (Red) is Ian -> Ava, Sohphie and Ava -> Amol. In the secondary reporting line (Green) is Ian ->Sophie-> Ava, Amol. So basically same people but two kinds of reporting. It would be great if we can represent both lines in same chart ( and showing it in two different styles like colors or line border)

veranika-shvakava commented 8 months ago

Hi @bumbeishvili! I would also like to clarify whether a node can have two parents? If it can, then how can this be achieved? Below is an example Screenshot_2

bumbeishvili commented 8 months ago

Node can't have 2 parents

veranika-shvakava commented 8 months ago

Node can't have 2

Got it. However, can we center the last card? If node cannot have two parents, just center the last card and use Multi Node Connections... InkedScreenshot_2_LI

Arkarrow commented 7 months ago

Hi @veranika-shvakava👋 ! I have the same problem as you, did you find a solution?