Components Quick Start

The LineUp-lite components are a set of basic React visualization components and methods for computing statistics.

LineUp-lite supports multiple different attribute types:

• text
• categorical
• number
• date
• set
• number array

Install LineUp-lite Components

npm install @lineup-lite/components

or

yarn add @lineup-lite/components

Example

Live Editor

// import { TextLabel, NumberBar, CategoricalColor, DateLabel } from '@lineup-lite/components'; function Example() { const row = { name: 'Panchito Green', age: 10, shirtSize: 'S', birthday: new Date(2011, 1, 1), hobbies: ['running', 'cooking'], runningTimes: [10, 20, 40, 30, 15], }; return ( <div style={{ maxWidth: 200 }}> <TextLabel value={row.name} /> <NumberBar value={row.age} scale={normalize(0, 50)} /> <CategoricalColor value={row.shirtSize} color="red" /> <DateLabel value={row.birthday} /> <UpSetLine value={row.hobbies} sets={['running', 'reading', 'cooking']} /> <HeatMap1D value={row.runningTimes} scale={normalize(10, 50)} /> </div> ); }

// import { TextLabel, NumberBar, CategoricalColor, DateLabel } from '@lineup-lite/components';

function Example() {
  const row = {
    name: 'Panchito Green',
    age: 10,
    shirtSize: 'S',
    birthday: new Date(2011, 1, 1),
    hobbies: ['running', 'cooking'],
    runningTimes: [10, 20, 40, 30, 15],
  };

  return (
    <div style={{ maxWidth: 200 }}>
      <TextLabel value={row.name} />
      <NumberBar value={row.age} scale={normalize(0, 50)} />
      <CategoricalColor value={row.shirtSize} color="red" />
      <DateLabel value={row.birthday} />
      <UpSetLine value={row.hobbies} sets={['running', 'reading', 'cooking']} />
      <HeatMap1D value={row.runningTimes} scale={normalize(10, 50)} />
    </div>
  );
}

Result

Panchito Green

10

S

2/1/2011, 12:00:00 AM

10

20

40

30

15