Add cumulative flow diagram

5 files changed, 131 insertions, 2 deletions

diff --git a/assets/css/app.css b/assets/css/app.css
index e97a68c2..3841e4bb 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -33,7 +33,15 @@ ul.no-bullet li {
 
 .pull-right {
     text-align: right;
-}/* links */
+}
+
+hr {
+    border: 0;
+    height: 0;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+}
+/* links */
 a {
     color: #3366CC;
     border: none;
@@ -280,6 +288,10 @@ ul.form-errors li {
     margin-right: 15px;
 }
 
+.form-inline .form-required {
+    display: none;
+}
+
 input.form-date {
     width: 150px;
 }
diff --git a/assets/css/base.css b/assets/css/base.css
index 4a80d5b6..f4c438a2 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -32,4 +32,11 @@ ul.no-bullet li {
 
 .pull-right {
     text-align: right;
-}
\ No newline at end of file
+}
+
+hr {
+    border: 0;
+    height: 0;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+}
diff --git a/assets/css/form.css b/assets/css/form.css
index d6336e26..465cffe0 100644
--- a/assets/css/form.css
+++ b/assets/css/form.css
@@ -121,6 +121,10 @@ ul.form-errors li {
     margin-right: 15px;
 }
 
+.form-inline .form-required {
+    display: none;
+}
+
 input.form-date {
     width: 150px;
 }
diff --git a/assets/js/analytic.js b/assets/js/analytic.js
index 22fb672e..e8cffdc7 100644
--- a/assets/js/analytic.js
+++ b/assets/js/analytic.js
@@ -10,7 +10,60 @@ Kanboard.Analytic = (function() {
             else if (Kanboard.Exists("analytic-user-repartition")) {
                 Kanboard.Analytic.UserRepartition.Init();
             }
+            else if (Kanboard.Exists("analytic-cfd")) {
+                Kanboard.Analytic.CFD.Init();
+            }
+        }
+    };
+
+})();
+
+Kanboard.Analytic.CFD = (function() {
+
+    function fetchData()
+    {
+        jQuery.getJSON($("#chart").attr("data-url"), function(data) {
+            drawGraph(data.metrics, data.labels, data.columns);
+        });
+    }
+
+    function drawGraph(metrics, labels, columns)
+    {
+        var series = prepareSeries(metrics, labels);
+
+        var svg = dimple.newSvg("#chart", 800, 380);
+        var chart = new dimple.chart(svg, series);
+
+        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());
+
+        chart.addLegend(10, 10, 500, 30, "left");
+        chart.draw();
+    }
+
+    function prepareSeries(metrics, labels)
+    {
+        var series = [];
+
+        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);
         }
+
+        return series;
+    }
+
+    return {
+        Init: fetchData
     };
 
 })();
diff --git a/assets/js/app.js b/assets/js/app.js
index ed017b0b..1342e090 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -279,7 +279,60 @@ Kanboard.Analytic = (function() {
             else if (Kanboard.Exists("analytic-user-repartition")) {
                 Kanboard.Analytic.UserRepartition.Init();
             }
+            else if (Kanboard.Exists("analytic-cfd")) {
+                Kanboard.Analytic.CFD.Init();
+            }
+        }
+    };
+
+})();
+
+Kanboard.Analytic.CFD = (function() {
+
+    function fetchData()
+    {
+        jQuery.getJSON($("#chart").attr("data-url"), function(data) {
+            drawGraph(data.metrics, data.labels, data.columns);
+        });
+    }
+
+    function drawGraph(metrics, labels, columns)
+    {
+        var series = prepareSeries(metrics, labels);
+
+        var svg = dimple.newSvg("#chart", 800, 380);
+        var chart = new dimple.chart(svg, series);
+
+        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());
+
+        chart.addLegend(10, 10, 500, 30, "left");
+        chart.draw();
+    }
+
+    function prepareSeries(metrics, labels)
+    {
+        var series = [];
+
+        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);
         }
+
+        return series;
+    }
+
+    return {
+        Init: fetchData
     };
 
 })();