7 IriSP.StackGraphWidget.prototype.draw = function() { |
7 IriSP.StackGraphWidget.prototype.draw = function() { |
8 var _defaultTags = [ |
8 var _defaultTags = [ |
9 { |
9 { |
10 "keywords" : [ "++" ], |
10 "keywords" : [ "++" ], |
11 "description" : "positif", |
11 "description" : "positif", |
12 "color" : "#1D973D", |
12 "color" : "#1D973D" |
13 }, |
13 }, |
14 { |
14 { |
15 "keywords" : [ "--" ], |
15 "keywords" : [ "--" ], |
16 "description" : "negatif", |
16 "description" : "negatif", |
17 "color" : "#CE0A15", |
17 "color" : "#CE0A15" |
18 }, |
18 }, |
19 { |
19 { |
20 "keywords" : [ "==" ], |
20 "keywords" : [ "==" ], |
21 "description" : "reference", |
21 "description" : "reference", |
22 "color" : "#C5A62D", |
22 "color" : "#C5A62D" |
23 }, |
23 }, |
24 { |
24 { |
25 "keywords" : [ "??" ], |
25 "keywords" : [ "??" ], |
26 "description" : "question", |
26 "description" : "question", |
27 "color" : "#036AAE", |
27 "color" : "#036AAE" |
28 }, |
28 } |
29 ], |
29 ], |
30 _defaultDefColor = "#585858"; |
30 _defaultDefColor = "#585858"; |
31 this.height = this._config.height || 50; |
31 this.height = this._config.height || 50; |
32 this.width = this.selector.width(); |
32 this.width = this.selector.width(); |
33 this.isStreamGraph = this._config.streamgraph || false; |
33 this.isStreamGraph = this._config.streamgraph || false; |
96 _h = _nbneutre * _scale, |
96 _h = _nbneutre * _scale, |
97 _base = this.height - _h; |
97 _base = this.height - _h; |
98 if (!this.isStreamGraph) { |
98 if (!this.isStreamGraph) { |
99 this.paper.rect(i * _width, _base, _width - 1, _h ).attr({ |
99 this.paper.rect(i * _width, _base, _width - 1, _h ).attr({ |
100 "stroke" : "none", |
100 "stroke" : "none", |
101 "fill" : this.defaultcolorconf, |
101 "fill" : this.defaultcolorconf |
102 }); |
102 }); |
103 } |
103 } |
104 _paths[0].push(_base); |
104 _paths[0].push(_base); |
105 for (var j = 0; j < this.tagconf.length; j++) { |
105 for (var j = 0; j < this.tagconf.length; j++) { |
106 _h = _vol[j] * _scale; |
106 _h = _vol[j] * _scale; |
107 _base = _base - _h; |
107 _base = _base - _h; |
108 if (!this.isStreamGraph) { |
108 if (!this.isStreamGraph) { |
109 this.paper.rect(i * _width, _base, _width - 1, _h ).attr({ |
109 this.paper.rect(i * _width, _base, _width - 1, _h ).attr({ |
110 "stroke" : "none", |
110 "stroke" : "none", |
111 "fill" : this.tagconf[j].color, |
111 "fill" : this.tagconf[j].color |
112 }); |
112 }); |
113 } |
113 } |
114 _paths[j+1].push(_base); |
114 _paths[j+1].push(_base); |
115 } |
115 } |
116 this.groups.push(_vol.map(function(_v) { |
116 this.groups.push(_vol.map(function(_v) { |
133 ? 'C' + (_k * _width) + ' ' + _paths[j][_k - 1] + ' ' + (_k * _width) + ' ' + _v + ' ' + ((_k + .5) * _width) + ' ' + _v |
133 ? 'C' + (_k * _width) + ' ' + _paths[j][_k - 1] + ' ' + (_k * _width) + ' ' + _v + ' ' + ((_k + .5) * _width) + ' ' + _v |
134 : 'M0 ' + _v + 'L' + (.5*_width) + ' ' + _v ) |
134 : 'M0 ' + _v + 'L' + (.5*_width) + ' ' + _v ) |
135 },'') + 'L' + this.width + ' ' + _paths[j][_paths[j].length - 1] + 'L' + this.width + ' ' + this.height + 'L0 ' + this.height; |
135 },'') + 'L' + this.width + ' ' + _paths[j][_paths[j].length - 1] + 'L' + this.width + ' ' + this.height + 'L0 ' + this.height; |
136 this.paper.path(_d).attr({ |
136 this.paper.path(_d).attr({ |
137 "stroke" : "none", |
137 "stroke" : "none", |
138 "fill" : (j ? this.tagconf[j-1].color : this.defaultcolorconf), |
138 "fill" : (j ? this.tagconf[j-1].color : this.defaultcolorconf) |
139 }); |
139 }); |
140 } |
140 } |
141 } |
141 } |
142 this.rectangleFocus = this.paper.rect(0,0,_width,this.height) |
142 this.rectangleFocus = this.paper.rect(0,0,_width,this.height) |
143 .attr({ |
143 .attr({ |
144 "stroke" : "none", |
144 "stroke" : "none", |
145 "fill" : "#ff00ff", |
145 "fill" : "#ff00ff", |
146 "opacity" : 0, |
146 "opacity" : 0 |
147 }) |
147 }) |
148 this.rectangleProgress = this.paper.rect(0,0,0,this.height) |
148 this.rectangleProgress = this.paper.rect(0,0,0,this.height) |
149 .attr({ |
149 .attr({ |
150 "stroke" : "none", |
150 "stroke" : "none", |
151 "fill" : "#808080", |
151 "fill" : "#808080", |
152 "opacity" : .3, |
152 "opacity" : .3 |
153 }); |
153 }); |
154 this.ligneProgress = this.paper.path("M0 0L0 "+this.height).attr({"stroke":"#ff00ff", "line-width" : 2}) |
154 this.ligneProgress = this.paper.path("M0 0L0 "+this.height).attr({"stroke":"#ff00ff", "line-width" : 2}) |
155 |
155 |
156 this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeUpdateHandler)); |
156 this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeUpdateHandler)); |
157 var _this = this; |
157 var _this = this; |
168 |
168 |
169 }) |
169 }) |
170 .mouseout(function() { |
170 .mouseout(function() { |
171 _this.TooltipWidget.hide(); |
171 _this.TooltipWidget.hide(); |
172 _this.rectangleFocus.attr({ |
172 _this.rectangleFocus.attr({ |
173 "opacity" : 0, |
173 "opacity" : 0 |
174 }) |
174 }) |
175 }) |
175 }) |
176 } |
176 } |
177 |
177 |
178 IriSP.StackGraphWidget.prototype.timeUpdateHandler = function() { |
178 IriSP.StackGraphWidget.prototype.timeUpdateHandler = function() { |
179 var _currentTime = this._Popcorn.currentTime(), |
179 var _currentTime = this._Popcorn.currentTime(), |
180 _x = (1000 * _currentTime / this.duration) * this.width; |
180 _x = (1000 * _currentTime / this.duration) * this.width; |
181 this.rectangleProgress.attr({ |
181 this.rectangleProgress.attr({ |
182 "width" : _x, |
182 "width" : _x |
183 }); |
183 }); |
184 this.ligneProgress.attr({ |
184 this.ligneProgress.attr({ |
185 "path" : "M" + _x + " 0L" + _x + " " + this.height, |
185 "path" : "M" + _x + " 0L" + _x + " " + this.height |
186 }) |
186 }) |
187 } |
187 } |
188 |
188 |
189 IriSP.StackGraphWidget.prototype.clickHandler = function(event) { |
189 IriSP.StackGraphWidget.prototype.clickHandler = function(event) { |
190 /* Ctrl-C Ctrl-V'ed from another widget |
190 /* Ctrl-C Ctrl-V'ed from another widget |
212 this.TooltipWidget._shown = false; // Vraiment, on ne peut pas ouvrir le widget s'il n'est pas encore ouvert ? |
212 this.TooltipWidget._shown = false; // Vraiment, on ne peut pas ouvrir le widget s'il n'est pas encore ouvert ? |
213 this.TooltipWidget.show('','',event.pageX - 105, event.pageY - 160); |
213 this.TooltipWidget.show('','',event.pageX - 105, event.pageY - 160); |
214 this.TooltipWidget.selector.find(".tip").html(_html); |
214 this.TooltipWidget.selector.find(".tip").html(_html); |
215 this.rectangleFocus.attr({ |
215 this.rectangleFocus.attr({ |
216 "x" : _segment * _width, |
216 "x" : _segment * _width, |
217 "opacity" : .4, |
217 "opacity" : .4 |
218 }) |
218 }) |
219 } |
219 } |
220 |
220 |