Use components to render charts

6 files changed, 16 insertions, 226 deletions

diff --git a/assets/js/src/App.js b/assets/js/src/App.js
index 31b7f51a..48ef7bf6 100644
--- a/assets/js/src/App.js
+++ b/assets/js/src/App.js
@@ -180,20 +180,6 @@ Kanboard.App.prototype.hideLoadingIcon = function() {
     $("#app-loading-icon").remove();
 };
 
-Kanboard.App.prototype.formatDuration = function(d) {
-    if (d >= 86400) {
-        return Math.round(d/86400) + "d";
-    }
-    else if (d >= 3600) {
-        return Math.round(d/3600) + "h";
-    }
-    else if (d >= 60) {
-        return Math.round(d/60) + "m";
-    }
-
-    return d + "s";
-};
-
 Kanboard.App.prototype.isVisible = function() {
     var property = "";
 
diff --git a/assets/js/src/AvgTimeColumnChart.js b/assets/js/src/AvgTimeColumnChart.js
deleted file mode 100644
index 803aa2c2..00000000
--- a/assets/js/src/AvgTimeColumnChart.js
+++ /dev/null
@@ -1,47 +0,0 @@
-Kanboard.AvgTimeColumnChart = function(app) {
-    this.app = app;
-};
-
-Kanboard.AvgTimeColumnChart.prototype.execute = function() {
-    if (this.app.hasId("analytic-avg-time-column")) {
-        this.show();
-    }
-};
-
-Kanboard.AvgTimeColumnChart.prototype.show = function() {
-    var chart = $("#chart");
-    var metrics = chart.data("metrics");
-    var plots = [chart.data("label")];
-    var categories = [];
-
-    for (var column_id in metrics) {
-        plots.push(metrics[column_id].average);
-        categories.push(metrics[column_id].title);
-    }
-
-    c3.generate({
-        data: {
-            columns: [plots],
-            type: 'bar'
-        },
-        bar: {
-            width: {
-                ratio: 0.5
-            }
-        },
-        axis: {
-            x: {
-                type: 'category',
-                categories: categories
-            },
-            y: {
-                tick: {
-                    format: this.app.formatDuration
-                }
-            }
-        },
-        legend: {
-           show: false
-        }
-    });
-};
diff --git a/assets/js/src/BurndownChart.js b/assets/js/src/BurndownChart.js
deleted file mode 100644
index 63231d3c..00000000
--- a/assets/js/src/BurndownChart.js
+++ /dev/null
@@ -1,56 +0,0 @@
-Kanboard.BurndownChart = function(app) {
-    this.app = app;
-};
-
-Kanboard.BurndownChart.prototype.execute = function() {
-    if (this.app.hasId("analytic-burndown")) {
-        this.show();
-    }
-};
-
-Kanboard.BurndownChart.prototype.show = function() {
-    var chart = $("#chart");
-    var metrics = chart.data("metrics");
-    var columns = [[chart.data("label-total")]];
-    var categories = [];
-    var inputFormat = d3.time.format("%Y-%m-%d");
-    var outputFormat = d3.time.format(chart.data("date-format"));
-
-    for (var i = 0; i < metrics.length; i++) {
-
-        for (var j = 0; j < metrics[i].length; j++) {
-
-            if (i == 0) {
-                columns.push([metrics[i][j]]);
-            }
-            else {
-                columns[j + 1].push(metrics[i][j]);
-
-                if (j > 0) {
-
-                    if (columns[0][i] == undefined) {
-                        columns[0].push(0);
-                    }
-
-                    columns[0][i] += metrics[i][j];
-                }
-
-                if (j == 0) {
-                    categories.push(outputFormat(inputFormat.parse(metrics[i][j])));
-                }
-            }
-        }
-    }
-
-    c3.generate({
-        data: {
-            columns: columns
-        },
-        axis: {
-            x: {
-                type: 'category',
-                categories: categories
-            }
-        }
-    });
-};
diff --git a/assets/js/src/CumulativeFlowDiagram.js b/assets/js/src/CumulativeFlowDiagram.js
deleted file mode 100644
index b22fd2e9..00000000
--- a/assets/js/src/CumulativeFlowDiagram.js
+++ /dev/null
@@ -1,55 +0,0 @@
-Kanboard.CumulativeFlowDiagram = function(app) {
-    this.app = app;
-};
-
-Kanboard.CumulativeFlowDiagram.prototype.execute = function() {
-    if (this.app.hasId("analytic-cfd")) {
-        this.show();
-    }
-};
-
-Kanboard.CumulativeFlowDiagram.prototype.show = function() {
-    var chart = $("#chart");
-    var metrics = chart.data("metrics");
-    var columns = [];
-    var groups = [];
-    var categories = [];
-    var inputFormat = d3.time.format("%Y-%m-%d");
-    var outputFormat = d3.time.format(chart.data("date-format"));
-
-    for (var i = 0; i < metrics.length; i++) {
-
-        for (var j = 0; j < metrics[i].length; j++) {
-
-            if (i == 0) {
-                columns.push([metrics[i][j]]);
-
-                if (j > 0) {
-                    groups.push(metrics[i][j]);
-                }
-            }
-            else {
-
-                columns[j].push(metrics[i][j]);
-
-                if (j == 0) {
-                    categories.push(outputFormat(inputFormat.parse(metrics[i][j])));
-                }
-            }
-        }
-    }
-
-    c3.generate({
-        data: {
-            columns: columns,
-            type: 'area-spline',
-            groups: [groups]
-        },
-        axis: {
-            x: {
-                type: 'category',
-                categories: categories
-            }
-        }
-    });
-};
diff --git a/assets/js/src/LeadCycleTimeChart.js b/assets/js/src/LeadCycleTimeChart.js
deleted file mode 100644
index 7eee77fc..00000000
--- a/assets/js/src/LeadCycleTimeChart.js
+++ /dev/null
@@ -1,53 +0,0 @@
-Kanboard.LeadCycleTimeChart = function(app) {
-    this.app = app;
-};
-
-Kanboard.LeadCycleTimeChart.prototype.execute = function() {
-    if (this.app.hasId("analytic-lead-cycle-time")) {
-        this.show();
-    }
-};
-
-Kanboard.LeadCycleTimeChart.prototype.show = function() {
-    var chart = $("#chart");
-    var metrics = chart.data("metrics");
-    var cycle = [chart.data("label-cycle")];
-    var lead = [chart.data("label-lead")];
-    var categories = [];
-
-    var types = {};
-    types[chart.data("label-cycle")] = 'area';
-    types[chart.data("label-lead")] = 'area-spline';
-
-    var colors = {};
-    colors[chart.data("label-lead")] = '#afb42b';
-    colors[chart.data("label-cycle")] = '#4e342e';
-
-    for (var i = 0; i < metrics.length; i++) {
-        cycle.push(parseInt(metrics[i].avg_cycle_time));
-        lead.push(parseInt(metrics[i].avg_lead_time));
-        categories.push(metrics[i].day);
-    }
-
-    c3.generate({
-        data: {
-            columns: [
-                lead,
-                cycle
-            ],
-            types: types,
-            colors: colors
-        },
-        axis: {
-            x: {
-                type: 'category',
-                categories: categories
-            },
-            y: {
-                tick: {
-                    format: this.app.formatDuration
-                }
-            }
-        }
-    });
-};
diff --git a/assets/js/src/Namespace.js b/assets/js/src/Namespace.js
index e6ca1ed3..de825be4 100644
--- a/assets/js/src/Namespace.js
+++ b/assets/js/src/Namespace.js
@@ -3,7 +3,8 @@
 var Kanboard = {};
 
 var KB = {
-    components: {}
+    components: {},
+    utils: {}
 };
 
 KB.component = function (name, object) {
@@ -109,3 +110,17 @@ KB.el = function (tag) {
 
     return new DOMBuilder(tag);
 };
+
+KB.utils.formatDuration = function(d) {
+    if (d >= 86400) {
+        return Math.round(d/86400) + "d";
+    }
+    else if (d >= 3600) {
+        return Math.round(d/3600) + "h";
+    }
+    else if (d >= 60) {
+        return Math.round(d/60) + "m";
+    }
+
+    return d + "s";
+};