Security News
OpenJS: “XZ Utils Cyberattack Likely Not an Isolated Incident”
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
Weekly downloads
Readme
Intuitively Understandable User Interface
React components for emphasizing essential data
npm install i2ui
Cards representation on treemap view. The size or square of each card is based on it's value.
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 |
Visual representation of a number split on groups and fraction. The higher group emphasizes more with CSS styles.
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 |
Visual representation of text data, which is often used to visualize free form text
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 |
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,
},
];
FAQs
i2ui - Intuitively Understandable User Interface
The npm package i2ui receives a total of 6 weekly downloads. As such, i2ui popularity was classified as not popular.
We found that i2ui demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
Company News
Come meet the Socket team at BSidesSF and RSA! We're sponsoring several fun networking events and we would love to see you there.
Security News
OSI is starting a conversation aimed at removing the excuse of the SaaS loophole for companies navigating licensing and the complexities of doing business with open source.