NgxVisNetworkEtsisi

Description

Final Degree project - Implementation of Angular library using Vis Network. The main goal of this project is get easier the use of Vis Network including an abstraction layer to different edition methods in an Angular project.

Table of contents

• Getting Started
  • Requirements
  • Installation
  • Configuration
  • Building
  • Show case
• Overall features
• Linting
• Running unit tests
• Documentation
• Contributing
• License

Getting Started

Requirements

It's necessary to have installed at least Node 10.

Also, we need to install those dependencies:

• Vis Data
• Vis Network
• Vis Util

Installation

Just run npm -i ngx-vis-network-etsisi

Configuration

You need to import the module NgxVisNetworkEtsisiModule.

import { NgxVisNetworkEtsisiModule } from 'ngx-vis-network-etsisi';
 
 @NgModule({
   ...
   imports: [NgxVisNetworkEtsisiModule, ...],
   ... 
 })
  ...

To use inside a component:

• You have to add this directive.

<div class="graph-network"
     [etsisiVis]="id"
     [etsisiVisNodes]="nodes"
     [etsisiVisEdges]="edges"
     [etsisiVisOptions]="options"
     (ready)="isGraphNetworkReady()">
</div>

• You have to add this import statement.

import { DataSet, Edge, NgxVisNetworkEtsisiService, Node, Options } from 'ngx-vis-network-etsisi';

Overall features

We have two important elements in this project:

• ngx-vis-network-etsisi

For this element we have created:

• A module.
• A directive that is exposed for our service.

    @Input() etsisiVis: string; 
    @Input() etsisiVisNodes: DataSet<Node>; 
    @Input() etsisiVisEdges: DataSet<Edge>; 
    @Input() etsisiVisOptions: Options; 
    @Output() ready: EventEmitter<string> = new EventEmitter<string>();

• A service that is exposed for our module.

  We have included some new methods:

  • create(container: HTMLElement, id: string, nodes: DataSet, edges: DataSet, options?: Options)

    It creates a graph with the chosen configuration.

  • getNodesCount(id: string): number

    It gets the number of nodes for a graph with a concrete id.

  • getNodes(id: string): DataSet | null

    It gets the nodes for a graph with a concrete id.

  • getEdges(id: string): DataSet | null

    It gets the edges for a graph with a concrete id.

  • isAnExistingGraphNetwork(id: string): boolean

    It returns if a graph with a concrete id exists.

  • addNode(id: string, data: Node | Node[])

    It adds a node in a concrete graph network.

  • updateNode(id: string, data: Node | Node[])

    It updates a node in a graph network.

  • removeNode(id: string, nodeId: number)

    It removes a concrete node in a graph network.

  • addEdge(id: string, data: Edge | Edge[])

    It adds a concrete edge in a graph network.

  • removeEdge(id: string, edgeId: number)

    It removes a concrete edge in a graph network.

  • setBackgroundNode(id: string, nodeId: string | number, backgroundColor: string)

    It updates a background node in a graph network for only one node.

  • resetGraph(id: string)

    It comes back to the initial state for a graph network.

• ngx-vis-network-etsisi-show-case

  For this element we have created a playroom with 3 main sections:

  • Basic

    In this section we have options to:

    • Show/hide labels.
    • Show/hide icons.
    • Show/hide links.
    • Show/hide navigation and interaction buttons.
    • Reset.

  • Dynamic

    In this section we have options to:

    • Add nodes.
    • Add links.
    • Select elements.
    • Delete elements.
    • Reset.

  • Style In this section we have options to:

    • Change nodes color.
    • Change borders color.
    • Change links color.
    • Reset.

Building

We have different building options.

Full building

Just run npm run build

Full building on dev mode

Just run npm run build:dev

Build library

Just run npm run build:lib

Build show case

Just run npm run build:showcase

Build library on dev mode

Just run npm run build:lib:dev

Build show case on dev mode

Just run npm run build:showcase:dev

Show case

You can try our show case here

Linting

• Run npm run lint to check all tslint rules.
• Run npm run lint:fix to fix the related errors with all tslint rules.
• Run npm run style-lint to check all style lint rules.
• Run npm run style-lint:fix to fix the related errors with all stylelint rules.

Running unit tests

Run npm run test

Documentation

Run npm run compodoc to generate the project documentation.

Also, you can check our documentation here

Contributing

Please read contributing.md to contribute to our project.

License

This project is licensed under the Apache 2.0 License - see the LICENSE file for details.