3.2.8 • Published 11 months ago
gramex-tree-map v3.2.8
GRAMEX-TREE-MAP
D3 Tree map rendering for reusability purpOse.
Installation
npm install gramex-tree-mapDependencies
npm install d3Options/Config
Following options are available:
| Name | Type | Description |
|---|---|---|
| data | Object {"children":{ value: 300 }} | Data needs to have children property. And each object in the children need to have some value |
| sourceFields | Object { value: "XX"} | The XX value is used as the key in fetching the value from the data |
| margin | Object { top: 10, right: 0, bottom: 0, left: 0 } | Specify margin |
| padding | Object { top: 10, inner: 3, outer: 2, all: 2 } | Specify padding inside the block |
| colorRange | Object [] | Range of colors for the blocks |
| blockNameSize | String | Size for block text blocks |
| valueSize | String | Size for value text blocks |
| textColor | String | Font color of blocks blocks |
| Name | Type | Description |
|---|---|---|
| blockTextCallback | Callback function | Returns string that needs to be shown on the block |
| tooltipConfig | Object | Configuration for tooltip mentioned below |
Tooltip Config options
| Name | Type | Description |
|---|---|---|
| opacity | number | Opacity of tooltip |
| offsetX | number | x Offset |
| offsetY | number | y Offset |
| backgroundColor | string | bg color of tooltip |
| borderRadius | string | border radius |
| padding | string | padding within tooltip |
| color | string | color of text |
| textAlign | string | text alignment |
| fontSize | string | text font size |
| zIndex | number | z-index of tooltip |
| tooltipCallback | Callback function | Returns string that needs to be shown on the tooltip |
Usage/Examples
HTML
<div id="treeMapChart" class="chart-dimension"></div>JS
let data = {
children: [
{
value: 395,
name: 1,
colname: "level3",
},
{
value: 376,
name: 2,
colname: "level3",
},
{
value: 317,
name: 3,
colname: "level3",
},
{
value: 658,
name: 4,
colname: "level3",
},
],
name: "CEO",
};
let config = {
data: data,
sourceFields: {
value: "value",
},
margin: { top: 10, right: 0, bottom: 0, left: 0 },
padding: { top: 10, inner: 3, outer: 2, all: 2 },
colorRange: ["#63CED5", "#02A8B3", "#017BC3", "#1C5B94"],
blockTextCallback: blockText,
tooltipConfig: {
opacity: 1,
offsetX: 20,
offsetY: 0,
backgroundColor: "black",
borderRadius: "5px",
padding: "10px",
color: "white",
textAlign: "center",
fontSize: "12px",
zIndex: 2,
tooltipCallback: sampleTooltip,
},
};
function blockText(d) {
let suffix = " Block ";
return `${d.data.name}${suffix}`;
}
function sampleTooltip(el) {
var prefix = el.data.name;
var text = " Heading";
var value = Math.round(el["data"]["value"]);
var title = "Value";
return { prefix, text, title, value };
}
renderTreeMap("#treeMapChart", config);