Issue #3507779: Graph - legend with total value

Closes #3507779

js/entity-mesh.js

@@ -27,6 +27,17 @@ function graphGenerate(data, settings) {
   links = data.links;
   types = data.types;
 
+  // Calculate the total number of nodes for each type:
+  const typesTotal = Object.values(
+    nodes.reduce((acc, item) => {
+      if (!acc[item.type]) {
+        acc[item.type] = { name: item.type, total: 0 };
+      }
+      acc[item.type].total += 1;
+      return acc;
+    }, {})
+  ).sort((a, b) => a.name.localeCompare(b.name));
+
   // Init Graph:
   let graph = document.querySelector(selector);
   let width = window.innerWidth - 100;
@@ -204,7 +215,7 @@ function graphGenerate(data, settings) {
     .attr("transform", "translate(20, 20)");
 
   let legendItems = legend.selectAll(".legend-item")
-    .data(types)
+    .data(typesTotal)
     .enter()
     .append("g")
     .attr("x", 20)
@@ -215,19 +226,20 @@ function graphGenerate(data, settings) {
   legendItems.append("rect")
     .attr("width", 10)
     .attr("height", 10)
-    .style("fill", d => color(d));
+    .style("fill", d => color(d.name));
 
   legendItems.append("text")
     .attr("x", 20)
     .attr("y", 10)
-    .text(d => d)
+    .text(d => d.name + " ("  + d.total + ")")
     .on('click', toggleLegends);
 
   function toggleLegends(event, clickedLegend) {
 
-    const index = filterTypes.indexOf(clickedLegend);
+    const index = filterTypes.indexOf(clickedLegend.name);
+
     if (index === -1) {
-      filterTypes.push(clickedLegend);
+      filterTypes.push(clickedLegend.name);
       d3.select(event.currentTarget).classed('selected', true);
 
     } else {