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