Overview

The @lineup-lite/components package is a collection of basic React visualization components and methods for computing statistics.

LineUp-lite supports thes different attribute types:

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

Example

Live Editor

// import { TextLabel, NumberBar, DivergingNumberBar, CategoricalColor, DateLabel } from '@lineup-lite/components'; function Example() { const row = { name: 'Panchito Green', age: 10, x: 0.5, 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)} /> <DivergingNumberBar value={row.x} scale={normalize(-1, 1)} /> <CategoricalColor value={row.shirtSize} color="red" /> <DateLabel value={row.birthday} /> <UpSetLine value={row.hobbies} sets={['running', 'reading', 'cooking']} /> <HeatMap1D value={row.runningTimes} scale={normalize(0, 50)} /> </div> ); }

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

function Example() {
  const row = {
    name: 'Panchito Green',
    age: 10,
    x: 0.5,
    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)} />
      <DivergingNumberBar value={row.x} scale={normalize(-1, 1)} />
      <CategoricalColor value={row.shirtSize} color="red" />
      <DateLabel value={row.birthday} />
      <UpSetLine value={row.hobbies} sets={['running', 'reading', 'cooking']} />
      <HeatMap1D value={row.runningTimes} scale={normalize(0, 50)} />
    </div>
  );
}

Result

Panchito Green

10

0.5

S

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

10

20

40

30

15