Add Discourses Component files
authorChloe Laisne <chloe.laisne@gmail.com>
Thu, 19 May 2016 14:49:42 +0200
changeset 175 7a7cfcba5bfe
parent 174 b5e6a2aa84cb
child 176 d1baf7ccecc8
Add Discourses Component files
cms/app-client/app/components/discourses-component.js
cms/app-client/app/models/discourse.js
cms/app-client/app/routes/tabs/discours.js
cms/app-client/app/templates/components/discourses-component.hbs
cms/app-client/tests/integration/components/discourses-component-test.js
cms/app-client/tests/unit/models/discourse-test.js
cms/app-client/tests/unit/routes/discours-test.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/components/discourses-component.js	Thu May 19 14:49:42 2016 +0200
@@ -0,0 +1,110 @@
+import Ember from 'ember';
+import d3 from 'd3';
+import env from 'app-client/config/environment';
+
+
+
+export default Ember.Component.extend({
+
+	constants: Ember.inject.service(),
+
+	init: function() {
+		this._super(...arguments);
+	},
+
+	didRender: function() {
+		var self = this;
+		var baseURL = env.baseURL.replace(/\/$/,"")+'/api/v1';
+
+		d3.json(baseURL + "/discourses", function(discourses) {
+			console.log(discourses);
+
+			var width = self.$().parent().width();
+			var height = self.$().parent().height();
+
+			var bubble = d3.layout.pack()
+				.sort(null)
+				.size([width, height])
+				.padding(33);
+
+			var element = d3.select('#' + self.get('elementId'));
+
+			var svg = element.append("svg")
+				.attr("width", width)
+				.attr("height", height)
+				.attr("class", "bubble");
+
+			var nodes = svg.selectAll(".node")
+				.data(bubble.nodes(self.createNodes(discourses)))
+				.enter().append("g")
+				.attr("width", function(d) { return 2.5 * d.r + 'px'; })
+				.attr("class", function(d) { return "node" + (!d.children ? " leaf" : ""); })
+				.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
+				.style("font-size", function(d) { return Math.max(13, d.r / 2) + 'px'; });
+				
+
+			var leaf = svg.selectAll(".leaf")
+				.on('click', function(d) { document.location = self.setQueryString('discours', d.name); });
+			
+			leaf.append("circle")
+				.attr("r", function(d) { return d.r; })
+				.attr("fill", function(d) { return d.fill; })
+				.attr("stroke", function(d) { return "#000"; });
+			
+			leaf.append("text")
+				.attr("dy", ".3em")
+				.style("text-anchor", "middle")
+				.text(function(d) { return d.name; });
+
+			element.style("height", height + "px");
+		});
+
+		this._super(...arguments);		
+	},
+
+	createNodes: function(json) {
+		var self = this;
+		var nodes = {};
+		var children = {};
+
+		Object.keys(json).forEach(function(key) {
+			var discourse = json[key];
+			var index = self.get('constants').DISCOURSES[key];
+			var category = self.get('constants').DISCOURSE_CATEGORIES[index];
+
+			children[index] = children[index] || {};
+			children[index]['name'] = index;
+			children[index]['children'] = children[index]['children'] || [];
+			children[index]['children'].push({ "name": discourse.label, "value": discourse.count, "fill": category.fill });
+		});
+
+		nodes.children = [];
+		Object.keys(children).forEach(function(key) {
+			nodes.children.push(children[key]);
+		});
+
+		return nodes;
+	},
+
+	setQueryString: function(field, value) {
+		var hash = document.location.href.split('?');
+		var query_parameters = hash.pop();
+
+		// Unserialize
+		var parameters = [];
+		query_parameters.split('&').forEach(function(parameter){
+			var object = parameter.split('=');
+			object[1] && (parameters[object[0]] = object[1]);
+		});
+
+		// Serialize
+		var string = [];
+		parameters[field] = encodeURI(value);
+		Object.keys(parameters).forEach(function(key) {
+			string.push(key + '=' + parameters[key]);
+		});
+
+		return hash + '?' + string.join('&');
+	}
+	
+});
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/models/discourse.js	Thu May 19 14:49:42 2016 +0200
@@ -0,0 +1,5 @@
+import Model from 'ember-data/model';
+
+export default Model.extend({
+  
+});
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/routes/tabs/discours.js	Thu May 19 14:49:42 2016 +0200
@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+	
+})
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/templates/components/discourses-component.hbs	Thu May 19 14:49:42 2016 +0200
@@ -0,0 +1,1 @@
+{{yield}}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/tests/integration/components/discourses-component-test.js	Thu May 19 14:49:42 2016 +0200
@@ -0,0 +1,24 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('discourses-component', 'Integration | Component | discourses component', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{discourses-component}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#discourses-component}}
+      template block text
+    {{/discourses-component}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/tests/unit/models/discourse-test.js	Thu May 19 14:49:42 2016 +0200
@@ -0,0 +1,12 @@
+import { moduleForModel, test } from 'ember-qunit';
+
+moduleForModel('discourse', 'Unit | Model | discourse', {
+  // Specify the other units that are required for this test.
+  needs: []
+});
+
+test('it exists', function(assert) {
+  let model = this.subject();
+  // let store = this.store();
+  assert.ok(!!model);
+});
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/tests/unit/routes/discours-test.js	Thu May 19 14:49:42 2016 +0200
@@ -0,0 +1,11 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:discours', 'Unit | Route | discours', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+test('it exists', function(assert) {
+  let route = this.subject();
+  assert.ok(route);
+});