Add clickable stat points

5 files changed, 67 insertions, 12 deletions

diff --git a/app/views/stats.py b/app/views/stats.py
index 90f1686..83c8154 100644
--- a/app/views/stats.py
+++ b/app/views/stats.py
@@ -8,6 +8,7 @@ from ..model import ConstExpense
 import sqlalchemy as sql
 import calendar
 from collections import defaultdict
+from flask import jsonify
 
 mod = Blueprint('stats', __name__)
 
@@ -20,6 +21,15 @@ def next_date(d):
 def date_to_ms(d):
     return calendar.timegm(d.timetuple()) * 1000
 
+@mod.route('/_const/<int(fixed_digits=4):year>/<int(fixed_digits=2):month>')
+@login_required
+@templated
+def const_dialog(year,month):
+    consts = ConstExpense.of_month(current_user, month, year).order_by(ConstExpense.description)
+
+    return { 'consts': consts }
+
+
 @mod.route('/')
 @login_required
 @templated
diff --git a/static/js/kosten.js b/static/js/kosten.js
index 7d77878..e7170cb 100644
--- a/static/js/kosten.js
+++ b/static/js/kosten.js
@@ -97,9 +97,19 @@
     });
   });
   out$.statJS = statJS = jq(function(){
-    var month;
+    var month, constDialog;
     setLang();
     month = 30 * 24 * 60 * 60 * 1000;
+    constDialog = function(){
+      var df, diag_opts;
+      df = Highcharts.dateFormat;
+      diag_opts = {
+        title: df('%B %Y', this.x)
+      };
+      $.get(df('/stats/_const/%Y/%d', this.x), function(data){
+        $(data).dialog(diag_opts);
+      });
+    };
     return $('.stats').each(function(){
       var x$;
       x$ = $(this);
@@ -112,11 +122,20 @@
         },
         rangeSelector: {
           buttons: [],
-          inputDateFormat: "%d. %b %Y",
-          inputEditDateFormat: "%d.%m.%Y",
+          inputDateFormat: "%b %Y",
+          inputEditDateFormat: "%m.%Y",
           inputDateParser: function(value){
             value = value.split(/\./);
-            return Date.UTC(value[2], value[1] - 1, value[0], 0, 0, 0, 0);
+            return Date.UTC(value[1], value[0] - 1, 1, 0, 0, 0, 0);
+          }
+        },
+        plotOptions: {
+          series: {
+            point: {
+              events: {
+                click: constDialog
+              }
+            }
           }
         },
         xAxis: {
@@ -127,7 +146,7 @@
           data: x$.data('stats')
         }],
         tooltip: {
-          pointFormat: "<b>{point.y} €</b><br/>"
+          pointFormat: '<b>{point.y} €</b><br/>'
         }
       });
       return x$;
diff --git a/static/js/kosten.ls b/static/js/kosten.ls
index dea12f3..01bc10c 100644
--- a/static/js/kosten.ls
+++ b/static/js/kosten.ls
@@ -76,6 +76,16 @@ export statJS = jq ->
 
     month = 30d * 24h * 60min * 60s * 1000ms
 
+    const-dialog = !->
+        df = Highcharts.date-format
+        diag_opts =
+            #title: "Konstante Ausgaben #{df '%b %Y' @x}"
+            title: df '%B %Y' @x
+
+        data <-! $.get df '/stats/_const/%Y/%d' @x
+        $ data .dialog diag_opts
+
+
     <- $ \.stats .each
     $ @
         ..highcharts 'StockChart' do
@@ -83,15 +93,17 @@ export statJS = jq ->
             credits: enabled: false
             range-selector:
                 buttons: []
-                input-date-format: "%d. %b %Y"
-                input-edit-date-format: "%d.%m.%Y"
+                input-date-format: "%b %Y"
+                input-edit-date-format: "%m.%Y"
                 input-date-parser: (value) ->
                     value .= split /\./
-                    Date.UTC value[2], # year
-                             value[1] - 1, # month ... 0-based -.-
-                             value[0], #day
+                    Date.UTC value[1], # year
+                             value[0] - 1, # month ... 0-based -.-
+                             1, #day
                              0,0,0,0 # time
-
+            plot-options:
+                series:
+                    point: events: click: const-dialog
             x-axis:
                 min-tick-interval: month
                 min-range: month
@@ -99,7 +111,7 @@ export statJS = jq ->
                 data : ..data \stats
             ]
             tooltip:
-                point-format: "<b>{point.y} €</b><br/>"
+                point-format: '<b>{point.y} €</b><br/>'
 
 
 # Categories
diff --git a/templates/stats/const_dialog.jinja b/templates/stats/const_dialog.jinja
new file mode 100644
index 0000000..9f059b8
--- /dev/null
+++ b/templates/stats/const_dialog.jinja
@@ -0,0 +1,8 @@
+
+<ul class="arrow">
+    {% for c in consts -%}
+        <li><a href="{{ url_for("consts.show", id = c.id) }}">{{c.description}}</a> 
+            ({{c.monthly | eur}})
+        </li>
+    {% endfor %}
+</ul>
diff --git a/templates/stats/show.jinja b/templates/stats/show.jinja
index f57a119..53985a7 100644
--- a/templates/stats/show.jinja
+++ b/templates/stats/show.jinja
@@ -5,6 +5,12 @@
 {% block js %}
     {{ super() }}
     <script type="text/javascript" src="{{ "js/highstock-2.0.3.js" | static_url }}"></script>
+    <script type="text/javascript" src="{{ "jqueryui/jquery-ui.js" | static_url }}"></script>
+{% endblock %}
+
+{% block style %}
+    {{ super() }}
+    <link href="{{ "jqueryui/css/ui-darkness/jquery-ui.css" | static_url }}" rel="stylesheet" type="text/css">
 {% endblock %}
 
 {% block heading %}