2.2.0 • Published 3 months ago

i2ui v2.2.0

Weekly downloads
2
License
MIT
Repository
github
Last release
3 months ago

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" />
NameRequiredTypeDescription
dataValueKeytruestringValue property name (from the item of data)
datatrueanyList of data items
rendertrue(style: CSSProperties, record: any, index: number, options: any) => ReactNodeCell renderer
maxCellsfalsenumberMax cells to display
minCellValuefalseanyMix value to display
sizefalsenumberSize of treemap scale. The smaller the simplest treemap is. Default - 30
modefalseemphasize, noneWhen node, cards is shown as equal cards. Default - emphasize
classNamefalsestringContainer'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>
});
NameRequiredTypeDescription
value, childrentruenumber, stringValue
fromStyletrueCSSPropertiesPart of number's style with lower significance
toStyletrueCSSPropertiesPart of number's style with highest significance
basicMaxValuefalsenumber, stringMax value to emphasize. Used in set of numbers to be basic. Actually, this is the max number from the set.
verticalAlignfalsetop,center,bottomVertical align. Default - bottom
decimalDigitsfalsenumberNumber of decimal digits. Default is 0
groupDigitsfalsenumberNumber of group digits. Default is 3
groupSeparatorfalsestringSeparates groups of digits. Default - ,
decimalSeparatorfalsestringSeparates decimal part. Default - .
classNamefalsestringContainer's class name
stylefalseCSSPropertiesContainer's style
prefixfalsestringText at the beginning
endingfalsestringText 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" />
NameRequiredTypeDescription
dataValueKeytruestringValue property name (from the item of data)
datatrueanyList of data items
rendertrue(style: CSSProperties, record: any, index: number, options: any) => ReactNodeTag renderer
fromStyletrueCSSPropertiesTag style with lower significance
toStyletrueCSSPropertiesTag style with highest significance
orderfalsenone, desc, middle, asc, edgeTag's order. Default - none
classNamefalsestringContainer's class name
stylefalseCSSPropertiesContainer'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,
  },
];
2.2.0

3 months ago

2.0.3

1 year ago

2.0.2

1 year ago

2.0.5

1 year ago

2.0.4

1 year ago

2.0.6

1 year ago

2.0.1

1 year ago

2.0.0

1 year ago

2.1.2

1 year ago

2.1.1

1 year ago

2.1.0

1 year ago

2.0.0-alfa.15

1 year ago

2.0.0-alfa.14

1 year ago

2.0.0-alfa.13

1 year ago

2.0.0-alfa.12

1 year ago

1.4.3

1 year ago

1.4.2

1 year ago

1.4.1

1 year ago

2.0.0-alfa.9

1 year ago

2.0.0-alfa.4

1 year ago

2.0.0-alfa.3

1 year ago

2.0.0-alfa.2

1 year ago

2.0.0-alfa.1

1 year ago

2.0.0-alfa.8

1 year ago

2.0.0-alfa.6

1 year ago

2.0.0-alfa.5

1 year ago

1.5.0

1 year ago

2.0.0-alfa.11

1 year ago

2.0.0-alfa.10

1 year ago

1.4.0

2 years ago

1.3.4

4 years ago

1.3.3

4 years ago

1.3.2

4 years ago

1.3.1

4 years ago

1.3.0

4 years ago

1.2.4

4 years ago

1.2.2

4 years ago

1.2.0

4 years ago

1.1.3

4 years ago

1.2.1

4 years ago

1.1.2

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.18

4 years ago

1.0.17

4 years ago

1.0.16

4 years ago

1.0.15

4 years ago

1.0.14

4 years ago

1.0.13

4 years ago

1.0.12

4 years ago

1.0.11

4 years ago

1.0.10

4 years ago

1.0.9

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago

0.1.4

4 years ago

0.1.5

4 years ago

0.1.3

4 years ago

0.1.2

4 years ago

0.1.1

4 years ago

0.1.0

4 years ago

0.0.4

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago