tyler.durden
/
pandorafms
mirror of https://github.com/pandorafms/pandorafms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
mdtrooper 2014-05-29 15:50:21 +00:00
parent abdf2be6a4
commit 9b123de8a3
4 changed files with 221 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
pandora_console/ChangeLog
View File

@ -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> 2014-05-29 Alejandro Gallardo <alejandro.gallardo@artica.es>
* include/functions_config.php: Fixed the permission * include/functions_config.php: Fixed the permission

2
pandora_console/include/graphs/functions_d3.php
View File

@ -60,7 +60,7 @@ function d3_tree_map_graph ($data, $width = 700, $height = 700, $return = false)
if (is_array($data)) if (is_array($data))
$data = json_encode($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 .= include_javascript_d3(true);
$output .= "<style type=\"text/css\"> $output .= "<style type=\"text/css\">
.cell>rect { .cell>rect {

413
pandora_console/include/graphs/pandora.d3.js
View File

@ -337,139 +337,149 @@ function treeMap(recipient, data, width, height) {
var nodes = treemap.nodes(root); var nodes = treemap.nodes(root);
var children = nodes.filter(function(d) { var children = nodes.filter(function(d) {
return !d.children; return !d.children;
}); });
var parents = nodes.filter(function(d) { var parents = nodes.filter(function(d) {
return d.children; return d.children;
}); });
// create parent cells // create parent cells
var parentCells = chart.selectAll("g.cell.parent") var parentCells = chart.selectAll("g.cell.parent")
.data(parents, function(d) { .data(parents, function(d) {
return d.id; return "p-" + d.name;
}); });
var parentEnterTransition = parentCells.enter() var parentEnterTransition = parentCells.enter()
.append("g") .append("g")
.attr("class", "cell parent") .attr("class", "cell parent")
.on("click", function(d) { .on("click", function(d) {
zoom(node === d ? root : d); zoom(d);
}); })
parentEnterTransition.append("rect") .append("svg")
.attr("width", function(d) { .attr("class", "clip")
return Math.max(0.01, d.dx); .attr("width", function(d) {
}) return Math.max(0.01, d.dx);
.attr("height", headerHeight) })
.style("fill", headerColor); .attr("height", headerHeight);
parentEnterTransition.append('foreignObject') parentEnterTransition.append("rect")
.attr("class", "foreignObject") .attr("width", function(d) {
.append("xhtml:div") return Math.max(0.01, d.dx);
.attr("class", "labelbody") })
.append("div") .attr("height", headerHeight)
.attr("class", "label"); .style("fill", headerColor);
// update transition parentEnterTransition.append('text')
var parentUpdateTransition = parentCells.transition().duration(transitionDuration); .attr("class", "label")
parentUpdateTransition.select(".cell") .attr("fill", "white")
.attr("transform", function(d) { .attr("transform", "translate(3, 13)")
return "translate(" + d.dx + "," + d.y + ")"; .attr("width", function(d) {
}); return Math.max(0.01, d.dx);
parentUpdateTransition.select("rect") })
.attr("width", function(d) { .attr("height", headerHeight)
return Math.max(0.01, d.dx); .text(function(d) {
}) return d.name;
.attr("height", headerHeight) });
.style("fill", headerColor); // update transition
parentUpdateTransition.select(".foreignObject") var parentUpdateTransition = parentCells.transition().duration(transitionDuration);
.attr("width", function(d) { parentUpdateTransition.select(".cell")
return Math.max(0.01, d.dx); .attr("transform", function(d) {
}) return "translate(" + d.dx + "," + d.y + ")";
.attr("height", headerHeight) });
.select(".labelbody .label") parentUpdateTransition.select("rect")
.text(function(d) { .attr("width", function(d) {
return d.name; return Math.max(0.01, d.dx);
}); })
// remove transition .attr("height", headerHeight)
parentCells.exit() .style("fill", headerColor);
.remove(); 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 // create children cells
var childrenCells = chart.selectAll("g.cell.child") var childrenCells = chart.selectAll("g.cell.child")
.data(children, function(d) { .data(children, function(d) {
return d.id; return "c-" + d.name;
}); });
// enter transition // enter transition
var childEnterTransition = childrenCells.enter() var childEnterTransition = childrenCells.enter()
.append("g") .append("g")
.attr("class", "cell child") .attr("class", "cell child")
.on("mouseover", over_user) .on("click", function(d) {
.on("mouseout", out_user) zoom(node === d.parent ? root : d.parent);
.on("mousemove", move_tooltip) })
.on("click", function(d) { .on("mouseover", over_user)
zoom(node === d.parent ? root : d.parent); .on("mouseout", out_user)
}); .on("mousemove", move_tooltip)
childEnterTransition.append("rect") .append("svg")
.classed("background", true) .attr("class", "clip");
.style("fill", function(d) { childEnterTransition.append("rect")
return color(d.name); .classed("background", true)
}); .style("fill", function(d) {
childEnterTransition.append('foreignObject') return color(d.parent.name);
.attr("class", "foreignObject") });
.attr("width", function(d) { childEnterTransition.append('text')
return Math.max(0.01, d.dx); .attr("class", "label")
}) .attr('x', function(d) {
.attr("height", function(d) { return d.dx / 2;
return Math.max(0.01, d.dy); })
}) .attr('y', function(d) {
.append("xhtml:div") return d.dy / 2;
.attr("class", "labelbody") })
.append("div") .attr("dy", ".35em")
.attr("class", "label") .attr("text-anchor", "middle")
.text(function(d) { .style("display", "none")
return d.name; .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) { // exit transition
childEnterTransition.selectAll(".foreignObject .labelbody .label") childrenCells.exit()
.style("display", "none"); .remove();
} else {
childEnterTransition.selectAll(".foreignObject")
.style("display", "none");
}
// update transition d3.select("select").on("change", function() {
var childUpdateTransition = childrenCells.transition().duration(transitionDuration); console.log("select zoom(node)");
childUpdateTransition.select(".cell") treemap.value(this.value == "size" ? size : count)
.attr("transform", function(d) { .nodes(root);
return "translate(" + d.x + "," + d.y + ")"; zoom(node);
}); });
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() { zoom(node);
treemap.value(this.value == "size" ? size : count)
.nodes(root);
zoom(node);
});
zoom(node);
function size(d) { function size(d) {
return d.size; 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); var bgDelta = (components.R * 0.299) + (components.G * 0.587) + (components.B * 0.114);
return ((255 - bgDelta) < nThreshold) ? "#000000" : "#ffffff"; return ((255 - bgDelta) < nThreshold) ? "#000000" : "#ffffff";
} }
function zoom(d) {
treemap
.padding([headerHeight / (chartHeight / d.dy), 0, 0, 0])
.nodes(d);
function zoom(d) { // moving the next two lines above treemap layout messes up padding of zoom result
treemap.padding([headerHeight/(chartHeight/d.dy), 0, 0, 0]).nodes(d); 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 xscale.domain([d.x, d.x + d.dx]);
var kx = chartWidth / d.dx; yscale.domain([d.y, d.y + d.dy]);
var ky = chartHeight / d.dy;
var level = d;
xscale.domain([d.x, d.x + d.dx]); if (node != level) {
yscale.domain([d.y, d.y + d.dy]); chart.selectAll(".cell.child .label")
.style("display", "none");
}
if (node != level) { var zoomTransition = chart.selectAll("g.cell").transition().duration(transitionDuration)
if (isIE) { .attr("transform", function(d) {
chart.selectAll(".cell.child .foreignObject .labelbody .label") return "translate(" + xscale(d.x) + "," + yscale(d.y) + ")";
.style("display", "none"); })
} else { .each("start", function() {
chart.selectAll(".cell.child .foreignObject") d3.select(this).select("label")
.style("display", "none"); .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) zoomTransition.select(".clip")
.attr("transform", function(d) { .attr("width", function(d) {
return "translate(" + xscale(d.x) + "," + yscale(d.y) + ")"; return Math.max(0.01, (kx * d.dx));
}) })
.each("end", function(d, i) { .attr("height", function(d) {
if (!i && (level !== self.root)) { return d.children ? headerHeight : Math.max(0.01, (ky * d.dy));
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));
});
if (isIE) { zoomTransition.select(".label")
chart.selectAll(".cell.child") .attr("width", function(d) {
.filter(function(d) { return Math.max(0.01, (kx * d.dx));
return d.parent === self.node; // only get the children for selected group })
}) .attr("height", function(d) {
.select(".foreignObject .labelbody .label") return d.children ? headerHeight : Math.max(0.01, (ky * d.dy));
.style("display", "") })
} else { .text(function(d) {
chart.selectAll(".cell.child") return d.name;
.filter(function(d) { });
return d.parent === self.node; // only get the children for selected group
})
.select(".foreignObject")
.style("display", "")
}
}
});
zoomTransition.select(".foreignObject") zoomTransition.select(".child .label")
.attr("width", function(d) { .attr("x", function(d) {
return Math.max(0.01, kx * d.dx); return kx * d.dx / 2;
}) })
.attr("height", function(d) { .attr("y", function(d) {
return d.children ? headerHeight: Math.max(0.01, ky * d.dy); return ky * d.dy / 2;
}) });
.select(".labelbody .label")
.text(function(d) {
return d.name;
});
// update the width/height of the rects zoomTransition.select("rect")
zoomTransition.select("rect") .attr("width", function(d) {
.attr("width", function(d) { return Math.max(0.01, (kx * d.dx));
return Math.max(0.01, kx * d.dx); })
}) .attr("height", function(d) {
.attr("height", function(d) { return d.children ? headerHeight : Math.max(0.01, (ky * d.dy));
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() { function position() {
this.style("left", function(d) { return d.x + "px"; }) this.style("left", function(d) { return d.x + "px"; })

2
pandora_console/operation/agentes/networkmap.dinamic.php
View File

@ -54,7 +54,7 @@ $zoom_default = file($config['homedir'] . '/images/zoom_default.svg');
//html_debug_print($graph); //html_debug_print($graph);
echo '<script type="text/javascript" src="' . $config['homeurl'] . 'include/javascript/d3.v3.js" charset="utf-8"></script>'; 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"> <style type="text/css">
#tooltip_networkmap { #tooltip_networkmap {