@hpcc-js/graph 2.87.3 → 2.87.4

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.
Files changed (60) hide show
  1. package/LICENSE +43 -43
  2. package/README.md +256 -256
  3. package/dist/index.es6.js +3 -3
  4. package/dist/index.es6.js.map +1 -1
  5. package/dist/index.js +3 -3
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.min.js +1 -1
  8. package/dist/index.min.js.map +1 -1
  9. package/package.json +8 -8
  10. package/src/AdjacencyGraph.ts +224 -224
  11. package/src/Edge.css +23 -23
  12. package/src/Edge.ts +257 -257
  13. package/src/Graph.css +18 -18
  14. package/src/Graph.ts +1075 -1075
  15. package/src/GraphData.ts +187 -187
  16. package/src/GraphLayouts.ts +173 -173
  17. package/src/Sankey.css +46 -46
  18. package/src/Sankey.ts +291 -291
  19. package/src/Subgraph.css +10 -10
  20. package/src/Subgraph.ts +165 -165
  21. package/src/Vertex.css +3 -3
  22. package/src/Vertex.ts +282 -282
  23. package/src/__package__.ts +3 -3
  24. package/src/__tests__/data.ts +444 -444
  25. package/src/__tests__/index.ts +1 -1
  26. package/src/__tests__/test1.ts +18 -18
  27. package/src/__tests__/test2.ts +80 -80
  28. package/src/__tests__/test3.ts +46 -46
  29. package/src/__tests__/test4.ts +66 -66
  30. package/src/__tests__/test5.ts +85 -85
  31. package/src/graph2/dataGraph.ts +305 -305
  32. package/src/graph2/graph.css +34 -34
  33. package/src/graph2/graph.ts +135 -135
  34. package/src/graph2/graphReactT.ts +44 -44
  35. package/src/graph2/graphT.ts +1330 -1330
  36. package/src/graph2/index.ts +7 -7
  37. package/src/graph2/layouts/circle.ts +37 -37
  38. package/src/graph2/layouts/dagre.ts +132 -132
  39. package/src/graph2/layouts/dagreWorker.ts +35 -35
  40. package/src/graph2/layouts/forceDirected.ts +117 -117
  41. package/src/graph2/layouts/forceDirectedWorker.ts +30 -30
  42. package/src/graph2/layouts/geoForceDirected.ts +112 -112
  43. package/src/graph2/layouts/graphviz.ts +124 -124
  44. package/src/graph2/layouts/graphvizWorker.ts +71 -71
  45. package/src/graph2/layouts/index.ts +7 -7
  46. package/src/graph2/layouts/layout.ts +105 -105
  47. package/src/graph2/layouts/null.ts +35 -35
  48. package/src/graph2/layouts/placeholders.ts +103 -103
  49. package/src/graph2/layouts/tree.ts +328 -328
  50. package/src/graph2/liteMap.ts +72 -72
  51. package/src/graph2/liteSVGZooom.ts +61 -61
  52. package/src/graph2/sankeyGraph.css +45 -45
  53. package/src/graph2/sankeyGraph.ts +316 -316
  54. package/src/graph2/subgraph.tsx +30 -30
  55. package/src/graph2/vertex.tsx +31 -31
  56. package/src/index.ts +8 -8
  57. package/src/test.ts +649 -649
  58. package/types/__package__.d.ts +2 -2
  59. package/types/__package__.d.ts.map +1 -1
  60. package/types-3.4/__package__.d.ts +2 -2
