Added donut to node visual consoles

This commit is contained in:
Arturo Gonzalez 2017-10-18 11:40:40 +02:00
parent 13f0d4c1f7
commit f6fca4e46d
10 changed files with 138 additions and 55 deletions

View File

@ -435,14 +435,6 @@ function update_button_palette_callback() {
setEventsBar(idItem, values);
break;
case 'donut_graph':
if($('input[name=width]').val() == ''){
alert('Undefined width');
return false;
}
if($('input[name=height]').val() == ''){
alert('Undefined height');
return false;
}
$("#image_" + idItem).attr("src", "images/spinner.gif");
setDonutsGraph(idItem, values);
@ -2005,6 +1997,8 @@ function setDonutsGraph (id_data, values) {
url_hack_metaconsole = '../../';
}
width_percentile = values['width_percentile'];
parameter = Array();
parameter.push ({name: "page", value: "include/ajax/visual_console_builder.ajax"});
@ -2021,25 +2015,26 @@ function setDonutsGraph (id_data, values) {
type: "POST",
dataType: 'json',
success: function (data) {
console.log(data);
if (data['no_data'] == true) {
if (values['width'] == "0" || values['height'] == "0") {
$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/module-events.png');
if (values['width'] == "0") {
$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/wrong_donut_graph.png');
}
else {
$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/module-events.png');
$("#" + id_data + " img").css('width', values['width'] + 'px');
$("#" + id_data + " img").css('height', values['height'] + 'px');
$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/wrong_donut_graph.png');
$("#" + id_data + " img").css('width', width_percentile + 'px');
$("#" + id_data + " img").css('height', width_percentile + 'px');
}
}
else {
$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/module-events.png');
$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/donut-graph.png');
if($('#text-width').val() == 0 || $('#text-height').val() == 0){
// Image size
}
else{
$("#" + id_data + " img").css('width', $('#text-width').val()+'px');
$("#" + id_data + " img").css('height', $('#text-height').val()+'px');
$("#" + id_data + " img").css('width', $('#text-width_percentile').val()+'px');
$("#" + id_data + " img").css('height', $('#text-width_percentile').val()+'px');
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 563 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 562 B

View File

@ -153,12 +153,12 @@ switch ($action) {
$is_string = db_get_value_filter ('id_tipo_modulo', 'tagente_modulo',
array ('id_agente' => $id_agent,
'id_agente_modulo' => $id_module));
'id_agente_modulo' => $id_agent_module));
if (!empty($id_metaconsole)) {
metaconsole_restore_db();
}
$return = array();
if (($is_string == 17) || ($is_string == 23) || ($is_string == 3) ||
($is_string == 10) || ($is_string == 33)) {
@ -583,13 +583,11 @@ switch ($action) {
}
break;
case 'donut_graph':
if ($width_percentile !== null) {
$values['width'] = $width_percentile;
$values['height'] = $width_percentile;
}
$values['type'] = DONUT_GRAPH;
if ($width !== null) {
$values['width'] = $width;
}
if ($height !== null) {
$values['height'] = $height;
}
break;
case 'box_item':
$values['border_width'] = $border_width;
@ -823,7 +821,9 @@ switch ($action) {
$elementFields['type_percentile'] = 'bubble';
}
break;
case 'donut_graph':
$elementFields['width_percentile'] = $elementFields['width'];
break;
case 'module_graph':
$elementFields['width_module_graph'] = $elementFields['width'];
$elementFields['height_module_graph'] = $elementFields['height'];

View File

@ -1141,34 +1141,78 @@ function visual_map_print_item($mode = "read", $layoutData,
break;
case DONUT_GRAPH:
$donut_data = get_donut_module_data($layoutData['id_agente_modulo']);
if (!empty($id_metaconsole)) {
$connection = db_get_row_filter ('tmetaconsole_setup', $id_metaconsole);
if (metaconsole_load_external_db($connection) != NOERR) {
continue;
}
}
if ((get_parameter('action') == 'edit') || (get_parameter('operation') == 'edit_visualmap')) {
if($width == 0 || $height == 0){
$is_string = db_get_value_filter ('id_tipo_modulo', 'tagente_modulo',
array ('id_agente' => $layoutData['id_agent'],
'id_agente_modulo' => $id_module));
if (!empty($id_metaconsole)) {
metaconsole_restore_db();
}
if (($is_string == 17) || ($is_string == 23) || ($is_string == 3) ||
($is_string == 10) || ($is_string == 33)) {
$no_data = false;
}
else {
$no_data = true;
}
if ($no_data) {
if($width == 0){
if ($layoutData['id_metaconsole'] != 0) {
$img = '<img src="../../images/console/signes/module-events.png">';
$img = '<img src="../../images/console/signes/wrong_donut_graph.png">';
}
else{
$img = '<img src="images/console/signes/module-events.png">';
$img = '<img src="images/console/signes/wrong_donut_graph.png">';
}
}
else{
if ($layoutData['id_metaconsole'] != 0) {
$img = '<img src="../../images/console/signes/module-events.png" style="width:'.$width.'px;height:'. $height.'px;">';
$img = '<img src="../../images/console/signes/wrong_donut_graph.png" style="width:'.$width.'px;height:'. $height.'px;">';
}
else{
$img = '<img src="images/console/signes/module-events.png" style="width:'.$width.'px;height:'. $height.'px;">';
$img = '<img src="images/console/signes/wrong_donut_graph.png" style="width:'.$width.'px;height:'. $height.'px;">';
}
}
}
else {
if ($width == 0 || $height == 0) {
$img = d3_donut_graph ($layoutData['id'], 200, 300, $donut_data);
$donut_data = get_donut_module_data($layoutData['id_agente_modulo']);
if ((get_parameter('action') == 'edit') || (get_parameter('operation') == 'edit_visualmap')) {
if($width == 0){
if ($layoutData['id_metaconsole'] != 0) {
$img = '<img src="../../images/console/signes/donut-graph.png">';
}
else{
$img = '<img src="images/console/signes/donut-graph.png">';
}
}
else{
if ($layoutData['id_metaconsole'] != 0) {
$img = '<img src="../../images/console/signes/donut-graph.png" style="width:'.$width.'px;height:'. $height.'px;">';
}
else{
$img = '<img src="images/console/signes/donut-graph.png" style="width:'.$width.'px;height:'. $height.'px;">';
}
}
}
else{
$img = d3_donut_graph ($layoutData['id'], $width, $height, $donut_data);
else {
if ($width == 0) {
$img = d3_donut_graph ($layoutData['id'], 400, 400, $donut_data);
}
else{
$img = d3_donut_graph ($layoutData['id'], $width, $width, $donut_data);
}
}
}
//Restore db connection
if ($layoutData['id_metaconsole'] != 0) {
@ -1808,7 +1852,7 @@ 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];
$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];
@ -1816,7 +1860,7 @@ function get_donut_module_data ($id_module) {
}
else {
$data = explode(":", $val);
$values_to_return[$index]['tag_name'] = __('Others');
$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];

View File

@ -397,7 +397,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
$form_items['percentile_bar_row_1'] = array();
$form_items['percentile_bar_row_1']['items'] = array('percentile_bar', 'percentile_item', 'datos');
$form_items['percentile_bar_row_1']['items'] = array('percentile_bar', 'percentile_item', 'datos', 'donut_graph');
$form_items['percentile_bar_row_1']['html'] = '<td align="left">' .
__('Width') . '</td>
<td align="left">' . html_print_input_text('width_percentile', 0, '', 3, 5, true) . '</td>';
@ -525,7 +525,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
$form_items_advance['size_row']['items'] = array(
'group_item', 'background',
'static_graph', 'icon datos',
'auto_sla_graph', 'donut_graph');
'auto_sla_graph');
$form_items_advance['size_row']['html'] = '<td align="left">' .
__('Size') .
ui_print_help_tip (

View File

@ -1504,7 +1504,53 @@ function print_donut_graph (recipient, width, height, module_data) {
svg.append("g")
.attr("class", "slices");
var radius = 100;
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;
increment_y = 60;
text_size = 25;
increment_y_padding = 25;
decrement_x_padding = 75;
}
else if (width >= 400) {
radius = 120;
increment_y = 60;
text_size = 22;
increment_y_padding = 25;
decrement_x_padding = 75;
}
else if (width >= 300) {
radius = 80;
increment_y = 40;
text_size = 14;
increment_y_padding = 20;
decrement_x_padding = 60;
}
else if (width >= 200) {
radius = 50;
increment_y = 40;
text_size = 14;
increment_y_padding = 15;
decrement_x_padding = 45;
}
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;
}
var arc = d3.svg.arc()
.outerRadius(radius * 0.8)
@ -1518,28 +1564,20 @@ function print_donut_graph (recipient, width, height, module_data) {
return parseFloat(d.percent);
});
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");
.attr("transform", "translate(" + (((width / 2) - (radius + decrement_x_padding))) + "," + (((height / 2) - radius) - increment_y) + ")")
.text(m_d.tag_name)
.style("font-family", "Verdana")
.style("font-size", text_size + "px");
increment_y += 1;
increment_y -= increment_y_padding;
});
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}
return { label: m_data.tag_name, percent: m_data.percent, color : m_data.color}
});
}

View File

@ -787,6 +787,12 @@ input.auto_sla_graph_min {
input.auto_sla_graph_min[disabled] {
background: #fefefe url(../../images/auto_sla_graph.disabled.png) no-repeat center !important;
}
input.donut_graph_min {
background: #fefefe url(../../images/icono-quesito.png) no-repeat center !important;
}
input.donut_graph_min[disabled] {
background: #fefefe url(../../images/icono-quesito.disabled.png) no-repeat center !important;
}
input.binary_min {
background: #fefefe url(../../images/binary.png) no-repeat center !important;
}