Statistics - JS and templates to manage graphs and tables

3 files changed, 39 insertions, 53 deletions

diff --git a/ishtar_common/templates/base.html b/ishtar_common/templates/base.html
index 8d569711e..f88f1eba6 100644
--- a/ishtar_common/templates/base.html
+++ b/ishtar_common/templates/base.html
@@ -32,6 +32,17 @@
     <script language="javascript" type="text/javascript" src="{{STATIC_URL}}js/ishtar.js?ver={{VERSION}}"></script>
     <script language="javascript" type="text/javascript"
             src="{{STATIC_URL}}datatables/i18n/{{LANGUAGE_CODE}}.js?ver={{VERSION}}"></script>
+    <!-- jqplot -->
+    <script language="javascript" type="text/javascript" src="{{STATIC_URL}}js/jqplot/jquery.jqplot.min.js?ver={{VERSION}}"></script>
+    <script language="javascript" type="text/javascript" src="{{STATIC_URL}}js/jqplot/plugins/jqplot.categoryAxisRenderer.min.js?ver={{VERSION}}"></script>
+    <script language="javascript" type="text/javascript" src="{{STATIC_URL}}js/jqplot/plugins/jqplot.canvasTextRenderer.min.js?ver={{VERSION}}"></script>
+    <script language="javascript" type="text/javascript" src="{{STATIC_URL}}js/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js?ver={{VERSION}}"></script>
+    <script language="javascript" type="text/javascript" src="{{STATIC_URL}}js/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js?ver={{VERSION}}"></script>
+    <script language="javascript" type="text/javascript" src="{{STATIC_URL}}js/jqplot/plugins/jqplot.highlighter.min.js?ver={{VERSION}}"></script>
+    <script language="javascript" type="text/javascript" src="{{STATIC_URL}}js/jqplot/plugins/jqplot.barRenderer.min.js?ver={{VERSION}}"></script>
+    <script language="javascript" type="text/javascript" src="{{STATIC_URL}}js/jqplot/plugins/jqplot.pieRenderer.min.js?ver={{VERSION}}"></script>
+    <script language="javascript" type="text/javascript" src="{{STATIC_URL}}js/jqplot/plugins/jqplot.dateAxisRenderer.min.js?ver={{VERSION}}"></script>
+    <script language="javascript" type="text/javascript" src="{{STATIC_URL}}js/jqplot/plugins/jqplot.cursor.min.js?ver={{VERSION}}"></script>
     {{EXTRA_JS|safe}}
     <script type='text/javascript'>
     var static_path = "{{STATIC_URL}}";
@@ -54,6 +65,8 @@
     var select_only_one_msg = "{% trans "Select only one item." %}";
     var YES = "{% trans 'yes' %}";
     var NO = "{% trans 'no' %}";
+    var fetching_msg = "{% trans 'Fetching data...' %}";
+    var stats_incompatible_modality = "{% trans 'This graph type accept only one modality.' %}";
     var show_msg = "{% trans "Show" %}";
     var entries_msg = "{% trans "entries" %}";
     var info_show_msg = "{% trans "Showing" %}";
@@ -85,6 +98,7 @@
     <link rel="stylesheet" href="{{STATIC_URL}}datatables/dataTables.bootstrap4.min.css?ver={{VERSION}}">
     <link type="text/css" rel="stylesheet" href="{{STATIC_URL}}lightgallery/css/lightgallery.css?ver={{VERSION}}">
     <link rel="stylesheet" href="{{STATIC_URL}}ol/ol.css?ver={{VERSION}}">
+    <link rel="stylesheet" href="{{STATIC_URL}}js/jqplot/jquery.jqplot.min.css?ver={{VERSION}}" />
     <link rel="stylesheet" href="{{STATIC_URL}}media/styles.css?ver={{VERSION}}">
     {% for url_css in JQGRID_CSS %}<link rel="stylesheet" href="{{url_css}}?ver={{VERSION}}">{% endfor %}
     {{EXTRA_CSS|safe}}
diff --git a/ishtar_common/templates/blocks/DataTables-tabs.html b/ishtar_common/templates/blocks/DataTables-tabs.html
index 73653061d..a2f354240 100644
--- a/ishtar_common/templates/blocks/DataTables-tabs.html
+++ b/ishtar_common/templates/blocks/DataTables-tabs.html
@@ -22,6 +22,14 @@
           {% trans "Map" %}
       </a>
   </li>{% endif %}
+  {% if current_model.STATISTIC_MODALITIES %}
+  <li class="nav-item">
+    <a class="nav-link" id="tab-stats-{{name}}" data-toggle="tab"
+       href="#tab-content-stats-{{name}}" role="tab"
+       aria-controls="tab-content-stats-{{name}}" aria-selected="true">
+        {% trans "Statistics" %}
+    </a>
+  </li>{% endif %}
 </ul>
 
 <div class="tab-content">
@@ -38,4 +46,10 @@
        id="tab-content-map-{{name}}" role="tabpanel"
        aria-labelledby="tab-map-{{name}}">
   </div>{% endif %}
+  {% if current_model.STATISTIC_MODALITIES %}
+  <div class="tab-pane"
+       id="tab-content-stats-{{name}}" role="tabpanel"
+       aria-labelledby="tab-stats-{{name}}">
+       {% include "blocks/DataTables-stats.html" %}
+  </div>{% endif %}
 </div>
diff --git a/ishtar_common/templates/blocks/DataTables.html b/ishtar_common/templates/blocks/DataTables.html
index a20a151a9..01aa7519d 100644
--- a/ishtar_common/templates/blocks/DataTables.html
+++ b/ishtar_common/templates/blocks/DataTables.html
@@ -67,6 +67,12 @@ $("#tab-map-{{name}}").click(function(){
     map_submit_search();
 });
 {% endif %}
+{% if current_model.STATISTIC_MODALITIES %}
+$("#tab-stats-{{name}}").click(function(){
+    current_tab = "stats";
+    stats_submit_search();
+});
+{% endif %}
 
 
 var query_vars = new Array({{col_idx|safe}});
@@ -74,65 +80,17 @@ var selItems_{{sname}} = new Array();
 
 {% if gallery %}
 gallery_submit_search = function(image_page){
-    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;
+    return _gallery_submit_search(image_page, query_vars, "{{name}}", "{{source}}");
 };
 {% endif %}
 {% if use_map %}
 map_submit_search = function(){
-    var modal_base_text = $('.modal-progress .modal-header').html();
-    $('.modal-progress .modal-header').html("{% trans 'Fetching data...' %}");
-    $('.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;
+    return _map_submit_search(query_vars, "{{name}}", "{{source}}");
 };
 {% endif %}
+stats_submit_search = function(){
+    return _stats_submit_search(query_vars, "{{name}}", "{{source}}");
+};
 
 datatable_submit_search = function(not_submited){
     var data = search_get_query_data(query_vars, "{{name}}");