Index: bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/charts/line-chart.component.ts
===================================================================
--- bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/charts/line-chart.component.ts	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
+++ bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/charts/line-chart.component.ts	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
@@ -0,0 +1,90 @@
+import { Component, Input, OnInit, OnDestroy } from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
+import {NGX_ECHARTS_CONFIG, NgxEchartsModule} from "ngx-echarts";
+import {Line} from "../../model/Line";
+
+export interface CommutesByHour {
+   id: number,
+   line: Line,
+   interval: string,
+   numberOfCommutes: number,
+}
+
+@Component({
+  selector: 'app-line-chart',
+  template: `
+    <div echarts [options]="chartOptions" class="chart"></div>`,
+  standalone: true,
+  imports: [NgxEchartsModule],
+  providers: [
+    {
+      provide: NGX_ECHARTS_CONFIG,
+      useFactory: () => ({ echarts: () => import('echarts') }),
+    },
+  ],
+  styles: [`
+    .chart {
+      width: 100%;
+      height: 400px;
+    }
+  `]
+})
+export class LineChartComponent implements OnInit, OnDestroy {
+  @Input() dataFn!: Observable<CommutesByHour[]>; // Required input
+
+  chartOptions: any;
+
+  ngOnInit(): void {
+    if (!this.dataFn) {
+      console.error('Input dataFn is required');
+      return;
+    }
+
+
+      this.dataFn.subscribe(data => {
+        console.log(data)
+        this.chartOptions = {
+          title: {
+            text: 'Number of Activities per Hour',
+            left: 'center'
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+            data: ['Number of Activities'],
+            left: 'left'
+          },
+          xAxis: {
+            type: 'category',
+            data: data.sort((x, y) => Number(x.interval.slice(0,3)) - Number(y.interval.slice(0,3))).map(d => d.interval),
+            axisLabel: {
+              rotate: 45
+            }
+          },
+          yAxis: {
+            type: 'value',
+            name: 'Number of Activities'
+          },
+          series: [
+            {
+              name: 'Number of Activities',
+              type: 'line',
+              data: data.map(d => d.numberOfCommutes),
+              smooth: true,
+              lineStyle: {
+                color: '#ff6f61'
+              },
+              itemStyle: {
+                color: '#ff6f61'
+              }
+            }
+          ]
+        };
+      }
+    );
+  }
+
+  ngOnDestroy(): void {
+  }
+}
Index: bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/charts/pie-chart/pie-chart.component.html
===================================================================
--- bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/charts/pie-chart/pie-chart.component.html	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
+++ bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/charts/pie-chart/pie-chart.component.html	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
@@ -0,0 +1,1 @@
+<div echarts [options]="chartOptions" class="chart"></div>>
Index: bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/charts/pie-chart/pie-chart.component.ts
===================================================================
--- bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/charts/pie-chart/pie-chart.component.ts	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
+++ bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/charts/pie-chart/pie-chart.component.ts	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
@@ -0,0 +1,67 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {NGX_ECHARTS_CONFIG, NgxEchartsModule} from "ngx-echarts";
+import {Observable} from "rxjs";
+import {PieChartValues} from "../../../model/PieChartValues";
+
+
+
+@Component({
+  selector: 'app-pie-chart',
+  standalone: true,
+  imports: [NgxEchartsModule],
+  providers: [
+    {
+      provide: NGX_ECHARTS_CONFIG,
+      useFactory: () => ({ echarts: () => import('echarts') }),
+    },
+  ],
+  templateUrl: './pie-chart.component.html',
+  styleUrl: './pie-chart.component.css'
+})
+export class PieChartComponent implements OnInit {
+  @Input() dataFn!: Observable<PieChartValues[]>
+  chartOptions: any;
+
+  ngOnInit(): void {
+    this.dataFn.subscribe({
+      next: value => {
+        this.chartOptions = this._getOptions(value)
+      }
+    })
+
+  }
+
+  private _getOptions(value: PieChartValues[]) {
+    return {
+      title: {
+        text: 'Fines per Line',
+          subtext: 'Current Year',
+          left: 'center'
+      },
+      tooltip: {
+        trigger: 'item'
+      },
+      legend: {
+        orient: 'vertical',
+          left: 'left'
+      },
+      series: [
+        {
+          name: 'Fines',
+          type: 'pie',
+          radius: '50%',
+          data: [
+            ...value
+          ],
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)'
+            }
+          }
+        }
+      ]
+    };
+  }
+}
Index: bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/charts/stacked-bar-chart.component.ts
===================================================================
--- bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/charts/stacked-bar-chart.component.ts	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
+++ bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/charts/stacked-bar-chart.component.ts	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
@@ -0,0 +1,101 @@
+import { Component, Input, OnInit, OnDestroy } from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
+import {NGX_ECHARTS_CONFIG, NgxEchartsModule} from "ngx-echarts";
+
+export interface IncomeData {
+  id: number;
+  year: string;
+  finesIncome: number;
+  ticketIncome: number;
+  totalIncome: number;
+}
+
+@Component({
+  selector: 'app-income-chart',
+  template: `
+    <div echarts [options]="chartOptions" class="chart"></div>`,
+  standalone: true,
+  imports: [NgxEchartsModule],
+  providers: [
+    {
+      provide: NGX_ECHARTS_CONFIG,
+      useFactory: () => ({ echarts: () => import('echarts') }),
+    },
+  ],
+  styles: [`
+    .chart {
+      width: 100%;
+      height: 400px;
+    }
+  `]
+})
+export class IncomeChartComponent implements OnInit, OnDestroy {
+  @Input() dataFn!: Observable<IncomeData[]>; // Required input
+
+  chartOptions: any;
+
+  ngOnInit(): void {
+    if (!this.dataFn) {
+      console.error('Input dataFn is required');
+      return;
+    }
+
+      this.dataFn.subscribe(data => {
+        console.log(data)
+        this.chartOptions = {
+          title: {
+            text: 'Yearly Income from Fines and Tickets',
+            left: 'center'
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: { type: 'shadow' }
+          },
+          legend: {
+            data: ['Fines Income', 'Ticket Income', 'Total Income'],
+            left: 'left'
+          },
+          xAxis: {
+            type: 'category',
+            data: data.sort((x, y) => Number(x.year) - Number(y.year)).map(d => d.year)
+          },
+          yAxis: {
+            type: 'value',
+            name: 'Income'
+          },
+          series: [
+            {
+              name: 'Fines Income',
+              type: 'bar',
+              stack: 'total',
+              data: data.map(d => d.finesIncome),
+              itemStyle: {
+                color: '#ff6f61'
+              }
+            },
+            {
+              name: 'Ticket Income',
+              type: 'bar',
+              stack: 'total',
+              data: data.map(d => d.ticketIncome),
+              itemStyle: {
+                color: '#61a0a8'
+              }
+            },
+            {
+              name: 'Total Income',
+              type: 'bar',
+              data: data.map(d => d.totalIncome),
+              itemStyle: {
+                color: '#c23531'
+              }
+            }
+          ]
+        };
+      }
+    );
+  }
+
+  ngOnDestroy(): void {
+  }
+}
