New graph thermometer - #2214

This commit is contained in:
enriquecd 2018-05-04 11:13:26 +02:00
parent 7bb3fb8077
commit 734c52d8bd
7 changed files with 357 additions and 2 deletions

View File

@ -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);

View File

@ -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);

View File

@ -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,

View File

@ -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 = '',

View File

@ -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>
';

View File

@ -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)
{

View File

@ -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>";