#12153 Create button and ajax request

This commit is contained in:
miguel angel rasteu 2023-10-04 12:41:23 +02:00
parent b9f94050a2
commit 874cb9c52a
3 changed files with 198 additions and 1 deletions

View File

@ -92,6 +92,8 @@ $get_id_source_event = get_parameter('get_id_source_event');
$node_id = (int) get_parameter('node_id', 0);
$settings_modal = get_parameter('settings', 0);
$parameters_modal = get_parameter('parameters', 0);
$draw_events_graph = get_parameter('drawEventsGraph', false);
// User private filter.
$current_filter = get_parameter('current_filter', 0);
$private_filter_event = get_parameter('private_filter_event', 0);
@ -2759,3 +2761,12 @@ if ($draw_row_response_info === true) {
echo $output;
return;
}
if ((bool) $draw_events_graph === true) {
$filter = get_parameter('filter');
$output = '';
hd($filter, true);
$output .= '<h1>grafica</h1>';
echo $output;
return;
}

View File

@ -6203,3 +6203,93 @@ function event_get_counter_extraId(array $event, ?array $filters)
return $counters;
}
function event_print_graph(
$filter,
$start_utimestamp,
$end_utimestamp,
$graph_width,
$graph_height,
) {
global $config;
$num_data = 10;
$num_intervals = ($num_data > 75) ? 75 : $num_data;
$period = ($end_utimestamp - $start_utimestamp);
if ($period <= SECONDS_6HOURS) {
$chart_time_format = 'H:i:s';
} else if ($period < SECONDS_1DAY) {
$chart_time_format = 'H:i';
} else if ($period < SECONDS_15DAYS) {
$chart_time_format = 'M d H:i';
} else if ($period < SECONDS_1MONTH) {
$chart_time_format = 'M d H\h';
} else {
$chart_time_format = 'M d H\h';
}
$interval_length = (int) ($period / $num_intervals);
$currentutimestamp = $start_utimestamp;
for ($i = 0; $i < $num_intervals; $i++) {
if ($currentutimestamp === $start_utimestamp) {
$filter['aggs']['messages']['filters']['filters'][$i]['range']['utimestamp'] = [
'gte' => $currentutimestamp,
'lte' => ($currentutimestamp + $interval_length),
];
} else if ($currentutimestamp === $end_utimestamp) {
$filter['aggs']['messages']['filters']['filters'][$i]['range']['utimestamp'] = [
'gt' => $currentutimestamp,
'lte' => $end_utimestamp,
];
} else {
$filter['aggs']['messages']['filters']['filters'][$i]['range']['utimestamp'] = [
'gt' => $currentutimestamp,
'lte' => ($currentutimestamp + $interval_length),
];
}
$currentutimestamp += $interval_length;
}
$chart = [];
$labels = [];
$color = [];
$currentutimestamp = $start_utimestamp;
for ($i = 0; $i < $num_intervals; $i++,$currentutimestamp += $interval_length) {
$labels[] = date($chart_time_format, $currentutimestamp);
$chart[] = [
'y' => 1,
'x' => date($chart_time_format, $currentutimestamp),
];
$color[] = '#82b92f';
}
$water_mark = [
'file' => $config['homedir'].'/images/logo_vertical_water.png',
'url' => ui_get_full_url('/images/logo_vertical_water.png'),
];
$options = [
'height' => $graph_height,
'waterMark' => $water_mark,
'legend' => ['display' => false],
'colors' => $color,
'scales' => [
'x' => [
'grid' => ['display' => false],
],
'y' => [
'grid' => ['display' => false],
],
],
'labels' => $labels,
];
$graph = '<div style="width:100%; height: '.$graph_height.'px; margin-bottom: 10px;margin-top: 50px;">';
$graph .= vbar_graph($chart, $options);
$graph .= '</div>';
echo $graph;
}

View File

@ -2609,6 +2609,27 @@ try {
// Open current filter quick reference.
$active_filters_div = '<div class="filter_summary">';
$active_filters_div .= '<div>';
$active_filters_div .= '<div class="label box-shadow">'.__('Show graph').'</div>';
$active_filters_div .= html_print_div(
[
'class' => 'content',
'style' => 'padding-top: 5px !important;',
'content' => html_print_checkbox_switch_extended(
'show_event_graph',
1,
false,
false,
'',
'',
true
),
],
true
);
$active_filters_div .= '</div>';
// Current filter.
$active_filters_div .= '<div>';
$active_filters_div .= '<div class="label box-shadow">'.__('Current filter').'</div>';
@ -2695,6 +2716,43 @@ try {
$show_hide_filters = 'invisible';
}
// Print graphs
$graph_background = '';
if ($config['style'] === 'pandora') {
$graph_background = ' background-color: #fff;';
} else if ($config['style'] === 'pandora_black') {
$graph_background = ' background-color: #222;';
}
$graph_div = html_print_div(
[
'id' => 'events-graph',
'class' => 'mrgn_top_10px mrg_btt_60 invisible',
'style' => 'text-align: left;'.$graph_background,
],
true
);
$graph_div .= html_print_div(
[
'id' => 'events-graph-loading',
'class' => 'center invisible',
'content' => html_print_image(
'images/spinner.gif',
true,
[
'title' => __('Loading'),
'class' => 'invert_filter',
]
),
],
true
);
hd(get_parameter('filter'), true);
// Print datatable.
html_print_div(
[
@ -2718,7 +2776,7 @@ try {
'inputs' => [],
'extra_buttons' => $buttons,
],
'extra_html' => $active_filters_div,
'extra_html' => $active_filters_div.$graph_div,
'pagination_options' => [
[
$config['block_size'],
@ -3266,6 +3324,19 @@ function reorder_tags_inputs() {
}
/* Tag management ends */
$(document).ready( function() {
let hidden_graph = true;
$('#checkbox-show_event_graph').on('change', function(){
if (hidden_graph == true) {
hidden_graph = false;
$('#events-graph').removeClass('invisible');
show_events_graph();
} else {
hidden_graph = true;
$('#events-graph').html();
$('#events-graph').addClass('invisible');
}
});
let refresco = <?php echo get_parameter('refr', 0); ?>;
$('#refresh option[value='+refresco+']').attr('selected', 'selected');
@ -3646,4 +3717,29 @@ function show_event_dialo(event, dialog_page) {
);
return false;
}
function show_events_graph(){
var inputs = $("#events_form :input");
var values = {};
inputs.each(function() {
values[this.name] = $(this).val();
});
$.ajax({
method: 'POST',
url: '<?php echo ui_get_full_url('ajax.php'); ?>',
data: {
page: 'include/ajax/events',
drawEventsGraph: true,
filter: values
},
success: function (data){
$('#events-graph')
.empty()
.html(data);
console.log('success');
console.log(data);
}
});
}
</script>