<UserControl x:Class="TimeBarFirstLook_WCF_RIA.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:web="clr-namespace:TimeBarFirstLook_WCF_RIA.Web"
    xmlns:converters="clr-namespace:TimeBarFirstLook_WCF_RIA.Converters"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources>
        <converters:PieConverter x:Key="converter" />
    </UserControl.Resources>
    
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.Resources>
            <Style x:Key="TransitionControlStyle" TargetType="telerik:RadTransitionControl">
                <Setter Property="Transition">
                    <Setter.Value>
                        <telerik:FadeTransition />
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="SparklineLineStyle" TargetType="Polyline">
                <Setter Property="StrokeThickness" Value="2" />
            </Style>
        </Grid.Resources>
        
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        
        <telerik:RadDomainDataSource Name="flightStatisticsSource" QueryName="GetFlightStatisticsViews"
                                     AutoLoad="True"
                                     Height="0" Width="0">
            <telerik:RadDomainDataSource.DomainContext>
                <web:FlightStatisticsContext />
            </telerik:RadDomainDataSource.DomainContext>
        </telerik:RadDomainDataSource>
        
        <telerik:RadBusyIndicator IsBusy="{Binding Path=IsBusy, ElementName=flightStatisticsSource}" />
        <Grid Grid.Row="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="150" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <telerik:RadTimeBar Name="timeBar1" Grid.Row="0"
                                PeriodStart="1-Jan-2010" PeriodEnd="1-Jan-2012"
                                VisiblePeriodStart="1-Feb-2011" VisiblePeriodEnd="15-March-2011">
                <telerik:RadTimeBar.Intervals>
                    <telerik:QuarterInterval />
                    <telerik:MonthInterval />
                    <telerik:WeekInterval />
                    <telerik:DayInterval />
                </telerik:RadTimeBar.Intervals>
                <telerik:RadLinearSparkline LineStroke="#7156E4" LineShapeStyle="{StaticResource SparklineLineStyle}" ItemsSource="{Binding DataView, ElementName=flightStatisticsSource}" XValuePath="TimeStamp" YValuePath="Total" Margin="0,8" />
            </telerik:RadTimeBar>
            <Border Grid.Row="1">
                <StackPanel Margin="3,2" Orientation="Horizontal" VerticalAlignment="Center">
                    <StackPanel.Resources>
                        <Style TargetType="TextBlock">
                            <Setter Property="FontSize" Value="10" />
                        </Style>
                    </StackPanel.Resources>
                    <TextBlock Text="Current selection: " />
                    <TextBlock Text="{Binding ElementName=timeBar1, Path=SelectionStart}" FontWeight="Bold" />
                    <TextBlock Text=" - " />
                    <TextBlock Text="{Binding ElementName=timeBar1, Path=SelectionEnd}" FontWeight="Bold" />
                </StackPanel>
            </Border>
        </Grid>
        <Grid Grid.Row="1" Margin="0,20,0,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="463*" />
                <ColumnDefinition Width="311*" />
            </Grid.ColumnDefinitions>

            <!--Bar chart-->
            <telerik:RadChart Grid.Column="0" >
                <telerik:RadChart.SeriesMappings>
                    <telerik:SeriesMapping>
                        <telerik:SeriesMapping.SeriesDefinition>
                            <telerik:BarSeriesDefinition />
                        </telerik:SeriesMapping.SeriesDefinition>
                        <telerik:SeriesMapping.ItemMappings>
                            <telerik:ItemMapping FieldName="TimeStamp" DataPointMember="XCategory" />
                            <telerik:ItemMapping FieldName="Total" DataPointMember="YValue" />
                        </telerik:SeriesMapping.ItemMappings>
                    </telerik:SeriesMapping>
                </telerik:RadChart.SeriesMappings>

                <telerik:RadChart.DefaultView>
                    <telerik:ChartDefaultView>
                        <telerik:ChartDefaultView.ChartLegend >
                            <telerik:ChartLegend Name="legend" Visibility="Collapsed" />
                        </telerik:ChartDefaultView.ChartLegend>
                        <telerik:ChartDefaultView.ChartArea>
                            <telerik:ChartArea LegendName="legend"
                                                EnableAnimations="False" 
                                                EnableTransitionAnimations="True"
                                                TransitionControlStyle="{StaticResource TransitionControlStyle}">
                                <telerik:ChartArea.AxisY>
                                    <telerik:AxisY Title="Number of Flights" />
                                </telerik:ChartArea.AxisY>
                                <telerik:ChartArea.AxisX>
                                    <telerik:AxisX Title="Date" DefaultLabelFormat="dd" />
                                </telerik:ChartArea.AxisX>
                            </telerik:ChartArea>
                        </telerik:ChartDefaultView.ChartArea>
                        <telerik:ChartDefaultView.ChartTitle>
                            <telerik:ChartTitle FontWeight="Normal">
                                <StackPanel Orientation="Horizontal">
                                    <StackPanel.Resources>
                                        <Style TargetType="TextBlock">
                                            <Setter Property="FontSize" Value="10" />
                                            <Setter Property="VerticalAlignment" Value="Center" />
                                        </Style>
                                    </StackPanel.Resources>
                                    <TextBlock Text="Flight statistics " FontSize="14" />
                                    <TextBlock Text="{Binding ElementName=timeBar1, Path=SelectionStart, StringFormat='MMMM dd, yyyy'}" />
                                    <TextBlock Text=" - " />
                                    <TextBlock Text="{Binding ElementName=timeBar1, Path=SelectionEnd, StringFormat='MMMM dd, yyyy'}" />
                                </StackPanel>
                            </telerik:ChartTitle>
                        </telerik:ChartDefaultView.ChartTitle>
                    </telerik:ChartDefaultView>
                </telerik:RadChart.DefaultView>
                <telerik:RadChart.TimeBar>
                    <Binding ElementName="timeBar1" />
                </telerik:RadChart.TimeBar>
                <telerik:RadChart.ItemsSource>
                    <Binding ElementName="flightStatisticsSource" Path="DataView" />
                </telerik:RadChart.ItemsSource>
            </telerik:RadChart>

            <!--Pie chart-->
            <telerik:RadChart Grid.Column="1" Name="pieChart">
                <telerik:RadChart.SeriesMappings>
                    <telerik:SeriesMapping>
                        <telerik:SeriesMapping.SeriesDefinition>
                            <telerik:PieSeriesDefinition StartAngle="90" />
                        </telerik:SeriesMapping.SeriesDefinition>
                        <telerik:SeriesMapping.ItemMappings>
                            <telerik:ItemMapping FieldName="TimeStamp" DataPointMember="XCategory" />
                            <telerik:ItemMapping FieldName="FlightCount"  DataPointMember="YValue" AggregateFunction="Sum" />
                            <telerik:ItemMapping FieldName="Type" DataPointMember="LegendLabel" />
                        </telerik:SeriesMapping.ItemMappings>
                        <telerik:SeriesMapping.GroupingSettings>
                            <telerik:GroupingSettings ShouldFlattenSeries="True">
                                <telerik:GroupingSettings.GroupDescriptors>
                                    <telerik:ChartGroupDescriptor Member="Type" />
                                </telerik:GroupingSettings.GroupDescriptors>
                            </telerik:GroupingSettings>
                        </telerik:SeriesMapping.GroupingSettings>
                    </telerik:SeriesMapping>
                </telerik:RadChart.SeriesMappings>

                <telerik:RadChart.DefaultView>
                    <telerik:ChartDefaultView>
                        <telerik:ChartDefaultView.ChartLegend >
                            <telerik:ChartLegend Name="legend2" />
                        </telerik:ChartDefaultView.ChartLegend>
                        <telerik:ChartDefaultView.ChartArea>
                            <telerik:ChartArea LegendName="legend2"
                                                EnableAnimations="False"
                                                EnableTransitionAnimations="True"/>
                        </telerik:ChartDefaultView.ChartArea>
                        <telerik:ChartDefaultView.ChartTitle>
                            <telerik:ChartTitle FontWeight="Normal">
                                <StackPanel Orientation="Vertical">
                                    <TextBlock Text="Arrivals and Departures statistics " FontSize="14" />
                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                                        <StackPanel.Resources>
                                            <Style TargetType="TextBlock">
                                                <Setter Property="FontSize" Value="10" />
                                            </Style>
                                        </StackPanel.Resources>
                                        <TextBlock Text="{Binding ElementName=timeBar1, Path=SelectionStart, StringFormat='MMMM dd, yyyy'}" />
                                        <TextBlock Text=" - " />
                                        <TextBlock Text="{Binding ElementName=timeBar1, Path=SelectionEnd, StringFormat='MMMM dd, yyyy'}" />
                                    </StackPanel>
                                </StackPanel>
                            </telerik:ChartTitle>
                        </telerik:ChartDefaultView.ChartTitle>
                    </telerik:ChartDefaultView>
                </telerik:RadChart.DefaultView>
                <telerik:RadChart.TimeBar>
                    <Binding ElementName="timeBar1" />
                </telerik:RadChart.TimeBar>
                <telerik:RadChart.ItemsSource>
                    <Binding ElementName="flightStatisticsSource" Path="DataView" Converter="{StaticResource converter}" />
                </telerik:RadChart.ItemsSource>
            </telerik:RadChart>
        </Grid>
    </Grid>
</UserControl>
