npm

npm’s 2019 JavaScript ecosystem survey analysis is now available!Get your copy here »

orbitree

1.2.1 • Public • Published

Orbitree

Build Status npm version

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>

License

The GNU General Public License is a free, copyleft license for software and other kinds of works. View the full license.

install

npm i orbitree

Downloadsweekly downloads

13

version

1.2.1

license

GNU 3

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability