Added donut to visual console view

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

View File

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

View File

@ -326,7 +326,7 @@ function d3_donut_graph ($id, $width, $height, $module_data) {
fill-rule: evenodd;
}
</style>";
$output .= "<script language=\"javascript\" type=\"text/javascript\">
print_donut_graph('" . $recipient_name_to_js . "', " . $width . ", " . $height . ", " . $module_data . ");
</script>";

View File

@ -1495,50 +1495,80 @@ function print_phases_donut (recipient, phases) {
}
function print_donut_graph (recipient, width, height, module_data) {
console.log(module_data);
var svg = d3.select(recipient)
.append("svg")
.attr("width", width)
.attr("height", height)
.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()
.sort(null)
.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");
increment_y += 1;
});
var slice = svg.select(".slices").selectAll("path.slice")
.data(module_data);
function donutData (){
return module_data.map(function(m_data){
return { label: m_data.tag_name, value: m_data.value , percent: m_data.percent, color : m_data.color}
});
}
slice.enter()
.insert("path")
.style("fill", function(d) {
if (d.data.value == 0) {
return "#80BA27";
}
else {
return "#FC4444";
}
})
.attr("class", "slice");
print_phases(donutData());
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));
};
});
function print_phases(data) {
var slice = svg.select(".slices").selectAll("path.slice")
.data(pie(data), key);
slice.exit().remove();
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();
}
}