LineUp.js Vue.js Wrapper

LineUp is an interactive technique designed to create, visualize and explore rankings of items based on a set of heterogeneous attributes. This is a Vue.js 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 vue-lineup@next

Minimal Usage Example

App.vue:

<template>
  <LineUp v-bind:data="data" />
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { LINEUP_COMPONENTS } from './components';

@Component({
  components: LINEUP_COMPONENTS,
})
export default class App extends Vue {
  public readonly data = [] as any[];
  public readonly cats = ['c1', 'c2', 'c3'];

  constructor() {
    super();
    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)],
      });
    }
  }
}
</script>

CodePen

Advanced Usage Example

App.vue:

<template>
  <!--<LineUp v-bind:data="data" />-->
  <LineUp v-bind:data="data" defaultRanking="true" style="height: 800px">
    <LineUpStringColumnDesc column="d" label="Label" v-bind:width="100" />
    <LineUpCategoricalColumnDesc column="cat" v-bind:categories="cats" color="green" />
    <LineUpCategoricalColumnDesc column="cat2" v-bind:categories="cats" color="blue" />
    <LineUpNumberColumnDesc column="a" v-bind:domain="[0, 10]" color="blue" />
    <LineUpRanking groupBy="cat" sortBy="a:desc">
      <LineUpSupportColumn type="*" />
      <LineUpColumn column="*" />
    </LineUpRanking>
  </LineUp>
</template>

CodePen

Supported Browsers

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

Development Environment

Installation

git clone https://github.com/datavisyn/vue-lineup.git
cd vue-lineup
npm install

Build distribution packages

npm run build

Run Linting

npm run lint

Serve integrated webserver

npm start

Authors

• Samuel Gratzl (@sgratzl)