|
1 YUI.add('series-column-stacked', function (Y, NAME) { |
|
2 |
|
3 /** |
|
4 * Provides functionality for creating a stacked column series. |
|
5 * |
|
6 * @module charts |
|
7 * @submodule series-column-stacked |
|
8 */ |
|
9 var Y_Lang = Y.Lang; |
|
10 |
|
11 /** |
|
12 * The StackedColumnSeries renders column chart in which series are stacked vertically to show |
|
13 * their contribution to the cumulative total. |
|
14 * |
|
15 * @class StackedColumnSeries |
|
16 * @extends ColumnSeries |
|
17 * @uses StackingUtil |
|
18 * @constructor |
|
19 * @param {Object} config (optional) Configuration parameters. |
|
20 * @submodule series-column-stacked |
|
21 */ |
|
22 Y.StackedColumnSeries = Y.Base.create("stackedColumnSeries", Y.ColumnSeries, [Y.StackingUtil], { |
|
23 /** |
|
24 * Draws the series. |
|
25 * |
|
26 * @method drawSeries |
|
27 * @protected |
|
28 */ |
|
29 drawSeries: function() |
|
30 { |
|
31 if(this.get("xcoords").length < 1) |
|
32 { |
|
33 return; |
|
34 } |
|
35 var isNumber = Y_Lang.isNumber, |
|
36 style = this._copyObject(this.get("styles").marker), |
|
37 w = style.width, |
|
38 h = style.height, |
|
39 xcoords = this.get("xcoords"), |
|
40 ycoords = this.get("ycoords"), |
|
41 i = 0, |
|
42 len = xcoords.length, |
|
43 top = ycoords[0], |
|
44 seriesCollection = this.get("seriesTypeCollection"), |
|
45 ratio, |
|
46 order = this.get("order"), |
|
47 graphOrder = this.get("graphOrder"), |
|
48 left, |
|
49 marker, |
|
50 fillColors, |
|
51 borderColors, |
|
52 lastCollection, |
|
53 negativeBaseValues, |
|
54 positiveBaseValues, |
|
55 useOrigin = order === 0, |
|
56 totalWidth = len * w, |
|
57 dimensions = { |
|
58 width: [], |
|
59 height: [] |
|
60 }, |
|
61 xvalues = [], |
|
62 yvalues = [], |
|
63 groupMarkers = this.get("groupMarkers"); |
|
64 if(Y_Lang.isArray(style.fill.color)) |
|
65 { |
|
66 fillColors = style.fill.color.concat(); |
|
67 } |
|
68 if(Y_Lang.isArray(style.border.color)) |
|
69 { |
|
70 borderColors = style.border.color.concat(); |
|
71 } |
|
72 this._createMarkerCache(); |
|
73 if(totalWidth > this.get("width")) |
|
74 { |
|
75 ratio = this.get("width")/totalWidth; |
|
76 w *= ratio; |
|
77 w = Math.max(w, 1); |
|
78 } |
|
79 if(!useOrigin) |
|
80 { |
|
81 lastCollection = seriesCollection[order - 1]; |
|
82 negativeBaseValues = lastCollection.get("negativeBaseValues"); |
|
83 positiveBaseValues = lastCollection.get("positiveBaseValues"); |
|
84 if(!negativeBaseValues || !positiveBaseValues) |
|
85 { |
|
86 useOrigin = true; |
|
87 positiveBaseValues = []; |
|
88 negativeBaseValues = []; |
|
89 } |
|
90 } |
|
91 else |
|
92 { |
|
93 negativeBaseValues = []; |
|
94 positiveBaseValues = []; |
|
95 } |
|
96 this.set("negativeBaseValues", negativeBaseValues); |
|
97 this.set("positiveBaseValues", positiveBaseValues); |
|
98 for(i = 0; i < len; ++i) |
|
99 { |
|
100 left = xcoords[i]; |
|
101 top = ycoords[i]; |
|
102 |
|
103 if(!isNumber(top) || !isNumber(left)) |
|
104 { |
|
105 if(useOrigin) |
|
106 { |
|
107 negativeBaseValues[i] = this._bottomOrigin; |
|
108 positiveBaseValues[i] = this._bottomOrigin; |
|
109 } |
|
110 this._markers.push(null); |
|
111 continue; |
|
112 } |
|
113 if(useOrigin) |
|
114 { |
|
115 h = Math.abs(this._bottomOrigin - top); |
|
116 if(top < this._bottomOrigin) |
|
117 { |
|
118 positiveBaseValues[i] = top; |
|
119 negativeBaseValues[i] = this._bottomOrigin; |
|
120 } |
|
121 else if(top > this._bottomOrigin) |
|
122 { |
|
123 positiveBaseValues[i] = this._bottomOrigin; |
|
124 negativeBaseValues[i] = top; |
|
125 top -= h; |
|
126 } |
|
127 else |
|
128 { |
|
129 positiveBaseValues[i] = top; |
|
130 negativeBaseValues[i] = top; |
|
131 } |
|
132 } |
|
133 else |
|
134 { |
|
135 if(top > this._bottomOrigin) |
|
136 { |
|
137 top += (negativeBaseValues[i] - this._bottomOrigin); |
|
138 h = top - negativeBaseValues[i]; |
|
139 negativeBaseValues[i] = top; |
|
140 top -= h; |
|
141 } |
|
142 else if(top <= this._bottomOrigin) |
|
143 { |
|
144 top = positiveBaseValues[i] - (this._bottomOrigin - top); |
|
145 h = positiveBaseValues[i] - top; |
|
146 positiveBaseValues[i] = top; |
|
147 } |
|
148 } |
|
149 if(!isNaN(h) && h > 0) |
|
150 { |
|
151 left -= w/2; |
|
152 if(groupMarkers) |
|
153 { |
|
154 dimensions.width[i] = w; |
|
155 dimensions.height[i] = h; |
|
156 xvalues.push(left); |
|
157 yvalues.push(top); |
|
158 } |
|
159 else |
|
160 { |
|
161 style.width = w; |
|
162 style.height = h; |
|
163 style.x = left; |
|
164 style.y = top; |
|
165 if(fillColors) |
|
166 { |
|
167 style.fill.color = fillColors[i % fillColors.length]; |
|
168 } |
|
169 if(borderColors) |
|
170 { |
|
171 style.border.color = borderColors[i % borderColors.length]; |
|
172 } |
|
173 marker = this.getMarker(style, graphOrder, i); |
|
174 } |
|
175 } |
|
176 else if(!groupMarkers) |
|
177 { |
|
178 this._markers.push(null); |
|
179 } |
|
180 } |
|
181 if(groupMarkers) |
|
182 { |
|
183 this._createGroupMarker({ |
|
184 fill: style.fill, |
|
185 border: style.border, |
|
186 dimensions: dimensions, |
|
187 xvalues: xvalues, |
|
188 yvalues: yvalues, |
|
189 shape: style.shape |
|
190 }); |
|
191 } |
|
192 else |
|
193 { |
|
194 this._clearMarkerCache(); |
|
195 } |
|
196 }, |
|
197 |
|
198 /** |
|
199 * Resizes and positions markers based on a mouse interaction. |
|
200 * |
|
201 * @method updateMarkerState |
|
202 * @param {String} type state of the marker |
|
203 * @param {Number} i index of the marker |
|
204 * @protected |
|
205 */ |
|
206 updateMarkerState: function(type, i) |
|
207 { |
|
208 if(this._markers && this._markers[i]) |
|
209 { |
|
210 var styles, |
|
211 markerStyles, |
|
212 state = this._getState(type), |
|
213 xcoords = this.get("xcoords"), |
|
214 marker = this._markers[i], |
|
215 offset = 0, |
|
216 fillColor, |
|
217 borderColor; |
|
218 styles = this.get("styles").marker; |
|
219 offset = styles.width * 0.5; |
|
220 markerStyles = state === "off" || !styles[state] ? this._copyObject(styles) : this._copyObject(styles[state]); |
|
221 markerStyles.height = marker.get("height"); |
|
222 markerStyles.x = (xcoords[i] - offset); |
|
223 markerStyles.y = marker.get("y"); |
|
224 markerStyles.id = marker.get("id"); |
|
225 fillColor = markerStyles.fill.color; |
|
226 borderColor = markerStyles.border.color; |
|
227 if(Y_Lang.isArray(fillColor)) |
|
228 { |
|
229 markerStyles.fill.color = fillColor[i % fillColor.length]; |
|
230 } |
|
231 else |
|
232 { |
|
233 markerStyles.fill.color = this._getItemColor(markerStyles.fill.color, i); |
|
234 } |
|
235 if(Y_Lang.isArray(borderColor)) |
|
236 { |
|
237 markerStyles.border.color = borderColor[i % borderColor.length]; |
|
238 } |
|
239 else |
|
240 { |
|
241 markerStyles.border.color = this._getItemColor(markerStyles.border.color, i); |
|
242 } |
|
243 marker.set(markerStyles); |
|
244 } |
|
245 }, |
|
246 |
|
247 /** |
|
248 * Gets the default values for the markers. |
|
249 * |
|
250 * @method _getPlotDefaults |
|
251 * @return Object |
|
252 * @protected |
|
253 */ |
|
254 _getPlotDefaults: function() |
|
255 { |
|
256 var defs = { |
|
257 fill:{ |
|
258 type: "solid", |
|
259 alpha: 1, |
|
260 colors:null, |
|
261 alphas: null, |
|
262 ratios: null |
|
263 }, |
|
264 border:{ |
|
265 weight: 0, |
|
266 alpha: 1 |
|
267 }, |
|
268 width: 24, |
|
269 height: 24, |
|
270 shape: "rect", |
|
271 |
|
272 padding:{ |
|
273 top: 0, |
|
274 left: 0, |
|
275 right: 0, |
|
276 bottom: 0 |
|
277 } |
|
278 }; |
|
279 defs.fill.color = this._getDefaultColor(this.get("graphOrder"), "fill"); |
|
280 defs.border.color = this._getDefaultColor(this.get("graphOrder"), "border"); |
|
281 return defs; |
|
282 } |
|
283 }, { |
|
284 ATTRS: { |
|
285 /** |
|
286 * Read-only attribute indicating the type of series. |
|
287 * |
|
288 * @attribute type |
|
289 * @type String |
|
290 * @default stackedColumn |
|
291 */ |
|
292 type: { |
|
293 value: "stackedColumn" |
|
294 }, |
|
295 |
|
296 /** |
|
297 * @attribute negativeBaseValues |
|
298 * @type Array |
|
299 * @default null |
|
300 * @private |
|
301 */ |
|
302 negativeBaseValues: { |
|
303 value: null |
|
304 }, |
|
305 |
|
306 /** |
|
307 * @attribute positiveBaseValues |
|
308 * @type Array |
|
309 * @default null |
|
310 * @private |
|
311 */ |
|
312 positiveBaseValues: { |
|
313 value: null |
|
314 } |
|
315 |
|
316 /** |
|
317 * Style properties used for drawing markers. This attribute is inherited from `ColumnSeries`. Below are the default values: |
|
318 * <dl> |
|
319 * <dt>fill</dt><dd>A hash containing the following values: |
|
320 * <dl> |
|
321 * <dt>color</dt><dd>Color of the fill. The default value is determined by the order of the series on the graph. The color |
|
322 * will be retrieved from the below array:<br/> |
|
323 * `["#66007f", "#a86f41", "#295454", "#996ab2", "#e8cdb7", "#90bdbd","#000000","#c3b8ca", "#968373", "#678585"]` |
|
324 * </dd> |
|
325 * <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker fill. The default value is 1.</dd> |
|
326 * </dl> |
|
327 * </dd> |
|
328 * <dt>border</dt><dd>A hash containing the following values: |
|
329 * <dl> |
|
330 * <dt>color</dt><dd>Color of the border. The default value is determined by the order of the series on the graph. The color |
|
331 * will be retrieved from the below array:<br/> |
|
332 * `["#205096", "#b38206", "#000000", "#94001e", "#9d6fa0", "#e55b00", "#5e85c9", "#adab9e", "#6ac291", "#006457"]` |
|
333 * <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker border. The default value is 1.</dd> |
|
334 * <dt>weight</dt><dd>Number indicating the width of the border. The default value is 1.</dd> |
|
335 * </dl> |
|
336 * </dd> |
|
337 * <dt>width</dt><dd>indicates the width of the marker. The default value is 24.</dd> |
|
338 * <dt>over</dt><dd>hash containing styles for markers when highlighted by a `mouseover` event. The default |
|
339 * values for each style is null. When an over style is not set, the non-over value will be used. For example, |
|
340 * the default value for `marker.over.fill.color` is equivalent to `marker.fill.color`.</dd> |
|
341 * </dl> |
|
342 * |
|
343 * @attribute styles |
|
344 * @type Object |
|
345 */ |
|
346 } |
|
347 }); |
|
348 |
|
349 |
|
350 |
|
351 }, '@VERSION@', {"requires": ["series-stacked", "series-column"]}); |