add chart

Billing.Shared/Views/BillPage.xaml

@@ -23,7 +23,7 @@
     </ContentPage.Resources>
 
     <Shell.TitleView>
-        <Grid ColumnSpacing="16">
+        <Grid>
             <DatePicker x:Name="titleDatePicker" IsVisible="False" Date="{Binding SelectedDate, Mode=TwoWay}"
                         ios:DatePicker.UpdateMode="WhenFinished"
                         DateSelected="TitlePicker_DateSelected"/>
@@ -46,7 +46,7 @@
     </Shell.TitleView>
 
     <ContentPage.ToolbarItems>
-        <ToolbarItem Order="Primary" Priority="1" IconImageSource="plus.png" Command="{Binding EditBilling}"/>
+        <ToolbarItem Order="Primary" IconImageSource="plus.png" Command="{Binding EditBilling}"/>
     </ContentPage.ToolbarItems>
 
     <Grid RowDefinitions="Auto, Auto, *">

Billing.Shared/Views/RankPage.xaml

@@ -8,6 +8,39 @@
                 x:Class="Billing.Views.RankPage"
                 x:Name="rankPage"
                 x:DataType="v:RankPage"
-                BindingContext="{x:Reference rankPage}">
-    <chart:ChartView Chart="{Binding Chart}"/>
+                BindingContext="{x:Reference rankPage}"
+                Shell.TabBarIsVisible="True">
+
+    <Shell.TitleView>
+        <Grid>
+            <StackLayout Margin="30, 0, 0, 0" HorizontalOptions="Center" VerticalOptions="Center"
+                         Orientation="Horizontal" Spacing="10">
+                <ui:TintImageButton Source="calendar.png" WidthRequest="20" HeightRequest="20"
+                                    VerticalOptions="Center" HorizontalOptions="Start"
+                                    Command="{Binding LeftCommand}"/>
+                <Label Text="{Binding Title}"
+                       TextColor="{DynamicResource PrimaryColor}"
+                       FontSize="{OnPlatform Android=20, iOS=18}">
+                    <Label.FontFamily>
+                        <OnPlatform x:TypeArguments="x:String"
+                                    Android="OpenSans-SemiBold.ttf#OpenSans-SemiBold"
+                                    iOS="OpenSans-Bold"/>
+                    </Label.FontFamily>
+                </Label>
+                <ui:TintImageButton Source="right.png" WidthRequest="20" HeightRequest="20"
+                                    VerticalOptions="Center" HorizontalOptions="End"
+                                    Command="{Binding RightCommand}"/>
+            </StackLayout>
+        </Grid>
+    </Shell.TitleView>
+
+    <ContentPage.ToolbarItems>
+        <ToolbarItem Order="Primary" IconImageSource="plus.png" Command="{Binding FilterCommand}"/>
+    </ContentPage.ToolbarItems>
+
+    <ScrollView>
+        <StackLayout>
+            <chart:ChartView HeightRequest="240" Chart="{Binding Chart}"/>
+        </StackLayout>
+    </ScrollView>
 </ui:BillingPage>

Billing.Shared/Views/RankPage.xaml.cs

@@ -1,29 +1,107 @@
-using Billing.UI;
+using Billing.Languages;
+using Billing.Models;
+using Billing.Themes;
+using Billing.UI;
 using Microcharts;
+using SkiaSharp;
+using SkiaSharp.Views.Forms;
 using System;
 using System.Collections.Generic;
 using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-
 using Xamarin.Forms;
-using Xamarin.Forms.Xaml;
 
 namespace Billing.Views
 {
     public partial class RankPage : BillingPage
     {
         private static readonly BindableProperty ChartProperty = Helper.Create<Chart, RankPage>(nameof(Chart));
+        private static readonly BindableProperty TopBillsProperty = Helper.Create<IList<UIBill>, RankPage>(nameof(TopBills));
 
         public Chart Chart
         {
             get => (Chart)GetValue(ChartProperty);
             set => SetValue(ChartProperty, value);
         }
+        public IList<UIBill> TopBills
+        {
+            get => (IList<UIBill>)GetValue(TopBillsProperty);
+            set => SetValue(TopBillsProperty, value);
+        }
+
+        public Command LeftCommand { get; }
+        public Command RightCommand { get; }
+        public Command FilterCommand { get; }
+
+        private DateTime current;
+        private IEnumerable<Bill> bills;
+        private CategoryType type = CategoryType.Spending;
 
         public RankPage()
         {
+            LeftCommand = new Command(OnLeftCommand);
+            RightCommand = new Command(OnRightCommand);
             InitializeComponent();
         }
+
+        public override void OnLoaded()
+        {
+            SetMonth(DateTime.Today);
+        }
+
+        private void OnLeftCommand()
+        {
+            SetMonth(current.AddMonths(-1));
+        }
+
+        private void OnRightCommand()
+        {
+            SetMonth(current.AddMonths(1));
+        }
+
+        private void SetMonth(DateTime date)
+        {
+            current = date.AddDays(1 - date.Day);
+            var end = current.AddDays(DateTime.DaysInMonth(current.Year, current.Month));
+
+            var format = Resource.DateRangeFormat;
+            Title = current.ToString(format) + " ~ " + end.AddDays(-1).ToString(format);
+
+            bills = App.Bills.Where(b => b.CreateTime >= current && b.CreateTime <= end);
+
+            var entries = new List<ChartEntry>();
+            var primaryColor = BaseTheme.CurrentPrimaryColor.ToSKColor();
+            var textColor = BaseTheme.CurrentSecondaryTextColor.ToSKColor();
+            for (var day = current; day <= end; day = day.AddDays(1))
+            {
+                var daybills = bills.Where(b => Helper.IsSameDay(b.CreateTime, day));
+                decimal amount;
+                if (type == CategoryType.Income)
+                {
+                    amount = daybills.Where(b => b.Amount > 0).Sum(b => b.Amount);
+                }
+                else
+                {
+                    amount = daybills.Where(b => b.Amount < 0).Sum(b => -b.Amount);
+                }
+                if (amount > 0)
+                {
+                    entries.Add(new((float)amount)
+                    {
+                        Label = day.ToString("MM/dd"),
+                        ValueLabel = amount.ToString("#,##0.##"),
+                        Color = primaryColor,
+                        TextColor = textColor,
+                        ValueLabelColor = textColor
+                    });
+                }
+            }
+
+            Chart = new LineChart
+            {
+                BackgroundColor = SKColors.Transparent,
+                LabelTextSize = 20,
+                Entries = entries
+            };
+        }
     }
 }