I am trying to integrate GoJS with splunk app. Created a dashboard and edited its source to include goJS library.
Have tried including it from cdn and as external script both(by placing it in static folder of splunk app)
But the issue is I am not able to create diagram. It shows only blank div.No error in console. Need help urgently.
Sample code:
<dashboard>
<label>html_check</label>
<row>
<panel>
<html>
<head>
<title>Basic GoJS Sample</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/2.0.15/go.js"></script>
<body>
<script type="text/javascript" id="code">
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"clickCreatingTool.archetypeNodeData": { text: "Node", color: "white" },
"commandHandler.archetypeGroupData": { text: "Group", isGroup: true, color: "blue" },
"undoManager.isEnabled": true
});
function makeButton(text, action, visiblePredicate) {
return $("ContextMenuButton",
$(go.TextBlock, text),
{ click: action },
visiblePredicate ? new go.Binding("visible", "", function(o, e) { return o.diagram ? visiblePredicate(o, e) : false; }).ofObject() : {});
}
var partContextMenu =
$("ContextMenu",
makeButton("Properties",
function(e, obj) {
var contextmenu = obj.part;
var part = contextmenu.adornedPart;
if (part instanceof go.Link) alert(linkInfo(part.data));
else if (part instanceof go.Group) alert(groupInfo(contextmenu));
else alert(nodeInfo(part.data));
}),
makeButton("Cut",
function(e, obj) { e.diagram.commandHandler.cutSelection(); },
function(o) { return o.diagram.commandHandler.canCutSelection(); }),
makeButton("Copy",
function(e, obj) { e.diagram.commandHandler.copySelection(); },
function(o) { return o.diagram.commandHandler.canCopySelection(); }),
makeButton("Paste",
function(e, obj) { e.diagram.commandHandler.pasteSelection(e.diagram.lastInput.documentPoint); },
function(o) { return o.diagram.commandHandler.canPasteSelection(); }),
makeButton("Delete",
function(e, obj) { e.diagram.commandHandler.deleteSelection(); },
function(o) { return o.diagram.commandHandler.canDeleteSelection(); }),
makeButton("Undo",
function(e, obj) { e.diagram.commandHandler.undo(); },
function(o) { return o.diagram.commandHandler.canUndo(); }),
makeButton("Redo",
function(e, obj) { e.diagram.commandHandler.redo(); },
function(o) { return o.diagram.commandHandler.canRedo(); }),
makeButton("Group",
function(e, obj) { e.diagram.commandHandler.groupSelection(); },
function(o) { return o.diagram.commandHandler.canGroupSelection(); }),
makeButton("Ungroup",
function(e, obj) { e.diagram.commandHandler.ungroupSelection(); },
function(o) { return o.diagram.commandHandler.canUngroupSelection(); })
);
function nodeInfo(d) {
var str = "Node " + d.key + ": " + d.text + "\n";
if (d.group)
str += "member of " + d.group;
else
str += "top-level node";
return str;
}
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{ locationSpot: go.Spot.Center },
$(go.Shape, "RoundedRectangle",
{
fill: "white",
portId: "", cursor: "pointer",
fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
},
new go.Binding("fill", "color")),
$(go.TextBlock,
{
font: "bold 14px sans-serif",
stroke: '#333',
margin: 6,
isMultiline: false,
editable: true
},
new go.Binding("text", "text").makeTwoWay()),
{
toolTip:
$("ToolTip",
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "", nodeInfo))
),
contextMenu: partContextMenu
}
);
function linkInfo(d) {
return "Link:\nfrom " + d.from + " to " + d.to;
}
myDiagram.linkTemplate =
$(go.Link,
{ toShortLength: 3, relinkableFrom: true, relinkableTo: true },
$(go.Shape,
{ strokeWidth: 2 },
new go.Binding("stroke", "color")),
$(go.Shape,
{ toArrow: "Standard", stroke: null },
new go.Binding("fill", "color")),
{
toolTip:
$("ToolTip",
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "", linkInfo))
),
contextMenu: partContextMenu
}
);
function groupInfo(adornment) {
var g = adornment.adornedPart;
var mems = g.memberParts.count;
var links = 0;
g.memberParts.each(function(part) {
if (part instanceof go.Link) links++;
});
return "Group " + g.data.key + ": " + g.data.text + "\n" + mems + " members including " + links + " links";
}
myDiagram.groupTemplate =
$(go.Group, "Vertical",
{
selectionObjectName: "PANEL",
ungroupable: true
},
$(go.TextBlock,
{
font: "bold 19px sans-serif",
isMultiline: false,
editable: true
},
new go.Binding("text", "text").makeTwoWay(),
new go.Binding("stroke", "color")),
$(go.Panel, "Auto",
{ name: "PANEL" },
$(go.Shape, "Rectangle",
{
fill: "rgba(128,128,128,0.2)", stroke: "gray", strokeWidth: 3,
portId: "", cursor: "pointer",
fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
}),
$(go.Placeholder, { margin: 10, background: "transparent" })
),
{
toolTip:
$("ToolTip",
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "", groupInfo).ofObject())
),
contextMenu: partContextMenu
}
);
function diagramInfo(model) {
return "Model:\n" + model.nodeDataArray.length + " nodes, " + model.linkDataArray.length + " links";
}
myDiagram.toolTip =
$("ToolTip",
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "", diagramInfo))
);
myDiagram.contextMenu =
$("ContextMenu",
makeButton("Paste",
function(e, obj) { e.diagram.commandHandler.pasteSelection(e.diagram.lastInput.documentPoint); },
function(o) { return o.diagram.commandHandler.canPasteSelection(); }),
makeButton("Undo",
function(e, obj) { e.diagram.commandHandler.undo(); },
function(o) { return o.diagram.commandHandler.canUndo(); }),
makeButton("Redo",
function(e, obj) { e.diagram.commandHandler.redo(); },
function(o) { return o.diagram.commandHandler.canRedo(); })
);
var nodeDataArray =[
{ "key":"1", "color":"transparent" ,"text": "AWS Gateway","group": "5", "img": "/assets/images/aws.png"},
{ "key":"2", "color":"transparent","text": "BackEnd","group": "5","img": "/assets/images/sql.png" },
{ "key":"3", "color":"transparent","text": "FrontEnd","img": "/assets/images/user.png" },
{ "key":"4", "color":"transparent","text": "Container N","img": "/assets/images/cloud.png" },
{ "key":"6", "color":"transparent","text": "AWS Fargate" ,"group": "8" },
{ "key":"7", "color":"transparent","text": "AWS RDS" ,"group": "8","img": "/assets/images/rds.png"},
{"key": "5", "text": "Private Subnet", "color": "grey", "isGroup": true },
{"key": "8", "text": "VPC Endpoint", "color": "grey", "isGroup": true }
];
var linkDataArray = [
{ "from":"1", "to":"2" },
{ "from":"2", "to":"3" },
{ "from":"1", "to":"3" },
{ "from":"4", "to":"3" },
{ "from":"3", "to":"1" },
{ "from":"6", "to":"2" },
{ "from":"7", "to":"4" }
];
myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
}
</script>
<div id="sample">
<div id="myDiagramDiv" style="border: solid 1px black; width:550px; height:400px"></div>
</div>
</body>
</html>
</panel>
</row>
</dashboard>