https://github.com/lineupjs/lineupjsx
LineUp Library for Visual Analysis of Multi-Attribute Rankings
https://github.com/lineupjs/lineupjsx
javascript lineup ranking react react-component table typescript visual-analysis visual-analytics visualisation visualization
Last synced: about 2 months ago
JSON representation
LineUp Library for Visual Analysis of Multi-Attribute Rankings
- Host: GitHub
- URL: https://github.com/lineupjs/lineupjsx
- Owner: lineupjs
- License: mit
- Created: 2018-02-05T16:27:23.000Z (about 8 years ago)
- Default Branch: main
- Last Pushed: 2023-04-10T22:02:30.000Z (about 3 years ago)
- Last Synced: 2025-09-22T17:02:06.059Z (7 months ago)
- Topics: javascript, lineup, ranking, react, react-component, table, typescript, visual-analysis, visual-analytics, visualisation, visualization
- Language: TypeScript
- Homepage: https://lineup.js.org
- Size: 2.36 MB
- Stars: 9
- Watchers: 3
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# LineUp.js React Wrapper (LineUp.jsx)
[![License: MIT][mit-image]][mit-url] [![NPM version][npm-image]][npm-url] [![Github Actions][github-actions-image]][github-actions-url]
LineUp is an interactive technique designed to create, visualize and explore rankings of items based on a set of heterogeneous attributes.
This is a [React](https://reactjs.org/) wrapper around the JavaScript library [LineUp.js](https://github.com/lineupjs/lineupjs). Details about the LineUp visualization technique can be found at [http://lineup.caleydo.org](http://lineup.caleydo.org).
## Usage
**Installation**
```bash
npm install lineupjsx
```
```html
```
**Minimal Usage Example**
```javascript
// generate some data
const arr = [];
const cats = ['c1', 'c2', 'c3'];
for (let i = 0; i < 100; ++i) {
arr.push({
a: Math.random() * 10,
d: 'Row ' + i,
cat: cats[Math.floor(Math.random() * 3)],
cat2: cats[Math.floor(Math.random() * 3)],
});
}
```
```jsx
```
[CodePen](https://codepen.io/sgratzl/pen/mXEpMP)
**Advanced Usage Example**
```jsx
// arr from before
```
[CodePen](https://codepen.io/sgratzl/pen/yvJpWQ)
## Supported Browsers
- Chrome 64+ (best performance)
- Firefox 57+
- Edge 16+
## Development Environment
**Installation**
```bash
git clone https://github.com/lineupjs/lineupjsx.git
cd lineupjsx
npm i -g yarn
yarn set version berry
yarn set version latest
cat .yarnrc_patch.yml >> .yarnrc.yml
yarn install
yarn pnpify --sdk vscode
```
### Common commands
```sh
yarn start
yarn clean
yarn compile
yarn test
yarn lint
yarn fix
yarn build
yarn docs
yarn release
yarn release:pre
```
## Authors
- Samuel Gratzl (@sgratzl)
[npm-image]: https://badge.fury.io/js/lineupjsx.svg
[npm-url]: https://npmjs.org/package/lineupjsx
[mit-image]: https://img.shields.io/badge/License-MIT-yellow.svg
[mit-url]: https://opensource.org/licenses/MIT
[github-actions-image]: https://github.com/lineupjs/lineupjsx/workflows/ci/badge.svg
[github-actions-url]: https://github.com/lineupjs/lineupjsx/actions