package/src/test.ts CHANGED
@@ -1,649 +1,649 @@
1
- import { Palette } from "@hpcc-js/common";
2
- import { Vertex4, CentroidVertex4 } from "@hpcc-js/react";
3
- import { Graph } from "./Graph";
4
- import { Vertex } from "./Vertex";
5
- import { Edge } from "./Edge";
6
- import { DataGraph } from "./graph2/dataGraph";
7
- import { SankeyGraph } from "./graph2/sankeyGraph";
8
-
9
- export { Test4 as Test };
10
-
11
- export class Test1 extends Graph {
12
-
13
- constructor() {
14
- super();
15
- this
16
- .data(createData())
17
- .layout("ForceDirected")
18
- .applyScaleOnLayout(true)
19
- .centroidColor("darkgreen")
20
- .dragSingleNeighbors(true)
21
- .highlightSelectedPathToCentroid(true)
22
- ;
23
- }
24
- }
25
-
26
- export class Test2 extends DataGraph {
27
-
28
- constructor() {
29
- super();
30
- const g = genData2();
31
- this
32
- .layout("ForceDirected")
33
- .forceDirectedRepulsionStrength(-3500)
34
- .forceDirectedLinkDistance(150)
35
- .forceDirectedLinkStrength(1.5)
36
- .forceDirectedPinCentroid(true)
37
- .hierarchyDigraph(false)
38
-
39
- .centroidColor("#777777")
40
-
41
- .selectionGlowColor("#555555")
42
- .highlightOnMouseOverEdge(true)
43
- .highlightOnMouseOverVertex(true)
44
- .showVertexLabels(true)
45
-
46
- .applyScaleOnLayout(true)
47
- .zoomToFitLimit(1)
48
-
49
- .edgeArcDepth(8)
50
- .edgeStrokeWidth(2)
51
- .edgeColor("#287EC4")
52
-
53
- .allowDragging(true)
54
-
55
- .annotations([{
56
- id: "0",
57
- imageChar: "fa-plus",
58
- fill: "white",
59
- stroke: "whitesmoke",
60
- imageCharFill: "red"
61
- }, {
62
- id: "1",
63
- imageChar: "fa-star",
64
- fill: "navy",
65
- imageCharFill: "white"
66
- }])
67
-
68
- .vertexColumns(["id", "label", "fachar", "centroid", "ann1", "ann2", "expandedFAChar"])
69
- .vertexCentroidColumn("centroid")
70
- .vertexFACharColumn("fachar")
71
- .vertexIDColumn("id")
72
- .vertexLabelColumn("label")
73
- .vertexAnnotationColumns([
74
- { columnID: "ann1", annotationID: "0" } as any,
75
- { columnID: "ann2", annotationID: "1" } as any
76
- ])
77
- .vertexExpansionFACharColumn("expandedFAChar")
78
- .vertices(g.vertices)
79
-
80
- .edgeColumns(["source", "target", "label", "weightXXX"])
81
- // .edgeIDColumn("id")
82
- .edgeSourceColumn("source")
83
- .edgeTargetColumn("target")
84
- .edgeLabelColumn("label")
85
- // .edgeWeightColumn("weight")
86
- .edges(g.edges)
87
-
88
- // Events ---
89
- .on("vertex_mousein", (vertex, col, sel, anno) => console.info("vertex_mousein", vertex, anno))
90
- .on("vertex_mouseout", (vertex, col, sel, anno) => console.info("vertex_mouseout", vertex, anno))
91
- .on("vertex_mouseover", (vertex, col, sel, anno) => console.info("vertex_mouseover", vertex, anno))
92
- .on("vertex_click", (vertex, col, sel, anno) => console.info("vertex_click", vertex, anno))
93
- .on("vertex_dblclick", (vertex, col, sel, anno) => console.info("vertex_dblclick", vertex, anno))
94
- ;
95
-
96
- setTimeout(() => {
97
- // this.downloadPNG();
98
- }, 3000);
99
- }
100
- }
101
-
102
- export class Test3 extends SankeyGraph {
103
-
104
- constructor() {
105
- super();
106
- this
107
- .vertexColumns(["category", "id", "label"])
108
- .vertices([
109
- [0, 0, "A"],
110
- [0, 1, "B"],
111
- [0, 2, "C"],
112
- [0, 3, "D"],
113
- [0, 4, "F"],
114
- [1, 5, "Math"],
115
- [2, 6, "English"],
116
- [3, 7, "Geometry"],
117
- [4, 8, "Science"],
118
- ])
119
- .edgeColumns(["source", "target", "weight"])
120
- .edges([
121
- [0, 5, 48],
122
- [0, 6, 28],
123
- [0, 7, 26],
124
- [0, 8, 38],
125
- [1, 5, 63],
126
- [1, 6, 39],
127
- [1, 7, 36],
128
- [1, 8, 58],
129
- [2, 5, 42],
130
- [2, 6, 36],
131
- [2, 7, 27],
132
- [2, 8, 68],
133
- [3, 5, 90],
134
- [3, 6, 59],
135
- [3, 7, 15],
136
- [3, 8, 35],
137
- [4, 5, 10],
138
- [4, 6, 3],
139
- [4, 7, 6],
140
- [4, 8, 4],
141
- ])
142
- ;
143
- }
144
- }
145
-
146
- export class Test4 extends Test2 {
147
- constructor() {
148
- super();
149
- this
150
- .vertexRenderer(Vertex4)
151
- .centroidRenderer(CentroidVertex4)
152
- ;
153
- }
154
- }
155
-
156
- // 8
157
- let seed = 8;
158
- function random() {
159
- const x = Math.sin(seed++) * 10000;
160
- return x - Math.floor(x);
161
- }
162
- function rand() {
163
- return Math.round(random() * 32767);
164
- }
165
-
166
- function make_pair<T>(a: T, b: T): [T, T] {
167
- return [a, b];
168
- }
169
-
170
- // @ts-ignore
171
- function genData(MAX_VERTICES = 200, MAX_EDGES = 200) {
172
- const edges: [number, number][] = [];
173
- function edges_has(p: [number, number]): boolean {
174
- return edges.some(row => row[0] === p[0] && row[1] === p[1]);
175
- }
176
-
177
- const NUM = 1 + rand() % MAX_VERTICES;
178
- let NUMEDGE = 1 + rand() % MAX_EDGES;
179
-
180
- while (NUMEDGE > NUM * (NUM - 1) / 2) {
181
- NUMEDGE = 1 + rand() % MAX_EDGES;
182
- }
183
-
184
- for (let j = 1; j <= NUMEDGE; j++) {
185
- let a = 1 + rand() % NUM;
186
- let b = 1 + rand() % NUM;
187
- let p = make_pair(a, b);
188
-
189
- while (edges_has(p) || a == b) {
190
- a = 1 + rand() % NUM;
191
- b = 1 + rand() % NUM;
192
- p = make_pair(a, b);
193
- }
194
- edges.push(p);
195
- }
196
-
197
- const vertices: { [id: number]: boolean } = {};
198
- for (const it of edges) {
199
- vertices[it[0]] = true;
200
- vertices[it[1]] = true;
201
- }
202
-
203
- const icons = ["fa-at", "fa-user-o", "fa-address-card-o", "fa-globe", "fa-phone"];
204
- return {
205
- vertices: Object.keys(vertices).map(v => [v, `Node-${v}`, icons[Math.floor(Math.random() * icons.length)]]),
206
- edges: edges.map(e => [e[0], e[1], "", 1])
207
- };
208
- }
209
-
210
- function genData2() {
211
- return {
212
- vertices: [
213
- ["a", "myriel@gmail.com", "fa-at", false, false, false, "fa-plus"],
214
- [1, "Napoleon", "fa-user-o", true, true, true, "fa-plus"],
215
- [2, "Mlle.Baptistine", "fa-user-o"],
216
- [3, "Mme.Magloire", "fa-user-o"],
217
- [4, "CountessdeLo", "fa-user-o"],
218
- [5, "Geborand", "fa-user-o"],
219
- [6, "Champtercier", "fa-user-o"],
220
- [7, "Cravatte", "fa-user-o"],
221
- [8, "(561)888-8888", "fa-phone"],
222
- [9, "123-12-1234", "fa-address-card-o"],
223
- [10, "192.168.0.100", "fa-globe"],
224
- [11, "28 Mean Street, FL 33487", "fa-map-o"],
225
- [12, "(561)999-9999", "fa-phone"],
226
- [13, "123-45-6789", "fa-address-card-o"],
227
- [14, "123-23-2345", "fa-address-card-o"],
228
- [15, "(561)777-9999", "fa-phone"],
229
- [16, "123-45-0000", "fa-address-card-o"],
230
- [17, "192.168.0.22", "fa-globe"],
231
- [18, "11 Arcia Ave, FL 33487", "fa-map-o"],
232
- [19, "123-45-1111", "fa-address-card-o"],
233
- [20, "123-45-1111", "fa-address-card-o"],
234
- [21, "192.168.0.22", "fa-globe"],
235
- [22, "(561)777-9999", "fa-phone"],
236
- [23, "111-11-1111", "fa-address-card-o"],
237
- [24, "192.168.0.33", "fa-globe"],
238
- // [25, "XXX.XXX.XXX.XXX", "fa-globe"],
239
- ],
240
- edges: [
241
- [1, "a", "XXX", 1],
242
- [2, "a", "", 8],
243
- [3, "a", "", 10],
244
- [4, "a", "", 6],
245
- [5, "a", "", 1],
246
- [6, "a", "", 1],
247
- [7, "a", "", 1],
248
- [1, 8, "", 1],
249
- [1, 9, "", 1],
250
- [1, 10, "", 1],
251
- [1, 11, "", 1],
252
- [2, 12, "", 1],
253
- [2, 13, "", 1],
254
- [2, 10, "", 1],
255
- [2, 11, "", 1],
256
- [3, 12, "", 1],
257
- [3, 14, "", 1],
258
- [3, 10, "", 1],
259
- [3, 11, "", 1],
260
- [4, 15, "", 1],
261
- [4, 16, "", 1],
262
- [4, 17, "", 1],
263
- [17, 11, "", 1],
264
- [5, 17, "", 1],
265
- [5, 18, "", 1],
266
- [5, 19, "", 1],
267
- [6, 18, "", 1],
268
- [6, 20, "", 1],
269
- [6, 21, "", 1],
270
- [6, 22, "", 1],
271
- [7, 22, "", 1],
272
- [7, 23, "", 1],
273
- [7, 24, "", 1],
274
- [24, 24, "", 1],
275
- ]
276
- };
277
- }
278
-
279
- function createData() {
280
- const vertices = [];
281
- const edges = [];
282
- const palette = Palette.ordinal("dark2");
283
- const rawData = {
284
- nodes: [
285
- { "name": "Myriel", "group": 1 },
286
- { "name": "Napoleon", "group": 1 },
287
- { "name": "Mlle.Baptistine", "group": 1 },
288
- { "name": "Mme.Magloire", "group": 1 },
289
- { "name": "CountessdeLo", "group": 1 },
290
- { "name": "Geborand", "group": 1 },
291
- { "name": "Champtercier", "group": 1 },
292
- { "name": "Cravatte", "group": 1 },
293
- { "name": "Count", "group": 1 },
294
- { "name": "OldMan", "group": 1 },
295
- { "name": "Labarre", "group": 2 },
296
- { "name": "Valjean", "group": 2 },
297
- { "name": "Marguerite", "group": 3 },
298
- { "name": "Mme.deR", "group": 2 },
299
- { "name": "Isabeau", "group": 2 },
300
- { "name": "Gervais", "group": 2 },
301
- { "name": "Tholomyes", "group": 3 },
302
- { "name": "Listolier", "group": 3 },
303
- { "name": "Fameuil", "group": 3 },
304
- { "name": "Blacheville", "group": 3 },
305
- { "name": "Favourite", "group": 3 },
306
- { "name": "Dahlia", "group": 3 },
307
- { "name": "Zephine", "group": 3 },
308
- { "name": "Fantine", "group": 3 },
309
- { "name": "Mme.Thenardier", "group": 4 },
310
- { "name": "Thenardier", "group": 4 },
311
- { "name": "Cosette", "group": 5 },
312
- { "name": "Javert", "group": 4 },
313
- { "name": "Fauchelevent", "group": 0 },
314
- { "name": "Bamatabois", "group": 2 },
315
- { "name": "Perpetue", "group": 3 },
316
- { "name": "Simplice", "group": 2 },
317
- { "name": "Scaufflaire", "group": 2 },
318
- { "name": "Woman1", "group": 2 },
319
- { "name": "Judge", "group": 2 },
320
- { "name": "Champmathieu", "group": 2 },
321
- { "name": "Brevet", "group": 2 },
322
- { "name": "Chenildieu", "group": 2 },
323
- { "name": "Cochepaille", "group": 2 },
324
- { "name": "Pontmercy", "group": 4 },
325
- { "name": "Boulatruelle", "group": 6 },
326
- { "name": "Eponine", "group": 4 },
327
- { "name": "Anzelma", "group": 4 },
328
- { "name": "Woman2", "group": 5 },
329
- { "name": "MotherInnocent", "group": 0 },
330
- { "name": "Gribier", "group": 0 },
331
- { "name": "Jondrette", "group": 7 },
332
- { "name": "Mme.Burgon", "group": 7 },
333
- { "name": "Gavroche", "group": 8 },
334
- { "name": "Gillenormand", "group": 5 },
335
- { "name": "Magnon", "group": 5 },
336
- { "name": "Mlle.Gillenormand", "group": 5 },
337
- { "name": "Mme.Pontmercy", "group": 5 },
338
- { "name": "Mlle.Vaubois", "group": 5 },
339
- { "name": "Lt.Gillenormand", "group": 5 },
340
- { "name": "Marius", "group": 8 },
341
- { "name": "BaronessT", "group": 5 },
342
- { "name": "Mabeuf", "group": 8 },
343
- { "name": "Enjolras", "group": 8 },
344
- { "name": "Combeferre", "group": 8 },
345
- { "name": "Prouvaire", "group": 8 },
346
- { "name": "Feuilly", "group": 8 },
347
- { "name": "Courfeyrac", "group": 8 },
348
- { "name": "Bahorel", "group": 8 },
349
- { "name": "Bossuet", "group": 8 },
350
- { "name": "Joly", "group": 8 },
351
- { "name": "Grantaire", "group": 8 },
352
- { "name": "MotherPlutarch", "group": 9 },
353
- { "name": "Gueulemer", "group": 4 },
354
- { "name": "Babet", "group": 4 },
355
- { "name": "Claquesous", "group": 4 },
356
- { "name": "Montparnasse", "group": 4 },
357
- { "name": "Toussaint", "group": 5 },
358
- { "name": "Child1", "group": 10 },
359
- { "name": "Child2", "group": 10 },
360
- { "name": "Brujon", "group": 4 },
361
- { "name": "Mme.Hucheloup", "group": 8 }
362
- ],
363
- "links": [
364
- { "source": 1, "target": 0, "value": 1 },
365
- { "source": 2, "target": 0, "value": 8 },
366
- { "source": 2, "target": 0, "value": 8 },
367
- { "source": 3, "target": 0, "value": 10 },
368
- { "source": 3, "target": 2, "value": 6 },
369
- { "source": 4, "target": 0, "value": 1 },
370
- { "source": 5, "target": 0, "value": 1 },
371
- { "source": 6, "target": 0, "value": 1 },
372
- { "source": 7, "target": 0, "value": 1 },
373
- { "source": 8, "target": 0, "value": 2 },
374
- { "source": 9, "target": 0, "value": 1 },
375
- { "source": 11, "target": 10, "value": 1 },
376
- { "source": 11, "target": 3, "value": 3 },
377
- { "source": 11, "target": 2, "value": 3 },
378
- { "source": 11, "target": 0, "value": 5 },
379
- { "source": 12, "target": 11, "value": 1 },
380
- { "source": 13, "target": 11, "value": 1 },
381
- { "source": 14, "target": 11, "value": 1 },
382
- { "source": 15, "target": 11, "value": 1 },
383
- { "source": 17, "target": 16, "value": 4 },
384
- { "source": 18, "target": 16, "value": 4 },
385
- { "source": 18, "target": 17, "value": 4 },
386
- { "source": 19, "target": 16, "value": 4 },
387
- { "source": 19, "target": 17, "value": 4 },
388
- { "source": 19, "target": 18, "value": 4 },
389
- { "source": 20, "target": 16, "value": 3 },
390
- { "source": 20, "target": 17, "value": 3 },
391
- { "source": 20, "target": 18, "value": 3 },
392
- { "source": 20, "target": 19, "value": 4 },
393
- { "source": 21, "target": 16, "value": 3 },
394
- { "source": 21, "target": 17, "value": 3 },
395
- { "source": 21, "target": 18, "value": 3 },
396
- { "source": 21, "target": 19, "value": 3 },
397
- { "source": 21, "target": 20, "value": 5 },
398
- { "source": 22, "target": 16, "value": 3 },
399
- { "source": 22, "target": 17, "value": 3 },
400
- { "source": 22, "target": 18, "value": 3 },
401
- { "source": 22, "target": 19, "value": 3 },
402
- { "source": 22, "target": 20, "value": 4 },
403
- { "source": 22, "target": 21, "value": 4 },
404
- { "source": 23, "target": 16, "value": 3 },
405
- { "source": 23, "target": 17, "value": 3 },
406
- { "source": 23, "target": 18, "value": 3 },
407
- { "source": 23, "target": 19, "value": 3 },
408
- { "source": 23, "target": 20, "value": 4 },
409
- { "source": 23, "target": 21, "value": 4 },
410
- { "source": 23, "target": 22, "value": 4 },
411
- { "source": 23, "target": 12, "value": 2 },
412
- { "source": 23, "target": 11, "value": 9 },
413
- { "source": 24, "target": 23, "value": 2 },
414
- { "source": 24, "target": 11, "value": 7 },
415
- { "source": 25, "target": 24, "value": 13 },
416
- { "source": 25, "target": 23, "value": 1 },
417
- { "source": 25, "target": 11, "value": 12 },
418
- { "source": 26, "target": 24, "value": 4 },
419
- { "source": 26, "target": 11, "value": 31 },
420
- { "source": 26, "target": 16, "value": 1 },
421
- { "source": 26, "target": 25, "value": 1 },
422
- { "source": 27, "target": 11, "value": 17 },
423
- { "source": 27, "target": 23, "value": 5 },
424
- { "source": 27, "target": 25, "value": 5 },
425
- { "source": 27, "target": 24, "value": 1 },
426
- { "source": 27, "target": 26, "value": 1 },
427
- { "source": 28, "target": 11, "value": 8 },
428
- { "source": 28, "target": 27, "value": 1 },
429
- { "source": 29, "target": 23, "value": 1 },
430
- { "source": 29, "target": 27, "value": 1 },
431
- { "source": 29, "target": 11, "value": 2 },
432
- { "source": 30, "target": 23, "value": 1 },
433
- { "source": 31, "target": 30, "value": 2 },
434
- { "source": 31, "target": 11, "value": 3 },
435
- { "source": 31, "target": 23, "value": 2 },
436
- { "source": 31, "target": 27, "value": 1 },
437
- { "source": 32, "target": 11, "value": 1 },
438
- { "source": 33, "target": 11, "value": 2 },
439
- { "source": 33, "target": 27, "value": 1 },
440
- { "source": 34, "target": 11, "value": 3 },
441
- { "source": 34, "target": 29, "value": 2 },
442
- { "source": 35, "target": 11, "value": 3 },
443
- { "source": 35, "target": 34, "value": 3 },
444
- { "source": 35, "target": 29, "value": 2 },
445
- { "source": 36, "target": 34, "value": 2 },
446
- { "source": 36, "target": 35, "value": 2 },
447
- { "source": 36, "target": 11, "value": 2 },
448
- { "source": 36, "target": 29, "value": 1 },
449
- { "source": 37, "target": 34, "value": 2 },
450
- { "source": 37, "target": 35, "value": 2 },
451
- { "source": 37, "target": 36, "value": 2 },
452
- { "source": 37, "target": 11, "value": 2 },
453
- { "source": 37, "target": 29, "value": 1 },
454
- { "source": 38, "target": 34, "value": 2 },
455
- { "source": 38, "target": 35, "value": 2 },
456
- { "source": 38, "target": 36, "value": 2 },
457
- { "source": 38, "target": 37, "value": 2 },
458
- { "source": 38, "target": 11, "value": 2 },
459
- { "source": 38, "target": 29, "value": 1 },
460
- { "source": 39, "target": 25, "value": 1 },
461
- { "source": 40, "target": 25, "value": 1 },
462
- { "source": 41, "target": 24, "value": 2 },
463
- { "source": 41, "target": 25, "value": 3 },
464
- { "source": 42, "target": 41, "value": 2 },
465
- { "source": 42, "target": 25, "value": 2 },
466
- { "source": 42, "target": 24, "value": 1 },
467
- { "source": 43, "target": 11, "value": 3 },
468
- { "source": 43, "target": 26, "value": 1 },
469
- { "source": 43, "target": 27, "value": 1 },
470
- { "source": 44, "target": 28, "value": 3 },
471
- { "source": 44, "target": 11, "value": 1 },
472
- { "source": 45, "target": 28, "value": 2 },
473
- { "source": 47, "target": 46, "value": 1 },
474
- { "source": 48, "target": 47, "value": 2 },
475
- { "source": 48, "target": 25, "value": 1 },
476
- { "source": 48, "target": 27, "value": 1 },
477
- { "source": 48, "target": 11, "value": 1 },
478
- { "source": 49, "target": 26, "value": 3 },
479
- { "source": 49, "target": 11, "value": 2 },
480
- { "source": 50, "target": 49, "value": 1 },
481
- { "source": 50, "target": 24, "value": 1 },
482
- { "source": 51, "target": 49, "value": 9 },
483
- { "source": 51, "target": 26, "value": 2 },
484
- { "source": 51, "target": 11, "value": 2 },
485
- { "source": 52, "target": 51, "value": 1 },
486
- { "source": 52, "target": 39, "value": 1 },
487
- { "source": 53, "target": 51, "value": 1 },
488
- { "source": 54, "target": 51, "value": 2 },
489
- { "source": 54, "target": 49, "value": 1 },
490
- { "source": 54, "target": 26, "value": 1 },
491
- { "source": 55, "target": 51, "value": 6 },
492
- { "source": 55, "target": 49, "value": 12 },
493
- { "source": 55, "target": 39, "value": 1 },
494
- { "source": 55, "target": 54, "value": 1 },
495
- { "source": 55, "target": 26, "value": 21 },
496
- { "source": 55, "target": 11, "value": 19 },
497
- { "source": 55, "target": 16, "value": 1 },
498
- { "source": 55, "target": 25, "value": 2 },
499
- { "source": 55, "target": 41, "value": 5 },
500
- { "source": 55, "target": 48, "value": 4 },
501
- { "source": 56, "target": 49, "value": 1 },
502
- { "source": 56, "target": 55, "value": 1 },
503
- { "source": 57, "target": 55, "value": 1 },
504
- { "source": 57, "target": 41, "value": 1 },
505
- { "source": 57, "target": 48, "value": 1 },
506
- { "source": 58, "target": 55, "value": 7 },
507
- { "source": 58, "target": 48, "value": 7 },
508
- { "source": 58, "target": 27, "value": 6 },
509
- { "source": 58, "target": 57, "value": 1 },
510
- { "source": 58, "target": 11, "value": 4 },
511
- { "source": 59, "target": 58, "value": 15 },
512
- { "source": 59, "target": 55, "value": 5 },
513
- { "source": 59, "target": 48, "value": 6 },
514
- { "source": 59, "target": 57, "value": 2 },
515
- { "source": 60, "target": 48, "value": 1 },
516
- { "source": 60, "target": 58, "value": 4 },
517
- { "source": 60, "target": 59, "value": 2 },
518
- { "source": 61, "target": 48, "value": 2 },
519
- { "source": 61, "target": 58, "value": 6 },
520
- { "source": 61, "target": 60, "value": 2 },
521
- { "source": 61, "target": 59, "value": 5 },
522
- { "source": 61, "target": 57, "value": 1 },
523
- { "source": 61, "target": 55, "value": 1 },
524
- { "source": 62, "target": 55, "value": 9 },
525
- { "source": 62, "target": 58, "value": 17 },
526
- { "source": 62, "target": 59, "value": 13 },
527
- { "source": 62, "target": 48, "value": 7 },
528
- { "source": 62, "target": 57, "value": 2 },
529
- { "source": 62, "target": 41, "value": 1 },
530
- { "source": 62, "target": 61, "value": 6 },
531
- { "source": 62, "target": 60, "value": 3 },
532
- { "source": 63, "target": 59, "value": 5 },
533
- { "source": 63, "target": 48, "value": 5 },
534
- { "source": 63, "target": 62, "value": 6 },
535
- { "source": 63, "target": 57, "value": 2 },
536
- { "source": 63, "target": 58, "value": 4 },
537
- { "source": 63, "target": 61, "value": 3 },
538
- { "source": 63, "target": 60, "value": 2 },
539
- { "source": 63, "target": 55, "value": 1 },
540
- { "source": 64, "target": 55, "value": 5 },
541
- { "source": 64, "target": 62, "value": 12 },
542
- { "source": 64, "target": 48, "value": 5 },
543
- { "source": 64, "target": 63, "value": 4 },
544
- { "source": 64, "target": 58, "value": 10 },
545
- { "source": 64, "target": 61, "value": 6 },
546
- { "source": 64, "target": 60, "value": 2 },
547
- { "source": 64, "target": 59, "value": 9 },
548
- { "source": 64, "target": 57, "value": 1 },
549
- { "source": 64, "target": 11, "value": 1 },
550
- { "source": 65, "target": 63, "value": 5 },
551
- { "source": 65, "target": 64, "value": 7 },
552
- { "source": 65, "target": 48, "value": 3 },
553
- { "source": 65, "target": 62, "value": 5 },
554
- { "source": 65, "target": 58, "value": 5 },
555
- { "source": 65, "target": 61, "value": 5 },
556
- { "source": 65, "target": 60, "value": 2 },
557
- { "source": 65, "target": 59, "value": 5 },
558
- { "source": 65, "target": 57, "value": 1 },
559
- { "source": 65, "target": 55, "value": 2 },
560
- { "source": 66, "target": 64, "value": 3 },
561
- { "source": 66, "target": 58, "value": 3 },
562
- { "source": 66, "target": 59, "value": 1 },
563
- { "source": 66, "target": 62, "value": 2 },
564
- { "source": 66, "target": 65, "value": 2 },
565
- { "source": 66, "target": 48, "value": 1 },
566
- { "source": 66, "target": 63, "value": 1 },
567
- { "source": 66, "target": 61, "value": 1 },
568
- { "source": 66, "target": 60, "value": 1 },
569
- { "source": 67, "target": 57, "value": 3 },
570
- { "source": 68, "target": 25, "value": 5 },
571
- { "source": 68, "target": 11, "value": 1 },
572
- { "source": 68, "target": 24, "value": 1 },
573
- { "source": 68, "target": 27, "value": 1 },
574
- { "source": 68, "target": 48, "value": 1 },
575
- { "source": 68, "target": 41, "value": 1 },
576
- { "source": 69, "target": 25, "value": 6 },
577
- { "source": 69, "target": 68, "value": 6 },
578
- { "source": 69, "target": 11, "value": 1 },
579
- { "source": 69, "target": 24, "value": 1 },
580
- { "source": 69, "target": 27, "value": 2 },
581
- { "source": 69, "target": 48, "value": 1 },
582
- { "source": 69, "target": 41, "value": 1 },
583
- { "source": 70, "target": 25, "value": 4 },
584
- { "source": 70, "target": 69, "value": 4 },
585
- { "source": 70, "target": 68, "value": 4 },
586
- { "source": 70, "target": 11, "value": 1 },
587
- { "source": 70, "target": 24, "value": 1 },
588
- { "source": 70, "target": 27, "value": 1 },
589
- { "source": 70, "target": 41, "value": 1 },
590
- { "source": 70, "target": 58, "value": 1 },
591
- { "source": 71, "target": 27, "value": 1 },
592
- { "source": 71, "target": 69, "value": 2 },
593
- { "source": 71, "target": 68, "value": 2 },
594
- { "source": 71, "target": 70, "value": 2 },
595
- { "source": 71, "target": 11, "value": 1 },
596
- { "source": 71, "target": 48, "value": 1 },
597
- { "source": 71, "target": 41, "value": 1 },
598
- { "source": 71, "target": 25, "value": 1 },
599
- { "source": 72, "target": 26, "value": 2 },
600
- { "source": 72, "target": 27, "value": 1 },
601
- { "source": 72, "target": 11, "value": 1 },
602
- { "source": 73, "target": 48, "value": 2 },
603
- { "source": 74, "target": 48, "value": 2 },
604
- { "source": 74, "target": 73, "value": 3 },
605
- { "source": 75, "target": 69, "value": 3 },
606
- { "source": 75, "target": 68, "value": 3 },
607
- { "source": 75, "target": 25, "value": 3 },
608
- { "source": 75, "target": 48, "value": 1 },
609
- { "source": 75, "target": 41, "value": 1 },
610
- { "source": 75, "target": 70, "value": 1 },
611
- { "source": 75, "target": 71, "value": 1 },
612
- { "source": 76, "target": 64, "value": 1 },
613
- { "source": 76, "target": 65, "value": 1 },
614
- { "source": 76, "target": 66, "value": 1 },
615
- { "source": 76, "target": 63, "value": 1 },
616
- { "source": 76, "target": 62, "value": 1 },
617
- { "source": 76, "target": 48, "value": 1 },
618
- { "source": 76, "target": 58, "value": 1 }
619
- ]
620
- };
621
- rawData.nodes.forEach(function (node: any) {
622
- vertices.push(
623
- new Vertex()
624
- .centroid(node.name === "Valjean")
625
- .text(node.name)
626
- .textbox_shape_colorStroke(palette(node.group))
627
- .textbox_shape_colorFill("whitesmoke")
628
- .icon_shape_colorStroke(palette(node.group))
629
- .icon_shape_colorFill(palette(node.group))
630
- .faChar(node.name[0])
631
- )
632
- ;
633
- });
634
-
635
- rawData.links.forEach(function (link, idx) {
636
- edges.push(
637
- new Edge()
638
- .sourceVertex(vertices[link.source])
639
- .targetVertex(vertices[link.target])
640
- .sourceMarker("circle")
641
- .targetMarker("arrow")
642
- .text("")
643
- .weight(link.value)
644
- )
645
- ;
646
- });
647
-
648
- return { vertices: vertices, edges: edges };
649
- }
1
+ import { Palette } from "@hpcc-js/common";
2
+ import { Vertex4, CentroidVertex4 } from "@hpcc-js/react";
3
+ import { Graph } from "./Graph";
4
+ import { Vertex } from "./Vertex";
5
+ import { Edge } from "./Edge";
6
+ import { DataGraph } from "./graph2/dataGraph";
7
+ import { SankeyGraph } from "./graph2/sankeyGraph";
8
+
9
+ export { Test4 as Test };
10
+
11
+ export class Test1 extends Graph {
12
+
13
+ constructor() {
14
+ super();
15
+ this
16
+ .data(createData())
17
+ .layout("ForceDirected")
18
+ .applyScaleOnLayout(true)
19
+ .centroidColor("darkgreen")
20
+ .dragSingleNeighbors(true)
21
+ .highlightSelectedPathToCentroid(true)
22
+ ;
23
+ }
24
+ }
25
+
26
+ export class Test2 extends DataGraph {
27
+
28
+ constructor() {
29
+ super();
30
+ const g = genData2();
31
+ this
32
+ .layout("ForceDirected")
33
+ .forceDirectedRepulsionStrength(-3500)
34
+ .forceDirectedLinkDistance(150)
35
+ .forceDirectedLinkStrength(1.5)
36
+ .forceDirectedPinCentroid(true)
37
+ .hierarchyDigraph(false)
38
+
39
+ .centroidColor("#777777")
40
+
41
+ .selectionGlowColor("#555555")
42
+ .highlightOnMouseOverEdge(true)
43
+ .highlightOnMouseOverVertex(true)
44
+ .showVertexLabels(true)
45
+
46
+ .applyScaleOnLayout(true)
47
+ .zoomToFitLimit(1)
48
+
49
+ .edgeArcDepth(8)
50
+ .edgeStrokeWidth(2)
51
+ .edgeColor("#287EC4")
52
+
53
+ .allowDragging(true)
54
+
55
+ .annotations([{
56
+ id: "0",
57
+ imageChar: "fa-plus",
58
+ fill: "white",
59
+ stroke: "whitesmoke",
60
+ imageCharFill: "red"
61
+ }, {
62
+ id: "1",
63
+ imageChar: "fa-star",
64
+ fill: "navy",
65
+ imageCharFill: "white"
66
+ }])
67
+
68
+ .vertexColumns(["id", "label", "fachar", "centroid", "ann1", "ann2", "expandedFAChar"])
69
+ .vertexCentroidColumn("centroid")
70
+ .vertexFACharColumn("fachar")
71
+ .vertexIDColumn("id")
72
+ .vertexLabelColumn("label")
73
+ .vertexAnnotationColumns([
74
+ { columnID: "ann1", annotationID: "0" } as any,
75
+ { columnID: "ann2", annotationID: "1" } as any
76
+ ])
77
+ .vertexExpansionFACharColumn("expandedFAChar")
78
+ .vertices(g.vertices)
79
+
80
+ .edgeColumns(["source", "target", "label", "weightXXX"])
81
+ // .edgeIDColumn("id")
82
+ .edgeSourceColumn("source")
83
+ .edgeTargetColumn("target")
84
+ .edgeLabelColumn("label")
85
+ // .edgeWeightColumn("weight")
86
+ .edges(g.edges)
87
+
88
+ // Events ---
89
+ .on("vertex_mousein", (vertex, col, sel, anno) => console.info("vertex_mousein", vertex, anno))
90
+ .on("vertex_mouseout", (vertex, col, sel, anno) => console.info("vertex_mouseout", vertex, anno))
91
+ .on("vertex_mouseover", (vertex, col, sel, anno) => console.info("vertex_mouseover", vertex, anno))
92
+ .on("vertex_click", (vertex, col, sel, anno) => console.info("vertex_click", vertex, anno))
93
+ .on("vertex_dblclick", (vertex, col, sel, anno) => console.info("vertex_dblclick", vertex, anno))
94
+ ;
95
+
96
+ setTimeout(() => {
97
+ // this.downloadPNG();
98
+ }, 3000);
99
+ }
100
+ }
101
+
102
+ export class Test3 extends SankeyGraph {
103
+
104
+ constructor() {
105
+ super();
106
+ this
107
+ .vertexColumns(["category", "id", "label"])
108
+ .vertices([
109
+ [0, 0, "A"],
110
+ [0, 1, "B"],
111
+ [0, 2, "C"],
112
+ [0, 3, "D"],
113
+ [0, 4, "F"],
114
+ [1, 5, "Math"],
115
+ [2, 6, "English"],
116
+ [3, 7, "Geometry"],
117
+ [4, 8, "Science"],
118
+ ])
119
+ .edgeColumns(["source", "target", "weight"])
120
+ .edges([
121
+ [0, 5, 48],
122
+ [0, 6, 28],
123
+ [0, 7, 26],
124
+ [0, 8, 38],
125
+ [1, 5, 63],
126
+ [1, 6, 39],
127
+ [1, 7, 36],
128
+ [1, 8, 58],
129
+ [2, 5, 42],
130
+ [2, 6, 36],
131
+ [2, 7, 27],
132
+ [2, 8, 68],
133
+ [3, 5, 90],
134
+ [3, 6, 59],
135
+ [3, 7, 15],
136
+ [3, 8, 35],
137
+ [4, 5, 10],
138
+ [4, 6, 3],
139
+ [4, 7, 6],
140
+ [4, 8, 4],
141
+ ])
142
+ ;
143
+ }
144
+ }
145
+
146
+ export class Test4 extends Test2 {
147
+ constructor() {
148
+ super();
149
+ this
150
+ .vertexRenderer(Vertex4)
151
+ .centroidRenderer(CentroidVertex4)
152
+ ;
153
+ }
154
+ }
155
+
156
+ // 8
157
+ let seed = 8;
158
+ function random() {
159
+ const x = Math.sin(seed++) * 10000;
160
+ return x - Math.floor(x);
161
+ }
162
+ function rand() {
163
+ return Math.round(random() * 32767);
164
+ }
165
+
166
+ function make_pair<T>(a: T, b: T): [T, T] {
167
+ return [a, b];
168
+ }
169
+
170
+ // @ts-ignore
171
+ function genData(MAX_VERTICES = 200, MAX_EDGES = 200) {
172
+ const edges: [number, number][] = [];
173
+ function edges_has(p: [number, number]): boolean {
174
+ return edges.some(row => row[0] === p[0] && row[1] === p[1]);
175
+ }
176
+
177
+ const NUM = 1 + rand() % MAX_VERTICES;
178
+ let NUMEDGE = 1 + rand() % MAX_EDGES;
179
+
180
+ while (NUMEDGE > NUM * (NUM - 1) / 2) {
181
+ NUMEDGE = 1 + rand() % MAX_EDGES;
182
+ }
183
+
184
+ for (let j = 1; j <= NUMEDGE; j++) {
185
+ let a = 1 + rand() % NUM;
186
+ let b = 1 + rand() % NUM;
187
+ let p = make_pair(a, b);
188
+
189
+ while (edges_has(p) || a == b) {
190
+ a = 1 + rand() % NUM;
191
+ b = 1 + rand() % NUM;
192
+ p = make_pair(a, b);
193
+ }
194
+ edges.push(p);
195
+ }
196
+
197
+ const vertices: { [id: number]: boolean } = {};
198
+ for (const it of edges) {
199
+ vertices[it[0]] = true;
200
+ vertices[it[1]] = true;
201
+ }
202
+
203
+ const icons = ["fa-at", "fa-user-o", "fa-address-card-o", "fa-globe", "fa-phone"];
204
+ return {
205
+ vertices: Object.keys(vertices).map(v => [v, `Node-${v}`, icons[Math.floor(Math.random() * icons.length)]]),
206
+ edges: edges.map(e => [e[0], e[1], "", 1])
207
+ };
208
+ }
209
+
210
+ function genData2() {
211
+ return {
212
+ vertices: [
213
+ ["a", "myriel@gmail.com", "fa-at", false, false, false, "fa-plus"],
214
+ [1, "Napoleon", "fa-user-o", true, true, true, "fa-plus"],
215
+ [2, "Mlle.Baptistine", "fa-user-o"],
216
+ [3, "Mme.Magloire", "fa-user-o"],
217
+ [4, "CountessdeLo", "fa-user-o"],
218
+ [5, "Geborand", "fa-user-o"],
219
+ [6, "Champtercier", "fa-user-o"],
220
+ [7, "Cravatte", "fa-user-o"],
221
+ [8, "(561)888-8888", "fa-phone"],
222
+ [9, "123-12-1234", "fa-address-card-o"],
223
+ [10, "192.168.0.100", "fa-globe"],
224
+ [11, "28 Mean Street, FL 33487", "fa-map-o"],
225
+ [12, "(561)999-9999", "fa-phone"],
226
+ [13, "123-45-6789", "fa-address-card-o"],
227
+ [14, "123-23-2345", "fa-address-card-o"],
228
+ [15, "(561)777-9999", "fa-phone"],
229
+ [16, "123-45-0000", "fa-address-card-o"],
230
+ [17, "192.168.0.22", "fa-globe"],
231
+ [18, "11 Arcia Ave, FL 33487", "fa-map-o"],
232
+ [19, "123-45-1111", "fa-address-card-o"],
233
+ [20, "123-45-1111", "fa-address-card-o"],
234
+ [21, "192.168.0.22", "fa-globe"],
235
+ [22, "(561)777-9999", "fa-phone"],
236
+ [23, "111-11-1111", "fa-address-card-o"],
237
+ [24, "192.168.0.33", "fa-globe"],
238
+ // [25, "XXX.XXX.XXX.XXX", "fa-globe"],
239
+ ],
240
+ edges: [
241
+ [1, "a", "XXX", 1],
242
+ [2, "a", "", 8],
243
+ [3, "a", "", 10],
244
+ [4, "a", "", 6],
245
+ [5, "a", "", 1],
246
+ [6, "a", "", 1],
247
+ [7, "a", "", 1],
248
+ [1, 8, "", 1],
249
+ [1, 9, "", 1],
250
+ [1, 10, "", 1],
251
+ [1, 11, "", 1],
252
+ [2, 12, "", 1],
253
+ [2, 13, "", 1],
254
+ [2, 10, "", 1],
255
+ [2, 11, "", 1],
256
+ [3, 12, "", 1],
257
+ [3, 14, "", 1],
258
+ [3, 10, "", 1],
259
+ [3, 11, "", 1],
260
+ [4, 15, "", 1],
261
+ [4, 16, "", 1],
262
+ [4, 17, "", 1],
263
+ [17, 11, "", 1],
264
+ [5, 17, "", 1],
265
+ [5, 18, "", 1],
266
+ [5, 19, "", 1],
267
+ [6, 18, "", 1],
268
+ [6, 20, "", 1],
269
+ [6, 21, "", 1],
270
+ [6, 22, "", 1],
271
+ [7, 22, "", 1],
272
+ [7, 23, "", 1],
273
+ [7, 24, "", 1],
274
+ [24, 24, "", 1],
275
+ ]
276
+ };
277
+ }
278
+
279
+ function createData() {
280
+ const vertices = [];
281
+ const edges = [];
282
+ const palette = Palette.ordinal("dark2");
283
+ const rawData = {
284
+ nodes: [
285
+ { "name": "Myriel", "group": 1 },
286
+ { "name": "Napoleon", "group": 1 },
287
+ { "name": "Mlle.Baptistine", "group": 1 },
288
+ { "name": "Mme.Magloire", "group": 1 },
289
+ { "name": "CountessdeLo", "group": 1 },
290
+ { "name": "Geborand", "group": 1 },
291
+ { "name": "Champtercier", "group": 1 },
292
+ { "name": "Cravatte", "group": 1 },
293
+ { "name": "Count", "group": 1 },
294
+ { "name": "OldMan", "group": 1 },
295
+ { "name": "Labarre", "group": 2 },
296
+ { "name": "Valjean", "group": 2 },
297
+ { "name": "Marguerite", "group": 3 },
298
+ { "name": "Mme.deR", "group": 2 },
299
+ { "name": "Isabeau", "group": 2 },
300
+ { "name": "Gervais", "group": 2 },
301
+ { "name": "Tholomyes", "group": 3 },
302
+ { "name": "Listolier", "group": 3 },
303
+ { "name": "Fameuil", "group": 3 },
304
+ { "name": "Blacheville", "group": 3 },
305
+ { "name": "Favourite", "group": 3 },
306
+ { "name": "Dahlia", "group": 3 },
307
+ { "name": "Zephine", "group": 3 },
308
+ { "name": "Fantine", "group": 3 },
309
+ { "name": "Mme.Thenardier", "group": 4 },
310
+ { "name": "Thenardier", "group": 4 },
311
+ { "name": "Cosette", "group": 5 },
312
+ { "name": "Javert", "group": 4 },
313
+ { "name": "Fauchelevent", "group": 0 },
314
+ { "name": "Bamatabois", "group": 2 },
315
+ { "name": "Perpetue", "group": 3 },
316
+ { "name": "Simplice", "group": 2 },
317
+ { "name": "Scaufflaire", "group": 2 },
318
+ { "name": "Woman1", "group": 2 },
319
+ { "name": "Judge", "group": 2 },
320
+ { "name": "Champmathieu", "group": 2 },
321
+ { "name": "Brevet", "group": 2 },
322
+ { "name": "Chenildieu", "group": 2 },
323
+ { "name": "Cochepaille", "group": 2 },
324
+ { "name": "Pontmercy", "group": 4 },
325
+ { "name": "Boulatruelle", "group": 6 },
326
+ { "name": "Eponine", "group": 4 },
327
+ { "name": "Anzelma", "group": 4 },
328
+ { "name": "Woman2", "group": 5 },
329
+ { "name": "MotherInnocent", "group": 0 },
330
+ { "name": "Gribier", "group": 0 },
331
+ { "name": "Jondrette", "group": 7 },
332
+ { "name": "Mme.Burgon", "group": 7 },
333
+ { "name": "Gavroche", "group": 8 },
334
+ { "name": "Gillenormand", "group": 5 },
335
+ { "name": "Magnon", "group": 5 },
336
+ { "name": "Mlle.Gillenormand", "group": 5 },
337
+ { "name": "Mme.Pontmercy", "group": 5 },
338
+ { "name": "Mlle.Vaubois", "group": 5 },
339
+ { "name": "Lt.Gillenormand", "group": 5 },
340
+ { "name": "Marius", "group": 8 },
341
+ { "name": "BaronessT", "group": 5 },
342
+ { "name": "Mabeuf", "group": 8 },
343
+ { "name": "Enjolras", "group": 8 },
344
+ { "name": "Combeferre", "group": 8 },
345
+ { "name": "Prouvaire", "group": 8 },
346
+ { "name": "Feuilly", "group": 8 },
347
+ { "name": "Courfeyrac", "group": 8 },
348
+ { "name": "Bahorel", "group": 8 },
349
+ { "name": "Bossuet", "group": 8 },
350
+ { "name": "Joly", "group": 8 },
351
+ { "name": "Grantaire", "group": 8 },
352
+ { "name": "MotherPlutarch", "group": 9 },
353
+ { "name": "Gueulemer", "group": 4 },
354
+ { "name": "Babet", "group": 4 },
355
+ { "name": "Claquesous", "group": 4 },
356
+ { "name": "Montparnasse", "group": 4 },
357
+ { "name": "Toussaint", "group": 5 },
358
+ { "name": "Child1", "group": 10 },
359
+ { "name": "Child2", "group": 10 },
360
+ { "name": "Brujon", "group": 4 },
361
+ { "name": "Mme.Hucheloup", "group": 8 }
362
+ ],
363
+ "links": [
364
+ { "source": 1, "target": 0, "value": 1 },
365
+ { "source": 2, "target": 0, "value": 8 },
366
+ { "source": 2, "target": 0, "value": 8 },
367
+ { "source": 3, "target": 0, "value": 10 },
368
+ { "source": 3, "target": 2, "value": 6 },
369
+ { "source": 4, "target": 0, "value": 1 },
370
+ { "source": 5, "target": 0, "value": 1 },
371
+ { "source": 6, "target": 0, "value": 1 },
372
+ { "source": 7, "target": 0, "value": 1 },
373
+ { "source": 8, "target": 0, "value": 2 },
374
+ { "source": 9, "target": 0, "value": 1 },
375
+ { "source": 11, "target": 10, "value": 1 },
376
+ { "source": 11, "target": 3, "value": 3 },
377
+ { "source": 11, "target": 2, "value": 3 },
378
+ { "source": 11, "target": 0, "value": 5 },
379
+ { "source": 12, "target": 11, "value": 1 },
380
+ { "source": 13, "target": 11, "value": 1 },
381
+ { "source": 14, "target": 11, "value": 1 },
382
+ { "source": 15, "target": 11, "value": 1 },
383
+ { "source": 17, "target": 16, "value": 4 },
384
+ { "source": 18, "target": 16, "value": 4 },
385
+ { "source": 18, "target": 17, "value": 4 },
386
+ { "source": 19, "target": 16, "value": 4 },
387
+ { "source": 19, "target": 17, "value": 4 },
388
+ { "source": 19, "target": 18, "value": 4 },
389
+ { "source": 20, "target": 16, "value": 3 },
390
+ { "source": 20, "target": 17, "value": 3 },
391
+ { "source": 20, "target": 18, "value": 3 },
392
+ { "source": 20, "target": 19, "value": 4 },
393
+ { "source": 21, "target": 16, "value": 3 },
394
+ { "source": 21, "target": 17, "value": 3 },
395
+ { "source": 21, "target": 18, "value": 3 },
396
+ { "source": 21, "target": 19, "value": 3 },
397
+ { "source": 21, "target": 20, "value": 5 },
398
+ { "source": 22, "target": 16, "value": 3 },
399
+ { "source": 22, "target": 17, "value": 3 },
400
+ { "source": 22, "target": 18, "value": 3 },
401
+ { "source": 22, "target": 19, "value": 3 },
402
+ { "source": 22, "target": 20, "value": 4 },
403
+ { "source": 22, "target": 21, "value": 4 },
404
+ { "source": 23, "target": 16, "value": 3 },
405
+ { "source": 23, "target": 17, "value": 3 },
406
+ { "source": 23, "target": 18, "value": 3 },
407
+ { "source": 23, "target": 19, "value": 3 },
408
+ { "source": 23, "target": 20, "value": 4 },
409
+ { "source": 23, "target": 21, "value": 4 },
410
+ { "source": 23, "target": 22, "value": 4 },
411
+ { "source": 23, "target": 12, "value": 2 },
412
+ { "source": 23, "target": 11, "value": 9 },
413
+ { "source": 24, "target": 23, "value": 2 },
414
+ { "source": 24, "target": 11, "value": 7 },
415
+ { "source": 25, "target": 24, "value": 13 },
416
+ { "source": 25, "target": 23, "value": 1 },
417
+ { "source": 25, "target": 11, "value": 12 },
418
+ { "source": 26, "target": 24, "value": 4 },
419
+ { "source": 26, "target": 11, "value": 31 },
420
+ { "source": 26, "target": 16, "value": 1 },
421
+ { "source": 26, "target": 25, "value": 1 },
422
+ { "source": 27, "target": 11, "value": 17 },
423
+ { "source": 27, "target": 23, "value": 5 },
424
+ { "source": 27, "target": 25, "value": 5 },
425
+ { "source": 27, "target": 24, "value": 1 },
426
+ { "source": 27, "target": 26, "value": 1 },
427
+ { "source": 28, "target": 11, "value": 8 },
428
+ { "source": 28, "target": 27, "value": 1 },
429
+ { "source": 29, "target": 23, "value": 1 },
430
+ { "source": 29, "target": 27, "value": 1 },
431
+ { "source": 29, "target": 11, "value": 2 },
432
+ { "source": 30, "target": 23, "value": 1 },
433
+ { "source": 31, "target": 30, "value": 2 },
434
+ { "source": 31, "target": 11, "value": 3 },
435
+ { "source": 31, "target": 23, "value": 2 },
436
+ { "source": 31, "target": 27, "value": 1 },
437
+ { "source": 32, "target": 11, "value": 1 },
438
+ { "source": 33, "target": 11, "value": 2 },
439
+ { "source": 33, "target": 27, "value": 1 },
440
+ { "source": 34, "target": 11, "value": 3 },
441
+ { "source": 34, "target": 29, "value": 2 },
442
+ { "source": 35, "target": 11, "value": 3 },
443
+ { "source": 35, "target": 34, "value": 3 },
444
+ { "source": 35, "target": 29, "value": 2 },
445
+ { "source": 36, "target": 34, "value": 2 },
446
+ { "source": 36, "target": 35, "value": 2 },
447
+ { "source": 36, "target": 11, "value": 2 },
448
+ { "source": 36, "target": 29, "value": 1 },
449
+ { "source": 37, "target": 34, "value": 2 },
450
+ { "source": 37, "target": 35, "value": 2 },
451
+ { "source": 37, "target": 36, "value": 2 },
452
+ { "source": 37, "target": 11, "value": 2 },
453
+ { "source": 37, "target": 29, "value": 1 },
454
+ { "source": 38, "target": 34, "value": 2 },
455
+ { "source": 38, "target": 35, "value": 2 },
456
+ { "source": 38, "target": 36, "value": 2 },
457
+ { "source": 38, "target": 37, "value": 2 },
458
+ { "source": 38, "target": 11, "value": 2 },
459
+ { "source": 38, "target": 29, "value": 1 },
460
+ { "source": 39, "target": 25, "value": 1 },
461
+ { "source": 40, "target": 25, "value": 1 },
462
+ { "source": 41, "target": 24, "value": 2 },
463
+ { "source": 41, "target": 25, "value": 3 },
464
+ { "source": 42, "target": 41, "value": 2 },
465
+ { "source": 42, "target": 25, "value": 2 },
466
+ { "source": 42, "target": 24, "value": 1 },
467
+ { "source": 43, "target": 11, "value": 3 },
468
+ { "source": 43, "target": 26, "value": 1 },
469
+ { "source": 43, "target": 27, "value": 1 },
470
+ { "source": 44, "target": 28, "value": 3 },
471
+ { "source": 44, "target": 11, "value": 1 },
472
+ { "source": 45, "target": 28, "value": 2 },
473
+ { "source": 47, "target": 46, "value": 1 },
474
+ { "source": 48, "target": 47, "value": 2 },
475
+ { "source": 48, "target": 25, "value": 1 },
476
+ { "source": 48, "target": 27, "value": 1 },
477
+ { "source": 48, "target": 11, "value": 1 },
478
+ { "source": 49, "target": 26, "value": 3 },
479
+ { "source": 49, "target": 11, "value": 2 },
480
+ { "source": 50, "target": 49, "value": 1 },
481
+ { "source": 50, "target": 24, "value": 1 },
482
+ { "source": 51, "target": 49, "value": 9 },
483
+ { "source": 51, "target": 26, "value": 2 },
484
+ { "source": 51, "target": 11, "value": 2 },
485
+ { "source": 52, "target": 51, "value": 1 },
486
+ { "source": 52, "target": 39, "value": 1 },
487
+ { "source": 53, "target": 51, "value": 1 },
488
+ { "source": 54, "target": 51, "value": 2 },
489
+ { "source": 54, "target": 49, "value": 1 },
490
+ { "source": 54, "target": 26, "value": 1 },
491
+ { "source": 55, "target": 51, "value": 6 },
492
+ { "source": 55, "target": 49, "value": 12 },
493
+ { "source": 55, "target": 39, "value": 1 },
494
+ { "source": 55, "target": 54, "value": 1 },
495
+ { "source": 55, "target": 26, "value": 21 },
496
+ { "source": 55, "target": 11, "value": 19 },
497
+ { "source": 55, "target": 16, "value": 1 },
498
+ { "source": 55, "target": 25, "value": 2 },
499
+ { "source": 55, "target": 41, "value": 5 },
500
+ { "source": 55, "target": 48, "value": 4 },
501
+ { "source": 56, "target": 49, "value": 1 },
502
+ { "source": 56, "target": 55, "value": 1 },
503
+ { "source": 57, "target": 55, "value": 1 },
504
+ { "source": 57, "target": 41, "value": 1 },
505
+ { "source": 57, "target": 48, "value": 1 },
506
+ { "source": 58, "target": 55, "value": 7 },
507
+ { "source": 58, "target": 48, "value": 7 },
508
+ { "source": 58, "target": 27, "value": 6 },
509
+ { "source": 58, "target": 57, "value": 1 },
510
+ { "source": 58, "target": 11, "value": 4 },
511
+ { "source": 59, "target": 58, "value": 15 },
512
+ { "source": 59, "target": 55, "value": 5 },
513
+ { "source": 59, "target": 48, "value": 6 },
514
+ { "source": 59, "target": 57, "value": 2 },
515
+ { "source": 60, "target": 48, "value": 1 },
516
+ { "source": 60, "target": 58, "value": 4 },
517
+ { "source": 60, "target": 59, "value": 2 },
518
+ { "source": 61, "target": 48, "value": 2 },
519
+ { "source": 61, "target": 58, "value": 6 },
520
+ { "source": 61, "target": 60, "value": 2 },
521
+ { "source": 61, "target": 59, "value": 5 },
522
+ { "source": 61, "target": 57, "value": 1 },
523
+ { "source": 61, "target": 55, "value": 1 },
524
+ { "source": 62, "target": 55, "value": 9 },
525
+ { "source": 62, "target": 58, "value": 17 },
526
+ { "source": 62, "target": 59, "value": 13 },
527
+ { "source": 62, "target": 48, "value": 7 },
528
+ { "source": 62, "target": 57, "value": 2 },
529
+ { "source": 62, "target": 41, "value": 1 },
530
+ { "source": 62, "target": 61, "value": 6 },
531
+ { "source": 62, "target": 60, "value": 3 },
532
+ { "source": 63, "target": 59, "value": 5 },
533
+ { "source": 63, "target": 48, "value": 5 },
534
+ { "source": 63, "target": 62, "value": 6 },
535
+ { "source": 63, "target": 57, "value": 2 },
536
+ { "source": 63, "target": 58, "value": 4 },
537
+ { "source": 63, "target": 61, "value": 3 },
538
+ { "source": 63, "target": 60, "value": 2 },
539
+ { "source": 63, "target": 55, "value": 1 },
540
+ { "source": 64, "target": 55, "value": 5 },
541
+ { "source": 64, "target": 62, "value": 12 },
542
+ { "source": 64, "target": 48, "value": 5 },
543
+ { "source": 64, "target": 63, "value": 4 },
544
+ { "source": 64, "target": 58, "value": 10 },
545
+ { "source": 64, "target": 61, "value": 6 },
546
+ { "source": 64, "target": 60, "value": 2 },
547
+ { "source": 64, "target": 59, "value": 9 },
548
+ { "source": 64, "target": 57, "value": 1 },
549
+ { "source": 64, "target": 11, "value": 1 },
550
+ { "source": 65, "target": 63, "value": 5 },
551
+ { "source": 65, "target": 64, "value": 7 },
552
+ { "source": 65, "target": 48, "value": 3 },
553
+ { "source": 65, "target": 62, "value": 5 },
554
+ { "source": 65, "target": 58, "value": 5 },
555
+ { "source": 65, "target": 61, "value": 5 },
556
+ { "source": 65, "target": 60, "value": 2 },
557
+ { "source": 65, "target": 59, "value": 5 },
558
+ { "source": 65, "target": 57, "value": 1 },
559
+ { "source": 65, "target": 55, "value": 2 },
560
+ { "source": 66, "target": 64, "value": 3 },
561
+ { "source": 66, "target": 58, "value": 3 },
562
+ { "source": 66, "target": 59, "value": 1 },
563
+ { "source": 66, "target": 62, "value": 2 },
564
+ { "source": 66, "target": 65, "value": 2 },
565
+ { "source": 66, "target": 48, "value": 1 },
566
+ { "source": 66, "target": 63, "value": 1 },
567
+ { "source": 66, "target": 61, "value": 1 },
568
+ { "source": 66, "target": 60, "value": 1 },
569
+ { "source": 67, "target": 57, "value": 3 },
570
+ { "source": 68, "target": 25, "value": 5 },
571
+ { "source": 68, "target": 11, "value": 1 },
572
+ { "source": 68, "target": 24, "value": 1 },
573
+ { "source": 68, "target": 27, "value": 1 },
574
+ { "source": 68, "target": 48, "value": 1 },
575
+ { "source": 68, "target": 41, "value": 1 },
576
+ { "source": 69, "target": 25, "value": 6 },
577
+ { "source": 69, "target": 68, "value": 6 },
578
+ { "source": 69, "target": 11, "value": 1 },
579
+ { "source": 69, "target": 24, "value": 1 },
580
+ { "source": 69, "target": 27, "value": 2 },
581
+ { "source": 69, "target": 48, "value": 1 },
582
+ { "source": 69, "target": 41, "value": 1 },
583
+ { "source": 70, "target": 25, "value": 4 },
584
+ { "source": 70, "target": 69, "value": 4 },
585
+ { "source": 70, "target": 68, "value": 4 },
586
+ { "source": 70, "target": 11, "value": 1 },
587
+ { "source": 70, "target": 24, "value": 1 },
588
+ { "source": 70, "target": 27, "value": 1 },
589
+ { "source": 70, "target": 41, "value": 1 },
590
+ { "source": 70, "target": 58, "value": 1 },
591
+ { "source": 71, "target": 27, "value": 1 },
592
+ { "source": 71, "target": 69, "value": 2 },
593
+ { "source": 71, "target": 68, "value": 2 },
594
+ { "source": 71, "target": 70, "value": 2 },
595
+ { "source": 71, "target": 11, "value": 1 },
596
+ { "source": 71, "target": 48, "value": 1 },
597
+ { "source": 71, "target": 41, "value": 1 },
598
+ { "source": 71, "target": 25, "value": 1 },
599
+ { "source": 72, "target": 26, "value": 2 },
600
+ { "source": 72, "target": 27, "value": 1 },
601
+ { "source": 72, "target": 11, "value": 1 },
602
+ { "source": 73, "target": 48, "value": 2 },
603
+ { "source": 74, "target": 48, "value": 2 },
604
+ { "source": 74, "target": 73, "value": 3 },
605
+ { "source": 75, "target": 69, "value": 3 },
606
+ { "source": 75, "target": 68, "value": 3 },
607
+ { "source": 75, "target": 25, "value": 3 },
608
+ { "source": 75, "target": 48, "value": 1 },
609
+ { "source": 75, "target": 41, "value": 1 },
610
+ { "source": 75, "target": 70, "value": 1 },
611
+ { "source": 75, "target": 71, "value": 1 },
612
+ { "source": 76, "target": 64, "value": 1 },
613
+ { "source": 76, "target": 65, "value": 1 },
614
+ { "source": 76, "target": 66, "value": 1 },
615
+ { "source": 76, "target": 63, "value": 1 },
616
+ { "source": 76, "target": 62, "value": 1 },
617
+ { "source": 76, "target": 48, "value": 1 },
618
+ { "source": 76, "target": 58, "value": 1 }
619
+ ]
620
+ };
621
+ rawData.nodes.forEach(function (node: any) {
622
+ vertices.push(
623
+ new Vertex()
624
+ .centroid(node.name === "Valjean")
625
+ .text(node.name)
626
+ .textbox_shape_colorStroke(palette(node.group))
627
+ .textbox_shape_colorFill("whitesmoke")
628
+ .icon_shape_colorStroke(palette(node.group))
629
+ .icon_shape_colorFill(palette(node.group))
630
+ .faChar(node.name[0])
631
+ )
632
+ ;
633
+ });
634
+
635
+ rawData.links.forEach(function (link, idx) {
636
+ edges.push(
637
+ new Edge()
638
+ .sourceVertex(vertices[link.source])
639
+ .targetVertex(vertices[link.target])
640
+ .sourceMarker("circle")
641
+ .targetMarker("arrow")
642
+ .text("")
643
+ .weight(link.value)
644
+ )
645
+ ;
646
+ });
647
+
648
+ return { vertices: vertices, edges: edges };
649
+ }