Fix compilation issues from dependency updates

src/app/app.module.ts

@@ -40,7 +40,7 @@ import { environment } from 'src/environments/environment';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { CategoryBreakdownComponent } from './categories/category-breakdown/category-breakdown.component';
-import { ChartsModule } from 'ng2-charts';
+import { NgChartsModule } from 'ng2-charts';
 import { TWIGS_SERVICE } from './shared/twigs.service';
 import { AuthInterceptor } from './shared/auth.interceptor';
 import { TwigsHttpService } from './shared/twigs.http.service';
@@ -93,7 +93,7 @@ import { EditBudgetComponent } from './budgets/edit-budget/edit-budget.component
     FormsModule,
     ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
     HttpClientModule,
-    ChartsModule,
+    NgChartsModule,
     MatCheckboxModule,
     MatCardModule,
   ],

src/app/budgets/budget-details/budget-details.component.ts

@@ -5,8 +5,8 @@ import { AppComponent } from 'src/app/app.component';
 import { Transaction } from 'src/app/transactions/transaction';
 import { Category } from 'src/app/categories/category';
 import { Observable } from 'rxjs';
-import { Label } from 'ng2-charts';
-import { ChartDataSets } from 'chart.js';
+// import { Label } from 'ng2-charts';
+import { ChartDataset } from 'chart.js';
 import { TWIGS_SERVICE, TwigsService } from 'src/app/shared/twigs.service';
 import { Actionable } from '../../shared/actionable';
 
@@ -27,8 +27,8 @@ export class BudgetDetailsComponent implements OnInit, OnDestroy, Actionable {
   actualIncome = 0;
   expectedExpenses = 0;
   actualExpenses = 0;
-  barChartLabels: Label[] = ['Income', 'Expenses'];
-  barChartData: ChartDataSets[] = [
+  barChartLabels: string[] = ['Income', 'Expenses'];
+  barChartData: ChartDataset[] = [
     { data: [0, 0], label: 'Expected' },
     { data: [0, 0], label: 'Actual' },
   ];

src/app/categories/category-breakdown/category-breakdown.component.html

@@ -4,6 +4,6 @@
     [options]="barChartOptions"
     [labels]="barChartLabels"
     [legend]="barChartLegend"
-    [chartType]="barChartType">
+    [type]="barChartType">
   </canvas>
 </div>

src/app/categories/category-breakdown/category-breakdown.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit, Input, OnChanges, SimpleChanges, SimpleChange, ViewChild } from '@angular/core';
 import { Category } from '../category';
 import { CategoriesComponent } from '../categories.component';
-import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
-import { BaseChartDirective, Label } from 'ng2-charts';
+import { ChartConfiguration, ChartType, ChartDataset } from 'chart.js';
+import { BaseChartDirective } from 'ng2-charts';
 
 @Component({
   selector: 'app-category-breakdown',
@@ -10,22 +10,24 @@ import { BaseChartDirective, Label } from 'ng2-charts';
   styleUrls: ['./category-breakdown.component.css']
 })
 export class CategoryBreakdownComponent implements OnInit, OnChanges {
-  barChartOptions: ChartOptions = {
+  barChartOptions: ChartConfiguration['options'] = {
     responsive: true,
     maintainAspectRatio: false,
     scales: {
-      xAxes: [{
+      x: {
         ticks: {
-          beginAtZero: true
+          // beginAtZero: true
         }
-      }], yAxes: [{}]
       },
+      y: {}
+    },
+    indexAxis: 'y'
   };
-  @Input() barChartLabels: Label[];
-  @Input() barChartData: ChartDataSets[] = [
+  @Input() barChartLabels: string[];
+  @Input() barChartData: ChartDataset[] = [
     { data: [0, 0, 0, 0], label: '' },
   ];
-  barChartType: ChartType = 'horizontalBar';
+  barChartType: ChartType = 'bar';
   barChartLegend = true;
   @ViewChild(BaseChartDirective) chart: BaseChartDirective;
 
@@ -35,9 +37,9 @@ export class CategoryBreakdownComponent implements OnInit, OnChanges {
 
   ngOnChanges(changes: SimpleChanges): void {
     console.log(changes);
-    if (changes.barChartLabels) {
-      this.barChartLabels = changes.barChartLabels.currentValue;
-    }
+    // if (changes.barChartLabels) {
+      // this.barChartLabels = changes.barChartLabels.currentValue;
+    // }
     if (changes.barChartData) {
       this.barChartData = changes.barChartData.currentValue;
     }