Statistics: manage resizing of graphs

2 files changed, 19 insertions, 52 deletions

diff --git a/ishtar_common/static/js/ishtar.js b/ishtar_common/static/js/ishtar.js
index 54823968c..112459e62 100644
--- a/ishtar_common/static/js/ishtar.js
+++ b/ishtar_common/static/js/ishtar.js
@@ -1553,7 +1553,7 @@ var render_stats = function(stats_values, name){
         if (modality_1 == "year"){
             stats_xaxis_tickoptions = {formatString: "%d"};
         } else {
-            stats_xaxis_tickoptions = {angle:-25};
+            stats_xaxis_tickoptions = {angle: -30};
         }
         stats_xaxis["tickOptions"] = stats_xaxis_tickoptions
     }
@@ -1566,6 +1566,7 @@ var render_stats = function(stats_values, name){
     var ticks = new Array();
     var series = new Array();
     var series_conf = new Array();
+    var legend_conf = {};
     if (modality_2 && modality_2 != modality_1){
         for (idx in stats_values){
             ticks.push(stats_values[idx][0]);
@@ -1595,6 +1596,9 @@ var render_stats = function(stats_values, name){
             }
         }
         stats_xaxis['ticks'] = ticks;
+        legend_conf = {
+            show:true, location: 'e', placement: 'outside'
+        };
     } else {
         jqvalues = [stats_values];
         series.push("Total");
@@ -1641,7 +1645,7 @@ var render_stats = function(stats_values, name){
                 sizeAdjust: 7.5
             },
             series: series_conf,
-            legend: { show:true, location: 'e', placement: 'outside' }
+            legend: legend_conf
     };
     if (stats_type != "pie"){
         stats_options["cursor"] = {
diff --git a/ishtar_common/templates/blocks/DataTables-stats.html b/ishtar_common/templates/blocks/DataTables-stats.html
index da3a85179..85374c5b9 100644
--- a/ishtar_common/templates/blocks/DataTables-stats.html
+++ b/ishtar_common/templates/blocks/DataTables-stats.html
@@ -1,4 +1,6 @@
 {% load i18n %}
+<style>
+</style>
 <div>
     <div id="stats-form-{{name}}">
         <label for="stats_renderer-{{name}}">{% trans "Type" %}</label>
@@ -30,8 +32,10 @@
     </div>
     <hr/>
     <div id="charts-{{name}}">
-        <div id="chart-{{name}}"
-                style="height:400px; width:700px; margin-right:auto; margin-left:auto"></div>
+        <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;
@@ -72,54 +76,13 @@
 </div>
 
 <script language="javascript" type="text/javascript">
-
-{% comment %}
-    var plot_{{name}} = $.jqplot('chart_{{name}}',
-        [{% for idx, lbl, values in dashboard.values %}{% if forloop.counter0 > 0 %} {% if forloop.counter0 > 1 %}, {% endif%} values_{{forloop.counter0}}_{{name}} {% endif %} {% endfor%}], {
-        axes:{ {%ifequal slicing 'year'%}
-            xaxis:{
-            label:'{% trans "Year" %}',
-            tickOptions: {
-                formatString: "%d"
-            }
-            },{%endifequal%}{%ifequal slicing 'month'%}
-            xaxis:{
-            label:'{% trans "Month" %}',
-            renderer:$.jqplot.DateAxisRenderer,
-            tickRenderer:$.jqplot.CanvasAxisTickRenderer,
-            tickOptions:{
-                formatString:'%b %Y',
-                angle:-25
+jQuery(document).ready(function(){
+        $("#chart-{{name}}-wrapper").resizable({
+            handleSelector: ".resize-handler",
+            onDrag: function (e, $el, opt) {
+                stats_current_graph.replot( { resetAxes: true } );
             }
-            },{%endifequal%}
-            yaxis:{
-            label:'{% trans "Number"%}',
-            min:0
-            }
-        },
-        highlighter: {
-            show: true,
-            sizeAdjust: 7.5
-        },
-        series:[{% for label in dashboard.serie_labels %}
-            {%if forloop.counter0%}, {% endif %}{label:"{{label}}", showmarker:showmarker}{% endfor %}
-        ],
-        cursor:{
-            show: true,
-            zoom:true,
-            showTooltip:false
-        },
-        legend: { show:true, location: 'nw' }
-    });
+        });
     }
-
-    $('#search_{{name}}').click(function (){
-        $.post("{% url 'dashboard-main-detail' item_name %}",
-                $("#{{name}}_form").serialize(),
-                function(data){
-                    $("#{{name}}-tab").parent().html(data);
-                });
-        return false;
-    });
-    {% endcomment %}
+);
 </script>
\ No newline at end of file