1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
| import { QuartzComponentConstructor } from "./types"
| // @ts-ignore
| import script from "./scripts/graph.inline"
| import style from "./styles/graph.scss"
|
| export interface D3Config {
| drag: boolean
| zoom: boolean
| depth: number
| scale: number
| repelForce: number
| centerForce: number
| linkDistance: number
| fontSize: number
| opacityScale: number
| }
|
| interface GraphOptions {
| localGraph: Partial<D3Config> | undefined
| globalGraph: Partial<D3Config> | undefined
| }
|
| const defaultOptions: GraphOptions = {
| localGraph: {
| drag: true,
| zoom: true,
| depth: 1,
| scale: 1.1,
| repelForce: 0.5,
| centerForce: 0.3,
| linkDistance: 30,
| fontSize: 0.6,
| opacityScale: 1,
| },
| globalGraph: {
| drag: true,
| zoom: true,
| depth: -1,
| scale: 0.9,
| repelForce: 0.5,
| centerForce: 0.3,
| linkDistance: 30,
| fontSize: 0.6,
| opacityScale: 1,
| },
| }
|
| export default ((opts?: GraphOptions) => {
| function Graph() {
| const localGraph = { ...defaultOptions.localGraph, ...opts?.localGraph, }
| const globalGraph = { ...defaultOptions.globalGraph, ...opts?.globalGraph, }
| return (
| <div class="graph">
| <h3>Graph View</h3>
| <div class="graph-outer">
| <div id="graph-container" data-cfg={JSON.stringify(localGraph)}></div>
| <svg
| version="1.1"
| id="global-graph-icon"
| xmlns="http://www.w3.org/2000/svg"
| xmlnsXlink="http://www.w3.org/1999/xlink"
| x="0px"
| y="0px"
| viewBox="0 0 55 55"
| fill="currentColor"
| xmlSpace="preserve"
| >
| <path
| d="M49,0c-3.309,0-6,2.691-6,6c0,1.035,0.263,2.009,0.726,2.86l-9.829,9.829C32.542,17.634,30.846,17,29,17
| s-3.542,0.634-4.898,1.688l-7.669-7.669C16.785,10.424,17,9.74,17,9c0-2.206-1.794-4-4-4S9,6.794,9,9s1.794,4,4,4
| c0.74,0,1.424-0.215,2.019-0.567l7.669,7.669C21.634,21.458,21,23.154,21,25s0.634,3.542,1.688,4.897L10.024,42.562
| C8.958,41.595,7.549,41,6,41c-3.309,0-6,2.691-6,6s2.691,6,6,6s6-2.691,6-6c0-1.035-0.263-2.009-0.726-2.86l12.829-12.829
| c1.106,0.86,2.44,1.436,3.898,1.619v10.16c-2.833,0.478-5,2.942-5,5.91c0,3.309,2.691,6,6,6s6-2.691,6-6c0-2.967-2.167-5.431-5-5.91
| v-10.16c1.458-0.183,2.792-0.759,3.898-1.619l7.669,7.669C41.215,39.576,41,40.26,41,41c0,2.206,1.794,4,4,4s4-1.794,4-4
| s-1.794-4-4-4c-0.74,0-1.424,0.215-2.019,0.567l-7.669-7.669C36.366,28.542,37,26.846,37,25s-0.634-3.542-1.688-4.897l9.665-9.665
| C46.042,11.405,47.451,12,49,12c3.309,0,6-2.691,6-6S52.309,0,49,0z M11,9c0-1.103,0.897-2,2-2s2,0.897,2,2s-0.897,2-2,2
| S11,10.103,11,9z M6,51c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4S8.206,51,6,51z M33,49c0,2.206-1.794,4-4,4s-4-1.794-4-4
| s1.794-4,4-4S33,46.794,33,49z M29,31c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S32.309,31,29,31z M47,41c0,1.103-0.897,2-2,2
| s-2-0.897-2-2s0.897-2,2-2S47,39.897,47,41z M49,10c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4S51.206,10,49,10z"
| />
| </svg>
| </div>
| <div id="global-graph-outer">
| <div id="global-graph-container" data-cfg={JSON.stringify(globalGraph)}></div>
| </div>
| </div>
| )
| }
|
| Graph.css = style
| Graph.afterDOMLoaded = script
|
| return Graph
| }) satisfies QuartzComponentConstructor
|
|
