<?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:colorPicker="ardisia.components.colorPicker.*" 
          xmlns:heatmap="ardisia.charts.heatmap.*"
          xmlns:containers="containers.*"
          xmlns:data="containers.data.*"
          xmlns:data1="ardisia.components.colorizer.data.*"
          xmlns:separators="ardisia.components.separators.*"
          xmlns:colorizer="ardisia.components.colorizer.*"
          frameRate="60"
          width="100%" height="100%"
          removedFromStage="removedFromStageHandler(event)">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            
            //--------------------------------------
            //  variables
            //--------------------------------------
            
            [Bindable]protected var dp:ArrayCollection;
            
            protected var minMax:Array;
            
            //--------------------------------------
            //  methods
            //--------------------------------------
            
            public function creationComplete():void
            {
                // setup the data
                dp = new ArrayCollection();
                
                for each (var item:XML in xml.Nation) 
                {
                    var name:String = item["@name"];
                    var population:Number = parseFloat(item["@population"]);
                    var GDP_Nominal:Number = parseFloat(item["@GDP_Nominal"]);
                    var Area:Number = parseFloat(item["@Area"]);
                    var LifeExpectancy:String = item["@LifeExpectancy"];
                    var OilReserves:String = item["@OilReserves"];
                    var Market_Cap:String = item["@Market_Cap"];
                    var GDP_Per_Capita:String  = item["@GDP_Per_Capita"];
                    var InternetUsers:String  = item["@InternetUsers"];
                    var NuclearElectricty:String  = item["@NuclearElectricty"];
                    var AdultObesity:String  = item["@AdultObesity"];
                    
                    dp.addItem({
                        name:name ? name : 0, 
                        population: population ? population : 0, 
                        GDP_Nominal: GDP_Nominal ? GDP_Nominal : 0,
                        Area: Area ? Area : 0,
                        LifeExpectancy: LifeExpectancy ? LifeExpectancy : 0, 
                        OilReserves: OilReserves ? OilReserves : 0,
                        Market_Cap: Market_Cap ? Market_Cap : 0,
                        GDP_Per_Capita: GDP_Per_Capita ? GDP_Per_Capita : 0 ,
                        InternetUsers: InternetUsers ? InternetUsers : 0,
                        NuclearElectricty: NuclearElectricty ? NuclearElectricty : 0,
                        AdultObesity: AdultObesity ? AdultObesity : 0
                    });
                }
                
                // calculate the global min/max
                minMax = [
                    [Number.MAX_VALUE, Number.MIN_VALUE], [Number.MAX_VALUE, Number.MIN_VALUE], 
                    [Number.MAX_VALUE, Number.MIN_VALUE], [Number.MAX_VALUE, Number.MIN_VALUE], 
                    [Number.MAX_VALUE, Number.MIN_VALUE], [Number.MAX_VALUE, Number.MIN_VALUE], 
                    [Number.MAX_VALUE, Number.MIN_VALUE], [Number.MAX_VALUE, Number.MIN_VALUE], 
                    [Number.MAX_VALUE, Number.MIN_VALUE], [Number.MAX_VALUE, Number.MIN_VALUE]
                ];
                for (var i:int = 0; i < dp.length; i++)
                {
                    var dpData:Object = dp[i]; 
                    var pop:Number = dpData.population; if (!isNaN(pop)){minMax[0][0] = 0; minMax[0][1] = Math.max(pop, minMax[0][1]);}
                    var gdp:Number = dpData.GDP_Nominal; if (!isNaN(gdp)){minMax[1][0] = Math.min(gdp, minMax[1][0]); minMax[1][1] = Math.max(gdp, minMax[1][1]);}
                    var areaNation:Number = dpData.Area; if (!isNaN(areaNation)){minMax[2][0] = Math.min(areaNation, minMax[2][0]); minMax[2][1] = Math.max(areaNation, minMax[2][1]);}
                    var le:Number = dpData.LifeExpectancy; if (!isNaN(le)){minMax[3][0] = Math.min(le, minMax[3][0]); minMax[3][1] = Math.max(le, minMax[3][1]);}
                    var oil:Number = dpData.OilReserves; if (!isNaN(oil)){minMax[4][0] = Math.min(oil, minMax[4][0]); minMax[4][1] = Math.max(oil, minMax[4][1]);}
                    var mc:Number = dpData.Market_Cap; if (!isNaN(mc)){minMax[5][0] = Math.min(mc, minMax[5][0]); minMax[5][1] = Math.max(mc, minMax[5][1]);}
                    var ppp:Number = dpData.GDP_Per_Capita; if (!isNaN(ppp)){minMax[6][0] = Math.min(ppp, minMax[6][0]); minMax[6][1] = Math.max(ppp, minMax[6][1]);}
                    var iu:Number = dpData.InternetUsers; if (!isNaN(iu)){minMax[7][0] = Math.min(iu, minMax[7][0]); minMax[7][1] = Math.max(iu, minMax[7][1]);}
                    var ne:Number = dpData.NuclearElectricty; if (!isNaN(ne)){minMax[8][0] = Math.min(ne, minMax[8][0]); minMax[8][1] = Math.max(ne, minMax[8][1]);}
                    var ao:Number = dpData.AdultObesity; if (!isNaN(ao)){minMax[9][0] = Math.min(ao, minMax[9][0]); minMax[9][1] = Math.max(ao, minMax[9][1]);}
                }
                
                for (i = 0; i < dp.length; i++)
                {
                    dpData = dp[i]; 
                    dpData.populationPercent = (dpData.population - minMax[0][0]) / (minMax[0][1] - minMax[0][0]);
                    dpData.GDP_NominalPercent = isNaN(dpData.GDP_Nominal) || !dpData.GDP_Nominal ? null : (dpData.GDP_Nominal - minMax[1][0]) / (minMax[1][1] - minMax[1][0]);
                    dpData.AreaPercent = isNaN(dpData.Area) || !dpData.Area ? null : (dpData.Area - minMax[2][0]) / (minMax[2][1] - minMax[2][0]);
                    dpData.LifeExpectancyPercent = isNaN(dpData.LifeExpectancy) || !dpData.LifeExpectancy ? null : (dpData.LifeExpectancy - minMax[3][0]) / (minMax[3][1] - minMax[3][0]);
                    dpData.OilReservesPercent = isNaN(dpData.OilReserves) || !dpData.OilReserves ? null : (dpData.OilReserves - minMax[4][0]) / (minMax[4][1] - minMax[4][0]);
                    dpData.Market_CapPercent = isNaN(dpData.Market_Cap) || !dpData.Market_Cap ? null : (dpData.Market_Cap - minMax[5][0]) / (minMax[5][1] - minMax[5][0]);
                    dpData.GDP_Per_CapitaPercent = isNaN(dpData.GDP_Per_Capita) || !dpData.GDP_Per_Capita ? null : (dpData.GDP_Per_Capita - minMax[6][0]) / (minMax[6][1] - minMax[6][0]);
                    dpData.InternetUsersPercent = isNaN(dpData.InternetUsers) || !dpData.InternetUsers ? null : (dpData.InternetUsers - minMax[7][0]) / (minMax[7][1] - minMax[7][0]);
                    dpData.NuclearElectrictyPercent = isNaN(dpData.NuclearElectricty) || !dpData.NuclearElectricty ? null : (dpData.NuclearElectricty - minMax[8][0]) / (minMax[8][1] - minMax[8][0]);
                    dpData.AdultObesityPercent = isNaN(dpData.AdultObesity) || !dpData.AdultObesity ? null : (dpData.AdultObesity - minMax[9][0]) / (minMax[9][1] - minMax[9][0]);
                }
            }
            
            //--------------------------------------
            //  event handlers
            //--------------------------------------
            
            protected function removedFromStageHandler(event:Event):void
            {
                
            }
            
        ]]>
    </fx:Script>
    
    <!-- declarations -->
    <fx:Declarations>
        
        <fx:XML id="xml" 
                source="data/EUdata.xml"/>    
        
        <colorizer:GradientColorizer id="colorizerA" 
                                     rangeMinimum="0" rangeMaximum="1">
            <data1:GradientColorizerData ratio="0" color="{colorizerAColor0.selectedColor}" />
            <data1:GradientColorizerData ratio="1" color="{colorizerAColor1.selectedColor}" />
        </colorizer:GradientColorizer>
        
        <colorizer:GradientColorizer id="colorizerB" 
                                     rangeMinimum="0" rangeMaximum="1">
            <data1:GradientColorizerData ratio="0" color="{colorizerBColor0.selectedColor}" />
            <data1:GradientColorizerData ratio="1" color="{colorizerBColor1.selectedColor}" />
        </colorizer:GradientColorizer>
        
    </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="Heatmap Description"
                                       description="Chart designed to display data via colorizers.&#13;&#13;Extends and fully supports the Spark DataGrid's API."
                                       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="Selection Mode:">
                        <s:DropDownList id="selModeSelect"
                                        width="100"
                                        requireSelection="true"
                                        selectedIndex="1"
                                        labelField="label">
                            <s:ArrayCollection>
                                <fx:Object label="cell" value="singleCell" />
                                <fx:Object label="row" value="singleRow" />
                            </s:ArrayCollection>
                        </s:DropDownList>
                    </s:FormItem>
                    
                    <separators:HSeparator width="100%"
                                           paddingTop="5" paddingBottom="5"/>
                    <s:FormHeading label="Colorizer 1:"/>
                    <s:FormItem label="Lowest Value Color:">
                        <colorPicker:ColorPicker id="colorizerAColor0" 
                                                 showColorSpacePicker="true"
                                                 selectedColor="#FFE6D5"
                                                 change="dp.refresh()"/>
                    </s:FormItem>
                    <s:FormItem label="Greatest Value Color:">
                        <colorPicker:ColorPicker id="colorizerAColor1" 
                                                 showColorSpacePicker="true"
                                                 selectedColor="#FF6600"
                                                 change="dp.refresh()"/>
                    </s:FormItem>
                    
                    <separators:HSeparator width="100%"
                                           paddingTop="5" paddingBottom="5"/>
                    <s:FormHeading label="Colorizer 2:"/>
                    <s:FormItem label="Lowest Value Color:">
                        <colorPicker:ColorPicker id="colorizerBColor0" 
                                                 showColorSpacePicker="true"
                                                 selectedColor="#D7E9FF"
                                                 change="dp.refresh()"/>
                    </s:FormItem>
                    <s:FormItem label="Greatest Value Color:">
                        <colorPicker:ColorPicker id="colorizerBColor1" 
                                                 showColorSpacePicker="true"
                                                 selectedColor="#004080"
                                                 change="dp.refresh()"/>
                    </s:FormItem>
                </data:content>
            </data:ExpandingContainerData>
            
        </containers:expandingContainerContent>
        
        <containers:centerContent>
            
            <!--- example #1 -->
            <data:PrimaryContentData>
                <data:tabLabel>EU Nation Data Example</data:tabLabel>
                <data:exampleDescription>Data on nations of the European Union. This example uses multiple colorizers to illustrate that each column of the Heatmap can use a custom colorizer.&#13;&#13;The example below will show data tips for numerical values. Click on column headers to sort on that column.</data:exampleDescription>
                <data:primaryContent>
                    <s:VGroup top="20" right="20" bottom="20" left="20"
                              verticalCenter="0">
                        <heatmap:Heatmap id="heatmap" 
                                         showDataTips="true"
                                         width="100%" height="100%"
                                         selectionMode="{selModeSelect.selectedItem.value}"
                                         dataProvider="{dp}">
                            <heatmap:seriesColumn>
                                <s:GridColumn dataField="name" 
                                              headerText="EU Nation" 
                                              showDataTips="false"/>
                            </heatmap:seriesColumn>
                            <heatmap:dataColumns>
                                <heatmap:HeatmapDataColumn dataField="NuclearElectrictyPercent" dataTipField="NuclearElectricty" headerText="Nuclear Electricty" colorizer="{colorizerA}"/>
                                <heatmap:HeatmapDataColumn dataField="Market_CapPercent" dataTipField="Market_Cap" headerText="Market Cap" colorizer="{colorizerA}"/>
                                <heatmap:HeatmapDataColumn dataField="InternetUsersPercent" dataTipField="InternetUsers" headerText="Internet Users" colorizer="{colorizerA}"/>
                                <heatmap:HeatmapDataColumn dataField="GDP_Per_CapitaPercent" dataTipField="GDP_Per_Capita" headerText="GDP Per Capita" colorizer="{colorizerB}"/>
                                <heatmap:HeatmapDataColumn dataField="populationPercent" dataTipField="population" headerText="Population" colorizer="{colorizerB}"/>
                                <heatmap:HeatmapDataColumn dataField="GDP_NominalPercent" dataTipField="GDP_Nominal" headerText="GDP (nominal)" colorizer="{colorizerB}"/>
                                <heatmap:HeatmapDataColumn dataField="AreaPercent" dataTipField="Area" headerText="Area" colorizer="{colorizerB}"/>
                                <heatmap:HeatmapDataColumn dataField="LifeExpectancyPercent" dataTipField="LifeExpectancy" headerText="Life Expectancy" colorizer="{colorizerB}"/>
                                <heatmap:HeatmapDataColumn dataField="OilReservesPercent" dataTipField="OilReserves" headerText="Oil Reserves" colorizer="{colorizerB}"/>
                                <heatmap:HeatmapDataColumn dataField="AdultObesityPercent" dataTipField="AdultObesity" headerText="Adult Obesity" colorizer="{colorizerB}"/>
                            </heatmap:dataColumns>
                        </heatmap:Heatmap>
                        <s:VGroup width="100%" 
                                  horizontalAlign="right">
                            <s:HGroup verticalAlign="middle" 
                                      right="0">
                                <s:Label text="Less" 
                                         fontWeight="bold"/>
                                <s:Rect height="10" width="250"
                                        right="0">
                                    <s:fill>
                                        <s:LinearGradient>
                                            <s:GradientEntry color="{colorizerAColor0.selectedColor}" />
                                            <s:GradientEntry color="{colorizerAColor1.selectedColor}" />
                                        </s:LinearGradient>
                                    </s:fill>
                                </s:Rect>
                                <s:Label fontWeight="bold" text="More" width="50"/>
                            </s:HGroup>
                            <s:HGroup verticalAlign="middle" 
                                      right="0">
                                <s:Label text="Lower" 
                                         fontWeight="bold"/>
                                <s:Rect right="0" 
                                        height="10" 
                                        width="250">
                                    <s:fill>
                                        <s:LinearGradient>
                                            <s:GradientEntry color="{colorizerBColor0.selectedColor}" />
                                            <s:GradientEntry color="{colorizerBColor1.selectedColor}" />
                                        </s:LinearGradient>
                                    </s:fill>
                                </s:Rect>
                                <s:Label width="50"
                                         fontWeight="bold" 
                                         text="Higher"/>
                            </s:HGroup>
                        </s:VGroup>
                    </s:VGroup>
                </data:primaryContent>
            </data:PrimaryContentData>
            
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>