@biki-dev/okve 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +68 -0
- package/package.json +4 -2
package/README.md
ADDED
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
# OKVE
|
|
2
|
+
|
|
3
|
+
OKVE is a small React component library for rendering interactive knowledge graphs from JSON data.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @biki-dev/okve
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { KnowledgeGraph } from '@biki-dev/okve'
|
|
15
|
+
|
|
16
|
+
<KnowledgeGraph
|
|
17
|
+
data={graphData}
|
|
18
|
+
width="100%"
|
|
19
|
+
height={640}
|
|
20
|
+
onNodeClick={(node) => console.log(node)}
|
|
21
|
+
/>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Props
|
|
25
|
+
|
|
26
|
+
| Prop | Type | Description |
|
|
27
|
+
| --- | --- | --- |
|
|
28
|
+
| `data` | `GraphData` | Graph nodes and edges to render. |
|
|
29
|
+
| `width` | `number | string` | Graph width, defaults to `100%`. |
|
|
30
|
+
| `height` | `number | string` | Graph height, defaults to `640`. |
|
|
31
|
+
| `onNodeClick` | `(node: GraphNode) => void` | Called when a node is clicked. |
|
|
32
|
+
| `onEdgeClick` | `(edge: GraphEdge) => void` | Called when an edge is clicked. |
|
|
33
|
+
|
|
34
|
+
## Data Schema
|
|
35
|
+
|
|
36
|
+
```ts
|
|
37
|
+
type GraphNode = {
|
|
38
|
+
id: string
|
|
39
|
+
label: string
|
|
40
|
+
group?: string
|
|
41
|
+
metadata?: Record<string, unknown>
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
type GraphEdge = {
|
|
45
|
+
id: string
|
|
46
|
+
source: string
|
|
47
|
+
target: string
|
|
48
|
+
directed?: boolean
|
|
49
|
+
weight?: number
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
type GraphData = {
|
|
53
|
+
nodes: GraphNode[]
|
|
54
|
+
edges: GraphEdge[]
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Demo
|
|
59
|
+
|
|
60
|
+
See the Vite demo in [demo/src/App.tsx](demo/src/App.tsx) for a complete example with click details.
|
|
61
|
+
|
|
62
|
+
## Contributing
|
|
63
|
+
|
|
64
|
+
Use the workspace demo to verify graph behavior, then run the package build before publishing.
|
|
65
|
+
|
|
66
|
+
## License
|
|
67
|
+
|
|
68
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@biki-dev/okve",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"description": "Open Knowledge Visualization Engine, a reusable React knowledge graph component.",
|
|
@@ -17,7 +17,9 @@
|
|
|
17
17
|
"publishConfig": {
|
|
18
18
|
"access": "public"
|
|
19
19
|
},
|
|
20
|
-
"files": [
|
|
20
|
+
"files": [
|
|
21
|
+
"dist"
|
|
22
|
+
],
|
|
21
23
|
"scripts": {
|
|
22
24
|
"build": "vite build",
|
|
23
25
|
"dev": "vite",
|