Move chart task time column to components

assets/js/components/chart-project-avg-time-column.js

@@ -1,4 +1,4 @@
-KB.component('chart-avg-time-column', function (containerElement, options) {
+KB.component('chart-project-avg-time-column', function (containerElement, options) {
 
     this.render = function () {
         var metrics = options.metrics;

assets/js/components/chart-project-burndown.js

@@ -1,4 +1,4 @@
-KB.component('chart-burndown', function (containerElement, options) {
+KB.component('chart-project-burndown', function (containerElement, options) {
 
     this.render = function () {
         var metrics = options.metrics;

assets/js/components/chart-project-cumulative-flow.js

@@ -1,4 +1,4 @@
-KB.component('chart-cumulative-flow', function (containerElement, options) {
+KB.component('chart-project-cumulative-flow', function (containerElement, options) {
 
     this.render = function () {
         var metrics = options.metrics;

assets/js/components/chart-project-lead-cycle-time.js

@@ -1,4 +1,4 @@
-KB.component('chart-lead-cycle-time', function (containerElement, options) {
+KB.component('chart-project-lead-cycle-time', function (containerElement, options) {
 
     this.render = function () {
         var metrics = options.metrics;

assets/js/components/chart-task-time-column.js

@@ -0,0 +1,41 @@
+KB.component('chart-task-time-column', function (containerElement, options) {
+
+    this.render = function () {
+        var metrics = options.metrics;
+        var plots = [options.label];
+        var categories = [];
+
+        for (var i = 0; i < metrics.length; i++) {
+            plots.push(metrics[i].time_spent);
+            categories.push(metrics[i].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
+            }
+        });
+    };
+});