fix(Demo): Corrected demo setup

see #348

.config/webpack.github.js

@@ -5,7 +5,7 @@ var helpers = require('./helpers');
 module.exports = webpackMerge(commonConfig, {
   output: {
     path: helpers.root('docs'),
-    publicPath: 'https://hypery2k.github.io/ngx-vis',
+    publicPath: 'https://visjs.github.io/ngx-vis',
     filename: '[name].[hash].js',
     chunkFilename: '[id].[hash].chunk.js'
   }

README.md

@@ -1,13 +1,13 @@
 # ngx-vis
 
-[![Greenkeeper badge](https://badges.greenkeeper.io/hypery2k/ngx-vis.svg)](https://greenkeeper.io/)
-[![Build Status](https://travis-ci.org/hypery2k/ngx-vis.svg?branch=develop)](https://travis-ci.org/hypery2k/ngx-vis)
+[![Greenkeeper badge](https://badges.greenkeeper.io/visjs/ngx-vis.svg)](https://greenkeeper.io/)
+[![Build Status](https://travis-ci.org/visjs/ngx-vis.svg?branch=develop)](https://travis-ci.org/visjs/ngx-vis)
 
 [![npm version](https://badge.fury.io/js/ngx-vis.svg)](https://badge.fury.io/js/ngx-vis)
-[![codecov.io](https://codecov.io/github/hypery2k/ngx-vis/coverage.svg?branch=master)](https://codecov.io/gh/hypery2k/ngx-vis?branch=master)
-[![David](https://img.shields.io/david/hypery2k/ngx-vis.svg)]()
-[![David](https://img.shields.io/david/dev/hypery2k/ngx-vis.svg)]()
-[![David](https://img.shields.io/david/peer/hypery2k/ngx-vis.svg)]()
+[![codecov.io](https://codecov.io/github/visjs/ngx-vis/coverage.svg?branch=master)](https://codecov.io/gh/visjs/ngx-vis?branch=master)
+[![David](https://img.shields.io/david/visjs/ngx-vis.svg)]()
+[![David](https://img.shields.io/david/dev/visjs/ngx-vis.svg)]()
+[![David](https://img.shields.io/david/peer/visjs/ngx-vis.svg)]()
 
 An angular 2+ vis.js project 
 

demo/demo.component.ts

@@ -12,7 +12,7 @@ import { Component } from '@angular/core';
             <li role="presentation" routerLinkActive="active"><a routerLink="/timeline">Timeline</a></li>
           </ul>
         </nav>
-        <h3 class="text-muted">ngx-vis - an angular 5+ vis.js wrapper</h3>
+        <h3 class="text-muted">ngx-vis - an Angular vis.js wrapper</h3>
       </div>
       <router-outlet></router-outlet>
     </div>

demo/demo.module.ts

@@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule }   from '@angular/router';
 
-import { VisModule } from '../ngx-vis';
+import { VisModule } from '../dist';
 import { DemoComponent } from './demo.component';
 import { HomeComponent } from './home/home.component';
 import { VisNetworkExampleComponent } from './network/network-example.component';

demo/home/home.component.ts

@@ -1,39 +1,40 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'home-example',
-    template: `
-      <div class="jumbotron">
-        <h1>ngx-vis</h1>
-        <p class="lead"><strong>Note:</strong> these examples mimic the ones for <code>vis</code>, but using <code>ngx-vis</code>.</p>
-        <p>
-          <a class="btn btn-lg btn-success" href="https://github.com/hypery2k/ngx-vis" role="button">Get it on GitHub</a>
-          <a class="btn btn-lg btn-success" href="http://visjs.org" role="button">Check out visjs.org</a>
-        </p>
+  selector: 'home-example',
+  template: `
+    <div class="jumbotron">
+      <h1>ngx-vis</h1>
+      <p class="lead"><strong>Note:</strong> these examples mimic the ones for <code>vis</code>, but using <code>ngx-vis</code>.</p>
+      <p>
+        <a class="btn btn-lg btn-success" href="https://www.npmjs.com/package/ngx-vis" role="button">Get it on npmjs</a>
+        <a class="btn btn-lg btn-success" href="https://github.com/visjs/ngx-vis" role="button">Get it on GitHub</a>
+        <a class="btn btn-lg btn-success" href="http://visjs.org" role="button">Check out visjs.org</a>
+      </p>
+    </div>
+    <h2>Examples</h2>
+    <div class="row">
+      <div class="col-sm-6 col-md-4">
+        <div class="thumbnail">
+          <img src="http://visjs.org/images/network.png" alt="Network Examples" />
+          <div class="caption">
+            <h3>Network</h3>
+            <p>Display dynamic, automatically organised, customizable network views.</p>
+            <p><a routerLink="/network" class="btn btn-primary" role="button">Examples</a></p>
+          </div>
         </div>
-        <h2>Examples</h2>
-        <div class="row">
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-            <img src="http://visjs.org/images/network.png" alt="Network Examples">
-            <div class="caption">
-                <h3>Network</h3>
-                <p>Display dynamic, automatically organised, customizable network views.</p>
-                <p><a routerLink="/network" class="btn btn-primary" role="button">Examples</a></p>
-            </div>
-            </div>
+      </div>
+      <div class="col-sm-6 col-md-4">
+        <div class="thumbnail">
+          <img src="http://visjs.org/images/timeline.png" alt="Timeline Examples" />
+          <div class="caption">
+            <h3>Timeline</h3>
+            <p>Create a fully customizable, interactive timeline with items and ranges.</p>
+            <p><a routerLink="/timeline" class="btn btn-primary" role="button">Examples</a></p>
+          </div>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-            <img src="http://visjs.org/images/timeline.png" alt="Timeline Examples">
-            <div class="caption">
-                <h3>Timeline</h3>
-                <p>Create a fully customizable, interactive timeline with items and ranges.</p>
-                <p><a routerLink="/timeline" class="btn btn-primary" role="button">Examples</a></p>
-            </div>
-            </div>
-        </div>
-        </div>
-    `,
+      </div>
+    </div>
+  `
 })
 export class HomeComponent {}

demo/network/network-example.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 
-import { Data, Edge, Node, Options, VisNetworkService } from '../../components/network';
+import { VisNetworkService, Data, DataSet, Node, Options, Edge } from '../../dist';
 
 @Component({
   selector: 'network-example',
@@ -14,29 +14,35 @@ import { Data, Edge, Node, Options, VisNetworkService } from '../../components/n
     `
   ],
   template: `
-    <h2>Network</h2>
-    <h3>Basic usage</h3>
-    <div
-      class="network-canvas"
-      [visNetwork]="visNetwork"
-      [visNetworkData]="visNetworkData"
-      [visNetworkOptions]="visNetworkOptions"
-      (initialized)="networkInitialized()"
-    ></div>
-    <button type="button" class="btn btn-default" (click)="addNode()">Add node</button>
-    <p><strong>Note:</strong> Open your dev tools to see the console output when the network receives click events.</p>
+    <div *ngIf="visNetworkData">
+      <h2>Network</h2>
+      <h3>Basic usage</h3>
+      <div
+        class="network-canvas"
+        [visNetwork]="visNetwork"
+        [visNetworkData]="visNetworkData"
+        [visNetworkOptions]="visNetworkOptions"
+        (initialized)="networkInitialized()"
+      ></div>
+      <button type="button" class="btn btn-default" (click)="addNode()">Add node</button>
+      <p><strong>Note:</strong> Open your dev tools to see the console output when the network receives click events.</p>
+    </div>
   `
 })
 export class VisNetworkExampleComponent implements OnInit, OnDestroy {
   public visNetwork: string = 'networkId1';
   public visNetworkData: Data;
+  public nodes: DataSet<Node>;
+  public edges: DataSet<Edge>;
   public visNetworkOptions: Options;
 
   public constructor(private visNetworkService: VisNetworkService) {}
 
   public addNode(): void {
-    const newId = this.visNetworkData.nodes.length + 1;
-    (this.visNetworkData.nodes as Node[])[this.visNetworkData.nodes.length] = { id: newId.toString(), label: 'Node ' + newId };
+    const lastId = this.nodes.length;
+    const newId = this.nodes.length + 1;
+    this.nodes.add({ id: newId, label: 'New Node' });
+    this.edges.add({ from: lastId, to: newId });
     this.visNetworkService.fit(this.visNetwork);
   }
 
@@ -53,20 +59,20 @@ export class VisNetworkExampleComponent implements OnInit, OnDestroy {
   }
 
   public ngOnInit(): void {
-    const nodes: Node[] = [
+    this.nodes = new DataSet<Node>([
       { id: '1', label: 'Node 1' },
       { id: '2', label: 'Node 2' },
       { id: '3', label: 'Node 3' },
       { id: '4', label: 'Node 4' },
       { id: '5', label: 'Node 5', title: 'Title of Node 5' }
-    ];
-
-    const edges: Edge[] = [{ from: '1', to: '3' }, { from: '1', to: '2' }, { from: '2', to: '4' }, { from: '2', to: '5' }];
-
-    this.visNetworkData = {
-      edges,
-      nodes
-    };
+    ]);
+    this.edges = new DataSet<Edge>([
+      { from: '1', to: '2' },
+      { from: '1', to: '3' },
+      { from: '2', to: '4' },
+      { from: '2', to: '5' }
+    ]);
+    this.visNetworkData = { nodes: this.nodes, edges: this.edges };
 
     this.visNetworkOptions = {};
   }

demo/timeline/timeline-example.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 
-import { DataItem, DataItemCollectionType, VisTimelineService } from '../../components/timeline';
+import { VisTimelineService, DataItem } from '../../dist';
 
 @Component({
   selector: 'timeline-example',
@@ -34,18 +34,19 @@ export class VisTimelineExampleComponent implements OnInit, OnDestroy {
 
   public addItem(): void {
     const newLength = this.visTimelineItems.length + 1;
-    this.visTimelineItems[this.visTimelineItems.length] = { id: newLength, content: 'item ' + newLength, start: Date.now() };
+    this.visTimelineItems.push({ id: newLength, content: 'item ' + newLength, start: Date.now() });
+    this.visTimelineService.setItems(this.visTimeline, this.visTimelineItems);
     this.visTimelineService.focusOnIds(this.visTimeline, [1, newLength]);
   }
 
   public ngOnInit(): void {
     this.visTimelineItems = [
       { id: 1, content: 'item 1', start: '2016-04-20' },
-      { id: 2, content: 'item 2', start: '2016-04-14' },
-      { id: 3, content: 'item 3', start: '2016-04-18' },
-      { id: 4, content: 'item 4', start: '2016-04-16', end: '2016-04-19' },
-      { id: 5, content: 'item 5', start: '2016-04-25' },
-      { id: 6, content: 'item 6', start: '2016-04-27', type: 'point' }
+      { id: 2, content: 'item 2', start: '2017-04-14' },
+      { id: 3, content: 'item 3', start: '2017-04-18' },
+      { id: 4, content: 'item 4', start: '2018-04-16', end: '2016-04-19' },
+      { id: 5, content: 'item 5', start: '2018-04-25' },
+      { id: 6, content: 'item 6', start: '2019-04-27', type: 'point' }
     ];
   }
 

docs/index.html

@@ -20,5 +20,5 @@
 </head>
 <body>
   <example-app>Loading...</example-app>
-<script type="text/javascript" src="https://hypery2k.github.io/ngx-vis/polyfills.ea185b6b214eabdd1bf5.js"></script><script type="text/javascript" src="https://hypery2k.github.io/ngx-vis/vendor.ea185b6b214eabdd1bf5.js"></script><script type="text/javascript" src="https://hypery2k.github.io/ngx-vis/app.ea185b6b214eabdd1bf5.js"></script></body>
+<script type="text/javascript" src="https://visjs.github.io/ngx-vis/polyfills.5a93e881c7a8aa0b10e6.js"></script><script type="text/javascript" src="https://visjs.github.io/ngx-vis/vendor.5a93e881c7a8aa0b10e6.js"></script><script type="text/javascript" src="https://visjs.github.io/ngx-vis/app.5a93e881c7a8aa0b10e6.js"></script></body>
 </html>

ngx-vis.ts

@@ -1,12 +1,28 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { Data, Edge, DataSet, Node, Options } from 'vis-network';
+import { DataItem, DataGroupCollectionType, DataItemCollectionType, TimelineOptions } from 'vis-timeline';
 
 import { VisNetworkDirective } from './components/network/vis-network.directive';
 import { VisNetworkService } from './components/network/vis-network.service';
 import { VisTimelineDirective } from './components/timeline/vis-timeline.directive';
 import { VisTimelineService } from './components/timeline/vis-timeline.service';
 
-export { VisNetworkDirective, VisTimelineDirective, VisTimelineService, VisNetworkService };
+export {
+  VisNetworkDirective,
+  VisTimelineDirective,
+  VisTimelineService,
+  VisNetworkService,
+  Data,
+  DataSet,
+  Edge,
+  Options,
+  DataItem,
+  DataGroupCollectionType,
+  DataItemCollectionType,
+  Node,
+  TimelineOptions
+};
 
 @NgModule({
   declarations: [VisNetworkDirective, VisTimelineDirective],

package.json

@@ -51,6 +51,9 @@
    "vis-timeline"
   ]
  },
+ "pre-commit": [
+  "test"
+ ],
  "dependencies": {
   "vis-network": "6.4.0",
   "vis-timeline": "6.2.3"