1.0.3 • Published 5 years ago
creative-infographics v1.0.3
⏬ Installation
Creative-Infographics is available as an npm package.
// with npm
npm install creative-infographics
Usage
For each infographic component there is fixed data schema and reaquired props, see the followed documentation below.
Infographics
1) FlowerGraph
- Import FlowerGraph
import { FlowerGraph } from "creative-infographics";
Data schema for FlowerGraph
- following data schema is required to render this infographic.
data /* array_of_objects */ = [
{
/* key_for_label */ : /* label */,
/* key_for_type */ : /* array of distinguished values of string|number */ [ "type_a", "type_b", ...]
...
},
...
]
- component schema
<FlowerGraph data={/* data */} label={/* key name of label */} term={/* key name of type */} />
Props
Using following props, Info-graphic can be customize as per required.
props | type | Default values | Description |
---|---|---|---|
data | array of objects | *required | This prop requires data as per shown in data schema |
label | string | *required | This is key name of text label inside objects |
term | string | *required | This is key name of array of types inside objects |
leafs | integer | 5 | Number of flower leafs |
leafR | integer | 55 | leafs Radius |
leafDeg | integer | 270 | Round cut off of leafs circle in degree |
flowerR | integer | 195 | Flower root Radius |
flowerDeg | integer | 360 | Round cut off of Flower circle in degree |
flowerRotation | integer | 0 | Rotation of Flower |
fontSize | integer | 6 | text size |
fadingOpacity | float | 0.02 | Opacity of other elements on mouse hover range : 0.0 to 1 |
luminosity | string ("bright" | "dark") | "bright" | "bright" : for white text and bright colors, "dark": for black text and dark colors |
tint | bool | string(colors_only) | false | false : random colors, "color_names" : gives shades of colors (red, blue, ..) |
License
This project is licensed under the terms of the ISC license.