From 9b123de8a34f561c29260b142133f72c8490a0ff Mon Sep 17 00:00:00 2001
From: mdtrooper <tres.14159@gmail.com>
Date: Thu, 29 May 2014 15:50:21 +0000
Subject: [PATCH] 2014-05-29  Miguel de Dios <miguel.dedios@artica.es>

	* include/graphs/pandora.d3.js, include/graphs/functions_d3.php,
	operation/agentes/networkmap.dinamic.php: fixed the css for the
	m$-internet exploter 11. Please Bill Gates travels to Leon.




git-svn-id: https://svn.code.sf.net/p/pandora/code/trunk@10040 c3f86ba8-e40f-0410-aaad-9ba5e7f4b01f
---
 pandora_console/ChangeLog                     |   6 +
 .../include/graphs/functions_d3.php           |   2 +-
 pandora_console/include/graphs/pandora.d3.js  | 413 +++++++++---------
 .../operation/agentes/networkmap.dinamic.php  |   2 +-
 4 files changed, 221 insertions(+), 202 deletions(-)

diff --git a/pandora_console/ChangeLog b/pandora_console/ChangeLog
index 244719a12e..0f960dd602 100644
--- a/pandora_console/ChangeLog
+++ b/pandora_console/ChangeLog
@@ -1,3 +1,9 @@
+2014-05-29  Miguel de Dios <miguel.dedios@artica.es>
+	
+	* include/graphs/pandora.d3.js, include/graphs/functions_d3.php,
+	operation/agentes/networkmap.dinamic.php: fixed the css for the
+	m$-internet exploter 11. Please Bill Gates travels to Leon.
+
 2014-05-29  Alejandro Gallardo <alejandro.gallardo@artica.es>
 	
 	* include/functions_config.php: Fixed the permission
diff --git a/pandora_console/include/graphs/functions_d3.php b/pandora_console/include/graphs/functions_d3.php
index b43158981d..6288b1b987 100644
--- a/pandora_console/include/graphs/functions_d3.php
+++ b/pandora_console/include/graphs/functions_d3.php
@@ -60,7 +60,7 @@ function d3_tree_map_graph ($data, $width = 700, $height = 700, $return = false)
 	if (is_array($data))
 		$data = json_encode($data);
 	
-	$output = "<div id=\"tree_map\"></div>";
+	$output = "<div id=\"tree_map\" style='overflow: hidden;'></div>";
 	$output .= include_javascript_d3(true);
 	$output .= "<style type=\"text/css\">
 					.cell>rect {
diff --git a/pandora_console/include/graphs/pandora.d3.js b/pandora_console/include/graphs/pandora.d3.js
index 8671a387dd..f70402f60d 100644
--- a/pandora_console/include/graphs/pandora.d3.js
+++ b/pandora_console/include/graphs/pandora.d3.js
@@ -337,139 +337,149 @@ function treeMap(recipient, data, width, height) {
 	var nodes = treemap.nodes(root);
 
 	var children = nodes.filter(function(d) {
-		return !d.children;
-	});
-	var parents = nodes.filter(function(d) {
-		return d.children;
-	});
+            return !d.children;
+        });
+        var parents = nodes.filter(function(d) {
+            return d.children;
+        });
 
