i2ui

Intuitively Understandable User Interface

React components for emphasizing essential data

Usage

Installation:

npm install i2ui

Glossary

• Treemap
• I2Number
• TagCloud
• Test Data

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,
  },
];