<?xml version="1.0" encoding="utf-8"?>
<!--

////////////////////////////////////////////////////////////////////////////////
//
//    Copyright 2014 Ardisia Labs LLC. All Rights Reserved.
//
//    This file is licensed under the Apache License, Version 2.0 (the "License");
//    you may not use this file except in compliance with the License.
//    You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
//    Unless required by applicable law or agreed to in writing, software
//    distributed under the License is distributed on an "AS IS" BASIS,
//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//    See the License for the specific language governing permissions and
//    limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////

-->
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/mx" 
          xmlns:containers="containers.*" 
          xmlns:data="containers.data.*" 
          xmlns:separators="ardisia.components.separators.*"
          xmlns:donut="ardisia.charts.donut.*" 
          xmlns:rotaryField="ardisia.components.rotaryField.*" 
          xmlns:data1="ardisia.charts.donut.data.*" 
          xmlns:legend="ardisia.charts.legend.*"
          frameRate="60"
          width="100%" height="100%"
          removedFromStage="removedFromStageHandler(event)">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            import mx.core.UIComponent;
            
            import spark.events.IndexChangeEvent;
            
            import ardisia.utils.ColorUtils;
            
            //--------------------------------------
            //  variables
            //--------------------------------------
            
            
            
            //--------------------------------------
            //  methods
            //--------------------------------------
            
            public function creationComplete():void
            {
                demoAppWrapper.viewstack.addEventListener(IndexChangeEvent.CHANGE, viewstack_changeHandler);
            }
            
            protected function colorFn(value:Object):uint
            {
                var frac:Number = donutChart.dataProvider.getItemIndex(value) / 
                    (donutChart.dataProvider.length - 1);
                
                return ColorUtils.getColorBetweenColors(0x006B9F, 0xD2F0FF, frac);
            }
            
            //--------------------------------------
            //  event handlers
            //--------------------------------------
            
            protected function viewstack_changeHandler(event:IndexChangeEvent):void
            {
                if (demoAppWrapper.viewstack.selectedIndex == 0)
                {
                    demoAppWrapper.expandingContainer1.enabled = true;
                }
                else
                {
                    demoAppWrapper.expandingContainer1.enabled = false;
                }
            }
            
            protected function filterFn(event:Event):void
            {
                var catFields:Vector.<DonutCategory> = new Vector.<DonutCategory>();
                
                if (year1990.selected)
                    catFields.push(dc1);
                if (year2000.selected)
                    catFields.push(dc2);
                if (year2005.selected)
                    catFields.push(dc3);
                if (year2013.selected)
                    catFields.push(dc4);
                
                donutChart.categories = catFields;
            }
            
            protected function dataTipFormatFn(data:Object, 
                                               seriesColor:uint):Object
            {    
                title.text = data.nation;
                if (data.hasOwnProperty("year2013"))
                {
                    cat1Title.text = "2013: "; 
                    cat1Value.text = data.year2013 + " (" + Math.round(100 * data.year2013 / globalProduction.year2013) + "% World)";
                    cat1Title.setStyle("color", donutChart.categories[donutChart.hoveredCategoryIndex].displayName == "2013" ? 0xFF0000 : 0x000000);
                }
                else
                {
                    cat1Title.text = cat1Value.text = null;
                }
                if (data.hasOwnProperty("year2005"))
                {
                    cat2Title.text = "2005: "; 
                    cat2Value.text = data.year2005 + " (" + Math.round(100 * data.year2005 / globalProduction.year2005) + "% World)";
                    cat2Title.setStyle("color", donutChart.categories[donutChart.hoveredCategoryIndex].displayName == "2005" ? 0xFF0000 : 0x000000);
                }
                else
                {
                    cat2Title.text = cat2Value.text = null;
                }
                if (data.hasOwnProperty("year2000"))
                {
                    cat3Title.text = "2000: "; 
                    cat3Value.text = data.year2000 + " (" + Math.round(100 * data.year2000 / globalProduction.year2000) + "% World)";
                    cat3Title.setStyle("color", donutChart.categories[donutChart.hoveredCategoryIndex].displayName == "2000" ? 0xFF0000 : 0x000000);
                }
                else
                {
                    cat3Title.text = cat3Value.text = null;
                }
                if (data.hasOwnProperty("year1990"))
                {
                    cat4Title.text = "1990: "; 
                    cat4Value.text = data.year1990 + " (" + Math.round(100 * data.year1990 / globalProduction.year1990) + "% World)";
                    cat4Title.setStyle("color", donutChart.categories[donutChart.hoveredCategoryIndex].displayName == "1990" ? 0xFF0000 : 0x000000);
                }
                else
                {
                    cat4Title.text = cat4Value.text = null;
                }
                
                UIComponent(donutChart.dataTipInstance).setStyle("borderColor", seriesColor);
                
                return tf;
            }
            
            protected function removedFromStageHandler(event:Event):void
            {
                
            }
            
        ]]>
    </fx:Script>
    
    <!-- declarations -->
    <fx:Declarations>
        
        <fx:Object id="globalProduction" year2013="87.7" year2005="66.5" year2000="58.4" year1990="48.6" />
        
        <s:ArrayCollection id="dpMotorVehicleProduction">
            <fx:Object nation="China" year2013="22.1" year2005="5.7" year2000="2.1" year1990="0.5" />
            <fx:Object nation="USA" year2013="11.1" year2005="11.9" year2000="12.8" year1990="9.8" />
            <fx:Object nation="Japan" year2013="9.6" year2005="10.8" year2000="10.1" year1990="13.5" />
            <fx:Object nation="Germany" year2013="5.7" year2005="5.8" year2000="5.5" year1990="5.0" />
            <fx:Object nation="South Korea" year2013="4.5" year2005="3.7" year2000="3.1" year1990="1.3" />
            <fx:Object nation="India" year2013="3.9" year2005="1.6" year2000="0.8" year1990="0.4" />
            <fx:Object nation="Brazil" year2013="3.7" year2005="2.5" year2000="1.7" year1990="0.9" />
            <fx:Object nation="Mexico" year2013="3.1" year2005="1.6" year2000="1.9" year1990="0.8" />
            <fx:Object nation="Thailand" year2013="2.5" year2005="1.1" year2000="0.3" year1990="0.3" />
            <fx:Object nation="Canada" year2013="2.4" year2005="2.7" year2000="3.0" year1990="1.9" />
            <fx:Object nation="Russia" year2013="2.2" year2005="1.4" year2000="1.2" year1990="1.1" />
            <fx:Object nation="Spain" year2013="2.2" year2005="2.8" year2000="3.0" year1990="2.1" />
            <fx:Object nation="France" year2013="1.7" year2005="3.5" year2000="3.3" year1990="3.8" />
            <fx:Object nation="UK" year2013="1.6" year2005="1.8" year2000="1.8" year1990="1.6" />
            <fx:Object nation="Indonesia" year2013="1.2" year2005="0.5" year2000="0.4" />
        </s:ArrayCollection>
        
        <s:ArrayCollection id="dpSMartphone">
            <fx:Object os="Android" year2010="67" year2011="220" year2012="452" year2013="759" />
            <fx:Object os="iOS" year2010="47" year2011="89" year2012="130" year2013="151" />
            <fx:Object os="Windows Phone" year2010="12" year2011="9" year2012="17" year2013="31" />
            <fx:Object os="BlackBerry" year2010="47" year2011="52" year2012="34" year2013="19" />
            <fx:Object os="Symbian" year2010="112" year2011="93" />
        </s:ArrayCollection>
        
        <s:ArrayCollection id="dpBrowserMarketShare">
            <fx:Object browser="IE" year2012="37" year2013="31" year2014="23" />
            <fx:Object browser="Chrome" year2012="28" year2013="37" year2014="44" />
            <fx:Object browser="Firefox" year2012="25" year2013="21" year2014="19" />
            <fx:Object browser="Safari" year2012="7" year2013="8" year2014="10" />
            <fx:Object browser="Opera" year2012="2" year2013="1" year2014="1" />
        </s:ArrayCollection>
        
        
        <s:TextFlow id="tf">
            <s:p><s:span id="title" fontWeight="bold" fontSize="14"></s:span></s:p>
            <s:br/><s:span id="cat1Title" fontWeight="bold" fontSize="13"></s:span> <s:span id="cat1Value" fontSize="13"></s:span>
            <s:br/><s:span id="cat2Title" fontWeight="bold" fontSize="13"></s:span> <s:span id="cat2Value" fontSize="13"></s:span>
            <s:br/><s:span id="cat3Title" fontWeight="bold" fontSize="13"></s:span> <s:span id="cat3Value" fontSize="13"></s:span>
            <s:br/><s:span id="cat4Title" fontWeight="bold" fontSize="13"></s:span> <s:span id="cat4Value" fontSize="13"></s:span>
            <s:br/><s:br/><s:span fontSize="10" fontStyle="italic">*All numbers are in millions of vehicles</s:span>
        </s:TextFlow> 
        
    </fx:Declarations>
    
    <!-- states -->
    <s:states>
        <s:State name="stockholm" />
        <s:State name="london" />
        <s:State name="spark" />
    </s:states>
    
    <!-- application -->
    <containers:DemoApplicationWrapper id="demoAppWrapper" 
                                       width="100%" height="100%"
                                       westRegionTitle="Donut Chart Description"
                                       description="Donut Chart. Capable of displaying multiple rings of data."
                                       currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
        
        <containers:expandingContainerContent>
            
            <!--- expanding container #1 -->
            <data:ExpandingContainerData>
                <data:label>API</data:label>
                <data:content>
                    <s:FormItem label="Custom Color Fn:">
                        <s:CheckBox id="colorFunctionSelect"
                                    selected="false"
                                    change="donutChart.colorFormatFunction=colorFunctionSelect.selected ? colorFn : null; ArrayCollection(donutChart.dataProvider).refresh();"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="User provided function that returns the color for the series when passed the series data object.&#13;&#13;Example uses a very simple color function that returns a blue shade depending on the series position in the dataProvider."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Display Percents:">
                        <s:CheckBox id="showPercentagesSelect"
                                    selected="false"/>
                    </s:FormItem>
                    
                    <separators:HSeparator width="100%"
                                           paddingTop="5" paddingBottom="5"/>
                    <s:FormHeading label="Series Labels"/>
                    <s:FormItem label="Display Labels:">
                        <s:CheckBox id="showSeriesLabelsSelect"
                                    selected="true"/>
                    </s:FormItem>
                    <s:FormItem enabled="{showSeriesLabelsSelect.selected}" 
                                label="Layout Offset:">
                        <s:HSlider id="seriesLabelOffsetSelect"
                                   width="100"
                                   minimum="0" maximum="100" value="5"/>
                    </s:FormItem>
                    
                    <separators:HSeparator width="100%"
                                           paddingTop="5" paddingBottom="5"/>
                    <s:FormHeading label="Layout"/>
                    <s:FormItem label="Angle Offset:">
                        <rotaryField:RotaryField id="angleOffsetSelect"
                                                 width="50"
                                                 angleOffset="0"
                                                 value="0"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="The offset for the angle of the initial axis from 0 degrees.&#13;&#13;0 degrees for the Flash player is the positive direction along the x axis.  Put another way, 0 degrees is the direction your thumb points when you put your left hand against the screen and form an L shape with your fingers pointing straight up towards the ceiling. Put even another way, in the cardinal direction system, 0 degrees would be due East."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Inner Radius:">
                        <s:HSlider id="innerRadiusSelect"
                                   width="100"
                                   minimum="0" maximum="100" value="50"/>
                    </s:FormItem>
                    <s:FormItem label="Ring Sep:">
                        <s:HSlider id="ringSeparationSelect"
                                   width="100"
                                   minimum="0" maximum="20" value="4"/>
                    </s:FormItem>
                    <s:FormItem label="Wedge Sep:">
                        <s:HSlider id="wedgeSeperationSelect"
                                   width="100"
                                   minimum="0" maximum="10" value="2"/>
                    </s:FormItem>
                    
                    <separators:HSeparator width="100%"
                                           paddingTop="5" paddingBottom="5"/>
                    <s:FormHeading label="Animations"/>
                    <s:FormItem label="Fade Alpha:">
                        <s:HSlider id="hoverFadeAlphaSelect"
                                   width="100"
                                   minimum="0" maximum="1" snapInterval="0" value="0.4"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="When data is hovered, the alpha to apply to all series renderers that are not hovered."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Fade Duration:">
                        <s:HSlider id="hoverFadeDurationSelect"
                                   width="100"
                                   minimum="0" maximum="1000" snapInterval="0" value="250"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Duration of the fade animation when the 'hoverFadeAlpha' property is applied.&#13;&#13;Set to 0 to skip the animation."/>
                        </s:helpContent>
                    </s:FormItem>
                    
                    <separators:HSeparator width="100%"
                                           paddingTop="5" paddingBottom="5"/>
                    <s:FormHeading label="Data Tip:"/>
                    <s:FormItem label="Display DataTip:">
                        <s:CheckBox id="showDataTipSelect"
                                    selected="true"/>
                    </s:FormItem>
                    <s:FormItem label="Hide Delay:">
                        <s:HSlider enabled="{showDataTipSelect.selected}" 
                                   id="dataTipHideDelaySelect"
                                   width="100"
                                   minimum="0" maximum="1000" snapInterval="0" value="350"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Delay before removing data tip after mousing out of an item renderer."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem enabled="{showDataTipSelect.selected}" 
                                label="Format Fn:">
                        <s:CheckBox id="dataTipFunctionSelect"
                                    selected="true"
                                    change="donutChart.dataTipFormatFunction=dataTipFunctionSelect.selected ? dataTipFormatFn : null; ArrayCollection(donutChart.dataProvider).refresh();"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="User provided function that formats the string displayed by the axis interval labels. The function takes a float as an argument and returns a formatted string."/>
                        </s:helpContent>
                    </s:FormItem>
                    
                    <separators:HSeparator width="100%"
                                           paddingTop="5" paddingBottom="5"/>
                    <s:FormHeading label="Legend:"/>
                    <s:FormItem label="Trigger Hover:">
                        <s:CheckBox id="enableHoverTriggerSelect"
                                    selected="true"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="True if hovering over a renderer will trigger a hover effect over the    relevant series in the Chart."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Deselection:">
                        <s:CheckBox id="allowDeselectionSelect"
                                    selected="true"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="True if users can remove series from the associated Chart by toggling items in the legend"/>
                        </s:helpContent>
                    </s:FormItem>
                    
                </data:content>
            </data:ExpandingContainerData>
            
        </containers:expandingContainerContent>
        
        <containers:centerContent>
            
            <!--- example #1 -->
            <data:PrimaryContentData>
                <data:tabLabel>Motor Vehicle Production Example</data:tabLabel>
                <data:exampleDescription>World Motor Vehicle Production.</data:exampleDescription>
                <data:primaryContent>
                    <s:HGroup top="40" right="40" bottom="40" left="40"
                              horizontalAlign="center" verticalAlign="top"
                              gap="20">
                        <s:BorderContainer width="100%" height="100%">
                            <donut:Donut id="donutChart"
                                         minWidth="300"
                                         top="5" right="5" bottom="5" left="5"
                                         seriesField="nation"
                                         showSeriesLabels="{showSeriesLabelsSelect.selected}"
                                         seriesLabelOffset="{seriesLabelOffsetSelect.value}"
                                         dataProvider="{dpMotorVehicleProduction}"
                                         wedgeSeperation="{wedgeSeperationSelect.value}"
                                         ringSeparation="{ringSeparationSelect.value}"
                                         innerRadius="{innerRadiusSelect.value}"
                                         showPercentages="{showPercentagesSelect.selected}"
                                         angleOffset="{angleOffsetSelect.value}"
                                         showDataTip="{showDataTipSelect.selected}"
                                         dataTipHideDelay="{dataTipHideDelaySelect.value}"
                                         highlightAlpha="{hoverFadeAlphaSelect.value}"
                                         highlightDuration="{hoverFadeDurationSelect.value}"
                                         dataTipFormatFunction="dataTipFormatFn">
                                <donut:categories>
                                    <data1:DonutCategory id="dc1" categoryField="year1990" displayName="1990" />
                                    <data1:DonutCategory id="dc2" categoryField="year2000" displayName="2000" />
                                    <data1:DonutCategory id="dc3" categoryField="year2005" displayName="2005" />
                                    <data1:DonutCategory id="dc4" categoryField="year2013" displayName="2013" />
                                </donut:categories>
                            </donut:Donut>
                        </s:BorderContainer>
                        <s:VGroup>
                            <s:VGroup gap="0"
                                      paddingLeft="4">
                                <s:Label text="Years To Chart"
                                         fontWeight="bold"
                                         paddingBottom="6" paddingLeft="-4"/>
                                <s:CheckBox id="year2013"
                                            label="2013"
                                            selected="true"
                                            change="filterFn(event);"/>
                                <s:CheckBox id="year2005"
                                            label="2005"
                                            selected="true"
                                            change="filterFn(event);"/>
                                <s:CheckBox id="year2000"
                                            label="2000"
                                            selected="true"
                                            change="filterFn(event);"/>
                                <s:CheckBox id="year1990"
                                            label="1990"
                                            selected="true"
                                            change="filterFn(event);"/>
                            </s:VGroup>
                            
                            <separators:HSeparator width="100%"/>
                            
                            <s:Label text="Legend"
                                     fontWeight="bold"
                                     paddingBottom="0" paddingLeft="0"/>
                            
                            <legend:Legend chart="{donutChart}"
                                           allowDeselection="{allowDeselectionSelect.selected}"
                                           enableHoverTrigger="{enableHoverTriggerSelect.selected}"/>
                            
                        </s:VGroup>
                        
                    </s:HGroup>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #2 -->
            <data:PrimaryContentData>
                <data:tabLabel>Miscellaneous Examples</data:tabLabel>
                <data:exampleDescription>Various examples.</data:exampleDescription>
                <data:primaryContent>
                    <s:HGroup right="40" left="40"
                              verticalCenter="0"
                              horizontalAlign="center" verticalAlign="contentJustify"
                              gap="50">
                        <s:VGroup horizontalAlign="left"
                                  gap="20">
                            <s:Label text="Smartphone Operating System Market Share (2010 - 2013)"
                                     fontWeight="bold"/>
                            <s:VGroup gap="20">
                                <donut:Donut id="osChart"
                                             width="350" height="250"
                                             ringSeparation="1"
                                             wedgeSeperation="1"
                                             seriesField="os"
                                             highlightAlpha="0.9"
                                             highlightDuration="0"
                                             dataProvider="{dpSMartphone}">
                                    <donut:categories>
                                        <data1:DonutCategory categoryField="year2010" displayName="2010" />
                                        <data1:DonutCategory categoryField="year2011" displayName="2011" />
                                        <data1:DonutCategory categoryField="year2012" displayName="2012" />
                                        <data1:DonutCategory categoryField="year2013" displayName="2013" />
                                    </donut:categories>
                                </donut:Donut>
                                <legend:Legend chart="{osChart}">
                                    <legend:layout>
                                        <s:TileLayout requestedColumnCount="3"
                                                      horizontalGap="0" verticalGap="0" />
                                    </legend:layout>
                                </legend:Legend>
                            </s:VGroup>
                        </s:VGroup>
                        
                        <separators:VSeparator height="100%"/>
                        
                        <s:VGroup horizontalAlign="left"
                                  gap="20">
                            <s:Label text="Desktop Browser Market Share (2012 - 2014)"
                                     fontWeight="bold"/>
                            <s:HGroup gap="20">
                                <donut:Donut id="browserChart"
                                             width="350" height="250"
                                             innerRadius="0"
                                             ringSeparation="0"
                                             wedgeSeperation="0"
                                             highlightDuration="0"
                                             highlightAlpha="1"
                                             seriesField="browser"
                                             dataProvider="{dpBrowserMarketShare}">
                                    <donut:categories>
                                        <data1:DonutCategory categoryField="year2012" displayName="2012" />
                                        <data1:DonutCategory categoryField="year2013" displayName="2013" />
                                        <data1:DonutCategory categoryField="year2014" displayName="2014" />
                                    </donut:categories>
                                </donut:Donut>
                                <legend:Legend chart="{browserChart}"/>
                            </s:HGroup>
                        </s:VGroup>
                    </s:HGroup>
                </data:primaryContent>
            </data:PrimaryContentData>
            
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>