Syndication - stats UI

4 files changed, 155 insertions, 109 deletions

diff --git a/ishtar_common/static/js/ishtar.js b/ishtar_common/static/js/ishtar.js
index 8a8cbb8e9..b865c7153 100644
--- a/ishtar_common/static/js/ishtar.js
+++ b/ishtar_common/static/js/ishtar.js
@@ -1501,12 +1501,17 @@ var search_get_query_data = function(query_vars, table_name){
 };
 
 var registered_stats = false;
+var extra_list = new Array();
+var sources = new Array();
 
 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);
+    $("#stats-form-" + name + " select").on('change',
+    	function() {
+            for (idx in extra_list){
+            	_stats_submit_search(query_vars, name, sources[idx], extra_list[idx]);
+            }
         }
     );
     $('#chart-img-display-' + name).click(function(){
@@ -1520,11 +1525,12 @@ var register_stats = function(query_vars, name, source){
     });
 };
 
-var _stats_submit_search = function(query_vars, name, source){
+var _stats_submit_search = function(query_vars, name, source, extra){
+	if (!extra) extra = "";
     $('.modal-progress').modal('show');
 
     var data = search_get_query_data(query_vars, name);
-    register_stats(query_vars, name, source);
+    register_stats(query_vars, name);
 
     var url = source + "json-stats?submited=1&" + data;
     var modality_1 = $("#stats_modality_1-" + name).val();
@@ -1537,7 +1543,8 @@ var _stats_submit_search = function(query_vars, name, source){
         var timestamp = Math.floor(Date.now() / 1000);
         var stats_id = "stats-" + timestamp;
         $("#tab-content-stats-" + name).html(
-            render_stats(data, name));
+            render_stats(data, name, extra)
+        );
         if ($('.modal-progress').length > 0){
             $('.modal-progress').modal('hide');
         }
@@ -1547,7 +1554,7 @@ var _stats_submit_search = function(query_vars, name, source){
 
 var stats_showmarker = false;
 var stats_incompatible_modality = "This graph type accept only one modality.";
-var stats_current_graph;
+var stats_current_graph = new Array();
 
 var _render_stats_empty = function(stats_values, name){
     $("#charts-" + name).hide();
@@ -1563,7 +1570,7 @@ var _render_stats_too_many_values = function(name){
     $("#stats-error-" + name).show();
 }
 
-var _render_stats_table = function(stats_values, name){
+var _render_stats_table = function(stats_values, name, extra){
     var modality_1 = $("#stats_modality_1-" + name).val();
     var modality_2 = $("#stats_modality_2-" + name).val();
     var rows = new Array();
@@ -1625,21 +1632,23 @@ var _render_stats_table = function(stats_values, name){
     }
 
     html += "</tbody></table>";
-    $("#charts-" + name).hide();
-    $("#stats-empty-" + name).hide();
-    $("#stats-error-" + name).hide();
-    $("#stats-table-content-" + name).html(html);
-    $("#stats-table-" + name).show();
+	if (!extra) extra = "default";
+    $("#charts-" + name + "-" + extra).hide();
+    $("#stats-empty-" + name + "-" + extra).hide();
+    $("#stats-error-" + name + "-" + extra).hide();
+    $("#stats-table-content-" + name + "-" + extra).html(html);
+    $("#stats-table-" + name + "-" + extra).show();
 
     var encoded_uri = encodeURI("data:text/csv;charset=utf-8,") + encodeURIComponent(Papa.unparse(rows));
-    $("#stats-table-csv-" + name).attr("href", encoded_uri);
-    $("#stats-table-csv-" + name).attr("download", "ishtar-stats.csv");
+    $("#stats-table-csv-" + name + "-" + extra).attr("href", encoded_uri);
+    $("#stats-table-csv-" + name + "-" + extra).attr("download", "ishtar-stats.csv");
 };
 
 var MAX_STATS_GRAPH_VALUES = 100;
 var MAX_STATS_GRAPH_MODALITY_VALUES = 100;
+var jqvalues = new Array();
 
-var render_stats = function(stats_values, name){
+var render_stats = function(stats_values, name, extra){
     var stats_type = $("#stats_renderer-" + name).val();
 
     if (!stats_values || !stats_values['data']
@@ -1649,11 +1658,12 @@ var render_stats = function(stats_values, name){
 
     stats_values = stats_values['data'];
 
-    if (stats_current_graph){
-        stats_current_graph.destroy();
+	if (!extra) extra = "default";
+    if (stats_current_graph[extra]){
+        stats_current_graph[extra].destroy();
     }
     if (stats_type == "table"){
-        return _render_stats_table(stats_values, name);
+        return _render_stats_table(stats_values, name, extra);
     }
 
 	if (stats_values.length > MAX_STATS_GRAPH_VALUES){
@@ -1667,10 +1677,10 @@ var render_stats = function(stats_values, name){
 		}
 	}
 
-    $("#stats-table-" + name).hide();
-    $("#stats-empty-" + name).hide();
-    $("#stats-error-" + name).hide();
-    $("#charts-" + name).show();
+    $("#stats-table-" + name + "-" + extra).hide();
+    $("#stats-empty-" + name + "-" + extra).hide();
+    $("#stats-error-" + name + "-" + extra).hide();
+    $("#charts-" + name + "-" + extra).show();
     var modality_1 = $("#stats_modality_1-" + name).val();
     var modality_2 = $("#stats_modality_2-" + name).val();
     stats_xaxis = {
@@ -1700,7 +1710,7 @@ var render_stats = function(stats_values, name){
     if (stats_values.length < 25){
         stats_showmarker = true;
     }
-    var jqvalues = new Array();
+    jqvalues[extra] = new Array();
     var ticks = new Array();
     var series = new Array();
     var series_conf = new Array();
@@ -1722,16 +1732,16 @@ var render_stats = function(stats_values, name){
                             fill_values.push(0);
                         }
                     }
-                    jqvalues.push(fill_values);
+                    jqvalues[extra].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);
+                jqvalues[extra][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);
+                    jqvalues[extra][series.indexOf(series[idx_serie])].push(0);
                 }
             }
         }
@@ -1740,7 +1750,7 @@ var render_stats = function(stats_values, name){
         for (idx in stats_values){
             stats_values[idx][0] = text_truncate(stats_values[idx][0], 40);
         }
-        jqvalues = [stats_values];
+        jqvalues[extra] = [stats_values];
         series.push("Total");
         if (stats_type != "pie"){
             legend_conf = {};
@@ -1791,14 +1801,14 @@ var render_stats = function(stats_values, name){
     };
     if (stats_type != "pie"){
         stats_options["cursor"] = {
-                show: true,
-                zoom: true,
-                showTooltip: false
+			show: true,
+			zoom: true,
+			showTooltip: false
         }
     }
-
-    stats_current_graph = $.jqplot('chart-' + name,
-        jqvalues, stats_options
+    stats_current_graph[extra] = $.jqplot(
+    	'chart-' + name + "-" + extra,
+        jqvalues[extra], stats_options
     );
 };
 
@@ -1901,4 +1911,12 @@ var inline_register_add_button = function(slug){
             inline_total_forms.setAttribute('value', `${inline_form_num+1}`);
         }
     );
+};
+
+var redraw_plots = function(name, key){
+	if (stats_current_graph && stats_current_graph[key]){
+	 	$('#chart-' + name + "-" + key).height($('#charts-' + name + "-" + key).height()*0.96 - 100);
+	 	$('#chart-' + name + "-" + key).width($('#charts-' + name + "-" + key).width()* 0.96);
+		stats_current_graph[key].replot({resetAxes: true});
+	}
 };
\ No newline at end of file
diff --git a/ishtar_common/templates/blocks/DataTables-stats-detail.html b/ishtar_common/templates/blocks/DataTables-stats-detail.html
new file mode 100644
index 000000000..9dcb04ae4
--- /dev/null
+++ b/ishtar_common/templates/blocks/DataTables-stats-detail.html
@@ -0,0 +1,79 @@
+{% load i18n %}
+<div class="sources sources-{{extra}}">
+    <div id="charts-{{stats_name}}-{{extra}}">
+        <div id="chart-{{stats_name}}-{{extra}}-wrapper" class="chart-wrapper">
+            <div id="chart-{{stats_name}}-{{extra}}" class="chart-content"></div>
+            <div class="resize-handler"></div>
+        </div>
+        <hr/>
+        <p class='alert alert-info' id="stats-zoom-help-{{stats_name}}-{{extra}}" style="z-index:-1">
+            <i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;
+            {% trans 'Draw rectangle on the graph to zoom. Double-click to reinitialize.' %}
+        </p>
+        <div class='form chart-img-form'>
+            <div class="text-center">
+                <button id="chart-img-display-{{stats_name}}-{{extra}}"
+                        type='button' class='btn btn-secondary'>
+                    {% trans "Display as an image" %}
+                </button>
+            </div>
+            <br>
+            <div id="chart-img-{{stats_name}}-{{extra}}" class='chart-img'>
+                <div class="card">
+                    <div id="img-{{stats_name}}-{{extra}}"
+                            class="card-img-top text-center ml-3 mt-3"></div>
+                    <div class="card-body">
+                        <div class='alert alert-info'>
+                            <i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;
+                            {% trans 'Right-click on this image to save it.' %}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="stats-table-{{stats_name}}-{{extra}}">
+        <div id="stats-table-content-{{stats_name}}-{{extra}}"></div>
+        <hr>
+        <div class="text-center">
+            <a id="stats-table-csv-{{stats_name}}-{{extra}}" href="#"
+                    type='button' class='btn btn-secondary'>
+                {% trans "Export as CSV" %}
+            </a>
+        </div>
+    </div>
+    <div id="stats-empty-{{stats_name}}-{{extra}}">
+        <p class="alert alert-info" >
+            <i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;
+            {% trans "No data" %}
+        </p>
+    </div>
+    <div id="stats-error-{{stats_name}}-{{extra}}">
+        <div class="alert alert-info">
+            <i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;
+            {% trans "Too many values for the selected modalities, graph cannot be displayed. You can: " %}
+            <ul>
+                <li>{% trans 'Select "table" type.'%}</li>
+                <li>{% trans 'Refine the search to limit the results.'%}</li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<script language="javascript" type="text/javascript">
+jQuery(document).ready(function(){
+        $("#chart-{{stats_name}}-wrapper-{{extra}}").resizable({
+            handleSelector: ".resize-handler",
+            onDragStart: function (e, $el, opt) {
+                $("#chart-{{stats_name}}-{{extra}}-wrapper").addClass('chart-resize');
+                $("#chart-{{stats_name}}-{{extra}}").hide();
+            },
+            onDragEnd: function (e, $el, opt) {
+                $("#chart-{{stats_name}}-{{extra}}-wrapper").removeClass('chart-resize');
+                $("#chart-{{stats_name}}-{{extra}}").show();
+                stats_current_graph.replot( { resetAxes: true } );
+            }
+        });
+    }
+);
+</script>
diff --git a/ishtar_common/templates/blocks/DataTables-stats.html b/ishtar_common/templates/blocks/DataTables-stats.html
index 342051d19..aae2bb91f 100644
--- a/ishtar_common/templates/blocks/DataTables-stats.html
+++ b/ishtar_common/templates/blocks/DataTables-stats.html
@@ -36,80 +36,13 @@
         </p>
     </div>
     <hr/>
-    <div id="charts-{{name}}">
-        <div id="chart-{{name}}-wrapper" class="chart-wrapper">
-            <div id="chart-{{name}}" class="chart-content"></div>
-            <div class="resize-handler"></div>
-        </div>
-        <hr/>
-        <p class='alert alert-info' id="stats-zoom-help-{{name}}" style="z-index:-1">
-            <i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;
-            {% trans 'Draw rectangle on the graph to zoom. Double-click to reinitialize.' %}
-        </p>
-        <div class='form chart-img-form'>
-            <div class="text-center">
-                <button id="chart-img-display-{{name}}"
-                        type='button' class='btn btn-secondary'>
-                    {% trans "Display as an image" %}
-                </button>
-            </div>
-            <br>
-            <div id="chart-img-{{name}}" class='chart-img'>
-                <div class="card">
-                    <div id="img-{{name}}"
-                            class="card-img-top text-center ml-3 mt-3"></div>
-                    <div class="card-body">
-                        <div class='alert alert-info'>
-                            <i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;
-                            {% trans 'Right-click on this image to save it.' %}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div id="stats-table-{{name}}">
-        <div id="stats-table-content-{{name}}"></div>
-        <hr>
-        <div class="text-center">
-            <a id="stats-table-csv-{{name}}" href="#"
-                    type='button' class='btn btn-secondary'>
-                {% trans "Export as CSV" %}
-            </a>
-        </div>
-    </div>
-    <div id="stats-empty-{{name}}">
-        <p class="alert alert-info" >
-            <i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;
-            {% trans "No data" %}
-        </p>
-    </div>
-    <div id="stats-error-{{name}}">
-        <div class="alert alert-info">
-            <i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;
-            {% trans "Too many values for the selected modalities, graph cannot be displayed. You can: " %}
-            <ul>
-                <li>{% trans 'Select "table" type.'%}</li>
-                <li>{% trans 'Refine the search to limit the results.'%}</li>
-            </ul>
-        </div>
-    </div>
-</div>
 
-<script language="javascript" type="text/javascript">
-jQuery(document).ready(function(){
-        $("#chart-{{name}}-wrapper").resizable({
-            handleSelector: ".resize-handler",
-            onDragStart: function (e, $el, opt) {
-                $("#chart-{{name}}-wrapper").addClass('chart-resize');
-                $("#chart-{{name}}").hide();
-            },
-            onDragEnd: function (e, $el, opt) {
-                $("#chart-{{name}}-wrapper").removeClass('chart-resize');
-                $("#chart-{{name}}").show();
-                stats_current_graph.replot( { resetAxes: true } );
-            }
-        });
-    }
-);
-</script>
\ No newline at end of file
+    {% with stats_name=name %}{% with extra="default" %}
+    {% include "blocks/DataTables-stats-detail.html" %}
+    {% endwith %}{% endwith %}
+    {% if external_sources %}{% for source_id, source_label, source_url in external_sources %}
+    {% with stats_name=name %}{% with extra=source_id %}
+    {% include "blocks/DataTables-stats-detail.html" %}
+    {% endwith %}{% endwith %}
+    {% endfor %}{% endif %}
+</div>
diff --git a/ishtar_common/templates/blocks/DataTables.html b/ishtar_common/templates/blocks/DataTables.html
index 3d1b817a8..199cd3af2 100644
--- a/ishtar_common/templates/blocks/DataTables.html
+++ b/ishtar_common/templates/blocks/DataTables.html
@@ -94,7 +94,21 @@ map_submit_search = function(){
     return _map_submit_search(query_vars, "{{name}}", "{{source}}");
 };
 {% endif %}
+
+extra_list = [
+ "default"{% for source_id, source_label, source_url in external_sources %},
+"{{source_id}}"{% endfor %}
+];
+
+sources = [
+ "{{source}}"{% for source_id, source_label, source_url in external_sources %},
+ "{{source_url}}"{% endfor %}
+];
+
 stats_submit_search = function(){
+    {% if external_sources %}{% for source_id, source_label, source_url in external_sources %}
+    _stats_submit_search(query_vars, "{{name}}", "{{source_url}}", "{{source_id}}");
+    {% endfor %}{% endif %}
     return _stats_submit_search(query_vars, "{{name}}", "{{source}}");
 };
 
@@ -157,6 +171,7 @@ jQuery(document).ready(function(){
     function(){
         $(".sources").hide();
         $(".sources-default").show();
+        redraw_plots("{{name}}", "default");
     }
   );
   {% for source_id, source_label, source_url in external_sources %}
@@ -164,6 +179,7 @@ jQuery(document).ready(function(){
     function(){
         $(".sources").hide();
         $(".sources-{{source_id}}").show();
+        redraw_plots("{{name}}", "{{source_id}}");
     }
   );
   {% endfor %}