Statistics - JS and templates to manage graphs and tables

2 files changed, 314 insertions, 0 deletions

diff --git a/ishtar_common/static/js/ishtar-map.js b/ishtar_common/static/js/ishtar-map.js
index 1b0d4384b..a93813e61 100644
--- a/ishtar_common/static/js/ishtar-map.js
+++ b/ishtar_common/static/js/ishtar-map.js
@@ -27,6 +27,41 @@ var geolocation = {};
 var geoloc_feature = {};
 var geoloc_activated = {};
 
+var fetching_msg = "Fetching data...";
+
+var _map_submit_search = function(query_vars, name, source){
+    var modal_base_text = $('.modal-progress .modal-header').html();
+    $('.modal-progress .modal-header').html(fetching_msg);
+    $('.modal-progress').modal('show');
+    var data = search_get_query_data(query_vars, name);
+    var nb_select = jQuery("#id_" + name + "-length_map").val();
+    if (!nb_select) nb_select = 10;
+
+    var url = source + "json-map?length=" + nb_select + "&submited=1&" + data;
+    var use_map_limit = false;
+    if(data.indexOf("no_limit=true") == -1){
+        url += "&limit=" + current_map_limit;
+        use_map_limit = true;
+    }
+    $.getJSON(url, function(data) {
+        var timestamp = Math.floor(Date.now() / 1000);
+        var map_id = "map-" + timestamp;
+        $('.modal-progress .modal-header').html("{% trans 'Render map...' %}");
+
+        var html = render_map(map_id, use_map_limit);
+        $("#tab-content-map-" + name).html(html);
+        $("#id_" + name + "-length_map").change(map_submit_search);
+        if ($('.modal-progress').length > 0){
+            $('.modal-progress').modal('hide');
+            $('.modal-progress .modal-header').html(modal_base_text);
+        }
+        register_map(map_id, data);
+    });
+
+    return false;
+
+};
+
 
 var geoloc_activated_message = function(map_id){
     setTimeout(function(){
diff --git a/ishtar_common/static/js/ishtar.js b/ishtar_common/static/js/ishtar.js
index 2527c1bd7..54823968c 100644
--- a/ishtar_common/static/js/ishtar.js
+++ b/ishtar_common/static/js/ishtar.js
@@ -1095,6 +1095,33 @@ var get_hover_div = function(table_cols, data){
     return hover;
 };
 
+var _gallery_submit_search = function(image_page, query_vars, name, source){
+    if (image_page) {
+        current_image_page = image_page;
+    } else {
+        current_image_page = 1;
+    }
+    $('.modal-progress').modal('show');
+    var data = search_get_query_data(query_vars, name);
+    var nb_select = jQuery("#id_" + name + "-length_image").val();
+    if (!nb_select) nb_select = 10;
+
+    var url = source + "json-image?length=" + nb_select + "&submited=1&" + data;
+    $.getJSON(url, function(data) {
+        var timestamp = Math.floor(Date.now() / 1000);
+        var gallery_id = "gallery-" + timestamp;
+        $("#tab-content-gallery-" + name).html(
+            render_gallery(data, name, nb_select, gallery_id));
+        $("#id_" + name + "-length_image").change(gallery_submit_search);
+        register_image_gallery(gallery_id);
+        $('.card[data-toggle="tooltip"]').tooltip();
+        if ($('.modal-progress').length > 0){
+            $('.modal-progress').modal('hide');
+        }
+    });
+    return false;
+}
+
 var render_gallery = function(data_table, table_name, nb_select, gallery_id){
     var html = '<div class="ishtar-gallery-wrapper container-fluid">';
     html += render_paginate_select(table_name, 'image', nb_select);
@@ -1343,6 +1370,7 @@ var register_map = function(map_id, points){
 var main_submit_search = function(){
     if (current_tab == "table") datatable_submit_search();
     if (current_tab == "gallery") gallery_submit_search();
+    if (current_tab == "stats") stats_submit_search();
     if (current_tab == "map") map_submit_search();
 };
 
@@ -1376,3 +1404,254 @@ var search_get_query_data = function(query_vars, table_name){
     }
     return data;
 };
+
+var registered_stats = false;
+
+var register_stats = function(query_vars, name, source){
+    if (registered_stats) return;
+    registered_stats = true;
+    $("#stats-form-" + name + " select").on('change', function() {
+            _stats_submit_search(query_vars, name, source);
+        }
+    );
+    $('#chart-img-display-' + name).click(function(){
+        $('#chart-img-' + name).hide();
+        $('#img-' + name).html(
+        $('<img/>').attr(
+                'src', $('#chart-' + name).jqplotToImageStr({})
+        )
+        );
+        $('#chart-img-' + name).show('slow');
+    });
+};
+
+var _stats_submit_search = function(query_vars, name, source){
+    $('.modal-progress').modal('show');
+
+    var data = search_get_query_data(query_vars, name);
+    register_stats(query_vars, name, source);
+
+    var url = source + "json-stats?submited=1&" + data;
+    var modality_1 = $("#stats_modality_1-" + name).val();
+    if (modality_1) url += '&stats_modality_1=' + modality_1;
+    var modality_2 = $("#stats_modality_2-" + name).val();
+    if (modality_2) url += '&stats_modality_2=' + modality_2;
+    $.getJSON(url, function(data) {
+        var timestamp = Math.floor(Date.now() / 1000);
+        var stats_id = "stats-" + timestamp;
+        $("#tab-content-stats-" + name).html(
+            render_stats(data, name));
+        if ($('.modal-progress').length > 0){
+            $('.modal-progress').modal('hide');
+        }
+    });
+    return false;
+}
+
+var stats_showmarker = false;
+var stats_incompatible_modality = "This graph type accept only one modality.";
+var stats_current_graph;
+
+var _render_stats_table = function(stats_values, name){
+    var modality_1 = $("#stats_modality_1-" + name).val();
+    var modality_2 = $("#stats_modality_2-" + name).val();
+    var rows = new Array();
+
+    var current_row = new Array();
+    var html = "";
+    html += "<table class='table w-75 mt-4 pt-4 mx-auto'><thead>";
+    html += "<tr><th>";
+    var modality_1_lbl = $('#stats_modality_1-' + name + ' option:selected').text();
+    current_row.push(modality_1_lbl);
+    html += modality_1_lbl;
+    if (modality_2 && modality_2 != modality_1){
+        html += "</th><th>";
+        var modality_2_lbl = $('#stats_modality_2-' + name + ' option:selected').text();
+        html += modality_2_lbl;
+        current_row.push(modality_2_lbl);
+    }
+    html += "</th><th>";
+    var sum_lbl = $('#stats_sum-' + name + ' option:selected').text();
+    html += sum_lbl;
+    current_row.push(sum_lbl);
+    html += "</th></tr></thead><tbody>";
+    rows.push(current_row);
+
+    if (modality_2 && modality_2 != modality_1){
+        for (idx in stats_values){
+            var start_row = "";
+            row_content = "";
+            for (inner_idx in stats_values[idx][1]){
+                current_row = new Array();
+                var colspan = parseInt(inner_idx) + 1;
+                start_row = "<tr><td rowspan='" + colspan + "'>" + stats_values[idx][0] + "</td>";
+                current_row.push(stats_values[idx][0]);
+                if (inner_idx > 0) row_content += "<tr>";
+                row_content += "<td>" + stats_values[idx][1][inner_idx][0] + "</td>";
+                current_row.push(stats_values[idx][1][inner_idx][0]);
+                row_content += "<td>" + stats_values[idx][1][inner_idx][1] + "</td></tr>";
+                current_row.push(stats_values[idx][1][inner_idx][1]);
+                rows.push(current_row);
+            }
+            html += start_row + row_content;
+        }
+    } else {
+        for (idx in stats_values){
+            current_row = new Array();
+            html += "<tr><td>" + stats_values[idx][0] + "</td>";
+            current_row.push(stats_values[idx][0]);
+            html += "<td>" + stats_values[idx][1] + "</td></tr>";
+            current_row.push(stats_values[idx][1]);
+            rows.push(current_row);
+        }
+    }
+
+    html += "</tbody></table>";
+    $("#charts-" + name).hide();
+    $("#stats-table-content-" + name).html(html);
+    $("#stats-table-" + name).show();
+
+    var csv_content = "data:text/csv;charset=utf-8," + rows.map(e => e.join(",")).join("\n");
+    var encoded_uri = encodeURI(csv_content);
+    $("#stats-table-csv-" + name).attr("href", encoded_uri);
+    $("#stats-table-csv-" + name).attr("download", "ishtar-stats.csv");
+};
+
+var render_stats = function(stats_values, name){
+    var stats_type = $("#stats_renderer-" + name).val();
+
+    if (!stats_values || !stats_values['data']) return;
+    stats_values = stats_values['data'];
+
+    if (stats_current_graph){
+        stats_current_graph.destroy();
+    }
+    if (stats_type == "table"){
+        return _render_stats_table(stats_values, name);
+    }
+
+    $("#stats-table-" + name).hide();
+    $("#charts-" + name).show();
+    var modality_1 = $("#stats_modality_1-" + name).val();
+    var modality_2 = $("#stats_modality_2-" + name).val();
+    
+    stats_xaxis = {
+        label: $('#stats_modality_1-' + name + ' option:selected').text()
+    };
+    
+    var stats_help = $("#stats-zoom-help-" + name);
+
+    if (stats_type == "pie"){
+        stats_help.hide();
+        if (modality_2){
+            display_info(stats_incompatible_modality);
+            return;
+        }
+    } else {
+        stats_help.show();
+        var stats_xaxis_tickoptions;
+        if (modality_1 == "year"){
+            stats_xaxis_tickoptions = {formatString: "%d"};
+        } else {
+            stats_xaxis_tickoptions = {angle:-25};
+        }
+        stats_xaxis["tickOptions"] = stats_xaxis_tickoptions
+    }
+    
+    var stats_showmarker = false;
+    if (stats_values.length < 25){
+        stats_showmarker = true;
+    }
+    var jqvalues = new Array();
+    var ticks = new Array();
+    var series = new Array();
+    var series_conf = new Array();
+    if (modality_2 && modality_2 != modality_1){
+        for (idx in stats_values){
+            ticks.push(stats_values[idx][0]);
+            var serie_values = stats_values[idx][1];
+            var current_serie_values = new Array();
+            for (inner_idx in serie_values){
+                var serie_value = serie_values[inner_idx][0];
+                if (series.indexOf(serie_value) == -1){
+                    series.push(serie_value);
+                    var fill_values = new Array();
+                    if (idx > 0){ // put 0 for previous items
+                        for (var fill_idx = 0 ; fill_idx < idx ; fill_idx++ ){
+                            fill_values.push(0);
+                        }
+                    }
+                    jqvalues.push(fill_values);
+                }
+                current_serie_values.push(serie_value);
+                var current_value = serie_values[inner_idx][1];
+                jqvalues[series.indexOf(serie_value)].push(current_value);
+            }
+            // put 0 for missing series for this item
+            for (idx_serie in series){
+                if (current_serie_values.indexOf(series[idx_serie]) == -1){
+                    jqvalues[series.indexOf(series[idx_serie])].push(0);
+                }
+            }
+        }
+        stats_xaxis['ticks'] = ticks;
+    } else {
+        jqvalues = [stats_values];
+        series.push("Total");
+    }
+    if (stats_type != "pie"){
+        stats_xaxis['renderer'] = $.jqplot.CategoryAxisRenderer;
+        stats_xaxis['labelRenderer'] = $.jqplot.CanvasAxisLabelRenderer;
+        stats_xaxis['tickRenderer'] = $.jqplot.CanvasAxisTickRenderer;
+    }
+
+    var stats_renderer;
+    if (stats_type == "bar"){
+        stats_renderer = $.jqplot.BarRenderer;
+    } else if (stats_type == "pie"){
+        stats_renderer = $.jqplot.PieRenderer;
+    }
+    for (idx in series){
+        var serie_conf = {
+            label: series[idx],
+            showmarker: stats_showmarker
+        };
+        if (stats_renderer){
+            serie_conf["renderer"] = stats_renderer;
+        }
+        serie_conf["rendererOptions"] = {
+            padding: 8, showDataLabels: true,
+            dataLabels: 'value',
+            fill: false, sliceMargin: 4
+        };
+        series_conf.push(serie_conf);
+    }
+    
+    var stats_options = {
+            axes: {
+                xaxis: stats_xaxis,
+                yaxis: {
+                    label: $('#stats_sum-' + name + ' option:selected').text(),
+                    min: 0
+                }
+            },
+            highlighter: {
+                show: true,
+                tooltipAxes: 'y',
+                sizeAdjust: 7.5
+            },
+            series: series_conf,
+            legend: { show:true, location: 'e', placement: 'outside' }
+    };
+    if (stats_type != "pie"){
+        stats_options["cursor"] = {
+                show: true,
+                zoom: true,
+                showTooltip: false
+        }
+    }
+
+    stats_current_graph = $.jqplot('chart-' + name,
+        jqvalues, stats_options
+    );
+};