Skip to content

berezh/i2ui

Repository files navigation

i2ui

Intuitively Understandable User Interface

React components for emphasizing essential data

Usage

Installation:

npm install i2ui

Glossary


Treemap

Cards representation on treemap view. The size or square of each card is based on it's value.

Demo 1 | Demo 2

Test data is here

import { Treemap } from 'i2ui';
import data from '../test-data';

...

function renderCell(style, record, index) {
    return (<div key={index} style={style}>
        {record.name}
    </div>);
}

...

<Treemap data={data} render={renderCell} dataValueKey="area" />
Name Required Type Description
dataValueKey true string Value property name (from the item of data)
data true any List of data items
render true (style: CSSProperties, record: any, index: number, options: any) => ReactNode Cell renderer
maxCells false number Max cells to display
minCellValue false any Mix value to display
size false number Size of treemap scale. The smaller the simplest treemap is. Default - 30
mode false emphasize, none When node, cards is shown as equal cards. Default - emphasize
className false string Container's class name

I2Number

Visual representation of a number split on groups and fraction. The higher group emphasizes more with CSS styles.

Demo 1 | Demo 2

Test data is here

import { I2Number } from 'i2ui';
import data from '../test-data';

...

const fromStyle = { fontSize: 16, opacity: 0.6 };
const toStyle = { fontSize: 36, opacity: 1 };
const basicMaxValue = Math.max(...data.map(x => x.population));

...

data.map((record, index)=> {
    return <I2Number key={index} fromStyle={fromStyle} toStyle={toStyle} basicMaxValue={basicMaxValue}>{record.population}</I2Number>
});
Name Required Type Description
value, children true number, string Value
fromStyle true CSSProperties Part of number's style with lower significance
toStyle true CSSProperties Part of number's style with highest significance
basicMaxValue false number, string Max value to emphasize. Used in set of numbers to be basic.
Actually, this is the max number from the set.
verticalAlign false top,center,bottom Vertical align. Default - bottom
decimalDigits false number Number of decimal digits. Default is 0
groupDigits false number Number of group digits. Default is 3
groupSeparator false string Separates groups of digits. Default - ,
decimalSeparator false string Separates decimal part. Default - .
className false string Container's class name
style false CSSProperties Container's style
prefix false string Text at the beginning
ending false string Text ant the end

TagCloud

Visual representation of text data, which is often used to visualize free form text

Demo 1 | Demo 2

Test data is here

import { TagCloud } from 'i2ui';
import data from '../test-data';

...

const fromStyle = { fontSize: 16, opacity: 0.6 };
const toStyle = { fontSize: 36, opacity: 1 };

function renderTag(style, record, index) {
    return (<div key={index} style={style}>
        {record.name}
    </div>);
}

...

<TagCloud fromStyle={fromStyle} toStyle={toStyle} data={data} render={renderTag} dataValueKey="gdpCapital" />
Name Required Type Description
dataValueKey true string Value property name (from the item of data)
data true any List of data items
render true (style: CSSProperties, record: any, index: number, options: any) => ReactNode Tag renderer
fromStyle true CSSProperties Tag style with lower significance
toStyle true CSSProperties Tag style with highest significance
order false none, desc, middle, asc, edge Tag's order. Default - none
className false string Container's class name
style false CSSProperties Container's style

Test Data

export default [
  {
    name: "Germany",
    code: "de",
    population: 82437641,
    area: 357386,
    gdpTotal: 3874437,
    gdpCapital: 53567,
  },
  {
    name: "France",
    code: "fr",
    population: 67024633,
    area: 632833,
    gdpTotal: 2833687,
    gdpCapital: 47223,
  },
  {
    name: "Italy",
    code: "it",
    population: 61219113,
    area: 301338,
    gdpTotal: 2147744,
    gdpCapital: 40470,
  },
  {
    name: "Netherlands",
    code: "nl",
    population: 17220721,
    area: 41543,
    gdpTotal: 880716,
    gdpCapital: 58341,
  },
  {
    name: "Belgium",
    code: "be",
    population: 11365834,
    area: 30528,
    gdpTotal: 534230,
    gdpCapital: 49529,
  },
  {
    name: "Greece",
    code: "gr",
    population: 10757293,
    area: 131990,
    gdpTotal: 237970,
    gdpCapital: 30252,
  },
  {
    name: "Portugal",
    code: "pt",
    population: 10291027,
    area: 92212,
    gdpTotal: 340715,
    gdpCapital: 33665,
  },
  {
    name: "Denmark",
    code: "dk",
    population: 5743947,
    area: 43075,
    gdpTotal: 342362,
    gdpCapital: 53882,
  },
  {
    name: "Lithuania",
    code: "lt",
    population: 2847904,
    area: 65200,
    gdpTotal: 48288,
    gdpCapital: 36701,
  },
  {
    name: "Luxembourg",
    code: "lu",
    population: 589370,
    area: 2586,
    gdpTotal: 65683,
    gdpCapital: 108951,
  },
  {
    name: "Malta",
    code: "mt",
    population: 440433,
    area: 316,
    gdpTotal: 10514,
    gdpCapital: 47405,
  },
];

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published