Added donut to visual console view
This commit is contained in:
parent
d35b420c36
commit
13f0d4c1f7
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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>";
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue