Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
The Apextree is a javascript library built on SVG that helps to create organizational or hierarchical charts.
The Apextree is a javascript library built on SVG that helps to create organizational or hierarchical charts.
To add the Apextree to your project and its dependencies, install the package from npm.
npm install apextree
import ApexTree from 'apextree'
To create a basic tree with minimal configuration, write as follows:
<div id="svg-tree"></div>
const data = {
...(nested data with format provided below)
}
const options = {
width: 700,
height: 700,
nodeWidth: 120,
nodeHeight: 80,
childrenSpacing: 100,
siblingSpacing: 30,
direction: 'top',
canvasStyle: 'border: 1px solid black;background: #f6f6f6;',
};
const tree = new ApexTree(document.getElementById('svg-tree'), options);
const graph = tree.render(data);
The layout can be configured by either setting the properties in the table below by passing a second arg to Apextree with these properties set. The latter takes precedence.
Options | Default | Description |
---|---|---|
width | 400 | The width of graph container |
height | 400 | The height of graph container |
direction | top | The direction of the tree to start rendering. Possible values: top , bottom , left and right |
contentKey | name | The key of content in passed data object |
siblingSpacing | 50 | The spacing between sibling nodes |
childrenSpacing | 50 | The spacing between children and parent |
highlightOnHover | true | Enable/disable highlight on hover |
containerClassName | root | The class name for the root container |
canvasStyle | None | The css styles for canvas root container |
enableToolbar | false | Enable/disable graph toolbar |
nodeWidth | 50 | The width of graph nodes |
nodeHeight | 30 | The height of graph nodes |
nodeTemplate | defaultNodeTemplate | The HTML template for nodes |
nodeBGColor | #FFFFFF | The background color of nodes |
nodeBGColorHover | #FFFFFF | The background color on hover of nodes |
borderWidth | 1 | The border width of the nodes in pixels |
borderStyle | solid | The border style of the nodes |
borderRadius | 5px | The border radius of the nodes in pixels |
borderColor | #BCBCBC | The border color of the nodes |
borderColorHover | #5C6BC0 | The border color on hover of the nodes |
edgeWidth | 1 | The width for the edges |
edgeColor | #BCBCBC | The color for the edges |
edgeColorHover | #BCBCBC | The color for the edges when highlighted |
enableTooltip | false | Enable tooltip on hover of nodes |
tooltipId | apextree-tooltip-container | The tooltip HTML element id |
tooltipTemplate | defaultNodeTemplate | The HTML template for tooltip |
tooltipMaxWidth | 100 | The max width of the tooltip |
tooltipBorderColor | #BCBCBC | The border color of tooltip |
tooltipBGColor | #FFFFFF | The background color of tooltip |
fontSize | 14px | The size of font of nodes |
fontFamily | None | The font family of nodes |
fontWeight | 400 | The font weight of nodes |
fontColor | #000000 | The font color of nodes |
Default node template
const defaultNodeTemplate = (content: string) => {
return `<div style='display: flex;justify-content: center;align-items: center; text-align: center; height: 100%;'>${content}</div>`;
};
{
"id": "1",
"name": "A",
"children": []
}
Passed data object should contain id, name and children.
For id key, value of id can be unique otherwise edge highlight won't work as expected.
For name key, if using other than name then specify key name in contentKey option
For children key, it contains list of child objects
Example
const data = {
"id": "1",
"name": "A",
"children": [
{
"id": "2",
"name": "B",
"children": [
{
"id": "3",
"name": "C"
},
{
"id": "4",
"name": "D"
}
]
}
]
}
FAQs
The Apextree is a javascript library built on SVG that helps to create organizational or hierarchical charts.
The npm package apextree receives a total of 641 weekly downloads. As such, apextree popularity was classified as not popular.
We found that apextree demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.