README.md

orgchart.svg

Modern typescript organisational chart in pure SVG.

Currently there is no documentation or API reference. Sorry for that. The documentation will be provided as soon as possible. Now I'm really busy with pure development of this component.

Demo

You can check the working DEMO example.

• Demo has a custom templates created in Adobe Illustrator - a green personal two-sided card
• Cards can be flipped horizontally by clicking the arrow in the right upper corner
• By cliking the node box you can expand/collapse child nodes if some

Building

If you want to build it yourself use the steps below:

1. Download the whole repo
2. Install required packages and toolset
   • install node packages first

   npm install 

   • install JSPM, typings, gulp

   npm install -g jspm typings gulp

   • install gulp locally

   npm install gulp

   • install packages and DefinitelyTyped

   jspm install
   typings install

3. Run gulp watch or gulp serve

Enjoy!

Full custom templating (SVG)

Library supports a very useful feature, custom SVG string templates. You can create your own design in Adobe Illustrator or other vector tool, export your node box to SVG and after slight changes adopt it as a template to the OrgChart.svg.

Example layouts

I have ambitious plan, to support more complicated trees, where each node in tip-over subtree (those stacked) can have its own subtree. This is possible but not trivial.

Below you can find some example layouts created using OrgChart.svg.

Known issues

Currently known problems regard performance and browsers support for SVG engine and Snap.svg library.

• Serious performance problems with animations on Mozilla Firefox, due to the poor support of SVG technology (take a look on #9)
• Problems with performance on Internet Explorer (take a look on #10)
• Problems with some click events handling on OSX Safari (take a look on #11)