Use components to render charts

1 files changed, 41 insertions, 0 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