Skip to content

Commit 39673e6

Browse files
dekadeka
deka
and
deka
authored
Feature/node group (#28)
* feat: node group * feat: histoire * fix: github actions * feat: css theme * feat: C4 model example * feat: dark mode * feat: fixed node example * doc: vuepress doc site --------- Co-authored-by: deka <[email protected]>
1 parent 597a61f commit 39673e6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+4961
-2147
lines changed

‎.github/workflows/build.yml

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,8 @@ jobs:
2323
- name: Install dependencies
2424
run: npm i
2525

26-
- name: Build
27-
run: npm run build
28-
29-
- name: Build
30-
run: npm run build-playground
26+
- name: Build lib
27+
run: npm run lib:build
3128

3229
- name: Build docs
33-
run: npm run doc
30+
run: npm run docs:build

‎.github/workflows/static.yml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# Simple workflow for deploying static content to GitHub Pages
2-
name: Deploy static content to Pages
2+
name: Deploy doc
33

44
on:
55
# Runs on pushes targeting the default branch
@@ -40,14 +40,14 @@ jobs:
4040
- name: Install dependencies
4141
run: npm i
4242
- name: Build
43-
run: npm run build-playground
43+
run: npm run docs:build
4444
- name: Setup Pages
4545
uses: actions/configure-pages@v3
4646
- name: Upload artifact
4747
uses: actions/upload-pages-artifact@v2
4848
with:
4949
# Upload entire repository
50-
path: './playground-dist/'
50+
path: "./dist-docs/"
5151
- name: Deploy to GitHub Pages
5252
id: deployment
5353
uses: actions/deploy-pages@v2

‎.gitignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,10 @@ pnpm-debug.log*
2525
*.sln
2626
*.sw?
2727

28+
#vuepress
29+
.temp
30+
.cache
31+
32+
dist-docs
33+
2834
playground-dist

‎README.md

Lines changed: 11 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,18 @@
1-
# 🔆 [vue-d3-network-graph](https://la-fabrique.github.io/vue-d3-network-graph/) 🔆
1+
# 🔆 vue-d3-network-graph
22

3-
> inspired by https://github.com/emiliorizzo/vue-d3-network
3+
## 📚 Examples & Documentation
4+
5+
- Examples are available with [hitoire](https://la-fabrique.github.io/vue-d3-network-graph/histoire/)
6+
- See [Documentation](https://la-fabrique.github.io/vue-d3-network-graph/)
47

58
## 💫 Key features
69

7-
- Directed links (svg markers). see [D3LayoutOptions:directed](docs/modules.md#d3layoutoptions) and [D3Link:twoWay](docs/modules.md#d3link)
10+
- Directed links (svg markers). see [D3LayoutOptions:directed](https://la-fabrique.github.io/vue-d3-network-graph/modules.md#d3layoutoptions) and [D3Link:twoWay](https://la-fabrique.github.io/vue-d3-network-graph/modules.md#d3link)
811
- 'Static' mode to use d3-force tick instead of simulation.restart (No rendering of vue components on each tick)
9-
- Composition function : [useSimulation](docs/modules.md#usesimulation) (renderless use of d3 simulation)
12+
- Node groups
13+
- Custom SVG nodes
14+
- CSS theming with dark mode support
15+
- Fixed node position
1016
- Typescript support
11-
- Vue 3.3 features ([c-bind in css](https://vuejs.org/api/sfc-css-features.html#v-bind-in-css), [readonly ref from getter](https://vuejs.org/api/reactivity-utilities.html#toref) )
17+
- Vue 3.3 features ([readonly ref from getter](https://vuejs.org/api/reactivity-utilities.html#toref) )
1218
- VueUse : [useResizeObserver](https://vueuse.org/core/useResizeObserver/), [watchDebounced](https://vueuse.org/shared/watchDebounced/#watchdebounced)
13-
14-
## 📦 Install
15-
16-
```bash
17-
npm install vue-d3-network-graph@beta
18-
```
19-
20-
> Not production ready yet, use at your own risk. Api may change.
21-
22-
## 🛠️ Usage
23-
24-
```html
25-
<template>
26-
<div id="app">
27-
<D3NetworkGraph :nodes="nodes" :links="links" />
28-
</div>
29-
</template>
30-
<script lang="ts">
31-
import { D3NetworkGraph } from "vue-d3-network-graph";
32-
import "vue-d3-network-graph/dist/style.css";
33-
34-
const nodes = ref([
35-
{ id: 1, name: "my awesome node 1", innerSVG: database },
36-
{ id: 2, name: "my node 2", innerSVG: bloc },
37-
{ id: 3, name: "orange node" },
38-
{ id: 4, name: "blue node" },
39-
{ id: 5, name: "G1 - 1", group: 1 },
40-
{ id: 6, name: "G1 - 2", group: 1 },
41-
{ id: 7, name: "G1 - 3", group: 1 },
42-
{ id: 8, name: "G2 - 1", group: 2 },
43-
{ id: 9, name: "G2 - 2", group: 2 },
44-
{ id: 10, name: "G2 - 3", group: 2 },
45-
{ id: 11 },
46-
{ id: 12 },
47-
{ id: 13 },
48-
{ id: 14 },
49-
]);
50-
const links = ref([
51-
{ source: 2, target: 1, name: "Utilise" },
52-
{ source: 4, target: 3, name: "Utilise" },
53-
{ source: 4, target: 2, name: "Utilise" },
54-
{ source: 4, target: 9, name: "Utilise" },
55-
{ source: 5, target: 6, name: "Utilise" },
56-
{ source: 7, target: 8, name: "Utilise" },
57-
{ source: 5, target: 8, name: "Utilise" },
58-
{ source: 3, target: 8, name: "Utilise" },
59-
{ source: 7, target: 9, name: "Utilise" },
60-
{ source: 3, target: 9 },
61-
{ source: 10, target: 6 },
62-
{ source: 11, target: 6 },
63-
{ source: 12, target: 6 },
64-
{ source: 13, target: 6 },
65-
{ source: 14, target: 6 },
66-
]);
67-
</script>
68-
```
69-
70-
# 🖥️ API
71-
72-
See [API documentation](docs/modules.md)
73-
74-
## D3NetworkGraph Component
75-
76-
**props**
77-
78-
| Name | Type | Default | Description |
79-
| -------- | --------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
80-
| nodes | Array<[D3Node](docs/modules.md#d3node)> | [] | Array of nodes |
81-
| links | Array<[D3Link](docs/modules.md#d3link)> | [] | Array of links |
82-
| options? | [D3Options](docs/modules.md#d3options) | undefined | [Links](docs/modules.md#d3linkoptions), [nodes](docs/modules.md#d3nodeoptions) and [simulation](docs/modules.md#d3simulationoptions) Options |
83-
84-
**events**
85-
86-
| Name | Type | Description |
87-
| ------------ | ---------------------------------------------- | --------------------------------------------------- |
88-
| 'node-click' | [function](docs/modules.md#d3neworkgraphemits) | Callback function called when a node is clicked |
89-
| 'link-click' | [function](docs/modules.md#d3neworkgraphemits) | Callback function called when a node is mouseovered |
90-
91-
# 🪴What next ?
92-
93-
- [x] Zoom-Pan
94-
- [ ] Enforce better option API
95-
- [ ] Enforce better css API
96-
- [ ] Children nodes group
97-
- [ ] Mobile support
98-
- [ ] Selection
99-
- [ ] Custom forces
100-
- [ ] Remove third party dependencies
101-
102-
> Issues and PR are welcome !
103-
104-
# 👨‍🚀 Contributors
105-
106-
<ul style="list-style: none; display: flex; flex-wrap: wrap;">
107-
<li style="margin-bottom:8px; margin-right:8px">
108-
<a href="https://github.com/deka" class="" data-hovercard-type="user" data-hovercard-url="/users/deka/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self">
109-
<img src="https://avatars.githubusercontent.com/u/349156?s=64&amp;v=4" alt="@deka" size="32" height="32" width="32" data-view-component="true" class="avatar circle">
110-
</a>
111-
</li>
112-
<li style="margin-bottom:8px; margin-right:8px">
113-
<a href="https://github.com/dependabot" class="">
114-
<img src="https://avatars.githubusercontent.com/u/27347476?s=64&amp;v=4" alt="@dependabot" size="32" height="32" width="32" data-view-component="true" class="avatar">
115-
</a>
116-
</li>
117-
<li style="margin-bottom:8px; margin-right:8px">
118-
<a href="https://github.com/zomkd" class="" data-hovercard-type="user" data-hovercard-url="/users/zomkd/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self">
119-
<img src="https://avatars.githubusercontent.com/u/92479660?s=64&amp;v=4" alt="@zomkd" size="32" height="32" width="32" data-view-component="true" class="avatar circle">
120-
</a>
121-
</li>
122-
</ul>
123-
<div style="margin-top: 8px; color: rgb(125, 133, 144)" >
124-
deka, dependabot, and zomkd
125-
</div>

‎docs/.histoire/assets/favicon.png

2.49 KB
Loading

‎docs/.histoire/c4.container.story.vue

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
<template>
2+
<Story title="C4. Container" auto-props-disabled>
3+
<span class="title-grey">[Container] Internet Banking System</span>
4+
<D3NetworkGraph
5+
:options="options"
6+
:nodes="nodes"
7+
:links="links"
8+
class="c4-container"
9+
/>
10+
</Story>
11+
</template>
12+
<script setup lang="ts">
13+
import type { D3Link, D3Node, D3Options } from "@/types";
14+
import { reactive } from "vue";
15+
import { isDark } from "histoire/client";
16+
17+
const svgApp = {
18+
innerHtml: `<path d="M21 2H3C1.9 2 1 2.9 1 4V20C1 21.1 1.9 22 3 22H21C22.1 22 23 21.1 23 20V4C23 2.9 22.1 2 21 2M21 7H3V4H21V7Z" />`,
19+
viewBox: "0 0 24 24",
20+
};
21+
const svgPersonne = {
22+
innerHtml: `<path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />`,
23+
viewBox: "0 0 24 24",
24+
};
25+
26+
const svgContainer = {
27+
innerHtml: `<path d="M4,6V19H20V6H4Z" />`,
28+
viewBox: "0 0 24 24",
29+
};
30+
31+
const nodes: D3Node[] = [
32+
{
33+
id: 1,
34+
labels: ["Personal Banking", "Customer"],
35+
class: ["blue"],
36+
innerSVG: svgPersonne,
37+
position: { x: 320 },
38+
},
39+
{
40+
id: 2,
41+
labels: ["Web application"],
42+
class: ["blue"],
43+
innerSVG: svgContainer,
44+
position: { y: 320 },
45+
},
46+
{
47+
id: 3,
48+
labels: ["Single Page Application"],
49+
class: ["blue"],
50+
innerSVG: svgContainer,
51+
},
52+
{
53+
id: 4,
54+
labels: ["Mobile Application"],
55+
class: ["blue"],
56+
innerSVG: svgContainer,
57+
position: { y: 300 },
58+
},
59+
{
60+
id: 5,
61+
name: "Email System",
62+
class: ["grey"],
63+
innerSVG: svgApp,
64+
position: { x: 550 },
65+
},
66+
{
67+
id: 6,
68+
name: "Mainframe Banking System",
69+
class: ["grey"],
70+
innerSVG: svgApp,
71+
position: { y: 550 },
72+
},
73+
{
74+
id: 7,
75+
labels: ["API Application"],
76+
class: ["blue"],
77+
innerSVG: svgContainer,
78+
position: { y: 600, x: 320 },
79+
},
80+
];
81+
const links: D3Link[] = [
82+
{
83+
source: 1,
84+
target: 2,
85+
labels: ["Visite bigbank.com/lib", "using"],
86+
},
87+
{
88+
source: 1,
89+
target: 3,
90+
labels: ["Views account balances,", "and make payments using"],
91+
},
92+
{
93+
source: 1,
94+
target: 4,
95+
labels: ["Views account balances,", "and make payments using"],
96+
},
97+
{
98+
source: 2,
99+
target: 3,
100+
labels: ["Delivers to the customer's web browser"],
101+
},
102+
{
103+
source: 5,
104+
target: 1,
105+
labels: ["Send e-mail to"],
106+
},
107+
{
108+
source: 3,
109+
target: 7,
110+
labels: ["Make API calls to"],
111+
},
112+
{
113+
source: 4,
114+
target: 7,
115+
labels: ["Make API calls to"],
116+
},
117+
{ source: 7, target: 5, labels: ["Send e-mail", "using"] },
118+
{
119+
source: 7,
120+
target: 6,
121+
labels: ["Make API calls to"],
122+
},
123+
];
124+
125+
const options = reactive<D3Options>({
126+
nodes: {
127+
size: 45,
128+
},
129+
layout: {
130+
draggable: true,
131+
directed: true,
132+
theme: "grey",
133+
dark: isDark(),
134+
},
135+
simulation: {
136+
force: {
137+
collide: 110,
138+
charge: 0,
139+
x: 0.1,
140+
y: 0.1,
141+
},
142+
},
143+
});
144+
</script>
145+
<style lang="scss">
146+
.c4-container {
147+
.node.blue {
148+
stroke: transparent;
149+
fill: #0d47a1;
150+
&:hover {
151+
stroke: transparent;
152+
fill: #1565c0;
153+
}
154+
}
155+
.node.grey {
156+
stroke: transparent;
157+
fill: #bdbdbd;
158+
&:hover {
159+
stroke: transparent;
160+
fill: #e0e0e0;
161+
}
162+
}
163+
.link {
164+
stroke-dasharray: 10 10;
165+
}
166+
}
167+
</style>

0 commit comments

Comments
 (0)