1 /*
  2  * This file is part of Appcelerator.
  3  *
  4  * Copyright (C) 2006-2008 by Appcelerator, Inc. All Rights Reserved.
  5  * For more information, please visit http://www.appcelerator.org
  6  *
  7  * Appcelerator is free software: you can redistribute it and/or modify
  8  * it under the terms of the GNU General Public License as published by
  9  * the Free Software Foundation, either version 3 of the License, or
 10  * (at your option) any later version.
 11  *
 12  * This program is distributed in the hope that it will be useful,
 13  * but WITHOUT ANY WARRANTY; without even the implied warranty of
 14  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 15  * GNU General Public License for more details.
 16  * 
 17  * You should have received a copy of the GNU General Public License
 18  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 19  *
 20  */
 21 
 22 
 23 Appcelerator.Widget.Chart =
 24 {
 25 	flashRequired: true,
 26 	flashVersion: 8.0,
 27 	
 28 	getName: function()
 29 	{
 30 		return 'appcelerator chart';
 31 	},
 32 	getDescription: function()
 33 	{
 34 		return 'chart widget';
 35 	},
 36 	getVersion: function()
 37 	{
 38 		return 1.1;
 39 	},
 40 	getSpecVersion: function()
 41 	{
 42 		return 1.0;
 43 	},	
 44 	getAuthor: function()
 45 	{
 46 		return 'Amro Mousa';
 47 	},
 48 	getModuleURL: function ()
 49 	{
 50 		return 'http://www.appcelerator.org';
 51 	},
 52 	isWidget: function ()
 53 	{
 54 		return true;
 55 	},
 56 	getWidgetName: function()
 57 	{
 58 		return 'app:chart';
 59 	},
 60 	getActions: function()
 61 	{
 62 		return ['execute','update'];
 63 	},	
 64 	getAttributes: function()
 65 	{
 66 		var T = Appcelerator.Types;
 67 		return [{name: 'on', optional: false, description: "Used to display the chart.",
 68 		         type: T.onExpr},
 69 		         
 70 				{name: 'type', optional: false, defaultValue: '',
 71 				 description: "enumerated value, or property on payload to find value",
 72 				 type: T.openEnumeration('bar', 'pie', 'line')},
 73 				 
 74 				{name: 'title', optional: true, defaultValue: '', description: "Title displayed at the top of the chart."},
 75 				{name: 'color', optional: true, defaultValue: '#477398', 
 76 				    description: "Specifies the base color of the chart or the color for each bar/slice/line ." + 
 77 				        " You can provide a single hex color or csv color list"},
 78 				    
 79 				{name: 'angle', optional: true, defaultValue: '15', type: T.number, description: 
 80 				        "Angle for '3D' graphs, bar and pie (in degrees)"},
 81 				{name: 'thickness', optional: true, defaultValue: '15', type: T.number, description: "Thickness of '3D' graphs (in pixels)"},
 82 				{name: 'width', optional: true, defaultValue: '400', type: T.number, description: "The width of the chart (in pixels)"},
 83 				{name: 'height', optional: true, defaultValue: '360', type: T.number, description: "The height of the chart (in pixels)"},
 84 				{name: 'chartMode', optional: true, defaultValue: 'clustered',
 85 				 description: "sub type for bar and line charts",
 86 				 type: T.openEnumeration('line', 'clustered', 'stacked', '100% stacked')},
 87 				{name: 'barOrientation', optional: true, defaultValue: '400', type: T.number, description: '"vertical" or "horizontal" orientation for a bar chart'},
 88 				{name: 'rotateXAxisLabel', optional: true, defaultValue: 'false', description: '"true" or "false". If "true" x axis labels are rotated by 90 degrees.'},
 89 				{name: 'rotateYAxisLabel', optional: true, defaultValue: 'false', description: '"true" or "false". If "true" y axis labels are rotated by 90 degrees.'},
 90 				{name: 'legend', optional: true, defaultValue: 'false', type: T.bool, description: '"true" or "false". If "true" a legend will be displayed.'},
 91 				{name: 'brightness_step', optional: true, defaultValue: '15', type: T.number, description: 'How much the brightness of the chart increases'},
 92 				{name: 'textSize', optional: true, defaultValue: '11', type: T.number, description: 'Font size (in pixels)'},
 93 				{name: 'property', optional: false, defaultValue: '', type: T.identifier, description: 'The property of the message to use to populate the chart'},
 94 				{name: 'chartTitles', optional: true, defaultValue: '', description: 'Array property name that contains the titles for the legend and labels composite bar charts.'},
 95 				{name: 'fillAlpha', optional: true, defaultValue: '30', type: T.number, description: "Specifies the opacity of the shaded area under a line in a line chart (percentage)"},
 96 				{name: 'indicator', optional: true, defaultValue: 'false', type: T.bool, description: "Enable a mouseover bubble to show the value of every line at a given x value on a line graph"},
 97 				{name: 'marginTop', optional: true, defaultValue: '80', type: T.number, description: "Specifies the space between the top of the chart and the start of the line or bar chart (pixels)"},
 98 				{name: 'marginLeft', optional: true, defaultValue: '50', type: T.number, description: "Specifies the space between the left of the chart and the start of the line or bar chart (pixels)"},
 99 				{name: 'marginRight', optional: true, defaultValue: '50', type: T.number, description: "Specifies the space between the right of the chart and the start of the line or bar chart (pixels)"},
100 				{name: 'marginBottom', optional: true, defaultValue: '50', type: T.number, description: "Specifies the space between the bottom of the chart and the start of the line or bar chart (pixels)"},
101 				{name: 'legendHighlight', optional: true, defaultValue: 'true', type: T.bool, description: "Specifies whether the lines on the line chart will be 'highlighted' when one mouses over a legend value for that line."},
102 				{name: 'backgroundColor', optional: true, defaultValue: '#FFFFFF'},
103 				{name: 'radius', optional: true, defaultValue: '90', type: T.number},
104 				{name: 'precision', optional: true, defaultValue: '2', type: T.number},
105 				{name: 'innerRadius', optional: true, defaultValue: '30', type: T.number, description: "Specifies the radius of the 'hole' in the center of the pie chart (pixels)"},
106 				{name: 'animation', optional: true, defaultValue: 'true', type: T.bool},
107 				{name: 'oneBalloon', optional: true, defaultValue: 'false', type: T.bool, description: "Specifies whether an indicator balloon will be shown for all lines or only the line closest to the mouse pointer on the line graph. Possible values are 'true' or 'false'."},
108 				{name: 'xAxisLabel', optional: true, defaultValue: ''},
109 				{name: 'xAxisYPosition', optional: true, defaultValue: '0', type: T.number},
110 				{name: 'xAxisXPosition', optional: true, defaultValue: '0', type: T.number},
111 				{name: 'yAxisLabel', optional: true, defaultValue: ''},
112 				{name: 'yAxisYPosition', optional: true, defaultValue: '0', type: T.number},
113 				{name: 'yAxisXPosition', optional: true, defaultValue: '0', type: T.number},
114 				{name: 'dataValueMax', optional: true, defaultValue: '0', type: T.number}];
115 	},
116 	buildWidget: function(element, parameters)
117 	{
118 		var html = '<div id="' + element.id + '"></div>';
119 		
120 		return {
121 			'presentation' : html,
122 			'position' : Appcelerator.Compiler.POSITION_REPLACE,
123 			'parameters': parameters
124 		};
125 	},
126 	getDataAsCSV: function (array_of_data)
127 	{
128 		var data_as_csv = '';
129 		for (var i = 0, len = array_of_data.length; i < len; i++)
130 		{
131 			data_as_csv += array_of_data[i]['name'] + ',' + array_of_data[i]['value'] + '\n';
132 		}
133 		return data_as_csv;
134 	},
135 	update: function(id, parameterMap, data)
136 	{
137 		var propertyName = parameterMap['property'];
138 		if (propertyName)
139 		{
140 			var array = Object.getNestedProperty(data,propertyName) || [];
141 			parameterMap['data'] = array;
142 			var update_data_as_csv = Appcelerator.Widget.Chart.getDataAsCSV(array);
143 			
144 			try
145 			{
146 				$('chart_'+id).setData(update_data_as_csv);
147 			} catch (exxd) 
148 			{
149 				Logger.info('Failed to set chart data for id: ' + id);
150 			}
151 		}
152 	},
153 	execute: function(id,parameterMap,data)
154 	{
155 		var type = parameterMap['type'];
156 		var title = parameterMap['title'];
157 		var color = parameterMap['color'];
158 		var angle = parameterMap['angle'];
159 		var thickness = parameterMap['thickness'];
160 		var width = parameterMap['width'];
161 		var height = parameterMap['height'];
162 		var chartMode = parameterMap['chartMode'];
163 		var barOrientation = parameterMap['barOrientation'];
164 		var rotateXAxisLabel = parameterMap['rotateXAxisLabel'];
165 		var rotateYAxisLabel = parameterMap['rotateYAxisLabel'];
166 		var legend_enabled = parameterMap['legend'];
167 		var brightness_step = parameterMap['brightness_step'];
168 		var propertyName = parameterMap['property'];
169 		var titlePropertyName = parameterMap['chartTitles'];
170 	 	var textSize = parameterMap['textSize'];
171 	  	var fillAlpha = parameterMap['fillAlpha'];
172 	  	var indicator = parameterMap['indicator'];
173 		var marginTop = parameterMap['marginTop'];
174 		var marginLeft = parameterMap['marginLeft'];
175 		var marginRight = parameterMap['marginRight'];
176 		var marginBottom = parameterMap['marginBottom'];
177 	  	var legendHighlight = parameterMap['legendHighlight'];
178 	  	var oneBalloon = parameterMap['oneBalloon'];
179 		var backgroundColor = parameterMap['backgroundColor'];
180 		var innerRadius = parameterMap['innerRadius'];
181 		var radius = parameterMap['radius'];
182 		var precision = parameterMap['precision'];
183 		var yAxisLabel = parameterMap['yAxisLabel'];
184 		var xAxisLabel = parameterMap['xAxisLabel'];
185 		var yAxisXPosition = parameterMap['yAxisXPosition'];
186 		var yAxisYPosition = parameterMap['yAxisYPosition'];
187 		var xAxisXPosition = parameterMap['xAxisXPosition'];
188 		var xAxisYPosition = parameterMap['xAxisYPosition'];
189 		var dataValueMax = parameterMap['dataValueMax'];
190 		var animation = parameterMap['animation'];
191 		
192 		if (animation != 'false' && type.toLowerCase() == 'pie') animation = 2;
193 		else if (animation != 'false' && type.toLowerCase() == 'bar') animation = 1;
194 		else animation = 0;
195 		
196 		if (dataValueMax != '')
197 		{
198 			dataValueMax = Object.getNestedProperty(data,dataValueMax) || '';							
199 		}
200 		
201 		if (barOrientation.toLowerCase() != "vertical" && barOrientation.toLowerCase() != "horizontal")
202 		{
203 			barOrientation = Object.getNestedProperty(data,barOrientation) || 'vertical';				
204 		}
205 		
206 		if (barOrientation.toLowerCase() == 'horizontal')
207 		{
208 			barOrientation = 'bar';
209 		} else
210 		{
211 			barOrientation = 'column';
212 		}
213 	
214 		if (rotateXAxisLabel.toLowerCase() == 'true')
215 		{
216 			rotateXAxisLabel = 90;
217 		} else
218 		{
219 			rotateXAxisLabel = 0;
220 		}
221 	
222 		if (rotateYAxisLabel.toLowerCase() == 'true')
223 		{
224 			rotateYAxisLabel = 90;
225 		} else
226 		{
227 			rotateYAxisLabel = 0;
228 		}
229 
230 		if (propertyName)
231 		{
232 			array = Object.getNestedProperty(data,propertyName) || [];
233 			parameterMap['data'] = array;
234 		}
235 		else
236 		{
237 			array = [];
238 		}
239 
240 		if (title != '')
241 		{
242 			var t_title = Object.getNestedProperty(data,title);
243 			
244 			if (t_title == null)
245 			{
246 				t_title = '*[No Title]*';
247 			}
248 			
249 			if (t_title != '*[No Title]*')
250 			{
251 				title = t_title;
252 			}
253 		}
254 		
255 		if (yAxisLabel != '')
256 		{
257 			var t_yAxisLabel = Object.getNestedProperty(data,yAxisLabel);
258 			
259 			if (t_yAxisLabel == null)
260 			{
261 				t_yAxisLabel = '*[No yAxisLabel]*';
262 			}
263 			
264 			if (t_yAxisLabel != '*[No yAxisLabel]*')
265 			{
266 				yAxisLabel = t_yAxisLabel;
267 			} else yAxisLabel = '';
268 		} 
269 		
270 		if (xAxisLabel != '')
271 		{
272 			var t_xAxisLabel = Object.getNestedProperty(data,xAxisLabel);
273 			
274 			if (t_xAxisLabel == null)
275 			{
276 				t_xAxisLabel = '*[No xAxisLabel]*';
277 			}
278 			
279 			if (t_xAxisLabel != '*[No xAxisLabel]*')
280 			{
281 				xAxisLabel = t_xAxisLabel;
282 			} else xAxisLabel = '';
283 		} 
284 
285 		var data_as_csv = Appcelerator.Widget.Chart.getDataAsCSV(array);
286 		
287 		if (type.toLowerCase() != "bar" && type.toLowerCase() != "pie" && type.toLowerCase() != "line" && type.toLowerCase() != "")
288 		{
289 			type = Object.getNestedProperty(data,type,'');
290 		}
291 		
292 		if (type.toLowerCase() == "bar" && (chartMode.toLowerCase() != "clustered" && chartMode.toLowerCase() != "stacked" && chartMode.toLowerCase() != "100% stacked"))
293 		{
294 			chartMode = Object.getNestedProperty(data,chartMode,'clustered');
295 		}
296 
297 		if (type.toLowerCase() == "line" && (chartMode.toLowerCase() != "line" && chartMode.toLowerCase() != "stacked" && chartMode.toLowerCase() != "100% stacked"))
298 		{
299 			chartMode = Object.getNestedProperty(data,chartMode,'line');
300 		}
301 	
302 		if (legend_enabled.toLowerCase() != "true" && legend_enabled.toLowerCase() != "false")
303 		{
304 			legend_enabled = Object.getNestedProperty(data,legend_enabled,'false');				
305 		}
306 			
307 		var color_list = color.split(',');
308 		if (color_list.length > 1 && type.toLowerCase() == "pie")
309 		{
310 			color_list = color;
311 			color = '';
312 			brightness_step = '';
313 		} else if (color_list.length == 1 && type.toLowerCase() == "pie")
314 		{
315 			color_list = '';
316 		}
317 		
318 		if (color_list.length > 1 && type.toLowerCase() == "bar")
319 		{
320 			color = color_list[0];
321 		}
322 		
323 		var stacked_balloon = '';
324 		if (type.toLowerCase() == "bar" || type.toLowerCase() == "line")
325 		{			
326 			titleArray = Object.getNestedProperty(data,titlePropertyName) || [];
327 			parameterMap['titleArray'] = titleArray;
328 	
329 			var column_titles_template = '';
330 			if (type.toLowerCase() == "bar")
331 			{
332 				column_titles_template = '<graph gid="{COL_NUM}"><type>column</type><title>{COL_TITLE}</title><color>{COL_COLOR}</color><alpha></alpha><data_labels><![CDATA[]]></data_labels><fill_alpha>'