alpha version

@pinpoint-fe/server-map

• documentation
• demo

🔎 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 |