Merge pull request #1 from SyncfusionExamples/bubbleserie

903598 Update blog sample in MAUI Bubble Chart.
SyncfusionExamples · Oct 10, 2024 · 6aff9c4 · 6aff9c4
2 parents 6561a71 + 0055ec0
commit 6aff9c4
Show file tree

Hide file tree

Showing 80 changed files with 1,537 additions and 2 deletions.
diff --git a/MarketCap.sln b/MarketCap.sln
@@ -0,0 +1,27 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.11.35303.130
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "MarketCap", "MarketCap\MarketCap.csproj", "{656EBEEF-D57A-439E-88BD-2C81A9D8AB2B}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{656EBEEF-D57A-439E-88BD-2C81A9D8AB2B}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{656EBEEF-D57A-439E-88BD-2C81A9D8AB2B}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{656EBEEF-D57A-439E-88BD-2C81A9D8AB2B}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
+		{656EBEEF-D57A-439E-88BD-2C81A9D8AB2B}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{656EBEEF-D57A-439E-88BD-2C81A9D8AB2B}.Release|Any CPU.Build.0 = Release|Any CPU
+		{656EBEEF-D57A-439E-88BD-2C81A9D8AB2B}.Release|Any CPU.Deploy.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {0714E7C7-5290-45B6-BC11-E0EF41C9A7E0}
+	EndGlobalSection
+EndGlobal
diff --git a/MarketCap/App.xaml b/MarketCap/App.xaml
@@ -0,0 +1,14 @@
+<?xml version = "1.0" encoding = "UTF-8" ?>
+<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:local="clr-namespace:MarketCap"
+             x:Class="MarketCap.App">
+    <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
+                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Application.Resources>
+</Application>
diff --git a/MarketCap/App.xaml.cs b/MarketCap/App.xaml.cs
@@ -0,0 +1,12 @@
+namespace MarketCap
+{
+    public partial class App : Application
+    {
+        public App()
+        {
+            InitializeComponent();
+
+            MainPage = new MainPage();
+        }
+    }
+}
diff --git a/MarketCap/AppShell.xaml b/MarketCap/AppShell.xaml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Shell
+    x:Class="MarketCap.AppShell"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:local="clr-namespace:MarketCap"
+    Shell.FlyoutBehavior="Disabled"
+    Title="MarketCap">
+
+    <ShellContent
+        Title="Home"
+        ContentTemplate="{DataTemplate local:MainPage}"
+        Route="MainPage" />
+
+</Shell>
diff --git a/MarketCap/AppShell.xaml.cs b/MarketCap/AppShell.xaml.cs
@@ -0,0 +1,10 @@
+namespace MarketCap
+{
+    public partial class AppShell : Shell
+    {
+        public AppShell()
+        {
+            InitializeComponent();
+        }
+    }
+}
diff --git a/MarketCap/MainPage.xaml b/MarketCap/MainPage.xaml
@@ -0,0 +1,129 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
+             xmlns:model="clr-namespace:MarketCap"
+             x:Class="MarketCap.MainPage">
+
+    <Border Margin="25" Padding="{OnPlatform Default=8, Android=7,iOS=7}" StrokeThickness="3" Stroke="Gray" StrokeShape="RoundRectangle 15">
+        <chart:SfCartesianChart HorizontalOptions="Fill" VerticalOptions="FillAndExpand">
+            <chart:SfCartesianChart.Resources>
+                <ResourceDictionary>
+                    <x:String x:Key="UpTrendIcon">M3.2999878,20.999992 L3.2999878,31.099993 0,31.099993 0,24.300009z 
+                            M7.4000244,16.900018 L7.4000244,31.099993 4.0999756,31.099993 4.0999756,20.30001z 
+                            M16.400024,16.499994 L18.599976,18.700004 19.700012,17.599998 19.700012,31.099993 16.400024,31.099993z 
+                            M23.799988,13.600001 L23.799988,31.199999 20.5,31.199999 20.5,16.900018z 
+                            M11.5,12.800013 L11.5,31.099993 8.2000122,31.099993 8.2000122,16.1z 
+                            M12.299988,12.400019 L15.599976,15.700006 15.599976,31.099993 12.299988,31.099993z 
+                            M27.900024,9.499996 L27.900024,31.199999 24.599976,31.199999 24.599976,12.800013z 
+                            M28.700012,9.1000021 L29,9.1000021 32,12.100001 32,31.099993 28.700012,31.099993z 
+                            M31.400024,0 L31.099976,7.2000096 28.900024,4.9999983 18.200012,15.700006 
+                            17.900024,15.999993 11.700012,9.8000143 0.70001221,20.80001 0.70001221,15.800012 
+                            11.599976,4.8000167 17.900024,11.100002 26.400024,2.6000052 24.200012,0.4000244z</x:String> 
+                </ResourceDictionary>
+            </chart:SfCartesianChart.Resources>
+            <chart:SfCartesianChart.Title>
+                <Grid>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="{OnPlatform Android=68,Default=80,iOS=68}"/>
+                    </Grid.RowDefinitions>
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="55"/>
+                        <ColumnDefinition Width="Auto"/>
+                    </Grid.ColumnDefinitions>
+
+                    <Path Data="{StaticResource UpTrendIcon}" Fill="#FF000000" Margin="10,15,10,0">
+                        <Path.RenderTransform>
+                            <TransformGroup>
+                                <TransformGroup.Children>
+                                    <RotateTransform Angle="0"/>
+                                    <ScaleTransform ScaleX="1" ScaleY="1"/>
+                                </TransformGroup.Children>
+                            </TransformGroup>
+                        </Path.RenderTransform>
+                    </Path>
+                    <StackLayout Grid.Column="1" Grid.Row="0" Margin="7,7,0,0">
+                        <Label Text="Visualizing Country GDP and Market Cap Through Public Companies" FontSize="{OnPlatform Android=12,Default=20,iOS=12}" FontAttributes="Bold" TextColor="Black"/>
+                        <Label Text="Detailed Analysis Highlighting Market Capitalization, GDP, and the Number of Publicly Listed Companies" FontSize="{OnPlatform Android=10,Default=16,iOS=10}" TextColor="Black" Margin="0,2,0,0"/>
+                    </StackLayout>
+                </Grid>
+            </chart:SfCartesianChart.Title>
+
+            <chart:SfCartesianChart.BindingContext>
+                <model:MarketCapViewModel/>
+            </chart:SfCartesianChart.BindingContext>
+
+            <chart:SfCartesianChart.TooltipBehavior>
+                <chart:ChartTooltipBehavior/>
+            </chart:SfCartesianChart.TooltipBehavior>
+
+            <chart:SfCartesianChart.XAxes>
+                <chart:NumericalAxis Minimum="0" Maximum="400" ShowMajorGridLines="False">
+                    <chart:NumericalAxis.Title>
+                        <chart:ChartAxisTitle Text="Countries GDP Levels"/>
+                    </chart:NumericalAxis.Title>
+                    <chart:NumericalAxis.LabelStyle>
+                        <chart:ChartAxisLabelStyle TextColor="Black"/>
+                    </chart:NumericalAxis.LabelStyle>
+                    <chart:NumericalAxis.AxisLineStyle>
+                        <chart:ChartLineStyle Stroke="black"/>
+                    </chart:NumericalAxis.AxisLineStyle>
+                    <chart:NumericalAxis.MajorTickStyle>
+                        <chart:ChartAxisTickStyle Stroke="black"/>
+                    </chart:NumericalAxis.MajorTickStyle>
+                </chart:NumericalAxis>
+            </chart:SfCartesianChart.XAxes>
+
+            <chart:SfCartesianChart.YAxes>
+                <chart:NumericalAxis Minimum="0" Maximum="6000" Interval="1000" ShowMajorGridLines="False" LabelCreated="OnLabelCreated" PlotOffsetStart="10">
+                    <chart:NumericalAxis.Title>
+                        <chart:ChartAxisTitle Text="No of Companies"/>
+                    </chart:NumericalAxis.Title>
+                    <chart:NumericalAxis.LabelStyle>
+                        <chart:ChartAxisLabelStyle TextColor="Black"/>
+                    </chart:NumericalAxis.LabelStyle>
+                    <chart:NumericalAxis.AxisLineStyle>
+                        <chart:ChartLineStyle Stroke="black"/>
+                    </chart:NumericalAxis.AxisLineStyle>
+                    <chart:NumericalAxis.MajorTickStyle>
+                        <chart:ChartAxisTickStyle Stroke="black"/>
+                    </chart:NumericalAxis.MajorTickStyle>
+                </chart:NumericalAxis>
+            </chart:SfCartesianChart.YAxes>
+
+            <model:BubbleExt XBindingPath="Gdp" MaximumRadius="{OnPlatform Android=28, Default=50, iOS=28}" MinimumRadius="5" EnableTooltip="True" 
+                              YBindingPath="Company"  SizeValuePath="Size" Stroke="Black" StrokeWidth="2"
+                              ItemsSource="{Binding MarketCapData}" 
+                              EnableAnimation="True">
+
+                <chart:BubbleSeries.TooltipTemplate>
+                    <DataTemplate>
+                        <Grid BackgroundColor="Black">
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="Auto"/>
+                                <RowDefinition Height="Auto"/>
+                                <RowDefinition Height="Auto"/>
+                            </Grid.RowDefinitions>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="Auto"/>
+                            </Grid.ColumnDefinitions>
+                            <Grid Grid.Row="0" Grid.Column="0" Margin="3,5,10,3">
+                                <HorizontalStackLayout HorizontalOptions="Center">
+                                    <Label Text="{Binding Item.Name}" FontSize="18" TextColor="White" HorizontalTextAlignment="Center" Margin="0,0,0,0"/>
+                                </HorizontalStackLayout>
+                            </Grid>
+                            <BoxView Grid.Row="1" Grid.Column="0" VerticalOptions="Center" BackgroundColor="White" HeightRequest="1"/>
+                            <Grid Grid.Row="2" Grid.Column="0" Margin="3,5,10,3">
+                                <StackLayout>
+                                    <Label Text="{Binding Item.Gdp,StringFormat='GDP                         :  {0}  '}" TextColor="White" VerticalTextAlignment="Center" HorizontalTextAlignment="Start"/>
+                                    <Label Text="{Binding Item.Company,StringFormat='Companies listed  :  {0}  '}" TextColor="White" VerticalTextAlignment="Center" HorizontalTextAlignment="Start"/>
+                                    <Label Text="{Binding Item.Size,StringFormat='Market Cap            : € {0} B '}" TextColor="White" VerticalTextAlignment="Center" HorizontalTextAlignment="Start"/>
+                                </StackLayout>
+                            </Grid>
+                        </Grid>
+                    </DataTemplate>
+                </chart:BubbleSeries.TooltipTemplate>
+            </model:BubbleExt>
+        </chart:SfCartesianChart>
+    </Border>
+</ContentPage>
diff --git a/MarketCap/MainPage.xaml.cs b/MarketCap/MainPage.xaml.cs
@@ -0,0 +1,49 @@
+using Syncfusion.Maui.Charts; 
+
+namespace MarketCap
+{
+    public partial class MainPage : ContentPage
+    {
+
+        public MainPage()
+        {
+            InitializeComponent();
+        }
+        private void OnLabelCreated(object sender, Syncfusion.Maui.Charts.ChartAxisLabelEventArgs e)
+        {
+            // Check if the value is in thousands
+            if (e.Position is double value && value >= 1000)
+            {
+                // Divide by 1000 and append "k"
+                e.Label = (value / 1000).ToString("0") + "K";
+            }
+        }
+    }
+
+    public class BubbleExt : BubbleSeries
+    {
+        protected override ChartSegment CreateSegment()
+        {
+            return new BubbleSegmentExt();
+        }
+
+    }
+    public class BubbleSegmentExt : BubbleSegment
+    {
+        protected override void Draw(ICanvas canvas)
+        {
+            base.Draw(canvas);
+
+            if (Series is BubbleExt && Series.BindingContext is MarketCapViewModel viewModel)
+            {
+
+                float imageX = CenterX - (Radius / 2);
+                float imageY = CenterY - (Radius / 2);
+
+                float diameter = Radius * 2; // Since radius is half of the diameter
+                canvas.DrawImage(viewModel.MarketCapData[Index].ImageIcon, CenterX - Radius, CenterY - Radius, diameter, diameter);
+            }
+        }
+    }
+
+}