add user-tag-graph to profile

Author: vdvibhu20

app/models/user-tag.js

@@ -0,0 +1,8 @@
+import Ember from 'ember';
+import DS from 'ember-data';
+const { Model } = DS;
+
+export default Model.extend({
+  tag: DS.attr(),
+  rating: DS.attr()
+});

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

@@ -0,0 +1,41 @@
+import Component from '@ember/component';
+import { inject as service } from '@ember/service';
+import { computed } from '@ember/object';
+import { task } from 'ember-concurrency-decorators';
+import { alias } from '@ember/object/computed';
+
+export default class UserTagComponent extends Component {
+  @service store
+
+  @alias('fetchUserTagsTask.lastSuccessful.value') userTags
+
+  @computed('[email protected]', '[email protected]') 
+  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'))
+        }
+      })
+    } else {
+      return []
+    }
+  }
+
+  didReceiveAttrs() {
+    this.fetchUserTagsTask.perform()
+  }
+
+  @task fetchUserTagsTask = function* () {
+    return yield this.store.query('user-tag', {
+      filter: {
+        user_id: this.userId
+      },
+      page: {
+        limit: 200
+      }
+    })
+  }
+}

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

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

app/pods/users/id/template.hbs

@@ -12,6 +12,8 @@
       @setOffset={{action 'setOffset'}}>
     </SubmissionsHeatMapView>
 
+    <UserTagGraph class="mb-5" @userId="{{user.id}}" />
+
     <ProfileBadges 
       @userId={{user.id}} />
 

tests/integration/pods/components/user-tag-graph/component-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | user-tag-graph', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<UserTagGraph />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <UserTagGraph>
+        template block text
+      </UserTagGraph>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});