Skip to content

Commit ffcfc10

Browse files
Saravanan-MadheshSaravanan-Madhesh
authored
Merge pull request #1 from SyncfusionExamples/portfolio
 Update blog sample in MAUI toolkit Charts.
2 parents c22bf6f + 153f8f5 commit ffcfc10

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+1447
-2
lines changed

‎PortfolioAnalysis/Portfolio.sln

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.13.35828.75 d17.13
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Portfolio", "Portfolio\Portfolio.csproj", "{049ADBB3-1ED4-43A2-989C-9A16A0C83FCD}"
7+
EndProject
8+
Global
9+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
10+
Debug|Any CPU = Debug|Any CPU
11+
Release|Any CPU = Release|Any CPU
12+
EndGlobalSection
13+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
14+
{049ADBB3-1ED4-43A2-989C-9A16A0C83FCD}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{049ADBB3-1ED4-43A2-989C-9A16A0C83FCD}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{049ADBB3-1ED4-43A2-989C-9A16A0C83FCD}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
17+
{049ADBB3-1ED4-43A2-989C-9A16A0C83FCD}.Release|Any CPU.ActiveCfg = Release|Any CPU
18+
{049ADBB3-1ED4-43A2-989C-9A16A0C83FCD}.Release|Any CPU.Build.0 = Release|Any CPU
19+
{049ADBB3-1ED4-43A2-989C-9A16A0C83FCD}.Release|Any CPU.Deploy.0 = Release|Any CPU
20+
EndGlobalSection
21+
GlobalSection(SolutionProperties) = preSolution
22+
HideSolutionNode = FALSE
23+
EndGlobalSection
24+
GlobalSection(ExtensibilityGlobals) = postSolution
25+
SolutionGuid = {86DC4B70-85DA-4A48-8668-FD29A7EB7FA8}
26+
EndGlobalSection
27+
EndGlobal

‎PortfolioAnalysis/Portfolio/App.xaml

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version = "1.0" encoding = "UTF-8" ?>
2+
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:local="clr-namespace:Portfolio"
5+
x:Class="Portfolio.App">
6+
<Application.Resources>
7+
<ResourceDictionary>
8+
<ResourceDictionary.MergedDictionaries>
9+
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
10+
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
11+
</ResourceDictionary.MergedDictionaries>
12+
</ResourceDictionary>
13+
</Application.Resources>
14+
</Application>

‎PortfolioAnalysis/Portfolio/App.xaml.cs

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
namespace Portfolio
2+
{
3+
public partial class App : Application
4+
{
5+
public App()
6+
{
7+
InitializeComponent();
8+
9+
MainPage = new MainPage();
10+
}
11+
}
12+
}

‎PortfolioAnalysis/Portfolio/AppShell.xaml

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<Shell
3+
x:Class="Portfolio.AppShell"
4+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
5+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
6+
xmlns:local="clr-namespace:Portfolio"
7+
Shell.FlyoutBehavior="Disabled"
8+
Title="Portfolio">
9+
10+
<ShellContent
11+
Title="Home"
12+
ContentTemplate="{DataTemplate local:MainPage}"
13+
Route="MainPage" />
14+
15+
</Shell>

‎PortfolioAnalysis/Portfolio/AppShell.xaml.cs

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
namespace Portfolio
2+
{
3+
public partial class AppShell : Shell
4+
{
5+
public AppShell()
6+
{
7+
InitializeComponent();
8+
}
9+
}
10+
}

‎PortfolioAnalysis/Portfolio/MainPage.xaml

