cms/app-client/app/components/discourses-component.js
changeset 292 df030ddd4eca
parent 286 57762c0b601e
child 305 ff6cf3fc5f40
child 310 b1f9bcfda379
equal deleted inserted replaced
291:478cdcc56a63 292:df030ddd4eca
     8 
     8 
     9     classNames: ['discourses-component'],
     9     classNames: ['discourses-component'],
    10 
    10 
    11     constants: Ember.inject.service(),
    11     constants: Ember.inject.service(),
    12     filter: Ember.inject.service(),
    12     filter: Ember.inject.service(),
       
    13 
       
    14     discourseObserver: Ember.observer('filter.discourse', function() {
       
    15         Ember.$('.item').removeClass("selected");
       
    16         Ember.$('.item[data-id="' + this.get('filter').get('discourse') + '"]').addClass("selected");
       
    17     }).on('init'),
    13 
    18 
    14     didRender: function() {
    19     didRender: function() {
    15         var self = this;
    20         var self = this;
    16         var baseURL = ENV.rootURL.replace(/\/$/,"")+'/api/v1';
    21         var baseURL = ENV.rootURL.replace(/\/$/,"")+'/api/v1';
    17 
    22 
    37 
    42 
    38             var element = d3.select('#' + self.get('elementId'));
    43             var element = d3.select('#' + self.get('elementId'));
    39 
    44 
    40             var bubbles = bubble.nodes(self.createNodes(discourses));
    45             var bubbles = bubble.nodes(self.createNodes(discourses));
    41 
    46 
    42             var caption = element.append("div")
    47             var nodes = element
    43                 .attr("class", "caption");
    48                 .selectAll()
    44             var caption_nodes = caption.selectAll(".node")
       
    45                 .data(bubbles);
    49                 .data(bubbles);
    46 
    50 
    47             caption_nodes.enter().append("div")
    51             nodes.enter().append("div")
    48                 .attr("class", function(d) { return d.children ? " category": " item"; });
    52                 .attr("class", function(d) { return ( d.children ? "category": "item" ) + ( self.get('filter').get('discourse') === d.id ? " selected" : "" ) ; });
    49 
    53 
    50             var item = caption.selectAll(".item")
    54             var item = element.selectAll(".item")
    51                 .style("width", function(d) { return (d.r * 2) + 'px'; })
    55                 .attr("data-id", function(d) { return d.id; })
    52                 .style("height", function(d) { return (d.r * 2) + 'px'; })
    56                 .style("left", function(d) { return ( d.x - d.r)  + "px"; })
    53                 .style("left", function(d) { return d.x - d.r + 'px'; })
    57                 .style("top", function(d) { return ( d.y - d.r)  + "px"; })
    54                 .style("top", function(d) { return d.y - d.r + 'px'; })
    58                 .style("width", function(d) { return (d.r * 2) + "px"; })
    55                 .style("font-size", function(d) {
    59                 .style("height", function(d) { return (d.r * 2) + "px"; })
    56                     return Math.floor((((d.value - oldMin) * (13 - 11)) / (oldMax - oldMin)) + 11) + 'px';
    60                 .style("background-color", function(d) { return d.fill; })
    57                 })
    61                 .style("border-color", function(d) { return d.stroke; })
    58                 .on('click', function(d) {
    62                 .style("font-size", function(d) { return Math.floor((((d.value - oldMin) * (13 - 11)) / (oldMax - oldMin)) + 11) + 'px'; })
    59                     self.get('filter').set('discourse', d.id);
       
    60                 });
       
    61             item.append("span")
       
    62                 .html(function(d) { return d.name + ' <span class="count">(' + d.value + ')</span>'; })
       
    63                 .style("display", function(d) { return d.children ? 'none' : 'inline-block'; })
       
    64                 .style("width", function() { return Ember.$(this).parent().width() > Ember.$(this).width() ? Ember.$(this).parent().width() + 'px' : ''; })
       
    65                 .style("margin-left", function() { return ( Ember.$(this).width() > Ember.$(this).parent().width() ? - ( Ember.$(this).width() / 2 ) + ( Ember.$(this).parent().width() / 2 ) : 0 ) + 'px'; })
       
    66                 .style("margin-top", function() { return Ember.$(this).parent().height() / 2 - Ember.$(this).height() / 2 + 'px'; });
       
    67 
       
    68             var svg = element.append("svg")
       
    69                 .style("width", width + "px")
       
    70                 .style("height", height + "px")
       
    71                 .attr("class", "bubble");
       
    72 
       
    73             var svg_nodes = svg.selectAll(".node")
       
    74                 .data(bubbles);
       
    75             svg_nodes.enter().append("g")
       
    76                 .attr("class", function(d) { return "node" + (!d.children ? " leaf" : ""); })
       
    77                 .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
       
    78 
       
    79             var leaf = svg.selectAll(".leaf")
       
    80                 .on('click', function(d) {
    63                 .on('click', function(d) {
    81                     self.get('filter').set('discourse', d.id);
    64                     self.get('filter').set('discourse', d.id);
    82                 });
    65                 });
    83 
    66 
    84             leaf.append("circle")
    67             item.append("span")
    85                 .attr("r", function(d) { return d.r; })
    68                 .html(function(d) { return d.name + ' <span class="count">(' + d.value + ')</span>'; })
    86                 .attr("fill", function(d) { return d.fill; })
    69                 .style("margin-left", function() { return ( Ember.$(this).width() > Ember.$(this).parent().width() ? - ( Ember.$(this).width() / 2 ) + ( Ember.$(this).parent().width() / 2 ) : 0 ) + 'px'; })
    87                 .attr("stroke", function(d) { return d.stroke; });
    70                 .style("margin-top", function() { return Ember.$(this).parent().height() / 2 - Ember.$(this).height() / 2 + 'px'; });
    88             element.style("height", height + "px");
       
    89         });
    71         });
    90 
    72 
    91         this._super(...arguments);
    73         this._super(...arguments);
    92     },
    74     },
    93 
    75