LineUp Library for Visual Analysis of Multi-Attribute Rankings
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.github
demo/app
src
.editorconfig
.gitattributes
.gitignore
LICENSE
README.md
angular.json
karma.conf.js
ng-package.json
ng-package.prod.json
package-lock.json
package.json
tsconfig.json
tsconfig.lib.json
tsconfig.spec.json
tslint.json

README.md

LineUp.js Angular Wrapper

License: MIT NPM version CircleCI

LineUp is an interactive technique designed to create, visualize and explore rankings of items based on a set of heterogeneous attributes. This is a Angular wrapper around the JavaScript library LineUp.js. Details about the LineUp visualization technique can be found at http://lineup.caleydo.org.

Usage

Installation

npm install --save nglineup

Minimal Usage Example

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LineUpModule } from '../lib/lineup.module';

import { AppComponent } from './app.component.1';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    LineUpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  readonly data = <any[]>[];

  readonly cats = ['c1', 'c2', 'c3'];

  constructor() {
    const cats = this.cats;
    for (let i = 0; i < 100; ++i) {
      this.data.push({
        a: Math.random() * 10,
        d: 'Row ' + i,
        cat: cats[Math.floor(Math.random() * 3)],
        cat2: cats[Math.floor(Math.random() * 3)]
      });
    }
  }
}

app.component.html:

<lineup-lineup [data]="data"></lineup-lineup>

CodePen

Minimal Result

Advanced Usage Example

app.component.html:

<lineup-lineup [data]="data" [defaultRanking]="true" style="height: 800px">
  <lineup-string-column-desc column="d" label="Label" [width]="100"></lineup-string-column-desc>
  <lineup-categorical-column-desc column="cat" [categories]="cats" color="green"></lineup-categorical-column-desc>
  <lineup-categorical-column-desc column="cat2" [categories]="cats" color="blue"></lineup-categorical-column-desc>
  <lineup-number-column-desc column="a" [domain]="[0, 10]" color="blue"></lineup-number-column-desc>

  <lineup-ranking groupBy="cat" sortBy="a:desc">
    <lineup-support-column type="*"></lineup-support-column>
    <lineup-column column="*"></lineup-column>
    <lineup-impose-column label="a+cat" column="a" categoricalColumn="cat2"></lineup-impose-column>
  </lineup-ranking>
</lineup-lineup>

CodePen

Advanced Result

Supported Browsers

  • Chrome 64+ (best performance)
  • Firefox 57+
  • Edge 16+

Development Environment

Installation

git clone https://github.com/datavisyn/nglineup.git
cd nglineup
npm install

Build distribution packages

npm run build

Run Linting

npm run lint

Serve integrated webserver

npm start

Authors

  • Samuel Gratzl (@sgratzl)