Fix #249

TheAxelander · Sep 3, 2024 · cbf5b42 · cbf5b42
1 parent 4e793f6
commit cbf5b42
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 19 deletions.
diff --git a/OpenBudgeteer.Blazor/Pages/Report.razor b/OpenBudgeteer.Blazor/Pages/Report.razor
@@ -2,12 +2,14 @@
 @using ApexCharts
 @using OpenBudgeteer.Blazor.Common
 
-
 <div class="row">
     <div class="col-md-6 col-sm-12 p-1">
         <div class="report-chart-box">
             <h4 class="report-chart-header">Month Balances</h4>
-            <ApexChart @ref="MonthBalanceChart" TItem="ReportRecord">
+            <ApexChart 
+                @ref="MonthBalanceChart" 
+                TItem="ReportRecord" 
+                Options="@(new ApexChartOptions<ReportRecord> { Theme = BaseTheme })">
                 <ApexPointSeries 
                     TItem="ReportRecord"
                     Items="_apexContext.MonthBalances"
@@ -22,7 +24,10 @@
     <div class="col-md-6 col-sm-12 p-1">
         <div class="report-chart-box">
             <h4 class="report-chart-header">Bank Balances</h4>
-            <ApexChart @ref="BankBalanceChart" TItem="ReportRecord">
+            <ApexChart 
+                @ref="BankBalanceChart" 
+                TItem="ReportRecord" 
+                Options="@(new ApexChartOptions<ReportRecord> { Theme = BaseTheme })">
                 <ApexPointSeries
                     TItem="ReportRecord"
                     Items="_apexContext.BankBalances"
@@ -39,7 +44,10 @@
     <div class="col-md-6 col-sm-12 p-1">
         <div class="report-chart-box">
             <h4 class="report-chart-header">Income & Expenses per Month</h4>
-            <ApexChart @ref="MonthIncomeExpensesChart" TItem="ReportRecord" Options="MonthIncomeExpensesChartOptions">
+            <ApexChart 
+                @ref="MonthIncomeExpensesChart" 
+                TItem="ReportRecord"
+                Options="@(new ApexChartOptions<ReportRecord> { Theme = BaseTheme, Legend = new() { Show = false } })">
                 <ApexPointSeries
                     TItem="ReportRecord"
                     Items="_apexContext.MonthIncome"
@@ -62,7 +70,10 @@
     <div class="col-md-6 col-sm-12 p-1">
         <div class="report-chart-box">
             <h4 class="report-chart-header">Income & Expenses per Year</h4>
-            <ApexChart @ref="YearIncomeExpensesChart" TItem="ReportRecord" Options="YearIncomeExpensesChartOptions">
+            <ApexChart 
+                @ref="YearIncomeExpensesChart" 
+                TItem="ReportRecord" 
+                Options="@(new ApexChartOptions<ReportRecord> { Theme = BaseTheme, Legend = new() { Show = false } })">
                 <ApexPointSeries
                     TItem="ReportRecord"
                     Items="_apexContext.YearIncome"
@@ -89,7 +100,12 @@
             <h4 class="report-chart-header">Bucket Monthly Expenses</h4>
             @foreach (var chart in _monthBucketExpensesConfigsLeft)
             {
-                <ApexChart @ref="InjectMonthBucketExpensesChart" Title="@chart.Item1" TItem="ReportRecord" Height="150">
+                <ApexChart 
+                    @ref="InjectMonthBucketExpensesChart" 
+                    TItem="ReportRecord" 
+                    Title="@chart.Item1"
+                    Height="150"
+                    Options="@(new ApexChartOptions<ReportRecord> { Theme = BaseTheme })">
                     <ApexPointSeries
                         TItem="ReportRecord"
                         Items="chart.Item2"
@@ -107,7 +123,12 @@
             <h4 class="report-chart-header">Bucket Monthly Expenses</h4>
             @foreach (var chart in _monthBucketExpensesConfigsRight)
             {
-                <ApexChart @ref="InjectMonthBucketExpensesChart" Title="@chart.Item1" TItem="ReportRecord" Height="150">
+                <ApexChart 
+                    @ref="InjectMonthBucketExpensesChart" 
+                    TItem="ReportRecord" 
+                    Title="@chart.Item1" 
+                    Height="150"
+                    Options="@(new ApexChartOptions<ReportRecord> { Theme = BaseTheme })">
                     <ApexPointSeries
                         TItem="ReportRecord"
                         Items="chart.Item2"

diff --git a/OpenBudgeteer.Blazor/Pages/Report.razor.cs b/OpenBudgeteer.Blazor/Pages/Report.razor.cs
@@ -6,6 +6,7 @@
 using Microsoft.AspNetCore.Components;
 using OpenBudgeteer.Blazor.Common;
 using OpenBudgeteer.Blazor.ViewModels;
+using OpenBudgeteer.Core.Common;
 using OpenBudgeteer.Core.Data.Contracts.Services;
 
 namespace OpenBudgeteer.Blazor.Pages;
@@ -23,14 +24,10 @@ private ApexChart<ReportRecord> InjectMonthBucketExpensesChart
     {
         set => MonthBucketExpensesCharts.Add(value);
     }
-
-    private ApexChartOptions<ReportRecord> MonthIncomeExpensesChartOptions = new()
-    {
-        Legend = new() { Show = false }
-    };
-    private ApexChartOptions<ReportRecord> YearIncomeExpensesChartOptions = new()
+    private Theme BaseTheme => new()
     {
-        Legend = new() { Show = false }
+        Mode = AppSettings.Mode == AppSettings.ThemeMode.Dark ? Mode.Dark : Mode.Light, 
+        Palette = PaletteType.Palette1
     };
 
     private ApexReportViewModel _apexContext = null!;
@@ -53,10 +50,10 @@ protected override async Task OnInitializedAsync()
         StateHasChanged();
         var tasks = new List<Task>()
         {
-            MonthBalanceChart.UpdateSeriesAsync(true),
-            BankBalanceChart.UpdateSeriesAsync(true),
-            MonthIncomeExpensesChart.UpdateSeriesAsync(true),
-            YearIncomeExpensesChart.UpdateSeriesAsync(true)
+            MonthBalanceChart.UpdateSeriesAsync(),
+            BankBalanceChart.UpdateSeriesAsync(),
+            MonthIncomeExpensesChart.UpdateSeriesAsync(),
+            YearIncomeExpensesChart.UpdateSeriesAsync()
         };
         tasks.AddRange(MonthBucketExpensesCharts
             .Select(monthBucketExpensesChart => monthBucketExpensesChart.UpdateSeriesAsync()));

diff --git a/OpenBudgeteer.Core/Common/AppSettings.cs b/OpenBudgeteer.Core/Common/AppSettings.cs
@@ -1,6 +1,21 @@
-namespace OpenBudgeteer.Core.Common;
+using OpenBudgeteer.Core.Common.Extensions;
+
+namespace OpenBudgeteer.Core.Common;
 
 public static class AppSettings
 {
+    public enum ThemeMode { Light, Dark }
+
     public static string Theme { get; set; } = "default";
+
+    public static ThemeMode Mode => Theme switch
+    {
+        "cyborg" or 
+        "darkly" or 
+        "slate" or 
+        "solar" or 
+        "superhero" or 
+        "vapor" => ThemeMode.Dark,
+        _ => ThemeMode.Light
+    };
 }