-	// create parent cells
-	var parentCells = chart.selectAll("g.cell.parent")
-		.data(parents, function(d) {
-			return d.id;
-		});
-	var parentEnterTransition = parentCells.enter()
-		.append("g")
-		.attr("class", "cell parent")
-		.on("click", function(d) {
-			zoom(node === d ? root : d);
-		});
-	parentEnterTransition.append("rect")
-		.attr("width", function(d) {
-			return Math.max(0.01, d.dx);
-		})
-		.attr("height", headerHeight)
-		.style("fill", headerColor);
-	parentEnterTransition.append('foreignObject')
-		.attr("class", "foreignObject")
-		.append("xhtml:div")
-		.attr("class", "labelbody")
-		.append("div")
-		.attr("class", "label");
-	// update transition
-	var parentUpdateTransition = parentCells.transition().duration(transitionDuration);
-	parentUpdateTransition.select(".cell")
-		.attr("transform", function(d) {
-			return "translate(" + d.dx + "," + d.y + ")";
-		});
-	parentUpdateTransition.select("rect")
-		.attr("width", function(d) {
-			return Math.max(0.01, d.dx);
-		})
-		.attr("height", headerHeight)
-		.style("fill", headerColor);
-	parentUpdateTransition.select(".foreignObject")
-		.attr("width", function(d) {
-			return Math.max(0.01, d.dx);
-		})
-		.attr("height", headerHeight)
-		.select(".labelbody .label")
-		.text(function(d) {
-			return d.name;
-		});
-	// remove transition
-	parentCells.exit()
-		.remove();
+        // create parent cells
+        var parentCells = chart.selectAll("g.cell.parent")
+            .data(parents, function(d) {
+                return "p-" + d.name;
+            });
+        var parentEnterTransition = parentCells.enter()
+            .append("g")
+            .attr("class", "cell parent")
+            .on("click", function(d) {
+                zoom(d);
+            })
+            .append("svg")
+            .attr("class", "clip")
+            .attr("width", function(d) {
+                return Math.max(0.01, d.dx);
+            })
+            .attr("height", headerHeight);
+        parentEnterTransition.append("rect")
+            .attr("width", function(d) {
+                return Math.max(0.01, d.dx);
+            })
+            .attr("height", headerHeight)
+            .style("fill", headerColor);
+        parentEnterTransition.append('text')
+            .attr("class", "label")
+            .attr("fill", "white")
+            .attr("transform", "translate(3, 13)")
+            .attr("width", function(d) {
+                return Math.max(0.01, d.dx);
+            })
+            .attr("height", headerHeight)
+            .text(function(d) {
+                return d.name;
+            });
+        // update transition
+        var parentUpdateTransition = parentCells.transition().duration(transitionDuration);
+        parentUpdateTransition.select(".cell")
+            .attr("transform", function(d) {
+                return "translate(" + d.dx + "," + d.y + ")";
+            });
+        parentUpdateTransition.select("rect")
+            .attr("width", function(d) {
+                return Math.max(0.01, d.dx);
+            })
+            .attr("height", headerHeight)
+            .style("fill", headerColor);
+        parentUpdateTransition.select(".label")
+            .attr("transform", "translate(3, 13)")
+            .attr("width", function(d) {
+                return Math.max(0.01, d.dx);
+            })
+            .attr("height", headerHeight)
+            .text(function(d) {
+                return d.name;
+            });
+        // remove transition
+        parentCells.exit()
+            .remove();
 
-	// create children cells
-	var childrenCells = chart.selectAll("g.cell.child")
-		.data(children, function(d) {
-			return d.id;
-		});
-	// enter transition
-	var childEnterTransition = childrenCells.enter()
-		.append("g")
-		.attr("class", "cell child")
-		.on("mouseover", over_user)
-		.on("mouseout", out_user)
-		.on("mousemove", move_tooltip)
-		.on("click", function(d) {
-			zoom(node === d.parent ? root : d.parent);
-		});
-	childEnterTransition.append("rect")
-		.classed("background", true)
-		.style("fill", function(d) {
-			return color(d.name);
-		});
-	childEnterTransition.append('foreignObject')
-		.attr("class", "foreignObject")
-		.attr("width", function(d) {
-			return Math.max(0.01, d.dx);
-		})
-		.attr("height", function(d) {
-			return Math.max(0.01, d.dy);
-		})
-		.append("xhtml:div")
-		.attr("class", "labelbody")
-		.append("div")
-		.attr("class", "label")
-		.text(function(d) {
-			return d.name;
-		});
+        // create children cells
+        var childrenCells = chart.selectAll("g.cell.child")
+            .data(children, function(d) {
+                return "c-" + d.name;
+            });
+        // enter transition
+        var childEnterTransition = childrenCells.enter()
+            .append("g")
+            .attr("class", "cell child")
+            .on("click", function(d) {
+                zoom(node === d.parent ? root : d.parent);
+            })
+            .on("mouseover", over_user)
+			.on("mouseout", out_user)
+			.on("mousemove", move_tooltip)
+            .append("svg")
+            .attr("class", "clip");
+        childEnterTransition.append("rect")
+            .classed("background", true)
+            .style("fill", function(d) {
+                return color(d.parent.name);
+            });
+        childEnterTransition.append('text')
+            .attr("class", "label")
+            .attr('x', function(d) {
+                return d.dx / 2;
+            })
+            .attr('y', function(d) {
+                return d.dy / 2;
+            })
+            .attr("dy", ".35em")
+            .attr("text-anchor", "middle")
+            .style("display", "none")
+            .text(function(d) {
+                return d.name;
+            });
+        // update transition
+        var childUpdateTransition = childrenCells.transition().duration(transitionDuration);
+        childUpdateTransition.select(".cell")
+            .attr("transform", function(d) {
+                return "translate(" + d.x + "," + d.y + ")";
+            });
+        childUpdateTransition.select("rect")
+            .attr("width", function(d) {
+                return Math.max(0.01, d.dx);
+            })
+            .attr("height", function(d) {
+                return d.dy;
+            })
+            .style("fill", function(d) {
+                return color(d.parent.name);
+            });
+        childUpdateTransition.select(".label")
+            .attr('x', function(d) {
+                return d.dx / 2;
+            })
+            .attr('y', function(d) {
+                return d.dy / 2;
+            })
+            .attr("dy", ".35em")
+            .attr("text-anchor", "middle")
+            .style("display", "none")
+            .text(function(d) {
+                return d.name;
+            });
 
