<?xml version="1.0" encoding="utf-8" ?>
<Border xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:chart="clr-namespace:Syncfusion.Maui.Toolkit.Charts;assembly=Syncfusion.Maui.Toolkit"
        xmlns:controls="clr-namespace:MauiBrokenBindings.Pages.Controls" 
        xmlns:shimmer="clr-namespace:Syncfusion.Maui.Toolkit.Shimmer;assembly=Syncfusion.Maui.Toolkit"
        xmlns:pageModels="clr-namespace:MauiBrokenBindings.PageModels"
        xmlns:models="clr-namespace:MauiBrokenBindings.Models"
        x:Class="MauiBrokenBindings.Pages.Controls.CategoryChart"
        x:DataType="pageModels:MainPageModel"
        HeightRequest="{OnIdiom 300, Phone=200}"
        Margin="0, 12"
        Style="{StaticResource CardStyle}">
    <shimmer:SfShimmer
        AutomationProperties.IsInAccessibleTree="False"
        BackgroundColor="Transparent"
        VerticalOptions="Fill"
        IsActive="{Binding IsBusy}">
        <shimmer:SfShimmer.CustomView>
            <Grid>
                <BoxView
                    CornerRadius="12"
                    VerticalOptions="Fill"
                    Style="{StaticResource ShimmerCustomViewStyle}"/>
            </Grid>
        </shimmer:SfShimmer.CustomView>
        <shimmer:SfShimmer.Content>
            <chart:SfCircularChart x:Name="Chart"
                    SemanticProperties.Description="Task Categories Chart">
                <chart:SfCircularChart.Resources>
                    <controls:ChartDataLabelConverter x:Key="ChartDataLabelConverter"/>
                </chart:SfCircularChart.Resources>
                <chart:DoughnutSeries 
                    ItemsSource="{Binding TodoCategoryData}"
                    PaletteBrushes="{Binding TodoCategoryColors}"
                    XBindingPath="Title"
                    YBindingPath="Count"
                    ShowDataLabels="True"
                    EnableTooltip="False"
                    x:Name="doughnutSeries"
                    Radius="{OnIdiom 0.6, Phone=0.5}"
                    InnerRadius="0.7">
                    <chart:DoughnutSeries.LabelTemplate>
                        <DataTemplate>
                            <HorizontalStackLayout x:DataType="chart:ChartDataLabel">
                                <Label Text="{Binding Item, Converter={StaticResource ChartDataLabelConverter}, ConverterParameter='title'}"
                                        TextColor="{AppThemeBinding 
                                    Light={StaticResource DarkOnLightBackground},
                                    Dark={StaticResource LightOnDarkBackground}}"
                                        FontSize="{OnIdiom 18, Phone=14}"/>
                                <Label Text=": "
                                        TextColor="{AppThemeBinding
                                    Light={StaticResource DarkOnLightBackground},
                                    Dark={StaticResource LightOnDarkBackground}}"
                                        FontSize="{OnIdiom 18, Phone=14}"/>
                                <Label Text="{Binding Item, Converter={StaticResource ChartDataLabelConverter}, ConverterParameter='count'}"
                                        TextColor="{AppThemeBinding
                                    Light={StaticResource DarkOnLightBackground},
                                    Dark={StaticResource LightOnDarkBackground}}"
                                        FontSize="{OnIdiom 18, Phone=14}"/>
                            </HorizontalStackLayout>
                        </DataTemplate>
                    </chart:DoughnutSeries.LabelTemplate>

                    <chart:DoughnutSeries.DataLabelSettings>
                        <chart:CircularDataLabelSettings LabelPosition="Outside"
                                SmartLabelAlignment="Shift">
                            <chart:CircularDataLabelSettings.ConnectorLineSettings>
                                <chart:ConnectorLineStyle ConnectorType="Line"
                                        StrokeWidth="3"></chart:ConnectorLineStyle>
                            </chart:CircularDataLabelSettings.ConnectorLineSettings>
                        </chart:CircularDataLabelSettings>
                    </chart:DoughnutSeries.DataLabelSettings>
                </chart:DoughnutSeries>

            </chart:SfCircularChart>
        </shimmer:SfShimmer.Content>
    </shimmer:SfShimmer>
</Border>