+189
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:chart="clr-namespace:Syncfusion.Maui.Toolkit.Charts;assembly=Syncfusion.Maui.Toolkit"
5+
xmlns:model="clr-namespace:Portfolio.ViewModel"
6+
x:Class="Portfolio.MainPage">
7+
8+
<Border StrokeThickness="0" Padding="{OnPlatform Default=8, Android=7,iOS=7}" Margin="5,0">
9+
<Grid RowSpacing="{OnPlatform Default='-20', Android=10, iOS=10, MacCatalyst='-7,0'}">
10+
11+
<Grid.BindingContext>
12+
<model:PortfolioViewModel x:Name="viewModel"/>
13+
</Grid.BindingContext>
14+
<Grid.RowDefinitions>
15+
<RowDefinition Height="0.1*"/>
16+
<RowDefinition Height="0.9*"/>
17+
</Grid.RowDefinitions>
18+
19+
<Grid Grid.Row="0" Margin="{OnPlatform Default='-10,0,0,0',Android='-10', iOS=-10}">
20+
<Grid.Resources>
21+
<ResourceDictionary>
22+
<x:String x:Key="UpTrendIcon">M3.8739986,19.901001L8.4650002,19.901001 8.4650002,24.780001 3.8739986,24.780001z M16.645999,
23+
17.174001L21.237,17.174001 21.237,24.779001 16.645999,24.779001z M10.188,15.478001L14.78,15.478001 14.78,24.780001 10.188,
24+
24.780001z M23.39,12.207L27.981999,12.207 27.981999,24.780001 23.39,24.780001z M19.189,11.368001L19.189,14.481 19.426,14.436001C19.804999,
25+
14.365001 20.118999,14.186001 20.356999,13.904001 20.596,13.621001 20.717999,13.284001 20.718,12.904 20.717999,12.559 20.613999,
26+
12.257001 20.408999,12.005001 20.208,11.759001 19.883999,11.569 19.444,11.442z M18.620999,6.8530006L18.356999,6.9430008C18.054999,
27+
7.0440006 17.810999,7.2210007 17.631,7.4690003 17.449999,7.7170005 17.359,7.9950004 17.359,8.2940006 17.359,8.5700006 17.442999,8.8310003 17.607999,
28+
9.0670004 17.771999,9.2990003 18.018,9.4880004 18.342,9.6260004L18.620999,9.7470007z M18.620999,4.5480003L19.189,4.5480003 19.189,5.8530006 19.365,
29+
5.8740005C20.026,5.9530001 20.556,6.1790009 20.941,6.5450001 21.283,6.8710003 21.518,7.3020005 21.641,7.8290005L20.342999,7.9990005C20.203,
30+
7.5060005,19.909999,7.1590004,19.467999,6.9690008L19.189,6.8480005 19.189,9.9170003 19.336999,9.9570007C20.36,10.234001 21.061,
31+
10.591001 21.42,11.018001 21.775,11.440001 21.954999,11.993001 21.955,12.663001 21.954999,13.414001 21.725,14.055001 21.273999,
32+
14.568001 20.819999,15.081001 20.177,15.400001 19.36,15.517001L19.189,15.542001 19.189,16.764001 18.620999,16.764001 18.620999,
33+
15.572 18.445,15.550001C17.723,15.463001 17.131,15.192001 16.684,14.746001 16.275,14.335001 15.995999,13.757001 15.855,
34+
13.026L17.210999,12.880001C17.294,13.191001 17.427,13.469001 17.605999,13.706 17.821,13.988001 18.066,14.197001 18.334,
35+
14.326001L18.620999,14.464001 18.620999,11.197001 18.474999,11.155001C17.646999,10.918001 17.034999,10.559 16.656,10.089001 16.28,
36+
9.6220007 16.089,9.0460005 16.089,8.3740005 16.089,7.6900005 16.297999,7.1330004 16.727,6.6710005 17.151,6.2130003 17.728,
37+
5.9450006 18.44,5.875L18.620999,5.8570004z M13.337,3.0799999L15.964,5.4570007C15.872999,5.5390005 15.783,5.6240005 15.698999,
38+
5.7150002 15.332,6.1100006 15.068,6.5570002 14.9,7.0490007L13.337,5.6630001 5.4440002,12.982 3.5790005,11.690001z M0,
39+
0.81500053L1.4349995,0.81500053 1.4349995,26.358001 32,26.358001 32,27.793001 1.4349995,27.793001 0,27.793001 0,
40+
26.358001z M27.939,0L27.935999,5.1670008 26.416,3.79 23.014,7.5460005C22.837,6.7620001,22.485,6.1050005,21.964999,
41+
5.5880003L24.817,2.3629999 24.942999,2.4580002 23.286999,0.95800018z</x:String>
42+
</ResourceDictionary>
43+
</Grid.Resources>
44+
<StackLayout>
45+
<Grid>
46+
<Grid.RowDefinitions>
47+
<RowDefinition Height="{OnPlatform Android=45,Default=80,iOS=50}"/>
48+
</Grid.RowDefinitions>
49+
<Grid.ColumnDefinitions>
50+
<ColumnDefinition Width="50"/>
51+
<ColumnDefinition Width="Auto"/>
52+
</Grid.ColumnDefinitions>
53+
54+
<Path Grid.Column="0" Data="{StaticResource UpTrendIcon}" Fill="#FF000000" Margin="10,10,10,0">
55+
<Path.RenderTransform>
56+
<TransformGroup>
57+
<TransformGroup.Children>
58+
<RotateTransform Angle="0"/>
59+
<ScaleTransform ScaleX="1" ScaleY="1"/>
60+
</TransformGroup.Children>
61+
</TransformGroup>
62+
</Path.RenderTransform>
63+
</Path>
64+
65+
<StackLayout Grid.Column="1" VerticalOptions="Center" Margin="{OnPlatform Android= '-5,15,0,0', iOS='-5,15,0,0', Default='-5,0,0,25'}">
66+
<Label Text="Investment Portfolio: A 20-Year Analysis of Growth, Returns, and Asset Allocation for Individuals" VerticalTextAlignment="Center" HorizontalTextAlignment="Start" FontSize="{OnPlatform Android=12,Default=20,iOS=12}" FontAttributes="Bold" TextColor="Black"/>
67+
</StackLayout>
68+
</Grid>
69+
</StackLayout>
70+
</Grid>
71+
72+
<Grid Grid.Row="1" ColumnSpacing="15">
73+
<Grid.ColumnDefinitions>
74+
<ColumnDefinition Width="0.6*"/>
75+
<ColumnDefinition Width="0.4*"/>
76+
</Grid.ColumnDefinitions>
77+
78+
<Border Grid.Column="0" StrokeThickness="2" Stroke="#66B2C0" StrokeShape="RoundRectangle 10,10,10,10">
79+
<chart:SfCircularChart Grid.Row="0" HorizontalOptions="Fill" Margin="10"
80+
VerticalOptions="Fill">
81+
<chart:SfCircularChart.Title>
82+
<HorizontalStackLayout HorizontalOptions="Center">
83+
<Label Text="Asset Allocation Distribution"
84+
HorizontalOptions="Center"
85+
TextColor="Black" Margin="{OnPlatform Default='280,12,0,0', Android='100,10,0,0'} "/>
86+
<Picker ItemsSource="{Binding Source={x:Reference viewModel}, Path=Years}"
87+
SelectedIndex="0" Margin="{OnPlatform Default='280,0,0,0', Android='100,0,0,0'}"
88+
HorizontalOptions="End"
89+
SelectedIndexChanged="Picker_SelectedIndexChanged"/>
90+
</HorizontalStackLayout>
91+
</chart:SfCircularChart.Title>
92+
<chart:SfCircularChart.Legend>
93+
<chart:ChartLegend Placement="Right"/>
94+
</chart:SfCircularChart.Legend>
95+
96+
<chart:PieSeries ItemsSource="{Binding PortfolioData}"
97+
PaletteBrushes="{Binding Palette}" ShowDataLabels="True"
98+
x:Name="UpdateCircleData" XBindingPath="Sector" YBindingPath="Value">
99+
<chart:PieSeries.DataLabelSettings>
100+
<chart:CircularDataLabelSettings>
101+
<chart:CircularDataLabelSettings.LabelStyle>
102+
<chart:ChartDataLabelStyle LabelFormat="0'%"/>
103+
</chart:CircularDataLabelSettings.LabelStyle>
104+
</chart:CircularDataLabelSettings>
105+
</chart:PieSeries.DataLabelSettings>
106+
</chart:PieSeries>
107+
</chart:SfCircularChart>
108+
</Border>
109+
110+
<Grid Grid.Column="1" Grid.Row="1" RowSpacing="12">
111+
<Grid.RowDefinitions>
112+
<RowDefinition/>
113+
<RowDefinition/>
114+
</Grid.RowDefinitions>
115+
116+
<Border Grid.Row="0" Padding="0,0,0,10" Grid.Column="1" StrokeThickness="2" Stroke="#66B2C0" StrokeShape="RoundRectangle 10,10,10,10">
117+
<chart:SfCartesianChart x:Name="dateTimeChart" Margin="{OnPlatform Default='10,0', Android='10,0', iOS='10,0'}">
118+
<chart:SfCartesianChart.Title>
119+
<Grid>
120+
<Label Text="Portfolio Growth Over 20 Years" HorizontalTextAlignment="Center" TextColor="Black" Margin="{OnPlatform Default=10, Android=7, iOS=7}"/>
121+
</Grid>
122+
</chart:SfCartesianChart.Title>
123+
<chart:SfCartesianChart.XAxes>
124+
<chart:DateTimeAxis>
125+
<chart:DateTimeAxis.LabelStyle>
126+
<chart:ChartAxisLabelStyle TextColor="Black"/>
127+
</chart:DateTimeAxis.LabelStyle>
128+
<chart:DateTimeAxis.AxisLineStyle>
129+
<chart:ChartLineStyle Stroke="Black"/>
130+
</chart:DateTimeAxis.AxisLineStyle>
131+
</chart:DateTimeAxis>
132+
</chart:SfCartesianChart.XAxes>
133+
<chart:SfCartesianChart.YAxes>
134+
<chart:NumericalAxis>
135+
<chart:NumericalAxis.LabelStyle>
136+
<chart:ChartAxisLabelStyle Stroke="Black" TextColor="Black"/>
137+
</chart:NumericalAxis.LabelStyle>
138+
<chart:NumericalAxis.AxisLineStyle>
139+
<chart:ChartLineStyle Stroke="Black"/>
140+
</chart:NumericalAxis.AxisLineStyle>
141+
</chart:NumericalAxis>
142+
</chart:SfCartesianChart.YAxes>
143+
<chart:SfCartesianChart.ZoomPanBehavior>
144+
<chart:ChartZoomPanBehavior MaximumZoomLevel="4" ZoomMode="X"/>
145+
</chart:SfCartesianChart.ZoomPanBehavior>
146+
<chart:LineSeries ItemsSource="{Binding PortfolioHistory}" EnableTooltip="True" StrokeDashArray="1,3" Fill="#006A71" StrokeWidth="2" XBindingPath="Year" YBindingPath="PortfolioValue">
147+
</chart:LineSeries>
148+
</chart:SfCartesianChart>
149+
</Border>
150+
151+
<!--Portfolio-->
152+
<Border Grid.Row="1" Grid.Column="1" Padding="0,0,0,10" StrokeThickness="2" Stroke="#66B2C0" StrokeShape="RoundRectangle 10,10,10,10">
153+
<chart:SfCartesianChart Margin="{OnPlatform Default='10,0', Android='7,0', iOS='7,0'}">
154+
<chart:SfCartesianChart.Title>
155+
<Grid>
156+
<Label Text="Yearly Portfolio Performance: Returns Over Time" HorizontalTextAlignment="Center" TextColor="Black" Margin="{OnPlatform Default=10, Android=7, iOS=7}"/>
157+
</Grid>
158+
</chart:SfCartesianChart.Title>
159+
<chart:SfCartesianChart.XAxes>
160+
<chart:DateTimeAxis>
161+
<chart:DateTimeAxis.LabelStyle>
162+
<chart:ChartAxisLabelStyle Stroke="Black" TextColor="Black"/>
163+
</chart:DateTimeAxis.LabelStyle>
164+
<chart:DateTimeAxis.AxisLineStyle>
165+
<chart:ChartLineStyle Stroke="Black"/>
166+
</chart:DateTimeAxis.AxisLineStyle>
167+
</chart:DateTimeAxis>
168+
</chart:SfCartesianChart.XAxes>
169+
<chart:SfCartesianChart.YAxes>
170+
<chart:NumericalAxis>
171+
<chart:NumericalAxis.LabelStyle>
172+
<chart:ChartAxisLabelStyle Stroke="Black" TextColor="Black"/>
173+
</chart:NumericalAxis.LabelStyle>
174+
<chart:NumericalAxis.AxisLineStyle>
175+
<chart:ChartLineStyle Stroke="Black"/>
176+
</chart:NumericalAxis.AxisLineStyle>
177+
</chart:NumericalAxis>
178+
</chart:SfCartesianChart.YAxes>
179+
<chart:ColumnSeries ItemsSource="{Binding PortfolioHistory}" EnableTooltip="True" Fill="#006A71" x:Name="UpdateColumnData" XBindingPath="Year" YBindingPath="AnnualReturn">
180+
</chart:ColumnSeries>
181+
</chart:SfCartesianChart>
182+
</Border>
183+
184+
</Grid>
185+
</Grid>
186+
</Grid>
187+
</Border>
188+
189+
</ContentPage>

