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

pandora_console/include/ajax/events.php

@@ -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;
+}

pandora_console/include/functions_events.php

@@ -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;
+}

pandora_console/include/graphs/fgraph.php

@@ -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 = [];

pandora_console/operation/events/events.php

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