From a9a817df7961f3e9b5d290850c2f897bfa640ad8 Mon Sep 17 00:00:00 2001 From: daniel Date: Mon, 23 Oct 2017 14:05:21 +0200 Subject: [PATCH] fixed error d3 in firefox --- .../agentes/module_manager_editor_common.php | 301 ++--------------- .../manage_network_components_form_common.php | 304 ++---------------- pandora_console/include/javascript/pandora.js | 285 +++++++++++++++- 3 files changed, 329 insertions(+), 561 deletions(-) diff --git a/pandora_console/godmode/agentes/module_manager_editor_common.php b/pandora_console/godmode/agentes/module_manager_editor_common.php index f66aa17296..ddd2a53c88 100644 --- a/pandora_console/godmode/agentes/module_manager_editor_common.php +++ b/pandora_console/godmode/agentes/module_manager_editor_common.php @@ -291,7 +291,7 @@ if (modules_is_string_type($id_module_type) || $edit) { $table_simple->data[4][1] .= '
'.__('Inverse interval').''; $table_simple->data[4][1] .= html_print_checkbox ("warning_inverse", 1, $warning_inverse, true, $disabledBecauseInPolicy); if (!modules_is_string_type($id_module_type) || $edit) { - $table_simple->data[4][2] = ' '; + $table_simple->data[4][2] = ' '; $table_simple->colspan[4][2] = 2; $table_simple->rowspan[4][2] = 3; } @@ -1202,291 +1202,32 @@ function paint_graph_values(){ //inicialiced error var error_w = 0; var error_c = 0; - //if haven't error - if(max_w == 0 || max_w > min_w){ - if(max_c == 0 || max_c > min_c){ - paint_graph_status(min_w, max_w, min_c, max_c, inverse_w, inverse_c, error_w, error_c); - } else { - error_c = 1; - paint_graph_status(0,0,0,0,0,0, error_w, error_c); - } - } else { - error_w = 1; - paint_graph_status(0,0,0,0,0,0, error_w, error_c); - } -} - -//function use d3.js for paint graph -function paint_graph_status(min_w, max_w, min_c, max_c, inverse_w, inverse_c, error_w, error_c) { - - //Check if they are numbers - if(isNaN(min_w)){ min_w = 0; }; - if(isNaN(max_w)){ max_w = 0; }; - if(isNaN(min_c)){ min_c = 0; }; - if(isNaN(max_c)){ max_c = 0; }; - //messages legend var legend_normal = ''; var legend_warning = ''; var legend_critical = ''; - - //remove elements - d3.select("#svg_dinamic rect").remove(); - $("#text-max_warning").removeClass("input_error"); - $("#text-max_critical").removeClass("input_error"); - - //if haven't errors - if (error_w == 0 && error_c == 0){ - //parse element - min_w = parseFloat(min_w); - min_c = parseFloat(min_c); - max_w = parseFloat(max_w); - max_c = parseFloat(max_c); - - //inicialize var - var range_min = 0; - var range_max = 0; - var range_max_min = 0; - var range_max_min = 0; - - //Find the lowest possible value - if(min_w < 0 || min_c < 0){ - if(min_w < min_c){ - range_min = min_w - 100; - } else { - range_min = min_c - 100; - } - } else if (min_w > 0 || min_c > 0) { - if(min_w > min_c){ - range_max_min = min_w; - } else { - range_max_min = min_c; - } + //messages error + var message_error_warning = ''; + var message_error_critical = ''; + + //if haven't error + if(max_w == 0 || max_w > min_w){ + if(max_c == 0 || max_c > min_c){ + paint_graph_status(min_w, max_w, min_c, max_c, inverse_w, + inverse_c, error_w, error_c, + legend_normal, legend_warning, legend_critical, + message_error_warning, message_error_critical); } else { - if(min_w < min_c){ - range_min = min_w - 100; - } else { - range_min = min_c - 100; - } + error_c = 1; + paint_graph_status(0,0,0,0,0,0, error_w, error_c, + legend_normal, legend_warning, legend_critical, + message_error_warning, message_error_critical); } - - //Find the maximum possible value - if(max_w > max_c){ - range_max = max_w + 100 + range_max_min; - } else { - range_max = max_c + 100 + range_max_min; - } - - //Controls whether the maximum = 0 is infinite - if((max_w == 0 || max_w == 0.00) && min_w != 0){ - max_w = range_max; - } - if((max_c == 0 || max_c == 0.00) && min_c != 0){ - max_c = range_max; - } - - //Scale according to the position - position = 200 / (range_max-range_min); - - //axes - var yScale = d3.scale.linear() - .domain([range_min, range_max]) - .range([100, -100]); - - var yAxis = d3.svg.axis() - .orient("left") - .scale(yScale); - - //create svg - var svg = d3.select("#svg_dinamic"); - //delete elements - svg.selectAll("g").remove(); - svg.selectAll("rect").remove(); - svg.selectAll("text").remove(); - svg.append("g") - .attr("transform", "translate(0, 100)") - .call(yAxis); - - //legend Normal text - svg.append("text") - .attr("x", 0) - .attr("y", -20) - .attr("fill", 'black') - .style("font-family", "arial") - .style("font-weight", "bold") - .style("font-size", 10) - .html(legend_normal) - .style("text-anchor", "first"); - - //legend Normal rect - svg.append("rect") - .attr("id", "legend_normal") - .attr("x", 72) - .attr("y", -30) - .attr("width", 10) - .attr("height", 10) - .style("fill", "#82B92E"); - - //legend Warning text - svg.append("text") - .attr("x", 91) - .attr("y", -20) - .attr("fill", 'black') - .style("font-family", "arial") - .style("font-weight", "bold") - .style("font-size", 10) - .html(legend_warning) - .style("text-anchor", "first"); - - //legend Warning rect - svg.append("rect") - .attr("id", "legend_warning") - .attr("x", 168) - .attr("y", -30) - .attr("width", 10) - .attr("height", 10) - .style("fill", "#ffd731"); - - //legend Critical text - svg.append("text") - .attr("x", 187) - .attr("y", -20) - .attr("fill", 'black') - .style("font-family", "arial") - .style("font-weight", "bold") - .style("font-size", 10) - .html(legend_critical) - .style("text-anchor", "first"); - - //legend critical rect - svg.append("rect") - .attr("id", "legend_critical") - .attr("x", 258) - .attr("y", -30) - .attr("width", 10) - .attr("height", 10) - .style("fill", "#fc4444"); - - //styles for number and axes - svg.selectAll("g .domain") - .style("stroke-width", 2) - .style("fill", "none") - .style("stroke", "black"); - - svg.selectAll("g .tick text") - .style("font-size", "9pt") - .style("font-weight", "initial"); - - //estatus normal - svg.append("rect") - .attr("id", "warning_rect") - .attr("x", 3) - .attr("y", 0) - .attr("width", 300) - .attr("height", 200) - .style("fill", "#82B92E"); - - //controls the inverse warning - if(inverse_w == 0){ - svg.append("rect").transition() - .duration(600) - .attr("id", "warning_rect") - .attr("x", 3) - .attr("y", ((range_max - min_w) * position) - ((max_w - min_w) * position)) - .attr("width", 300) - .attr("height", ((max_w - min_w) * position)) - .style("fill", "#ffd731"); - } - else { - svg.append("rect").transition() - .duration(600) - .attr("id", "warning_rect") - .attr("x", 3) - .attr("y", 200 - ((min_w -range_min) * position)) - .attr("width", 300) - .attr("height", (min_w -range_min) * position) - .style("fill", "#ffd731"); - - svg.append("rect").transition() - .duration(600) - .attr("id", "warning_inverse_rect") - .attr("x", 3) - .attr("y", 0) - .attr("width", 300) - .attr("height", ((range_max - min_w) * position) - ((max_w - min_w) * position)) - .style("fill", "#ffd731"); - - } - //controls the inverse critical - if(inverse_c == 0){ - svg.append("rect").transition() - .duration(600) - .attr("id", "critical_rect") - .attr("x", 3) - .attr("y", ((range_max - min_c) * position) - ((max_c - min_c) * position)) - .attr("width", 300) - .attr("height", ((max_c - min_c) * position)) - .style("fill", "#fc4444"); - } - else { - svg.append("rect").transition() - .duration(600) - .attr("id", "critical_rect") - .attr("x", 3) - .attr("y", 200 - ((min_c -range_min) * position)) - .attr("width", 300) - .attr("height", (min_c -range_min) * position) - .style("fill", "#fc4444"); - - svg.append("rect").transition() - .duration(600) - .attr("id", "critical_inverse_rect") - .attr("x", 3) - .attr("y", 0) - .attr("width", 300) - .attr("height", ((range_max - min_c) * position) - ((max_c - min_c) * position)) - .style("fill", "#fc4444"); - } - } - else { - var message_error_warning = ''; - var message_error_critical = ''; - - d3.select("#svg_dinamic rect").remove(); - //create svg - var svg = d3.select("#svg_dinamic"); - svg.selectAll("g").remove(); - svg.selectAll("rect").remove(); - svg.selectAll("text").remove(); - //message error warning - if (error_w == 1) { - $("#text-max_warning").addClass("input_error"); - svg.append("text") - .attr("x", -90) - .attr("y", 10) - .attr("fill", 'black') - .style("font-family", "arial") - .style("font-weight", "bold") - .style("font-size", 14) - .style("fill", "red") - .html(message_error_warning) - .style("text-anchor", "first"); - } - //message error critical - if (error_c == 1) { - $("#text-max_critical").addClass("input_error"); - svg.append("text") - .attr("x", -90) - .attr("y", 105) - .attr("fill", 'black') - .style("font-family", "arial") - .style("font-weight", "bold") - .style("font-size", 14) - .style("fill", "red") - .html(message_error_critical) - .style("text-anchor", "first"); - } - + } else { + error_w = 1; + paint_graph_status(0,0,0,0,0,0, error_w, error_c, + legend_normal, legend_warning, legend_critical, + message_error_warning, message_error_critical); } } diff --git a/pandora_console/godmode/modules/manage_network_components_form_common.php b/pandora_console/godmode/modules/manage_network_components_form_common.php index 83b21b225b..e2714d7474 100644 --- a/pandora_console/godmode/modules/manage_network_components_form_common.php +++ b/pandora_console/godmode/modules/manage_network_components_form_common.php @@ -128,7 +128,7 @@ $table->data[4][1] .= html_print_input_text ('str_warning', $str_warning, $table->data[4][1] .= '
'.__('Inverse interval').''; $table->data[4][1] .= html_print_checkbox ("warning_inverse", 1, $warning_inverse, true); -$table->data[4][2] = ' '; +$table->data[4][2] = ' '; $table->colspan[4][2] = 2; $table->rowspan[4][2] = 3; @@ -349,294 +349,38 @@ $next_row++; if(!inverse_w){ inverse_w = 0; } var inverse_c = $('input:checkbox[name=critical_inverse]:checked').val(); if(!inverse_c){ inverse_c = 0; } + //inicialiced error var error_w = 0; var error_c = 0; - //if haven't error - if(max_w == 0 || max_w > min_w){ - if(max_c == 0 || max_c > min_c){ - paint_graph_status(min_w, max_w, min_c, max_c, inverse_w, inverse_c, error_w, error_c); - } else { - error_c = 1; - paint_graph_status(0,0,0,0,0,0, error_w, error_c); - } - } else { - error_w = 1; - paint_graph_status(0,0,0,0,0,0, error_w, error_c); - } - } - - //function use d3.js for paint graph - function paint_graph_status(min_w, max_w, min_c, max_c, inverse_w, inverse_c, error_w, error_c) { - - //Check if they are numbers - if(isNaN(min_w)){ min_w = 0; }; - if(isNaN(max_w)){ max_w = 0; }; - if(isNaN(min_c)){ min_c = 0; }; - if(isNaN(max_c)){ max_c = 0; }; - //messages legend var legend_normal = ''; var legend_warning = ''; var legend_critical = ''; - - //remove elements - d3.select("#svg_dinamic rect").remove(); - $("#text-max_warning").removeClass("input_error"); - $("#text-max_critical").removeClass("input_error"); - - //if haven't errors - if (error_w == 0 && error_c == 0){ - //parse element - min_w = parseFloat(min_w); - min_c = parseFloat(min_c); - max_w = parseFloat(max_w); - max_c = parseFloat(max_c); - - //inicialize var - var range_min = 0; - var range_max = 0; - var range_max_min = 0; - var range_max_min = 0; - - //Find the lowest possible value - if(min_w < 0 || min_c < 0){ - if(min_w < min_c){ - range_min = min_w - 100; - } else { - range_min = min_c - 100; - } - } else if (min_w > 0 || min_c > 0) { - if(min_w > min_c){ - range_max_min = min_w; - } else { - range_max_min = min_c; - } + //messages error + var message_error_warning = ''; + var message_error_critical = ''; + + //if haven't error + if(max_w == 0 || max_w > min_w){ + if(max_c == 0 || max_c > min_c){ + paint_graph_status(min_w, max_w, min_c, max_c, inverse_w, + inverse_c, error_w, error_c, + legend_normal, legend_warning, legend_critical, + message_error_warning, message_error_critical); } else { - if(min_w < min_c){ - range_min = min_w - 100; - } else { - range_min = min_c - 100; - } + error_c = 1; + paint_graph_status(0,0,0,0,0,0, error_w, error_c, + legend_normal, legend_warning, legend_critical, + message_error_warning, message_error_critical); } - - //Find the maximum possible value - if(max_w > max_c){ - range_max = max_w + 100 + range_max_min; - } else { - range_max = max_c + 100 + range_max_min; - } - - //Controls whether the maximum = 0 is infinite - if((max_w == 0 || max_w == 0.00) && min_w != 0){ - max_w = range_max; - } - if((max_c == 0 || max_c == 0.00) && min_c != 0){ - max_c = range_max; - } - - //Scale according to the position - position = 200 / (range_max-range_min); - - //axes - var yScale = d3.scale.linear() - .domain([range_min, range_max]) - .range([100, -100]); - - var yAxis = d3.svg.axis() - .orient("left") - .scale(yScale); - - //create svg - var svg = d3.select("#svg_dinamic"); - //delete elements - svg.selectAll("g").remove(); - svg.selectAll("rect").remove(); - svg.selectAll("text").remove(); - svg.append("g") - .attr("transform", "translate(0, 100)") - .call(yAxis); - - //legend Normal text - svg.append("text") - .attr("x", 0) - .attr("y", -20) - .attr("fill", 'black') - .style("font-family", "arial") - .style("font-weight", "bold") - .style("font-size", 10) - .html(legend_normal) - .style("text-anchor", "first"); - - //legend Normal rect - svg.append("rect") - .attr("id", "legend_normal") - .attr("x", 72) - .attr("y", -30) - .attr("width", 10) - .attr("height", 10) - .style("fill", "#82B92E"); - - //legend Warning text - svg.append("text") - .attr("x", 91) - .attr("y", -20) - .attr("fill", 'black') - .style("font-family", "arial") - .style("font-weight", "bold") - .style("font-size", 10) - .html(legend_warning) - .style("text-anchor", "first"); - - //legend Warning rect - svg.append("rect") - .attr("id", "legend_warning") - .attr("x", 168) - .attr("y", -30) - .attr("width", 10) - .attr("height", 10) - .style("fill", "#ffd731"); - - //legend Critical text - svg.append("text") - .attr("x", 187) - .attr("y", -20) - .attr("fill", 'black') - .style("font-family", "arial") - .style("font-weight", "bold") - .style("font-size", 10) - .html(legend_critical) - .style("text-anchor", "first"); - - //legend critical rect - svg.append("rect") - .attr("id", "legend_critical") - .attr("x", 258) - .attr("y", -30) - .attr("width", 10) - .attr("height", 10) - .style("fill", "#fc4444"); - - //styles for number and axes - svg.selectAll("g .domain") - .style("stroke-width", 2) - .style("fill", "none") - .style("stroke", "black"); - - svg.selectAll("g .tick text") - .style("font-size", "9pt") - .style("font-weight", "initial"); - - //estatus normal - svg.append("rect") - .attr("id", "warning_rect") - .attr("x", 3) - .attr("y", 0) - .attr("width", 300) - .attr("height", 200) - .style("fill", "#82B92E"); - - //controls the inverse warning - if(inverse_w == 0){ - svg.append("rect").transition() - .duration(600) - .attr("id", "warning_rect") - .attr("x", 3) - .attr("y", ((range_max - min_w) * position) - ((max_w - min_w) * position)) - .attr("width", 300) - .attr("height", ((max_w - min_w) * position)) - .style("fill", "#ffd731"); - } - else { - svg.append("rect").transition() - .duration(600) - .attr("id", "warning_rect") - .attr("x", 3) - .attr("y", 200 - ((min_w -range_min) * position)) - .attr("width", 300) - .attr("height", (min_w -range_min) * position) - .style("fill", "#ffd731"); - - svg.append("rect").transition() - .duration(600) - .attr("id", "warning_inverse_rect") - .attr("x", 3) - .attr("y", 0) - .attr("width", 300) - .attr("height", ((range_max - min_w) * position) - ((max_w - min_w) * position)) - .style("fill", "#ffd731"); - - } - //controls the inverse critical - if(inverse_c == 0){ - svg.append("rect").transition() - .duration(600) - .attr("id", "critical_rect") - .attr("x", 3) - .attr("y", ((range_max - min_c) * position) - ((max_c - min_c) * position)) - .attr("width", 300) - .attr("height", ((max_c - min_c) * position)) - .style("fill", "#fc4444"); - } - else { - svg.append("rect").transition() - .duration(600) - .attr("id", "critical_rect") - .attr("x", 3) - .attr("y", 200 - ((min_c -range_min) * position)) - .attr("width", 300) - .attr("height", (min_c -range_min) * position) - .style("fill", "#fc4444"); - - svg.append("rect").transition() - .duration(600) - .attr("id", "critical_inverse_rect") - .attr("x", 3) - .attr("y", 0) - .attr("width", 300) - .attr("height", ((range_max - min_c) * position) - ((max_c - min_c) * position)) - .style("fill", "#fc4444"); - } - } - else { - var message_error_warning = ''; - var message_error_critical = ''; - - d3.select("#svg_dinamic rect").remove(); - //create svg - var svg = d3.select("#svg_dinamic"); - svg.selectAll("g").remove(); - svg.selectAll("rect").remove(); - svg.selectAll("text").remove(); - //message error warning - if (error_w == 1) { - $("#text-max_warning").addClass("input_error"); - svg.append("text") - .attr("x", -90) - .attr("y", 10) - .attr("fill", 'black') - .style("font-family", "arial") - .style("font-weight", "bold") - .style("font-size", 14) - .style("fill", "red") - .html(message_error_warning) - .style("text-anchor", "first"); - } - //message error critical - if (error_c == 1) { - $("#text-max_critical").addClass("input_error"); - svg.append("text") - .attr("x", -90) - .attr("y", 105) - .attr("fill", 'black') - .style("font-family", "arial") - .style("font-weight", "bold") - .style("font-size", 14) - .style("fill", "red") - .html(message_error_critical) - .style("text-anchor", "first"); - } - + } else { + error_w = 1; + paint_graph_status(0,0,0,0,0,0, error_w, error_c, + legend_normal, legend_warning, legend_critical, + message_error_warning, message_error_critical); } } + + diff --git a/pandora_console/include/javascript/pandora.js b/pandora_console/include/javascript/pandora.js index a7ddd6074f..12018f23dd 100644 --- a/pandora_console/include/javascript/pandora.js +++ b/pandora_console/include/javascript/pandora.js @@ -622,7 +622,6 @@ function post_process_select_init_unit(name,selected) { } }); - console.log(select_or_text); if(select_or_text) { $('#' + name + '_select option[value='+ selected +']').attr("selected",true); $('#text-' + name + '_text').val(""); @@ -1265,4 +1264,288 @@ function pagination_show_more(params, message){ }, datatype: "html" }); +} +/* +*function use d3.js for paint graph +*/ +function paint_graph_status(min_w, max_w, min_c, max_c, inverse_w, inverse_c, error_w, error_c, + legend_normal, legend_warning, legend_critical, + message_error_warning, message_error_critical) { + + //Check if they are numbers + if(isNaN(min_w)){ min_w = 0; }; + if(isNaN(max_w)){ max_w = 0; }; + if(isNaN(min_c)){ min_c = 0; }; + if(isNaN(max_c)){ max_c = 0; }; + + //if haven't errors + if (error_w == 0 && error_c == 0){ + //parse element + min_w = parseFloat(min_w); + min_c = parseFloat(min_c); + max_w = parseFloat(max_w); + max_c = parseFloat(max_c); + + //inicialize var + var range_min = 0; + var range_max = 0; + var range_max_min = 0; + var range_max_min = 0; + + //Find the lowest possible value + if(min_w < 0 || min_c < 0){ + if(min_w < min_c){ + range_min = min_w - 100; + } else { + range_min = min_c - 100; + } + } else if (min_w > 0 || min_c > 0) { + if(min_w > min_c){ + range_max_min = min_w; + } else { + range_max_min = min_c; + } + } else { + if(min_w < min_c){ + range_min = min_w - 100; + } else { + range_min = min_c - 100; + } + } + + //Find the maximum possible value + if(max_w > max_c){ + range_max = max_w + 100 + range_max_min; + } else { + range_max = max_c + 100 + range_max_min; + } + + //Controls whether the maximum = 0 is infinite + if((max_w == 0 || max_w == 0.00) && min_w != 0){ + max_w = range_max; + } + if((max_c == 0 || max_c == 0.00) && min_c != 0){ + max_c = range_max; + } + + //Scale according to the position + position = 200 / (range_max-range_min); + + //axes + var yScale = d3.scale.linear() + .domain([range_min, range_max]) + .range([100, -100]); + + var yAxis = d3.svg.axis() + .scale(yScale) + .orient("left"); + + //create svg + var svg = d3.select("#svg_dinamic"); + //delete elements + svg.selectAll("g").remove(); + + width_x = 201; + height_x = 50; + + svg.append("g") + .attr("transform", "translate(200, 150)") + .call(yAxis); + + //legend Normal text + svg.append("g") + .attr("width", 300) + .attr("height", 300) + .append("text") + .attr("x", width_x) + .attr("y", height_x - 20) + .attr("fill", 'black') + .style("font-family", "arial") + .style("font-weight", "bold") + .style("font-size", '8pt') + .html(legend_normal) + .style("text-anchor", "first") + .attr("width", 300) + .attr("height", 300); + + //legend Normal rect + svg.append("g") + .append("rect") + .attr("id", "legend_normal") + .attr("x", width_x + 80) + .attr("y", height_x - 30) + .attr("width", 10) + .attr("height", 10) + .style("fill", "#82B92E"); + + //legend Warning text + svg.append("g") + .append("text") + .attr("x", width_x + 100) + .attr("y", height_x - 20) + .attr("fill", 'black') + .style("font-family", "arial") + .style("font-weight", "bold") + .style("font-size", '8pt') + .html(legend_warning) + .style("text-anchor", "first"); + + //legend Warning rect + svg.append("g") + .append("rect") + .attr("id", "legend_warning") + .attr("x", width_x + 185) + .attr("y", height_x - 30) + .attr("width", 10) + .attr("height", 10) + .style("fill", "#ffd731"); + + //legend Critical text + svg.append("g") + .append("text") + .attr("x", width_x + 205) + .attr("y", height_x - 20) + .attr("fill", 'black') + .style("font-family", "arial") + .style("font-weight", "bold") + .style("font-size", '8pt') + .html(legend_critical) + .style("text-anchor", "first"); + + //legend critical rect + svg.append("g") + .append("rect") + .attr("id", "legend_critical") + .attr("x", width_x + 285) + .attr("y", height_x - 30) + .attr("width", 10) + .attr("height", 10) + .style("fill", "#fc4444"); + + //styles for number and axes + svg.selectAll("g .domain") + .style("stroke-width", 2) + .style("fill", "none") + .style("stroke", "black"); + + svg.selectAll("g .tick text") + .style("font-size", "9pt") + .style("font-weight", "initial"); + + //estatus normal + svg.append("g") + .append("rect") + .attr("id", "status_rect") + .attr("x", width_x) + .attr("y", height_x) + .attr("width", 300) + .attr("height", 200) + .style("fill", "#82B92E"); + + //controls the inverse warning + if(inverse_w == 0){ + svg.append("g") + .append("rect").transition() + .duration(600) + .attr("id", "warning_rect") + .attr("x", width_x) + .attr("y", (height_x +(range_max - min_w) * position) - ((max_w - min_w) * position)) + .attr("width", 300) + .attr("height", ((max_w - min_w) * position)) + .style("fill", "#ffd731"); + } + else { + svg.append("g") + .append("rect").transition() + .duration(600) + .attr("id", "warning_rect") + .attr("x", width_x) + .attr("y", height_x + 200 - ((min_w -range_min) * position)) + .attr("width", 300) + .attr("height", (min_w -range_min) * position) + .style("fill", "#ffd731"); + + svg.append("g") + .append("rect").transition() + .duration(600) + .attr("id", "warning_inverse_rect") + .attr("x", width_x) + .attr("y", height_x) + .attr("width", 300) + .attr("height", ((range_max - min_w) * position) - ((max_w - min_w) * position)) + .style("fill", "#ffd731"); + + } + //controls the inverse critical + if(inverse_c == 0){ + svg.append("g") + .append("rect").transition() + .duration(600) + .attr("id", "critical_rect") + .attr("x", width_x) + .attr("y", (height_x + (range_max - min_c) * position) - ((max_c - min_c) * position)) + .attr("width", 300) + .attr("height", ((max_c - min_c) * position)) + .style("fill", "#fc4444"); + } + else { + svg.append("g") + .append("rect").transition() + .duration(600) + .attr("id", "critical_rect") + .attr("x", width_x) + .attr("y", height_x + 200 - ((min_c -range_min) * position)) + .attr("width", 300) + .attr("height", (min_c -range_min) * position) + .style("fill", "#fc4444"); + svg.append("g") + .append("rect").transition() + .duration(600) + .attr("id", "critical_inverse_rect") + .attr("x", width_x) + .attr("y", height_x) + .attr("width", 300) + .attr("height", ((range_max - min_c) * position) - ((max_c - min_c) * position)) + .style("fill", "#fc4444"); + } + + } + else { + d3.select("#svg_dinamic rect").remove(); + //create svg + var svg = d3.select("#svg_dinamic"); + svg.selectAll("g").remove(); + + //message error warning + if (error_w == 1) { + $("#text-max_warning").addClass("input_error"); + svg.append("g") + .append("text") + .attr("x", width_x) + .attr("y", height_x) + .attr("fill", 'black') + .style("font-family", "arial") + .style("font-weight", "bold") + .style("font-size", 14) + .style("fill", "red") + .html(message_error_warning) + .style("text-anchor", "first"); + } + //message error critical + if (error_c == 1) { + $("#text-max_critical").addClass("input_error"); + svg.append("g") + .append("text") + .attr("x", width_x) + .attr("y", height_x) + .attr("fill", 'black') + .style("font-family", "arial") + .style("font-weight", "bold") + .style("font-size", 14) + .style("fill", "red") + .html(message_error_critical) + .style("text-anchor", "first"); + } + + } } \ No newline at end of file