|
1 YUI.add('series-combo', function (Y, NAME) { |
|
2 |
|
3 /** |
|
4 * Provides functionality for creating a combo series. |
|
5 * |
|
6 * @module charts |
|
7 * @submodule series-combo |
|
8 */ |
|
9 /** |
|
10 * The ComboSeries class renders a combination of lines, plots and area fills in a single series. |
|
11 * Each series type has a corresponding boolean attribute indicating if it is rendered. By default, |
|
12 * lines and plots are rendered and area is not. |
|
13 * |
|
14 * @class ComboSeries |
|
15 * @extends CartesianSeries |
|
16 * @uses Fills |
|
17 * @uses Lines |
|
18 * @uses Plots |
|
19 * @constructor |
|
20 * @param {Object} config (optional) Configuration parameters. |
|
21 * @submodule series-combo |
|
22 */ |
|
23 Y.ComboSeries = Y.Base.create("comboSeries", Y.CartesianSeries, [Y.Fills, Y.Lines, Y.Plots], { |
|
24 /** |
|
25 * @protected |
|
26 * |
|
27 * Draws the series. |
|
28 * |
|
29 * @method drawSeries |
|
30 */ |
|
31 drawSeries: function() |
|
32 { |
|
33 if(this.get("showAreaFill")) |
|
34 { |
|
35 this.drawFill.apply(this, this._getClosingPoints()); |
|
36 } |
|
37 if(this.get("showLines")) |
|
38 { |
|
39 this.drawLines(); |
|
40 } |
|
41 if(this.get("showMarkers")) |
|
42 { |
|
43 this.drawPlots(); |
|
44 } |
|
45 }, |
|
46 |
|
47 /** |
|
48 * Toggles visibility |
|
49 * |
|
50 * @method _toggleVisible |
|
51 * @param {Boolean} visible indicates visibilitye |
|
52 * @private |
|
53 */ |
|
54 _toggleVisible: function(visible) |
|
55 { |
|
56 var markers, |
|
57 marker, |
|
58 len, |
|
59 i; |
|
60 if(this.get("showAreaFill") && this._path) |
|
61 { |
|
62 this._path.set("visible", visible); |
|
63 } |
|
64 if(this.get("showLines") && this._lineGraphic) |
|
65 { |
|
66 this._lineGraphic.set("visible", visible); |
|
67 } |
|
68 if(this.get("showMarkers")) |
|
69 { |
|
70 markers = this.get("markers"); |
|
71 if(markers) |
|
72 { |
|
73 i = 0; |
|
74 len = markers.length; |
|
75 for(; i < len; ++i) |
|
76 { |
|
77 marker = markers[i]; |
|
78 if(marker) |
|
79 { |
|
80 marker.set("visible", visible); |
|
81 } |
|
82 } |
|
83 } |
|
84 } |
|
85 }, |
|
86 |
|
87 /** |
|
88 * @protected |
|
89 * |
|
90 * Returns the default hash for the `styles` attribute. |
|
91 * |
|
92 * @method _getDefaultStyles |
|
93 * @return Object |
|
94 */ |
|
95 _getDefaultStyles: function() |
|
96 { |
|
97 var styles = Y.ComboSeries.superclass._getDefaultStyles(); |
|
98 styles.line = this._getLineDefaults(); |
|
99 styles.marker = this._getPlotDefaults(); |
|
100 styles.area = this._getAreaDefaults(); |
|
101 return styles; |
|
102 } |
|
103 }, |
|
104 { |
|
105 ATTRS: { |
|
106 /** |
|
107 * Read-only attribute indicating the type of series. |
|
108 * |
|
109 * @attribute type |
|
110 * @type String |
|
111 * @default combo |
|
112 */ |
|
113 type: { |
|
114 value:"combo" |
|
115 }, |
|
116 |
|
117 /** |
|
118 * Indicates whether a fill is displayed. |
|
119 * |
|
120 * @attribute showAreaFill |
|
121 * @type Boolean |
|
122 * @default false |
|
123 */ |
|
124 showAreaFill: { |
|
125 value: false |
|
126 }, |
|
127 |
|
128 /** |
|
129 * Indicates whether lines are displayed. |
|
130 * |
|
131 * @attribute showLines |
|
132 * @type Boolean |
|
133 * @default true |
|
134 */ |
|
135 showLines: { |
|
136 value: true |
|
137 }, |
|
138 |
|
139 /** |
|
140 * Indicates whether markers are displayed. |
|
141 * |
|
142 * @attribute showMarkers |
|
143 * @type Boolean |
|
144 * @default true |
|
145 */ |
|
146 showMarkers: { |
|
147 value: true |
|
148 }, |
|
149 |
|
150 /** |
|
151 * Reference to the styles of the markers. These styles can also |
|
152 * be accessed through the `styles` attribute. Below are default |
|
153 * values: |
|
154 * <dl> |
|
155 * <dt>fill</dt><dd>A hash containing the following values: |
|
156 * <dl> |
|
157 * <dt>color</dt><dd>Color of the fill. The default value is determined by the order of the series on the |
|
158 * graph. The color will be retrieved from the below array:<br/> |
|
159 * `["#6084d0", "#eeb647", "#6c6b5f", "#d6484f", "#ce9ed1", "#ff9f3b", "#93b7ff", "#e0ddd0", "#94ecba", "#309687"]` |
|
160 * </dd> |
|
161 * <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker fill. The default value is 1.</dd> |
|
162 * </dl> |
|
163 * </dd> |
|
164 * <dt>border</dt><dd>A hash containing the following values: |
|
165 * <dl> |
|
166 * <dt>color</dt><dd>Color of the border. The default value is determined by the order of the series on the graph. |
|
167 * The color will be retrieved from the below array:<br/> |
|
168 * `["#205096", "#b38206", "#000000", "#94001e", "#9d6fa0", "#e55b00", "#5e85c9", "#adab9e", "#6ac291", "#006457"]` |
|
169 * <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker border. The default value is 1.</dd> |
|
170 * <dt>weight</dt><dd>Number indicating the width of the border. The default value is 1.</dd> |
|
171 * </dl> |
|
172 * </dd> |
|
173 * <dt>width</dt><dd>indicates the width of the marker. The default value is 10.</dd> |
|
174 * <dt>height</dt><dd>indicates the height of the marker The default value is 10.</dd> |
|
175 * <dt>over</dt><dd>hash containing styles for markers when highlighted by a `mouseover` event. The default |
|
176 * values for each style is null. When an over style is not set, the non-over value will be used. For example, |
|
177 * the default value for `marker.over.fill.color` is equivalent to `marker.fill.color`.</dd> |
|
178 * </dl> |
|
179 * |
|
180 * @attribute marker |
|
181 * @type Object |
|
182 */ |
|
183 marker: { |
|
184 lazyAdd: false, |
|
185 getter: function() |
|
186 { |
|
187 return this.get("styles").marker; |
|
188 }, |
|
189 setter: function(val) |
|
190 { |
|
191 this.set("styles", {marker:val}); |
|
192 } |
|
193 }, |
|
194 |
|
195 /** |
|
196 * Reference to the styles of the lines. These styles can also be accessed through the `styles` attribute. |
|
197 * Below are the default values: |
|
198 * <dl> |
|
199 * <dt>color</dt><dd>The color of the line. The default value is determined by the order of the series on the graph. The color |
|
200 * will be retrieved from the following array: |
|
201 * `["#426ab3", "#d09b2c", "#000000", "#b82837", "#b384b5", "#ff7200", "#779de3", "#cbc8ba", "#7ed7a6", "#007a6c"]` |
|
202 * <dt>weight</dt><dd>Number that indicates the width of the line. The default value is 6.</dd> |
|
203 * <dt>alpha</dt><dd>Number between 0 and 1 that indicates the opacity of the line. The default value is 1.</dd> |
|
204 * <dt>lineType</dt><dd>Indicates whether the line is solid or dashed. The default value is solid.</dd> |
|
205 * <dt>dashLength</dt><dd>When the `lineType` is dashed, indicates the length of the dash. The default value is 10.</dd> |
|
206 * <dt>gapSpace</dt><dd>When the `lineType` is dashed, indicates the distance between dashes. The default value is 10.</dd> |
|
207 * <dt>connectDiscontinuousPoints</dt><dd>Indicates whether or not to connect lines when there is a missing or null value |
|
208 * between points. The default value is true.</dd> |
|
209 * <dt>discontinuousType</dt><dd>Indicates whether the line between discontinuous points is solid or dashed. The default |
|
210 * value is solid.</dd> |
|
211 * <dt>discontinuousDashLength</dt><dd>When the `discontinuousType` is dashed, indicates the length of the dash. The default |
|
212 * value is 10.</dd> |
|
213 * <dt>discontinuousGapSpace</dt><dd>When the `discontinuousType` is dashed, indicates the distance between dashes. The default |
|
214 * value is 10.</dd> |
|
215 * </dl> |
|
216 * |
|
217 * @attribute line |
|
218 * @type Object |
|
219 */ |
|
220 line: { |
|
221 lazyAdd: false, |
|
222 getter: function() |
|
223 { |
|
224 return this.get("styles").line; |
|
225 }, |
|
226 setter: function(val) |
|
227 { |
|
228 this.set("styles", {line:val}); |
|
229 } |
|
230 }, |
|
231 |
|
232 /** |
|
233 * Reference to the styles of the area fills. These styles can also be accessed through the `styles` attribute. |
|
234 * Below are the default values: |
|
235 * |
|
236 * <dl> |
|
237 * <dt>color</dt><dd>The color of the fill. The default value is determined by the order of the series on the |
|
238 * graph. The color will be retrieved from the following array: |
|
239 * `["#66007f", "#a86f41", "#295454", "#996ab2", "#e8cdb7", "#90bdbd","#000000","#c3b8ca", "#968373", "#678585"]` |
|
240 * </dd> |
|
241 * <dt>alpha</dt><dd>Number between 0 and 1 that indicates the opacity of the fill. The default value is 1</dd> |
|
242 * </dl> |
|
243 * |
|
244 * @attribute area |
|
245 * @type Object |
|
246 */ |
|
247 area: { |
|
248 lazyAdd: false, |
|
249 getter: function() |
|
250 { |
|
251 return this.get("styles").area; |
|
252 }, |
|
253 setter: function(val) |
|
254 { |
|
255 this.set("styles", {area:val}); |
|
256 } |
|
257 } |
|
258 |
|
259 /** |
|
260 * Style properties for the series. Contains a key indexed hash of the following: |
|
261 * <dl> |
|
262 * <dt>marker</dt><dd>Style properties for the markers in the series. Specific style attributes are listed |
|
263 * <a href="#attr_marker">here</a>.</dd> |
|
264 * <dt>line</dt><dd>Style properties for the lines in the series. Specific |
|
265 * style attributes are listed <a href="#attr_line">here</a>.</dd> |
|
266 * <dt>area</dt><dd>Style properties for the area fills in the series. Specific style attributes are listed |
|
267 * <a href="#attr_area">here</a>.</dd> |
|
268 * </dl> |
|
269 * |
|
270 * @attribute styles |
|
271 * @type Object |
|
272 */ |
|
273 } |
|
274 }); |
|
275 |
|
276 |
|
277 |
|
278 |
|
279 |
|
280 |
|
281 |
|
282 |
|
283 }, '@VERSION@', {"requires": ["series-cartesian", "series-line-util", "series-plot-util", "series-fill-util"]}); |