1 import Ember from 'ember';

     2 import d3 from 'd3';

     3 import env from 'app-client/config/environment';

     4 

     5 

     6 

     7 export default Ember.Component.extend({

     8 

     9 	constants: Ember.inject.service(),

    10 

    11 	init: function() {

    12 		this._super(...arguments);

    13 	},

    14 

    15 	didRender: function() {

    16 		var self = this;

    17 		var baseURL = env.baseURL.replace(/\/$/,"")+'/api/v1';

    18 

    19 		d3.json(baseURL + "/discourses", function(discourses) {

    20 			console.log(discourses);

    21 

    22 			var width = self.$().parent().width();

    23 			var height = self.$().parent().height();

    24 

    25 			var bubble = d3.layout.pack()

    26 				.sort(null)

    27 				.size([width, height])

    28 				.padding(33);

    29 

    30 			var element = d3.select('#' + self.get('elementId'));

    31 

    32 			var svg = element.append("svg")

    33 				.attr("width", width)

    34 				.attr("height", height)

    35 				.attr("class", "bubble");

    36 

    37 			var nodes = svg.selectAll(".node")

    38 				.data(bubble.nodes(self.createNodes(discourses)))

    39 				.enter().append("g")

    40 				.attr("width", function(d) { return 2.5 * d.r + 'px'; })

    41 				.attr("class", function(d) { return "node" + (!d.children ? " leaf" : ""); })

    42 				.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })

    43 				.style("font-size", function(d) { return Math.max(13, d.r / 2) + 'px'; });

    44 				

    45 

    46 			var leaf = svg.selectAll(".leaf")

    47 				.on('click', function(d) { document.location = self.setQueryString('discours', d.name); });

    48 			

    49 			leaf.append("circle")

    50 				.attr("r", function(d) { return d.r; })

    51 				.attr("fill", function(d) { return d.fill; })

    52 				.attr("stroke", function(d) { return "#000"; });

    53 			

    54 			leaf.append("text")

    55 				.attr("dy", ".3em")

    56 				.style("text-anchor", "middle")

    57 				.text(function(d) { return d.name; });

    58 

    59 			element.style("height", height + "px");

    60 		});

    61 

    62 		this._super(...arguments);		

    63 	},

    64 

    65 	createNodes: function(json) {

    66 		var self = this;

    67 		var nodes = {};

    68 		var children = {};

    69 

    70 		Object.keys(json).forEach(function(key) {

    71 			var discourse = json[key];

    72 			var index = self.get('constants').DISCOURSES[key];

    73 			var category = self.get('constants').DISCOURSE_CATEGORIES[index];

    74 

    75 			children[index] = children[index] || {};

    76 			children[index]['name'] = index;

    77 			children[index]['children'] = children[index]['children'] || [];

    78 			children[index]['children'].push({ "name": discourse.label, "value": discourse.count, "fill": category.fill });

    79 		});

    80 

    81 		nodes.children = [];

    82 		Object.keys(children).forEach(function(key) {

    83 			nodes.children.push(children[key]);

    84 		});

    85 

    86 		return nodes;

    87 	},

    88 

    89 	setQueryString: function(field, value) {

    90 		var hash = document.location.href.split('?');

    91 		var query_parameters = hash.pop();

    92 

    93 		// Unserialize

    94 		var parameters = [];

    95 		query_parameters.split('&').forEach(function(parameter){

    96 			var object = parameter.split('=');

    97 			object[1] && (parameters[object[0]] = object[1]);

    98 		});

    99 

   100 		// Serialize

   101 		var string = [];

   102 		parameters[field] = encodeURI(value);

   103 		Object.keys(parameters).forEach(function(key) {

   104 			string.push(key + '=' + parameters[key]);

   105 		});

   106 

   107 		return hash + '?' + string.join('&');

   108 	}

   109 	

   110 });