use ember-charts for user-tag-graph

Author: vdvibhu20

app/pods/components/user-tag-graph/component.js

@@ -9,21 +9,47 @@ export default class UserTagComponent extends Component {
 
   @alias('fetchUserTagsTask.lastSuccessful.value') userTags
 
+  options = {
+    legend: {
+      display: false
+    }, 
+    scales: {
+      xAxes: [{
+          barThickness: 30,
+          gridLines: {
+              offsetGridLines: true
+          }
+      }]
+    } 
+  }
+
   @computed('userTags.@each.tag', 'userTags.@each.rating') 
   get chartData() {
     const userTags = this.get('userTags')
     if(userTags) {
-      return userTags.map(ut => {
-        return {
-          x: ut.get('tag.name'),
-          y: Math.round(ut.get('rating'))
-        }
-      })
+      return {
+        labels: userTags.map(_ => _.get('tag.name')),
+        datasets: [
+          {
+            data: userTags.map(_ => +_.get('rating')),
+            fill:false,
+            backgroundColor: this.gradient
+          }
+        ]
+      }
     } else {
       return []
     }
   }
 
+  didInsertElement() {
+    const ctx = document.getElementsByTagName('canvas')[0].getContext("2d")
+    const gradient = ctx.createLinearGradient(0, 0, 0, 200)
+    gradient.addColorStop(0, '#ec6333')
+    gradient.addColorStop(1, '#f19633')
+    this.set('gradient', gradient)
+  }
+
   didReceiveAttrs() {
     this.fetchUserTagsTask.perform()
   }

app/pods/components/user-tag-graph/template.hbs

@@ -1,7 +1,9 @@
 <div class="border-card">
   <h4 class="t-align-c mb-4">Topic-Vise Performance</h4>
 
-  {{#if chartData}}
-    <BarChart @data={{chartData}} />
-  {{/if}}
+  <EmberChart 
+    @type="bar"
+    @options={{options}}
+    @data={{chartData}} />
+  
 </div>