‎PortfolioAnalysis/Portfolio/MainPage.xaml.cs

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
using Syncfusion.Maui.Toolkit.Charts;
2+
namespace Portfolio
3+
{
4+
public partial class MainPage : ContentPage
5+
{
6+
public MainPage()
7+
{
8+
InitializeComponent();
9+
dateTimeChart.XAxes[0].LabelCreated += Primary_LabelCreated;
10+
}
11+
12+
private void Picker_SelectedIndexChanged(object sender, EventArgs e)
13+
{
14+
if (sender is Picker picker && picker.SelectedItem is string selectedYear)
15+
{
16+
viewModel.UpdatePortfolioData(selectedYear);
17+
}
18+
}
19+
20+
int _month = int.MaxValue;
21+
22+
private void Primary_LabelCreated(object? sender, ChartAxisLabelEventArgs e)
23+
{
24+
DateTime baseDate = new(2005, 01, 25);
25+
var date = baseDate.AddDays(e.Position);
26+
if (date.Month != _month)
27+
{
28+
ChartAxisLabelStyle labelStyle = new()
29+
{
30+
LabelFormat = "MMM-dd",
31+
FontAttributes = FontAttributes.Bold
32+
};
33+
e.LabelStyle = labelStyle;
34+
35+
_month = date.Month;
36+
}
37+
else
38+
{
39+
ChartAxisLabelStyle labelStyle = new()
40+
{
41+
LabelFormat = "dd"
42+
};
43+
e.LabelStyle = labelStyle;
44+
}
45+
}
46+
}
47+
48+
}

