28 }, |
28 }, |
29 ], |
29 ], |
30 _defaultDefColor = "#585858"; |
30 _defaultDefColor = "#585858"; |
31 this.height = (this._config.height ? this._config.height : 50); |
31 this.height = (this._config.height ? this._config.height : 50); |
32 this.width = this.selector.width(); |
32 this.width = this.selector.width(); |
33 this.sliceCount = (this._config.slices ? this._config.slices : ~~(this.width/15)); |
33 this.isStreamGraph = (this._config.streamgraph ? this._config.streamgraph : false); |
|
34 this.sliceCount = (this._config.slices ? this._config.slices : ~~(this.width/(this.isStreamGraph ? 20 : 5))); |
34 this.tagconf = (this._config.tags |
35 this.tagconf = (this._config.tags |
35 ? this._config.tags |
36 ? this._config.tags |
36 : _defaultTags); |
37 : _defaultTags); |
37 IriSP._(this.tagconf).each(function(_a) { |
38 IriSP._(this.tagconf).each(function(_a) { |
38 _a.regexp = new RegExp(_a.keywords.map(function(_k) { |
39 _a.regexp = new RegExp(_a.keywords.map(function(_k) { |
90 return _a + _b; |
91 return _a + _b; |
91 }, 0), |
92 }, 0), |
92 _nbneutre = _group.length - _nbtags, |
93 _nbneutre = _group.length - _nbtags, |
93 _h = _nbneutre * _scale, |
94 _h = _nbneutre * _scale, |
94 _base = this.height - _h; |
95 _base = this.height - _h; |
95 /*this.paper.rect(i * _width, _base, _width, _h ).attr({ |
96 if (!this.isStreamGraph) { |
96 "stroke" : "none", |
97 this.paper.rect(i * _width, _base, _width - 1, _h ).attr({ |
97 "fill" : this.defaultcolorconf, |
98 "stroke" : "none", |
98 });*/ |
99 "fill" : this.defaultcolorconf, |
|
100 }); |
|
101 } |
99 _paths[0].push(_base); |
102 _paths[0].push(_base); |
100 for (var j = 0; j < this.tagconf.length; j++) { |
103 for (var j = 0; j < this.tagconf.length; j++) { |
101 _h = _vol[j] * _scale; |
104 _h = _vol[j] * _scale; |
102 _base = _base - _h; |
105 _base = _base - _h; |
103 /* this.paper.rect(i * _width, _base, _width, _h ).attr({ |
106 if (!this.isStreamGraph) { |
104 "stroke" : "none", |
107 this.paper.rect(i * _width, _base, _width - 1, _h ).attr({ |
105 "fill" : this.tagconf[j].color, |
108 "stroke" : "none", |
106 }); |
109 "fill" : this.tagconf[j].color, |
107 */ |
110 }); |
|
111 } |
108 _paths[j+1].push(_base); |
112 _paths[j+1].push(_base); |
109 } |
113 } |
110 this.groups.push(_vol.map(function(_v) { |
114 this.groups.push(_vol.map(function(_v) { |
111 return _v / _group.length; |
115 return _v / _group.length; |
112 })) |
116 })) |
113 } else { |
117 } else { |
114 for (var j = 0; j < _paths.length; j++) { |
118 for (var j = 0; j < _paths.length; j++) { |
115 _paths[j].push(0); |
119 _paths[j].push(this.height); |
116 } |
120 } |
117 this.groups.push(this.tagconf.map(function() { |
121 this.groups.push(this.tagconf.map(function() { |
118 return 0; |
122 return 0; |
119 })); |
123 })); |
120 } |
124 } |
121 } |
125 } |
122 |
126 |
123 for (var j = _paths.length - 1; j >= 0; j--) { |
127 if (this.isStreamGraph) { |
124 var _d = _paths[j].reduce(function(_memo, _v, _k) { |
128 for (var j = _paths.length - 1; j >= 0; j--) { |
125 return _memo + ( _k |
129 var _d = _paths[j].reduce(function(_memo, _v, _k) { |
126 ? 'C' + (_k * _width) + ' ' + _paths[j][_k - 1] + ' ' + (_k * _width) + ' ' + _v + ' ' + ((_k + .5) * _width) + ' ' + _v |
130 return _memo + ( _k |
127 : 'M0 ' + _v + 'L' + (.5*_width) + ' ' + _v ) |
131 ? 'C' + (_k * _width) + ' ' + _paths[j][_k - 1] + ' ' + (_k * _width) + ' ' + _v + ' ' + ((_k + .5) * _width) + ' ' + _v |
128 },'') + 'L' + this.width + ' ' + _paths[j][_paths[j].length - 1] + 'L' + this.width + ' ' + this.height + 'L0 ' + this.height; |
132 : 'M0 ' + _v + 'L' + (.5*_width) + ' ' + _v ) |
129 this.paper.path(_d).attr({ |
133 },'') + 'L' + this.width + ' ' + _paths[j][_paths[j].length - 1] + 'L' + this.width + ' ' + this.height + 'L0 ' + this.height; |
|
134 this.paper.path(_d).attr({ |
|
135 "stroke" : "none", |
|
136 "fill" : (j ? this.tagconf[j-1].color : this.defaultcolorconf), |
|
137 }); |
|
138 } |
|
139 } |
|
140 this.rectangleFocus = this.paper.rect(0,0,_width,this.height) |
|
141 .attr({ |
130 "stroke" : "none", |
142 "stroke" : "none", |
131 "fill" : (j ? this.tagconf[j-1].color : this.defaultcolorconf), |
143 "fill" : "#ff00ff", |
|
144 "opacity" : 0, |
|
145 }) |
|
146 this.rectangleProgress = this.paper.rect(0,0,0,this.height) |
|
147 .attr({ |
|
148 "stroke" : "none", |
|
149 "fill" : "#808080", |
|
150 "opacity" : .3, |
132 }); |
151 }); |
133 } |
|
134 |
|
135 this.rectangleProgress = this.paper.rect(0,0,0,this.height).attr({ "stroke" : "none", "fill" : "#808080", "opacity" : .3}); |
|
136 this.ligneProgress = this.paper.path("M0 0L0 "+this.height).attr({"stroke":"#ff00ff", "line-width" : 2}) |
152 this.ligneProgress = this.paper.path("M0 0L0 "+this.height).attr({"stroke":"#ff00ff", "line-width" : 2}) |
137 |
153 |
138 this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeUpdateHandler)); |
154 this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeUpdateHandler)); |
139 var _this = this; |
155 var _this = this; |
140 this.selector |
156 this.selector |
171 }; |
190 }; |
172 |
191 |
173 IriSP.StackGraphWidget.prototype.updateTooltip = function(event) { |
192 IriSP.StackGraphWidget.prototype.updateTooltip = function(event) { |
174 var _segment = ~~(this.sliceCount * (event.pageX - this.selector.offset().left)/this.width), |
193 var _segment = ~~(this.sliceCount * (event.pageX - this.selector.offset().left)/this.width), |
175 _valeurs = this.groups[_segment], |
194 _valeurs = this.groups[_segment], |
|
195 _width = this.width / this.sliceCount, |
176 _html = '<ul style="list-style: none; margin: 0; padding: 0;">' + this.tagconf.map(function(_tag, _i) { |
196 _html = '<ul style="list-style: none; margin: 0; padding: 0;">' + this.tagconf.map(function(_tag, _i) { |
177 return '<li style="clear: both;"><span style="float: left; width: 10px; height: 10px; margin: 2px; background: ' |
197 return '<li style="clear: both;"><span style="float: left; width: 10px; height: 10px; margin: 2px; background: ' |
178 + _tag.color |
198 + _tag.color |
179 + ';"></span>' |
199 + ';"></span>' |
180 + ~~(100 * _valeurs[_i]) |
200 + ~~(100 * _valeurs[_i]) |
181 + '% de ' |
201 + '% de ' |
182 + _tag.description |
202 + _tag.description |
183 + '</li>'; |
203 + '</li>'; |
184 }).join('') + '</ul>'; |
204 }).join('') + '</ul>'; |
185 this.TooltipWidget._shown = false; // Vraiment, on ne peut pas ouvrir le widget s'il n'est pas encore ouvert ? |
205 this.TooltipWidget._shown = false; // Vraiment, on ne peut pas ouvrir le widget s'il n'est pas encore ouvert ? |
186 this.TooltipWidget.show('','',event.pageX - 100, event.pageY - 150); |
206 this.TooltipWidget.show('','',event.pageX - 105, event.pageY - 160); |
187 this.TooltipWidget.selector.find(".tip").html(_html); |
207 this.TooltipWidget.selector.find(".tip").html(_html); |
188 } |
208 this.rectangleFocus.attr({ |
189 |
209 "x" : _segment * _width, |
|
210 "opacity" : .4, |
|
211 }) |
|
212 } |
|
213 |