Replace dimplejs by c3js for chart drawing

2 files changed, 139 insertions, 196 deletions

diff --git a/assets/js/src/analytic.js b/assets/js/src/analytic.js
index 0912bbcb..8066165b 100644
--- a/assets/js/src/analytic.js
+++ b/assets/js/src/analytic.js
@@ -1,209 +1,190 @@
 
 Kanboard.Analytic = (function() {
 
-    jQuery(document).ready(function() {
-
-        if (Kanboard.Exists("analytic-task-repartition")) {
-            Kanboard.Analytic.TaskRepartition.Init();
-        }
-        else if (Kanboard.Exists("analytic-user-repartition")) {
-            Kanboard.Analytic.UserRepartition.Init();
-        }
-        else if (Kanboard.Exists("analytic-cfd")) {
-            Kanboard.Analytic.CFD.Init();
-        }
-        else if (Kanboard.Exists("analytic-burndown")) {
-            Kanboard.Analytic.Burndown.Init();
-        }
-    });
-
-    return {};
-
-})();
-
-Kanboard.Analytic.Burndown = (function() {
-
-    function fetchData()
+    // CFD diagram
+    function drawCfd()
     {
-        jQuery.getJSON($("#chart").attr("data-url"), function(data) {
-            drawGraph(data.metrics, data.labels);
-        });
-    }
+        var metrics = $("#chart").data("metrics");
+        var columns = [];
+        var groups = [];
 
-    function drawGraph(metrics, labels)
-    {
-        var series = prepareSeries(metrics, labels);
+        for (var i = 0; i < metrics.length; i++) {
 
-        var svg = dimple.newSvg("#chart", "100%", 380);
-        var chart = new dimple.chart(svg, series);
+            for (var j = 0; j < metrics[i].length; j++) {
 
-        var x = chart.addCategoryAxis("x", labels['day']);
-        x.addOrderRule("Date");
+                if (i == 0) {
+                    columns.push([metrics[i][j]]);
 
-        chart.addMeasureAxis("y", labels['score']);
-        chart.addSeries(null, dimple.plot.line);
+                    if (j > 0) {
+                        groups.push(metrics[i][j]);
+                    }
+                }
+                else {
+                    columns[j].push(metrics[i][j]);
+                }
+            }
+        }
 
-        chart.draw();
+        c3.generate({
+            data: {
+                columns: columns,
+                x: metrics[0][0],
+                type: 'area-spline',
+                groups: [groups]
+            },
+            axis: {
+                x: {
+                    type: 'timeseries',
+                    tick: {
+                        format: $("#chart").data("date-format")
+                    }
+                }
+            }
+        });
     }
 
-    function prepareSeries(metrics, labels)
+    // Burndown chart
+    function drawBurndown()
     {
-        var series = [];
+        var metrics = $("#chart").data("metrics");
+        var columns = [[$("#chart").data("label-total")]];
 
         for (var i = 0; i < metrics.length; i++) {
 
-            var row = {};
-            var score = parseInt(metrics[i]['score']);
-            row[labels['day']] = metrics[i]['day'];
-            row[labels['score']] = score;
-            series.push(row);
-        }
+            for (var j = 0; j < metrics[i].length; j++) {
 
-        return series;
-    }
+                if (i == 0) {
+                    columns.push([metrics[i][j]]);
+                }
+                else {
+                    columns[j + 1].push(metrics[i][j]);
 
-    return {
-        Init: fetchData
-    };
+                    if (j > 0) {
 
-})();
+                        if (columns[0][i] == undefined) {
+                            columns[0].push(0);
+                        }
 
-Kanboard.Analytic.CFD = (function() {
+                        columns[0][i] += metrics[i][j];
+                    }
+                }
+            }
+        }
 
-    function fetchData()
-    {
-        jQuery.getJSON($("#chart").attr("data-url"), function(data) {
-            drawGraph(data.metrics, data.labels, data.columns);
+        c3.generate({
+            data: {
+                columns: columns,
+                x: metrics[0][0]
+            },
+            axis: {
+                x: {
+                    type: 'timeseries',
+                    tick: {
+                        format: $("#chart").data("date-format")
+                    }
+                }
+            }
         });
     }
 
-    function drawGraph(metrics, labels, columns)
+    // Draw task repartition chart
+    function drawTaskRepartition()
     {
-        var series = prepareSeries(metrics, labels);
-
-        var svg = dimple.newSvg("#chart", "100%", 380);
-        var chart = new dimple.chart(svg, series);
+        var metrics = $("#chart").data("metrics");
+        var columns = [];
 
-        var x = chart.addCategoryAxis("x", labels['day']);
-        x.addOrderRule("Date");
-
-        chart.addMeasureAxis("y", labels['total']);
-
-        var s = chart.addSeries(labels['column'], dimple.plot.area);
-        s.addOrderRule(columns.reverse());
+        for (var i = 0; i < metrics.length; i++) {
+            columns.push([metrics[i].column_title, metrics[i].nb_tasks]);
+        }
 
-        chart.addLegend(10, 10, 500, 30, "left");
-        chart.draw();
+        c3.generate({
+            data: {
+                columns: columns,
+                type : 'donut'
+            }
+        });
     }
 
-    function prepareSeries(metrics, labels)
+    // Draw user repartition chart
+    function drawUserRepartition()
     {
-        var series = [];
+        var metrics = $("#chart").data("metrics");
+        var columns = [];
 
         for (var i = 0; i < metrics.length; i++) {
-
-            var row = {};
-            row[labels['column']] = metrics[i]['column_title'];
-            row[labels['day']] = metrics[i]['day'];
-            row[labels['total']] = metrics[i]['total'];
-            series.push(row);
+            columns.push([metrics[i].user, metrics[i].nb_tasks]);
         }
 
-        return series;
-    }
-
-    return {
-        Init: fetchData
-    };
-
-})();
-
-Kanboard.Analytic.TaskRepartition = (function() {
-
-    function fetchData()
-    {
-        jQuery.getJSON($("#chart").attr("data-url"), function(data) {
-            drawGraph(data.metrics, data.labels);
+        c3.generate({
+            data: {
+                columns: columns,
+                type : 'donut'
+            }
         });
     }
 
-    function drawGraph(metrics, labels)
+    // Draw budget chart
+    function drawBudget()
     {
-        var series = prepareSeries(metrics, labels);
-
-        var svg = dimple.newSvg("#chart", "100%", 350);
+        var metrics = $("#chart").data("metrics");
+        var labels = $("#chart").data("labels");
 
-        var chart = new dimple.chart(svg, series);
-        chart.addMeasureAxis("p", labels["nb_tasks"]);
-        var ring = chart.addSeries(labels["column_title"], dimple.plot.pie);
-        ring.innerRadius = "50%";
-        chart.addLegend(0, 0, 100, "100%", "left");
-        chart.draw();
-    }
+        var columns = [
+            [labels["date"]],
+            [labels["in"]],
+            [labels["left"]],
+            [labels["out"]]
+        ];
 
-    function prepareSeries(metrics, labels)
-    {
-        var series = [];
+        var colors = {};
+        colors[labels["in"]] = '#5858FA';
+        colors[labels["left"]] = '#04B404';
+        colors[labels["out"]] = '#DF3A01';
 
         for (var i = 0; i < metrics.length; i++) {
-
-            var serie = {};
-            serie[labels["nb_tasks"]] = metrics[i]["nb_tasks"];
-            serie[labels["column_title"]] = metrics[i]["column_title"];
-
-            series.push(serie);
+            columns[0].push(metrics[i]["date"]);
+            columns[1].push(metrics[i]["in"]);
+            columns[2].push(metrics[i]["left"]);
+            columns[3].push(metrics[i]["out"]);
         }
 
-        return series;
-    }
-
-    return {
-        Init: fetchData
-    };
-
-})();
-
-Kanboard.Analytic.UserRepartition = (function() {
-
-    function fetchData()
-    {
-        jQuery.getJSON($("#chart").attr("data-url"), function(data) {
-            drawGraph(data.metrics, data.labels);
+        c3.generate({
+            data: {
+                x: columns[0][0],
+                columns: columns,
+                colors: colors,
+                type : 'bar'
+            },
+            axis: {
+                x: {
+                    type: 'timeseries',
+                    tick: {
+                        format: $("#chart").data("date-format")
+                    }
+                }
+            }
         });
     }
 
-    function drawGraph(metrics, labels)
-    {
-        var series = prepareSeries(metrics, labels);
-
-        var svg = dimple.newSvg("#chart", "100%", 350);
-
-        var chart = new dimple.chart(svg, series);
-        chart.addMeasureAxis("p", labels["nb_tasks"]);
-        var ring = chart.addSeries(labels["user"], dimple.plot.pie);
-        ring.innerRadius = "50%";
-        chart.addLegend(0, 0, 100, "100%", "left");
-        chart.draw();
-    }
-
-    function prepareSeries(metrics, labels)
-    {
-        var series = [];
-
-        for (var i = 0; i < metrics.length; i++) {
-
-            var serie = {};
-            serie[labels["nb_tasks"]] = metrics[i]["nb_tasks"];
-            serie[labels["user"]] = metrics[i]["user"];
+    jQuery(document).ready(function() {
 
-            series.push(serie);
+        if (Kanboard.Exists("analytic-task-repartition")) {
+            drawTaskRepartition();
         }
+        else if (Kanboard.Exists("analytic-user-repartition")) {
+            drawUserRepartition();
+        }
+        else if (Kanboard.Exists("analytic-cfd")) {
+            drawCfd();
+        }
+        else if (Kanboard.Exists("analytic-burndown")) {
+            drawBurndown();
+        }
+        else if (Kanboard.Exists("budget-chart")) {
+            drawBudget();
+        }
+    });
 
-        return series;
-    }
-
-    return {
-        Init: fetchData
-    };
+    return {};
 
 })();
diff --git a/assets/js/src/budget.js b/assets/js/src/budget.js
deleted file mode 100644
index ee39c68c..00000000
--- a/assets/js/src/budget.js
+++ /dev/null
@@ -1,38 +0,0 @@
-Kanboard.Budget = (function() {
-
-    jQuery(document).ready(function() {
-
-        if (Kanboard.Exists("budget-chart")) {
-
-            var labels =$("#chart").data("labels");
-            var serie = $("#chart").data("serie");
-            var types = ["in", "out", "left"];
-            var data = [];
-
-            for (var i = 0; i < serie.length; i++) {
-
-                for (var j = 0; j < types.length; j++) {
-                    var row = {};
-                    row[labels["date"]] = serie[i]["date"];
-                    row[labels["value"]] = serie[i][types[j]];
-                    row[labels["type"]] = labels[types[j]];
-
-                    data.push(row);
-                }
-            }
-
-            var svg = dimple.newSvg("#chart", 750, 600);
-            var myChart = new dimple.chart(svg, data);
-
-            var x = myChart.addCategoryAxis("x", [labels["date"], labels["type"]]);
-            x.addOrderRule(labels["date"]);
-
-            myChart.addMeasureAxis("y", labels["value"]);
-
-            myChart.addSeries(labels["type"], dimple.plot.bar);
-            myChart.addLegend(65, 10, 510, 20, "right");
-            myChart.draw();
-        }
-    });
-
-})();
\ No newline at end of file