flowingcode / orgchartaddon

Organizational Chart Vaadin Add-on

OrgChart Add-On

OrgChart Add-On is a Vaadin 14+ NPM mode integration of the library OrgChart.

Features

• Supported library features:
  • data,
  • pan,
  • zoom,
  • zoominLimit,
  • zoomoutLimit,
  • direction,
  • verticalDepth,
  • depth,
  • toggleSiblingsResp,
  • nodeTitle,
  • nodeContent,
  • nodeTemplate
  • exportButton,
  • exportFilename,
  • exportFileextension (png & pdf)
• Enable/disable expand/collapse feature
• Add a chart title
• Drag and Drop

Online demo

Try the add-on demo at http://addonsv14.flowingcode.com/orgchart

Download release

Official releases at Vaadin Directory https://vaadin.com/directory/component/orgchart-add-on

Maven install

Add the following dependencies in your pom.xml file:

<dependency>
   <groupId>com.flowingcode.vaadin.addons</groupId>
   <artifactId>orgchart-addon</artifactId>
   <version>X.Y.Z</version>
</dependency>

<repository>
   <id>vaadin-addons</id>
   <url>https://maven.vaadin.com/vaadin-addons</url>
</repository>

For SNAPSHOT versions see here.

Building and running demo

• git clone repository
• mvn clean install
• cd demo
• mvn jetty:run

To see the demo, navigate to http://localhost:8080/

Release notes

Version 2.0.0

• Initial Version. This version allows to visualize an organizational chart and exported as a png or a pdf file.

Version 2.0.1

• Drag and Drop Version. This version allows to Drag and Drop OrgChart nodes.

Version 2.0.2

• Add support for node styling (e.g. change node colors)

Version 2.0.3

