<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    xmlns:axiis="http://www.axiis.org/2009"
    xmlns:degrafa="http://www.degrafa.com/2007"
    xmlns:extras="org.axiis.extras.layouts.*"
    creationComplete="processData()" xmlns:Examples="Examples.*" viewSourceURL="srcview/index.html">

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

    <mx:Script>
        <![CDATA[
            import mx.utils.ColorUtil;
            import org.axiis.data.DataSet;

            private function processData():void
            {
                var ds:DataSet = new DataSet();
                
                // Convert the XML data into Objects
                ds.processXmlString(frameworkComboBox.selectedItem.data as String);
                
                // Give the data to the treemapLayout
                treemapLayout.dataProvider = ds.data.object.clazzes.clazz;
            }
        ]]>
    </mx:Script>

    <Examples:ExampleBackground subTitle="Custom Visualization"
        title="Wedge Stack Graph"
        width="100%"
        height="100%" /> 
    
    <!-- Scale for translating the percentPrivateMethods values between -1 and 1.
        This is used for coloring the fills red or green and adjusting brightness. -->
    <axiis:LinearScale id="colorScale"
        dataProvider="{treemapLayout.dataProvider}"
        dataField="percentPrivateMethods"
        minLayout="-1"
        maxLayout="1"/>
    
    <!-- Storage for the result from colorScale.valueToLayout -->
    <axiis:NumericExpression id="colorScaleResult"
        value="{colorScale.valueToLayout(treemapLayout.currentDatum.percentPrivateMethods)}"/>
    
    <!-- If the colorScaleResult is positive, we use red, otherwise we use green -->
    <axiis:NumericExpression id="currentColor"
        value="{colorScaleResult.value &gt; 0 ? 0xff0000 : 0x00ff00}"/>
    
    <mx:VBox horizontalAlign="center"
        top="70"
        paddingLeft="30"
        paddingRight="30"
        paddingBottom="20"
        width="100%"
        height="100%">
        
        <!-- ComboBox for selecting different frameworks to visualize -->
        <mx:ComboBox id="frameworkComboBox" labelField="name" change="processData()" enabled="{!treemapLayout.rendering}">
            <mx:dataProvider>
                <mx:Object name="Axiis">
                    <mx:data>
                        <mx:String source="data/framework stats/axiis.xml"/>
                    </mx:data>
                </mx:Object>
                <mx:Object name="Degrafa">
                    <mx:data>
                        <mx:String source="data/framework stats/degrafa.xml"/>
                    </mx:data>
                </mx:Object>
                <mx:Object name="Flex 3.3">
                    <mx:data>
                        <mx:String source="data/framework stats/flex3.3.xml"/>
                    </mx:data>
                </mx:Object>
                <mx:Object name="Data Visualization 3.1">
                    <mx:data>
                        <mx:String source="data/framework stats/datavisualization.3.1.xml"/>
                    </mx:data>
                </mx:Object>
            </mx:dataProvider>
        </mx:ComboBox>
    
        <!-- The treemap -->
        <axiis:DataCanvas id="dc" width="100%" height="100%">
            <axiis:layouts>
                <extras:SquarifiedTreemapLayout id="treemapLayout"
                    dataField="totalLines"
                    labelField="name"
                    width="{dc.width}"
                    height="{dc.height}">
                    <extras:drawingGeometries>
                    
                        <!-- The rectangle representing each item -->
                        <degrafa:RegularRectangle
                            x="{treemapLayout.currentReference.x}"
                            y="{treemapLayout.currentReference.y}"
                            width="{treemapLayout.currentReference.width}"
                            height="{treemapLayout.currentReference.height}">
                            <degrafa:fill>
                                <!-- Fill the rectangles red if they contain many private methods, green otherwise. -->
                                <degrafa:LinearGradientFill angle="45">
                                    <degrafa:GradientStop id="stop1"
                                        color="{ColorUtil.adjustBrightness(currentColor.value, 0xff - Math.abs(colorScaleResult.value * 0xcc))}"/>
                                    <degrafa:GradientStop id="stop2"
                                        color="{ColorUtil.adjustBrightness(currentColor.value, 0xff - Math.abs(colorScaleResult.value * 0x66))}"/>
                                </degrafa:LinearGradientFill>
                            </degrafa:fill>
                        <degrafa:stroke>
                            <degrafa:SolidStroke color="0"/>
                        </degrafa:stroke>
                    </degrafa:RegularRectangle>
                    
                    <!-- The text displaying the class name. Don't show it if the rectangle is too small. -->
                    <degrafa:RasterText text="{treemapLayout.currentDatum.name}"
                        x="{treemapLayout.currentReference.x}"
                        y="{treemapLayout.currentReference.y}"
                        width="{treemapLayout.currentReference.width}"
                        visible="{treemapLayout.currentReference.height &gt; 18}">
                        <degrafa:fill>
                            <degrafa:SolidFill id="textFill" color="0"/>
                        </degrafa:fill>
                    </degrafa:RasterText>
                    
                </extras:drawingGeometries>
                
                <!-- The mouseOver state - Color the rectangle black and the text white. -->
                <extras:states>    
                    <axiis:State enterStateEvent="mouseOver"
                        exitStateEvent="mouseOut"
                        targets="{[stop1,stop2,textFill]}"
                        properties="{['color','color','color']}"
                        values="{[0x000000,0x666666,0xffffff]}"/>
                </extras:states>
                
            </extras:SquarifiedTreemapLayout>
        </axiis:layouts>
        
        <axiis:filters>
            <mx:DropShadowFilter distance="10" blurX="8" blurY="8"/>
        </axiis:filters>
        
    </axiis:DataCanvas>

    </mx:VBox>
        
</mx:Application>