Orbitree NPM | npm.io

Orbitree

Orbitree is a JavaScript package that allows you to display multi-dimensional list items (satellites) around a central point. The intended purpose is for creating interactive organograms when given a multi-dimensional list of employees.

Orbitree Screenshot

Demo: https://georgedenning.github.io/orbitree/example/organogram/

Installation

You can install orbitree with npm:

npm install orbitree

Import the library

Import the library using ES6 syntax:

import Orbitree from "orbitree";

or by using CommonJS:

const Orbitree = require("orbitree");

Create a new instance of Orbitree

// Pass the list element to a new instance of Orbitree.
new Orbitree('.organogram', {

    /**
     * Start Angle.
     * The initial angle to distribute the satellites.
     * @param {number}
     */
    startAngle: -90,

    /**
     * Radius.
     * The satellite spacing from the central point.
     * @param {number}
     */
    radius: this.getRadius(),

    /**
     * Delay. 
     * The incremental delay when animating the satellites.
     * @param {number}
     */
    delay: 0

});

Import Orbitree SASS

@import '~orbitree/sass/app';

Optional: You can override the default variables and include the following components:

@import '~orbitree/sass/vars';

$ot_transition: cubic-bezier(1,-0.8, 0.5, 1.75);

@import '~orbitree/sass/components/orbitree';
@import '~orbitree/sass/components/orbit';
@import '~orbitree/sass/components/satellite';

Default HTML

<ul>
    <li>
        <div data-bg="{IMAGE_URL}">
            <span data-text-top>Orbitree</span>
            <span data-text-btm>Organogram Example</span>
        </div>
        <ul>
            <li>
                <div data-bg="{IMAGE_URL}">
                    <span data-text-top>John Smith</span>
                    <span data-text-btm>Director</span>
                </div>
            </li>
        </ul>
    </li>
</ul>