Skip to content

Change the radial chart to doughnut chart #569

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jfversluis merged 3 commits into from
Jan 18, 2025
Merged

Change the radial chart to doughnut chart #569

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b8a403b
Change the chart to doughnut chart
tj-devel709 Jan 9, 2025
33264d1
a little fine tuning
tj-devel709 Jan 15, 2025
8942f06
Merge branch 'main' into dev/TJ/ChangeChart
jfversluis Jan 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 33 additions & 21 deletions 9.0/Apps/DeveloperBalance/Pages/Controls/CategoryChart.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions 9.0/Apps/DeveloperBalance/Pages/MainPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Loading