i2ui

Intuitively Understandable User Interface

React components for emphasizing essential data

Usage

$3

``jsx
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
`jsx
import { Treemap } from 'i2ui';
import data from '../test-data';

...

function renderCell(style, record, index) {
return (


`

| 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

`jsx
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 {record.population}
});
`

| 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

`jsx
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 (


`

| 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 |

$3

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