ServiceMap

src/charts/ServiceMap.tsx

Import

import { ServiceMap } from "@ossrandom/design-system/charts";

Peer dependencies

cytoscape + cytoscape-cose-bilkent (canvas)
@deck.gl/core + @deck.gl/layers + d3-force (webgl)

Example

Service topology

<ServiceMap
  nodes={[
    { id: "api",   label: "API Gateway", status: "healthy" },
    { id: "auth",  label: "Auth",        status: "healthy" },
    { id: "users", label: "Users DB",    status: "degraded" },
  ]}
  edges={[
    { source: "api", target: "auth" },
    { source: "api", target: "users", status: "failing" },
  ]}
  height={420}
/>

API

extends BaseProps

Prop	Type
`nodes` required	`readonly ServiceNode[]`
`edges` required	`readonly ServiceEdge[]`
`height`	`number`
`layout`	`"cose-bilkent" \| "circle" \| "grid" \| "concentric" \| "breadthfirst"`
`engine`	`RenderEngine`
`onNodeClick`	`(node: ServiceNode) => void; readonly onEdgeClick?: (edge: { source: string; target: string }) => void;`

Related types

interface

ServiceNode

Prop	Type
`id` required	`string`
`label` required	`string`
`status`	`"healthy" \| "degraded" \| "failing" \| "unknown"`
`kind`	`string`
`x`	`number`
`y`	`number`

interface

ServiceEdge

Prop	Type
`source` required	`string`
`target` required	`string`
`label`	`string`
`status`	`"healthy" \| "failing"`