Merge pull request #569 from tj-devel709/dev/TJ/ChangeChart

Change the radial chart to doughnut chart
dotnet · Jan 18, 2025 · 09f0e5d · 09f0e5d
2 parents ab5bdb9 + 8942f06
commit 09f0e5d
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 21 deletions.
diff --git a/9.0/Apps/DeveloperBalance/Pages/Controls/CategoryChart.xaml b/9.0/Apps/DeveloperBalance/Pages/Controls/CategoryChart.xaml
@@ -7,44 +7,56 @@
         xmlns:pageModels="clr-namespace:DeveloperBalance.PageModels"
         x:Class="DeveloperBalance.Pages.Controls.CategoryChart"
         HeightRequest="{OnIdiom 300, Phone=200}"
-        Margin="0, 12"
-        Style="{StaticResource CardStyle}"
-        x:DataType="pageModels:MainPageModel">
+        Style="{StaticResource CardStyle}">
     <shimmer:SfShimmer
         BackgroundColor="Transparent"
         VerticalOptions="FillAndExpand"
         IsActive ="{Binding IsBusy}">
         <shimmer:SfShimmer.CustomView>
             <Grid>
-                <BoxView 
+                <BoxView
                     CornerRadius="12"
                     VerticalOptions="FillAndExpand"
                     Style="{StaticResource ShimmerCustomViewStyle}"/>
             </Grid>
         </shimmer:SfShimmer.CustomView>
         <shimmer:SfShimmer.Content>
             <chart:SfCircularChart x:Name="Chart">
-                <chart:SfCircularChart.Legend>
-                    <controls:LegendExt Placement="Right">
-                        <chart:ChartLegend.LabelStyle>
-                            <chart:ChartLegendLabelStyle 
-                                TextColor="{AppThemeBinding 
-                                Light={StaticResource DarkOnLightBackground},
-                                Dark={StaticResource LightOnDarkBackground}}" 
-                                Margin="5" 
-                                FontSize="18" />
-                        </chart:ChartLegend.LabelStyle>
-                    </controls:LegendExt>
-                </chart:SfCircularChart.Legend>
-                <chart:RadialBarSeries 
+                <chart:DoughnutSeries
                     ItemsSource="{Binding TodoCategoryData}"
                     PaletteBrushes="{Binding TodoCategoryColors}"
                     XBindingPath="Title"
-                    YBindingPath="Count" 
+                    YBindingPath="Count"
                     ShowDataLabels="True"
-                    EnableTooltip="True" 
-                    TrackFill="{AppThemeBinding Light={StaticResource LightBackground}, Dark={StaticResource DarkBackground}}"
-                    CapStyle = "BothCurve"/>
+                    EnableTooltip="False"
+                    x:Name="doughnutSeries"
+                    Radius="{OnIdiom 0.7, Phone=0.5}"
+                    InnerRadius="0.7" >
+                    <chart:DoughnutSeries.LabelTemplate>
+                        <DataTemplate >
+                            <HorizontalStackLayout>
+                                <Label Text="{Binding Item.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.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>

diff --git a/9.0/Apps/DeveloperBalance/Pages/MainPage.xaml b/9.0/Apps/DeveloperBalance/Pages/MainPage.xaml
@@ -35,6 +35,7 @@
             <pullToRefresh:SfPullToRefresh.PullableContent>
                 <ScrollView>
                     <VerticalStackLayout Spacing="{StaticResource LayoutSpacing}" Padding="{StaticResource LayoutPadding}">
+                        <Label Text="Task Categories" Style="{StaticResource Title2}"/>
                         <controls:CategoryChart />
                         <Label Text="Projects" Style="{StaticResource Title2}"/>
                         <ScrollView Orientation="Horizontal" Margin="-30,0">