From eb99b0a885063211af4cf0879703c2557990e3ec Mon Sep 17 00:00:00 2001 From: Arturo Gonzalez Date: Thu, 26 Oct 2017 15:37:43 +0200 Subject: [PATCH] Added lost code --- .../visual_console_builder.editor.js | 239 +++++++++++++++++- .../include/graphs/functions_d3.php | 24 ++ pandora_console/include/graphs/pandora.d3.js | 116 +++++++++ 3 files changed, 367 insertions(+), 12 deletions(-) diff --git a/pandora_console/godmode/reporting/visual_console_builder.editor.js b/pandora_console/godmode/reporting/visual_console_builder.editor.js index f501978770..e99305c010 100755 --- a/pandora_console/godmode/reporting/visual_console_builder.editor.js +++ b/pandora_console/godmode/reporting/visual_console_builder.editor.js @@ -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( '
'+values["label"]+'
' ) - } - - - //$("#simplevalue_" + idItem) - //.html($('').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 = $('
' + + '' + + '
' + ); + + 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 = $('
' + + '
' + values['label'] + '
' + + '' + + '
' + ); + } + else if(values['label_position'] == 'down'){ + item = $('
' + + '' + + '
' + values['label'] + '
' + + '
' + ); + } + else if(values['label_position'] == 'left'){ + item = $('
' + + '' + + '
' + values['label'] + '
' + + '
' + ); + } + else if(values['label_position'] == 'right'){ + item = $('
' + + '' + + '
' + values['label'] + '
' + + '
' + ); + } + + + 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': diff --git a/pandora_console/include/graphs/functions_d3.php b/pandora_console/include/graphs/functions_d3.php index f9bc34ed55..e4e53f2f1d 100644 --- a/pandora_console/include/graphs/functions_d3.php +++ b/pandora_console/include/graphs/functions_d3.php @@ -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 = "
"; + $output .= include_javascript_d3(true); + $output .= ""; + + $output .= ""; + + return $output; +} + ?> diff --git a/pandora_console/include/graphs/pandora.d3.js b/pandora_console/include/graphs/pandora.d3.js index 492146a8ef..13f94316a5 100644 --- a/pandora_console/include/graphs/pandora.d3.js +++ b/pandora_console/include/graphs/pandora.d3.js @@ -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(); + } } \ No newline at end of file