‎PortfolioAnalysis/Portfolio/MauiProgram.cs

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
using Microsoft.Extensions.Logging;
2+
using Syncfusion.Maui.Toolkit.Hosting;
3+
4+
namespace Portfolio;
5+
6+
public static class MauiProgram
7+
{
8+
public static MauiApp CreateMauiApp()
9+
{
10+
var builder = MauiApp.CreateBuilder();
11+
builder
12+
.UseMauiApp<App>()
13+
.ConfigureSyncfusionToolkit()
14+
.ConfigureFonts(fonts =>
15+
{
16+
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
17+
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
18+
});
19+
20+
#if DEBUG
21+
builder.Logging.AddDebug();
22+
#endif
23+
24+
return builder.Build();
25+
}
26+
}

‎PortfolioAnalysis/Portfolio/Model/PortfolioModel.cs

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
namespace Portfolio.Model
2+
{
3+
public class PortfolioModel
4+
{
5+
public int Year { get; set; }
6+
public double PortfolioValue { get; set; }
7+
public double AnnualReturn { get; set; }
8+
public string? Sector { get; set; }
9+
public double Value { get; set; }
10+
public PortfolioModel(string? sector, double value)
11+
{
12+
Sector = sector;
13+
Value = value;
14+
}
15+
16+
public PortfolioModel()
17+
{
18+
}
19+
}
20+
}

0 commit comments

Comments
 (0)