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