New graph thermometer - #2214
This commit is contained in:
parent
7bb3fb8077
commit
734c52d8bd
|
@ -173,7 +173,8 @@ $stackeds = array(
|
|||
CUSTOM_GRAPH_GAUGE => __('Gauge'),
|
||||
CUSTOM_GRAPH_HBARS => __('Horizontal bars'),
|
||||
CUSTOM_GRAPH_VBARS => __('Vertical bars'),
|
||||
CUSTOM_GRAPH_PIE => __('Pie')
|
||||
CUSTOM_GRAPH_PIE => __('Pie'),
|
||||
CUSTOM_GRAPH_THERMOMETER => __('Thermometer')
|
||||
);
|
||||
html_print_select ($stackeds, 'stacked', $stacked);
|
||||
|
||||
|
|
|
@ -444,6 +444,7 @@ define("CUSTOM_GRAPH_LINE", 2);
|
|||
define("CUSTOM_GRAPH_STACKED_LINE", 3);
|
||||
define("CUSTOM_GRAPH_BULLET_CHART", 4);
|
||||
define("CUSTOM_GRAPH_GAUGE", 5);
|
||||
define("CUSTOM_GRAPH_THERMOMETER", 10);
|
||||
define("CUSTOM_GRAPH_HBARS", 6);
|
||||
define("CUSTOM_GRAPH_VBARS", 7);
|
||||
define("CUSTOM_GRAPH_PIE", 8);
|
||||
|
|
|
@ -1900,6 +1900,72 @@ function graphic_combined_module ($module_list, $weight_list, $period,
|
|||
$i++;
|
||||
}
|
||||
break;
|
||||
case CUSTOM_GRAPH_THERMOMETER:
|
||||
$datelimit = $date - $period;
|
||||
$i = 0;
|
||||
foreach ($module_list as $module_item) {
|
||||
$automatic_custom_graph_meta = false;
|
||||
if ($config['metaconsole']) {
|
||||
// Automatic custom graph from the report template in metaconsole
|
||||
if (is_array($module_list[$i])) {
|
||||
$server = metaconsole_get_connection_by_id ($module_item['server']);
|
||||
metaconsole_connect($server);
|
||||
$automatic_custom_graph_meta = true;
|
||||
}
|
||||
}
|
||||
|
||||
if ($automatic_custom_graph_meta)
|
||||
$module = $module_item['module'];
|
||||
else
|
||||
$module = $module_item;
|
||||
|
||||
$temp[$module] = modules_get_agentmodule($module);
|
||||
$query_last_value = sprintf('
|
||||
SELECT datos
|
||||
FROM tagente_datos
|
||||
WHERE id_agente_modulo = %d
|
||||
AND utimestamp < %d
|
||||
ORDER BY utimestamp DESC',
|
||||
$module, $date);
|
||||
$temp_data = db_get_value_sql($query_last_value);
|
||||
if ( $temp_data ) {
|
||||
if (is_numeric($temp_data))
|
||||
$value = $temp_data;
|
||||
else
|
||||
$value = count($value);
|
||||
}
|
||||
else {
|
||||
$value = false;
|
||||
}
|
||||
$temp[$module]['label'] = ($labels[$module] != '') ? $labels[$module] : $temp[$module]['nombre'];
|
||||
|
||||
$temp[$module]['value'] = $value;
|
||||
$temp[$module]['label'] = ui_print_truncate_text($temp[$module]['label'],"module_small",false,true,false,"..");
|
||||
|
||||
if ($temp[$module]['unit'] == '%') {
|
||||
$temp[$module]['min'] = 0;
|
||||
$temp[$module]['max'] = 100;
|
||||
}
|
||||
else {
|
||||
$min = $temp[$module]['min'];
|
||||
if ($temp[$module]['max'] == 0)
|
||||
$max = reporting_get_agentmodule_data_max($module,$period,$date);
|
||||
else
|
||||
$max = $temp[$module]['max'];
|
||||
$temp[$module]['min'] = ($min == 0 ) ? 0 : $min;
|
||||
$temp[$module]['max'] = ($max == 0 ) ? 100 : $max;
|
||||
}
|
||||
$temp[$module]['gauge'] = uniqid('gauge_');
|
||||
|
||||
if ($config['metaconsole']) {
|
||||
// Automatic custom graph from the report template in metaconsole
|
||||
if (is_array($module_list[0])) {
|
||||
metaconsole_restore_db();
|
||||
}
|
||||
}
|
||||
$i++;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
if (!is_null($percentil) && $percentil) {
|
||||
foreach ($graph_values as $graph_group => $point) {
|
||||
|
@ -2376,6 +2442,13 @@ function graphic_combined_module ($module_list, $weight_list, $period,
|
|||
"", "", $water_mark, $config['fontpath'], $fixed_font_size,
|
||||
"", $ttl, $homeurl, $background_color);
|
||||
break;
|
||||
case CUSTOM_GRAPH_THERMOMETER:
|
||||
return stacked_thermometers($flash_charts, $graph_values,
|
||||
$width, $height, $color, $module_name_list, $long_index,
|
||||
ui_get_full_url("images/image_problem_area_small.png", false, false, false),
|
||||
"", "", $water_mark, $config['fontpath'], $fixed_font_size,
|
||||
"", $ttl, $homeurl, $background_color);
|
||||
break;
|
||||
case CUSTOM_GRAPH_HBARS:
|
||||
return hbar_graph($flash_charts, $graph_values,
|
||||
$width, $height, $color, $module_name_list, $long_index,
|
||||
|
|
|
@ -531,6 +531,33 @@ function stacked_gauge($flash_chart, $chart_data, $width, $height,
|
|||
);
|
||||
}
|
||||
|
||||
function stacked_thermometers($flash_chart, $chart_data, $width, $height,
|
||||
$color, $legend, $long_index, $no_data_image, $xaxisname = "",
|
||||
$yaxisname = "", $water_mark = "", $font = '', $font_size = '',
|
||||
$unit = '', $ttl = 1, $homeurl = '', $backgroundColor = 'white') {
|
||||
|
||||
include_once('functions_d3.php');
|
||||
|
||||
setup_watermark($water_mark, $water_mark_file, $water_mark_url);
|
||||
|
||||
if (empty($chart_data)) {
|
||||
return '<img src="' . $no_data_image . '" />';
|
||||
}
|
||||
|
||||
return d3_thermometers(
|
||||
$chart_data,
|
||||
$width,
|
||||
$height,
|
||||
$color,
|
||||
$legend,
|
||||
$homeurl,
|
||||
$unit,
|
||||
$font,
|
||||
$font_size + 2,
|
||||
$no_data_image
|
||||
);
|
||||
}
|
||||
|
||||
function line_graph($flash_chart, $chart_data, $width, $height, $color,
|
||||
$legend, $long_index, $no_data_image, $xaxisname = "",
|
||||
$yaxisname = "", $water_mark = "", $font = '', $font_size = '',
|
||||
|
|
|
@ -285,6 +285,31 @@ function d3_gauges($chart_data, $width, $height, $color, $legend,
|
|||
return $output;
|
||||
}
|
||||
|
||||
function d3_thermometers($chart_data, $width, $height, $color, $legend,
|
||||
$homeurl, $unit, $font, $font_size, $no_data_image) {
|
||||
global $config;
|
||||
|
||||
foreach ($chart_data as $key => $value) {
|
||||
$chart_data[$key]['agent_name'] = agents_get_alias($chart_data[$key]['id_agente']);
|
||||
$chart_data[$key]['label'] = io_safe_output($chart_data[$key]['label']);
|
||||
}
|
||||
|
||||
if (is_array($chart_data))
|
||||
$data = json_encode($chart_data);
|
||||
$output = include_javascript_d3(true);
|
||||
|
||||
$count = 0;
|
||||
|
||||
$output .= "<div id='thermometers_div' style='float:left; overflow: hidden; margin-left: 10px;'></div>";
|
||||
|
||||
$output .= "<script language=\"javascript\" type=\"text/javascript\">
|
||||
var data = $data;
|
||||
createthermometers(data, '$width', '$height','$font_size','$no_data_image','$font');
|
||||
</script>";
|
||||
|
||||
return $output;
|
||||
}
|
||||
|
||||
function ux_console_phases_donut ($phases, $id, $return = false) {
|
||||
global $config;
|
||||
|
||||
|
@ -638,7 +663,6 @@ function print_clock_digital_1 ($time_format, $timezone, $clock_animation,$width
|
|||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
';
|
||||
|
||||
|
||||
|
|
|
@ -1061,6 +1061,228 @@ function createGauges(data, width, height, font_size, no_data_image, font) {
|
|||
|
||||
}
|
||||
|
||||
function createthermometers(data, width, height, font_size, no_data_image, font) {
|
||||
|
||||
for (var variable in data) {
|
||||
module_data = data[variable];
|
||||
}
|
||||
|
||||
// var svg = d3.select('.databox,.filters td')
|
||||
|
||||
var svg = d3.select('#thermometers_div')
|
||||
.append("svg")
|
||||
.attr("width", 250)
|
||||
.attr("height", 400);
|
||||
|
||||
|
||||
var rect = svg.append("rect")
|
||||
.attr("x", 50)
|
||||
.attr("y", 50)
|
||||
.attr("width", 150)
|
||||
.attr("height", 330)
|
||||
.attr("fill", "black")
|
||||
.attr("stroke-width", 5)
|
||||
.attr("stroke", "rgb(37,133,177)")
|
||||
.attr("rx", "10")
|
||||
.attr("ry", "10")
|
||||
.attr("fill", "rgb(235,235,235)");
|
||||
|
||||
var circle = svg.append("circle")
|
||||
.attr("cx", 130)
|
||||
.attr("cy", 280)
|
||||
.attr("r", 12)
|
||||
.attr("height", 300)
|
||||
.attr("fill", "rgb(74,185,197)");
|
||||
|
||||
var progress_back = svg.append('rect')
|
||||
.attr('fill', 'rgb(51,51,53)')
|
||||
.attr('height', 200)
|
||||
.attr('width', 12)
|
||||
.attr('x', 123)
|
||||
.attr('y', 70);
|
||||
|
||||
|
||||
|
||||
var defs = svg.append("defs");
|
||||
|
||||
var gradient = defs.append("linearGradient")
|
||||
.attr("id", "svgGradient")
|
||||
.attr("x1", "0%")
|
||||
.attr("x2", "0%")
|
||||
.attr("y1", "100%")
|
||||
.attr("y2", "0%");
|
||||
|
||||
gradient.append("stop")
|
||||
.attr('class', 'start')
|
||||
.attr("offset", "0%")
|
||||
.attr("stop-color", "rgb(74,185,197)");
|
||||
|
||||
if(parseFloat(module_data.value) >= parseFloat(module_data.min_warning) && parseFloat(module_data.value) < parseFloat(module_data.min_critical)){
|
||||
gradient.append("stop")
|
||||
.attr('class', 'end')
|
||||
.attr("offset", "100%")
|
||||
.attr("stop-color", "yellow");
|
||||
}
|
||||
else if((module_data.min_critical != 0 && module_data.max_critical != 0) && parseFloat(module_data.value) >= parseFloat(module_data.min_critical) && (parseFloat(module_data.value) <= parseFloat(module_data.max_critical) || parseFloat(module_data.max_critical) == 0)){
|
||||
gradient.append("stop")
|
||||
.attr('class', 'end')
|
||||
.attr("offset", "100%")
|
||||
.attr("stop-color", "red");
|
||||
}
|
||||
else{
|
||||
gradient.append("stop")
|
||||
.attr('class', 'end')
|
||||
.attr("offset", "100%")
|
||||
.attr("stop-color", "rgb(130,185,46)");
|
||||
}
|
||||
|
||||
var progress_front = svg.append('rect')
|
||||
.attr('fill', 'red')
|
||||
.attr('height', 0)
|
||||
.attr('width', 12)
|
||||
.attr('x', 123)
|
||||
.attr('y', 270)
|
||||
.attr("fill", "url(#svgGradient)");
|
||||
|
||||
if(module_data.value.toString().indexOf('.') != -1){
|
||||
if(Math.trunc(module_data.value).toString().length > 1){
|
||||
module_data.value = Math.trunc(module_data.value);
|
||||
}
|
||||
else {
|
||||
module_data.value = parseFloat(module_data.value).toFixed(2);
|
||||
}
|
||||
}
|
||||
|
||||
if(module_data.value >= 1000){
|
||||
module_data.value_label = Math.trunc(module_data.value/1000);
|
||||
var text = svg.append("text")
|
||||
.attr("x", 100)
|
||||
.attr("y", 320)
|
||||
.style("font-size", "1.5em")
|
||||
.text(module_data.value_label+"k"+" ["+module_data.unit+"]");
|
||||
}
|
||||
else{
|
||||
var text = svg.append("text")
|
||||
.attr("x", 100)
|
||||
.attr("y", 320)
|
||||
.style("font-size", "1.5em")
|
||||
.text(module_data.value+" ["+module_data.unit+"]");
|
||||
}
|
||||
|
||||
|
||||
agent_text = module_data.agent_name;
|
||||
|
||||
if(agent_text.length > 12){
|
||||
agent_text = agent_text.substring(0, 10)+"...";
|
||||
}
|
||||
|
||||
var text = svg.append("text")
|
||||
.attr("x", 65)
|
||||
.attr("y", 370)
|
||||
.style("font-size", "1.5em")
|
||||
.text(agent_text);
|
||||
|
||||
|
||||
label_text = module_data.label;
|
||||
|
||||
if(label_text.length > 12){
|
||||
label_text = label_text.substring(0, 10)+"...";
|
||||
}
|
||||
|
||||
var text = svg.append("text")
|
||||
.attr("x", 65)
|
||||
.attr("y", 350)
|
||||
.style("font-size", "1.5em")
|
||||
.text(label_text);
|
||||
|
||||
var temp_sum = module_data.max-module_data.min;
|
||||
var div_sum = (temp_sum/10);
|
||||
var max_temp = module_data.max;
|
||||
var min_temp = module_data.min;
|
||||
var y = 75;
|
||||
|
||||
var count = 0;
|
||||
|
||||
var startPercent = 0;
|
||||
var endPercent = module_data.value * 200 / max_temp;
|
||||
|
||||
var step = endPercent / 20;
|
||||
|
||||
while (max_temp >= min_temp) {
|
||||
|
||||
if(count != 9){
|
||||
if(max_temp.toString().indexOf('.') != -1){
|
||||
if(Math.trunc(max_temp).toString().length > 1){
|
||||
max_temp = Math.trunc(max_temp);
|
||||
}
|
||||
else {
|
||||
max_temp = parseFloat(max_temp).toFixed(2);
|
||||
}
|
||||
}
|
||||
|
||||
if(max_temp >= 1000){
|
||||
max_temp_label = Math.trunc(max_temp/1000);
|
||||
var text = svg.append("text")
|
||||
.attr("x", 160)
|
||||
.attr("y", y)
|
||||
.style("font-size", "1.2em")
|
||||
.text(max_temp_label+'k');
|
||||
}
|
||||
else{
|
||||
var text = svg.append("text")
|
||||
.attr("x", 160)
|
||||
.attr("y", y)
|
||||
.style("font-size", "1.2em")
|
||||
.text(max_temp);
|
||||
}
|
||||
|
||||
var line = svg.append("line")
|
||||
.attr("x1", 142)
|
||||
.attr("y1", y-4)
|
||||
.attr("x2", 153)
|
||||
.attr("y2", y-4)
|
||||
.attr("stroke", "black")
|
||||
.style("font-size", "1.2em")
|
||||
.text(max_temp);
|
||||
|
||||
y += 20;
|
||||
|
||||
max_temp = max_temp-div_sum;
|
||||
}
|
||||
if(count==10){
|
||||
max_temp = module_data.min;
|
||||
}
|
||||
|
||||
count++;
|
||||
}
|
||||
|
||||
|
||||
|
||||
function updateProgress(bar_progress) {
|
||||
var bar_progress = Number(bar_progress);
|
||||
progress_front.attr('height', (bar_progress));
|
||||
progress_front.attr('y', (270-bar_progress));
|
||||
}
|
||||
|
||||
var bar_progress = startPercent;
|
||||
|
||||
(function loops() {
|
||||
updateProgress(bar_progress);
|
||||
|
||||
if (bar_progress < endPercent) {
|
||||
bar_progress += step;
|
||||
setTimeout(loops, 30);
|
||||
}
|
||||
else{
|
||||
delete data[module_data['id_agente_modulo']];
|
||||
if(Object.keys(data).length > 0){
|
||||
createthermometers(data, width, height, font_size, no_data_image, font)
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
}
|
||||
|
||||
|
||||
function Gauge(placeholderName, configuration, font)
|
||||
{
|
||||
|
|
|
@ -124,6 +124,12 @@ if ($view_graph) {
|
|||
$height = $graph["height"];
|
||||
}
|
||||
|
||||
if ($stacked == CUSTOM_GRAPH_THERMOMETER ){
|
||||
// Use the defined graph height, that's why
|
||||
// the user can setup graph height.
|
||||
$height = $graph["height"];
|
||||
}
|
||||
|
||||
$name = $graph["name"];
|
||||
if (($graph["private"]==1) && ($graph["id_user"] != $id_user)) {
|
||||
db_pandora_audit("ACL Violation",
|
||||
|
@ -235,6 +241,7 @@ if ($view_graph) {
|
|||
$stackeds[CUSTOM_GRAPH_HBARS] = __('Horizontal Bars');
|
||||
$stackeds[CUSTOM_GRAPH_VBARS] = __('Vertical Bars');
|
||||
$stackeds[CUSTOM_GRAPH_PIE] = __('Pie');
|
||||
$stackeds[CUSTOM_GRAPH_THERMOMETER] = __('Thermometer');
|
||||
html_print_select ($stackeds, 'stacked', $stacked , '', '', -1, false, false);
|
||||
echo "</td>";
|
||||
|
||||
|
|
Loading…
Reference in New Issue