From d317601448aab057bc21b60fa871a54ddae7ad74 Mon Sep 17 00:00:00 2001
From: Benjamin Dauvergne <bdauvergne@entrouvert.com>
Date: Mon, 25 Jul 2016 16:59:10 +0200
Subject: [PATCH] implement line charts

---
 bijoe/forms.py                        |  3 ++-
 bijoe/static/js/bijoe.js              | 32 +++++++++++++++++++++++++-------
 bijoe/templates/bijoe/cube_chart.html |  7 +++++--
 3 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/bijoe/forms.py b/bijoe/forms.py
index de23def..999714b 100644
--- a/bijoe/forms.py
+++ b/bijoe/forms.py
@@ -72,7 +72,8 @@ class CubeForm(forms.Form):
     representation = forms.ChoiceField(
         label=_(u'Représentation'),
         choices=[('table', _('tableau')),
-                 ('graphical', _('graphique')),],
+                 ('bar', _('batons')),
+                 ('line', _('lignes')),],
         widget=forms.RadioSelect())
 
     def __init__(self, *args, **kwargs):
diff --git a/bijoe/static/js/bijoe.js b/bijoe/static/js/bijoe.js
index a7be070..db78831 100644
--- a/bijoe/static/js/bijoe.js
+++ b/bijoe/static/js/bijoe.js
@@ -174,6 +174,14 @@ function draw_piechart(canvas, dimensions, measures, measure, data) {
 }
 
 function draw_barchart(canvas, dimensions, measures, measure, data) {
+    draw_chart("Bar", canvas, dimensions, measures, measure, data);
+}
+
+function draw_linechart(canvas, dimensions, measures, measure, data) {
+    draw_chart("Line", canvas, dimensions, measures, measure, data);
+}
+
+function draw_chart(kind, canvas, dimensions, measures, measure, data) {
   /* Draw bar chart given a cavans element, a list of dimensions, a list of measure, the name of the
    * measure to represent and data rows containing in the same order the dimensions and measures
    * values */
@@ -207,10 +215,21 @@ function draw_barchart(canvas, dimensions, measures, measure, data) {
   option.graphTitle = wrap_text(
       capfirst(measures[j].label) + " par " + human_join(dimension_labels), 30)
 
-  dataset.fillColor = spaced_hsla(j, measures.length, 100, 30, 0.5);
-  dataset.strokeColor = spaced_hsla(j, measures.length, 100, 30, 0.75);
-  dataset.highlightFill = spaced_hsla(j, measures.length, 100, 30, 0.75);
-  dataset.highlightStroke = spaced_hsla(j, measures.length, 100, 30, 1);
+  if (kind != "Line") {
+    dataset.fillColor = spaced_hsla(j, measures.length, 100, 30, 0.5);
+    dataset.highlightFill = spaced_hsla(j, measures.length, 100, 30, 0.75);
+    dataset.strokeColor = spaced_hsla(j, measures.length, 100, 30, 0.75);
+    dataset.highlightStroke = spaced_hsla(j, measures.length, 100, 30, 1);
+  } else {
+    dataset.fillColor = "rgba(250,250,250,0)";
+    dataset.highlightFill = "rgba(250,250,250,0)";
+    dataset.strokeColor = spaced_hsla(j, measures.length, 100, 20, 0.5);
+    dataset.highlightStroke = spaced_hsla(j, measures.length, 100, 20, 0.75);
+    dataset.pointColor = spaced_hsla(j, measures.length, 100, 30, 1);
+    dataset.pointStrokeColor = "rgba(250,250,250,1)";
+    dataset.pointDotRadius = 4;
+    dataset.pointDotStrokeWidth = 5;
+  }
 
   var n = data.length;
   for (var i = 0; i < n; i++) {
@@ -257,7 +276,7 @@ function draw_barchart(canvas, dimensions, measures, measure, data) {
       scaleShowVerticalLines: true,
 
       //Boolean - If there is a stroke on each bar
-      // barShowStroke : true,
+      barShowStroke : true,
 
       //Number - Pixel width of the bar stroke
       barStrokeWidth : 2,
@@ -268,8 +287,7 @@ function draw_barchart(canvas, dimensions, measures, measure, data) {
       //Number - Spacing between data sets within X values
       barDatasetSpacing : 1,
   });
-  console.log(linedata);
-  new Chart(ctx).Bar(linedata, option);
+  new Chart(ctx)[kind](linedata, option);
 }
 
 /* jQuery event handlers and widget setup */
diff --git a/bijoe/templates/bijoe/cube_chart.html b/bijoe/templates/bijoe/cube_chart.html
index 1bcc9f3..efaf833 100644
--- a/bijoe/templates/bijoe/cube_chart.html
+++ b/bijoe/templates/bijoe/cube_chart.html
@@ -16,8 +16,11 @@
     if ("{{ measure.name }}" == "percent") {
       draw_piechart(canvas, dimensions, measures, "{{ measure.name }}", data);
     } else {
-      draw_barchart(canvas, dimensions, measures, "{{ measure.name }}", data);
-
+      {% if representation == 'bar' %}
+        draw_barchart(canvas, dimensions, measures, "{{ measure.name }}", data);
+      {% else %}
+        draw_linechart(canvas, dimensions, measures, "{{ measure.name }}", data);
+      {% endif %}
       /* Allow getting a PNG without using 'Save image as' */
       $(".bijoe-png-button").on('click', function() {
          this.href = toDataURL($(this).next("canvas")[0], "graph.png");
-- 
2.1.4