Added visual changes to donut graph

This commit is contained in:
Arturo Gonzalez 2017-11-13 12:54:28 +01:00
parent 3493b9c15c
commit 833983e34e
2 changed files with 61 additions and 26 deletions

View File

@ -1392,7 +1392,7 @@ function visual_map_print_item($mode = "read", $layoutData,
}
else {
if ($width == 0) {
$img = d3_donut_graph ($layoutData['id'], 400, 400, $donut_data, $layoutData['border_color']);
$img = d3_donut_graph ($layoutData['id'], 300, 300, $donut_data, $layoutData['border_color']);
}
else{
$img = d3_donut_graph ($layoutData['id'], $width, $width, $donut_data, $layoutData['border_color']);
@ -2540,15 +2540,21 @@ function get_donut_module_data ($id_module) {
foreach ($values as $val) {
if ($index < $max_elements) {
$data = explode(",", $val);
$values_to_return[$index]['tag_name'] = $data[0] . ", " . $data[1];
if ($data[1] == 0) {
$data[1] = __('No data');
}
$values_to_return[$index]['tag_name'] = $data[0] . ": " . $data[1];
$values_to_return[$index]['color'] = $colors[$index];
$values_to_return[$index]['value'] = (int)$data[1];
$total += (int)$data[1];
$index++;
}
else {
if ($data[1] == 0) {
$data[1] = __('No data');
}
$data = explode(",", $val);
$values_to_return[$index]['tag_name'] = __('Others') . ", " . $data[1];
$values_to_return[$index]['tag_name'] = __('Others') . ": " . $data[1];
$values_to_return[$index]['color'] = $colors[$index];
$values_to_return[$index]['value'] += (int)$data[1];
$total += (int)$data[1];
@ -2558,7 +2564,34 @@ function get_donut_module_data ($id_module) {
foreach ($values_to_return as $ind => $donut_data) {
$values_to_return[$ind]['percent'] = ($donut_data['value'] * 100) / $total;
}
$new_values_to_return = array();
while (!empty($values_to_return)) {
$first = true;
$max_elem = 0;
$max_elem_array = array();
$index_to_del = 0;
foreach ($values_to_return as $i => $val) {
if ($first) {
$max_elem = $val['value'];
$max_elem_array = $val;
$index_to_del = $i;
$first = false;
}
else {
if ($val['value'] > $max_elem) {
$max_elem = $val['value'];
$max_elem_array = $val;
$index_to_del = $i;
}
}
}
$new_values_to_return[] = $max_elem_array;
unset($values_to_return[$index_to_del]);
}
$values_to_return = $new_values_to_return;
return $values_to_return;
}

View File

@ -1985,47 +1985,40 @@ function print_donut_graph (recipient, width, height, module_data, resume_color)
var radius = 120;
var increment_y = 60;
var increment_y_padding = 25;
var text_size = 15;
var decrement_x_padding = 150;
if (width >= 500) {
radius = 160;
radius = 180;
increment_y = 60;
text_size = 25;
increment_y_padding = 25;
decrement_x_padding = 75;
increment_y_padding = 20;
decrement_x_padding = 40;
}
else if (width >= 400) {
radius = 120;
increment_y = 60;
text_size = 22;
increment_y_padding = 25;
decrement_x_padding = 75;
radius = 140;
increment_y = 40;
increment_y_padding = 20;
decrement_x_padding = 40;
}
else if (width >= 300) {
radius = 80;
radius = 100;
increment_y = 40;
text_size = 14;
increment_y_padding = 20;
decrement_x_padding = 60;
increment_y_padding = 15;
decrement_x_padding = 40;
}
else if (width >= 200) {
radius = 50;
increment_y = 40;
text_size = 14;
increment_y_padding = 15;
decrement_x_padding = 45;
decrement_x_padding = 25;
}
else if (width >= 100) {
radius = 20;
increment_y = 20;
text_size = 10;
increment_y_padding = 8;
decrement_x_padding = 25;
}
else {
radius = 10;
increment_y = 10;
text_size = 4;
increment_y_padding = 3;
decrement_x_padding = 5;
}
@ -2041,15 +2034,24 @@ function print_donut_graph (recipient, width, height, module_data, resume_color)
.value(function(d) {
return parseFloat(d.percent);
});
console.log(resume_color);
jQuery.each(module_data, function (key, m_d) {
svg.append("g")
.append("rect")
.attr("transform", "translate(" + (((width / 2) - (radius + decrement_x_padding))) + "," + (((height / 2) - radius) - increment_y) + ")")
.attr('fill', m_d.color)
.attr('x', -20)
.attr('y', -10)
.attr('width', 20)
.attr('height', 10);
svg.append("g")
.append("text")
.attr('fill', resume_color)
.attr("transform", "translate(" + (((width / 2) - (radius + decrement_x_padding))) + "," + (((height / 2) - radius) - increment_y) + ")")
.attr("transform", "translate(" + (((width / 2) - (radius + decrement_x_padding)) + 10) + "," + (((height / 2) - radius) - increment_y) + ")")
.text(m_d.tag_name)
.style("font-family", "Verdana")
.style("font-size", text_size + "px");
.style("font-family", "smallfontFont")
.style("font-size", "7pt");
increment_y -= increment_y_padding;
});