Merge branch 'ent-12153-grafica-de-eventos-a-lo-largo-del-tiempo-en-vista-de-eventos' into 'develop'
Ent 12153 grafica de eventos a lo largo del tiempo en vista de eventos See merge request artica/pandorafms!6532
This commit is contained in:
Diego Muñoz-Reja
commit
59bed70175
|
|
@ -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);
|
||||
|
|
@ -2751,3 +2753,10 @@ if ($draw_row_response_info === true) {
|
|||
echo $output;
|
||||
return;
|
||||
}
|
||||
|
||||
if ((bool) $draw_events_graph === true) {
|
||||
$filter = get_parameter('filter');
|
||||
$output = event_print_graph($filter);
|
||||
echo $output;
|
||||
return;
|
||||
}
|
||||
|
|
@ -6205,3 +6205,144 @@ function event_get_counter_extraId(array $event, ?array $filters)
|
|||
|
||||
return $counters;
|
||||
}
|
||||
|
||||
|
||||
function event_print_graph(
|
||||
$filter,
|
||||
$graph_height=100,
|
||||
) {
|
||||
global $config;
|
||||
$show_all_data = false;
|
||||
$events = events_get_all(['te.id_evento', 'te.timestamp', 'te.utimestamp'], $filter, null, null, 'te.utimestamp', true);
|
||||
|
||||
if (empty($filter['date_from']) === false
|
||||
&& empty($filter['time_from']) === false
|
||||
&& empty($filter['date_to']) === false
|
||||
&& empty($filter['time_to']) === false
|
||||
) {
|
||||
$start_utimestamp = strtotime($filter['date_from'].' '.$filter['time_from']);
|
||||
$end_utimestamp = strtotime($filter['date_to'].' '.$filter['time_to']);
|
||||
} else if ($filter['event_view_hr'] !== '') {
|
||||
$start_utimestamp = strtotime('-'.$filter['event_view_hr'].' hours');
|
||||
$end_utimestamp = strtotime('now');
|
||||
} else {
|
||||
$show_all_data = true;
|
||||
$start_utimestamp = $events[0]['utimestamp'];
|
||||
$end_utimestamp = $events[array_key_last($events)]['utimestamp'];
|
||||
}
|
||||
|
||||
$data_events = [];
|
||||
$control_timestamp = $start_utimestamp;
|
||||
$count = 0;
|
||||
foreach ($events as $event) {
|
||||
if ($event['utimestamp'] === $control_timestamp) {
|
||||
$count++;
|
||||
} else {
|
||||
$control_timestamp = $event['utimestamp'];
|
||||
$count = 1;
|
||||
}
|
||||
|
||||
$data_events[$control_timestamp] = $count;
|
||||
}
|
||||
|
||||
$num_data = count($data_events);
|
||||
|
||||
$num_intervals = $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';
|
||||
}
|
||||
|
||||
$chart = [];
|
||||
$labels = [];
|
||||
$color = [];
|
||||
$count = 0;
|
||||
|
||||
if ($show_all_data === true) {
|
||||
foreach ($events as $event) {
|
||||
if ($event['utimestamp'] === $control_timestamp) {
|
||||
$count++;
|
||||
} else {
|
||||
$control_timestamp = $event['utimestamp'];
|
||||
$count = 1;
|
||||
}
|
||||
|
||||
$data_events[$control_timestamp] = $count;
|
||||
}
|
||||
|
||||
$data_events = array_reverse($data_events, true);
|
||||
|
||||
foreach ($data_events as $utimestamp => $count) {
|
||||
$labels[] = date($chart_time_format, $utimestamp);
|
||||
$chart[] = [
|
||||
'y' => $count,
|
||||
'x' => date($chart_time_format, $utimestamp),
|
||||
];
|
||||
$color[] = '#82b92f';
|
||||
}
|
||||
} else {
|
||||
$interval_length = (int) ($period / $num_intervals);
|
||||
$intervals = [];
|
||||
$intervals[0] = $start_utimestamp;
|
||||
for ($i = 0; $i < $num_intervals; $i++) {
|
||||
$intervals[($i + 1)] = ($intervals[$i] + $interval_length);
|
||||
}
|
||||
|
||||
$control_data = [];
|
||||
|
||||
foreach ($data_events as $utimestamp => $count_event) {
|
||||
for ($i = 0; $i < $num_intervals; $i++) {
|
||||
if ((int) $utimestamp > (int) $intervals[$i] && (int) $utimestamp < (int) $intervals[($i + 1)]) {
|
||||
$control_data[(string) $intervals[$i]] += $count_event;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for ($i = 0; $i < $num_intervals; $i++) {
|
||||
$labels[] = date($chart_time_format, $intervals[$i]);
|
||||
$chart[] = [
|
||||
'y' => $control_data[$intervals[$i]],
|
||||
'x' => date($chart_time_format, $intervals[$i]),
|
||||
];
|
||||
$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,
|
||||
'border' => false,
|
||||
'scales' => [
|
||||
'x' => [
|
||||
'grid' => ['display' => false],
|
||||
],
|
||||
'y' => [
|
||||
'grid' => ['display' => false],
|
||||
],
|
||||
],
|
||||
'labels' => $labels,
|
||||
];
|
||||
|
||||
$graph = '<div style="width:100%; height: '.$graph_height.'px;">';
|
||||
$graph .= vbar_graph($chart, $options);
|
||||
$graph .= '</div>';
|
||||
|
||||
return $graph;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1228,6 +1228,12 @@ function get_build_setup_charts($type, $options, $data)
|
|||
) {
|
||||
$colors = $options['colors'];
|
||||
$borders = $options['colors'];
|
||||
if (isset($options['border']) === true && (bool) $options['border'] === false) {
|
||||
$borders = [];
|
||||
foreach ($colors as $color) {
|
||||
$borders[] = 'rgba(0, 0, 0, 0)';
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Colors.
|
||||
$defaultColor = [];
|
||||
|
|
|
|||
|
|
@ -2604,6 +2604,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>';
|
||||
|
|
@ -2690,6 +2711,42 @@ 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' => 'invisible',
|
||||
'style' => 'margin-bottom: 10px; 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
|
||||
);
|
||||
|
||||
|
||||
|
||||
// Print datatable.
|
||||
html_print_div(
|
||||
[
|
||||
|
|
@ -2713,7 +2770,7 @@ try {
|
|||
'inputs' => [],
|
||||
'extra_buttons' => $buttons,
|
||||
],
|
||||
'extra_html' => $active_filters_div,
|
||||
'extra_html' => $active_filters_div.$graph_div,
|
||||
'pagination_options' => [
|
||||
[
|
||||
$config['block_size'],
|
||||
|
|
@ -3261,6 +3318,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');
|
||||
|
|
@ -3426,6 +3496,10 @@ $(document).ready( function() {
|
|||
$("#button-remove_without").click(function() {
|
||||
click_button_remove_tag("without");
|
||||
});
|
||||
|
||||
$("#button-events_form_search_bt").click(function(){
|
||||
show_events_graph();
|
||||
});
|
||||
|
||||
|
||||
//Autorefresh in fullscreen
|
||||
|
|
@ -3641,4 +3715,27 @@ 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);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue