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
|
import { Controller } from "@hotwired/stimulus"
import * as d3 from 'd3'
import graphviz from 'd3-graphviz'
window.d3 = d3;
window.graphviz = graphviz;
export default class extends Controller {
static targets = ["loading", "error", "graph"]
static values = {
url: String
}
static graphvizOptions = {
useWorker: false,
useSharedWorker: false,
engine: 'dot',
keyMode: 'title',
fade: true,
tweenPaths: true,
tweenShapes: true,
convertEqualSidedPolygons: true,
tweenPrecision: 1,
growEnteringEdges: true,
zoom: false,
zoomScaleExtent: [0.1, 10],
zoomTranslateExtent: [[-Infinity, -Infinity], [+Infinity, +Infinity]],
width: null,
height: null,
scale: 1,
fit: true
}
connect() {
console.log("loading graph", this.element.id, this.urlValue)
fetch(this.urlValue).then((response) => {
if (!response.ok) {
throw new Error(`Failed to load graph: ${response.status}`)
}
return response.text()
}).then((text) => {
return this.load(text)
}).catch((error) => {
this.loadingTarget.classList.add("hidden");
this.errorTarget.classList.remove("hidden");
console.log("graph_controller", this.urlValue, error)
});
}
load(data) {
console.log("Data loaded...", data, this.graphTarget.id);
this.loadingTarget.classList.add("hidden");
var target = d3.select("#" + this.graphTarget.id);
graphviz.graphviz("#" + this.graphTarget.id, this.graphvizOptions).dot(data).render();
}
}
|
