A Panel showing the summary of the map

GoJS
1

Hi,

We need to show the summary of the Map like the number of Nodes(Different types of Nodes), Links and other details in the map.

Could you suggest if there is any right way of doing it?

Thanks
Mithun

2

First, please read GoJS Legends and Titles -- Northwoods Software to see what some of the possibilities are.

Second, I assume you want to update this “legend” panel as the model changes. You can implement a Model Changed listener to keep your legend up-to-date. If you don’t want to store that summary information in your model, then maybe something like:

myDiagram.addModelChangedListener(function(e) {
  if (e.isTransactionFinished) {
    // count up the number of types of nodes
    var summary = . . .;
    e.diagram.nodes.each(function(n) {
      // look at n.category or n.data and update the summary
    });
    // get the legend somehow, either a reference that you kept in a global
    // or by calling Diagram.findPartForKey, or ???
    var legend = . . .;
    // update legend's TextBlocks
  }
});

https://gojs.net/latest/intro/changedEvents.html

Alternatively, if you do want to store the summary information in your model, then you could do so as properties of the Model.modelData object and use Binding.ofModel bindings in your legend node template. Something like:

myDiagram.addModelChangedListener(function(e) {
  if (e.isTransactionFinished) {
    // count up the number of types of nodes
    var summary = e.model.modelData;
    e.diagram.nodes.each(function(n) {
      // look at n.category or n.data and update the summary
      // by calling Model.set
    });
  }
});

myDiagram.nodeTemplateMap.add("Legend",
  $(go.Part, . . .,
    . . .
      $(go.TextBlock, new go.Binding("text", "totalReds").ofModel(),
    . . .
      $(go.TextBlock, new go.Binding("text", "totalGreens").ofModel(),
    . . .
      $(go.TextBlock, new go.Binding("text", "totalBlues").ofModel(),
    . . .
  ));

and in your Model.nodeDataArray you would have an instance of:

{
  category: "Legend",
  totalReds: 0,
  totalGreens: 0,
  totalBlues: 0
}

And probably with other properties too.