Use components to render charts

1 files changed, 8 insertions, 7 deletions

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