-	if (isIE) {
-		childEnterTransition.selectAll(".foreignObject .labelbody .label")
-			.style("display", "none");
-	} else {
-		childEnterTransition.selectAll(".foreignObject")
-			.style("display", "none");
-	}
+        // exit transition
+        childrenCells.exit()
+            .remove();
 
-	// update transition
-	var childUpdateTransition = childrenCells.transition().duration(transitionDuration);
-	childUpdateTransition.select(".cell")
-		.attr("transform", function(d) {
-			return "translate(" + d.x  + "," + d.y + ")";
-		});
-	childUpdateTransition.select("rect")
-		.attr("width", function(d) {
-			return Math.max(0.01, d.dx);
-		})
-		.attr("height", function(d) {
-			return d.dy;
-		});
-	childUpdateTransition.select(".foreignObject")
-		.attr("width", function(d) {
-			return Math.max(0.01, d.dx);
-		})
-		.attr("height", function(d) {
-			return Math.max(0.01, d.dy);
-		})
-		.select(".labelbody .label")
-		.text(function(d) {
-			return d.name;
-		});
-	// exit transition
-	childrenCells.exit()
-		.remove();
+        d3.select("select").on("change", function() {
+            console.log("select zoom(node)");
+            treemap.value(this.value == "size" ? size : count)
+                .nodes(root);
+            zoom(node);
+        });
 
