# HG changeset patch # User Chloe Laisne # Date 1463662182 -7200 # Node ID 7a7cfcba5bfe83242bf923a015c89c99e4f7d0ff # Parent b5e6a2aa84cb67d5654d4bdcbeabb679bcc0d8ba Add Discourses Component files diff -r b5e6a2aa84cb -r 7a7cfcba5bfe cms/app-client/app/components/discourses-component.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('&'); + } + +}); diff -r b5e6a2aa84cb -r 7a7cfcba5bfe cms/app-client/app/models/discourse.js --- /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({ + +}); diff -r b5e6a2aa84cb -r 7a7cfcba5bfe cms/app-client/app/routes/tabs/discours.js --- /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 diff -r b5e6a2aa84cb -r 7a7cfcba5bfe cms/app-client/app/templates/components/discourses-component.hbs --- /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}} diff -r b5e6a2aa84cb -r 7a7cfcba5bfe cms/app-client/tests/integration/components/discourses-component-test.js --- /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'); +}); diff -r b5e6a2aa84cb -r 7a7cfcba5bfe cms/app-client/tests/unit/models/discourse-test.js --- /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); +}); diff -r b5e6a2aa84cb -r 7a7cfcba5bfe cms/app-client/tests/unit/routes/discours-test.js --- /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); +});