src/js/widgets/stackGraphWidget.js
branchpopcorn-port
changeset 821 49013af6d50b
parent 820 7968346b9689
child 827 1dc2f85c3b89
equal deleted inserted replaced
820:7968346b9689 821:49013af6d50b
     3 }
     3 }
     4 
     4 
     5 IriSP.StackGraphWidget.prototype = new IriSP.Widget();
     5 IriSP.StackGraphWidget.prototype = new IriSP.Widget();
     6 
     6 
     7 IriSP.StackGraphWidget.prototype.draw = function() {
     7 IriSP.StackGraphWidget.prototype.draw = function() {
     8     var _defaultTags = [
     8     var _ = IriSP._,
       
     9         _defaultTags = [
     9             {
    10             {
    10                 "keywords" : [ "++" ],
    11                 "keywords" : [ "++" ],
    11                 "description" : "positif",
    12                 "description" : "positif",
    12                 "color" : "#1D973D"
    13                 "color" : "#1D973D"
    13             },
    14             },
    34     this.sliceCount = this._config.slices || ~~(this.width/(this.isStreamGraph ? 20 : 5));
    35     this.sliceCount = this._config.slices || ~~(this.width/(this.isStreamGraph ? 20 : 5));
    35     this.tagconf = (this._config.tags
    36     this.tagconf = (this._config.tags
    36         ? this._config.tags
    37         ? this._config.tags
    37         : _defaultTags);
    38         : _defaultTags);
    38     IriSP._(this.tagconf).each(function(_a) {
    39     IriSP._(this.tagconf).each(function(_a) {
    39         _a.regexp = new RegExp(_a.keywords.map(function(_k) {
    40         _a.regexp = new RegExp(_(_a.keywords).map(function(_k) {
    40             return _k.replace(/([\W])/gm,'\\$1');
    41             return _k.replace(/([\W])/gm,'\\$1');
    41         }).join("|"),"im")
    42         }).join("|"),"im")
    42     });
    43     });
    43     this.defaultcolorconf = (this._config.defaultcolor
    44     this.defaultcolorconf = (this._config.defaultcolor
    44         ? this._config.defaultcolor
    45         ? this._config.defaultcolor
    48     this.duration = this._serializer.getDuration();
    49     this.duration = this._serializer.getDuration();
    49     
    50     
    50     var _annotationType = this._serializer.getTweets(),
    51     var _annotationType = this._serializer.getTweets(),
    51         _sliceDuration = ~~ ( this.duration / this.sliceCount),
    52         _sliceDuration = ~~ ( this.duration / this.sliceCount),
    52         _annotations = this._serializer._data.annotations,
    53         _annotations = this._serializer._data.annotations,
    53         _groupedAnnotations = IriSP._.range(this.sliceCount).map(function(_i) {
    54         _groupedAnnotations = _(_.range(this.sliceCount)).map(function(_i) {
    54             return _annotations.filter(function(_a){
    55             return _(_annotations).filter(function(_a){
    55                 return (_a.begin <= (1 + _i) * _sliceDuration) && (_a.end >= _i * _sliceDuration)
    56                 return (_a.begin <= (1 + _i) * _sliceDuration) && (_a.end >= _i * _sliceDuration)
    56             });
    57             });
    57         }),
    58         }),
    58         _max = IriSP._(_groupedAnnotations).max(function(_g) {
    59         _max = IriSP._(_groupedAnnotations).max(function(_g) {
    59             return _g.length
    60             return _g.length
    62         _width = this.width / this.sliceCount
    63         _width = this.width / this.sliceCount
    63         _showTitle = !this._config.excludeTitle,
    64         _showTitle = !this._config.excludeTitle,
    64         _showDescription = !this._config.excludeDescription;
    65         _showDescription = !this._config.excludeDescription;
    65     
    66     
    66     
    67     
    67     var _paths = this.tagconf.map(function() {
    68     var _paths = _(this.tagconf).map(function() {
    68         return [];
    69         return [];
    69     });
    70     });
    70     _paths.push([]);
    71     _paths.push([]);
    71     
    72     
    72     for (var i = 0; i < this.sliceCount; i++) {
    73     for (var i = 0; i < this.sliceCount; i++) {
    73         var _group = _groupedAnnotations[i];
    74         var _group = _groupedAnnotations[i];
    74         if (_group) {
    75         if (_group) {
    75             var _vol = this.tagconf.map(function() {
    76             var _vol = _(this.tagconf).map(function() {
    76                 return 0;
    77                 return 0;
    77             });
    78             });
    78             for (var j = 0; j < _group.length; j++){
    79             for (var j = 0; j < _group.length; j++){
    79            var _txt = (_showTitle ? _group[j].content.title : '') + ' ' + (_showDescription ? _group[j].content.description : '')
    80            var _txt = (_showTitle ? _group[j].content.title : '') + ' ' + (_showDescription ? _group[j].content.description : '')
    80                 var _tags = this.tagconf.map(function(_tag) {
    81                 var _tags = _(this.tagconf).map(function(_tag) {
    81                         return (_txt.search(_tag.regexp) == -1 ? 0 : 1)
    82                         return (_txt.search(_tag.regexp) == -1 ? 0 : 1)
    82                     }),
    83                     }),
    83                     _nbtags = _tags.reduce(function(_a,_b) {
    84                     _nbtags = _(_tags).reduce(function(_a,_b) {
    84                         return _a + _b;
    85                         return _a + _b;
    85                     }, 0);
    86                     }, 0);
    86                 if (_nbtags) {
    87                 if (_nbtags) {
    87                     IriSP._(_tags).each(function(_v, _k) {
    88                     IriSP._(_tags).each(function(_v, _k) {
    88                         _vol[_k] += (_v / _nbtags);
    89                         _vol[_k] += (_v / _nbtags);
    89                     });
    90                     });
    90                 }
    91                 }
    91             }
    92             }
    92             var _nbtags = _vol.reduce(function(_a,_b) {
    93             var _nbtags = _(_vol).reduce(function(_a,_b) {
    93                     return _a + _b;
    94                     return _a + _b;
    94                 }, 0),
    95                 }, 0),
    95                 _nbneutre = _group.length - _nbtags,
    96                 _nbneutre = _group.length - _nbtags,
    96                 _h = _nbneutre * _scale,
    97                 _h = _nbneutre * _scale,
    97                 _base = this.height - _h;
    98                 _base = this.height - _h;
   111                         "fill" : this.tagconf[j].color
   112                         "fill" : this.tagconf[j].color
   112                     });
   113                     });
   113                 }
   114                 }
   114                 _paths[j+1].push(_base);
   115                 _paths[j+1].push(_base);
   115             }
   116             }
   116             this.groups.push(_vol.map(function(_v) {
   117             this.groups.push(_(_vol).map(function(_v) {
   117                 return _v / _group.length;
   118                 return _v / _group.length;
   118             }))
   119             }))
   119         } else {
   120         } else {
   120             for (var j = 0; j < _paths.length; j++) {
   121             for (var j = 0; j < _paths.length; j++) {
   121                 _paths[j].push(this.height);
   122                 _paths[j].push(this.height);
   122             }
   123             }
   123             this.groups.push(this.tagconf.map(function() {
   124             this.groups.push(_(this.tagconf).map(function() {
   124                 return 0;
   125                 return 0;
   125             }));
   126             }));
   126         }
   127         }
   127     }
   128     }
   128     
   129     
   129     if (this.isStreamGraph) {
   130     if (this.isStreamGraph) {
   130         for (var j = _paths.length - 1; j >= 0; j--) {
   131         for (var j = _paths.length - 1; j >= 0; j--) {
   131             var _d = _paths[j].reduce(function(_memo, _v, _k) {
   132             var _d = _(_paths[j]).reduce(function(_memo, _v, _k) {
   132                return _memo + ( _k
   133                return _memo + ( _k
   133                    ? 'C' + (_k * _width) + ' ' + _paths[j][_k - 1] + ' ' + (_k * _width) + ' ' + _v + ' ' + ((_k + .5) * _width) + ' ' + _v
   134                    ? 'C' + (_k * _width) + ' ' + _paths[j][_k - 1] + ' ' + (_k * _width) + ' ' + _v + ' ' + ((_k + .5) * _width) + ' ' + _v
   134                    : 'M0 ' + _v + 'L' + (.5*_width) + ' ' + _v )
   135                    : 'M0 ' + _v + 'L' + (.5*_width) + ' ' + _v )
   135             },'') + 'L' + this.width + ' ' + _paths[j][_paths[j].length - 1] + 'L' + this.width + ' ' + this.height + 'L0 ' + this.height;
   136             },'') + 'L' + this.width + ' ' + _paths[j][_paths[j].length - 1] + 'L' + this.width + ' ' + this.height + 'L0 ' + this.height;
   136             this.paper.path(_d).attr({
   137             this.paper.path(_d).attr({
   198 
   199 
   199 IriSP.StackGraphWidget.prototype.updateTooltip = function(event) {
   200 IriSP.StackGraphWidget.prototype.updateTooltip = function(event) {
   200     var _segment = ~~(this.sliceCount * (event.pageX - this.selector.offset().left)/this.width),
   201     var _segment = ~~(this.sliceCount * (event.pageX - this.selector.offset().left)/this.width),
   201         _valeurs = this.groups[_segment],
   202         _valeurs = this.groups[_segment],
   202         _width = this.width / this.sliceCount,
   203         _width = this.width / this.sliceCount,
   203         _html = '<ul style="list-style: none; margin: 0; padding: 0;">' + this.tagconf.map(function(_tag, _i) {
   204         _html = '<ul style="list-style: none; margin: 0; padding: 0;">' + IriSP._(this.tagconf).map(function(_tag, _i) {
   204             return '<li style="clear: both;"><span style="float: left; width: 10px; height: 10px; margin: 2px; background: '
   205             return '<li style="clear: both;"><span style="float: left; width: 10px; height: 10px; margin: 2px; background: '
   205                 + _tag.color
   206                 + _tag.color
   206                 + ';"></span>'
   207                 + ';"></span>'
   207                 + ~~(100 * _valeurs[_i])
   208                 + ~~(100 * _valeurs[_i])
   208                 + '% de '
   209                 + '% de '