<?xml version="1.0" encoding="utf-8"?>
<!--
	 Copyright (c) 2009 Team Axiis

	 Permission is hereby granted, free of charge, to any person
	 obtaining a copy of this software and associated documentation
	 files (the "Software"), to deal in the Software without
	 restriction, including without limitation the rights to use,
	 copy, modify, merge, publish, distribute, sublicense, and/or sell
	 copies of the Software, and to permit persons to whom the
	 Software is furnished to do so, subject to the following 
	 conditions:

	 The above copyright notice and this permission notice shall be
	 included in all copies or substantial portions of the Software.

	 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
	 EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
	 OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
	 NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
	 HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
	 WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
	 FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
	 OTHER DEALINGS IN THE SOFTWARE.
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:charts="org.axiis.charts.*"
	xmlns:axiis="http://www.axiis.org/2009"
	xmlns:series="org.axiis.charts.series.*"
	xmlns:groupings="org.axiis.charts.groupings.*"
	xmlns:degrafa="http://www.degrafa.com/2007"
	xmlns:states="org.axiis.states.*"
	xmlns:paint="org.axiis.paint.*"
	xmlns:Examples="com.webappsolution.datavisualization.examples.*"
	xmlns:axis="org.axiis.charts.axis.*"
	xmlns:labels="org.axiis.charts.labels.*"
	backgroundGradientColors="[0xDDDDDD,0xF5F5F5]"
	layout="absolute"
	creationComplete="start();">

	<!--<mx:Style source="styles/Axiis_Examples.css"/>-->

	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import org.axiis.events.LayoutItemEvent;
			import org.axiis.data.DataSet;

			private var ds:DataSet = new DataSet();

			/**
			 * This example is using xml data read from the file system. 
			 * In practical usage, you'ld have some data in a model that you want to display.
			 * We've provided two utility classes to construct this data in the correct format 
			 * The dataProvider should be set to an ArrayCollection of PlotSeries objects
			 * PlotSeries
			 * 		index					This is the index of this plotSeries in the parent AC, optional I guess
			 * 		name					This should be set to the name you want to see displayed below the series. In the example data, this is country 
			 * 		plotPointCollection		This is the collection of PlotPoint objects 
			 * PlotPoint
			 * 		index					This is the index of this element in the parent AC
			 * 		xvalue					This wouldn't be used for a series
			 * 		yvalue					This would be the y value for the column. In the example data, this is count attribute
			 * 		category				This would be the data on the x axis. In the example, this is the category attribute
			 * 
			 */
			public function start():void
			{
				//ds.processXmlString(countryData);
				/** Sums up all the counts of medals within a country ( you also get min, max, avg) This will be used to draw the overlaid total
				 *    bar that shows up on the chart, one for each country.
				 *  This only works for data that is read in through the axiis DataSet object otherwise you'd need to provide your own approach to aggregate
				 	Provides 4 values under ds.data.object where is X is the final drill point and Y is each of the array elements
						object.aggregates.X_Y_sum  EG: aggregates.medal_count_sum
						object.aggregates.X_Y_avg
						object.aggregates.X_Y_min
						object.aggregates.X_Y_max
				 */ 
				ds.aggregateData(ds.data.object, "country.medal", ["count"]);
				/**
				 * Now aggregate all the sums per country. Ultimately to get the max value so we can scale the chart appropriately
				 */
				ds.aggregateData(ds.data.object, "country", ["aggregates.medal_count_sum"]);
				/**
				 * Note the odd syntax regarding how you access aggregates of aggregated data
				 */
				vScale.maxValue = ds.data.object.aggregates['country_aggregates:medal_count_sum_max'];
				vScale.minValue = 0;
				/**
				 * So each iteration of the repeater in the graph will have a country node
				 */
				dataProvider = ds.data.object.country;
				/**
				 * Anytime the DataCanvas dp is set this must be called
				 */
				dc.invalidateDisplayList();
			}
			
			/**
			 * Not wired into anything but just here to show handling a double click
			 */
			public function item_onDoubleClick(e:LayoutItemEvent):void {
				Alert.show("Item Double Clicked");	
			}
			
		]]>
	</mx:Script>

	<!-- 
	Provide nice background to chart 
	-->
	<Examples:ExampleBackground width="{this.width}" height="{this.height}" title="Horizontal Chart" subTitle="Cluster with Single Column"/>

	<!-- 
	The data we're reading from, you'd most likely be using an AC from someplace else 
	-->
	<!--<mx:String id="countryData" source="data/2008_Olympics.xml"/>-->

	<!--  GLOBAL VARIABLES -->
	<mx:Object id="dataProvider"/>
	<mx:String id="verticalField"/>
	<mx:String id="dataField">medal</mx:String>
	<mx:String id="labelField">name</mx:String>
	<mx:String id="childDataField">count</mx:String>
	<mx:String id="childLabelField">category</mx:String>
	<mx:Number id="percentGap">.02</mx:Number>

	<!--  
	A scale that deals with linear numeric data.
	-->
	<axiis:LinearScale dataProvider="{dataProvider}" minLayout="0" maxLayout="{hLayout.height}" minValue="0" id="vScale"/>

	<!--
	DataCanvas manages the placement and the rendering of layouts.
	They can have backgroundGeometries, foregroundGeometries, and layouts.
	They inherit from Canvas
	-->
	<axiis:DataCanvas top="100"
		bottom="120"
		width="{this.width*.8}"
		id="dc"
		verticalCenter="0"
		horizontalCenter="0"
		showDataTips="true"
		strokes="{strokes}"
		fills="{fills}"
		palettes="{palettes}">

		<!-- Background -->
		<!-- backgrounds appear behind the graph. There are also foregroundGeometries for doing annotations on top of the graph 
			verticalScale="{vScale}"			The vertical scale used for scaling data to actual screen units		
			tickStroke="{axisStroke}"			The stroke used to put the hash or tick marks on an axis
			width="{dc.width}"
			height="{myLineGroup.height}"
			showDataTips="false"				A flag that indicates to DataCanvas that it should listen for mouse events that signal the need to create a data tip.
			showGridArea="false"				Whether or not the grid cells are displayed
			showGridLine="false"				Whether or not lines are drawn between grid cells
			showLabels="false"					Whether or not to show labels on the axis
			fontFamily="Myriad Pro"
			fontColor="0"
			fontSize="14"
			tickGap="5"
			majorTickSpacing="50"				The space between successive major tick marks. There is also a minorTickSpacing. Length of marks can be adjusted as well majorTickLength
			labelFunction="{axisLabel}"			A function that is used to determine how each item in the dataProvider should be labeled along the axis.
		-->
		<axiis:backgroundGeometries>
			<axis:VAxis verticalScale="{vScale}"
				tickStroke="{axisStroke}"
				width="{dc.width}"
				height="{hLayout.height}"
				showDataTips="false"
				fontFamily="Myriad Pro"
				fontColor="0"
				fontSize="14"
				tickGap="5"/>
		</axiis:backgroundGeometries>

		<!-- Layouts -->
		<!--
				Layouts are composite components consisting of ReferenceRepeaters (the
				loop that defines a repeated bounding pattern)  DrawingGeometries
				(what you are going to draw) and Layouts (child layouts) 

		-->
		<axiis:layouts>

			<!--HBoxLayout
				The HBoxLayout is a layout with a referenceRepeater that produces RegularRectangles for each item in its dataProvider. 
				The RegularRectangles are sized and spaced evenly across the width of the layout. This behavior can be used to create column chart-like visualizations.
		
				x="12"											x-location relative to paren
				y="0"											y-location relative to parent
				height="{dc.height-70}"							height of display essentially
				width="{dc.width}"								width
				dataFilterFunction="{filterRows}"				This provides a way to further refine a layouts dataProvider by providing access to a custom filter data filter function. 
																This allows developers to easily visualize subsets of the data without having to change the underlying data structure. 
				dataProvider="{dataProvider}"					EG: var myLines is an ArrayCollection || Array of Line
																	Line is an object that has a name property, a plotPointsCollection property of PlotPoint, and an optional index which would be it's order in myLines
																	PlotPoint is an object with an index property, an xvalue property used for display of text or the x-value, and a yvalue property which is the y-value
				dataField="value"								The property within each item in the dataProvider that contains the field used to determine the value of the item. (essentially the y value)							
				labelField="pivotName"							The property within each item in the dataProvider that contains the field used to determine the label for the item.
				stroke="{myStroke}"								The stroke used to render lines
				percentGap="{percentGap}"						The amount of whitespace that should be left between RegularRectangles as a percentage of the width of the HBoxLayout
				showDataTips="false"							A flag that indicates to DataCanvas that it should listen for mouse events that signal the need to create a data tip.
				currentDatum									The item in the dataProvider that the layout is currently rendering.
				currentIndex									The index of the item in the dataProvider that the layout is currently rendering.
				currentLabel									The label of the item in the dataProvider that the layout is currently rendering, as determine by taking currentDatum[labelField], if a labelField is defined.
				currentReference								The geometry that is being used to render the current data item as it appears after the necessary iterations of the referenceRepeater have been executed.
				currentValue									The value of the item in the dataProvider that the layout is currently rendering, as determined by taking currentDatum[dataField], if a dataField is defined.
			-->		
			<axiis:HBoxLayout id="hLayout"
				x="25"
				y="0"
				showDataTips="false"
				height="{dc.height-70}"
				width="{dc.width-25}"
				percentGap="{percentGap}"
				dataProvider="{dataProvider}"
				dataField="{dataField}"
				labelField="{labelField}"
			 	dataTipAnchorPoint="{hBracket}"
				>
				<axiis:layouts>

					<!--ColumnCluster
					    ColumnCluster groups a series of vertical columns horizontally and labels them. This class is intended to be used to produce multi-series column charts.
						
						x="0"													x-location relative to paren
						y="0"													y-location relative to parent
						width="{hLayout.currentReference.width}"				Using the current geometry reference to set this value in this example
						height="{hLayout.currentReference.height}"				Ditto for height
						dataProvider="{[hLayout.currentDatum.aggregates]}"		Here we're going to use the aggregated data for this datum
						dataField="medal_count_sum"								Using the medal_count_sum value in the aggregate
						labelField="medal_count_sum"							Ditto
						fill="{stackFill}"
						stroke="{colStroke}"
						verticalScale="{vScale}"
						fontFamily="Arial"
						dataFontColor="{outerPalette.currentColor}"
						showLabel="false"										Whether or not labels are shown for each drawingGeometry.				
						showDataLabel="true"									?? Has the same description as showLabel in the docs
						showValueLabel="false"									Whether or not the labels indicating the the value each bar represents are shown.						
					-->	
					<!-- Cluster Group -->
					<groupings:ColumnCluster id="myCluster"
						width="{hLayout.currentReference.width*.83}"
						height="{hLayout.currentReference.height}"
						y="0"
						x="0"
						dataProvider="{hLayout.currentValue}"
						dataField="{childDataField}"
						labelField="{childLabelField}"
						percentGap=".07"
						fill="{clusterFill}"
						stroke="{colStroke}"
						verticalScale="{vScale}"
						fontFamily="Myriad Pro"
						fontColor="{outerPalette.currentColor}"/>

					<!--ColumnStack
					    ColumStack groups a series of vertical columns vertically and labels them. This class is intended to be used to produce multi-series column charts.
					    
					    The Column stack takes all items with the same category value and stacks them on top of each other as opposed to the ColumnCluster which puts them side by side
					    In the example, this is the last column in each series
					-->
					<!-- Stack Group (same data) -->
					<groupings:ColumnStack id="myStack"
						x="{hLayout.currentReference.width*.85}"
						y="0"
						width="{hLayout.currentReference.width*.15}"
						height="{hLayout.currentReference.height}"
						dataProvider="{hLayout.currentValue}"
						dataField="{childDataField}"
						labelField="{childLabelField}"
						fill="{stackFill}"
						stroke="{colStroke}"
						verticalScale="{vScale}"
						fontFamily="Arial"
						showLabel="false"/>

				</axiis:layouts>

				<!--HBracket
					A bracket that can be used to denote a group and label items that are laid out horizontally.

					height="60"										The height of the bracket from the base of the bracket, how far the sides extend upwards.
					fontFamily="Myriad Pro"							The fontFamily of the label
					fontSize="14"									The font size of the label
					fontColor="{outerPalette.currentColor}"			The color of the label
					y="{hLayout.height+5}"
					x="{hLayout.currentReference.x}"
					labelValue="{hLayout.currentLabel}"				The text of the label placed beneath the bracket.
					markerStroke="{myStroke}"						The stroke used to draw lines of the bracket.					
				-->
				<!-- Bottom Bracket -->
				<axiis:drawingGeometries>
					<labels:HBracket id="hBracket" width="{hLayout.currentReference.width}"
						height="60"
						fontFamily="Myriad Pro"
						fontSize="14"
						fontColor="{outerPalette.currentColor}"
						y="{hLayout.height+5}"
						x="{hLayout.currentReference.x}"
						labelValue="{hLayout.currentLabel}"
						markerStroke="{myStroke}"/>
				</axiis:drawingGeometries>

			</axiis:HBoxLayout>
		</axiis:layouts>
	</axiis:DataCanvas>

	<!--
	LayoutPalette will generate an Array of colors based on a Layout. The produced colors will be equally distributed between two given anchor colors 
	and will contain x values where x is the number of objects in the Layout's dataProvider. As the Layout renders and its currentIndex property is incremented, 
	the LayoutPalette's currentColor will be incremented as well. Binding on the currentColor allows you vary the color of a fill or stroke used 
	in the Layout's drawingGeometries  as the Layout renders. Very cool.
	-->
	<mx:Array id="palettes">
		<paint:LayoutAutoPalette id="outerPalette" layout="{hLayout}" colorFrom="0xCC3333" colorTo="0x3333CC"/>
		<paint:LayoutAutoPalette id="clusterPalette" layout="{myCluster}" colorFrom="{outerPalette.currentColor}" colorTo="{outerPalette.currentColor | 0x337f00}"/>
		<paint:LayoutAutoPalette id="stackPalette" layout="{myStack}" colorFrom="{outerPalette.currentColor}" colorTo="{outerPalette.currentColor | 0x337f00}"/>
	</mx:Array>
	
	<!--
	A LinearGradientFill lets you specify a gradient fill
	angle defines the transition across the content
	A GradientStop defines the objects that control a transition as part of a gradient fill. Stops will be equally spaced unless ratio is specified
	-->	
	<mx:Array id="fills">
		<degrafa:LinearGradientFill id="clusterFill" angle="45">
			<degrafa:GradientStop color="{clusterPalette.currentColor}"/>
			<degrafa:GradientStop color="{clusterPalette.currentColor | 0x333333}" alpha=".85"/>
		</degrafa:LinearGradientFill>
		<degrafa:LinearGradientFill id="stackFill" angle="90">
			<degrafa:GradientStop color="{stackPalette.currentColor}"/>
			<degrafa:GradientStop color="{stackPalette.currentColor | 0x333333}" alpha=".7"/>
		</degrafa:LinearGradientFill>
	</mx:Array>
	
	<!--
	LinearGradientStroke is gradient filled stroke as opposed to just one color. pixelHinting is used to hint strokes to full pixels.
	SolidStroke is typicaly solid stroke. caps define line ends and can put additional lenght on a line. Useful where lines overlap
	-->		
	<mx:Array id="strokes">
		<degrafa:LinearGradientStroke id="colStroke" pixelHinting="true" angle="45">
			<degrafa:GradientStop color="0xFFFFFF" alpha=".7"/>
			<degrafa:GradientStop color="0xFFFFFF" alpha=".3"/>
		</degrafa:LinearGradientStroke>
		<degrafa:SolidStroke color="0xFFFFFF" alpha=".3"/>
		<degrafa:SolidStroke color="0x222222" id="axisStroke" pixelHinting="true"/>
		<degrafa:SolidStroke color="{outerPalette.currentColor}" id="myStroke" alpha=".5"/>
		<degrafa:SolidStroke color="{outerPalette.currentColor}"
			id="myStroke2"
			alpha=".7"
			weight="6"
			caps="none"/>
	</mx:Array>

</mx:Application>