From 7881959d9e7eced93563b67333c2920d85212788 Mon Sep 17 00:00:00 2001
From: jorgetutor <jorge.tutor@metadrop.net>
Date: Wed, 19 Feb 2025 15:53:30 +0100
Subject: [PATCH] Issue #3507779: Graph - legend with total value
---
js/entity-mesh.js | 22 +++++++++++++++++-----
1 file changed, 17 insertions(+), 5 deletions(-)
diff --git a/js/entity-mesh.js b/js/entity-mesh.js
index b10029f..b3d486b 100644
--- a/js/entity-mesh.js
+++ b/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 {
--
GitLab