Added lost code

This commit is contained in:
Arturo Gonzalez 2017-10-26 15:37:43 +02:00
parent 9dcef3043b
commit eb99b0a885
3 changed files with 367 additions and 12 deletions

View File

@ -426,6 +426,17 @@ function update_button_palette_callback() {
$("#image_" + idItem).attr("src", "images/spinner.gif");
setModuleGraph(idItem);
break;
case 'bars_graph':
if($('input[name=width_percentile]').val() == ''){
alert('Undefined width');
return false;
}
$("#text_" + idItem).html(values['label']);
$("#image_" + idItem).attr("src", "images/spinner.gif");
setBarsGraph(idItem, values);
break;
case 'auto_sla_graph':
if($('input[name=width]').val() == ''){
alert('Undefined width');
@ -440,14 +451,12 @@ function update_button_palette_callback() {
setEventsBar(idItem, values);
break;
case 'donut_graph':
$("#image_" + idItem).attr("src", "images/spinner.gif");
setDonutsGraph(idItem, values);
break;
case 'simple_value':
//checkpoint
// if(($('#text-label_ifr').contents().find('#tinymce p').html() == '_VALUE_' ||
// $('#text-label_ifr').contents().find('#tinymce').html() == '_VALUE_')
// && $('#data_image_check').html() != 'On'){
// alert('_VALUE_ exactly value is only enable for data image. Please change label text or select a data image module.');
// return;
// }
$("#" + idItem).html(values['label']);
if( (values['label'].replace( /<.*?>/g, '' ) != '_VALUE_')
&& (values['label'].replace( /<.*?>/g, '' ) != '(_VALUE_)') ){
@ -462,12 +471,7 @@ function update_button_palette_callback() {
$("#" + idItem).html(
'<table><tbody><tr><td></td></tr><tr><td><span style="" id="text_21" class="text">'+values["label"]+'</span></td></tr><tr><td></td></tr></tbody></table>'
)
}
//$("#simplevalue_" + idItem)
//.html($('<img></img>').attr('src', "images/spinner.gif"));
setModuleValue(idItem,values['process_simple_value'], values['period'],values['width']);
break;
case 'label':
@ -622,6 +626,7 @@ function readFields() {
}
}
values['height'] = $("input[name=height]").val();
values['bars_graph_type'] = $("select[name=bars_graph_type]").val();
values['parent'] = $("select[name=parent]").val();
values['map_linked'] = $("select[name=map_linked]").val();
values['width_percentile'] = $("input[name=width_percentile]").val();
@ -709,6 +714,12 @@ function create_button_palette_callback() {
validate = false;
}
break;
case 'donut_graph':
if ((values['agent'] == '')) {
alert($("#message_alert_no_agent").html());
validate = false;
}
break;
case 'label':
if ((values['label'] == '')) {
alert($("#message_alert_no_label").html());
@ -776,6 +787,16 @@ function create_button_palette_callback() {
}
}
break;
case 'bars_graph':
if ((values['agent'] == '')) {
alert($("#message_alert_no_agent").html());
validate = false;
}
if ((values['module'] == 0)) {
alert($("#message_alert_no_module").html());
validate = false;
}
break;
case 'simple_value':
if ((values['agent'] == '')) {
alert($("#message_alert_no_agent").html());
@ -977,6 +998,7 @@ function toggle_item_palette() {
activeToolboxButton('static_graph', true);
activeToolboxButton('module_graph', true);
activeToolboxButton('bars_graph', true);
activeToolboxButton('simple_value', true);
activeToolboxButton('label', true);
activeToolboxButton('icon', true);
@ -985,6 +1007,7 @@ function toggle_item_palette() {
activeToolboxButton('box_item', true);
activeToolboxButton('line_item', true);
activeToolboxButton('auto_sla_graph', true);
activeToolboxButton('donut_graph', true);
if (typeof(enterprise_activeToolboxButton) == 'function') {
enterprise_activeToolboxButton(true);
@ -1004,7 +1027,9 @@ function toggle_item_palette() {
activeToolboxButton('static_graph', false);
activeToolboxButton('module_graph', false);
activeToolboxButton('bars_graph', false);
activeToolboxButton('auto_sla_graph', false);
activeToolboxButton('donut_graph', false);
activeToolboxButton('simple_value', false);
activeToolboxButton('label', false);
activeToolboxButton('icon', false);
@ -1277,6 +1302,8 @@ function loadFieldsFromDB(item) {
$("input[name=width_module_graph]").val(val);
if (key == 'height_module_graph')
$("input[name=height_module_graph]").val(val);
if (key == 'bars_graph_type')
$("select[name=bars_graph_type]").val(val);
if (key == 'type_percentile')
$("select[name=type_percentile]").val(val);
if (key == 'percentile_label')
@ -1540,6 +1567,9 @@ function hiddenFields(item) {
$("#module_graph_size_row").css('display', 'none');
$("#module_graph_size_row." + item).css('display', '');
$("#bars_graph_type").css('display', 'none');
$("#bars_graph_type." + item).css('display', '');
$("#background_color").css('display', 'none');
$("#background_color." + item).css('display', '');
@ -1756,6 +1786,60 @@ function set_image(type, idElement, image) {
});
}
function setBarsGraph(id_data, values) {
var url_hack_metaconsole = '';
if (is_metaconsole()) {
url_hack_metaconsole = '../../';
}
width_percentile = values['width_percentile'];
parameter = Array();
parameter.push ({name: "page", value: "include/ajax/visual_console_builder.ajax"});
parameter.push ({name: "action", value: "get_module_type_string"});
parameter.push ({name: "id_agent", value: values['id_agent']});
parameter.push ({name: "module", value: values['module']});
parameter.push ({name: "id_element", value: id_data});
parameter.push ({name: "id_visual_console", value: id_visual_console});
jQuery.ajax({
url: get_url_ajax(),
data: parameter,
type: "POST",
dataType: 'json',
success: function (data) {
if (data['no_data'] == true) {
if (values['width_percentile'] == "0") {
$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/barras-no.png');
}
else {
$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/barras-no.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/barras.png');
if (values['width_percentile'] == "0") {
// Image size
}
else{
$("#" + id_data + " img").css('width', width_percentile+'px');
$("#" + id_data + " img").css('height', width_percentile+'px');
}
}
if($('#'+id_data+' table').css('float') == 'right' || $('#'+id_data+ ' table').css('float') == 'left'){
$('#'+id_data+ ' img').css('margin-top', parseInt($('#'+id_data).css('height'))/2 - parseInt($('#'+id_data+ ' img').css('height'))/2);
}
else{
$('#'+id_data+ ' img').css('margin-left', parseInt($('#'+id_data).css('width'))/2 - parseInt($('#'+id_data+ ' img').css('width'))/2);
}
}
});
}
function setModuleGraph(id_data) {
var parameter = Array();
@ -2141,6 +2225,53 @@ function setEventsBar(id_data, values) {
});
}
function setDonutsGraph (id_data, values) {
var url_hack_metaconsole = '';
if (is_metaconsole()) {
url_hack_metaconsole = '../../';
}
width_percentile = values['width_percentile'];
parameter = Array();
parameter.push ({name: "page", value: "include/ajax/visual_console_builder.ajax"});
parameter.push ({name: "action", value: "get_module_type_string"});
parameter.push ({name: "id_agent", value: values['id_agent']});
parameter.push ({name: "id_agent_module", value: values['module']});
parameter.push ({name: "id_element", value: id_data});
parameter.push ({name: "id_visual_console", value: id_visual_console});
jQuery.ajax({
url: get_url_ajax(),
data: parameter,
type: "POST",
dataType: 'json',
success: function (data) {
if (data['no_data'] == true) {
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/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/donut-graph.png');
if($('#text-width').val() == 0 || $('#text-height').val() == 0){
// Image size
}
else{
$("#" + id_data + " img").css('width', $('#text-width_percentile').val()+'px');
$("#" + id_data + " img").css('height', $('#text-width_percentile').val()+'px');
}
}
}
});
}
function setPercentileBubble(id_data, values) {
metaconsole = $("input[name='metaconsole']").val();
@ -2499,6 +2630,16 @@ function createItem(type, values, id_data) {
setEventsBar(id_data, values);
break;
case 'donut_graph':
var sizeStyle = '';
var imageSize = '';
item = $('<div id="' + id_data + '" class="item donut_graph" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
'</div>'
);
setDonutsGraph(id_data, values);
break;
case 'percentile_bar':
case 'percentile_item':
var sizeStyle = '';
@ -2678,6 +2819,42 @@ function createItem(type, values, id_data) {
setModuleGraph(id_data);
break;
case 'bars_graph':
sizeStyle = '';
imageSize = '';
if(values['label_position'] == 'up'){
item = $('<div id="' + id_data + '" class="item module_graph" style="text-align: left; position: absolute; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
'<table><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
'</div>'
);
}
else if(values['label_position'] == 'down'){
item = $('<div id="' + id_data + '" class="item module_graph" style="text-align: left; position: absolute; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
'<table><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
'</div>'
);
}
else if(values['label_position'] == 'left'){
item = $('<div id="' + id_data + '" class="item module_graph" style="text-align: left; position: absolute; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
'<img style="float:right" class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
'<table style="float:left;height:'+values['height_module_graph']+'px;"><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
'</div>'
);
}
else if(values['label_position'] == 'right'){
item = $('<div id="' + id_data + '" class="item module_graph" style="text-align: left; position: absolute; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
'<img style="float:left" class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
'<table style="float:right;height:'+values['height_module_graph']+'px;"><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
'</div>'
);
}
setBarsGraph(id_data, values);
break;
case 'simple_value':
sizeStyle = '';
imageSize = '';
@ -2897,7 +3074,9 @@ function updateDB_visual(type, idElement , values, event, top, left) {
case 'label':
case 'icon':
case 'module_graph':
case 'bars_graph':
case 'auto_sla_graph':
case 'donut_graph':
if (type == 'simple_value') {
setModuleValue(idElement,
values.process_simple_value,
@ -3309,6 +3488,15 @@ function eventsItems(drag) {
activeToolboxButton('delete_item', true);
activeToolboxButton('show_grid', false);
}
if ($(divParent).hasClass('donut_graph')) {
creationItem = null;
selectedItem = 'donut_graph';
idItem = $(divParent).attr('id');
activeToolboxButton('copy_item', true);
activeToolboxButton('edit_item', true);
activeToolboxButton('delete_item', true);
activeToolboxButton('show_grid', false);
}
if ($(divParent).hasClass('group_item')) {
creationItem = null;
selectedItem = 'group_item';
@ -3336,6 +3524,15 @@ function eventsItems(drag) {
activeToolboxButton('delete_item', true);
activeToolboxButton('show_grid', false);
}
if ($(divParent).hasClass('bars_graph')) {
creationItem = null;
selectedItem = 'bars_graph';
idItem = $(divParent).attr('id');
activeToolboxButton('copy_item', true);
activeToolboxButton('edit_item', true);
activeToolboxButton('delete_item', true);
activeToolboxButton('show_grid', false);
}
if ($(divParent).hasClass('simple_value')) {
creationItem = null;
selectedItem = 'simple_value';
@ -3509,6 +3706,9 @@ function eventsItems(drag) {
if ($(event.target).hasClass('auto_sla_graph')) {
selectedItem = 'auto_sla_graph';
}
if ($(event.target).hasClass('donut_graph')) {
selectedItem = 'donut_graph';
}
if ($(event.target).hasClass('group_item')) {
selectedItem = 'group_item';
}
@ -3518,6 +3718,9 @@ function eventsItems(drag) {
if ($(event.target).hasClass('module_graph')) {
selectedItem = 'module_graph';
}
if ($(event.target).hasClass('bars_graph')) {
selectedItem = 'bars_graph';
}
if ($(event.target).hasClass('simple_value')) {
selectedItem = 'simple_value';
}
@ -3821,10 +4024,18 @@ function click_button_toolbox(id) {
toolbuttonActive = creationItem = 'module_graph';
toggle_item_palette();
break;
case 'bars_graph':
toolbuttonActive = creationItem = 'bars_graph';
toggle_item_palette();
break;
case 'auto_sla_graph':
toolbuttonActive = creationItem = 'auto_sla_graph';
toggle_item_palette();
break;
case 'donut_graph':
toolbuttonActive = creationItem = 'donut_graph';
toggle_item_palette();
break;
case 'simple_value':
toolbuttonActive = creationItem = 'simple_value';
toggle_item_palette();
@ -3876,12 +4087,14 @@ function click_button_toolbox(id) {
activeToolboxButton('static_graph', false);
activeToolboxButton('percentile_item', false);
activeToolboxButton('module_graph', false);
activeToolboxButton('bars_graph', false);
activeToolboxButton('simple_value', false);
activeToolboxButton('label', false);
activeToolboxButton('icon', false);
activeToolboxButton('service', false);
activeToolboxButton('group_item', false);
activeToolboxButton('auto_sla_graph', false);
activeToolboxButton('donut_graph', false);
activeToolboxButton('copy_item', false);
activeToolboxButton('edit_item', false);
activeToolboxButton('delete_item', false);
@ -3907,11 +4120,13 @@ function click_button_toolbox(id) {
activeToolboxButton('static_graph', true);
activeToolboxButton('percentile_item', true);
activeToolboxButton('module_graph', true);
activeToolboxButton('bars_graph', true);
activeToolboxButton('simple_value', true);
activeToolboxButton('label', true);
activeToolboxButton('icon', true);
activeToolboxButton('group_item', true);
activeToolboxButton('auto_sla_graph', true);
activeToolboxButton('donut_graph', true);
}
break;
case 'save_visualmap':

View File

@ -384,4 +384,28 @@ function progress_circular_bar_interior ($id, $percentile, $width, $height, $col
return $output;
}
function d3_donut_graph ($id, $width, $height, $module_data) {
global $config;
$module_data = json_encode($module_data);
$recipient_name = "donut_graph_" . $id;
$recipient_name_to_js = "#donut_graph_" . $id;
$output = "<div id=" . $recipient_name . " style='overflow: hidden;'></div>";
$output .= include_javascript_d3(true);
$output .= "<style type=\"text/css\">
path {
stroke: #fff;
fill-rule: evenodd;
}
</style>";
$output .= "<script language=\"javascript\" type=\"text/javascript\">
print_donut_graph('" . $recipient_name_to_js . "', " . $width . ", " . $height . ", " . $module_data . ");
</script>";
return $output;
}
?>

View File

@ -1962,4 +1962,120 @@ function print_interior_circular_progress_bar (recipient, percentile, width, hei
setTimeout(loops, 30);
}
})();
}
function print_donut_graph (recipient, width, height, module_data) {
var svg = d3.select(recipient)
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
svg.append("g")
.attr("class", "slices");
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)
.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.percent);
});
jQuery.each(module_data, function (key, m_d) {
svg.append("g")
.append("text")
.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 -= increment_y_padding;
});
function donutData (){
return module_data.map(function(m_data){
return { label: m_data.tag_name, percent: m_data.percent, color : m_data.color}
});
}
print_phases(donutData());
function print_phases(data) {
var slice = svg.select(".slices").selectAll("path.slice")
.data(pie(data), key);
slice.enter()
.insert("path")
.style("fill", function(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();
}
}