Use components to render charts

1 files changed, 50 insertions, 0 deletions

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
+                }
+            }
+        });
+    };
+});