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 {