alpha version
@pinpoint-fe/server-map
🔎 Overview
- ServerMap component is an open-source network-map library, specifically for application topology.
- With ServerMap component, you will find it easy to understand how your services are interconnected and how the transactions are going on between them.
- Besides, since we provide a various of cool features such as merge and customizing label, feel free to check out them if you are interested in making your topology look nicer.
- For your information, ServerMap component builds the network-map using cytoscape.js which is light, highly optimized and well-maintained so it's all ready to provide a pleasant experience.
⚙️ Installation
npm install @pinpoint-fe/server-map
or
yarn add @pinpoint-fe/server-map
🚀 Quick Start
Create your first ServerMap
import React from 'react';
import { ServerMap } from '@pinpoint-fe/server-map';
export default function MyServerMapPage() {
return (
<ServerMap
data={data}
baseNodeId={'MY-APP'}
/>
);
}
Props
Props | Type | Required | Description |
---|---|---|---|
data | { nodes: Node[], edges: Edge[] } |
✔️ | Data to render |
baseNodeId | string | ✔️ | Central node id in the server-map |
customTheme | ThemeType | Custom style object | |
onClickNode | ClickEventHandler<MergedNode> |
Callback to execute when clicking nodes | |
onClickEdge | ClickEventHandler<MergedEdge> |
Callback to execute when clicking edges | |
onClickBackground | ClickEventHandler<{}> |
Callback to execute when clicking background | |
renderNodeLabel | (node: MergedNode) => string ㅣ undefined |
Custom node label | |
renderEdgeLabel | (node: MergedEdge) => string ㅣ undefined |
Custom edge label |