• Add support for node templates
• Fix options chartDepth and chartVerticalDepth
• Fix export support in IE
• Update OrgChart library to version 2.1.3
• Update jackson-databind dependency because of security vulnerabilities (#7)

Version 2.0.4

• Add support for click events (#4) and tooltips in orgchart nodes (#9)

Version 4.0.0

• Initial release for Vaadin 14+ (npm mode)

Roadmap

This component is developed as a hobby with no public roadmap or any guarantees of upcoming releases. That said, the following features are planned for upcoming releases:

• Edition of the organization chart

Issue tracking

The issues for this add-on are tracked on its github.com page. All bug reports and feature requests are appreciated.

Contributions

Contributions are welcome, but there are no guarantees that they are accepted as such.

As first step, please refer to our Development Conventions page to find information about Conventional Commits & Code Style requeriments.

Then, follow these steps for creating a contribution:

• Fork this project.
• Create an issue to this project about the contribution (bug or feature) if there is no such issue about it already. Try to keep the scope minimal.
• Develop and test the fix or functionality carefully. Only include minimum amount of code needed to fix the issue.
• For commit message, use Conventional Commits to describe your change.
• Send a pull request for the original project.
• Comment on the original issue that you have implemented a fix for it.

License & Author

This add-on is distributed under Apache License 2.0. For license terms, see LICENSE.txt.

OrgChart Add-On is written by Flowing Code S.A.

Hybrid Demo uses People icons created by Creartive - Flaticon

Developer Guide

Getting started

Here is a simple example on how to try out the add-on component:

  OrgChartItem item1 = new OrgChartItem(1, "Root item", "Root Level");
  OrgChartItem item2 = new OrgChartItem(2, "Item 2", "Level 1");
  OrgChartItem item3 = new OrgChartItem(3, "Item 3", "Level 1");        
  item1.setChildren(Arrays.asList(item2, item3));
  
  OrgChart orgChart = new OrgChart(item1);
  orgChart.setChartTitle("A Title");
  orgChart.setChartNodeContent("title");
  orgChart.setChartExportButton(true);
  orgChart.setZoom(true);
  orgChart.setChartDraggable(true);
  
  // add to a layout
  VerticalLayout layout = new VerticalLayout();
  layout.addComponent(orgChart);

Special configuration when using Spring

By default, Vaadin Flow only includes com/vaadin/flow/component to be always scanned for UI components and views. For this reason, the addon might need to be whitelisted in order to display correctly.

To do so, just add com.flowingcode to the vaadin.whitelisted-packages property in src/main/resources/application.properties, like:

vaadin.whitelisted-packages = com.vaadin,org.vaadin,com.flowingcode

More information on Spring whitelisted configuration here.

orgchartaddon's Issues

Nodes aren't collapsable vertically

Expectation:
All nodes, except one "last" node, can be / are collapsed - like seen in the JQuery library https://dabeng.github.io/OrgChart/toggle-sibs-resp.html or when using https://addonsv14.flowingcode.com/orgchart "Bottom to Top"

Observation:
One node in every "layer" remains uncollapsable (when not using Bottom to Top, but setChartExpandCollapse), thus collapsing nodes vertically is not possible. Additionally this prevents uncollapsing nodes when setCollapsedNodes is used. When a node with child nodes is collapsed horizontally, its child nodes disappear and can't be uncollapsed again. Furthermore, the collapse / uncollapse arrows don't show up using below setup, which makes it hard for the user to determine which nodes are collapsable / collapsed.

Code:

	int i = 1;
	OrgChartItem root;
	OrgChart orgChart;
	
	public MyOrgChart() {
		root = new OrgChartItem(i++, "root", "root");
		addChildren();
		orgChart = new OrgChart(root);
		String nodeTemplate = "<div class='title'>${item.title}</div>" + "<div class='middle content'>${item.name}</div>" + "${item.data.content?`<div class='custom content'>${item.data.content}</div>`:''}";
		orgChart.setNodeTemplate("item", TemplateLiteralRewriter.rewriteFunction(nodeTemplate));
		orgChart.addClassName("orgChart");
		orgChart.setChartTitle("Showcase Organigramm");
		orgChart.setChartExpandCollapse(true);
		// orgChart.setCollapsedNodes();	
	}
	
	public void addChildren() {	
		List<OrgChartItem> childrenItems = new ArrayList<>();
		
		OrgChartItem child1 = new OrgChartItem(i++, "child1", "child1");
		child1.setData("content", "child1");
		childrenItems.add(child1);
		
		OrgChartItem child2 = new OrgChartItem(i++, "child2", "child2");
		child2.setData("content", "child2");
		
		OrgChartItem subChild21 = new OrgChartItem(i++, "subChild21", "subChild21");
		subChild21.setData("content", "subChild21");
		
		OrgChartItem subChild22 = new OrgChartItem(i++, "subChild22", "subChild22");
		subChild22.setData("content", "subChild22");
		
		child2.setChildren(Arrays.asList(subChild21, subChild22));
	
		childrenItems.add(child2);
		
		root.setChildren(childrenItems);
	}

Update orgchart library dependency to latest one

Currently, Orgchart Add-on is relying on a very old version of OrgChart library, 2.1.4. Checking the library repository, the latest at this moment is 3.6.0. There a few updates regarding not longer depending on the use of font-awesome for icons, some changes on the display of export button, some refactoring, dependencies updates and more.

It will be nice to make the add-on rely on a newer version and also to check if it could help to fix some identified issues this add-on is currenty presenting/causing (#65, https://github.com/FlowingCode/AddonsDemo/issues/103, #72).

Allow collapse nodes by default

Provide support for collapsing nodes by default.

V14 - Exported file is missing format/styling

Go to https://addonsv14.flowingcode.com/orgchart/drag-and-drop and click "Export" button. Resulting file shows barely visible data and no styling.

Weird navigation in Vaadin 23+ demos

Steps to reproduce

1. Open 23 staging demo site https://addonsv23-staging.flowingcode.com
2. Go to Orgchart demo
3. Click the Export button
4. Open the side menu and go to another demo (e.g. error-window)

Observed behavior

The URL is https://addonsv23-staging.flowingcode.com/orgchart/error-window

Expected behavior

The URL should be https://addonsv23-staging.flowingcode.com/error-window

Observations

It does not happen if you open https://addonsv23-staging.flowingcode.com/orgchart/drag-and-drop instead of steps 1 and 2 above.

Problem with BOTTOM_TO_TOP chart direction

Taken from Vaadin Directory feedback:

I am using version 4.0.5 and am trying to create a chart that looks like this one: https://codepen.io/dabeng/pen/mRZpLK That is, only the top part of the nodes is shown, not the bottom part.
My test code is very simple:

OrgChartItem vh00034 = new OrgChartItem(1, "VH00034", "");
OrgChartItem vh00035 = new OrgChartItem(1, "VH00035", "");
OrgChartItem vh00036 = new OrgChartItem(1, "VH00036", "");
OrgChartItem vh00037 = new OrgChartItem(1, "VH00037", "");
OrgChartItem vh00038 = new OrgChartItem(1, "VH00038", "");
OrgChartItem vh00040 = new OrgChartItem(1, "VH00040", "");
vh00040.setClassName("tracedlot");
OrgChartItem vh00041 = new OrgChartItem(1, "VH00041", "");
OrgChartItem vh00042 = new OrgChartItem(1, "VH00042", "");
vh00034.setChildren(Arrays.asList(vh00035));
vh00035.setChildren(Arrays.asList(vh00036, vh00040));
vh00036.setChildren(Arrays.asList(vh00037));
vh00037.setChildren(Arrays.asList(vh00038));
vh00040.setChildren(Arrays.asList(vh00041));
vh00041.setChildren(Arrays.asList(vh00042));
OrgChart orgChart = new OrgChart(vh00034);
orgChart.setChartTitle("Loturakning: VH00041");
orgChart.setChartDirection(ChartDirectionEnum.BOTTOM_TO_TOP.getAbreviation());
String nodeTemplate2 = "<div class='title'>${item.name}</div>";
orgChart.setNodeTemplate("item", TemplateLiteralRewriter.rewriteFunction(nodeTemplate2));
orgChart.initializeChart();
add(orgChart);

But while the nodes are drawn correctly, there is a lot of white space below them, so the line connecting a node to the node below it is far from the upper node. See the attached screenshot where the top-left node is selected. This seems to be caused by the focus area (when a node is selected) being in a different place (further down) than the actual node. I have no CSS on the page that affects this, the page is just a blank Vadadin Div component with the org chart inside.

Then a solution was proposed:

.node{
	border: 1px solid #DE6F70 !Important;
   	
  	padding: 0px !Important;
  	border-top-right-radius: 5px;
  	border-top-left-radius: 5px;
	position: unset !important; 
		  
	border-radius:4px;
}
.node .title{
	overflow: unset !important;
	line-height:unset !important;
	height:unset !important;
	padding-top:4px;
	position: relative;
  	top: -23px;  
}
.orgchart table {
  	margin-right: 4px;
}

It would be great to reproduce and solve the problem with what was proposed

nodeTemplate with the Addon..?

Is it possible to put nodeTemplate using this Addon...?

Problem with node template and direction different as default one

As I was working on #41 I found another problem when using a direction that is not the default one and node templates. If we change direction to B2T (or L2R or R2L) in the first demo example, the styling of the nodes that have extra data to show as content, breaks. See images attached:

B2T:

L2R:

Cannot see arrow indicators on nodes

Hello

The arrow indicators for collapsing and expanding the org tree are not appearing for me. Here is an an example of the code.

 OrgChartItem item1 = new OrgChartItem(1, "Root item", "Root Level");
        OrgChartItem item2 = new OrgChartItem(2, "Item 2", "Level 1");
        OrgChartItem item3 = new OrgChartItem(3, "Item 3", "Level 1");
        item1.setChildren(Arrays.asList(item2, item3));

        OrgChart orgChart = new OrgChart(item1);
        orgChart.setChartTitle("A Title");
        orgChart.setChartNodeContent("title");
        orgChart.setChartExportButton(true);
        orgChart.setChartDraggable(true);
        orgChart.setChartExpandCollapse(true);

        add(orgChart);

Any idea why this is not working? I am using vaadin 21 with version 4.2.1 or the org chart.

thanks!

Clicklisteners on Items

It would be cool to have the ability to react to clicks an the items.

setChartExpandCollapse doesn't seem to work properly

Despite using setChartExpandCollapse(true) the HTML looks like this:
<div class="orgchart noncollapsable" ...>

The issue can also be observed in the Demo (Drag and Drop Tab): https://addonsv14.flowingcode.com/orgchart

EDIT:
Using setChartDirection(ChartDirectionEnum.TOP_TO_BOTTOM.getAbreviation()) allows collapsing most nodes, except for one last node below the root node. Also the collapse / expand arrows don't show up at all, so the end user wouldn't know, that the nodes are collapsable.

Update dependency com.fasterxml.jackson.core:jackson-databind to version 2.9.4

Known high severity security vulnerabilities (CVE-2017-15095, CVE-2017-17485, CVE-2018-5968) detected in com.fasterxml.jackson.core:jackson-databind >= 2.9.0, < 2.9.4 defined in pom.xml.

pom.xml update suggested: com.fasterxml.jackson.core:jackson-databind ~> 2.9.4.

Father-son relationship

Hi.

It would be very useful for us not only to have a father-son relationship but also a relationship between siblings. It could be possible? Do you have this in consideration?

Thank you!!!!

Enhance org.chart

Hi
Thank you everyone for bringing and maintaining this add-on. In order to make the org chart more appealing, I tried to enhance it to appear like the following:

I tried use of css and nodeTemplate as follows:

CSS:

/* CSS for the organization chart */
.chart-container {
width: 100%;
height: 100%;
}

.employee-details-container {
display: flex;
flex-direction: row;
}

.employee-photo {
max-height: 100%;
max-width: 33%; /* Adjust the value as needed */
}

.employee-info {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 0.5em; /* Adjust the value as needed for spacing */
}

/* CSS for the organization chart title and content */
.title {
font-weight: bold;
text-align: center;
margin-top: 1em;
}

.middle.content {
text-align: center;
}

.custom.content {
text-align: center;
font-style: italic;
}

// Set the node template
" String nodeTemplate =
"

"
+ "

"
+ "

"
+ ""
+ "

"
+ "

"
+ "

${item.name}

"
+ "

${item.data.title}

"
+ "

${item.data.mail}

"
+ "

"
+ "

"
+ "

";
"

OrgChartItem directReportItem = new OrgChartItem(number, directReportName, "");
directReportItem.setData("imageUrl", directReportPhotoUrl);
directReportItem.setData("title", directReportTitle);
directReportItem.setData("mail", directReportEmail);
employeeItem.addChildren(directReportItem);

But getting the following as the outcome:

Any way we can get the output like the first image I have shared?

Component failing with Vaadin 16

The styles in Vaadin 16 are completely broken and nodes do not collapse.

how to develop an addon for vaadin?

HI，This AddOn is helpful。I want to konw how to develop an addon for vaadin,because i need to develop one for my project,but i don not konw where i can learn from,can you give me a website for me?thks

json to org chart

right now static data in DEMOUI.java. but we need to make org chart from json file

Build error in Windows (jsPDF/FileSaver dependencies)

Orgchart depends on a broken version of jspdf (see parallax/jsPDF#2208), which causes a production build to fail in Windows with the following message:

[INFO] Running `npm install` ...
npm ERR! path git
npm ERR! code ENOENT
npm ERR! errno ENOENT
npm ERR! syscall spawn git
npm ERR! enoent Error while executing:
npm ERR! enoent undefined ls-remote -h -t ssh://[email protected]/eligrey/FileSaver.js.git
npm ERR! enoent
npm ERR! enoent
npm ERR! enoent spawn git ENOENT
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

Show tooltip in orgchart nodes

Add support to show tooltip in nodes.

Hashcode Integers as Ids

Hi,
When you use large Integers as Id the client to Server transport breaks.

I got this problem because i use Java hashcodes as ids for the node. When you click the Node on the Java backend you got an string link 1.34342e6 ... after that you try to parse the Integer and result in an error.

To fix this problem you can do the following in fc-orgchat.js
'createNode': function($node, data) { $node.on('click', function() { currOrgChart.$server.onClick(data.id.toString()); // here is the fix });

Build error with Vaadin 14.1.2

A production build that was successful with Vaadin 14.0.15 fails with Vaadin 14.1.2

Error log:

Entrypoint bundle = build/vaadin-bundle-e1fb88fd71c4ea885191.cache.js
Entrypoint bundle.es5 = build/vaadin-bundle.es5-1644b3526767c7728334.cache.js
[0] ../target/frontend/generated-flow-imports.js?babel-target=es6 291 bytes {0} [built] [failed] [1 error]
[1] ../target/frontend/generated-flow-imports.js?babel-target=es5 291 bytes {1} [built] [failed] [1 error]

ERROR in ../target/frontend/generated-flow-imports.js?babel-target=es5 115:9
Module parse failed: Unexpected token (115:9)
You may need an appropriate loader to handle this file type.
| 
| fallbacks[thisScript.getAttribute('data-app-id')].loadFallback = function loadFallback() {
>   return import('./generated-flow-imports-fallback.js');
| };

ERROR in ../target/frontend/generated-flow-imports.js?babel-target=es6 115:9
Module parse failed: Unexpected token (115:9)
You may need an appropriate loader to handle this file type.
| 
| fallbacks[thisScript.getAttribute('data-app-id')].loadFallback = function loadFallback() {
>   return import('./generated-flow-imports-fallback.js');
| };

Add-on is not rendered in V24.1

Vaadin: 24.1.0
Add-on: 4.2.3-SNAPSHOT

Add-on does not load in demo site. The following error is logged in the browser console.

FlowClient-d5d5e377.js:3 ReferenceError: require is not defined
    at fc-orgchart-322b91d3.js:15:15177
    at fc-orgchart-322b91d3.js:15:15237
    at fc-orgchart-322b91d3.js:1:25
    at fc-orgchart-322b91d3.js:24:130

Build error with Vaadin 14.1.2

From thread in Vaadin Directory, Thomas Niedergesaess wrote:

 I am using Vaadin 14.1.2.

 I am trying this component and getting following error:

...caused by: org.apache.maven.plugin.PluginExecutionException: Execution default of goal com.vaadin:vaadin-maven-plugin:14.1.2:build-frontend failed: 

  Failed to find the following css files in the `node_modules` or `/Users/thomas/TEST/GIT/my-server/src/BUSINESS_APP/frontend` directory tree:
      - orgchart/dist/css/jquery.orgchart.css
  Check that they exist or are installed. If you use a custom directory for your resource files instead of the default `frontend` folder then make sure it's correctly configured (e.g. set 'vaadin.frontend.frontend.folder' property)

	at org.apache.maven.plugin.DefaultBuildPluginManager.executeMojo(DefaultBuildPluginManager.java:148)
	at org.apache.maven.lifecycle.internal.MojoExecutor.execute(MojoExecutor.java:210)
	... 20 more
Caused by: java.lang.IllegalStateException: 

14.0.15: OK
14.1.x.: Error

Component requieres call to `initializeChart` every time it's added

The following code requieres a call to initializeChart when the component is added. Why is it so? Can't it be handled on attach and/or by setting properties through Element API?

OrgChart og = new OrgChart(new OrgChartItem(1, "name", "title"));
og.initializeChart();
add(og, new Button("Toggle", ev -> {
	if (getChildren().anyMatch(og::equals)) {
		remove(og);
	} else {
		add(og);
		og.initializeChart(); //(?)
	}
}));

Vaadin 23.3 - ReferenceError: jQuery is not defined

After upgrading to Vaadin 24.0.0.alpha7 we get the following error:


generated-flow-imports-7b1c6c38.js:22218 Uncaught (in promise) ReferenceError: jQuery is not defined
    at jquery.orgchart.js:17:13
    at jquery.orgchart.js:19:2

Node Template

Hello.

Would you please implement node template feature of OrgChart.
https://rawgit.com/dabeng/OrgChart/master/demo/custom-template.html

Thanks.

Need drag and drop functionality

Hi,
my company is using this add on on a project to show the organizational chart. we need to support the drag and drop functionality. any chance to get the functionality in ?

Exported image does not match the display orgchart

I want to use the export button for my generated orgcharts but this works not like expected at the moment.
I test it with Vaadin 14.0.15 and 14.1.16 and OrgChartAddon 4.0.2

Inside the build part: update-frontend I've got following warnings:
`WARNING in ../node_modules/@vaadin/flow-frontend/fc-orgchart.js?babel-target=es5 121:27-38
"export 'default' (imported as 'html2canvas') was not found in 'html2canvas'
@ ../target/frontend/generated-flow-imports.js?babel-target=es5

WARNING in ../node_modules/@vaadin/flow-frontend/fc-orgchart.js?babel-target=es5 63:31-37
"export 'default' (imported as 'jQuery') was not found in 'jquery'
@ ../target/frontend/generated-flow-imports.js?babel-target=es5
[INFO] update-frontend took 13740ms.`

I add an image with
row 1: export results
row 2: screenshot from the browser

col left: normal usage of title and name
col right: using an template so show an image as content

In addition to this problem, I also doesn't see the arrows to collapse or expand the nodes.