From 592ae4b1cefd38257b643f124847cf0ec6c27c3f Mon Sep 17 00:00:00 2001
From: Étienne Loks <etienne.loks@iggdrasil.net>
Date: Fri, 17 May 2019 13:47:32 +0200
Subject: Statistics: manage resizing of graphs

---
 ishtar_common/static/js/ishtar.js                  |  8 ++-
 .../templates/blocks/DataTables-stats.html         | 63 +++++-----------------
 scss/custom.scss                                   | 23 ++++++++
 3 files changed, 42 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
diff --git a/scss/custom.scss b/scss/custom.scss
index 50b25f1a7..769ed62ec 100644
--- a/scss/custom.scss
+++ b/scss/custom.scss
@@ -879,6 +879,29 @@ ul.compact{
     top: 5em;
 }
 
+/* charts */
+
+.resize-handler {
+   position: absolute;
+   width: 16px;
+   height: 16px;
+   padding: 4px;
+   bottom: 0;
+   right: 0;
+   cursor: nwse-resize;
+   background: url(../media/images/resize-handler.png) no-repeat;
+}
+
+.chart-wrapper{
+    display: block;
+    position:relative;
+    height:400px;
+}
+
+.chart-content{
+    height: 96%;
+}
+
 /*
 // required
 @import "bootstrap-src/scss/functions";
-- 
cgit v1.2.3