-	d3.select("select").on("change", function() {
-		treemap.value(this.value == "size" ? size : count)
-			.nodes(root);
-		zoom(node);
-	});
-
-	zoom(node);
+        zoom(node);
 
 	function size(d) {
 		return d.size;
@@ -503,88 +513,91 @@ function treeMap(recipient, data, width, height) {
 		var bgDelta = (components.R * 0.299) + (components.G * 0.587) + (components.B * 0.114);
 		return ((255 - bgDelta) < nThreshold) ? "#000000" : "#ffffff";
 	}
+function zoom(d) {
+        treemap
+            .padding([headerHeight / (chartHeight / d.dy), 0, 0, 0])
+            .nodes(d);
 
-	function zoom(d) {
-		treemap.padding([headerHeight/(chartHeight/d.dy), 0, 0, 0]).nodes(d);
+        // moving the next two lines above treemap layout messes up padding of zoom result
+        var kx = chartWidth / d.dx;
+        var ky = chartHeight / d.dy;
+        var level = d;
 
-		// moving the next two lines above treemap layout messes up padding of zoom result
-		var kx = chartWidth  / d.dx;
-		var ky = chartHeight / d.dy;
-		var level = d;
+        xscale.domain([d.x, d.x + d.dx]);
+        yscale.domain([d.y, d.y + d.dy]);
 
-		xscale.domain([d.x, d.x + d.dx]);
-		yscale.domain([d.y, d.y + d.dy]);
+        if (node != level) {
+            chart.selectAll(".cell.child .label")
+                .style("display", "none");
+        }
 
-		if (node != level) {
-			if (isIE) {
-				chart.selectAll(".cell.child .foreignObject .labelbody .label")
-					.style("display", "none");
-			} else {
-				chart.selectAll(".cell.child .foreignObject")
-					.style("display", "none");
-			}
-		}
+        var zoomTransition = chart.selectAll("g.cell").transition().duration(transitionDuration)
+            .attr("transform", function(d) {
+                return "translate(" + xscale(d.x) + "," + yscale(d.y) + ")";
+            })
+            .each("start", function() {
+                d3.select(this).select("label")
+                    .style("display", "none");
+            })
+            .each("end", function(d, i) {
+                if (!i && (level !== self.root)) {
+                    chart.selectAll(".cell.child")
+                        .filter(function(d) {
+                            return d.parent === self.node; // only get the children for selected group
+                        })
+                        .select(".label")
+                        .style("display", "")
+                        .style("fill", function(d) {
+                            return idealTextColor(color(d.parent.name));
+                        });
+                }
+            });
 
-		var zoomTransition = chart.selectAll("g.cell").transition().duration(transitionDuration)
-			.attr("transform", function(d) {
-				return "translate(" + xscale(d.x) + "," + yscale(d.y) + ")";
-			})
-			.each("end", function(d, i) {
-				if (!i && (level !== self.root)) {
-					chart.selectAll(".cell.child")
-						.filter(function(d) {
-							return d.parent === self.node; // only get the children for selected group
-						})
-						.select(".foreignObject .labelbody .label")
-						.style("color", function(d) {
-							return idealTextColor(color(d.parent.name));
-						});
+        zoomTransition.select(".clip")
+            .attr("width", function(d) {
+                return Math.max(0.01, (kx * d.dx));
+            })
+            .attr("height", function(d) {
+                return d.children ? headerHeight : Math.max(0.01, (ky * d.dy));
+            });
 
-					if (isIE) {
-						chart.selectAll(".cell.child")
-							.filter(function(d) {
-								return d.parent === self.node; // only get the children for selected group
-							})
-							.select(".foreignObject .labelbody .label")
-							.style("display", "")
-					} else {
-						chart.selectAll(".cell.child")
-							.filter(function(d) {
-								return d.parent === self.node; // only get the children for selected group
-							})
-							.select(".foreignObject")
-							.style("display", "")
-					}
-				}
-			});
+        zoomTransition.select(".label")
+            .attr("width", function(d) {
+                return Math.max(0.01, (kx * d.dx));
+            })
+            .attr("height", function(d) {
+                return d.children ? headerHeight : Math.max(0.01, (ky * d.dy));
+            })
+            .text(function(d) {
+                return d.name;
+            });
 
-		zoomTransition.select(".foreignObject")
-			.attr("width", function(d) {
-				return Math.max(0.01, kx * d.dx);
-			})
-			.attr("height", function(d) {
-				return d.children ? headerHeight: Math.max(0.01, ky * d.dy);
-			})
-			.select(".labelbody .label")
-			.text(function(d) {
-				return d.name;
-			});
+        zoomTransition.select(".child .label")
+            .attr("x", function(d) {
+                return kx * d.dx / 2;
+            })
+            .attr("y", function(d) {
+                return ky * d.dy / 2;
+            });
 
-		// update the width/height of the rects
-		zoomTransition.select("rect")
-			.attr("width", function(d) {
-				return Math.max(0.01, kx * d.dx);
-			})
-			.attr("height", function(d) {
-				return d.children ? headerHeight : Math.max(0.01, ky * d.dy);
-			});
+        zoomTransition.select("rect")
+            .attr("width", function(d) {
+                return Math.max(0.01, (kx * d.dx));
+            })
+            .attr("height", function(d) {
+                return d.children ? headerHeight : Math.max(0.01, (ky * d.dy));
+            })
+            .style("fill", function(d) {
+                return d.children ? headerColor : color(d.parent.name);
+            });
 
-		node = d;
+        node = d;
+
+        if (d3.event) {
+            d3.event.stopPropagation();
+        }
+    }
 
-		if (d3.event) {
-			d3.event.preventDefault();
-		}
-	}
 
 	function position() {
 		this.style("left", function(d) { return d.x + "px"; })
diff --git a/pandora_console/operation/agentes/networkmap.dinamic.php b/pandora_console/operation/agentes/networkmap.dinamic.php
index d8b3ca1c49..6896434987 100755
--- a/pandora_console/operation/agentes/networkmap.dinamic.php
+++ b/pandora_console/operation/agentes/networkmap.dinamic.php
@@ -54,7 +54,7 @@ $zoom_default = file($config['homedir'] . '/images/zoom_default.svg');
 
 //html_debug_print($graph);
 echo '<script type="text/javascript" src="' . $config['homeurl'] . 'include/javascript/d3.v3.js" charset="utf-8"></script>';
-echo '<div id="dinamic_networkmap"></div>';
+echo '<div id="dinamic_networkmap" style="overflow: hidden;"></div>';
 ?>
 <style type="text/css">
 	#tooltip_networkmap {