Draw pies using highcharts JS-lib

3 files changed, 84 insertions, 9 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