lineupjs / vue-lineup

LineUp Library for Visual Analysis of Multi-Attribute Rankings

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

Minimal Usage Example

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

// enable plugin to register components
Vue.use(VueLineUp);

const app = new Vue({
  el: '#app',
  template: `<LineUp v-bind:data="data" />`,
  data: {
    cats,
    data
  }
});

CodePen

Advanced Usage Example

App.vue:

const app = new Vue({
  el: '#app',
  template: `<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>`,
  data: {
    cats,
    data
  }
});

CodePen

Supported Browsers

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

Development Environment

Installation

git clone https://github.com/lineupjs/vue-lineup.git
cd vue-lineup
npm install
# install peer dependency
npm install --no-save vue

Build distribution packages

npm run build

Run Linting

npm run lint

Serve integrated webserver

npm start

Authors

• Samuel Gratzl (@sgratzl)

vue-lineup's Issues

vue cli compatible

• Release number or git hash:
• Web browser version and OS:

Steps to reproduce

1. vue cli build

Observed behavior

normal render

Expected behavior

• LineUpNumberColumnDesc cant work
  but when i use
  "dev-build": "vue-cli-service build --mode development",
  this case ， LineUpNumberColumnDesc can work

Uncaught TypeError: Object prototype may only be an Object or null: undefined

when i use the file in dist folder , get the error ,

import * as VueLineUp from './vue-lineup.umd.js'

vue-lineup.umd.js:982 Uncaught TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at extendStatics (vue-lineup.umd.js:982)
    at __extends (vue-lineup.umd.js:986)
    at vue-lineup.umd.js:1325
    at Module.fae3 (vue-lineup.umd.js:1599)
    at __webpack_require__ (vue-lineup.umd.js:30)
    at vue-lineup.umd.js:94
    at vue-lineup.umd.js:97
    at webpackUniversalModuleDefinition (vue-lineup.umd.js:9)
    at `vue-lineup.umd.js:10`

is there anybody know why ? thx

:data prop not reactive

• Release number or git hash: vue-lineup: 1.0.7
• Web browser version and OS: Chrome 73.0.3683.103 64bit on macOS

Steps to reproduce

1. render <LineUp :data="data" />
2. change data, LineUp does not reactive update new data

The use case could be the data is fetched from backend, or changes based on user settings, so the data would change.

Observed behavior

• No errors or warnings, just nothing happens when data changes.

Expected behavior

• LineUp chart reactively re-renders with the new data.

I see that in LineUp.vue, in the updated() hook, it only detects if things in IBuilderAdapterProps has changed, but not data.

Maybe could add a vue watch: data to detect and act on data changes?