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

---
 .../templates/blocks/DataTables-stats.html         | 63 +++++-----------------
 1 file changed, 13 insertions(+), 50 deletions(-)

(limited to 'ishtar_common/templates')

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
-- 
cgit v1.2.3