<?xml version="1.0" encoding="utf-8"?>
<UserControl x:Class="GeoDashboard.HomeValueHistogramTile" Width="520" Height="360" Margin="6" Foreground="White" FontFamily="Segoe UI" FontSize="24" FontWeight="Light" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:GeoDashboard">

  <Grid x:Name="LayoutRoot" Background="Black" DataContext="{Binding Path=Sources[USA_Median_Home_Value]}">

    <Grid.Resources>
      <local:IndexDescriptionConverter x:Key="_cvtIndexDescription" />
    </Grid.Resources>

    <Grid.RowDefinitions>
      <RowDefinition Height="auto" />
      <RowDefinition Height="auto" />
      <RowDefinition />
    </Grid.RowDefinitions>

    <Border Style="{StaticResource _tileCaption}">
      <TextBlock Text="Home Value Distribution" FontSize="12" Foreground="Black" />
    </Border>

    <StackPanel Margin="12" Grid.Row="1">
      <TextBlock Text="{Binding Dictionary[NAME].Value}" FontWeight="Bold" Foreground="{StaticResource _brResult}" />
    </StackPanel>

    <c1:C1Chart ChartType="Column" Grid.Row="2" Margin="12">

      <!-- chart data -->
      <c1:C1Chart.Data>
        <c1:ChartData ItemsSource="{Binding List}">
          <c1:DataSeries ValueBinding="{Binding Value}" SymbolFill="{StaticResource _brResult}">
            <c1:DataSeries.PointTooltipTemplate>
              <DataTemplate>
                <StackPanel>
                  <TextBlock Text="{Binding DataObject.Value, StringFormat=' {0:n0} homes in the range '}" HorizontalAlignment="Center" FontSize="18" />
                  <TextBlock Text="{Binding DataObject.Name}" HorizontalAlignment="Center" FontSize="18" />
                </StackPanel>
              </DataTemplate>
            </c1:DataSeries.PointTooltipTemplate>
          </c1:DataSeries>
        </c1:ChartData>
      </c1:C1Chart.Data>

      <!-- chart axes -->
      <c1:C1Chart.View>
        <c1:ChartView>
          <c1:ChartView.AxisX>
            <c1:Axis Foreground="Transparent" MajorGridStroke="Transparent">
              <c1:Axis.AnnoTemplate>
                <DataTemplate>
                  <TextBlock />
                </DataTemplate>
              </c1:Axis.AnnoTemplate>
            </c1:Axis>
          </c1:ChartView.AxisX>

          <c1:ChartView.AxisY>
            <c1:Axis Foreground="Transparent" MinorTickStroke="Transparent">
              <c1:Axis.AnnoTemplate>
                <DataTemplate>
                  <TextBlock Text="{Binding Value, StringFormat=n0}" FontSize="12" />
                </DataTemplate>
              </c1:Axis.AnnoTemplate>
            </c1:Axis>
          </c1:ChartView.AxisY>
        </c1:ChartView>
      </c1:C1Chart.View>
    </c1:C1Chart>
  </Grid>
</UserControl>