tyler.durden/pandorafms
1
0
Fork 0
mirror of https://github.com/pandorafms/pandorafms.git synced 2025-09-26 03:19:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

Added donut to visual console view

Browse Source
This commit is contained in:
Arturo Gonzalez 2017-10-17 16:50:00 +02:00
parent d35b420c36
commit 13f0d4c1f7
3 changed files with 91 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
pandora_console/include/functions_visual_map.php
View File

@ -1163,7 +1163,7 @@ function visual_map_print_item($mode = "read", $layoutData,
} }
else { else {
if ($width == 0 || $height == 0) { if ($width == 0 || $height == 0) {
$img = d3_donut_graph ($layoutData['id'], 200, 400, $donut_data); $img = d3_donut_graph ($layoutData['id'], 200, 300, $donut_data);
} }
else{ else{
$img = d3_donut_graph ($layoutData['id'], $width, $height, $donut_data); $img = d3_donut_graph ($layoutData['id'], $width, $height, $donut_data);
@ -1633,7 +1633,6 @@ function visual_map_print_item($mode = "read", $layoutData,
} }
break; break;
case DONUT_GRAPH: case DONUT_GRAPH:
html_debug($img, true);
echo $img; echo $img;
break; break;
case SIMPLE_VALUE: case SIMPLE_VALUE:
@ -1792,16 +1791,41 @@ function get_donut_module_data ($id_module) {
$values = explode(";", $mod_values); $values = explode(";", $mod_values);
$colors = array();
$colors[] = "#aa3333";
$colors[] = "#045FB4";
$colors[] = "#8181F7";
$colors[] = "#F78181";
$colors[] = "#D0A9F5";
$colors[] = "#BDBDBD";
$colors[] = "#6AB277";
$values_to_return = array(); $values_to_return = array();
$index = 0; $index = 0;
$total = 0; $total = 0;
$max_elements = 6;
foreach ($values as $val) { foreach ($values as $val) {
$data = explode(":", $val); if ($index < $max_elements) {
$values_to_return[$index]['tag'] = $data[0]; $data = explode(":", $val);
$values_to_return[$index]['value'] = $data[1]; $values_to_return[$index]['tag_name'] = $data[0];
$index++; $values_to_return[$index]['color'] = $colors[$index];
$values_to_return[$index]['value'] = (int)$data[1];
$total += (int)$data[1];
$index++;
}
else {
$data = explode(":", $val);
$values_to_return[$index]['tag_name'] = __('Others');
$values_to_return[$index]['color'] = $colors[$index];
$values_to_return[$index]['value'] += (int)$data[1];
$total += (int)$data[1];
}
}
foreach ($values_to_return as $ind => $donut_data) {
$values_to_return[$ind]['percent'] = ($donut_data['value'] * 100) / $total;
} }
$values_to_return['total'] = count($values_to_return);
return $values_to_return; return $values_to_return;
} }

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

@ -1495,50 +1495,80 @@ function print_phases_donut (recipient, phases) {
} }
function print_donut_graph (recipient, width, height, module_data) { function print_donut_graph (recipient, width, height, module_data) {
console.log(module_data);
var svg = d3.select(recipient) var svg = d3.select(recipient)
.append("svg") .append("svg")
.attr("width", width) .attr("width", width)
.attr("height", height) .attr("height", height)
.append("g"); .append("g");
var radius = Math.min(width, height) / 2; svg.append("g")
.attr("class", "slices");
var radius = 100;
var arc = d3.svg.arc()
.outerRadius(radius * 0.8)
.innerRadius(radius * 0.4);
var key = function(d){ return d.data.label; };
var pie = d3.layout.pie() var pie = d3.layout.pie()
.sort(null) .sort(null)
.value(function(d) { .value(function(d) {
return parseFloat(d.label2); return parseFloat(d.percent);
}); });
svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); var increment_y = 0;
jQuery.each(module_data, function (key, m_d) {
svg.append("g")
.append("text")
.append("tspan")
.attr("dy", increment_y + ".8em")
.attr("dx", ".1em")
.text(m_d.tag_name + ", ")
.style("font-family", "Verdana")
.style("font-size", "15px")
.append("tspan")
.attr("dx", ".2em")
.text(m_d.value)
.style("font-family", "Verdana")
.style("font-size", "15px");
var slice = svg.select(".slices").selectAll("path.slice") increment_y += 1;
.data(module_data); });
slice.enter() function donutData (){
.insert("path") return module_data.map(function(m_data){
.style("fill", function(d) { return { label: m_data.tag_name, value: m_data.value , percent: m_data.percent, color : m_data.color}
if (d.data.value == 0) { });
return "#80BA27"; }
}
else {
return "#FC4444";
}
})
.attr("class", "slice");
slice.transition() print_phases(donutData());
.duration(0)
.attrTween("d", function(d) {
this._current = this._current || d;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t) {
return arc(interpolate(t));
};
});
slice.exit().remove(); function print_phases(data) {
var slice = svg.select(".slices").selectAll("path.slice")
.data(pie(data), key);
slice.enter()
.insert("path")
.style("fill", function(d) {
console.log(d);
return d.data.color;
})
.attr("class", "slice")
.attr("transform", "translate(" + width / 2 + "," + (height - radius) + ")");
slice.transition()
.duration(0)
.attrTween("d", function(d) {
this._current = this._current || d;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t) {
return arc(interpolate(t));
};
});
slice.exit().remove();
}
} }