Hi team,
I need to create a node template to look like this.
also want to implement the expand & collapse functionality with lazy data loading on the expansion of node
Not able to implement as shown in the image.
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{
locationSpot: go.Spot.Top,
isShadowed: true, shadowBlur: 1,
shadowOffset: new go.Point(0, 1),
shadowColor: "rgba(0, 0, 0, .14)",
locationObjectName: "BODY",
click: showNodeDetailView,
selectionAdornmentTemplate: // selection adornment to match shape of nodes
$(go.Adornment, "Auto",
$(go.Shape, "RoundedRectangle", roundedRectangleParams,
{ fill: null, stroke: "#7986cb", strokeWidth: 3 }
),
$(go.Placeholder)
) // end Adornment
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, "RoundedRectangle", roundedRectangleParams,
{ name: "SHAPE", fill: "#ffffff", strokeWidth: 2.5 },
// gold if highlighted, white otherwise
//new go.Binding("fill", "isHighlighted", function (h) { return h ? "gold" : "#ffffff"; }).ofObject()
new go.Binding("stroke", "highlight", function (h) {
return h ? "red" : "lightblue";
}),
new go.Binding("opacity").makeTwoWay(),
new go.Binding("stroke", "actionType", function (key) { return key === "Activity" || key === "RecordCreation" ? "lightblue" : "orange" }),
),
$(go.Panel, "Vertical",
$(go.Panel, "Horizontal",
{ margin: 8 },
$(go.Picture, // flag image, only visible if a nation is specified
{ margin: mr8, visible: false, desiredSize: new go.Size(50, 50) },
new go.Binding("source", "text", theNationFlagConverter),
new go.Binding("visible", "text", function (nat) { return nat !== undefined; })
),
$(go.Panel, "Table",
$(go.TextBlock,
{
row: 0, alignment: go.Spot.Left,
font: "bold small-caps 11pt helvetica, bold arial, sans-serif",
stroke: "rgba(0, 0, 0, .87)",
maxSize: new go.Size(300, NaN)
},
new go.Binding("opacity").makeTwoWay(),
new go.Binding("text", "text")
),
$(go.TextBlock, textStyle("title"),
{
row: 1, alignment: go.Spot.Left,
maxSize: new go.Size(300, NaN)
},
new go.Binding("text", "text")
),
$("PanelExpanderButton", "INFO",
{ row: 0, column: 2, rowSpan: 2, margin: ml8 }
)
)
),
$(go.Shape, "LineH",
{
stroke: "rgba(0, 0, 0, .60)", strokeWidth: 1,
height: 1, stretch: go.GraphObject.Horizontal
},
new go.Binding("visible").ofObject("INFO") // only visible when info is expanded
),
$(go.Panel, "Vertical",
{
name: "INFO", // identify to the PanelExpanderButton
// visible: false, //to set collapse as default
stretch: go.GraphObject.Horizontal, // take up whole available width
margin: 8,
defaultAlignment: go.Spot.Left, // thus no need to specify alignment on each element
},
$(go.TextBlock, textStyle("headOf"),
new go.Binding("text", "headOf", function (head) { return "Head of: " + head; })
),
$(go.TextBlock, textStyle("text"),
{
font: "12pt helvetica, arial, sans-serif",
stroke: "rgba(0, 1, 0, .87)",
},
new go.Binding("margin", "headOf", function (head) { return mt8; }), // some space above if there is also a headOf value
//new go.Binding("text", "text", function (boss) {
// var boss = myDiagram.model.findNodeDataForKey(boss);
// if (boss !== null) {
// return "Reporting to: " + boss.text;
// }
// return "";
//})
new go.Binding("text", "nodeWeight", function (nodeWeight, curre) {
debugger
let panelData = `${dataFactory.currentVariantType} Count : ${nFormatter(parseInt(nodeWeight), nodeWeight.toString().length)}\n
Frequency Rework
Total Count: 12 Self Loop Count: 10
Case count: 2 Loop Count: 20
Case count (%) : 50
`;
return panelData;
}).makeTwoWay()
)
)
)
);