Use components to render charts

7 files changed, 215 insertions, 25 deletions

diff --git a/assets/js/components/chart-avg-time-column.js b/assets/js/components/chart-avg-time-column.js
new file mode 100644
index 00000000..0fc85f71
--- /dev/null
+++ b/assets/js/components/chart-avg-time-column.js
@@ -0,0 +1,41 @@
+KB.component('chart-avg-time-column', function (containerElement, options) {
+
+    this.render = function () {
+        var metrics = options.metrics;
+        var plots = [options.label];
+        var categories = [];
+
+        for (var column_id in metrics) {
+            plots.push(metrics[column_id].average);
+            categories.push(metrics[column_id].title);
+        }
+
+        KB.el(containerElement).add(KB.el('div').attr('id', 'chart').build());
+
+        c3.generate({
+            data: {
+                columns: [plots],
+                type: 'bar'
+            },
+            bar: {
+                width: {
+                    ratio: 0.5
+                }
+            },
+            axis: {
+                x: {
+                    type: 'category',
+                    categories: categories
+                },
+                y: {
+                    tick: {
+                        format: KB.utils.formatDuration
+                    }
+                }
+            },
+            legend: {
+                show: false
+            }
+        });
+    };
+});
\ No newline at end of file
diff --git a/assets/js/components/chart-burndown.js b/assets/js/components/chart-burndown.js
new file mode 100644
index 00000000..0bb96742
--- /dev/null
+++ b/assets/js/components/chart-burndown.js
@@ -0,0 +1,50 @@
+KB.component('chart-burndown', function (containerElement, options) {
+
+    this.render = function () {
+        var metrics = options.metrics;
+        var columns = [[options.labelTotal]];
+        var categories = [];
+        var inputFormat = d3.time.format("%Y-%m-%d");
+        var outputFormat = d3.time.format(options.dateFormat);
+
+        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])));
+                    }
+                }
+            }
+        }
+
+        KB.el(containerElement).add(KB.el('div').attr('id', 'chart').build());
+
+        c3.generate({
+            data: {
+                columns: columns
+            },
+            axis: {
+                x: {
+                    type: 'category',
+                    categories: categories
+                }
+            }
+        });
+    };
+});
diff --git a/assets/js/components/chart-cumulative-flow.js b/assets/js/components/chart-cumulative-flow.js
new file mode 100644
index 00000000..d1e05590
--- /dev/null
+++ b/assets/js/components/chart-cumulative-flow.js
@@ -0,0 +1,49 @@
+KB.component('chart-cumulative-flow', function (containerElement, options) {
+
+    this.render = function () {
+        var metrics = options.metrics;
+        var columns = [];
+        var groups = [];
+        var categories = [];
+        var inputFormat = d3.time.format("%Y-%m-%d");
+        var outputFormat = d3.time.format(options.dateFormat);
+
+        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])));
+                    }
+                }
+            }
+        }
+
+        KB.el(containerElement).add(KB.el('div').attr('id', 'chart').build());
+
+        c3.generate({
+            data: {
+                columns: columns,
+                type: 'area-spline',
+                groups: [groups]
+            },
+            axis: {
+                x: {
+                    type: 'category',
+                    categories: categories
+                }
+            }
+        });
+    };
+});
diff --git a/assets/js/components/chart-lead-cycle-time.js b/assets/js/components/chart-lead-cycle-time.js
new file mode 100644
index 00000000..db7767d2
--- /dev/null
+++ b/assets/js/components/chart-lead-cycle-time.js
@@ -0,0 +1,47 @@
+KB.component('chart-lead-cycle-time', function (containerElement, options) {
+
+    this.render = function () {
+        var metrics = options.metrics;
+        var cycle = [options.labelCycle];
+        var lead = [options.labelLead];
+        var categories = [];
+
+        var types = {};
+        types[options.labelCycle] = 'area';
+        types[options.labelLead] = 'area-spline';
+
+        var colors = {};
+        colors[options.labelLead] = '#afb42b';
+        colors[options.labelCycle] = '#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);
+        }
+
+        KB.el(containerElement).add(KB.el('div').attr('id', 'chart').build());
+
+        c3.generate({
+            data: {
+                columns: [
+                    lead,
+                    cycle
+                ],
+                types: types,
+                colors: colors
+            },
+            axis: {
+                x: {
+                    type: 'category',
+                    categories: categories
+                },
+                y: {
+                    tick: {
+                        format: KB.utils.formatDuration
+                    }
+                }
+            }
+        });
+    };
+});
diff --git a/assets/js/components/chart-project-task-distribution.js b/assets/js/components/chart-project-task-distribution.js
index b5d712ce..982aaf7f 100644
--- a/assets/js/components/chart-project-task-distribution.js
+++ b/assets/js/components/chart-project-task-distribution.js
@@ -1,18 +1,19 @@
-Vue.component('chart-project-task-distribution', {
-    props: ['metrics'],
-    template: '<div id="chart"></div>',
-    ready: function () {
+KB.component('chart-project-task-distribution', function (containerElement, options) {
+
+    this.render = function () {
         var columns = [];
 
-        for (var i = 0; i < this.metrics.length; i++) {
-            columns.push([this.metrics[i].column_title, this.metrics[i].nb_tasks]);
+        for (var i = 0; i < options.metrics.length; i++) {
+            columns.push([options.metrics[i].column_title, options.metrics[i].nb_tasks]);
         }
 
+        KB.el(containerElement).add(KB.el('div').attr('id', 'chart').build());
+
         c3.generate({
             data: {
                 columns: columns,
                 type : 'donut'
             }
         });
-    }
+    };
 });
diff --git a/assets/js/components/chart-project-time-comparison.js b/assets/js/components/chart-project-time-comparison.js
index 6fbdb919..a110e6b4 100644
--- a/assets/js/components/chart-project-time-comparison.js
+++ b/assets/js/components/chart-project-time-comparison.js
@@ -1,17 +1,18 @@
-Vue.component('chart-project-time-comparison', {
-    props: ['metrics', 'labelSpent', 'labelEstimated', 'labelClosed', 'labelOpen'],
-    template: '<div id="chart"></div>',
-    ready: function () {
-        var spent = [this.labelSpent];
-        var estimated = [this.labelEstimated];
+KB.component('chart-project-time-comparison', function (containerElement, options) {
+
+    this.render = function () {
+        var spent = [options.labelSpent];
+        var estimated = [options.labelEstimated];
         var categories = [];
 
-        for (var status in this.metrics) {
-            spent.push(this.metrics[status].time_spent);
-            estimated.push(this.metrics[status].time_estimated);
-            categories.push(status === 'open' ? this.labelOpen : this.labelClosed);
+        for (var status in options.metrics) {
+            spent.push(options.metrics[status].time_spent);
+            estimated.push(options.metrics[status].time_estimated);
+            categories.push(status === 'open' ? options.labelOpen : options.labelClosed);
         }
 
+        KB.el(containerElement).add(KB.el('div').attr('id', 'chart').build());
+
         c3.generate({
             data: {
                 columns: [spent, estimated],
@@ -32,5 +33,5 @@ Vue.component('chart-project-time-comparison', {
                 show: true
             }
         });
-    }
+    };
 });
diff --git a/assets/js/components/chart-project-user-distribution.js b/assets/js/components/chart-project-user-distribution.js
index a569e0be..8ab61799 100644
--- a/assets/js/components/chart-project-user-distribution.js
+++ b/assets/js/components/chart-project-user-distribution.js
@@ -1,18 +1,19 @@
-Vue.component('chart-project-user-distribution', {
-    props: ['metrics'],
-    template: '<div id="chart"></div>',
-    ready: function () {
+KB.component('chart-project-user-distribution', function (containerElement, options) {
+
+    this.render = function () {
         var columns = [];
 
-        for (var i = 0; i < this.metrics.length; i++) {
-            columns.push([this.metrics[i].user, this.metrics[i].nb_tasks]);
+        for (var i = 0; i < options.metrics.length; i++) {
+            columns.push([options.metrics[i].user, options.metrics[i].nb_tasks]);
         }
 
+        KB.el(containerElement).add(KB.el('div').attr('id', 'chart').build());
+
         c3.generate({
             data: {
                 columns: columns,
                 type : 'donut'
             }
         });
-    }
+    };
 });