/ember-cli-visjs

Create touch, scroll and zoomable graphs with nodes and edges via vis.js

Primary LanguageJavaScriptMIT LicenseMIT

Ember-cli-visjs Build Status Ember Observer Score

Simple ember-wrapper around vis.js by almende.

See the demo for examples and usage-infos.

A big thank you to ember-leaflet for their container/child-mixins.

Installation

Make sure you are using a somewhat recent version of nodejs when installing. Everything > 4 should be fine.

ember install ember-cli-visjs

Usage

{{#visjs-network backgroundImage='wp.png'}}
  {{!-- Adding nodes is as simple as passing a unique id to a component. The rest is optional --}}
  {{visjs-node nId=1 label='A' select=(action 'nodeClicked') color='#ff0000'}}
  {{visjs-node nId=2 label='B'}}
  {{visjs-node nId=3 label='C' posX=100 posY=100}}

  {{!-- Node-Relations are given by edges --}}
  {{visjs-edge from=1 to=2}}
  {{visjs-edge from=1 to=3 arrows='to'}}

  {{!-- Feel free to use whatever nesting you wish. It's just hbs --}}
  {{#if fooIsTrue}}
    {{visjs-node nId=5 label='Optional'}}
  {{/if}}
  {{#each bars as |bar|}}
    {{visjs-node nId=bar.id}}
  {{/each}}
{{/visjs-network}}

For all supported options see the demo.

Running tests

The test-execution requires you to have phantomjs 2.x.x installed.

ember test