Draw pies using highcharts JS-lib

5 files changed, 99 insertions, 20 deletions

diff --git a/static/css/style.css b/static/css/style.css
index 64c612d..a79308e 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -112,6 +112,19 @@ ul.arrow {
     color: #E15418;
 }
 
+div.pie {
+    display: inline-block;
+    width: 370px;
+    height: 250px;
+}
+
+div.month_exp {
+    display: inline-block;
+    width: 270px;
+    vertical-align: top;
+    margin-bottom: 10px;
+}
+
 /* Header */
 
 #header {
@@ -277,14 +290,6 @@ ul.arrow {
     overflow: auto;
 }
 
-/* Table of contents */
-
-ul#toc {
-}
-
-.tocLink {
-}
-
 /* Footer */
 #footer-wrap {
 }
diff --git a/static/js/kosten.js b/static/js/kosten.js
index c1df1ca..279f351 100644
--- a/static/js/kosten.js
+++ b/static/js/kosten.js
@@ -29,7 +29,52 @@
       }
       return $(this).nextAll('.details:first').toggle();
     });
-    return $('.details').hide();
+    $('.details').hide();
+    return $('.pie').each(function(){
+      var x$, k, v;
+      x$ = $(this);
+      x$.highcharts({
+        title: {
+          text: null
+        },
+        tooltip: {
+          hideDelay: 200,
+          formatter: function(){
+            return this.key + ": <b>" + this.y.toFixed(2) + " €</b> / " + this.percentage.toFixed(2) + "%";
+          }
+        },
+        chart: {
+          backgroundColor: null,
+          plotBorderWidth: null,
+          plotShadow: false,
+          margin: [0, 0, 0, 0]
+        },
+        credits: {
+          enabled: false
+        },
+        series: [{
+          type: 'pie',
+          size: '50%',
+          allowPointSelect: true,
+          dataLabels: {
+            color: x$.css('color')
+          },
+          data: (function(){
+            var ref$, results$ = [];
+            for (k in ref$ = x$.data('pie')) {
+              v = ref$[k];
+              results$.push({
+                name: v > 0 ? k : '',
+                y: v,
+                visible: v > 0
+              });
+            }
+            return results$;
+          }())
+        }]
+      });
+      return x$;
+    });
   });
   out$.catsJS = catsJS = jq(function(){
     var counter, add_img, new_input, new_image;
diff --git a/static/js/kosten.ls b/static/js/kosten.ls
index 8bf746d..fa96f4a 100644
--- a/static/js/kosten.ls
+++ b/static/js/kosten.ls
@@ -24,6 +24,31 @@ export showJS = jq ->
 
     $ \.details .hide!
 
+    # draw the pies
+    <- $ \.pie .each
+    $ @
+        ..highcharts do
+            title: text: null
+            tooltip:
+                hideDelay: 200
+                formatter: ->
+                    "#{@key}: <b>#{@y.toFixed 2} €</b> / #{@percentage.toFixed 2}%"
+            chart:
+                backgroundColor: null
+                plotBorderWidth: null
+                plotShadow: off
+                margin: [0,0,0,0]
+            credits: enabled: false
+            series: [
+                type: \pie
+                size: \50%
+                allowPointSelect: true
+                dataLabels:
+                    color: ..css \color
+                data: [ {name: if v>0 then k else '' , y: v, visible: v > 0} \
+                        for k,v of ..data \pie ]
+            ]
+
 # Categories
 export catsJS = jq ->
     counter = 0
diff --git a/templates/expenses/show.jinja b/templates/expenses/show.jinja
index 4b6e362..395d1e5 100644
--- a/templates/expenses/show.jinja
+++ b/templates/expenses/show.jinja
@@ -3,6 +3,11 @@
 
 {% set JSFunction = "showJS" %}
 
+{% block js %}
+    {{ super() }}
+    <script type="text/javascript" src="{{ "js/highcharts-3.0.5.js" | static_url }}"></script>
+{% endblock %}
+
 {% block heading %}
     {% if exps | length > 1 %}
         Aktuelle Kosten
@@ -14,8 +19,8 @@
 {% block content %}
     {% for e, p in zip(exps,pies) %}
         {% if exps | length > 1 %}<h2>{{e|date}}</h2>{% endif %}
-        <div style="margin-bottom: 10px">
-        <div style="display:inline-block; width:270px; vertical-align: top">
+        <div>
+        <div class="month_exp">
         {% for c in e.catexps | sort(attribute="cat.name") %}
             {% call(exp) detail(name=c.cat.name, sum=c.expense, set=c.all) %}
                 <a href="{{ url_for(".edit", id = exp.id) }}">{{exp.day}}.{{exp.month}}. -- {{exp.description}}: {{exp.expense | eur }}</a>
@@ -30,8 +35,7 @@
             <a href="{{ url_for(".edit", id = exp.id) }}">{{exp.day}}.{{exp.month}}. -- {{exp.description}}: {{exp.expense | eur}}</a>
         {% endcall %}
         </div>
-        <div style="display:inline-block; height:250px; margin-left:50px" data-pie='{{ p | tojson }}'>
-        </div>
+        <div class="pie" data-pie='{{ p | tojson }}'></div>
         </div>
     {% endfor %}
 
diff --git a/templates/layout.jinja b/templates/layout.jinja
index ee082f9..aa923d6 100644
--- a/templates/layout.jinja
+++ b/templates/layout.jinja
@@ -2,13 +2,6 @@
 <html>
     <head>
         <meta charset=utf-8" >
-        {% if not g.is_mobile %}
-            {% block js %}
-                <script type="text/javascript" src="{{ "js/jquery-1.10.2.js" | static_url }}"></script>
-                <script type="text/javascript" src="{{ "js/kosten.js" | static_url }}"></script>
-                {% if JSFunction %}<script type="text/javascript">{{ JSFunction }}()</script> {% endif %}
-            {% endblock %}
-        {% endif %}
         <link rel="shortcut icon" href="{{ "images/currency.png" | static_url }}" type="image/icon">
         <title>{{ title or "Kostenverwaltung" }}</title>
         {% block style %}
@@ -54,5 +47,12 @@
                 </p>
             {% endblock %}
         </div>
+        {% if not g.is_mobile %}
+            {% block js %}
+                <script type="text/javascript" src="{{ "js/jquery-1.10.2.js" | static_url }}"></script>
+                <script type="text/javascript" src="{{ "js/kosten.js" | static_url }}"></script>
+            {% endblock %}
+            {% if JSFunction %}<script type="text/javascript">{{ JSFunction }}()</script> {% endif %}
+        {% endif %}
     </body>
 </html>